Loading in 2 Seconds...
Loading in 2 Seconds...
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
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
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
Silverlight 2’s .NET Platform Subset
Graphics and GUI Capabilities
Figure 32.1|Default controls listed in the IDE’s Toolbox for Silverlight applications.
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.
User selects a day to see the detailed forecast for that day
Figure 32.3|Displaying the weather forecast for the specified zip code.
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.
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
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
Figure 32.5|WeatherViewer application’s ACE table. (Part 1 of 2.)
Action/Control/Event (ACE) Table forthe WeatherViewer Application (Cont.)
Figure 32.5|WeatherViewer application’s ACE table. (Part 2 of 2.)
Silverlight Applicationproject template
Figure 32.6| Creating a new Silverlight Application project.
Design view split into adesigner and XAML editor
Figure 32.7| New Silverlight application in Visual Studio.
Basics of a Silverlight Application Project
Laying Out and Building the GUI
Grid layout container with Background of LightSkyBlue and gridlines displayed
Figure 32.8|Changing the background color of the Grid and displaying grid lines.
Defines two rows in the Grid
Defines two rows in the Grid
Figure 32.9| Defining the rows and column in the main Grid.
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.
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.
Defines a TextBlock in row 1 of the main Grid
Figure 32.12| Inserting an element in the second row of the main Grid.
Figure 32.13|Weather Viewer running in a browser.
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.
Defines a DataGrid control
Figure 32.15 | InsertedDataGrid element.
Figure 32.16 | Reformatting the UserControl start tag for readability.
DataGrid control configured toappear in row 1 of the main Grid
Figure 32.17 | Configuring the DataGrid.
Selecting submitButton from theClass NameComboBox
Figure 32.18 | Selecting submitButton from the Class NameComboBox.
Selecting Clickevent from theMethod NameComboBox
Figure 32.19 | Selecting the Click event in the Method NameComboBox.
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.
Figure 32.21 | Importing the System.Net namespace.
Creating a WebClient object to invoke the web service
Figure 32.22 | Creating a WebClient object.
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.
Importing namespace System.Xml.Linq
Figure 32.24 | Importing the System.Xml.Linq namespace.
Selecting the System.Xml.Linqassembly to add to your project
Figure 32.25 | Adding a reference to the System.Xml.Linq assembly.
Importing the XML namespace used in the XML data
Figure 32.26 | Importing the XML namespace for the weather-forecast information.
Parsing the XML responseStringto prepare it for use with LINQ to XML
Figure 32.27 | Adding the DisplayWeatherForecast method.
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.
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.
DataGrid showing the data from a collection of WeatherData objects
Figure 32.30 | Displaying the weather forecast in a DataGrid.
Replacing the DataGridwith a ListBox
Figure 32.31|Replacing the DataGrid with a ListBox.
ListBox rendering itsitems as Strings
Figure 32.32|Showing the String representation of WeatherDataobjects in the ListBox.
Creating a custom ListBoxItemTemplate that displays the weather image and date for each WeatherData object
Figure 32.33|Changing the ListBox’s ItemTemplate.
ListBox items rendered with a custom ItemTemplate
Figure 32.34|Displaying an image and the day of the week foreach day in the weather forecast.
Creating a custom ListBoxItemsPanel that arranges the ListBox items horizontally in a StackPanel
Figure 32.35| Changing the ListBox’s ItemsPanel.
ListBox items rendered horizontally with a custom ItemsPanel
Figure 32.36| Displaying the ListBox items horizontally.
Silverlight User Controltemplate
Figure 32.37| Adding a new UserControl to a Silverlight application.
Figure 32.38| Adding controls to a new UserControl.
Hides the custom control when the user clicks the CloseButton
Figure 32.39|Click event handler for the CloseButton.
XML namespace that enables youto use the new WeatherDetailsView in the GUI
Figure 32.40| Adding a custom control’s namespace to the application’s Page.xaml file.
WeatherDetailsView is initially hidden and will span both rows of the main Grid when it is displayed
Figure 32.41| Adding a WeatherDetailsView custom control to the GUI.
Specifies that the currently selected ListBox item will supply the data for the WeatherDetailsView
Shows the WeatherDetailsView
Figure 32.42|forecastListBox’s SelectionChanged event handler.
Clears the ListBox when the user changes the text in the TextBox
Figure 32.43|TextChanged event handler for the inputTextBox.
WeatherDetailsView displayedafter the user selected a specificday from the ListBox
Figure 32.44|Displaying the WeatherDetailsView for a specific day.
(1 of 4 )
XML namespace for custom WeatherDetailsView control
Defining rows in the main Grid
(2 of 4 )
Defining rows in the nested Grid
Defining a Bordercontaining a TextBlock
(3 of 4 )
Defining a TextBoxfor user input
Defining a Button to invoke the web service
Defining a ListBox with a custom look-and-feel to display the weather forecast
(4 of 4 )
Defining a WeatherDetailsView to display the complete details view for a selected day
(1 of 6 )
Importing namespaces for class WebClient and for LINQ to XML
Importing the XML namespace used in the XML returned by the web service
Creating a WebClient toinvoke the web service
(2 of 6 )
Defining the URL for invoking the web service
Invoking the web service asynchronously via the WebClient object
(3 of 6 )
Indicates that this event handler responds to the WebClient’s DownloadStringCompleted event
Uses class XDocument to parse the results of the web service for processing with LINQ to XML
(4 of 6 )
Uses LINQ to XML and XML property syntax to select all of the non-empty WeatherData elements from the XML and convert them to WeatherData objects
(5 of 6 )
Specifying that the ListBox should be populated from the collection of WeatherData objects
Specifying that the WeatherDetailsView should obtain its data from the selected item in the ListBox
Showing the WeatherDetailsView
(6 of 6 )
Clearing the ListBox when the user begins typing a new zip code
(1 of 2 )
Creating a Rectangle to hide the other controls on the GUI when a WeatherDetailsView is displayed
Using data binding to display WeatherData properties in the WeatherDetailsView
(2 of 2 )
Hiding the WeatherDetailsView when its CloseButton is pressed