In this series of blog I will jump into the usage of Expression Blend for building Rich Internet Applications that are fun and easy to use based on Silverlight. Additional features are covered in a sequel to this blog (Part 2 and Part 3). The code generated by this UI designer tool is XAML which is easily understandable as we see it getting generated dynamically as and when we create or modify UI controls and associated properties. The good thing about Expression Blend is that what you see is what you get; meaning what you have seen (effects) in the design mode is what you actually see on your web page and the change is immediately available in the design mode as well. If you are building a project for Microsoft’s windows application, then Windows Presentation Framework is being used behind the scenes and if building web based applications, Microsoft’s Silverlight is being used in the background. This is one simple fact that you need to understand as there are so many names flowing since the advent of .NET 3.5
One of the main reasons to use Expression Blend is to see XAML in action in conjunction to the power of Silverlight. The Visual Studio Designer works in a read only mode and the controls can just be dropped but not altered using the designer which needs to be done via writing XAML code manually. But when we use Expression Blend, the Silver Light Controls can be modified in the designer mode itself and one can see the code generated simultaneously. This way, we could use the tool as well as learn XAML which is fairly simple. I am assuming that we have installed Visual Studio 2008 or 2010 and Expression Blend 3.0. A trial version is available if you do not have a licensed copy of Expression Suite. Note that the version of Silverlight if using VS 2010 needs to be 4.0 and Visual Studio Express Edition does not support loading projects created from Expression Blend
Let’s also quickly understand what XAML and Silverlight are at a high level before taking a deep dive into building a sample website which shall expose the audience to XAML, Silverlight controls and Expression Blend while not forgetting how to build fun and easy to use Rich Internet Applications faster.
XAML: Extensible Application Markup Language is a declarative XML based language created by Microsoft. XAML is used for creating and eventing the Silverlight controls.
Silverlight: Is a development platform from Microsoft for creation of rich & interactive web, and mobile applications. It is Microsoft’s equivalent to Flash from Adobe and my objective is not to compare these two. You could always do some research for your needs and choose appropriate technology. Ex: Streaming video is not harsh on the CPU when used with Silverlight
Let’s directly start looking into some code snippets for XAML and exploit some UI controls available as a part of Silverlight development platform and also exploit Expression Blend to design a website. Program logic can be built using C# from Visual Studio but I will not focus on that for this Part.
Enough of theory and let’s get into hands on mode:
1) Launch Expression Blend 3 and from File menu, choose new project. Choose Silverlight as the type and Silverlight Application + website as the subtype
2) Default designer settings appear with solutions explorer and properties panel with additional UI related controls. Make a special note of the assets toolbar button which is the main area of interest which groups most of what we want.
3) At this point the project is not loaded with any controls other than the default grid on which we intend to place objects. Let’s take a look at the XAML that was generated until now:
Change the values for the width or height and observe on the fly changes in the designer. As an alternative, which is actually the main purpose of this exercise is to use designer to observe the XAML being generated. Reduce the size of the canvas or choose a different background color from the properties tab / brushes and observe the XAML. There are options to view both the code and designer by using the split option available between the main page and properties tab.
4) Instead of a hello world example, let’s do something different by adding an image file and changing some key properties and observe XAML. From Project menu, select add an existing item and choose an image file from your computer. A couple of JPEG files shall serve our purpose.
5) From the properties tab, under appearance section, change the opacity property to 50 for one of the images and observe in the designer that the effect is instant and also the XAML is generated to add the opacity property
6) Select the second image and change its height, width and from the transformation section, select the rotate option, set an angle using the rotating widget and observe the amount of XAML and the tags created for skew etc. The value of the angle is also displayed. Change this from XAML or the rotator to dynamically observe the effect.
From the solution explorer, right click and choose the option to open with visual studio. The solution is opened in the IDE and the interface is pretty standard to what one has been using all this while with an exception that the designer and XAML are available in a tabbed fashion and are swappable
The purpose of this blog is not to give demo on Expression Blend, but to expose the audience to the benefits of using expression blend in conjunction with visual studio or expression blend alone to build rich UI in a fast and easy manner. I will cover more practical topics in the subsequent blog posts.
There are more easy to use features such as timelines, states that can be used to build interactive web sites that use Silverlight platform.
Select build project followed by run. A web page is rendered using the server from local host that displays images in the browser with the same effects as seen in the designer
9) Let’s add a Silverlight button control and look at some basic C# code as well as the simplicity with what one can fire events associated with an object as if one is working on Windows based controls in .NET
From the tool bar, double click the button control to add the default size. Observe the XAML and change properties as needed including the content (label property) etc.., that get changed in the XAML. While the button is selected and is focused on Property tab, select the ‘events’ icon to see a list of .NET provided events. Enter a name for the method you intend to create for the click event and navigate out of the field once the method name is entered. A new tab is opened displaying the .NET namespaces and C# code generated so far with focus on the method you created for the click event. Type: MessageBox.Show(“test”); AND build the Project as well as run the same. The web page is rendered with your button readily available for you which when clicked displays the test message. Instead of writing complex code to manipulate objects created in expression blend, I will show how one can leverage some other features like ‘timelines & storyboards’ in subsequent blogs.
To conclude, it is very easy to understand and explore Silverlight for web development or web application support and maintenance without having to worry about the details such as XAML syntax etc… Since Silverlight is primarily used for web and mobile applications, there are other tools that are part of Expression Suite which aide in optimizing memory aspects that facilitate in the development needs of rich media which might also need attention.
No comments:
Post a Comment