70、微软Silverlight、XML、LINQ to XML与Web服务入门：天气查看器应用开发

微软Silverlight、XML、LINQ to XML与Web服务入门：天气查看器应用开发

1. Web服务与LINQ to XML基础

Web服务是存储在一台计算机上的软件组件，可通过网络上的标准协议进行方法调用访问。调用Web服务的方法以获取数据称为使用Web服务。它在企业对企业（B2B）交易中具有重要意义，企业可以通过标准化、广泛可用的Web服务进行交易，而不是依赖专有应用程序。Web服务通常具有平台和语言独立性，企业可以通过Web服务进行协作，而无需担心硬件、软件和通信技术的兼容性。

1.1 REST风格的Web服务

可以直接从Web浏览器调用的Web服务使用一种称为表述性状态转移（REST）的技术。在基于REST的Web服务中，每个操作由唯一的URL标识。例如，调用天气预测Web服务的URL为：

www.webservicex.net/WeatherForecast.asmx/GetWeatherByZipCode?ZipCode=01754

其中， GetWeatherByZipCode 是在 WeatherForcast Web服务上调用的方法名， ?ZipCode=01754 指定了Web服务执行任务所需的邮政编码参数。

1.2 LINQ to XML

LINQ to XML 是LINQ的一部分，它使你能够快速有效地处理XML数据。Visual Basic 2008引入了新的XML轴属性语法，可直接在代码中访问XML数据。

2. 构建天气查看器应用

2.1 添加DataGrid到GUI并创建按钮点击事件处理程序

2.1.1 替换TextBlock为DataGrid

移除主网格底部行的 TextBlock （第40 - 41行），将光标置于第39行，然后双击工具箱中的 DataGrid 控件插入该控件。

2.1.2 配置DataGrid

编辑 DataGrid 控件，设置其 x:Name 属性为 forecastList ，将其放置在主网格的第二行，设置 AutoGenerateColumns 属性为 True ，并设置边距为10像素。

2.1.3 添加获取天气按钮的点击事件处理程序

右键单击 Page.xaml 并选择“查看代码”，在代码视图窗口顶部的两个组合框中，从“类名”组合框中选择 submitButton ，从“方法名”组合框中选择 Click ，插入按钮的点击事件处理程序。

2.1.4 插入获取天气按钮的事件处理代码

当用户按下获取天气按钮时，应用程序应获取邮政编码并使用它调用Web服务。插入以下代码：

' 从输入文本框获取邮政编码
Dim zipCode As String = inputTextBox.Text
' 设置应用程序光标为等待光标
Me.Cursor = Cursors.WaitCursor
' 格式化访问Web服务的URL
Dim forecastURL As String = String.Format("http://www.webservicex.net/WeatherForecast.asmx/GetWeatherByZipCode?ZipCode={0}", zipCode)
' 异步调用Web服务
Dim weatherService As New WebClient()
weatherService.DownloadStringAsync(New Uri(forecastURL))

2.2 创建WebClient对象并使用它调用Web服务

2.2.1 导入命名空间并定义WebClient对象

导入 System.Net 命名空间，并在 Page 类中定义一个 WebClient 对象作为实例变量。

Imports System.Net
Private WithEvents weatherService As New WebClient()

2.2.2 插入 DownloadStringCompleted 事件的事件处理程序

在代码视图中，从“类名”组合框中选择 weatherService ，从“方法名”组合框中选择 DownloadStringCompleted ，插入事件处理程序。

Private Sub weatherService_DownloadStringCompleted(sender As Object, e As DownloadStringCompletedEventArgs) Handles weatherService.DownloadStringCompleted
    If e.Error Is Nothing AndAlso e.Result.Contains("Day") Then
        DisplayWeatherForecast(e.Result)
    End If
    Me.Cursor = Cursors.Arrow
End Sub

2.3 使用LINQ to XML将XML数据转换为对象集合

2.3.1 添加 WeatherData 类到项目

右键单击项目并选择“添加” > “现有项”，导航到 C:\Examples\Tutorial32\ 并双击 WeatherData.vb 将文件添加到项目。

2.3.2 导入命名空间

导入 System.Xml.Linq 命名空间，并添加对该命名空间程序集的引用。

Imports System.Xml.Linq

2.3.3 导入XML命名空间

导入Web服务返回的XML数据中使用的命名空间。

Imports <xmlns="http://www.webservicex.net">

2.3.4 添加 DisplayWeatherForecast 方法

Private Sub DisplayWeatherForecast(xmlData As String)
    Dim weatherXML As XDocument = XDocument.Parse(xmlData)
    Dim weatherInformation = From weather In weatherXML...<WeatherData>
                             Where weather.HasElements
                             Select New WeatherData With {
                                 .DayOfWeek = weather.<Day>.Value,
                                 .WeatherImage = weather.<WeatherImage>.Value,
                                 .MaxTemperatureF = Convert.ToInt32(weather.<MaxTemperatureF>.Value),
                                 .MinTemperatureF = Convert.ToInt32(weather.<MinTemperatureF>.Value),
                                 .MaxTemperatureC = Convert.ToInt32(weather.<MaxTemperatureC>.Value),
                                 .MinTemperatureC = Convert.ToInt32(weather.<MinTemperatureC>.Value)
                             }
    forecastList.ItemsSource = weatherInformation
End Sub

2.4 运行和测试应用程序

运行应用程序，输入邮政编码并按下获取天气按钮，应用程序将调用Web服务并显示天气信息。

以下是操作步骤的流程图：

graph TD;
    A[开始] --> B[添加DataGrid到GUI并创建按钮点击事件处理程序];
    B --> C[创建WebClient对象并使用它调用Web服务];
    C --> D[使用LINQ to XML将XML数据转换为对象集合];
    D --> E[运行和测试应用程序];
    E --> F[结束];

操作步骤总结如下表：
| 步骤 | 操作 |
| ---- | ---- |
| 1 | 添加DataGrid到GUI并创建按钮点击事件处理程序 |
| 2 | 创建WebClient对象并使用它调用Web服务 |
| 3 | 使用LINQ to XML将XML数据转换为对象集合 |
| 4 | 运行和测试应用程序 |

3. 自定义数据展示

3.1 用ListBox替换DataGrid

为了展示Web服务返回的包含天气预测图像链接的数据，我们将之前使用的DataGrid替换为ListBox。ListBox可以显示垂直的项目列表，如果项目过多还会提供垂直滚动条。

3.1.1 替换操作

将 Page.xaml 文件中的DataGrid相关代码（第41 - 42行）替换为ListBox代码，并且保持ListBox的名称与DataGrid相同（ forecastList ），这样代码背后的文件就无需修改。同时，移除第2行中为DataGrid控件添加的 xmlns:my 声明。

3.1.2 运行应用程序查看效果

• 选择“调试” > “开始调试”运行应用程序。
• 输入邮政编码并按下获取天气按钮调用Web服务。由于ListBox默认使用 ItemTemplate 显示项目的字符串表示，而 WeatherData 类未定义 ToString 方法，所以ListBox会显示对象的默认 ToString 表示（类名）。
• 点击浏览器窗口的关闭框关闭应用程序。

3.2 更改ListBox的ItemTemplate

为了自定义ListBox中项目的显示方式，我们需要更改其 ItemTemplate 。

3.2.1 插入自定义模板代码

在 Page.xaml 的ListBox元素中插入以下代码：

<ListBox x:Name="forecastList">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Image Source="{Binding WeatherImage}" Margin="5" Width="55" Height="55" />
                <TextBlock Text="{Binding DayOfWeek}" TextAlignment="Center" FontSize="12" Margin="5" TextWrapping="Wrap" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

上述代码中， ListBox.ItemTemplate 元素替换了ListBox的默认 ItemTemplate ，使其可以自定义外观。 DataTemplate 元素用于将数据源（如集合）中的数据绑定到ListBox的项目上。 StackPanel 包含一个 Image 控件和一个 TextBlock 控件， Image 控件的 Source 属性使用 Binding 标记扩展从 WeatherData 对象的 WeatherImage 属性获取图像位置， TextBlock 控件的 Text 属性同样使用 Binding 标记扩展获取 DayOfWeek 属性的值。

3.2.2 再次运行和关闭应用程序

• 选择“调试” > “开始调试”运行应用程序。
• 输入邮政编码并按下获取天气按钮调用Web服务。此时ListBox中的每个元素将显示天气图像和星期几。
• 点击浏览器窗口的关闭框关闭应用程序。

3.3 自定义ListBox布局的操作步骤总结

步骤	操作
1	用ListBox替换DataGrid
2	运行应用程序查看默认显示效果
3	关闭应用程序
4	更改ListBox的 ItemTemplate
5	再次运行应用程序查看自定义显示效果
6	关闭应用程序

3.4 自定义ListBox布局的流程图

graph TD;
    A[开始] --> B[用ListBox替换DataGrid];
    B --> C[运行应用程序查看默认效果];
    C --> D[关闭应用程序];
    D --> E[更改ListBox的ItemTemplate];
    E --> F[再次运行应用程序查看自定义效果];
    F --> G[关闭应用程序];
    G --> H[结束];

通过以上步骤，我们成功开发了一个天气查看器应用程序，从调用Web服务获取天气数据，到使用LINQ to XML处理数据，再到自定义数据展示，整个过程展示了如何利用微软Silverlight、XML、LINQ to XML和Web服务相关技术进行应用开发。