Building a Twitter App with Silverlight 3 - Part 1
•Als PPTX, PDF herunterladen•
0 gefällt mir•610 views
This document provides an overview of building a Twitter application with Silverlight 3. It discusses key Silverlight features like navigation, database access via web services, and cross-domain requests. The presentation demonstrates creating a navigation application in Silverlight and accessing data via ADO.NET data services. It provides resources for additional Silverlight development information.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Andere mochten auch
Ähnlich wie Building a Twitter App with Silverlight 3 - Part 1
Ähnlich wie Building a Twitter App with Silverlight 3 - Part 1 (20)
Mehr von Clint Edmonson
Mehr von Clint Edmonson (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Building a Twitter App with Silverlight 3 - Part 1
- 1. Building a Twitter App with Silverlight 3 Clint Edmonson Developer Evangelist clinted@microsoft.com www.notsotrivial.net Part 1
- 2. Introduction Session Objectives Learn about the features available in Silverlight Gain techniques for getting started and using Silverlight in your site Agenda What is Silverlight? Navigation Applications Database access Web Services
- 4. Vector graphics and animation
- 6. Video and audio playback
- 7. Silverlight
- 8. Based on WPF
- 11. The Silverlight Plug-in Runs on PC and Intel Macs (Linux with Moonlight) Supports IE, Firefox, Safari Under 5 MB download Installs in seconds
- 12. CoreCLR and BCL CoreCLR Silverlight’s version of the Common Language Runtime Based on the desktop CLR Runs on Mac Does not require the desktop .NET Framework to be installed Silverlight Base Class Library (BCL) Trimmed down, What’s there works the same
- 13. XAML Similar to HTML in concept Language independent Strong support for data binding Designer tool friendly <Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="20" Canvas.Top="20" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Yellow" /> <Ellipse Canvas.Left="80" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Ellipse Canvas.Left="140" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Path Data="M 70, 150 A 60, 60 0 0 0 170, 150" Stroke="Black" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" /> </Canvas>
- 14. Naming XAML Elements Uses the x:Name syntax Helps to access elements from code Generates code in InitializeComponent() method <Rectangle Canvas.Left="50" Canvas.Top="50" Fill="Yellow" Width="300" Height="200" Stroke="Black" StrokeThickness="10" x:Name="YellowRect" />
- 17. Pages and Frames
- 18. UriMapper
- 23. JSON and XML parsing
- 24. RSS
- 29. Can work around by calling through Javascript - not recommended
- 32. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Hinweis der Redaktion
- Building a Twitter App with Silverlight 3 (Part 1 of 2) Welcome 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 a browser based application such as a twitter client. 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.
- While Silverlight is a great platform for these types of sites, it also has strong data capabilities which make it attractive for building line of business applications. These are the features that we will be focusing on today. First we’ll go through a quick overview of the Silverlight platform and then we’ll get hands on and start putting together an application that consumes server side data and contains some simple navigation, so let’s get started.
- RIA (pronounced Ree-a or R.I.A.) stands for Rich Internet Applications. RIA is more of a classification of applications and the definition of what constitutes a Rich Internet Application varies but typically includes an advanced graphics rendering engine for displaying high quality vector graphics and text, some sort of client side storage over and above standard browser cookies, and the ability to serve up high quality audio and video. Silverlight is Microsoft’s implementation of a RIA framework, some other well known entries in this space are Flash/Flex and JavaFX. The code name for Silverlight in development was WPF/e which stood for Windows Presentation Foundation everywhere and Silverlight is considered a subset of the capabilities available in WPF. Silverlight runs client side in the browser but lets you develop your application using your favorite .NET language like C# or VB.NET as well as dynamic languages like IronPython. You can develop Silverlight applications using Visual Studio or Visual Web Developer Express. Visual Web Developer Express is the free version of Visual Studio for building web applications. Another useful tool for Silverlight and WPF development is Microsoft Expression Blend. Expression Blend is targeted at graphics designers and provides them with the type of visual interface that they are used to. Visual Studio and Expression Blend can be used in conjunction easily since they use the same solution and project files allowing for tighter collaboration between developers and designers.For links to downloads of all of the prerequisites for doing Silverlight development you can visit the Get Started page at silverlight.net.
- Silverlight has come a long way since release of 1.0 in late 2007. In version 1, there were a lot of barriers to creating a great application, there wasn’t even a TextBox not to mention more advanced controls. You had to use JavaScript and it was hard to create anything more complex than a single canvas. Silverlight 1 ended up being used mainly for video players and photo galleries where the code was either provided or generated. With its small download size and cross platform support it was a good alternative to an embedded Media Player or QuickTime control. Silverlight 2 was a big step up, with .NET support, a suite of controls available, and the ability to easily retrieve data from the server and display it. We also saw the beginnings of support for the DLR, or Dynamic Language Runtime, allowing you to code your Silverlight application with Ruby, Python, and other dynamic languages. Silverlight 3 followed less than ten months after Silverlight 2 but a tremendous amount of new features were added such as H.264 video, Smooth Streaming video playback, 3D perspective transforms, better text rendering, performance improvements, bitmap APIs, and much more. Silverlight 4 development is under way, and if you want to provide input as to which features you think are the most important for the next version you can provide feedback at silverlight.uservoice.com.
- For a user to run a Silverlight application, they need to install the Silverlight plug-in. This is a free download and only needs to be installed once. The download size is under 5 megabytes and there is good support for the most popular platforms and browsers. The ability to run Silverlight applications has been extended even further through the Moonlight project.Moonlight is a Silverlight compatible plugin for Linux and is being developed by the Mono team at Novell. Microsoft has partnered with Novel on this project and provides test cases, video codecs and other support to the Moonlight team. Moonlight 2 which implements all of Silverlight 2’s functionality is currently in Beta.There is a special version of the Silverlight Plug-in that is installed with the Visual Studio Tools for Silverlight that is a bit larger but helps developers by providing more details when exceptions are thrown. This developer runtime is completely compatible with the user runtime and replaces it on your developer machine. You cannot run multiple versions of the Silverlight plug-in but the Silverlight 3 plug-in is designed to be 100% backwards compatible with both Silverlight 1 and 2.
- Now it’s time for some alphabet soup. One of the most important capabilities of Silverlight 2 and higher is the ability to embed .NET code in your Silverlight application. The CoreCLR is a special version of the Common Language Runtime specifically for Silverlight, but it is based on the desktop version of the CLR and shares a lot of its features. The Garbage Collector is the same one that runs on the desktop, the same goes for the thread pool and other important components. This allows for consistent behavior between the two environments. As a testament to this, when it came time to add LINQ support to Silverlight, the team just included the LINQ project files and were able to compile and use them without changes. You can get these same kinds of benefits when sharing code between Silverlight and other .NET based frameworks.Clearly on the Mac, there is no .NET Framework installed on the machine that can be leveraged, but the same goes for the PC. Silverlight does not require the .NET Framework to be installed and won’t use it even if it is. The Base Class Library contains the classes and namespaces that everything else builds on top of. Here you’ll find collections, threading, networking, the string class, and many others of the most common classes. The Base Class Library has grown on the desktop platform and to reduce the size of the initial download, some classes have been removed from the Silverlight BCL. One obvious example of this is the Collections namespace. Microsoft recommends that developers move away from the non-generic collections and these are not available in Silverlight. In some other cases the classes just don’t make sense in a web client environment. For the classes that exist in both, every effort has been made to keep the interfaces consistent so that code that uses the BCL (which is pretty much everything) should be portable between the two.
- In previous client side technologies like Windows Forms, you would lay out your visuals in the designer and then Visual Studio would generate the code to create these controls and position them properly. You were then told to leave those files alone. This model causes issues every time you want to add support for a new language or create other tools that can work against the same files. To get around these problems and more, Silverlight and WPF have borrowed from the Web style of development and have implemented XAML. XAML stands for eXtensible Application Markup Language and is XML based. One major benefit of XAML is that it lends itself very well to tools and Expression Blend as well as third party tools like Kaxaml by Robby Ingebretsen can work against the same files. You can also edit them by hand in a text editor, something you probably wouldn’t want to do with Windows Forms generated code.We have a sample of some XAML here, there is a Canvas panel with some Ellipses and a Path element and this will render the following visual:(Click to show resulting image)XAML also lends itself well to data binding by providing a simple syntax for describing what data is to be bound. Data binding is an essential concept to Silverlight and WPF and if you take nothing else away from this session I recommend that you get to know and understand how it works.One important key to maintainability of code is to write less code. Less code written means less code to maintain. XAML and data binding when used properly can tremendously reduce the amount of code you need to write and enforce the separation of responsibility between the different layers of your application.
- If we have all of these visual elements declared in XAML, how can we access them from code to set properties and do other interaction? This is done through the x:Name attribute. For any element that has an x:Name attribute, a field is added to the class and code is added to the InitializeComponent method to associate the element with this field. This InitializeComponent method is called from the control’s constructor.So we still have a little generated code but it’s much less and it doesn’t prevent the XAML from being edited in Blend or by hand. If you rename or add a name to an element, the generated code will be updated at compile time.Another use for named elements is when using Storyboard animations. Storyboard animations allow you to modify a property value or values over a given period of time. Storyboards require elements to be named so that you can specify which element to perform the Storyboard on.
- Silverlight has some special needs when it comes to navigation. The traditional web model is to navigate to a new page and load the entire page. With Silverlight, if you navigate to a new HTML page, you need to reinitialize the control and you’ll lose any state that you had unless you persist the state to local storage or through some other mechanism. You may also want to provide a transition between pages like a page flip animation or a fade. The navigation framework in Silverlight is based on the concept of Pages and Frames. A Frame handles the loading and display of the appropriate Page based on the URI. The UriMapper property of the Frame element determines which Page to load. We’ll see more about how this all hangs together in our sample application.To make it easier to create a multiple page Silverlight application, a new project template has been added which sets up the proper file structure and generates some default content. Let’s take a look at creating a new project using this template.
- You have a tremendousnumber of options when it comes to getting data to your Silverlight application. The remote server doesn’t have to be running ASP.NET or IIS, it only needs to serve up the data via HTTP requests. There is built in support for most of the common protocols for retrieving data including SOAP services and RSS. If you’re posting or receiving JSON data there are helper classes that make converting JSON to and from .NET objects easy. Silverlight also provides LINQ to XML, a powerful and easy to use library for creating and parsing XML data. If none of the other interfaces meet your needs you can roll your own using the lower level HttpWebRequest and WebClient classes.
- If you are communicating with an ASP.NET web server, you get some extra benefits such as being able to take advantage of higher level interfaces. Windows Communication Foundation services are accessed just like any other SOAP service but there is also support for integrating with ASP.NET Forms authentication. This allows you to piggyback on the site’s authentication and provide secure communication for your Silverlight application. Silverlight 3 also provides support for binary XML communications over WCF which significantly reduces the amount of data that needs to be transferred.ADO.NET Data Services which you may know by its code name “Astoria” provides a REST based interface to a SQL Server database. This can be much easier than creating web services for every operation you want to implement, especially if you have a lot of tables. Since this is a REST interface, there is no data contract like there is in a SOAP interface. This can make writing client side code against a REST interface more difficult. When accessing ADO.NET Data Services from Silverlight you actually get the best of both worlds because the REST interface is queried and client side proxy objects are created for you.Even when using a higher level interface like ADO.NET Data Services, you still need to handle asynchronous events and do some other glue code. There is even more of this if you are using a standard SOAP or REST interface. .NET RIA Services was designed to reduce some of the complexity of this and more making your multi-tier environment feel like a simple client-server application. It allows you to create validations, business logic, and other code once on the server and have it get proxied to the Silverlight client at compile time. This technology is currently available as a CTP and is a free download. Now let’s see how we can add data access to our application.
- Many sites these days provide an API to their data. These sites include Twitter, Facebook, Digg, and others. In order for Silverlight to access these APIs the remote server needs to allow it. This can be done via the clientaccesspolicy.xml file. The server can specify which hosts it trusts, and when a Silverlight application is served up from a trusted host it is allowed to access that site remotely. This includes RSS feeds and any other HTML or web service calls but does not include specifying an image or video source. These can be accessed without worrying about cross domain security.Silverlight is also able to use the crossdomain.xml file which is the Flash equivalent of the clientaccesspolicy.xml file. As long as the server has one of these files and it is configures to allow your application you’re good to go. Unfortunately Twitter doesn’t allow cross domain requests so we need to use a different option. There is a workaround where you can bypass this security by having JavaScript issue the request for you but this has been disabled in Internet Explorer 8 and shouldn’t be relied on. What we’ll do is create a WCF web service and call methods on that which will then request data from Twitter on our behalf. Let’s get back to the application and see how this works.