The last recipe of this topic covers the Flickr service. This website is one of the most popular services for uploading and sharing photos online. We’ll build an application for loading the last 20 photos published by a user. Later, the photos will be displayed using a grid widget.
Getting ready
Also with the previous recipes in this topic, we’re going to use the XUI and UIUiKit frameworks. Make sure both of them are installed and ready to use on your machine.
How to do it…
1. After creating your new flickr. html file with the standard XHTML headers and the required lines for loading both our frameworks, we’ll be ready to add the code for this recipe.
2. First we’ll set CSS styles for a consistent background color for our application:
3. Then we’ll add JavaScript code so we can connect to the Flickr API and get our photos:
4. Finally, we’re going to add the html elements for building our user interface with the grid widget:
5. The final result is shown in the next screenshot:
How it works…
The Flickr API provides a method for retrieving the latest tweets for a specific user. We only need to call to make a JSON request. Our application is using the on_load handler for retrieving the pictures directly after the application loads.
Using XUI, we’re adding a new <li> element to our main <ul> tag to represent our grid widget. The response sent by Flickr is a JSON object containing different information about our photos. This object is an array where each element offers us information about each photo.
Additionally, our buildPhotoURL () JavaScript function is used for building an absolute URL to each one of the photos. Thanks to this technique, when the user clicks on one picture, Safari Mobile will load the original photo from Flickr.
See also
► Installing the UiUIKit framework recipe in topic 1, Frameworks Make Life Easier
► Installing the XUI framework recipe in topic 1, Frameworks Make Life Easier
► Creating a grid with images recipe in topic 4, A Picture Speaks a Thousand Words
