Fredrik Normén

Will .NET RIA Services be the Silver Bullet!

Fredrik N — Thu, 30 Apr 2009 06:30:00 GMT

I have spend some time on the Silverligth.net forum and in the .NET RIA Services thread.. and just created a replay on a post about RIA Architecture and design.. I have some concerns regarding to how developers are using .NET RIA Services etc.. maybe it’s not a big deal.. but I will try to share my concerns and made a copy of my replay and created it as a blog post. I look forward to your comments. To get basic understanding about about my view of a RIA Architecture and also .NET RIA Servers, I prefer you read my two other blog post before you read this blog post.

RIA Architecture with Silverlight in mind

A different view of the .Net RIA Services

Developers are so desire to use a perfect and great domain model to work with. It will help us a lot..(I will claim that a domain model is not a silver bullet, it's a way we prefer to work these days, and I prefer it too). We are used to work that way, we like to work that way.. so why not do it and why not in a distributed system? There are some technologies that tried to make sure we could work with object in a distributed system, like DCOM, CORBA and RMI etc. Now we have .NET RIA Services..

When I have read threads in Silverlight.Net forum, I notice that developers tries to create complex models and want a server side model to also be used on the client side. Nothing strange, it’s how we will work, right? So what is the main problem? Well, developers creates complex models, and do it in one place (on the server side), and the .NET RIA Services can "copy" by using code-gen this model to the client-side. Developers can still work with the entities as it was locally, because it is what we want to do, it make it a lot easier for use to build our apps.. we are used to it! But one of the problems with systems like DCOM, RMI, CORBA and sort of .NET RIA Services is that they tend to try and hide the fact that we are actually talking across a network. Everyone that uses these technologies knows that we are talking across a network, but it’s so easy to forget about it, because of the possibility to use object in a way we want to. The way they hide it, is that we don’t need to care about knowing about it. It’s the plumbing that is removed from us. So we can create our model, and suddenly we have it on the client side and can work with it as it was “locally”. We have one place where we create our shared domain model and we can forget about the network (not saying that everyone does, but regarding to some post in this forum, I think they are).

By adding inheritance, lazy-loading (which we want to use, to solve some problems) etc, will only make sure we try more and more to work in a way we are used to, even with a distributed system, and we will get blinded and don’t see the network. We don’t want to see it, because it will affect how we wants to work, and it make sure we can’t do what we wants to do.. so we just remove it from our mind, we hide it, we don’t see it, we pretend it wasn’t there. I love the sounds of it, it would be perfect if we don’t need to think about it. Because if it was never there, we can work in the way we want to work, right?

As long as developers know and have the network in mind and create a model based on it, I will be satisfied, but it will probably not happen. The same mistakes have done before, and we are only repeating our self. Designing a system that uses both network capabilities and object oriented design techniques to their fullest advantage is still possible and desirable, and engineers will try to solve this. Some day they may succeed, maybe the final version of .NET RIA Services will be the ONE! But as long as there isn’t a Silver bullet yet! I will try to remind people about the network and the distribution.

EDIT: Only to not get comments regarding the hidden stuff:

I know that .NET RIA Services team is not trying to “hide” the distributin, but the way people wants to use it, to solve a common problem, and what they are requested and tries to do, concerns me.. and what most developers wants (if it will be available), will make sure the distribution will become “hidden”.

RIA Architecture with Silverlight in mind

Fredrik N — Sun, 19 Apr 2009 10:47:00 GMT

Rich Internet Application (RIA) is an interesting topic. More and more business apps are moving into to the cloud, and more and more will have better User Experience (Ux). According to Gartner Research, nearly 60 percent of all new application development will include RIA technology by 2010. Today we can use different technologies to build a RIA, for example, AJAX, Flash and Silverlight etc. When it comes to AJAX we will soon reach the top of what we can do with it, because of the limitation of HTML, Client-side scripts and the browsers etc. That makes Silverlight and Flash more interesting regarding to me. But what is RIA? RIA It’s an internet applications that looks and feels like desktop applications, it also provide most of the maintainability and deployment benefits of Web applications. A RIA client can have state, so to increase User Experience, the user can work with data for a while until it will be passed down to the server for processing. Because the client side of a RIA can have state and work with data for a while, it’s extra important to have concurrency in mind. Some other users can have changed the data during the time we have worked with our copy. When developing RIA Clients we need to have several things in mind, for example a RIA is often running within an execution container in the Browser, so people can hit the refresh button or use the back and forward buttons, which can be reload the whole app and the current state can be gone. When we creates a large RIA, we can’t let users wait for hours until the application is loaded and started, so we need to load views etc on demand, and split them into small “modules”. Developing a RIA is not like developing a stateless ASP.NET app.

In this post I will write about the architecture and design I use when building a RIA with Silverlight.

The following is a figure of an Architecture of a typical RIA implementation:

The Presentation Layers purpose is to make sure users gets the best possible User Experience. The Presentation Layer of a RIA should not include too much business logic, instead it will communicate with a Web Server to perform business operations. This is done by accessing a Application Service Layer which in turn will communicate with the Domain Model [Evans DDD]. In this post I will focus more on the Application Service Layer and the Presentation layer, rather then the other layers or tiers.

Business Logic, where to place it?

Because a RIA often look and feel like a desktop application, and can have state, it can be appealing to add a lot of business logic to the Presentation Layer. But try to not do that. The only kind of business logic that should be in the Presentation Layer is user input validations, and business logic that can increase user experience and increases performance overall, for example by avoiding communications to the Web Server or some expensive business operations, which can for example improve the UI responsiveness. Start with your business logic implementation on the server and expose them through services. It will make sure you don’t start adding a lot of business logic to the client at the first place. One problem with the business logic is that same business logic can exists on both the client and server side. For example validations. To address this issue you can for example use the Microsoft .NET RIA Services. If you don’t want to use the .NET RIA Services, make sure you group the business logic into a separate assembly, which you can share both with the Server and client, or at least make sure you reuse the same kind of code and language, so you can easily replace the code when changes is made to the business logic on the server and should also be changed on the client side. Some logic should never be on the client side, such as highly sensitive business logic. Add it to the server for security reasons. If the client side are going to need a lot of business logic that can be changed often, make sure to add it to a downloadable module. It will make it easy to replace the logic without re-downloading the entire RIA application.

How to share Business logic between tier with .Net RIA Services

The .NET RIA Services lets us create a DomainService where we can add our CRUD operations and custom queries. We can also use metadata to add shared validation logic and also add code that should be shared between the client and the server. .NET RIA Services will locate our DomainServices, metadata and shared code, and generate client-side classes for us. The following code is a simple DomainService which will return a list of an “Entity” (You can find more about design considerations etc when creating entities later in this post):

[EnableClientAccess()]
public class UserService : DomainService
{
    private UserDataService _userDataService = new UserDataService();

    [Query(PreserveName=true)]
    public IEnumerable<User> Followers()
    {
        return this._userDataService.Users;
    }
}

Here is en implementation of the User Entity:

public partial class User
{
   [Key]
   public string ID { get; set; }

   public string Name { get; set; }

   public string Description { get; set; }
}

To add validations that are applied on both tiers we can create a metadata class:

[MetadataType(typeof(UserMetaData))]
public partial class User
{
    internal sealed class UserMetaData
    {
        [Required]
        public string Name;

        [Required]
        [StringLength(255, MinimumLength = 0)]
        public string Description;
    }
}

The above metadata class will make sure that the generated Entity for the client-side will have the validations specified by using attributes. When it comes to validation, make sure to validate both on the client side to improve user experience, and server side validation for security. The magic to share business logic between the client and server is by using code generation. There is only one place the business logic is added, and it’s on the server side, but can be shared with the client side without adding duplications.

Communication

To increase the user experience and performance, the communication from the client side to the server must be made asynchronous. If not we can block the UI thread. If long running code is needed, it’s worth to consider if a background thread should be used or not. Here is an example how the Silverlight’s BackgroudWorker can be used to run a thread in the background:

public MainPage()
{
    InitializeComponent();

    var bw = new BackgroundWorker();
    bw.RunWorkerCompleted += bw_RunWorkerCompleted;
    bw.DoWork += bw_DoWork;
    bw.RunWorkerAsync();
}

void bw_DoWork(object sender, DoWorkEventArgs e)
{
    //perform the work
    e.Result = result of the operation if any
}

void bw_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
    if (e.Error != null)
       //handle exception

    //get the result from e.Result and do for example update UI
}

Note: When performing operations in a background thread, it can be advisable to show the user the progress of the operation (if the user should see any result after the operation is completed). The BackgroundWorker class has a ProgressChanged support.

To communicate to the Server, WCF, APS.NET WebServices, .NET RIA Services, ADO.NET Data Service, WebClient etc can be used. When passing data from server to the client or back, try to remember that there can be some bandwidth limitations. When creating a distributed system, objects shouldn’t be distributed. So don’t distribute your domain model’s entity. Instead create new kind of “resources”. For example by using formats like JSON, XML or DataContracts, and only pass the data that is needed by the presentation layer. Try to focus on what data a specific View needs. If you need to save data on the client-side for offline support, make sure to use the Isolated Storage or the new SaveFileDialog added to Silverlight 3.0. Don’t use a local databases, instead make sure you make a call to a Service. If it would be catastrophic to lose state data on the client, make sure to store it on the server. Try to minimize the number of round-trips to the server. Make sure to filter all data at server rather than at the client to reduce the amount of data that must be sent over the network. By using .NET RIA Services, we can without adding new methods to the DomainService, make sure a Query is passed as an argument to the server and the server will do the filtering. Try to avoid creating too much queries on the client side, if you have common quires witch is located on several Views on the client side, make sure you add a common query as a method to a DomainService instead. It will make it much easier for you to maintain the application.

The following is an example of how WebClient together with XDocument can be used to retrieve data from the server, with a REST like way:

public MainPage()
{
     InitializeComponent();

     var wc = new WebClient();

     wc.OpenReadCompleted += wc_OpenReadCompleted;
     wc.OpenReadAsync(new Uri("/User/Followers", UriKind.Relative));
}

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    XDocument xmlUsers = XDocument.Load(e.Result);

    var users = from user in xmlUsers.Descendants("user")
                select new
                       {
                         ID = (string)user.Element("ID").Value,
                         Name = (string)user.Element("Name").Value,
                         Description = (string)user.Element("Description").Value
                       }; 

}

The “/User/Followers” URI used by the WebClient, can for example be a REST API created by using ASP.NET MVC:

public class UserController : Controller
{
    public ActionResult Followers()
    {
        var userDataService = new UserDataService();

        return View(userDataService.Users);
    }
}

Followers.aspx 

<%@ Page Language="C#" 
         Inherits="System.Web.Mvc.ViewPage<List<Models.User>>" %> 
<users type="array"> 
    <% foreach (var user in ViewData.Model) { %>
        <user> 
            <id><%= Html.Encode(user.ID)%></id> 
            <name><%= Html.Encode(user.Name)%></name> 
            <description><%= Html.Encode(user.Description)%></description> 
        </user>
    <% } %> 
    </user> 
</users>

The following is how we can use a WCF Service to retrieve data from the server. The WCF Service is part of the Application Service Layer:

[DataContract]
public class User
{
    [DataMember]
    public string ID { get; set; }

    [DataMember]
    public string Name { get; set; }

    [DataMember]
    public string Description { get; set; }
}

 
public class UserService
{
    private UserDataService _userDataService = new UserDataService();

    [OperationContract]
    public IEnumerable<User> GetFollowers()
    {
        return _userDataService.Users;
    }
}

MainPage.xaml.cs

public MainPage()
     {
         InitializeComponent();

         var us = new UserServiceClient();
         us.GetFollowersCompleted += us_GetFollowersCompleted;
         us.GetFollowersAsync();
         
         
         myGrid.ItemsSource = _uc.Users;
         _uc.Followers(_uc.Users.AsQueryable<User>().Where( c => c.ID == "1") , null);

     }

     void us_GetFollowersCompleted(object sender, GetFollowersCompletedEventArgs e)
     {
         myGird.ItemSource = e.Result;
     }

As you can see in the above code, a DataContract is created, this contract should only return the information that the client needs. To minimize the data sent to the client over the network, it can be good to create data contracts for each View (Client side “forms”), but be pragmatic. If we will have more than one View that need the same data, we can reuse the same contracts if the different is only one or two properties, it may be unnecessarily to create two data contracts to reduce the data sent over the wire. But still have bandwidth in mind. I often create one Service per View, and if there are some other Views that should reuse the exact same kind of operations I reuse the Service, or create a new Service which in turn will access the other Service. It depends on the app and the Views etc.

To make a call to a WCF Service, a Service Reference is needed to locate the Service and to create a client-side proxy class to make it easy to communicate with the Service.

In the first example in this post I showed some .NET RIA Services code, where I created a DomainService. When the solution is build a generated proxy class will be created and added to the Silverlight project. This class is called a DomainContext. Here is an example where .NET RIA Services DomainContext is used to communicate to the DomainService:

public partial class MainPage : UserControl
{
    UserContext _uc = new UserContext();

    public MainPage()
    {
        InitializeComponent();

        var us = new UserServiceClient();
        us.GetFollowersCompleted += us_GetFollowersCompleted;
        us.GetFollowersAsync();
        
        myGrid.ItemsSource = _uc.Users;
        _uc.Followers();

    }

    void us_GetFollowersCompleted(object sender, GetFollowersCompletedEventArgs e)
    {
        myGird.ItemSource = e.Result;
    }
}

Now when you have seen some different ways to communicate with a Service form the Client, we can focus more on the data passed to the client from the server and back..

Data

When creating a distributed system we should never distribute an object. So don’t try to pass entities from the Domain Model to the client side. Instead create a new model only for presentation purpose. For example with DataContracts or if you are using REST a resource, or a thin object only used for presentation purpose if you are using .NET RIA Services. Here is a figure over how I often build my applications:

Note: The View Model is not the Pattern ViewModel. It’s a model created for presentation purpose only, for example a DataContract, or at .NET RIA Services Entity etc.

One of the important part when creating a RIA, is to focus on the “model” that the View should use. If we for example should list all Customers, and we only need display three properties, we creates a class/resource or DataContract for that purpose, for example:

public partial class Customer
{
   [Key]
   public string ID { get; set; }

   public string Name { get; set; }

   public string Country { get; set; }
}

If we need more detail about a Customer, we create a new class with the properties needed:

public partial class CustomerDetail
{
  [Key]
  public string ID { get; set; }

  public string Name { get; set; }

  public string Country { get; set; }

  public string Description { get; set; }

  public string Email { get; set; }
  ...
}

When building RIA, performance and bandwidth is something we should have in consideration, so it’s not sure a user will show detailed information about a Customer, so in this case we make sure we have two methods in our Application Service Layer, GetCustomer and GetCustomers. The GetCustomer will return the CustomerDetail class and the GetCustomers the Customer class. If we know that a user will show all the information of a customer, and will get a set of Customers to always work with. We can create a method that will return a list of CustomerDetails. If we create a small applications for few users and it’s an intranet application, the bandwidth may not be a problem, so in that case we can return more data that isn’t needed in specific scenario but is needed for other scenarios to reduce the number of classes created etc. So everything depends on!

Presentation Layer Pattern

I often use a UI patterns like the Presentation Model/ViewModel pattern. The MVC pattern could be used, but I prefer the Presentation Model pattern in a RIA. If you are interested in how a Presentation Model could look like when using Silveright, you can read the following post on my blog: http://weblogs.asp.net/fredriknormen/archive/2009/01/30/how-the-presentation-model-could-look-like-when-using-silverlight-2-0.aspx

The end

There is so much to write about when it comes to the topic of this blog post but I hope you have found some useful tip. If there is something you don’t agree on, please let me know, I only share my experience ;)

A different view of the .Net RIA Services

Fredrik N — Sat, 18 Apr 2009 08:21:00 GMT

Some of you have probably heard about the Microsoft .Net RIA Services, if not you can find some info here. In this post I will show you a different view of the .Net RIA Services, how it can be used to create a RESTfull Service, or at least try ;)

REST Services is about “nouns” (resources, like friends, customers etc) with few “verbs” for example create, read, update and destroy. We can easily create a “resource”, where the resource can be in different kind of formats like JSON, XAML, RSS etc. It’s more or less up to us what kind of formats we want to use. If we take a look at Twitter, the REST API they use can return a resource in different formats. When we create the resource, we need to create the response value (A Response value is the value returned from a REST API, it’s a resource in a specific format). If we want to get all of our Followers by using one of the Twitter’s REST API, we simply use the following URL: http://twitter.com/statuses/followers.xml the .xml at the end specify the resource “followers” format. The response value is something like this:

<?xml version="1.0" encoding="UTF-8" ?> 
<users type="array">
   <user>
     <id>1111111</id> 
     <name>John Doe</name> 
     <location>Stockholm</location> 
     <description /> 
     <profile_image_url></profile_image_url> 
     ...

   </user>

   ...

</users>

The resource is something the developers of the API have decided. If we want to use the .NET RIA Services we can simply define the resource of the response value like a simple POCO class. Like this:

public partial class User
{
    [Key]
    public string ID { get; set; }

    public string Name { get; set; }

    public string Description { get; set; }
}

Note: The KeyAttribute is needed to specify a way to specify a property which will work as an identity for the “entity”. When using the .Net RIA Services the the classes we can create are referred as a Entity in a model. So we create a “model” more or less, but don’t see the User class as an entity in a Model, instead as a resource used by a specific REST API.

By default .NET RIA Services will “serialize” the above class to a JSON format similar to this:

{
   "__type":"User:http://schemas.datacontract.org/2004/07/SilverlightApplication8.Web.DataModel",
   "ID":"1",
   "Name":"John Doe",
   "Description":"John Doe\u0027s description"
}

Remember that this post is a different view of the .Net RIA Services, so once again try to see the POCO as a simple resource, not as an object which we will distribute (We all know that we shouldn’t distribute objects).

Now when the resource is created, we can simply create a “fake” object which will return a list of it.

public class UserDataService
{
    public IEnumerable<User> Users
    {
       get
       {
           return new List<User>()
                  {
                      new User()
                      {
                          ID = "1",
                          Name = "John Doe",
                          Description = "John Doe's description"
                      },
                      new User()
                      {
                          ID = "2",
                          Name = "Jane Doe",
                          Description = "Jane Doe's description"
                      }
                  };
        }
    }
}

Note: I couldn’t find a good name for this class, it looks like its a some kind of data access class but it isn’t. It’s more like taking a existing model and transform it to a resource.

The next step is to create our REST API, in this case we can for example call it Followers, the same name as Twitter uses to get Followers. We can for example use ASP.NET MVC or a normal WebForm as a REST Service to get our resource.

The following is a REST Service where ASP.NET MVC is used with a Controller named UserController with and an Action method called Followers.

public class UserController : Controller
{
    public ActionResult Followers()
    {
        var userDataService = new UserDataService();

        return View(userDataService.Users);
    }
}

Followers.aspx

<%@ Page Language="C#" 
         Inherits="System.Web.Mvc.ViewPage<List<Models.User>>" %> 
<users type="array"> 
    <% foreach (var user in ViewData.Model) { %>
        <user> 
            <id><%= Html.Encode(user.ID)%></id> 
            <name><%= Html.Encode(user.Name)%></name> 
            <description><%= Html.Encode(user.Description)%></description> 
        </user>
    <% } %> 
    </user> 
</users>

We can get the Followers by simply use the following URL: /User/Followers">http://<servername>/User/Followers

To call the REST Service and it’s API, we can for example use the Silverlight’s WebClient class. We can also use the XDocument to get the data out from the resource:

public MainPage()
{
     InitializeComponent();

     var wc = new WebClient();

     wc.OpenReadCompleted += wc_OpenReadCompleted;
     wc.OpenReadAsync(new Uri("/User/Followers", UriKind.Relative));
}

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    XDocument xmlUsers = XDocument.Load(e.Result);

    var users = from user in xmlUsers.Descendants("user")
                select new
                       {
                         ID = (string)user.Element("ID").Value,
                         Name = (string)user.Element("Name").Value,
                         Description = (string)user.Element("Description").Value
                       }; 

}

If we use the above solution we need to do some plumbing. We first need to do a request to our URL to get the followers, then we need to read from the XML and get the values and map it to a type (if we want to work with a typed result). In this case wouldn’t it be nice to avoid some plumbing and instead use a solution where we simply use a typed API (not a string), and also get the result as typed classes with properties?

Instead of doing all the plumbing, we can use the .Net RIA Services to create a REST Service. To create and implement our REST Service and API, we create a DomainService. A DomainService within the .NET RIA Services is a class where we add our CURD API and we can also add shared domain methods etc. To create a DoaminService we create a new class which will inherits from the .NET RIA Service’s DomainService base class. We will also add our Followers API to the DomainService:

[EnableClientAccess()]
public class UserService : DomainService
{
    private UserDataService _userDataService = new UserDataService();

    [Query(PreserveName=true)]
    public IEnumerable<User> Followers()
    {
        return this._userDataService.Users;
    }
}

Note: The EnableClientAccessAttribute is only used to make sure .NET RIA Services creates a client-side proxy for our DomainService, this proxy is called a DomainContext. The QueryAttribute with the property PreserverName, will make sure the generated DomainContext for the DomainService will preserver the name Followers. Normally we should add a method called “GetFollowers”, and the .NET RIA Services code generation will generate a method for the DomainContext called “LoadFollowers”.

The Followers method will use the UserDataService’s Users method to get all the followers and return them.

When we build our solution, the .NET RIA Services will generate a DomainContext for our Silverlight app, a proxy class which will make it easier for us to “call” the DominService. The generated DomainContext will communicate to the service through an AXD called DomainService.axd using REST. After we have created our DomainService, we can if we wants to, do a direct call to the DomainService.axd and use it as a REST Service:

http://<servername>/DataService.axd/SilverlightApplication8-Web-DataModel-UserService/Followers

When we enter the above URL we will get a response value in a JSON format like this:

{
    "__type":"DataServiceResult:DomainServices",
    "IsDomainServiceException":false,
    "Results":
        [
            {
                "__type":"User:http://schemas.datacontract.org/2004/07/SilverlightApplication8.Web.DataModel",
                "ID":"1",
                "Name":"John Doe",
                "Description":"John Doe\u0027s description"
            },
            {
                "__type":"User:http://schemas.datacontract.org/2004/07/SilverlightApplication8.Web.DataModel",
                "ID":"2",
                "Name":"Jane Doe",
                "Description":"Jane Doe\u0027s description"}
        ],
    "TotalCount":-2
}

Note: The DomainService.axd will by default using the JavaScriptSerializer.

The DomainSevice.axd will take the first “parameter” “SilverlightApplication8-Web-DataModel-UserService” and replace “-“ to “.” to get the DomainService to instantiate. In this case it will be the UserService. It will then call a method with the same name as the last “parameter” of the URL, in this case “Followers” and use the JavaScriptSerializer to serialize the result of the Followers method.

By using a class we create our resource. We have used the .NET RIA Services to create a REST Service with the API Followers to return a list of Users. We can then use the DomainService.axd to call our REST API. To make it simple for us to call the REST API and get a list of Users, we can now use the generated client-side proxy class (DomainContext) in our Silverlight project. It will give us a typed API and also a typed resource. So we don’t need to use the WebClient or a JSON Serializer on the client-side, the generated DomainContext for our DominService, will handle that for us. The following code is the code-behind file of the MainPage.xaml in a Silverlight app:

public partial class MainPage : UserControl
{
    UserContext _uc = new UserContext();

    public MainPage()
    {
        InitializeComponent();

        myGrid.ItemsSource = _uc.Users;
        _uc.Followers();

    }
}

To make a call to the Followers API, we simply instantiate the generated DomainContext class “UserContext” and make a call to the Followers API. Every “entity/resource” we creates and returns from the DomainService will be added to the DomainContext as properties. So to get the User class after we make a call to the Followers method, we can use the Users property. When we call the Followers method, an asynchronous call to the DomainService will be made. The DomainContext will use REST behind the scene and call the DomainService.axd.

Wouldn’t it be nice if we could instead of getting a whole list of Users, make it possible to define a query which will only returns the Users we want based on a criteria? It’s possible, and that is really cool:

public MainPage()
{
    InitializeComponent();

    myGrid.ItemsSource = _uc.Users;
    _uc.Followers(_uc.Users.AsQueryable<User>().Where( c => c.ID == "1") , null);
}

By default all “Query” methods added to the DomainService, takes a IQueryable as an argument. So we can pass a query as an argument. So now we can use the DomainContext as a proxy to call a RESTful Service and also define a query.

In this post, I wanted to give you a “different” view of .NET RIA Services, more or less to make sure you know how it works behind the scene, and also how it can be used to define a resource and a RESTful Service, because behind the scene .NET RIA Services uses REST.

Silverlight 3,0 Split styles and templates into different files and merge resources

Fredrik N — Tue, 31 Mar 2009 19:22:00 GMT

Silverlight 3.0 now support a way to merge resources. So now we can split resources into different files. The following is a example of a simple resource file (ResourceA.xaml):

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Name="MyButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="red"/>
    </Style>

</ResourceDictionary>

When you create a resource file, make sure the Build Action is set to Resource for the file.

If you want to globally want to merge different resource file you can for example do it on a application level by using the App.xaml file. To merge a Resource file, you need to use the ResourceDictionary object and it’s MergedDictionaries property, which takes ResourceDictionary objects as values. By using the ResourceDictionary’s Source property, you can specify the source for a resource file:

<Application.Resources>

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceA.xaml"/>
            <ResourceDictionary Source="ResourceB.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

</Application.Resources>

You can of course use a resource file on a User Control level:

<UserControl x:Class="SilverlightApplication6.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:m="clr-namespace:SilverlightApplication6.MyControl"
    Width="400" Height="300">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourceA.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Background="White">

        <StackPanel>
            <Button Style="{StaticResource MyButtonStyle}"/>
            <Button Style="{StaticResource MyButtonStyleB}"/>
        </StackPanel>

    </Grid>
</UserControl>

If you only need to “include” on resource file, you don’t need to use the MergedDictionaries property. Here is an example where only one resource file is used:

<UserControl.Resources>
    <ResourceDictionary Source="ResourceA.xaml"/>
</UserControl.Resources>

A resource file can in turn merge other resource files:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ResourceB.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    
    <Style x:Name="MyButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="red"/>
    </Style>

</ResourceDictionary>

Now I only want to see a way to skip adding the Style attribute to a control, and instead only use the TargetType attribute on a style, and all types should use that style:

<Style TargetType="Button">
    <Setter Property="Background" Value="red"/>
</Style>

Wouldn’t that be something?

I’m going to talk about Silverlight 3.0 and .Net RIA Services

Fredrik N — Tue, 31 Mar 2009 04:45:30 GMT

For my Swedish readers. If you are interested to see some of the new features in Silverlight 3.0 and also the .Net RIA Services and out-of-‘browser feature, I’m going to talk about it on Developer Summit in Stockholm 15-16 April. I’m responsible for the Web track and there are be sessions about ASP.Net 4.0 AJAX, Dynamic Data, Building Web sites with Entity Framework etc. You can find more about the web sessions here: http://www.cornerstone.se/sv/ExpertZone/developersummit/2009/Startsida/Webb/

Some features I would like to see in the ASP.Net “vNext”

Fredrik N — Thu, 26 Mar 2009 08:31:29 GMT

I would also like to see a template for the MVP pattern.

There are so many apps using Web Forms, and most people I have talked to want to update the apps to use the MVC, which is not easy at all.. they want to do it to make it easier to write tests. By having a MVP for Web Forms, it will be easier for them to upgrade their apps and make it possible to write unit test etc.

I want the Cache object to use providers, so it's possible to use it with a distributed cache (for example Velocity) to enable it for Web Farms. Many developers are using the Session now to cache stuff in a Web Farm environment, but the Cache object is more powerful, but it stores the info InProc.

I want to make it possible on a TextBox level to turn off "HTML Validation" (ValidationRequest), not for the whole page.

Add a size limitation for the Session as default, several developers are adding Search results to the Session. I think it should be great with a limitation so developers need to increase the size of the Session object. That will probably make them rethink, and reduce the use of Sessions.

I want to see the runat="server" attribute removed from controls.

Add support for custom tags, where a tag is bound to a specific class, for example:

<my:CustomTag DataSource="<%= Model %>"/>

By letting us to add/create custom tags, we could easily create controls for the ASP.Net MVC Views and a custom tag solution can solve more than just creating controls.

Add better chrome support for WebParts, for example using templates. I created a solution for it a long time ago on my old blog: http://fredrik.nsquared2.com/viewpost.aspx?PostID=248, I think it will make several SharePoint WebParts developers happy ;)

What would you like to see in the next version of ASP.Net?

How to create a simple ObjectDataSource Control for Silverlight 3.0 and use Element Binding.

Fredrik N — Sat, 21 Mar 2009 09:08:13 GMT

While I was sitting here a Saturday morning and was thinking about what to do, I decided to simply create a light weight ObjectDataSource for fun, only to have a blog post to write ;)

As you may now the every XAML element are objects, so it’s easy to add extra controls and functionality to XAML. Here is a simple example of a ObjectDataSource control with only one feature, to call a single method and populate a DataGrid control:

<data:DataGrid ItemsSource="{Binding Data, ElementName=dds}" ></data:DataGrid>
        
<ds:ObjectDataSource x:Name="dds" LoadMethodName="GetStrings">
   <ds:ObjectDataSource.SourceObject>
      <o:MyObject/>
   </ds:ObjectDataSource.SourceObject>
</ds:ObjectDataSource>

Silverlight 3.0 supports Element Binding, so I bind the Data property of my ObjectDataSource to the DataGrid’s ItemSource. The ObjectDataSource has two properties, LoadMethodName, to specify the method to get the data that should be added to the DataGrid. The SourceObject takes an object of any kind, and in this case it’s the object that has the specified LoadMethodName:

public class MyObject
{
   public IEnumerable<string> GetStrings()
   {
      return new List<String>() { "test", "test1", "test2" };
   }
}

The implementation of the ObjectDataSource is kind of simple, it only make sure to invoke the LoadMethodName when the SourceObject property is set to the ObjectDataSource:

public class ObjectDataSource : Control, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private object _sourceObject;
    private object _data;

    public object SourceObject
    {
       get { return _sourceObject; }
       set
       {
            this._sourceObject = value;
            this.Data = this._sourceObject.GetType().InvokeMember(
                                  LoadMethodName, 
                                  System.Reflection.BindingFlags.InvokeMethod, 
                                  null, 
                                  this._sourceObject, 
                                   null);
       }
    }

       
    public string LoadMethodName { set; get; }


    public object Data
    {
       get { return this._data; }
       set
       {
           this._data = value;
           RaisePropertyChanged("Data");
       }
    }


    protected void RaisePropertyChanged(string propertyName)
    {
       var propertyChanged = this.PropertyChanged;

       if (propertyChanged != null)
           propertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

This ObjectDataSource is not a sophisticated one, as you may see, and very simple implemented, and doesn’t even do an asynchronous call.

HTML is so 1990

Fredrik N — Fri, 20 Mar 2009 20:40:28 GMT

Yesterday I was on a meeting with some people from Microsoft and other companies working with social media and communication etc. We talked about the future of the web. I have developed web applications since 1995 or something like that and I’m so tired of is HTML, CSS and client-side script. During the last years people have done incredible web application with technology like AJAX to increase user experience. But HTML, Client-side script and the Browser we are using have limitations, it takes time to build application with rich and good user experience, some stuff are impossible to do because of a limitation both in the HTML, CSS, Client-side script and browser to create Rich Internet Applications. We need a new solutions, a new better way to build applications, and we have two “tools” we can use today to create richer web/internet applications, Flash and Silverlight.

More and more applications are moving to the web and more and more need better user experience. For me the Internet Browsers are moving far far away from me, I start to use more richer client-side tools. For example Messenger, TweetDeck, LiveWriter, Blog readers, RSS readers etc. I don’t use the Browser as much as I did before, for example I don’t use the Browser to write my blog post or publish pictures to the cloud, I use richer applications. Now when Silverlight 3.0 can run out-of-browser, and the increasing demands on richer clients and also the need to create better user experience I think we need to start moving forward. The Browser and HTML will still exists in the near future, but I think it’s time for web developers to take the next step toward RIA.

on Twitter

Fredrik N — Fri, 20 Mar 2009 08:00:00 GMT

For some month ago I just created a Twitter account, and suddenly some poeple found me.. I didn't told anyone that I was on Twitter because I didn't know if I'm going to use it. But now when I got some fre followers I suddenly had to write something ;)

So if you like to read my short and probably meaningless messages on twitter, you can find me @ http://twitter.com/fredrikn

Change IE8 to IE7 compatible mode with meta tags

Fredrik N — Thu, 19 Mar 2009 13:25:00 GMT

I got some questions regarding how to make sure IE8 will run in IE7 mode by default when visiting a site without changing the IE8 options.

There is a meta tag which can be used to force IE8 to "display" a site in IE7 mode:

Turn the mode to IE7:

<meta http-equiv="X-UA-Compatible" content="IE=7">

Make sure IE8 emulate IE7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

How the Presentation Model could look like when using Silverlight 2.0 (Part 6)

Fredrik N — Wed, 11 Mar 2009 08:28:25 GMT

This post is not really a follow-up, it’s more like an announcements and for my Swedish readers.

I’m going to talk about how to implement different UI Patterns when using Silverlight as a client on a Swedish conference called Developer Summit, which is a conference for developers and architects etc. I’m the Web track owner at the conference. If you are interested to see more about how to implement UI Patterns within Silverlight, you should come and listen to me ;)

Here is a link to the Conference and also the time when it will take place: http://www.cornerstone.se/sv/ExpertZone/developersummit/

Hope to see some of you there.

MasterPage and Silverlight

Fredrik N — Sun, 08 Mar 2009 08:27:15 GMT

I have seen several post about how to implement MasterPage in Silverlight 2.0, most of the posts are about using “fixed” UserControls and dynamically change the content of a control in code-behind. Here is another solution where a Template will be used instead.

In Silverlight we can use the ContentControl to add a child element to it:

<ContentControl>
            
   <Button Content="test"></Button>
            
</ContentControl>

The ContentControl has a Template property we can use to specify the Template of the ContentControl. To create a template we can for example use the <Style> element within the App.xaml (Only to make it global).

<Application.Resources>
       
       <Style x:Name="myMasterPage" TargetType="ContentControl">
           <Style.Setters>
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="ContentControl">
                           <Grid Height="300" Width="400">
                               
                               <Grid.RowDefinitions>
                                   <RowDefinition Height="55"/>
                                   <RowDefinition Height="*"/>
                                   <RowDefinition Height="25"/>
                               </Grid.RowDefinitions>
                              
                               <Grid Grid.Row="1">
                                   <Grid.ColumnDefinitions>
                                       <ColumnDefinition Width="0.5*"/>
                                       <ColumnDefinition Width="*"/>
                                   </Grid.ColumnDefinitions>

                                   <StackPanel Grid.Column="0">
                                       <Button Content="Button 1" Click="Button_Click"></Button>
                                       <Button Content="Button 2" Click="Button_Click_1"></Button>
                                       <Button Content="Button 3" Click="Button_Click_2"></Button>
                                   </StackPanel>

                                   <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}"></ContentPresenter>

                               </Grid>
                               
                           </Grid>
                           
                       </ControlTemplate>
                       
                   </Setter.Value>
                   
               </Setter>
           </Style.Setters>
       </Style>
       
   </Application.Resources>

The Style will target the ContentControl and also set the Template property of the ContentControl. The Template property will have a child element of type ControlTemplate which can be used to define a template. We will use the <Style> and <ControlTemaplate> to define our MasterPage. The <ContentPresenter> can be used in a similar way as <ContentPlaceholder> is used within a ASP.Net MasterPage. The Content of the <ContentPresenter> will be the Content from the <ContentControl> which will use the “myMasterPage” template.

Note: If we add an event to the template, it will be added to the App’s code-behind.

To use the “myMasterPage” template in our Page.xaml we simply add a <ContentControl> and set it's Style property to the “myMasterPage´” style:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <ContentControl Style="{StaticResource myMasterPage}">
          
        <Button Content="test"></Button>
            
    </ContentControl>

</UserControl>

The content of the ContentControl, will now be located where the ContentPresenter is in the “myMasterpage” template.

How the Presentation Model could look like when using Silverlight 2.0 (Part 5)

Fredrik N — Wed, 25 Feb 2009 13:53:11 GMT

Maybe the title of my blog post are not the best one now when I write about my little Presentation Model framework for Silverlight.

To day I notice some problems when it comes to switching views and also play movies and animations etc. For example to start playing a movie we need to call the MediaElement’s Play method. With my Framework we can only execute a Action method located in our Presentation Model, and I don’t want to pass a FrameworkElement as an argument to the Presentation Model, so there was no way to make sure an Action method can start playing a movie. So to solve this I created a specific class with the name ActionResult, this ActionResult class:

public class ActionResult
{
    public ActionResult()
    {
       this.ActionResultHandler = new DefaultActionResultHandler();
    }

    public IActionResultHandler ActionResultHandler { get; protected set; }
}

Action methods can then return a ActionResult:

public class CustomerPresentationModel : Silverlight.Extension.PresentationModel
{
       public ActionResult Show(string customerId)
       {
           return ChangeView("About.About", base.PreviousUsetState);
       }

       public ActionResult PlayMovie()
       {
           return new MovieActionResult(null, MovieAction.Play);
       }
}

If an ActionResult is returned from a Action method, I will use the ActionResult’s ActionResultHandler and invoke the HandleActionResult method, where I pass the FrameworkElement that trigged the Action method and also pass the ActionResult class as an argument:

public interface IActionResultHandler
{
    bool HandleActionResult(FrameworkElement sourceElement, ActionResult returnValue);
}

To make sure I can start playing a movie from the Action method, I will pass a MovieActionResult, which will use a MoveActionResultHandler to handle the ActionResult and start playing the movie:

public class MovieActionResult : ActionResult
{
     public MovieActionResult(Stream mediaSource, MovieAction movieAction)
     {
        this.MovieAction = movieAction;
        this.MediaSource = mediaSource;
        base.ActionResultHandler = new MovieActionResultHandler();
     }

     public MovieAction MovieAction { get; internal set; }

     public Stream MediaSource { get; internal set; }
}

public class MovieActionResultHandler : IActionResultHandler
{
    public bool HandleActionResult(FrameworkElement sourceElement, ActionResult returnValue)
    {
        var mediaElement = sourceElement as MediaElement;

        if (mediaElement == null)
           throw new Exception(string.Format("The sourceElement ({0},{1}) for the MovieActionResultHandler is not of type MediaElement", sourceElement.Name, sourceElement.GetType().Name));

        var actionResult = returnValue as MovieActionResult;

        if (actionResult == null)
           throw new Exception("The returnValue agrument is not of type MovieActionResult");

        switch (actionResult.MovieAction)
        {
            case MovieAction.Play:
                 mediaElement.Play();
                 break;
            case MovieAction.Pause:
                 mediaElement.Pause();
                 break;
            case MovieAction.Resume:
                 mediaElement.Play();
                 break;
            case MovieAction.Stop:
                 mediaElement.Stop();
                 break;
            default:
                throw new Exception("Can't handle MovieAction");
        }
        return true;
    }
}

The MovieResultHandler can now interact with the FrameworkElement that trigged the Action method.

So to play a movie when the MouseLeftButtonUp is trigged we can simply write:

<MediaElement e:Attach.MouseLeftButtonUp="PlayMovie" AutoPlay="False" Source="http://localhost:4317/movie.wmv" Height="200" Width="200"/>

I have also added a ActionResult called DynamicChangeViewActionResult and a handler for it. By using this ActionResult we can dynamically specify a View and make sure our Silverlight applicaiton switches view after an Action method is executed:

public ActionResult Show(string customerId)
{
    return ChangeView("About", customerId);
}

The ChangeView is a method added to the base class PresentationModel which can be used to get some helper method, but aren’t needed. The ChangeView will return a DynamicChangeViewActionResult, and will get the About.xaml page and automatically replace the content of the “LayoutRoot” element with the new View. So my Framework can sort of also use the MVC pattern. By passing object as a second argument to the ChangeView, we can pass additional information to the next View’s Presentation Model’s Action methods. We can also specify a name of a ContentControl or Panel located on our View, and the make sure only a part of the View is updated with a new UserControl instead of the whole view.

public ActionResult Show(string customerId)
{
   return ChangeView("About", "MyPanelToUpdate", customerId);
}

So the basic ideas of using the ActionResult feature is only to make sure others can return their own ActionResult and handle the result of the Action method, for example to play an animation, or change an image or what ever.

How the Presentation Model could look like when using Silverlight 2.0 (Part 4)

Fredrik N — Tue, 24 Feb 2009 15:40:48 GMT

I have created a small framework only for fun and to have a programming task ;) The framework I have created (not yet 100% completed) is similar to Prism, Caliburn and Silverlight.FX. So this is not a framework that should replace those other framework, it still only a hobby project to see if I managed to create a similar one. I will still write about it in this Part 4 of my Presentation Model series. The goal with the framework is to leave the code-behind alone and focus on a separate class and declare everything in the XAML. The following is an example of a class (a Presentation Model):

public class LoginPresentationModel : Silverlight.Extension.Model
{
       private string _userName;

       public string UserName
       {
           get { return _userName; }
           set
           {
               _userName = value;
               base.NotifyPropertyChanged("UserName");
           }
       }
       
       public void Login(string userName, string password)
       {
           //Do some validation
           this.UserName = userName;
       }
}

Note: The Model doesn't need to Inherit from the Model base class, I only do it because I have added the NotifyPropertyChanged method to the base class.

The code-behind for my Page.XAML will look like this:

public partial class Page : UserControl
{
      public Page()
      {
          InitializeComponent();
      }
}

Note: I hope Silverlight team will add the InitializeComponents to the page.g.cs file so we can remove the Code-behind.

To use the LoginPresentaitonModel in my View (XAML file) we can use an Attached property added to any FrameworkElement’s called View.Model:

<UserControl x:Class="PresentationModelExample1.Page" xmlns..
    xmlns:e="clr-namespace:Silverlight.Extension;assembly=Silverlight.Extension"
    xmlns:m="clr-namespace:PresentationModelExample1.Model"
    Width="400" Height="350">
    <e:View.Model>
        <m:LoginPresentationModel/>
    </e:View.Model>

Note: Because the View.Model can be used on any FramewrokElement, we can partially add different Presentation Model to the VIew, but I recommend to only use one per View.

The LoginPresentationModel class will be bound to the UserControl’s DataContext property, to we can now simply use normal data binding to bind FrameworkElements to the Presentation Model’s properties:

<Grid x:Name="LayoutRoot" Background="White">
       <StackPanel Margin="50">

           <TextBox x:Name="userName" Text="{Binding UserName}"/>

           <Password x:Name="password"/>

           <Button e:Attach.Click="Login" Content="Login"/>
      </StackPanel>
</Grid>

The code above will bind the UserName property of the LoginPresentationModel to the TextBox userName. The Button control ha an attached property Attach.Click which will make sure the Login method of the LoginPresentationModel is invoked when the Button click event is trigged.

public void Login(string userName, string password)
{
}

As you can see the Login method has two arguments, userName and password. Which is not given when the Login method is attached to the Click event. By default the framework will check if there are controls with the same name as the argument, if so, it will get the value from the controls and pass them as an argument. So in this case the userName and Password control’s value will be passed to the Login method. I can also write the following when I attached the method to the event:

<Button e:Attach.Click="Login(userName.Text, password.Text)" Content="Login"/>

The argument mapping in this framework works similar to how it does in the ASP.Net MVC. For example if the Login method instead will take a LoginCredential class:

public void Login(LoginCredential loginCredential) { }

public class LoginCredential
{
    public string UserName { get; set; }
    public string Password { get; set; }
}

The LoginCredential will be created and the framework will first look for controls with the name “loginCredential_UserName” and/or “loginCredential_Password” and get the value and set it to the LoginCredential properties. If the “loginCredential_” prefix can’t be found it will check for controls with the same name as the properties of the LoginCredential class. A MappingAttribute can also be used for the arguments of a method to also specify a specific prefix. [Mapping(“login”)], and instead of looking for “loginCredential_” prefex, the framework will look for a the prefix “login_”.

We can also make sure our action methods returns a value and set the value to a specific FrameworkElement’s property:

public string Login(string userName, string password)
{
    //Do some validation
    if (faild)
        return "The user name or password is not correct..";

    //..
}

<TextBloc x:Name="errorMsg"/>

<! -- .... --->

<Button e:Attach.Click="Login => errorMsg.Text" Content="Login"/>

By using the “=>” we specify that we will take the value from the Login and move it to the errorMsg.Text property. But if we use a correct Presentation Model we would not use this “expression”, instead have a property in the Presentation Model which we bind to the TextBlock and set the property internally in within the Login method and then use the NofityPropertyChanged to update the TextBlock value:

<TextBloc x:Name="errorMsg" Text=”{Binding ErrorMsg}”/>

<! -- .... --->

<Button e:Attach.Click="Login" Content="Login"/>

public string Login(string userName, string password)
{
    //Do some validation
    if (faild)
        this.ErrorMsg = "The user name or password is not correct..";

    //..
}

The Framework also support Asynchronous calls. We can mark a method with the AsynCall attribute and make sure it will be executed in a background worker thread:

[AsynCall]
public void Login(string userName, string password)
{
    //Do some validation
}

We can also specify a callback method which will be executed in the UI thread:

[AsynCall(CallBack="Login_Completed")]
public string Login(string userName, string password)
{
    //Do some validation
    return "someting";
}

public string Login_Completed(string result)
{
    return result + "and something more";
}

The AsyncCallAttribute is an ActionFilter, so we can create our own ActionFilters, which has at the moment three methods we can use, OnPreAction, OnPostAction and UnhandledException. the ActonFilters are similar to how ActionFilters works within the ASP.NET MVC. Here is an example of a TestActionFitlerAttribute:

public class TestActionFilterAttribute : ActionFilterAttribute
{
      public override void OnPreAction(PreActionFilterArgs actionFilterContext)
      {
          if (actionFilterContext.ActionMethodArguments != null && actionFilterContext.ActionMethodArguments.Length > 0)
          {
              var c = actionFilterContext.ActionMethodArguments[0] as Customer;

              c.FirstName = "Fredrik";
          }

          var p = actionFilterContext.PresentationModel as CustomerPresentationModel;
          p.Customer.FirstName = "Lovisa";
      }


      public override void OnPostAction(PostActionFilterArgs actionFilterContext)
      {
          actionFilterContext.ActionMethodReturnValue += "test";
      }


      public override void OnUnhandledException(UnhandledExceptionActionFilterArgs unhandledExceptionActionFilterArgs)
      {
          var c = unhandledExceptionActionFilterArgs.PresentationModel as CustomerPresentationModel;
          c.ErrorMsg = unhandledExceptionActionFilterArgs.Exception.Message;

          unhandledExceptionActionFilterArgs.Handled = true;
      }
}

The Action Filter above will manipulate the Action methods arguments before the action method is executed. The filter will also manipulate the return value of a Action filter (if the Action method will return a value). We can also manipulate the Presentation Model’s stage within the Action Filter, the Action Filters will be executed within the UI thread.

The source code is more or less completed, need to do some more refactoring and also run some more tests, but all the basics will work. If you want a framework like this you can take a look at Prism v 2.0 from Microsoft Patterns & Practices, Caliburn or Nikhil’s Silverlight.FX, my framework is nothing I will support and only created it for fun. If you want the source code, please drop me an e-mail (fnormen [ at ] hotmail.com because I have no place to upload the source code at the moment. Remember the source code is not yet completed, I will add more support for more events and also make sure others can easy add events to attach to etc.

How the Presentation Model could look like when using Silverlight 2.0 (Part 3)

Fredrik N — Sun, 22 Feb 2009 13:15:41 GMT

In my previous Part 1 and Part 2 I wrote how a Presentation Model could be implemented and how to handle Async .calls. In this post I will show you how we can avoid adding code to the Code-behind. In Part 2, I had the following code in the code-behind:

public partial class Page : UserControl
{
   private NamePresentationModel _namePresentationModel;

   public Page()
   {
      InitializeComponent();

      _namePresentationModel = new NamePresentationModel(new NameRepository());

      this.Loaded += Page_Loaded;
   }

   void Page_Loaded(object sender, RoutedEventArgs e)
   {
       LoadFromPresentationModel();
   }

   private void Button_Click(object sender, RoutedEventArgs e)
   {
     _namePresentationModel.SaveAsync((source, args) =>
                                    {
                                       messageTextBlock.Text = "NameEntity Saved";
                                    });
   }


    private void LoadFromPresentationModel()
    {
       _namePresentationModel.LoadAsync((sender, args) =>
                                     {
                                          myStackPanel.DataContext = args.Result;
                                     });
    }
}

Wouldn’t it be nice if we can leave the code-behind empty and instead specify which Presentation Model we would like to use in the XAML file instead? Here is my new code-bind:

public partial class Page : View
{
    public Page()
    {
        InitializeComponent();
    }
}

I have moved all the actions and creation of the Presentation Model to the XAML file instead:

<e:View x:Class="PresentationModelExample1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:e="clr-namespace:Silverlight.Extension;assembly=Silverlight.Extension"
    xmlns:m="clr-namespace:PresentationModelExample1.Model;assembly=PresentationModelExample1"
    Width="400" Height="300"
    e:Action.Loaded="Load">
    <e:View.Model>
        <m:NamePresentationModel/>
    </e:View.Model>

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Margin="50">

            <TextBox x:Name="name" Margin="4" Text="{Binding Name}"></TextBox>

            <Button e:Action.Click="Save" Margin="10" Content="Save"></Button>

        </StackPanel>
        
    </Grid>
</e:View>

By using the Action.<EventName> Attached Property, I can specify a method located in the Presentation Model and invoke it when the <EventName> is trigged. The View.Model Attached Property is used to specify which Presentation Model the View should use. Here is the code for the View class used instead of the UserControl:

public class View : UserControl
{
    public object Model
    {
        get { return DataContext as Model; }
        set { DataContext = value; }
    }
}

As you can see when I give the Model a value, the value will be bound to the DataContext of the UserControl. I need to change the code-behind to inherits from my View class, and I also need to add a namespace to the XAML file to point out where the View class is located. Then I replace the <UserControl> element with my new View element instead. When this is done I can use normal data binding to get values from my Presentation Model. The next thing to do is to create a Attached Property to make sure they invoke the specified Presentation Model methods when an event is trigged. It’s quite easy to add a Attached Property, the following example is the Action.Click attached property:

public static class Action
{

       public static readonly DependencyProperty ClickProperty =
          DependencyProperty.RegisterAttached(
             "Click",
             typeof(string),
             typeof(Action),
             new PropertyMetadata(
                 null,
                 new PropertyChangedCallback(OnClickChanged)));


       public static string GetClick(DependencyObject element)
       {
           return (string)element.GetValue(ClickProperty);
       }


       public static void SetClick(DependencyObject element, string value)
       {
           element.SetValue(ClickProperty, value);
       }


       private static void OnClickChanged(DependencyObject sourceElement,
                                          DependencyPropertyChangedEventArgs e)
       {
           var button = sourceElement as Button;

           if (button == null)
               throw new ArgumentException("DependencyObject is not of type Button");

           button.Click += ((sender, args) => { ActionHelper.GenerateActionCall(e.NewValue.ToString(), button); });
       }
}

We only need to create a static class and then add a DependencyProperty and use the DependencyProeprty’s RegisterAttached method to register a Attached Property. The argument are the name of the Property to use, the type, owner and then a PropertyChangedCallback which will be executed when the properties value are changed. Next step is to add a Get<PropertyName> and a Set<PropertyName> method and make sure it will set and get the value from the specified DependencyProperty. The name after the Get and Set prefix is the name of the property that you want to use. So if you name the Get method to GetMyPropery, the Attached property in the XAML will be Action.GetMyProperty.

In the specified callback method of the DependencyProperty, I have hooked up to the button control’s Click event. The ActionHelper class something that I have created to help me create a method which will invoke the specified action method. So the method will only get the Model from the DataContext of the specified control and then call the InvokeMember of the model’s type, something like this:

model.GetType().InvokeMember(
                    actionName,
                    System.Reflection.BindingFlags.InvokeMethod,
                    null,
                    model,
                    arguments);

I have also added some code to map arguments of the action method to controls on the UI, so if I have a Save method with an argument called name I will get the value from a control with the same name as the argument. If the argument of the Action method is an entity, I will create a new instance of the Entity and map it’s property to controls with the same name.

public void Save(string name)
{
    //...
}

public void Save(NameEntity name)
{
    //...
    _nameRepository.SaveName(name);
}

There are several of frameworks created to map a Presentation Model to a View without using a code-behind. I only created my own to learn more about how to extend Silverlight elements etc. You can for example get a similar framework from Nikhil (Member of the ASP.Net team) called Silverlight.FX, another project with similar functionality is the Caliburn.