After I sketched the basic structure of our iPhone prototype in the last post, I will now continue to add some functionality.

Demo

When you go back to the last post, you wil notice the three <mx:Canvas> -tags. In the last one with id=”mainmenu”, we will place our main navigation, consisting of four simple buttons (you can of course place whatever you want, this is just to show the main principle):

<mx:Canvas id="mainmenu"  click="handleClick(event);" x="37" y="561" width="319" height="45"  backgroundColor="#333333">    

   <mx:Button x="5" y="5" label="Contacts" styleName="buttonBlack" id="contactsBtn" color="#EEEEEE" width="75" height="35"/>
   <mx:Button x="82" y="5"  label="Chat" styleName="buttonBlack" id="chatBtn" color="#EEEEEE" width="75" height="35"/>
   <mx:Button x="159" y="5" label="Option" styleName="buttonBlack" id="optionBtn" color="#EEEEEE" width="75" height="35"/>
   <mx:Button x="236" y="5" label="Search" styleName="buttonBlack" id="searchBtn" color="#EEEEEE" width="75" height="35"/> 		 

</mx:Canvas>

ActionScript code

Now, remember the empty <mx:Script>-tag from the previous post? This is where we place our function, that handles our button clicks. In this function we just check the id of the button clicked and change the viewstack, respectively. Actually pretty simple, but the line within the if-blocks will be replaced later on, when we deal with dispatching events.

  public function handleClick(eventObj:Event):void {

    var btnId:String = (eventObj.target as Button).id;
    if (btnId == "contactsBtn"){
	mainViewStack.selectedChild = myContacts;

    } else if (btnId == "chatBtn"){
	mainViewStack.selectedChild = myChat;

    } else if (btnId == "searchBtn"){
	mainViewStack.selectedChild = mySearch;

    } else if (btnId == "optionBtn"){
	mainViewStack.selectedChild = myOptions;
    }
  }

Where do we go from here

Eventually, we have a working basis. Now that we have the skeleton, we can exchange the content of each “view” (now filled with a placeholder label), using selfmade components. Components is a pretty crucial element, when working with flex, which helps you breaking down your code into smaller chunks.

Related posts:

part 2 setting up the UI
iphone prototyping with flex