In the first part of this tutorial series we looked at creating a simple search interface for Flickr in Altio. But we didn’t get to the important part, displaying the image results using the Image control.

If you’ve done the first part of tutorial then you can carry on from where you left off.  If you haven’t and you want to skip the first part you can carry on by installing this aar file on your Altio server.

Because the images from Flickr are not stored locally on the Altio server we need to write a simple HTTP service function to load images from Flickr.  To do this open up the Application Manager for our Flickr app and create a new service function by clicking on the “HTTP” service function button in the main menu bar.
Set the “Service name” to “IMAGE_FROM_URL” and the “URL” field in the Request tab to “${client.IMG}”.  This is the name of the parameter that the Image  control will pass to the service function when it tries to load an image. 

Now click on the Response tab and select “IMG” from the “Document Type” select control.  This tells Altio the service function will return image data.  To test the service function click on the Test tab and enter “http://www.altio.com/images/logo.gif” as a test value for client.IMG.  When you click on the test button now you should see a whole load of data in the Body field of the test window.  We now have a service function that can load an image from any given URL.  Hit the save button and close the Application Manager and go back to the designer for the “flickrSearch” view file.

Select the image control in the Layout Panel and give it the following properties:

With the Data source property we’re telling the Image control to use the panel’s data element (“photo”) just like we did with the label in the first tutorial.  The Data field, when using the service function we just wrote, should resolve to a url.  We’re just putting a test value in for now.  The Image effect is just centering the image in the middle of the control and the Image server command is set to the service function we just created.  We set the Border Width to 0 to get rid of the border around the image control.
Run the app and type in a search term.  You should get a bunch of Altio logos instead of photos from Flickr.  Lets fix that next.

Set the data field property on the image to the following

Here we are constructing the url to a small version of each Flickr image.  We do this by joining the various attributes in our data together to create a sensible Flickr photo url.  You can find out more about how to do this here.

Now when you run the application and search you should get a set of thumbnails for the search term you typed.

One last thing to do is to allow the users to navigate to the corresponding image on Flickr.  Let’s set the cursor of the image control to “HAND” so that the user knows they can click the image:

Now click on the Events tab in the Properties window and select the “Click” item from the list of triggers.  Find the “Show URL” item in the Add Action list below and double click it to add a new action under the Click trigger.  This action will be called whenever the user clicks an image.

Select the Parameters tab next to the Add Action tab and enter the following values.

This action constructs a URL to the clicked photo’s Flickr page and opens that page in a new tab.

Save and run the app again and try searching and then clicking on some of the photos.  For some browsers the photo may open in a new tab in a different browser window.  This won’t occur when the app is deployed to a regular web page though.  You also need to make sure that pop ups aren’t being blocked.
Here is the final application:

If you have any trouble completing the tutorial you can leave a comment here, get help on the forums or you can find us on Twitter.