Nowadays, starting a web development poses a considerable challenge, since clients have got used to having powerful desktop-based interfaces at their disposal, which can also be delivered in record time. If we focus on Line of Business (LOB) applications, we find the additional challenge which is the fact that our apps have to be ready for massive changes, taking into account tight deadlines without sacrificing stability. All of us have suffered that "little last-minute change". Everybody has heard things like, "We got to change the way in which discounts for purchases are managed. This could be ready in just five minutes, couldn't it?"
To overcome such situations, web developers can make use of a combination of ASP.NET (webforms or MVC), HTML, JavaScript, AJAX, and the more advanced HTML 5 and jQuery.
Nevertheless, when we implement LOB applications we often find that:
We have to struggle in order to make our pages consistent in different browsers; even in different versions of the same browser.
Our developers have to learn a language to develop client side, and another one to develop the server side.
JavaScript is a polemic language—love it or hate it. For some developers it is not object-oriented (although it has OO capabilities) and is an interpreted language. One only has to forget to add a semicolon, or introduce a syntax error when typing a command, and our application may produce an execution time error.
HTML 5 only works in updated browsers. Could you imagine yourself telling your client something like, "Well, what you have to do is install the latest version of Chrome or IE on your 1,000 PCs. This is also applicable to your associate companies."
We have to mix business and presentation logic. We try to avoid going to the server, for instance, to make validations which do not require reading a database. That is to say, we mix the reading of an input or an HTML ComboBox with the realization of validations. For example, if the user chooses more than four high-end products and is a premium client, we can enable a special 10 percent discount. This causes serious trouble when changes are required in the page layout, even if they are insignificant.
Microsoft has published a plugin called Silverlight (the word plugin reminds us of Flash, one of the most accepted plugin-based technologies) which allows us to encode with sturdy, compiled languages (such as C# and VB.NET). This plugin incorporates a lite version, that is the .NET Framework, which offers us the possibility to take advantage of everything offered at the client side while implementing a new markup language called XAML. The advantages of using Silverlight are as follows:
Our applications are sturdier; for example, allowing us to implement automatic unit testing at the client side.
We can decouple business presentation and implement an architecture at the client side.
We can decouple roles. While a designer can deal with presentation, we as developers are able to focus on the business of building the application.
Our application is more scalable (we free up resources on the server) and we do not depend on tricks to maintain application status.
We can have a standard XAML implemented the same way in every single browser. No more headaches such as, "it looks good in IE6 but not in IE7, or Firefox, and so on".
In addition, Silverlight is multi-platform (for example, Windows or Mac) and multi-device (computers, mobile devices with Symbian or WP7 support, for instance, among others).
In this book, we are going to deal with Silverlight 5. The tool that Microsoft recommends for development is Visual Studio 2010. Therefore, we will have to install the following software:
Visual Studio 2010 (if you do not have a commercial license, you can download the express version available at http://www.microsoft.com/express/downloads/#2010-Visual-CS)
Visual Studio 2010 SP1 at http://www.microsoft.com/download/en/details.aspx?id=23691
Microsoft Silverlight 5 Tools for Visual Studio 2010 at http://www.microsoft.com/download/en/details.aspx?id=23887
All of these individual links are available at http://www.silverlight.NET/getstarted/.
Silverlight is a plugin installed in web browsers in a quick and clean way similar to Flash. That is, Flash is in a controlled environment, and applications run under a sandbox environment.
As for the architecture, if we compare it to a standard web application, we can substitute XAML for HTML, C# or VB.NET for JavaScript, and so on. We can also make use of a reduced version of the.NET Framework as shown in the following figure:
The plugin is about 4 MB in size and does not depend on the desktop version of Microsoft .NET Framework.
All this is fine but there a few questions to be answered such as how is the Silverlight application installed on a server? How is it executed on a client machine? Let's see how it works:
When we build a Silverlight project, an XAP file is generated (Silverlight can also be configured to generate several files).
This file is just a ZIP file with all the necessary assemblies and resources to execute the application.
This XAP file is stored on our web server.
In an HTML page, we reference it using an
OBJECTtag.When the user navigates to that page, the XAP file of the application is downloaded and unzipped. Then, the application starting point is sought and the application is executed.
Application execution takes place in a controlled sandbox environment, so a malicious developer cannot format the client's HDD (in some cases, user confirmation is required to interact with the hardware, otherwise interaction is simply denied to the application).
To get a better idea of how it works, let's compare an HTML web application with a Silverlight one:
Now that we have our development environment ready, we will create our first Silverlight project. Of course, it will be the classic Hello World. On this occasion, we will use the example to learn:
How to create a new project
How to encode directly into the markup language
How to drag elements from the Toolbox palette and configure them using Properties
How to respond to an event and call a Code-Behind method
Let's open Visual Studio and start creating the app:
To create a new project, we must launch Visual Studio. Select File | New Project and choose the Silverlight Application option:
Once the route and type of project has been chosen, a dialog will appear, asking us if we want to create a web project to host our Silverlight application.
Click on OK (a Silverlight application needs a web page which instantiates it with an
OBJECTtag).
We now have the solution created. It consists of two projects:
Silverlight project: The wizard creates an entry point (
.appfile) and a default page (MainPage). In the default MainPage, we can see the layout definition (MainPage.xaml) and its associated Code-Behind (mainpage.cs). It is advisable to remember that this Code-Behind is executed at the client side and not at the server side.Web project: This simply consists of an ASP.NET page and an HTML page to try our Silverlight application.
We can clearly see every element of the solution in the following figure:
In this section, we will add our first Silverlight controls, encoding them directly into the markup language. We will see next how to carry out the same operation via drag-and-drop:
Open the file
MainPage.xaml.Add a text block containing the expression Hello World. To do this, we will enter the following code:
<Grid x:Name="LayoutRoot" Background="White"> <TextBlock Text="Hello World!" FontSize="20"/> </Grid>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We must build the project and execute the example by clicking on the play icon.
We can now see our first Silverlight application in action!
It is highly recommended that you have a good knowledge of the XAML markup language and some experience practicing it. Nevertheless, if you intend to make a rapid prototype or just need to begin developing immediately, you can use the drag-and-drop controls from the toolbar directly in to the form (as in a WinForms application).
You can also edit the features of a control by accessing the Properties window as shown in the following screenshot:
In order to achieve a higher control over the windows layout (with the aim to, for example, achieve an optimal disposition of the controls in different resolutions), we suggest learning the XAML markup language or using Expression Blend, which is a tool for designers (and developers).
In the following example, we will allow the user to change the message Hello World! to one of their choice. Starting from the previous example, we will follow the given steps:
Open the
mainpage.xamlfile.Replace the XAML code inserted in the previous example by the one highlighted as follows (we have added an additional textbox, a button, and identifiers for the controls).
<Grid x:Name="LayoutRoot" Background="White"> <StackPanel Orientation="Vertical"> <TextBlock x:Name="tbLabel" Text="Hello World!" FontSize="20"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="New Text:" FontSize="16"/> <TextBox x:Name="txInput" Width="120"/> <Button Content="Change"/> </StackPanel> </StackPanel> </Grid>
When we build and execute the project, we realize that our window now has the aspect as shown in the following screenshot:
Next, we must implement the response to the
Clickevent of the Change button.Hook to the
Clickevent directly in the XAML file. As soon as we start typing, IntelliSense (Microsoft's implementation of autocompletion) will ask us if we want to create the method (hitting Enter or Tab would create the method with the default name or with the name of the control after selecting aClickevent).
Execute the same operation from the Properties panel (or by directly double-clicking on the button control):
As a result, XAML will look as follows:
<Button Content="Change" Click="Button_Click"/>
In Code-Behind, in the method invoked by the
Clickevent, we must add a line of code, which transfers the text content entered by the user to the tag where we showed 'Hello World'.private void Button_Click(object sender, RoutedEventArgs e) { tbLabel.Text = txInput.Text; }When we execute, we will be able to enter a new text that substitutes 'Hello World'.
Now that we have taken our first steps with Silverlight, let's have a quick introduction to some basic concepts in XAML.
Extensible Application Markup Language (XAML) is a declarative language. Specifically, XAML can initialize objects and set properties of objects, using a language structure that shows hierarchical relationships between multiple objects, and uses a backing type convention that supports extension of types. You can create visible user interface (UI) elements in the declarative XAML markup. You can then use a separate Code-Behind file to respond to events and manipulate the objects you declare in XAML (For more information on XAML, you can take a look at http://msdn.microsoft.com/en-us/library/cc189036(v=vs.95).aspx).
The advantages of XAML when compared to HTML are as follows:
XAML is a modern language, adapted to the current needs of users and implemented from scratch (whereas HTML suffers from organic growth)
We have only one way to implement it, which avoids us headaches derived from the problems of adaptation with different browsers and their versions
There is a clear differentiation between declarative (XAML) and business logic/code parts (
.csCode-Behind)
The best you can do is try it and see for yourself.
