I’ve set up the GUI for my app with a search box in the ActionBar and a Search button. The user will enter a keyword in this search box and click search to look for photos on Flickr. The rest of the view has a List component that is constrained on all sides to span the entire area. The search results are displayed in this List. Screenshots of the app are below.

In this application, the method I want to invoke on the REST endpoint is:

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={API_KEY}&text={KEYWORD}&per_page=20

In your call, you would replace API_KEY with your Flickr API key, and KEYWORD with the keywords from the search input box. You can add additional parameters to this request if you want, but I only need to search by keyword in this sample. I am using the per_page parameter to limit the number of results from the search.

Connecting to a web service using the DCD features of Flash Builder couldn’t be simpler. In Builder, select Data > Connect to HTTP… and enter the URL above with a sample keyword and api key in the Operation1 URL field. Click the Add button below the list. The parameters table below should populate with the input parameters. Rename Operation1 to something more readable like searchByKeyword. Enter a Service Name. The dialog should look like this:

Once your service is set up, you can configure the return type and let Builder generate the data model for you. Right click on the searchByKeyword method in the Data/Services tab and select Configure Return Type. In the dialog, leave the default Auto-detect option selected and click Next. Enter parameters if they are not already populated and click Next. Name the new data type something like SearchResponse and click Finish. If you expand the Data Types branch in the Data/Services tab, you’ll see the generated data types. To add this new service and the method to your application, right click on the searchByKeyword method and select Generate Service Call.

All that’s left to do now is to wire up the GUI. The completed source code for this View is below. If it’s unclear what I am doing in the iconFunction to generate the icons, refer to the Flickr reference on it.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:flickrservice="services.flickrservice.*"
		viewActivate="viewActivateHandler(event)">

	<fx:Script>
		<![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			import spark.events.ViewNavigatorEvent;

			import valueObjects.SearchResponse;

			private const API_KEY:String = "Enter your API key";

			protected function viewActivateHandler(event:ViewNavigatorEvent):void
			{
				searchByKeywordResult.addEventListener(ResultEvent.RESULT, searchByKeywordResultHandler);
			}

			private function searchByKeywordResultHandler(event:ResultEvent):void
			{
				var searchResponse:SearchResponse = searchByKeywordResult.lastResult;
				if (searchResponse.stat == "ok")
				{
					listPhotos.dataProvider = searchResponse.photos.photo;
				}
			}

			protected function btnSearch_clickHandler(event:MouseEvent):void
			{
				searchByKeyword("flickr.photos.search", API_KEY, txtInput.text);
			}

			protected function searchByKeyword(method:String, api_key:String, text:String, per_page:String='20'):void
			{
				searchByKeywordResult.token = flickrService.searchByKeyword(method, api_key, text, per_page);
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<s:CallResponder id="searchByKeywordResult"/>
		<flickrservice:FlickrService id="flickrService"/>
	</fx:Declarations>

	<s:titleContent>
		<s:TextInput id="txtInput" prompt="Keyword(s)" width="100%"/>
	</s:titleContent>
	<s:actionContent>
		<s:Button id="btnSearch" label="Search" click="btnSearch_clickHandler(event)"/>
	</s:actionContent>
	<s:List id="listPhotos" left="0" right="0" top="0" bottom="0">
		<s:itemRenderer>
			<fx:Component>
				<s:IconItemRenderer labelField="" messageField="title" iconFunction="getImageThumbnailURL">
					<fx:Script>
						<![CDATA[
							import valueObjects.Photo;
							private function getImageThumbnailURL(item:Photo):Object
							{
								return "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_s.jpg";
							}
						]]>
					</fx:Script>
				</s:IconItemRenderer>
			</fx:Component>
		</s:itemRenderer>
	</s:List>
</s:View>

Here’s how you can switch between beveled and non-beveled buttons between Android and IOS:

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	@media (os-platform: "Android")
	{
		s|ActionBar
		{
			defaultButtonAppearance: normal;
		}
	}
	@media (os-platform: "IOS")
	{
		s|ActionBar
		{
			defaultButtonAppearance: beveled;
		}
	}
</fx:Style>

You would declare your media queries in the Style block of your main application mxml file. You can also declare them in any custom MXML components but the usual rules of CSS declarations apply. You can set type or class selectors in the main application file but only class selectors in custom components.

If you haven’t tried media queries yet, check it out. It’s an easy way to set styles for different devices without having to create a new theme or SWF for each.

Let’s say you have a basic Spark List in your application.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:List width="200" height="200" itemRenderer="FontChangeRenderer">
		<s:dataProvider>
			<s:ArrayList>
				<fx:String>Item 1</fx:String>
				<fx:String>Item 2</fx:String>
				<fx:String>Item 3</fx:String>
			</s:ArrayList>
		</s:dataProvider>
	</s:List>
</s:Application>

Below is the code for FontChangeRenderer which is a custom ItemRenderer. Notice that I set autoDrawBackground to false. This prevents the background from changing color on hover and selection.

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				autoDrawBackground="false">
	<s:states>
		<s:State name="normal"/>
		<s:State name="selected"/>
		<s:State name="hovered"/>
	</s:states>
	<s:Label text="{data}"
			 fontWeight.hovered="bold" fontStyle.selected="italic"/>
</s:ItemRenderer>

I used ItemRenderer states to change the fontStyle and fontWeight styles. On hover, the Label will be bold, and on selection it will be italicized. The output is below (you can rollover and select items):

MuniTracker lets you track San Francisco Muni locations and arrival times with a live map. For those of you unfamiliar with the San Francisco transit system, the Muni is the bus, trolley and cable car system. SFMTA publishes an XML feed with live bus locations and arrival times that update frequently. MuniTracker polls this feed every 10 seconds.

One of the most useful features of MuniTracker is the ability to view routes and current bus locations on a map. I use ESRI’s street maps in this application. When you are in the map view, you can see the locations of the buses update every 10 seconds along with their arrival times. Another useful feature is the ability to bookmark your favorite stops and lines for easy access later. There is a mini browser embedded in the application that displays the SFMTA website where the agency frequently posts delay information and other news.

You can download MuniTracker today from the two app stores:

MuniTracker for IOS

MuniTracker for Android