×
Namespaces

Variants
Actions

在Qt 和WP7上使用模型-视图-控制器

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

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


这篇文章展示了如何在Qt and WP7上创建模型-视图-控制器设计模式。

Contents

简介

Model-View-Controller在开发中是众所周知的设计模式。但是,你肯定会感到吃惊的当你看到我们如何在Qt 和 WP7上完成MVC,那是因为它们有自己的设计模式。是的,在Qt中我们使用Model-View-Delegate,在WP7中我们使用Model-View-ViewModel模式。所以问题是我们如何在这两个平台上使用MVC模式以及我们为什么要这么做?这篇文章可以帮助那些想要在WP7上创建与Qt项目文件结构相似的项目的初学者,帮助他们对Qt和WP7上的项目文件结构进行比较,让他们了解如何访问项目里的数据。所以我们决定在这两个平台上创建相同的项目并在MVC模型的帮助下对两平台上文件结构的不同进行展示。

General Representation of MVC design pattern
Qt Windows Phone
Flickr in Qt
Flickr in WP7
Example of Qt Example of WP

基本理念

首先我们将在这两个平台上分别创建一个空项目。为了简洁明了,我们将采取现实生活中的例子,所以经过思考,我们在两个平台上都创建了一个Flickr应用程序。在创建应用程序的同时,我们将遵循MVC模式的规则并对它们处理数据的相同点和不同点进行比较。

  • 在我们的例子中,我们定义了如下所示的MVC:
    • 模型:存储数据
    • 视图:显示数据
    • 控制器:将模型和视图连接并处理数据


实现

让我们在Qt 和WP7上分别创建一个空的项目。在这个例子中我们首先在Qt项目里添加代码,然后在WP7项目中添加相似的代码。

模型

模型是类的集合,它可以存储数据也可以将数据分开。偶尔的它也可以与用户界面进行交流。在这里我们将会获取Flickr数据并将它存储起来以便进一步利用。我们要在每个Flickr item中存储四个信息:Title,Image URL, AuthorDate

Qt Project (Model.qml)

让我们在Qt项目中添加一个QML文件,右击 project explorer-> Add New-> QML(左侧面板)-> QML File(右侧面板),将文件命名为Model.qml并添加下面的代码。这是我们在Qt项目中的Model类。这个类将存储每个model item属性。

XmlListModel {
id: feedModel
source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2" // flickr
query: "/rss/channel/item" // flickr
namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
// Flickr
XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
XmlRole { name: "photoAuthor"; query: "author/string()" }
XmlRole { name: "photoDate"; query: "pubDate/string()" }
}

WP7 Project (Model.cs)

让我们在WP7项目中添加一个CS文件,右击project explorer-> Add-> New Item->选择Class(从中间面板),将文件命名为 Model.cs并添加如下代码。这是我们在WP7项目中的Model类。这个类将存储解析数据。

public class Model
{
 
public string UserName { get; set; }
public string ImageSource { get; set; }
public DateTime PubDate { get; set; }
public string Author { get; set; }
 
}

视图

视图是我们屏幕的展示,它用来显示数据。在我们的例子中我们将会在list view中显示Flickr的thumbnail, title, author 和 date。

Qt Project (View.qml)

让我们在Qt项目中添加一个QML文件,右击project explorer->Add New-> QML(从左侧面版)-> QML File(从右侧面板),将文件命名为View.qml并添加如下代码。这是我们在Qt项目中的View类。这个类将Flickr中的数据显示在屏幕上。

Component {
Item {
id: wrapper; width: wrapper.ListView.view.width; height: 86
Item {
id: moveMe
Rectangle { color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: wrapper.width; y: 1 }
Rectangle {
x: 6; y: 4; width: 49; height:49; color: "white"; smooth: true
Image { source: imagePath; x: 0; y: 0
height:49
width:49 }
}
Column {
x: 100; width: wrapper.ListView.view.width - 95; y: 15; spacing: 2
Text { text: title; color: "white"; width: parent.width; font.pixelSize: 14; font.bold: true; elide: Text.ElideRight; style: Text.Raised; styleColor: "black" }
Text { text: photoDate; width: parent.width; font.pixelSize: 14; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
Text { text: photoAuthor; width: parent.width; font.pixelSize: 14; elide: Text.ElideRight; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
}
}
}
}

WP7 Project (MainPage.xaml)

在WP7项目中的XAML文件表示了应用程序的视图。所以在这个例子中我将默认的MainPage.xaml文件作为我们的视图。为了将Flick里的数据显示在屏幕上,让我们在 MainPage.xaml文件里的<Grid…>元素添加如下代码。

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        
<ListBox Height="650" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="456" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" >
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" />
<TextBlock Text="{Binding Author}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding PubDate}" TextWrapping="Wrap" FontSize="24" />
 
 
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
 
</Grid>

控制器

控制器联通了模型前端并将数据发送到视图来加载。

Qt Project (Controller.qml)

通常情况下,在Qt项目中Controller.qml就是main.qml。我刚刚改名了文件并在里面添加了代码。在Qt项目中,首先我们必须创建一个特定高度和宽度的矩形,然后我们将ModelListView添加到里面。这个类首先将数据加载到模型然后在List View里显示它们。这个类决定了哪个模型来加载数据,怎样显示数据。

Rectangle {
id: mainwindow
width: 360//parent.width
height:640// parent.height
color: "green"
Text {
id: idText
text: qsTr("Flickr")
color: "black"
font.pixelSize: 31
font.bold: true;
style: Text.Normal;
styleColor: "white"
x:140
}
Model {id: feedModel}
ListView {
id: list
anchors.left : parent.left
anchors.right: parent.right
anchors.top : idText.bottom
width: mainwindow.width ; height: mainwindow.height
model: feedModel
delegate: View {}
}
}

WP7 Project (MainPage.xaml.cs)

WP7的MainPage.xaml.cs是控制器类。它可以将数据加载到模型类中并将它们显示在List View里。

//构造函数
public MainPage()
{
InitializeComponent();
 
WebClient webclient = new WebClient();
webclient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webclient_DownloadStringCompleted);
webclient.DownloadStringAsync(new Uri("http://api.flickr.com/services/feeds/photos_public.gne?format=rss2"));
//检索Flickr
 
}
void webclient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null)
{
MessageBox.Show("error");
 
}
 
 
 
 
 
//分析 Flickr
 
XElement Xml = XElement.Parse(e.Result);
 
XNamespace ns = "http://search.yahoo.com/mrss/"; // flilckr
 
 
listBox1.ItemsSource = from flickr in Xml.Descendants("item")
select new Model
{
 
ImageSource = flickr.Element(ns + "thumbnail").Attribute("url").Value,
UserName = flickr.Element("title").Value,
Author = flickr.Element("author").Value,
PubDate = DateTime.Parse(flickr.Element("pubDate").Value)
 
};
 
 
 
 
}

Note.pngNote: 在这篇文章中我们也会看到在这两个平台上怎样解析XML文件。

源代码

	在Qt上完整的源代码在如下网址可以获得:File:MVCQt.zip   
	在WP7上完整的源代码在如下网址可以获得:File:MVCWP7.zip
This page was last modified on 16 July 2013, at 01:32.
60 page views in the last 30 days.
×