1 / 96

Silverlight, Rich Internet Applications and Multimedia

24. Silverlight, Rich Internet Applications and Multimedia. Had I the heavens’ embroidered cloths, Enwrought with gold and silver light. William Butler Yeats This world is but a canvas to our imaginations. Henry David Thoreau Something deeply hidden had to be behind things. Albert Einstein.

arawn
Download Presentation

Silverlight, Rich Internet Applications and Multimedia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 24 • Silverlight, Rich Internet Applications and Multimedia

  2. Had I the heavens’ embroidered cloths,Enwrought with gold and silver light. William Butler Yeats This world is but a canvas toour imaginations. Henry David Thoreau Something deeply hidden hadto be behind things. Albert Einstein

  3. Individuality of expression is thebeginning and end of all art. Johann Wolfgang von Goethe It is my intention to present—through themedium of photography—intuitive observationsof the natural world which may have meaningto the spectators. Ansel Adams

  4. OBJECTIVES In this chapter you will learn: • What Silverlight is and how it relates to Windows Presentation Foundation. • To use Silverlight controls to create Rich Internet Applications. • To create custom Silverlight controls. • To use animation for enhanced GUIs. • To display and manipulate images. • To use Silverlight with Flickr’s web services to buildan online photo-searching application. • To create Silverlight deep zoom applications. • To include audio and video in Silverlight applications.

  5. 24.1   Introduction • 24.2   Platform Overview • 24.3   Silverlight Runtime and Tools Installation • 24.4   Building a Silverlight WeatherViewer Application • 24.4.1  GUI Layout • 24.4.2  Obtaining and Displaying Weather Forecast Data • 24.4.3  Custom Controls • 24.5   Animations and the FlickrViewer • 24.6   Images and Deep Zoom • 24.6.1  Getting Started With Deep Zoom Composer • 24.6.2  Creating a Silverlight Deep Zoom Application • 24.7   Audio and Video • 24.8   Isolated Storage

  6. 24.1  Introduction • SilverlightTMis Microsoft’s platform for building Rich Internet Applications (RIAs) • RIAs are comparable in responsiveness and rich user interactivity to desktop applications. • Silverlight is a robust, cross-platform, cross-browser subset of the .NET platform. • Silverlight is a subset of WPF.

  7. 24.1  Introduction (Cont.) • Silverlight supports multimedia—images, graphics, animation, sound and video. • Most computers sold today are “multimedia ready,” with CD-RW and DVD drives, audio boards and special video capabilities. • Computers will be needing faster processors, larger memories and wider communications bandwidths. • WPF and Silverlight, through .NET 3.5, provide facilities for developing powerful multimedia applications.

  8. 24.2  Platform Overview • Silverlight runs as a browser plug-in on popular browsers and operating systems. • Silverlight applications consist of user interfaces described in XAML and code-behind files containing application logic. • Silverlight 2 includes APIs for collections, input/output, generics, multithreading, globalization, XML and LINQ. • It also includes APIs for interacting with JavaScript and the elements in a web page, and APIs for local storage. • Like WPF, Silverlight provides a powerful data-binding model.

  9. 24.3  Silverlight Runtime and Tools Installation • Install the Silverlight 2 Runtime plug-in from www.microsoft.com/silverlight/resources­/installationFiles.aspx?v=2.0. • You’ll also need the Silverlight Tools Beta 2 for Visual Studio 2008 from go.microsoft.com/fwlink/?LinkId=120319. • Microsoft also provides the Silverlight 2 SDK Beta 2, obtainable at www.microsoft.com/downloads/ and searching for “Silverlight 2 SDK”.

  10. 24.4  Building a Silverlight WeatherViewer Application • A basic Silverlight application has two XAML files: • Page.xaml defines the application’s GUI. • App.xaml declares your application’s shared resources that can be applied to various GUI elements. • Since our example applications contain only a single page, we do not use App.xamlandApp.xaml.cs.

  11. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • Select File > New Project... in Visual Studio 2008. • In the Project types window under Visual C#, select the Silverlight option. Then in the Templates window, select Silverlight Application. • In the Add Silverlight Application dialog, select Add a new Web to the solution for hosting the control. In the ProjectType drop-down menu, select WebSite.

  12. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • The Page.xaml file (Fig. 24.1) is similar to the default XAML for a WPF application. • In Silverlight, the root element is a UserControl.

  13. 24.4  Building a Silverlight WeatherViewer Application (Cont.) Silverlight project Web Application project Fig. 24.1|New Silverlight application in Visual Studio.

  14. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • A compiled Silverlight application is packaged by the IDE as a .xap file. • The web page that hosts the Silverlight application references the Silverlight plug-in and the application’s .xapfile. • The Web Application Project is used to test the Silverlight application in a web browser.

  15. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • The first time you debug a Silverlight application, a DebuggingNotEnabled dialog appears. • Select the Modify the Web.Config file to enable debugging option. • At the time of this writing the Design view is read-only and the Properties window is not yet enabled for Silverlight development. • You can drag and drop Silverlight controls from the Toolbox into the XAML view.

  16. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • TheWeatherViewerapplication (Fig. 24.2) allows the user to input a zip code and get weather information for that location. a) Fig. 24.2| WeatherViewer application displays a six-day weather forecast.The program can also display detailed information for a selected day. (Part 1 of 2.)

  17. 24.4  Building a Silverlight WeatherViewer Application (Cont.) b) Fig. 24.2| WeatherViewer application displays a six-day weather forecast.The program can also display detailed information for a selected day. (Part 2 of 2.)

  18. Outline • The main layout controls of WPF are available in Silverlight. • The XAML for the layout of the WeatherViewer application is shown in Fig. 24.3. WeatherViewer.xaml (1 of 4 ) Importing this namespace allows use of the custom WeatherDetailsView control. This application uses a Grid layout container. Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 1 of 4.)

  19. Outline WeatherViewer.xaml (2 of 4 ) Padding defines the distance between the edge of the container and embedded elements. Defining a TextBox. Defining a Button. The weather forecast is displayed inside a ListBox control. Defining a horizontal StackPanel as the ListBox’s ItemsPanel. Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 2 of 4.)

  20. Outline WeatherViewer.xaml (3 of 4) Binding the image to data from the web service’s XML response. Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 3 of 4.)

  21. Outline WeatherViewer.xaml (4 of 4 ) Defining the WeatherDetailsView custom control element. Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 4 of 4.)

  22. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • Padding defines the distance between the edge of the container and embedded elements. • By setting the WeatherDetailsView’s Grid.RowSpan property to 2, the control expands to hide other controls.

  23. Outline • The WeatherViewer application’s code-behind file appears in Fig. 24.4. WeatherViewer.xaml.cs (1 of 6 ) Import the System.Xml.Linq namespace, which enables LINQ to XML. Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 1 of 6.)

  24. Outline WeatherViewer.xaml.cs (2 of 6 ) Get the zip code entered by the user in the TextBox Format the web-service URL with the zip code Call the weatherService object’s DownloadStringAsync method to invoke the web service. Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 2 of 6.)

  25. Outline WeatherViewer.xaml.cs (3 of 6 ) The DownloadStringCompleted event handler has a parameter e of type DownloadStringCompletedEventArgs which contains information returned by the web service. Check for an error and ensure that the result contains the desired information. Convert the string containing the contents of the XML response to an XDocument. Define the namespace for the XML returned by the web service and allow the application to access the data. Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 3 of 6.)

  26. Outline WeatherViewer.xaml.cs (4 of 6 ) The LINQ to XML query gathers the weather information and sets the corresponding values for a WeatherData object. Class WeatherData includes all the necessary weather information for a single day of the week. Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 4 of 6.)

  27. Outline WeatherViewer.xaml.cs (5 of 6 ) Bind the results of the weatherInformation LINQ query to the ListBox to display the summary of the six-day weather forecast. When the user selects a particular day, we bind the WeatherData object for the selected day to the custom control, which displays the details for that day. Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 5 of 6.)

  28. Outline WeatherViewer.xaml.cs (6 of 6 ) Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 6 of 6.)

  29. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • You must add a reference to the System.Xml.Linq assembly in addition to importing the namespace. Error-Prevention Tip 24.1 When invoking a web service that returns XML, ensure thatthe namespace you specify in your code precisely matches the namespace specified in the returned XML. Otherwise, theelements in the returned XML will not be recognized in your code. • To add the code for a class to a project, right click the project in the Solution Explorer and select Add > Existing Item..., find the file containing the class’s code and click OK. • In Silverlight applications, you cannot bind to anonymous types.

  30. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • A sample of the web service’s XML response appears in Fig. 24.5. Fig. 24.5|Sample web-service XML response.

  31. 24.4  Building a Silverlight WeatherViewer Application (Cont.) 24.4.3Custom Controls • As with WPF, you can create custom controls using the UserControl element as a template. • To add a new UserControl to the project, right click the project in the Solution Explorer and select Add > New Item.... Select the Silverlight User Control template and name the file (Fig. 24.6).

  32. 24.4  Building a Silverlight WeatherViewer Application (Cont.) • Once added to the project, a UserControl can be coded similar to any other Silverlight application. Fig. 24.6|Adding a new UserControl to a Silverlight application.

  33. Outline • The XAML code for the WeatherDetailsView custom control’s GUI appears in Fig. 24.7. WeatherDetailsView.xaml (1 of 4 ) Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 1 of 4.)

  34. Outline WeatherDetailsView.xaml (2 of 4 ) Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 2 of 4.)

  35. Outline WeatherDetailsView.xaml (3 of 4 ) Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 3 of 4.)

  36. Outline WeatherDetailsView.xaml (4 of 4 ) Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 4 of 4.)

  37. Outline • Figure 24.8 shows the code-behind file for the WeatherDetailsView control. WeatherDetailsView.xaml.cs The Button’s Click event handler collapses the control, so the user can continue interacting with the main page of the application. Fig. 24.8 | WeatherViewer's WeatherDetailsView customcontrol (code-behind).

  38. 24.5  Animations and the FlickrViewer •Animations in Silverlight are defined in Storyboards, which are created as Resources of a control and contain one or more animation elements. •When a Storyboard’s Begin method is called, the embedded animations begin executing. FlickrViewer Example •A sample screen capture of the FlickrViewer example is shown in Fig. 24.9.

  39. 24.5  Animations and the FlickrViewer (Cont.) Fig. 24.9|FlickrViewer allows users to search photos by tag.

  40. 24.5  Animations and the FlickrViewer (Cont.) • A tag is any user-generated word or phrase that helps organize web content. • Flickr uses tags on uploaded files to improve its photo-search service, giving the user better results.

  41. 24.5  Animations and the FlickrViewer (Cont.) • You can type one or more tags into the application’s TextBox and click the SearchButton to invoke the Flickr web service • The web service responds with an XML document containing links to the photos that match the tags. • The application parses the XML and displays thumbnails of the photos.

  42. Outline • The application’s XAML is shown in Fig. 24.10. FlickrViewer.xaml (1 of 4 ) The animateInStoryboard contains a DoubleAnimation that animates the Height property of the largeCoverImage’s Border. Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 1 of 4.)

  43. Outline FlickrViewer.xaml (2 of 4 ) The animateOutStoryboard shrinks the Border until the image inside is no longer visible. Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 2 of 4.)

  44. Outline FlickrViewer.xaml (3 of 4 ) Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 3 of 4.)

  45. Outline FlickrViewer.xaml (4 of 4 ) Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 4 of 4.)

  46. Outline • The code-behind for FlickrViewer application can be seen in Fig. 24.11. FlickrViewer.xaml.cs (1 of 6 ) To run this application you need to insert your Flickr API key here. Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 1 of 6.)

  47. Outline FlickrViewer.xaml.cs (2 of 6 ) Assign the value largeImageCover.ActualHeight to the Border’s Height so it can be animated. Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 2 of 6.)

  48. Outline FlickrViewer.xaml.cs (3 of 6 ) To load the large Image, use the URL of the thumbnail and remove the “_t” from the link. set the To property to the Height of the page’s second row (minus 20 to account for the Border’s Margin). Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 3 of 6.)

  49. Outline FlickrViewer.xaml.cs (4 of 6 ) Reset the Border’s Height back to double.NaN, which allows the border to be resized with the window. Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 4 of 6.)

  50. Outline FlickrViewer.xaml.cs (5 of 6 ) Use a LINQ query to gather the necessary information from the attributes of the photo elements in the XML returned by the web service. Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 5 of 6.)

More Related