1 / 81

Weather Viewer Application Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services

32. Weather Viewer Application Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services. Outline. 32.1 Platform Overview 32.2 Silverlight 2 Runtime and Tools Installation 32.3 Test-Driving the Weather Viewer Application 32.4 Overviewing the Weather Viewer Application

varuna
Download Presentation

Weather Viewer Application Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services

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. 32 • Weather ViewerApplication • Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services

  2. Outline • 32.1 Platform Overview • 32.2 Silverlight 2 Runtime and Tools Installation • 32.3 Test-Driving the WeatherViewer Application • 32.4 Overviewing the WeatherViewer Application • 32.5 Creating the WeatherViewer Application

  3. Outline • 32.6 Calling a Web Service and Using LINQ to XML to Process the Results • 32.7 Customizing the Data Presentation • 32.8 Creating a Customized Silverlight Control • 32.9 Final WeatherViewer Application Code

  4. In this tutorial you will learn: Use Silverlight to create a rich Internet application. Create Silverlight user interfaces in XAML. Use LINQ to XML to convert XML into a collection of Visual Basic objects. Use XML Axis properties to manipulate XML content in Visual Basic. Customize the appearance of existing Silverlight controls. Create a custom Silverlight control. Objectives

  5. 32.3 Test-Driving the WeatherViewer Application • You have been asked to create a web-based application that allows the user to enter a zip code and displays the weather forecast for the corresponding United States city. To obtain the weather forecast, you must use a web service. The application should display the days of the week returned by the web service and the image that represents the weather for each day. The user should then be able to click the appropriate day to see the high and low temperatures for that day in both Fahrenheit and Celsius.

  6. 32.1 Platform Overview • SilverlightTM is Microsoft’s platform for Rich Internet Applications • These applications that offer the responsiveness and rich GUI features of desktop applications. • Silverlight runs as a browser plug-in compatible with most browsers and operating systems. • The user interface is described in XAML and acode-behind file contains the program logic.

  7. 32.1 Platform Overview (Cont.) Silverlight 2’s .NET Platform Subset • Silverlight is a robust, cross-platform, cross-browser subset of the .NET platform. • Silverlight supports .NET collections, input/output, generics, multithreading, globalization, XML and LINQ. • Silverlight also includes APIs for interacting with other elements in a web page.

  8. 32.1 Platform Overview Graphics and GUI Capabilities • Silverlight’s graphics are a subset of the WPF framework. • Figure 32.1 shows the default list of controls thatyou can use in Silverlight. Figure 32.1|Default controls listed in the IDE’s Toolbox for Silverlight applications.

  9. 32.1 Platform Overview (Cont.) • Data Binding • Silverlight’s data-binding model makes it easy for you to display data from objects, collections, databases, and XML. • Networking • Silverlight’s networking support allows you to write browser-based applications that invoke web services and other networking technologies.

  10. 32.2 Silverlight 2 Runtime and Tools Installation • Download and install the following software: • Silverlight 2 Runtime • Silverlight Tools Beta 1 for Visual Studio 2008 • Silverlight is not currently available for Visual Studio Express Edition.

  11. Test-Driving the WeatherViewer Application • Run the completed Weather Viewerapplication(Fig. 32.2). Note that the screen capturesin this tutorial were taken inInternet Explorer 8 beta, butthe application runs in anybrowser with the Silverlight 2 runtime installed TextBox in which the userenters the zip code Figure 32.2|Weather Viewer application before the user enters a zip code.

  12. Test-Driving the WeatherViewer Application (Cont.) • Enter a US zip code in the TextBox (Fig. 32.3), then press the Get WeatherButton to obtain the weather forecast. User selects a day to see the detailed forecast for that day Figure 32.3|Displaying the weather forecast for the specified zip code.

  13. Test-Driving the WeatherViewer Application (Cont.) • Click one of the days in the forecast to see the complete details for that day (Fig. 32.4). Customized control displaysthe detailed forecast andblocks the user from accessingthe rest of the GUI until theCloseButton is clicked Figure 32.4| Complete weather details for the selected day.

  14. 32.4 Overviewing the Weather Viewer Application When the user presses the Get Weather Button: Obtain the US zip code from the Zip Code… TextBox Use a WebClient object to invoke the WeatherForecast web service fromw www.webservicex.net When the response data is received from the web service: Convert the XML weather forecast into WeatherData objects Use data binding to display the Weather Data objects in a ListBox

  15. 32.4 Overviewing the Weather Viewer Application (Cont.) When the user selects a particular day in the weather forecast: Display the complete details of the forecast for that day When the user clicks the Close Button in details view: Close the details view When the user changes the text in the Zip Code… TextBox: Clear the contents of the ListBox

  16. Action/Control/Event (ACE) Table forthe WeatherViewer Application • Use an ACE table to convert the pseudocodeinto Visual Basic (Fig. 32.5). Figure 32.5|WeatherViewer application’s ACE table. (Part 1 of 2.)

  17. Action/Control/Event (ACE) Table forthe WeatherViewer Application (Cont.) Figure 32.5|WeatherViewer application’s ACE table. (Part 2 of 2.)

  18. Creating a Silverlight Application • In Visual Studio, select File > New Project(Fig 28.6). • Under Visual Basic Silverlight project types, select Silverlight Application. • Name your project WeatherViewer. Silverlight Applicationproject template Figure 32.6| Creating a new Silverlight Application project.

  19. Creating a Silverlight Application (Cont.) • Select Add a new Web to the solution for hosting the control and choose Web Application Project. • Your IDE should now appear similar to Figure 32.7. Design view split into adesigner and XAML editor Figure 32.7| New Silverlight application in Visual Studio.

  20. 32.5 Creating the Weather Viewer Application Basics of a Silverlight Application Project • A basic Silverlight application has two XAML files: • Page.xaml defines the application’s GUI. • App.xaml declares your application’s shared resources, such as styles for GUI elements. • It also has two code-behind files. • Page.xaml.vbdeclares the GUI event handlers and other methods. • App.xaml.vb defines application-level event handlers.

  21. 32.5 Creating the Weather Viewer Application (Cont.) • The Page.xaml file is similar to the default XAML for a WPF application. • In Silverlight, the main element is a UserControl. • A Silverlight application is packaged as a .xapfile. • The web page in which the Silverlight application will be hosted references the application’s .xap file to launch the Silverlight Runtime.

  22. 32.5 Creating the Weather Viewer Application (Cont.) Laying Out and Building the GUI • There are three types of layout containers in Silverlight—Canvas, StackPanel and Grid. • A Canvas enables you to precisely control positioning. • A StackPanel enables you to place a set of controls horizontally or vertically. • A Grid enables you to specify rows and columns with fixed sizes or with auto-size.

  23. Defining the Layout Using Grids • Remove White from the Background attribute (Fig. 32.8), then type Ctrl + Space to display an IntelliSense window. • Specify any color you wish as a hexadecimal value of the form #RRGGBB. • Insert the ShowGridLines attribute so that you can see the grid layout better as you design. Grid layout container with Background of LightSkyBlue and gridlines displayed Figure 32.8|Changing the background color of the Grid and displaying grid lines.

  24. Defining the Layout Using Grids (Cont.) • Split the Grid into two rows and one column (Fig. 32.9). • The first row’s height should be 35 pixels. • The asterisk (*) indicates that the row should occupy all remaining space. Defines two rows in the Grid Defines two rows in the Grid Figure 32.9| Defining the rows and column in the main Grid.

  25. Defining the Layout Using Grids (Cont.) • The first row of the GUI contains three elements. • Lines 16–26 of Fig. 32.10 define the Grid element that manages the GUI controls in the first row. • Lines 21–25 create a Grid.ColumnDefinitions element containing three ColumnDefinitions. Defines a nested Grid withone row and three columns Figure 32.10| Defining a Grid that will contain the first row of elements in the GUI.

  26. Defining the Layout Using Grids (Cont.) • The Border element (Fig. 32.11) contains a TextBlock element. • The Grid.Row and Grid.Column attributes indicate the row and column in which the Border is placed. • The Border has a CornerRadius of 10 (which rounds its corners). Defines a Border containing a TextBlock in row 0 and column 0 of the nested Grid Defines a TextBoxin row 0 and column 1 of the nested Grid Defines a Button in row 0 and column 2 of the nested Grid Figure 32.11| Inserting controls into the nested Grid.

  27. Defining the Layout Using Grids (Cont.) • A TextBlock (Fig. 32.12) is used here just to show you that there is a second row. Defines a TextBlock in row 1 of the main Grid Figure 32.12| Inserting an element in the second row of the main Grid.

  28. Defining the Layout Using Grids (Cont.) • Run the application (Fig. 32.13). • Notice that the application does not resize automatically. Figure 32.13|Weather Viewer running in a browser.

  29. Defining the Layout Using Grids (Cont.) • Remove the main UserControl’s Width and Height attributes. • The application now occupies the entire browser window (Fig. 32.14). Removing the Width and Height attributes from the UserControlenables the application to resizewith the browser window Figure 32.14| Resizable Weather Viewer running in a browser.

  30. 32.6 Calling a Web Service and UsingLINQ to XML to Process the Results • A web service is a software component stored on one computer that can be accessed via method calls over a network. • Web services have important implications for business-to-business transactions. • They enable businesses to conduct transactions via standardized, web services rather than relying on proprietary applications. • Web services typically are platform and language independent, so companies can collaborate without worrying about compatibility.

  31. 32.6 Calling a Web Service and UsingLINQ to XML to Process the Results (Cont.) • Web services can be invoked directly from a web browser using a technique called Representational State Transfer (REST). • Each operation is identified by a unique URL.

  32. Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler • Remove the TextBlock at lines 40–41, then double click the DataGrid control in the Toolbox to insert a DataGrid control (Fig. 32.15). Defines a DataGrid control Figure 32.15 | InsertedDataGrid element.

  33. Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.) • The DataGrid control (Fig. 32.16) is in a separate library (known as an assembly) from the other Silverlight controls. • An assembly (represented as a .dll file) is the mechanism used to package compiled .NET code for reuse. Figure 32.16 | Reformatting the UserControl start tag for readability.

  34. Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.) • The DataGrid’s x:Name attribute (Fig. 32.17) indicates the control’s name for use in Visual Basic code. • The attribute AutoGenerateColumns indicates that the DataGrid should determine its columns from the source of its data. DataGrid control configured toappear in row 1 of the main Grid Figure 32.17 | Configuring the DataGrid.

  35. Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.) • Right click Page.xaml in the Solution Explorer and selecting View Code. • At the top of the Code view, the Class NameComboBox (Fig. 32.18) lists classes and objects. Selecting submitButton from theClass NameComboBox Figure 32.18 | Selecting submitButton from the Class NameComboBox.

  36. Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.) • Select submitButton from the Class NameComboBox, then select Click from the Method NameComboBox (Fig. 32.19). • This generates a Click event handler for the Button. Selecting Clickevent from theMethod NameComboBox Figure 32.19 | Selecting the Click event in the Method NameComboBox.

  37. Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.) • When the user presses the Get WeatherButton, the application should use the zip code to invoke the web service (Fig. 32.20). Changing the Cursor to the Waitcursor to indicate that theapplication is awaiting a response Defining the web service URL Asynchronously calling the web service Figure 32.20 | Get WeatherButton’s event handling code.

  38. Creating a WebClient Object and UsingIt to Invoke a Web Service • You must import the System.Net namespace (Fig. 32.21). Importing namespaceSystem.Net Figure 32.21 | Importing the System.Net namespace.

  39. Creating a WebClient Object and UsingIt to Invoke a Web Service (Cont.) • A WebClient object must be used an instance variable (Fig. 32.22). • The keyword WithEvents indicates that events are associated with the object. • When the DownloadStringCompleted event occurs, the application processes and displays the information. Creating a WebClient object to invoke the web service Figure 32.22 | Creating a WebClient object.

  40. Creating a WebClient Object and UsingIt to Invoke a Web Service (Cont.) • In Code view, select the weatherService object for the Class Name and select DownloadStringCompleted for the Method Name (Figure 32.23). Display the results if there are results to process Changing the Cursor to the Arrow cursor to indicate that the response has been received Figure 32.23 | Calling DisplayWeatherForecast in response to the WebClient’s DownloadStringCompleted event.

  41. Creating a WebClient Object and UsingIt to Invoke a Web Service (Cont.) • The property Error is used to determine whether an error occurred. • If the Result property (a String) contains the substring "Day" there is information you can display, and you call method DisplayWeather­Forecast.

  42. Using LINQ to XML to Convert XML Datainto a Collection of Objects • Right click the project in Solution Explorer and select Add > Existing Item. • Navigate to C:\Examples\Tutorial32\ and select WeatherData.vb. • Add line 2 (Fig. 32.24) to the Page.xaml.vb code-behind file. Notice that the IDE reports an error, indicating that the namespace cannot be found. Importing namespace System.Xml.Linq Figure 32.24 | Importing the System.Xml.Linq namespace.

  43. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • Right click the project in Solution Explorer and select Add Reference . • In the .NET tab, select the assembly System.Xml.Linq (Fig. 32.25) and click OK. Selecting the System.Xml.Linqassembly to add to your project Figure 32.25 | Adding a reference to the System.Xml.Linq assembly.

  44. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • XML uses namespaces in a manner similar to Visual Basic applications. • To enable XML data processing of weather data, you must import the namespace contained in the XML (Fig. 32.26). Importing the XML namespace used in the XML data Figure 32.26 | Importing the XML namespace for the weather-forecast information.

  45. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • This method (Fig. 32.27) receives the String containing the XML returned by the web service. • Line 52 creates an XDocument variable and uses method XDocument.Parse to convert the String object into XML. Parsing the XML responseStringto prepare it for use with LINQ to XML Figure 32.27 | Adding the DisplayWeatherForecast method.

  46. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • This LINQ query (Fig. 32.28) converts the XML data into a collection of WeatherData objects. Selecting the XML’s WeatherData elements that are Creating a new object of class WeatherData from each XML WeatherData element Using XML property syntax to access the XML elements within each WeatherData element and assign their values to properties of the new WeatherData object Figure 32.28 | Converting XML to WeatherData objects with LINQ to XML.

  47. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • The From clause indicates that we are selecting items from the weatherXMLXDocument object. • The ellipsis notation (...) represents the new XML descendants property that is used to select XML elements. • In this case, <WeatherData> indicates that all the WeatherData elements in the XML document should be selected. • The Select clause creates a new WeatherData object for each WeatherData element in the XML.

  48. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • The With keyword indicates that the new WeatherData object should be used implicitly to access the object’s properties. • The notation <Day> uses Visual Basic’s new XML child property syntax to access the child element of the WeatherData element.

  49. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • Save your files to ensure that the forecastList is recognized by IntelliSense, then insert lines 72–73 (Fig. 32.29). • WPF’s powerful data-binding capabilities make it easy for you to display the weather data in the DataGrid. Specifying the DataGrid’s ItemsSource from which it will extract data to display Figure 32.29 | Binding the DataGrid’s ItemsSource property tothe collection of WeatherData objects.

  50. Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.) • Run the application (Fig. 32.30). • Enter a zip code and press the Get WeatherButton to invoke the web service. DataGrid showing the data from a collection of WeatherData objects Figure 32.30 | Displaying the weather forecast in a DataGrid.

More Related