In part 2 of our series on building a Twitter application with Microsoft Silverlight, we get very hands on and dig in to see Silverlight in action. First, we explain how you can display table data in a few different ways, including a traditional grid view and more visually appealing views, such as a chart or a graph. Next we take a look at behaviors. Behaviors are an exciting new feature in Silverlight 3 and Microsoft Expression Blend that make is possible for you to separate more code from your view, making your code more reusable and easier to maintain. Another new feature in Silverlight 3 is the ability to run your application outside of the browser and to launch it, even if you are not connected to the Internet. Join us to see how you can take your Twitter application out of the browser. Silverlight has always been exceptionally strong in the area of video playback and Silverlight 3 raises the bar again--we take a quick look at Microsoft Expression Encoder and explain how it can help to create video for Silverlight playback, including support for Internet Information Services (IIS) Smooth Streaming which is ideal for streaming of high-definition video over the Web.
Presenter: Clint Edmonson, Senior Architect Evangelist, Microsoft Corporation
Clint Edmonson is an architect evangelist in the Microsoft North Central district, working with aspiring and seasoned architects to understand the latest Microsoft developer and platform offerings and to develop strategic road maps for their adoption.
View other sessions from: Microsoft Silverlight
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Building a Twitter App with Silverlight 3 - Part 2
1. Building a Twitter App with Silverlight 3 Clint Edmonson Developer Evangelist clinted@microsoft.com www.notsotrivial.net Part 2
2. Introduction – Part 2 Session Objectives Learn about higher level features to easily create impressive applications Agenda Data Visualization Behaviors Out of Browser Silverlight applications
Building a Twitter App with Silverlight 3Welcome everyone my name is Clint Edmonson and today we’re going to be talking about what Silverlight is and how you can leverage its capabilities to easily create browser based applications. Silverlight has some very powerful media and graphics capabilities, and some compelling sites have been created using it. These sites include the NBC 2008 Olympics, the NCAA basketball tournament, and the 2009 US Presidential inauguration. NBC recently announced that their 2010 Winter Olympics site will again use Silverlight and they’re excited about providing an even better experience this time. Some of the features that we can look forward to at the Olympics are currently being used for Sunday Night Football such as live smooth streaming of video and the ability to rewind live video. If you haven’t seen the Sunday Night Football site you should check it out.
This presentation is very hands on with a few talking points but for the most part we’ll be digging in and seeing Silverlight in action. First we’ll see how we can display table data in a few different ways including a traditional grid view and more visually appealing as a chart or a graph. Next we’ll take a look at behaviors. Behaviors are an exciting new feature in Silverlight 3 and Blend and allow you to separate more code from your view, making your code more reusable and easier to maintain. Another new feature in Silverlight 3 is the ability to run your application outside of the browser and to launch it even if you are not connected to the internet, and we’ll see how we can take our Twitter application out of the browser. Finally, Silverlight has always been exceptionally strong in the area of video playback and Silverlight 3 raises the bar again. We’ll take a quick look at Expression Encoder and how it can help to create video for Silverlight playback including support for IIS Smooth Streaming which is ideal for streaming of High Definition video over the web.This is a lot to get to today so let’s get started.
The DataGrid is a powerful and flexible control which can help you visualize your data. At its simplest, you only need to bind a collection of objects to the DataGrid and it will do the rest. If you want fine grained control over how the data is displayed, you can completely customize the columns or provide a different row display altogether. The DataGrid is designed to be able to display large amounts of data. With built in virtualization, only the rows of data that are currently displayed will be rendered so you don’t have the overhead of the visual elements for rows that are off the screen. In a ListBox or other built in controls, all visual elements in the list are generated and this can lead to performance issues.The default behavior allows you to sort by any column and you can even sort by multiple columns, similar to using a compound key when sorting data in a database query.You can also combine the DataGrid with a DataPager control to add client side data paging. If you combine this with a data source that only retrieves the data it needs from the server, you can have a powerful and efficient data paging strategy. .NET RIA Services provides a data source that does this for you, or you could create your own custom data source. As long as you implement the data paging interface it will seamlessly plug into data paging scenarios. One big benefit of the DataGrid over an ASP.NET based DataGrid is that it can result in less data being sent over the wire. It is not uncommon with ASP.NET DataGrids to have a megabyte or more of data being passed down in each request because all of the HTML is rendered server side and there is also the ViewState which adds even more data to each request. In the case of the Silverlight DataGrid, you only have to download the Silverlight application and the data which can be a big bandwidth savings.The DataGrid also supports the editing of data. You can turn this off by setting the DataGrid to read only mode, but if you want to allow your users to edit the data, all you need to do is use a two way data binding and handle data change events. Default editors are provided for you out of the box, or you can provide a custom editor.There are too many features to list, but some other features include freezable columns, inline row level detail support, multiple row selection, and accessibility support for screen readers.Now let’s take a look at how we can use the DataGrid to add a search view to our Twitter application.
A great way to add some visual appeal to your application while providing “at a glance” understandability is by using the chart controls provided by the Silverlight Toolkit. These attractive charts and the rest of the Silverlight Toolkit are a free download from CodePlex and there are many chart types to choose from. Each of these charts accepts a collection of data and allows you to specify which fields you want to bind to for the dependent and the independent axis of the chart. As with all Silverlight controls, you can customize the look and feel of these charts in Blend or the tool of your choice.The Silverlight Toolkit also provides some other very useful controls including layout panels, themes, accordions, auto-complete textboxes, and more. Before creating your own custom control, take a look at the Silverlight Toolkit and see if they may have already created it for you. The Silverlight Toolkit has releases more often than Silverlight itself, and you can provide feedback when new controls are in the early stages and help to shape the final result.Now let’s add a chart control to our application to display information about which of the people that we’re following on Twitter have the most followers and display how many people are following them.
One big complaint in Silverlight 2 was limited support for triggers. Triggers are a way in WPF to handle an event, such as a mouseover or click, and perform an action without writing any code in the code behind. Silverlight 2 only had support for the Loaded event, for everything else you would need to write at least a little bit of wire up code. This is especially problematic if you are working with a graphics designer since you probably don’t want them digging into the code.Triggers, however, were limited in what they could do. Many times the user interactivity you’re trying to implement is more complex than a single event. Let’s use drag and drop as an example. First you need to handle the mouse down event, then you have to keep track of the fact that you are dragging an element and what that element is. While it’s being dragged you may want to provide some visual representation of what’s being dragged, and finally you need to handle the mouse release and check to see if the mouse is over a valid drop target. This can’t easily be represented as a trigger or a series of triggers.Silverlight 3 and Blend 3 introduce the concept of behaviors. With behaviors, you write code that is encapsulated into a behavior and then can be attached to an element via XAML. In Blend, you can drag a behavior to an element and it will automatically be attached to that element. You can also expose properties that will be available through the behavior’s property tab. Behaviors require the Blend SDK, but you aren’t required to use Blend to use them. The Blend 3 SDK is available as a separate free download. Once installed, you can create and use behaviors in Visual Studio without Blend installed.There are a handful of behaviors built into Blend, including behaviors to kick off a Storyboard or set a property on an element and you can find more behaviors developed by Microsoft and the community in the Expression Gallery. Behaviors are relatively new but there are more being added to the gallery frequently.So let’s see how we can use a custom drag and drop behavior to enhance our application.
One of the most anticipated new features in Silverlight 3 was the ability to run your Silverlight application outside the browser. When it comes to creating cross platform rich applications, it is too constraining to be required to run in the browser. The out of browser support in Silverlight 3 is what would be considered “the basics” and a good first step in the right direction. The good news is for the most part your application will work as-is without any changes. There is no separate runtime for out of browser applications, so you’re using the same runtime as when running inside the browser. This also means that you are constrained by the same security that is in place for your in-browser application. This is a key difference between Silverlight Out of Browser and frameworks such as Adobe AIR. You still cannot access the local file system directly or access other local resources. You can, however, still access web services and other online resources.Silverlight provides APIs to help you install the application locally and detect whether your application is currently running in out of browser mode. This allows you to have your application behave differently when out of browser. For example if you’re currently running out of browser, you may want to store data to Isolated Storage and then publish it up to the server when connected. When running out of browser, your default Isolated Storage quota is increased to support this type of operation. When running in browser, the default quota is 1 megabyte, and when running in Out of Browser mode you have a 25 megabyte quota.When running out of browser, there is also a greater need to determine whether you are currently connected to the internet. A new API has been added which detects when your network connectivity changes and fires events that you can handle in your application. This API is not restricted to Out of Browser mode and you can also use it when running in the browser.When launching a Silverlight application in out of browser mode, a check is made against the server to see if the latest version of the application is installed. If you’re currently offline, don’t worry, this won’t prevent the application from launching. If it is determined that there is a new version available it will automatically be downloaded and updated.Let’s see how we can enable out of browser support for our Twitter application.