Ramblings

Download Code By Clicking Here

Techs Currently Used

Windows 7

Visual Studio 08

Silverlight 3 SDK, Silverlight Web Platform, Silverlight Toolkit, .NET RIA Services (http://silverlight.net/GetStarted/)
NHibernate

 

We’ll start off pretty basic by just creating a Silverlight project and adding a new page to the application. Visual Studio makes it extremely easy to create a Silverlight project and get it up and running. Start off by creating a new Silverlight Business Application project.

Figure 1 – Creating a Silverlight Business Application

 

The difference between a Silverlight Business Application and a Silverlight Navigation Application is that the Business Application provides login/logout and authentication support. Clicking “login” will show a clean login screen with a link to a  “new user” template. Both projects give the same clean look and feel and default pages.

At this point, we have created our “BusinessApp” solution with two projects within that solution: BusinessApp and BusinessApp.Web). BusinessApp contains the Silverlight code and i will refer to at as the client project. It is the client tier. BusinessApp.Web contains the ASP.NET web application code that will be responsible for running the Silverlight application. It’s referred to as the server project and is the mid-tier. I like to think of it as the service layer because that is where we will be getting all of our services from. 

Lets build the solution, click on the client project, and then click the “Show All Files” button. You will notice that there is a file named BusinessApp.Web.g.cs. (See Figure 2) This file is generated by the server project (specially the .NET RIA Services) and projected to the client so that the client and server work with the same data and objects.  We will discuss the .NET RIA Services in depth in a later post, but basically (from a Microsoft marketing blurb) the “Microsoft .NET RIA Services simplifies the traditional n-tier application pattern by bringing together the ASP.NET and Silverlight platforms. The 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.”  So in order for the Silverlight client to absorb the projected code generated by the server project, we need to include it into the client project by right clicking on the generated code file and including into the project.

Figure 2 – Generated Code

 

This will be important later on when we use RIA Services to create domain services (which i will discuss in a following post) in the server project which are then generated into its equivalent client side domain “context” classes. One of the great benefits of Silverlight and RIA is that it makes validation at both the client and server sides possible with writing the code only once. This code is centralized in the server project and then projected into the client project via the generated code file. You will see more uses of the generated code file throughout the series. Basically everything that is projected from the server will be found in this file.

The application should build and run successfully. As you can see in Figure 3, the default Silverlight template provides a very clean and professional look and feel. The look and feel can be easily changed by modifying the Styles.xaml page which can be seen in Figure 2. Users will be able download pre-defined Styles and easily swap them in and out to change the look and feel. This means that you can have several style xaml files and switch between them as necessary.

Figure 3 – Sexy Default Style

 

Lets add a page to our application so we can see how easily this is done. First, right click on the “Views” folder in the client project, which is where all of the Silverlight pages are stored by default.

Figure 4 – Creating a new Silverlight Page

Name your page to whatever you want (I named mine “Contacts” because…. well i don’t really know actually) and click “Add”. In Figure 5 you can see that I added a TextBlock to the Contacts.xaml file and if you run the application (after the next step that is) you can see that show up on the Contacts page.

 

Figure 5 – Adding content to the “Contacts” page

 

To add a page to the navigation panel along with Home and About pages, open up the MainPage.xaml file and add a HyperlinkButton in the place you would like the tab to appear. By default, Silverlight separates the tabs with a Rectangle object defined by the LinkStyle static resource in the Style.xaml.

Figure 6 – Adding a link to the Contacts page

 

If we build and run the web application you will see that there is now a “Contacts” tab in between the “Home” and “About” pages. Clicking that should take you to the Contacts page.

 

Let’s talk a little about what’s going on behind the scenes. If you look in the server project you will notice there is a .xap file in the ClientBin folder.

Figure 7 – xap File

A .xap file is essentially a compiled Silverlight application that is actually a .zip file. This zip file contains all the files necessary for the application. You can rename the .xap file to have a .zip extension and then extract it to view the contents. The .xap file contains an application manifest (AppManifest.xaml) file and all the necessary DLL’s that are required by the application. Web pages like .aspx files use the Silverlight components by loading the .xap files using the <asp:Silverlight> tag in the ASP.NET pages. In Figure 7 you will see the BusinessApplicationTestPage.aspx file that was created by Visual Studio. This is page that gets started by the server project. In Figure 8, you see that the aspx file is responsible for wiring the xap file to the server project.

Figure 8 – BusinessApplicationTestPage.aspx

The last thing I personally was wondering about was the Silverlight.js file in the server project. I was a little curious what this was for and I’m sure others are as well. According to MSDN, “the Silverlight.js file provides JavaScript helper functions for embedding the Silverlight plug-in in a Web page and for customizing the Silverlight installation experience.” Sweet. Not critical for me at this point but definitely a nice to know.

 

Well i think that’s the basics of a Silverlight application.

Recently I started working on a side project with a fellow colleague. This is a line of business web application for an awning manufacturer called The Awning Factory. We are using Silverlight 3 with .Net RIA Services, the Model-View-ViewModel pattern (MVVM), NHibernate, along with other testing and development technologies. Jason, who started the project and has invited me to come on board, is blogging about this project (click here to go to his blog). He is discussing the overall business rules and structure of the project, as well as the software development architecture, including programming patterns and models used. I have chosen to blog (through a step-by-step demonstration) about the implementation aspect and how the patterns and technologies can be used together to form a line of business application. I have chosen to create a separate demo app rather then use examples from our application. I want to do this for a couple of reasons. First, the reason for this series is for my own investigation; so i can have a deep understanding and make sure i know how everything fits together. In order accomplish that i need to build something from scratch and really dive into the details as i go, as opposed to trying to get it together and running and not caring about the details. Next, i want something that myself and others can look at without having unnecessary details get in the way of seeing what i am trying to show and explain. I also need to develop something that can be downloaded, built, and ran successfully without any setup besides the installations of necessary components (like the .Net RIA Services). Since most of my development effort will be directed towards the main project, this will be a small project,which will allow the user to see the different aspects that Silverlight brings to the table. Game On.