Listing Flickr images in a grid using Qt and WP7
This article demonstrates how to layout images from Flickr in a grid in Qt and Windows Phone 7.5.
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
Introduction
This article shows how to list images in a Grid in both Qt and Windows Phone 7. We will obtain the images from Flickr and demonstrates how to parse XML data and bind it for display in the UI.
For Qt we will use GridView element. For Windows Phone we will use WrapPanel from WP7 Toolkit. WrapPanel enables users to position child elements sequentially from left to right or top to bottom. When elements extend beyond the panel edge, they are positioned in the next row or column.
Image Listing in Qt
Image Listing in WP7
Implementation
First create an empty project for both Qt and WP7.
Qt Project (main.qml)
Let’s create a text box to enter the search option
TextField {
id:textField
width: 260
x:20
y:70
text: ""
placeholderText: "Enter your search"
}
Add a button, so that when user clicks on the button it takes the search string from the text box and display images from Flickr.
Button {
id: button
y:70
x:parent.width -65
text: "Go"
onClicked: {
feedModel.search = textField.text;
feedModel.refresh();
}
}
The JavaScript refresh() function reload the content.
Qt Project (RssModel.qml)
We use XmlListModel to store the parsed data.
XmlListModel {
id: feedModel
property string search : ""
source : "http://api.flickr.com/services/feeds/photos_public.gne?tag="+search+"&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()" }
function refresh()
{
reload();
}
}
Qt Project (GridDelegate.qml)
To display the content we create a rectangle and an image and text inside it. Each text is the name of the corresponding image.
Rectangle {
id: whiteRect; width: 79; height: 79 ; color: "#dddddd"; smooth: true
Image {
id: thumb
source: imagePath
x: 2; y: 2; smooth: true
}
Text {
id: imgTitle
height: 20
y:80
width: 89
text: trimString(title)
font.bold: true;
font.pixelSize: 15;
color: "White";
style: Text.Raised;
styleColor: "Black"
}
}
The JavaScript trimString() function trim the name of the image if its exit 11 characters.
function trimString(string) {
var limit = 11;
if(string.length > limit) {
string = string.substr(0, (limit - 3)) + "...";
}
return string;
}
This set of code will display the images in Grid View but can only be scrolled vertically.
Windows Phone 7 (MainPage.xaml)
- Add the reference
Microsoft.Phone.Controls.Toolkit to the project.
- Add namespace in XAML:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
- Create a button and a text box to enter the Flickr search string
-
<Button Content="Search" Height="72" HorizontalAlignment="Left" Margin="266,14,0,0" Name="SearchButton" VerticalAlignment="Top" Width="160" Click="FlickrSearch_Click" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,11,0,0" Name="SearchBox" Text="" VerticalAlignment="Top" Width="253" />
-
Now we will add a ListBox to display the content. To display the images in grid view we use the WrapPanel as a content presenter instead of the default panel. This will help us to bring the images in the next line when it exits the panel edge. Thus we see a listing of images, and can scroll the images in vertical manner.
<ListBox Height="563" HorizontalAlignment="Left" Margin="-4,88,0,0" Name="listBox1" VerticalAlignment="Top" Width="460">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemHeight="150" ItemWidth="150"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImageSource}" Height="120" Width="120" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="{Binding UserName}" Style="{StaticResource PhoneTextSubtleStyle}"
Width="100" TextAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
We use data binding between ListBox and parsed data. First we parse the Flickr data using XElement class and then bind it to the ListBox.
XElement XmlTweet = XElement.Parse(e.Result);
XNamespace ns = "http://search.yahoo.com/mrss/"; // flilckr
listBox1.ItemsSource = from tweet in XmlTweet.Descendants("item")
select new FlickrData
{
ImageSource = tweet.Element(ns + "thumbnail").Attribute("url").Value,
Message = tweet.Element("description").Value,
UserName = tweet.Element("title").Value,
PubDate = DateTime.Parse(tweet.Element("pubDate").Value)
};
This code will display the Flickr images as that of the Qt project.
Summary
The Windows Phone 7 WrapPanel from the Silverlight Toolkit is a new control which can be found here:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll
The ItemHeight and ItemWidth are the key property of WrapPanel which sets the height and width of the layout area for each item that contains in WrapPanel.
And in Qt we use cellWidth and cellHeight to define the area of the panel.
Source Code
- The full source code of Qt example is available here: File:GridViewImageQt.zip
- The full source code of WP7 example is available here: File:GridViewImageWP7.zip
Hamishwillee - Where is the QML Grid?
You define the QML Grid delegate, but not the grid itself.
I'm still not completely sure how the data binding works.
Otherwise pretty good.hamishwillee 09:43, 27 April 2012 (EEST)