This is a two part tutorial for building a simple Flickr search client in Altio. It demonstrates how to use the new data driven container functionality, specifically the layout panel in the first part and how to load images over HTTP from other servers in the next part. It is best to use Altio 5.2.4 or greater when using this tutorial. Also your server must of course be connected to the Internet so that it can access the Flickr API. Embedded below is an example of the application we’ll be building.  Type in a search term and hit enter and it will fetch a bunch of thumbnails from Flickr.  You can click on each thumbnail to visit the Flickr page for that image.

The following application will get you started, it has a HTTP service function set up to load data from Flickr describing a bunch of photos for a given search term. It also has a view with a search field and a button that calls that service function. It doesn’t display any images or data yet. That is what we’ll be doing in this tutorial.

You can get the application here.

To install an Altio archive file place it in the deploy directory of your Altio installation : <Altio_Install>/WEB-INF/classes/deploy.

For example:

/home/tomm/AltioInstalls/AltioLiveStudio5.2Enterprise/tomcat/webapps/altio52/WEB-INF/classes/deploy

or

C:\Program Files\AltioLiveStudio5.2Enterprise\tomcat\webapps\altio52\WEB-INF\classes\deploy

To begin open the view file named “flickrSearch.xml” in the designer by right clicking it from Studio and selecting “Designer”. Open the window named window “WINDOW” by double clicking it in the tree view. It might come up over your View Explorer window because it’s X Y co-ordinates are set to 0 but you can drag it away and designer will remember where you put it.

Run the application with the play button at the top of the designer and type a search term into the text box and hit the search button. Nothing will happen yet because we haven’t built the image controls but data will be loaded. You can see the debug data of the application by hitting CTRL-SHIFT-D which will open the Data window. In there somewhere you should see some data like this:

<rsp …>

    <photos page=”1″ pages=”11395″ … >

          <photo id=”3247648527″ … />

          <photo id=”3248474018″ …/>

…

          <photo id=”3248457036″ … />

     </photos>

</rsp>

This is the data returned by the Flickr search service function.

Close the data window and hit the stop button. Add a Layout Panel control to the window by clicking on the ControlX panel in the Control Palette and dragging from the Layout Panel onto the window.

To position the control where we want it, underneath the search field and button, open the properties window and set the following properties on the control.

The Layout Panel is a bit like the Tab Control, it contains child panels that multiple controls can be added to. Whilst the Tab control places it’s panels on top of each other the Layout Panel places them next to each other flowing across the window. The child panels you get by default in the Layout Panel are the two boxes that you can see inside the control. We only need one panel so delete one of them by right-clicking and selecting “Delete Child Panel”.

There are lots of images to display in the search results so you may ask why we are only using one panel. We’re going to make that panel data driven. That means a copy of that panel will be displayed for every instance of the “photo” element in our data. We can achieve this by selecting the remaining panel by clicking on it and adding the following property:

This tells the Layout Panel to create a new one of these panels for every instance of the “photo” data element in our data set. If you haven’t already, now would be a good time to save your progress. You can test the application so far by running it and typing a sensible search term. You should see one of those boxes (the panels) for each search result.

Now let’s add some controls. Drag an Image control and a label control onto the window and position the image control above the label control like this:

This should be possible to achieve with the mouse as the panel will resize to accommodate the controls as you move them and resize them but you can set their positions more exactly using the properties window like so:

Image control properties:

Label control properties:

Let’s also set a few properties to make the label wrap and display a smaller font:

And let’s get rid of the black border on the layout panel:

Now lets connect our label up to the data for the search results. In the “photo” element there is a title attribute which we’ll display in the label:

We clear the caption because when a label has a data source it displays a caption above it. We don’t want that any more. The Data source property is set to reference “panelelement”. That’s a place holder for the data element that the panel has been created to represent, one of the “photo” data elements. @title is the attribute we want to display for the element.

When you run the app now and perform a search you should get a panel full of results, no photos yet but the labels are now displaying title data.  Here’s an example:

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.

In part two we’ll look at how we’ll go about loading the images from Flickr.