×
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 在 15 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 15 July 2013, at 22:28.
111 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×