×
Namespaces

Variants
Actions

在Qt和WP7上使用Google Weather

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
WS_YiLunLuo
最后由 hamishwillee 在 16 Jul 2013 编辑


这篇文章演示了如何在Qt和WP7平台上创建Google Weather 程序并且说明了如何在WP7上显示GIF图片。 简介 使用Google Weather API编写Weather程序是非常简单的。在Qt平台上创建工程很直观,但是在WP7平台上,因为WP7平台不支持GIF格式,所以创建Google Weather API有点麻烦。接下来我们看看如何在WP7上转换和显示GIF格式。

Qt Windows Phone
Google Weather Application for Qt
Google Weather Application for WP7
Example of Qt Example of WP

Contents

基本思路

我们用Google Weather API显示一个城市的天气预报。用户输入一个城市名,然后获得以XML格式显示的当前天气预报和未来三天的天气展望。我们解析XML格式文件然后显示它里面的内容,然后在WP7平台上我们用 ImageTools来显示GIF图片。

实现

首先建立一个空的Qt和WP7项目。先在Qt上编写程序,然后移植到WP7平台上。

Qt项目(main.qml)

创建一个TextFieldButton来接受用户输入。

// text box
TextField {
id:textField
width: 260
x:20
y:100
text: "Enter City"
}
Button {
id: button
y:100
x:parent.width -65
text: "Go"
onClicked: {
feedModel.city = textField.text;
weatherInfo.text = textField.text + " weather forecast";
}
}

当用户在TextField中输入了一个有效的城市名并按下Button时,我们获得了TextField中的参数并把它传送到Google Weather API。

http://www.google.com/ig/api?weather= <TextField.text>

这将以xml格式返回城市的天气情况。

Qt项目(RssModel.qml)

当我们获得了XML数据以后,需要解析数据后并把数据储存起来以便能进一步运用。我们用XmlListModel去存储数据。这里source是Google Weather API和TextField中输入的城市名。

XmlListModel {
id: feedModel
property string city : ""
property string imageConstPath: "http://www.google.com"
source: "http://www.google.com/ig/api?weather=" +city
query: "/xml_api_reply/weather/forecast_conditions"
XmlRole { name: "day_of_week"; query: "day_of_week/@data/string()" }
XmlRole { name: "low"; query: "low/@data/string()" }
XmlRole { name: "high"; query: "high/@data/string()" }
XmlRole { name: "icon"; query: "icon/@data/string()" }
XmlRole { name: "condition"; query: "condition/@data/string()" }

Qt项目(Delegate.qml)

Delegate.qml定义了数据如何显示。我们使用列表显示内容。

Component {
Item {
id: wrapper; width: wrapper.ListView.view.width; height: 86
Item {
id: moveMe
Rectangle {
x: 5;
y: 5;
width: 40;
height:40;
color: "black";
smooth: true
Image {
source: feedModel.imageConstPath + icon;
x: 0;
y: 0;
height:40
width:40
}
}
Column {
x: 80; width: wrapper.ListView.view.width - 95; y: 0; spacing: 2
Text { text: day_of_week; color: "white"; width: parent.width; font.pixelSize: 14; font.bold: true; elide: Text.ElideRight; style: Text.Raised; styleColor: "black" }
Text { text: "MinF : " + low; width: parent.width; font.pixelSize: 14; elide: Text.ElideLeft; color: "white"; style: Text.Raised; styleColor: "black" }
Text { text: "MaxF : " + high; width: parent.width; font.pixelSize: 14; elide: Text.ElideRight; color: "white"; style: Text.Raised; styleColor: "black" }
Text { text: condition; width: parent.width; font.pixelSize: 14; elide: Text.ElideRight; color: "white"; style: Text.Raised; styleColor: "black" }
}
}
}
}

Qt 项目 (main.qml)

一旦delegate被定义了,就可以调用Model去分析数据并且根据delegate在ListView中显示数据。

//weather list ViewSection
RssModel {id: feedModel}
ListView {
id: list
y:200
x:25
width: parent.width ; height: parent.height
model: feedModel
delegate: Delegate {}
}

现在程序已经能够在Qt平台中运行了。

WP7 项目(MainPage.xaml)

就像在Qt平台上那样,我们添加一个TextBoxButton来接受用户输入。

<TextBox Height="72" HorizontalAlignment="Left" Margin="6,15,0,0" Name="locationTextBox" Text="Enter City" VerticalAlignment="Top" Width="342" />
<Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="354,15,0,0" Name="button1" VerticalAlignment="Top" Width="83" Click="button1_Click" />

和在Qt平台上一样,当用户在TextBox中输入一个有效的城市名并按下Button时,我们从TextBox中接受数据并把参数传送到Google Weather API中。

http://www.google.com/ig/api?weather= <TextBox.Text>

WP7 项目(MainPage.xaml.cs)

返回值是XML数据,我们解析并存储它。

XElement XmlWeather = XElement.Parse(e.Result);
 
foreach (var item in XmlWeather.Descendants("forecast_conditions"))
{
WeatherInfo rssMain = new WeatherInfo();
rssMain.day_of_week = (string)item.Element("day_of_week").Attribute("data").Value;
rssMain.high = (string)item.Element("high").Attribute("data").Value;
rssMain.low = (string)item.Element("low").Attribute("data").Value;
rssMain.condition = (string)item.Element("condition").Attribute("data").Value;
 
listBox1.Items.Add(rssMain);
}

我们用数据绑定的方式将数据显示在ListBox

<ListBox     Height="450" HorizontalAlignment="Left" Margin="12,141,0,0" Name="listBox1" VerticalAlignment="Top" Width="425" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" >
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
 
 
 
 
<TextBlock Text="{Binding Path=day_of_week}" Foreground="Orange" Grid.Column="1" Margin="10,10,10,60"></TextBlock>
<TextBlock Grid.Column="1" Margin="10,40,300,30" Text="MinF: "></TextBlock>
<TextBlock Text="{Binding Path=low}" Grid.Column="1" Margin="70,40,250,30" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" Margin="150,40,160,30" Text="MaxF: "></TextBlock>
<TextBlock Text="{Binding Path=high}" Grid.Column="1" Margin="215,40,90,30" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Path=condition}" Grid.Column="1" Margin="10,75,10,0"></TextBlock>
 
</Grid>
</StackPanel>
</DataTemplate>
 
</ListBox.ItemTemplate>
</ListBox>

到现在为止,如果你运行代码,天气情况将显示出来,但缩略图不会显示。让我们看看怎样将GIF缩略图显示出来并把它加到ListBox。我们用ImageTools project from Codeplex解码GIF图像并显示它。首先下载工程并将ImageTools, ImageToolsControlsImageTools.IO.Gif 这三个引用添加到项目中。 打开MainPage.xaml,添加ImageTools XAML的命名空间引用。

xmlns:imageTools="clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls"

添加资源

<phone:PhoneApplicationPage.Resources>
<imageTools:ImageConverter x:Key="ImageConverter" />
</phone:PhoneApplicationPage.Resources>

ListBox中添加图片。

<imageTools:AnimatedImage Stretch="Fill" x:Name="gifImage"  Grid.Column="0" Height="100" Width="100" Source="{Binding icon}" />

现在添加代码去解析图片

// gif conversion
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
ImageTools.ExtendedImage image = new ImageTools.ExtendedImage();
gifUrl = gifImageConstPath + (string)item.Element("icon").Attribute("data").Value;
image.UriSource = new Uri(gifUrl, UriKind.Absolute);
rssMain.icon = image;

现在运行程序,会显示城市的天气情况和缩略图。

源代码

你可以从这里找到Qt版的完整示例: File:GoogleWeatherQt.zip 你可以从这里找到WP7版的完整示例: File:GoogleWeatherWP7.zip

This page was last modified on 16 July 2013, at 01:28.
59 page views in the last 30 days.