Silverlight 3 : RIA Services for your LOB Applications – Part 1

Silverlight 2 onwards, there was a boom in web application creation using Silverlight since its media capabilities got big attention from everyone. Then onwards its Charting tools and other rich looking tools created buzz in community as well as people started using it as Web Parts in their Microsoft Sharepoint portals.

There are already several good resources available on Internet which talks about Silverlight Line Of Business Applications (LOB), I am giving here my few cents or you can call it is my first hands on with it. I am now talking about Silverlight Business Application Project Template in detail. People sometime get confuse between RIA Services and Silverlight Business Application, well Business Application template is a way or method to implement it in your business apps, The normal definition of RIA given on Microsoft site where you download template is like this :

Microsoft .NET RIA Services simplifies the traditional n-tier application pattern by bringing together the ASP.NET and Silverlight platforms. RIA Services provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. It also provides end-to-end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client and ASP.NET on the mid-tier.

I am not going to draw any complex architectural diagram since objective of this post is to implement it rather than understand.( If you ask me why..well anyone who understands what is Tier Architecture can guess what this stuff all about), Basically it gives you Views (Remember Views in MVC ?), It allows you to Add your Silverlight pages as Views, You also can incorporate Data Model with it with help of ADO.NET Entity Data Model, You can then do CRUD Operations on it with Help of Domain Service Class. You can implement Authentication to it either with Role Provider/Membership Model or with your own model of authenticating users.

So what all you need to try this out? Simple answer is download RIA Services Preview from here :

http://www.microsoft.com/downloads/details.aspx?FamilyID=76bb3a07-3846-4564-b0c3-27972bcaabce&displaylang=en

Once you done with Installation, all you need to do is to Start instance of Visual Studio and go to File –> New and Select the Silverlight Business Application Project,like this :

If you check out Solution Explorer, you will find following structure :

App.xaml and MainPage.xaml files were there always, what’s new you have is three folders as “Assets”,”Libs”,”Views”, Assets folder contains one Styles.xaml file which holds all Style information for the given template and you can customize it if you want (Remember Themes/CSS in ASP.NET ?). Libs will contain all the references which you add, like here since I am making use of DataGrid control, you can find the corresponding DLL file inside it. Views is most important folder in this structure since it contains all the UI, You can see that About,Error,Home,Login,LoginWindow and Password Control are already present in Views by default. EmployeeListing is View added by me, how to add Views that also is simple, just right click on Views->Add New Item and just add Silverlight User Control like the way you use to add it in our normal Silverlight project template. Well, without adding any template if you run you will see following output :

If you observe the Address bar carefully while running the output, you don’t need to think much on how it works, you will come to know its nothing but Navigation Framework provided by Silverlight, So its built-in this template to provide smooth navigation among the views. You can see Tab like arrangement for navigation like this :

Once clicking on this you will be thrown to corresponding Views like this :

You can change or revamp the View completely as per your choice, What Silverlight Business Application gives you is basic structure to start with and it has all requirements built-in which any business applications are in need like View model and navigation framework and added now with Authentication too, with the login link on top you can invoke Login and User Registration view which is also built-in, like this :

So if you check out Main.xaml page, you will see the respective code snippets which will allow you to customize it like shown below :

Navigation Support Block :

<Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">
           <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}"
                             Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed">
               <navigation:Frame.UriMapper>
                 <uriMapper:UriMapper>
                   <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
                   <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
                 </uriMapper:UriMapper>
               </navigation:Frame.UriMapper>
           </navigation:Frame>
   </Border>

Header Customization Block :

<Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}">
         <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}">

           <ContentControl Style="{StaticResource LogoIcon}"/>
           <TextBlock x:Name="ApplicationNameTextBlock"
            Style="{StaticResource ApplicationNameStyle}"
            Text="Vikram's Line Of Business Application"/>

         </StackPanel>
       </Border>

Look at the Code, you can see how it imports LogoIcon as Static Resource, so you for your application can directly replace it with your company logo, its simple to do.

Adding View to Tab look like layout :

<Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}">
         <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">
           <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}"
            NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>
           <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>
           <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}"
            NavigateUri="/About" TargetName="ContentFrame" Content="about"/>
           <Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>
           <HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}"
            NavigateUri="/EmployeeListing" TargetName="ContentFrame" Content="Employee"/>
        </StackPanel>
       </Border>

So, by this time you must have got idea how simple and useful is this, but I know most of you will not be that satisfied unless “Real Data” don’t come in picture, I know this so, have some patience for a while and I will show you how simple is to add data to it by much more flexible and easy way, well is it Linq-to-SQL ? ADO.NET ? WCF? Entity Framework?, keep guessing..I will be back soon with Part 2.

Before going away, If you or your designer don’t like the look and feel of this template, Tim Heuer have written a simply amazing article on Templates and he made it available via his blog, so don’t just go back to work without checking his grand post here :

http://timheuer.com/blog/archive/2009/07/09/free-silverlight-application-themes-silverlight-3.aspx

meanwhile if you have any feedback, I am awaiting.

Vikram.