Data-driven Development with Flash Builder, Part II

In the first two articles in this series, we used Adobe Flash Catalyst to convert some basic artwork into a working prototype of a contact application, then imported the Flash Catalyst project into Flash Builder. Using Flash Builder’s data driven development tools, we automatically generated a PHP service that contained all the calls we need to manage our contact data, and automagically hooked it up to our application.

This time, you’ll see just how much work has been put into Flash Builder to allow us to build applications rapidly. But before we get to that, we’ll need to add a couple more features to make our application usable.

Our starting position is the end result of the previous article’s instructions. To make life easier, this installment’s downloadable archive has a Flash Builder project named part_2_start.fxp.

When you import the .fxp file, you will be presented with a dialog asking you to update path variables. This is because we are using a PHP installation in the project, and the variables should be set as follows:

This assumes you have a local web server and PHP installation, of course.

We already have a working contact list on the left-hand side of our application. What we need now is to add a single contact view, so that the user can see the details of any contact in the list when he or she clicks on a contact’s name.

When we were working in Flash Catalyst, we defined a contactView state. The code in Main.mxml works, but it’s a little simplistic for what we want to do, so let’s modify it slightly.

Start by cutting out all the <fx:DesignLayer> and <s:RichText> elements that are being used to show the contact’s name on the right-hand side of our display: we’re going to create a new component for this purpose.

Right-click on /src/components in your Package Explorer pane in Flash Builder, and create a new MXML component. Call it ContactItem and fill in the details in the dialog as per Figure 1, “The ContactItem Component”.

Figure 1. The ContactItem Component

Flash Builder will generate the component structure for us. Next, we want to drop in the code to display the contact item’s details. First, insert the following code inside the Group element, which adds a public variable so the component can be passed a Contact value object:

<fx:Script>  <![CDATA[    import valueObjects.Contact;    [Bindable]    public var contactData : Contact;  ]]></fx:Script>

Now let’s add a slightly cleaned-up version of the generated Catalyst code, from which we’ve simply removed the Catalyst-specific items and stripped out the includeIn attribute. The code should look like this:

<s:BitmapImage source="@Embed('assets/images/mockup/at.png')"/><s:RichText color="0xFFFFFF" fontSize="18" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>Toby Tremayne</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>9999 999 999</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>toby@magicindustries.net</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p  whiteSpaceCollapse="collapse"><s:span>21b Baker Street</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>London</s:span></s:p></s:content></s:RichText>

Finally, we want to make sure the ContactItem component is picking up the actual data that’s passed to it, so we replace the hard-coded values with references to our value object:

<s:RichText color="0xFFFFFF" fontSize="18" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.first_name}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.phone}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF"  kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.email}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p  whiteSpaceCollapse="collapse"><s:span>{contactData.address1}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF"  kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve">  <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.city}</s:span></s:p></s:content></s:RichText>

Now, move back to Main.mxml. First, check that the Application tag’s currentState attribute is set to listView:

<s:Application   xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:flm="http://ns.adobe.com/flame/2008"   xmlns:lib="assets.graphics.mockup.*"   xmlns:d="http://ns.adobe.com/fxg/2008/dt"   xmlns:ai="http://ns.adobe.com/ai/2009"   xmlns:ATE="http://ns.adobe.com/ate/2009"  xmlns:contactservice1="services.contactservice1.*"  height="600" width="800"   backgroundColor="#FFFFFF"   preloaderChromeColor="#FFFFFF"   currentState="listView">

Next, go to the section of the code from which we stripped out the elements we put into ContactItem.mxml, and drop in a call to our new component, like so:

<components:ContactItem     id="contactPane"     contactData="{contactList.selectedItem}"     includeIn="contactView"    x="450" y="125" />

If you type this using the code insight in Flash Builder (IE type the opening left angle bracket and wait for the little popup, you can navigate to your components:ContactItem and when you select it, the IDE will automatically add an xmlns attribute to your <Application> tag. If not, you will need to make sure the following is added to the <Application> tag:

xmlns:components="components.*"

The list component was automatically assigned an id when we used the Flash Builder code generation tools to hook it up to our PHP service call, but it’s a very non-descriptive list1. Change the id to contactList to make your code a little clearer.

Now we want to make the contact pane appear on the right hand side when the user selects an item from the contact list. Add this function to Main.mxml’s script block:

protected function list_changeHandler():void {  currentState='contactView';}

And then add a change handler on the contact list itself, like so:

<s:List id="contactList"     skinClass="components.TobyTremayneDataList"     x="157" y="163"     change="list_changeHandler()"    creationComplete="list_creationCompleteHandler(event)"     labelField="address1"    itemRenderer="components.RepeatedItem1">  <s:AsyncListView list="{getAllContactResult.lastResult}"/></s:List>

If you followed the last article and made your own adjustments, Flash Catalyst created transitions using parallels to simultaneously fade each element (first name, last name etc). We have replaced those individual elements with a single component, so we need to modify the transition code. Change it instead to have a simple Fade for each transition, targeting our new ContactItem component. The new set of transitions should look like this:

Flash Catalyst created transitions that used parallels to simultaneously fade each element (first name, last name etc.). However, we’ve replaced those individual elements with a single component, so we need to modify the transition code. Change it instead to have a simple Fade for each transition, which will target our new ContactItem component:

<s:transitions>  <s:Transition fromState="contactView" toState="listView" autoReverse="true">    <s:Fade duration="200" target="{contactPane}" />  </s:Transition>  <s:Transition fromState="listView" toState="contactView" autoReverse="true">    <s:Fade duration="200" target="{contactPane}" />  </s:Transition></s:transitions>

Now, if you save and compile your Flash Builder project, you’ll see that when you click in the contact list, the selected contact’s data appears on the right-hand side of the display.