You are not logged in! Log in or Register

Flickr search

Example

Introduction

The goal of this tutorial is to familiarize developers with making a widget the glowe way. The only requirement to complete this tutorial is an installed copy of the widget editor. To get a complete overview of all possibilities (with plenty of examples) we strongly recommend reading the language specification.

What is a widget

A widget is a small application that can run on many devices including mobile.

Flickr Slideshow

As an example, we're going to make a slideshow of Flickr search results. The idea is the following: a user gives one or multiple tags and the widget will retrieve the pictures that have these tags and display them in a slideshow.

The basics

Lets start with the basics of a widget. A Glowe Widget implements two viewing modes: 'widget mode' and 'fullscreen mode'. In 'widget mode' the widget receives only a small portion of the screen. The idea behind this is that in widget mode multiple widgets can be displayed at once. The user can then select which widget to activate to the full sceen. To identify our widget, we will display the logo of Flickr in widget mode. To do this, start the Widget Editor and select the 'widgetmode' tab and add a VisualPage element by clicking on it in the toolbox. A VisualPage is the basic element needed to display something on the screen. A VisualPage has at least one of the three following elements (see the documentation for more information):

  • VisualHeader
  • VisualContent
  • VisualFooter

Add a VisualContent element between the VisualPage tags so that is looks something like this: 

<VisualPage>
	<VisualContent>
	</VisualContent>
</VisualPage>

Inside this VisualContent element we will place the logo. So lets do just that. Add a VisualImage element. We could set the 'Url' attribute to the url of the actual logo on the Flickr site. But this would result in a precious download of the same image everytime the widget is loaded. So we'll insert the actual image inside the widget. Glowe widgets support inserting images inside the actual xml file using the base64 representation of the file. You can insert an image in a widget using the 'insert binary' button in the toolbar of the Widget Editor. Insert an image of your choice or put the following base64 string as the value of the attribute 'ImageBuffer' of the VisualImage: 

R0lGODlhYgAaAPcAAABj3ANl3AZn3Qxq3g9s3hJu3hVw3xhy3xt04B514CF34SR54Sd74Sp94jCA4zOC4zaE4zy
I5D+K5UKL5UWN5UiP5kuR5k6T51GV51SW6Fqa6F2c6WCe6WOg6mah6mmj6m+n63Kp7HWr7His7H6w7f8AhP8Vjv
8YkP8bkf8ekv8nl/82nv8/ov9Epf9Ip/9Oqv9Urf9jtP9mtf9vuv9yu/93vf94voGy7oe274q375C78JO98Ja/8
ZnB8Z/E8qLG8qXI86vM867N9LTR9bfT9brV9v+Ixv+Kx/+NyP+WzP+Zzv+l1P+o1f+q1v+73sDY9sbc98ne+Mzg
+M/i+NLj+dXl+djn+tvp+t7r+v/A4f/M5v/V6//b7v/d7//e7+Ht++Tu++fw/Ory/O30/f/t9v/u9v/u9/D2/fP
4/fb5/v/3+//4/Pz9/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5
BAEAAP8ALAAAAABiABoAAAj/ANsIHEiwjZQwBRMqXMiwocOHEB36mDAAgEUAHwSGecCRI4iBVXqIFFklYsEOHTk
iNMnSIZsMF2N+bPMlJgALA3nY5NFSYASbX3oKTYjD5kUcAmvGxClQZ0yePX/GDDq0apsDRiv6SGqTaRunF6G2lH
qRqtWeVmwawCIQDdelA4OkfBBEKFmLZs+yJGJTREKlF73q9Ql0cEsgNnf87Wp44F0AeRsvBCKyg00NI6O8DQxyJ
MmFRUighOAhxBA2hKcOPONZpBiBW5TIVrIE9gwXLGxwEajFiRMzXdoAF5jAqNERmy16BWtR7MAdxY1zSF12oOWY
FwYmKcG9RIo2SLqX/1BRhrcMJ01atFFihLhxm8hpMm66k+AYCe8tznxMdYhNBWNoJ14KTIhXwgpqDNSeEzJ0YUR
7bUSXHwDxAaZcTvUJlAYEEwKAVBv8tTEGVhcJoJmA3ZmAgoEtJChQe00w2EQNAo3ggQePRXCjB0IkdxOGTw00gl
ECUHAjBQBsBWJhMMWkGEHbGWggDC620V57MFhZEHMAOOfjchmOIYBND1hB0BdU8YdYTBkkFKWBL2RBhhZerGESl
17KBxd9Qbbxg1oBLvQYFAXEpMAZbkpJQ1V4LrbnVxluAF9DjzkQkwBTKPQmdyfYOVSjBVn4I59hCVSBTT0y9JhN
FCy0aQkxWOkF6pnzQdqnBTYVQalNj9WVqHhHyJohrY+Cet1Ru8YExZgXFbASlAYmIWyfxHJGanMC6WATAogKCtS
QMVXwa3fSMjrsQKKC2ecXAdgEQUkEdcsfGoVSK9Cr5X567pdAlirQB0YFkAEJPXggAVMhcjnAFdCKl69Qs6Jb66
xjLNDhBNTh1QYbDLiL2r3RTutvtRde2yVBYDQwYQQZQyaQfzbdgCK5ImMb6sT7pjECAe890LJZ+F0qBcgOW/XEj
jc+kdAYSHvwZBtHI610QmgAgVJHGOSQaRs5NB1oG1Q07YEOAmUhw9lnZ9FTQAA7

Ok, I agree.. it looks pretty nasty! But hey, at least our widget mode is almost done. We still need to set a complete white background to finish it up. Add a Style element and name it 'bgStyle'. Set the value of the property 'PageBackgroundFillMode' to 'Solid' and the value of the property 'PageBackgroundSolid' to '#FFFFFF'. Now give the VisualPage a property named 'Style' and fill in the name of the style element we just created ('bgStyle').

Oh woops, we forgot just one thing. Set the VisualImage property 'BoxSize' to '80,80' and the property 'SizeMode' to 'SizeToBox'. This will size the image to fit in the widget mode container.
If all went well, you should have something like this (replace the base64 comment with the base64 string we defined above): 

<Style Name="bgStyle" PageBackgroundFillMode="Solid" 
	PageBackgroundSolid="#ffffff" />      

<VisualPage Style="bgStyle">
	<VisualContent>
		<VisualImage ImageBuffer="<!-- base64 -->" 
		BoxSize="80,80" SizeMode="SizeToBox" />
	</VisualContent>
</VisualPage>

The real stuff

Time for the hard part. Lets continue with the fullscreen mode.

Add a VisualPage element. To ensure that the background is completely white, move (cut & paste) the style element from the widget mode to the global mode. It is now accessible in both display modes. So set the property 'Style' of the VisualPage to 'bgStyle'. To retrieve the pictures from Flickr, we need to surf to an URL (http://api.flickr.com/services/feeds/photos_public.gne?tags=) and fill in the tags we are interested in. But first things first.

Add a VisualHeader element in the VisualPage. We are going to create a simple header to display the name of the widget. In the VisualHeader element add a VisualText element with the property 'Text' set to 'Flickr - Photo search'. 

<VisualPage Style="bgStyle">
	<VisualHeader>
		<VisualText Text="Flickr - Photo search" />
	</VisualHeader>
<VisualPage>

The header is done. Add a VisualContent element. In this element we will display all scrollable content. The user needs to specify his or her search tag(s). So on top, lets create a textbox. Add a VisualPanel element with the property 'Orientation' set to 'Horizontal'. This will be the container for a label and a textbox. The orientation will render the elements horizontal. Add a VisualText element with the property 'Text' set to 'Tag(s):' and a VisualTextBox element with the property 'Text' set to 'enter tags'. To be able to address this textbox give it a name, for example 'tb_tags'. We are trying to do things right, so give the textbox a nice style. I've just set the color of the text to a more grayish color and in italic. 

<Style Name="tagsStyle" TextStyle="Italic" 
	TextColor="#666666" />
<!-- hidden stuff -->
<VisualContent>
	<VisualPanel Orientation="Horizontal">
		<VisualText Text="Tag(s):" />
		<VisualTextBox Name="tb_tags" 
			Style="tagsStyle" Text="citylive" />
	</VisualPanel>
</VisualContent>

Now we just need to retrieve the Flickr pictures and display them. First, we are going to create the URL. Add a StringConcatenator element somewhere in your file and name it 'url'. Set the property 'String1' to the url of the flickr search (http://api.flickr.com/services/feeds/photos_public.gne?tags=) and the property 'StringInput2' to the textbox (which we named 'tb_tags'). To retrieve the pictures, add a TextReader element and name it 'flickrFeed' and set the property 'Input' to the stringConcatenator we just created. Now we have all the data we need, but we just need the pictures. So add a RegularExpression element and name it 'flickrfiltered'. Set the property 'Input' to the TextReader. To filter the pictures just fill in the following as the value of the 'RegEx property': 

https?://[\-\w.]+(:\d+)?(/([\w/_.]+)?)?_m\.jpg

Don't worry, the die hard regular expression fans understand it.

For the sake of completeness, here the code from the last few paragraphs: 

<StringConcatenator Name="url" 
	String1="http://api.flickr.com/services/feeds/photos_public.gne?tags=" 
	StringInput2="tb_tags" />
<TextReader Name="flickrFeed" Input="url" />
<RegularExpression Name="flickrfiltered" Input="flickrFeed" 
	RegEx="https?://[\-\w.]+(:\d+)?(/([\w/_.]+)?)?_m\.jpg" />

A slideshow needs to display a picture every x seconds. Add a TimerTrigger element and name it 'slidetimer'. Set the property 'Interval' to '5' and the property 'Enabled' to 'true'. Every 5 seconds this element will sent a trigger another picture. 

<TimerTrigger Name="slidetimer" Interval="5" Enabled="true" />

Ok, back to our VisualContent element. Add a VisualDataTemplate element. This element will display the pictures. Set the property 'Input' to the RegularExpression element (we named it 'flickrfiltered'). To recieve the tick from the TimerTrigger, set the property 'NextTrigger' to 'slidetimer'. Last but not least, we want to display only one picture at a time, so set the property 'ViewMode' to 'Details'.

Finally, we need to create a container for the picture. Inside the VisualDataTemplate element, add a VisualDataImage element. Set the property 'Filter' to '.result.$0' and the property 'FromCache' to '1000000'. Just ignore the last one, it just tells the widget to wait displaying a cached picture. The VisualDataTemplate will loop through all pictures and the VisualDataImage will display every picture. 

<VisualContent>
	<VisualDataTemplate Input="flickrfiltered" 
		ViewMode="Details" NextTrigger="slidetimer">
		<VisualDataImage Filter=".result.$0"
			 FromCache="1000000"/>
	</VisualDataTemplate>
</VisualContent>

Done and... done. If you want, you can play around with some styles like I did.

Download

If you want you can download the source here.