Before I continue with presenting the prototype, I just want to point you to Dan Harrelson’s post, who also lists Flex as means for prototyping, just in case that you think that Flex might be too unhandy for prototyping. He says:

“While more tuned for app developers, the WYSIWYG interface and support for importing skins from Ilustrator give you the ability to go quickly from design to prototype. Can export Flash or AIR aps.”

So the basic structure of the UI consists of 3 central <mx:Canvas>-Elements. The first one will represent the status bar, the second one the main app window, and the last one will be used for the navigation.

The iPhone image has been set up as background image to the application tag. Like I mentioned in the previous post, I took the images from the Yahoo stencil kit.

Here comes the Flex program code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="390" height="747"
backgroundImage="img/phone_back.png">

<mx:Style>
   ...
</mx:Style>

<mx:Script>
<![CDATA[
   ...
]]>
</mx:Script>

<mx:Canvas id="currentStatus" x="37" y="126" width="320" height="20" styleName="headerBack">
   //Status bar
   ...
</mx:Canvas> 

<mx:Canvas id="canvas1" x="37" y="144" width="320" height="419" styleName="appBack">
   //main app window
   ...
</mx:Canvas>  

<mx:Canvas id="mainmenu"  click="handleClick(event);" x="37" y="561" width="319" height="45"  backgroundColor="#464646">
   //area for navigation
   ...
</mx:Canvas>   

</mx:Application>

Notice that the attribute styleName, which is used to set the background image within the style tag:

<mx:Style>
.headerBack {
  background-image: Embed("img/status_bar.png");
  background-size:"100%";
}
.appBack {
  background-image: Embed("img/app_back.png");
  background-size:"100%";
}
</mx:Style>

Advantage of using <mx:Canvas> is the possibility to drawing the UI at a pixel level. As you have probably noticed, there is already an eventlistener at the last canvas: – click=”handleClick(event), but the <mx:Script>-tag is still empty. This will be covered in the next post.

Have a nice day, cheers.