Developing a mobile application doesn’t need to be a scary procedure filled with insane logic and new languages to learn. Embrace your current ActionScript/AIR skills, whatever level they may be, and start developing for the next-generation of devices. Following on from part one of this tutorial in last month’s magazine, we will continue to work on our sample magazine issue application.
Previously, we began our journey to create mobile content for the Android platform using Adobe AIR by creating our initial project in Flash Builder ‘Burrito’ and developing a simple layout, to allow us to retrieve dynamic data and to search using certain keywords.
We’ll continue this month by adding a secondary view to the application, to allow users to drill down and view details on a specific issue selected from the list. This will be coupled with more interaction between the remote ColdFusion server to request information and obtain data.
Finally, we’ll start to look at transferring the dynamic content to a remote server and the fantastic ability available within Flash Builder ‘Burrito’ to run and debug the application directly onto an Android device. Let’s get started…

tools | tech | trends: Adobe AIR, Flash Builder Burrito, ColdFusion
expert: Matt Gifford
tutorial files: the full code can be downloaded here

01. Create a view
Open up your MobileAIR project in Flash Builder ‘Burrito’, or import the .fxp file from the cover disc. From within the Package Explorer window, right-click on the Views folder and select New -> MXML Component to create a new view component. Add the name ‘IssueDetail’ and accept the remaining default values to generate the new file.

02. Pass information between views
The secondary view will display information for a specific issue once it has been selected from the list on the main page. Add a ‘change’ attribute to the List control to ‘push’ (or open) the new view onto the view stack. This function also passes the selected item so we can reference it.

<s:List id=”IssueList” left=”0” right=”0”top=”73” bottom=”0”
creationComplete=”list_creation CompleteHandler(event)”
change=”navigator.pushView (IssueDetail,
IssueList.selectedItem)”>

03. Configure Input Type
Open the ‘Data/Services’ panel and right-click the getIssueByID() method. Select ‘Configure Input Types’ from the context menu and select the required input type for the IssueID parameter to be an int. The getIssueByID() in our ColdFusion component expects a numeric argument, and this ensures the AIR application will expect the same.

04. Get specific Issue data
Right-click the getIssueByID() method once more. Select Configure Return Type and choose the Auto-detect option. Enter an argument value of ‘1’ to test the returned data, and proceed to supply the name of ‘Issue’ for the data type. Click finish to complete the wizard. Right-click and select Generate Service call to create the required functions.

05. Add viewActivate Handler
In Design View, highlight the View item within the window. Open the Properties tab and, within Alphabetical View, scroll down to click on ‘viewActivate’ from the list, which will generate the required functions and extra code for you. Replace the dummy text comment with the method to call the specific issue, casting the data.ID to the required int type.

protected function view1_viewActivate Handler(event:FlexEvent):void
{
getIssueByID(data.ID as int);
}

06. Customise the View Title
Remote data results obtained by the IssueDetail component are now available to access through the ‘getIssueByIDResult’ responder id. In Source View, edit the title of the component to display the issue number of the specific issue selected by the user.

title=”Web Designer #{getIssueByIDResult.lastResult.ISSUENUMBER}”

07. Add Back button
In IssueDetail.mxml, create an actionContent tag block. Inside this block, create a button with the ID ‘backBtn’ and a label of ‘Back’. This will have a click action, calling a function named ‘backBtn_clickHandler()’. This function will access the navigator instance, from which we will call the popToFirstView() method to remove all views from the stack except the very bottom one.

protected function backBtn_clickHandler(event:MouseEvent):void
{
navigator.popToFirstView();
}

08. View the progress
Click the debug icon (the green insect) from the top menu to run the debugger. The Adobe Debugger Launcher (ADL) will open up over the workspace. Select an item from the list and click to be taken to the secondary view, now including the Back button and customised title bar. You can rotate the device using the ADL menu.

09. Arrange the content
Add a VGroup component to the Source View, setting full width and height and 10 pixels padding on the left and right, into which we will place our text content. Wrap this VGroup inside a Scroller component, which will allow the user to scroll the content on this page if it exceeds the visible screen size.

<s:Scroller width=”100%” height=”100%” top=”10”>
<s:VGroup width=”100%” height=”100%” paddingLeft=”10” paddingRight=”10”>
<!—Text fields will go here –>
</s:VGroup>x
</s:Scroller>

10. Display issue details
Add three labels and a TextArea component into the VGroup. Set the text attribute of the first label to “Release Date” and the font as bold. The second label will display dynamic data returned from the ColdFusion server, and so set the text attribute of this label to read {getIssueByIDResult.lastResult.RELEASEDATE}. Set the third label to “Features”.

<s:Label fontWeight=”bold” paddingTop=”10” text=”Release Date”/>
<s:Label width=”340” fontSize=”16” text=”{
getIssueByIDResult.lastResult.
RELEASEDATE}”/>
<s:Label fontWeight=”bold” paddingTop=”10” text=”Features”/>
<s:TextArea id=”htmlFeatures” width=”100%”  height=”100%” fontSize=”16” editable=”
false” selectable=”false” />

11. Convert the HTML
In order to display the content features in HTML format, we must import a MobileTextField class to set the htmlText display property of our TextArea component. Add the following code into the view1_viewActivateHandler function to set the HTML property. You also need to import the MobileTextField class.

import spark.components.supportClasses.MobileTextField;
protected function view1_viewActivate Handler(event:FlexEvent):void
{
getIssueByID(data.ID as int); MobileText
Field(htmlFeatures.textDisplay).htmlText =
data.CONTENTFEATURES;
}

12. Get ColdFusion Hosting
To deploy and run the application on an Android device, you will need to transfer any code from the local ColdFusion server to a remote host, accessible from any network. www.hostmediauk.com offers ColdFusion 9 hosting on varying levels, from free to paid monthly services. Head over and create an account to get your own remote ColdFusion 9 hosting.

13. Move to Live Server
Alternatively, you can use a remote server already created to test this application. Right-click the project, select Properties and choose Flex Server. Change the Root URL to http://labs.mattgifford.co.uk, where the remote services and assets have been set up for you. Open up MobileAIRHome.mxml and find the function called getIssueCover, and change the domain for the images to http://labs.mattgifford.co.uk.

14. Change case
ActionScript is case-sensitive, and the results from the local environment are in uppercase, whereas data from the live server is not. Change any references of the data variables to the correct case before we test against the LIVE server to avoid any errors. Full code for this is available on the disc to assist you.

15. Run on your device
Enable USB debugging on your Android device, and connect it to your machine. Select Run Configurations from the main menu (the drop-down next to the green Play button) and choose ‘On Device’. You may need Wi-Fi turned on to ensure connection speeds are okay. Flash Builder will compile the application, generating a .apk (Android package), and deploy it onto your device.

Mobile development is rapidly becoming a requirement for the majority of web developers to consider. Clients may want an exceptional website, and a companion mobile application to allow their users and customers to use their services regardless of location. Typically, mobile app development brings with it a steep learning curve. With the latest release of Adobe’s Flash Builder tool, we are now able to develop for an Android device using familiar software and languages including ActionScript, and deploy as an AIR application.
In part one of this tutorial, we will instal the required software and powerful server-side application to handle remote data connections, and produce a simple layout to display our dynamic data on an Android device. Next month we will enhance our mobile application with secondary views and built-in screen transitions.

tools | tech | trends: Adobe AIR, Flash Builder Burrito, ColdFusion
expert: Matt Gifford
tutorial files: download here

01. Install ‘Burrito’

Firstly, download a copy of Adobe Flash Builder’s latest preview release, codenamed ‘Burrito’ from http://bit.ly/FlashBuilderBurrito. If you already own a copy of Flash Builder 4, your serial will work with this. If not, there is a 60-day trial for you to try out the software. Once downloaded, follow the installation wizard to install the application.

02. Get ColdFusion

Now download ColdFusion 9 from http://adobe.ly/getColdFusion. Choose to download the free developer version from the right-hand menu and follow the installation wizard to install the server configuration version. A short video tutorial is also available to help you complete the installation process, which can be found at http://bit.ly/installColdFusion9.

03. Add the datasource

Unzip database.zip from the disc and place the mobileDB directory in the ColdFusion db folder. In the Administrator (http://tinyurl.com/4x9s3j), navigate to Data & Services>Datasources and create a source called webDes_mobile with an Apache Derby Embedded driver. Set the database folder to the mobileDB folder.

04. Copy files across

From the CD, open the ‘start/www’ folder and copy the files and directory structure into the ‘wwwroot’ folder within the ColdFusion directory. This contains the ColdFusion component (CFC) file that will interact as a gateway to query the database and send the recordset of data back to the mobile application.

05. Create a project

In Flash Builder, click File>New from the top menu and select Flex Mobile Project to create a new application skeleton. Enter the project name ‘MobileAIR’ and accept all default settings in this section and within the Mobile Settings window, which defines the basic settings for the mobile application layout.

06. Configure Server Settings

In Server Settings, select ColdFusion from the list, and select ColdFusion Flash Remoting. Ensure the Standalone option is selected, and validate the configuration to connect to your ColdFusion install. The correct connection details can be found on the cover CD to help you. Click Finish to complete the set up.

07. Setting the title

The project has been generated with two files open in Flash Builder. Close ‘MobileAIR.mxml’ as this file is a placeholder. ‘MobileAIRHome.mxml’ is the default view file and will contain the code for the layout. Click the Design button to go into Design View and change the title of the application to ‘Web Designer Issue List’.

08. Add a list

To display a list of dynamic data, we can make use of the List control. Using the Components view, drag and drop a List control into the main area of the window, give it an ID of IssueList and set the constraints as zero all around except for a margin of 73 on the top, as shown in the screenshot.

09. Connect the data

Open the ‘Data/Services’ panel, click ‘Connect to Data/Service’ and select ColdFusion from the dialog window. On the next step browse to the location of the IssueService CFC file within the webroot. Enter the ColdFusion admin details if asked when proceeding to the next step. You’ll see a list of available remote methods usable within the application. Click Finish.

10. Populate the list

Drag the getIssues() item from the panel onto the List control component to bind the remote data to it. Select ‘Configure Return Type’ and choose the ‘Auto-detect’ option before proceeding. Enter the custom name ‘Issues’ for the array to hold our dynamic data and finally choose IssueNumber as the label field option. Click OK to confirm the data binding.

11. Test the dynamic data

Click the debug icon (the green insect) from the top menu to test the current implementation. The initial run will display a configuration window. Choose to launch the device from the desktop, and select an Android device to simulate from the drop-down list. The debugger will launch with the application and display the list of issue numbers as selectable buttons.

12. Customise the list
Adding specific information to the list items is manageable by adding an custom itemRenderer property within the list tag block which will display an icon for each item listed. You can also set a labelFunction and messageFunction property which
will display textual information about each magazine issue in the list. The full code for this step is included
on the cover disc.

001 <s:List id=”list” left=”0” right=”0”
top=”73” bottom=”0”
002     creationComplete=”list_creationComplete
Handler(event)”>
003     <s:AsyncListView list=”{getIssuesResult.
lastResult}”/>
004     <s:itemRenderer>
005         <fx:Component>
006             <s:MobileIconItemRenderer
007                 iconHeight=”100” iconWidth=”100”
008                 iconFunction=”getIssueCover”
009                 labelFunction=”getIssueListTitle”
010                 messageFunction=”getIssueKeywords”>
011
012             </s:MobileIconItemRenderer>
013         </fx:Component>
014     </s:itemRenderer>
015 </s:List>

13.The display functions
The MobileIconItemRenderer class is expecting three functions to display the relevant content for each list item. Write these inside an fx:Script block and place them directly between the MobileIconItemRenderer tags to run in line for each item. The returned output from each function will be automatically displayed through the visual renderer component.

001 <fx:Script>
002 <![CDATA[
003 private function getIssueCover(item:
Object):String
004 {
005     return “http://localhost:8500/assets/
coverImage/” + item.COVERIMAGE;
006 }
007 private function getIssueListTitle(item:
Object):String
008 {
009     return “Web Designer “ + item.
ISSUENUMBER;
010 }
011 private function getIssueKeywords(item:
Object):String
012 {
013     return item.KEYWORDS;
014 }
015 ]]>
016 </fx:Script>

14. Adding search capabilities
In Design View, add a TextInput component above the list item with the ID ‘searchTxt’, setting both width and height to 100%. Add an event handler to run after pressing Enter which will call a performSearch() method and filter the results on a keyword search. Add the search function into the Code View inside the main script block. The full code for this step is on the disc.

001 protected function performSearch(event:
Event):void
002 {
003     getIssuesResult.token = issueService.
searchFeatures(searchTxt.text);
004 }

15. Run a search

Run the debugger tool from the top menu to test the application. The list items now display custom info including images, and the search function updates the list using a filtered keyword search via ColdFusion. You can also use the debugger menu to rotate the device simulator to test horizontal and vertical displays.

LOOK OUT FOR PART TWO NEXT WEEK

STORE ALL YOUR FRIENDS’ AND FAMILY’S CONTACT INFORMATION IN A USEFUL AIR APPLICATION. LEARN HOW TO ADD, EDIT AND DELETE DATA IN AN SQLITE DATABASE IN PART 2 OF THIS TUTORIAL

In Part 1 we began coding an AIR contact manager with Flex and realised that the sheer amount of code meant we’d have to split it over two parts. So if you’re encountering this from scratch you’ll need to bear a couple of things in mind. Step 1 is in fact Step 16 in the overall tutorial. Find the code for Part 2 here and Part 1 here

Author: Simon Bailey | Originally appeared in Issue 146

1 Instantiate SQLQueries
In ContactManager, navigate to the onOpen() method and enter the text below to create a new instance of the SQLQueries class. Using the instance of the LConnector class, parse the SQLConnection in the SQLQueries constructor and add an OnContacts method to the CONTACTS_ARR event, dispatching the ArrayCollection of contacts.

private function onOpen( e:Event ):void
sqliteQueries = new SQLQueries( sqliteConnector.connection );
sqliteQueries.addEventListener( SQLQueries.CONTACTS_ARR, onContacts );
}
private function onContacts( e:AllContactsEvent ):void
{
}

2 Load contacts into wrapper
We need to parse the ArrayCollection of contacts to the ContactsWrapper. Enter the code below. Assign the contacts as the ContactList data grid’s data provider. In the onContacts() method in ContactManager, parse the contacts to  setContacts().

public function setContacts( contacts:ArrayCollection ):void{
c_list.contact_dg.dataProvider = contacts;}
private function onContacts( e:AllContactsEvent ):void{
contactWrapper.setContacts( e.contacts );}

3 Display contact
In ContactWrapper, add a listener to the Select event on the ContactList component, calling a method named displayContact. The Contact variable is populated from the selectedContact reference assigned through mx:Binding in ContactList.

private function displayContact():void{
c_details.add = false;
c_details.edit = false;
c_details.contact = c_list.selectedContact;
}

4 Add, edit, delete
Still in the ContactWrapper class, enter the onClick() method. A switch statement analyses the eventName parsed and acts accordingly. Edit has two modes: edit, which transitions ContactDetails state, and save to retrieve edited contact details and saveContact().

private function onClick( eventName:String ):void
{
switch ( eventName )
{
case ‘edit’:
if( !c_details.edit ){
c_details.edit = true;
}
else
{
var contact:ContactVO = c_details.saveContact();
( contact.firstName != “” ) ? saveContact( contact ) : c_details.clear();
c_details.edit = false;
}
break;
case ‘add’:
c_details.edit = true;
c_details.add = true;
c_details.newContact();
c_list.deSelect();
break;
case ‘delete’:
if( c_list.contact_dg.selectedIndex != -1 ){
c_list.deSelect();
c_details.clear();
}
break;
}}

5 saveContact
If the contact has been edited, saveContact() is fired. This method expects a contact value object as its parameter and uses a custom event to dispatch the contact for storage. Add/edit is determined by the ContactDetails’ add Boolean.

private function saveContact( contact:ContactVO ):void{
if( !c_details.add ){
}
else
{
}
}

6 Creating custom events
We will create transparent background divs, with position: absolute set so they sit behind the content. Create the following class .background in the style sheet:

package events
{
import flash.events.Event;
import vo.ContactVO;
public class ContactEvent extends Event{
public var contact:ContactVO;
public function ContactEvent( _contact:ContactVO, type:String, bubbles:
Boolean=false )
{
super( type, bubbles );
this.contact = _contact;
}
public override function clone():Event
{
return new ContactEvent( contact, type, bubbles );
}}}

7 Overlaying content
Create two new ActionScript classes that extend Event in the events directory named ‘ContactEvent’ and ‘AllContactsEvent’. These custom events will be used to dispatch a contact value object around our application and an ArrayCollection of contacts.

<!– Dispatched Events –>
<mx:Metadata>
[Event(name=”closeWin”, type=”flash.events.Event”)]
[Event(name=”contactDelete”, type=”events.ContactEvent”)]
[Event(name=”contactEdit”, type=”events.ContactEvent”)]
[Event(name=”contactAdd”, type=”events.ContactEvent”)]
</mx:Metadata>
// Dispatched events to add, edit and delete
private static const CONTACT_DELETE:String = ‘contactDelete’;
private static const CONTACT_EDIT:String = ‘contactEdit’;
private static const CONTACT_ADD:String = ‘contactAdd’;
case ‘delete’:
if( c_list.contact_dg.selectedIndex != -1 ){
var e:ContactEvent = new ContactEvent( c_list.selectedContact as ContactVO, CONTACT_
DELETE, true );
dispatchEvent( e );
c_list.deSelect();
c_details.clear();
}
break;
var e:ContactEvent;
if( !c_details.add )
{
e = new ContactEvent( c_details.contact as ContactVO, CONTACT_EDIT, true );
}
else
{
e = new ContactEvent( c_details.contact as ContactVO, CONTACT_ADD, true );
}
dispatchEvent( e );

8 Listen for custom events
Edit the ContactWrapper component to listen for the dispatched custom events for Add,Edit and Delete. Create the three methods to handle the events and call the appropriate method in SQLQueries, parsing the contact value object stored in our custom event.

// Add contact
private function addContact( e:ContactEvent ):void
{
sqliteQueries.addContact( e.contact );
}
// Edit contact
private function editContact( e:ContactEvent ):void
{
sqliteQueries.editContact( e.contact );
}
// Delete contact
private function deleteContact( e:ContactEvent ):void
{
sqliteQueries.deleteContact( e.contact );
}
<!– Contact Manager wrapper –>
<view:ContactWrapper id=”contactWrapper”
width=”100%” height=”100%” x=”0” y=”0”
closeWin=”closeWindow( event )”
contactDelete=”deleteContact( event )”
contactAdd=”addContact( event )”
contactEdit=”editContact( event )” />

9 Modification queries
Add your final three methods to add, edit and delete data from our SQLite database.

// Edit a contact
public function editContact( _contact:ContactVO ):void
{
var _sql:String = “UPDATE records SET firstName=:firstName, “ +
“lastName=:lastName, “ +
“email=:email, “ +
“mobileTel=:mobileTel, “ +
“homeTel=:homeTel, “ +
“address=:address “ +
“WHERE contactID=:contactID”;
execute( _sql, contactResult, _contact, EDIT );
}// Add a contact
public function addContact( _contact:ContactVO ):void
{
var _sql:String = “INSERT INTO records (firstName, lastName, email, mobileTel,
homeTel, address) “ +
“VALUES (:firstName, :lastName, :email, :mobileTel, :homeTel, :address)”;
execute( _sql, contactResult, _contact );
}// Delete a contact
public function deleteContact( _contact:ContactVO ):void{
var _sql:String = “DELETE FROM records WHERE contactID=:contactID”;
execute( _sql, contactResult, _contact, DELETE );}
private function contactResult( e:SQLEvent ):void
{
getContacts();}}}

10 Drag window
Add a mouseDown Event Listener to the ContactWrapper instance, calling an onDrag() method. Within onDrag, call the startMove method on the NativeWindow class.

mouseDown=”onDrag( event )”
// Enable drag of app
private function onDrag(e:MouseEvent):void
{
stage.nativeWindow.startMove();
}

11 XML descriptor file
Here you outline the application identifier, file name, description and window settings for display purposes.

<?xml version=”1.0” encoding=”UTF-8”?>
<application xmlns=”http://ns.adobe.com/air/application/1.0”>
<id>ContactManager</id>
<filename>ContactManager</filename>
<name>Contact Manager</name>
<version>v1</version>
<description>Contact Manager application for managing all your friends and family
contact information.</description>
<initialWindow>
<content>[This value will be overwritten by Flex Builder in the
output app.xml]</content>
<title>Contact Manager</title>
<systemChrome>none</systemChrome>
<transparent>false</transparent>
</initialWindow>
</application>

12 Test your app
Click Run>Run ContactManager, then click Add and add some contact information into the details panel. Click Save, test, edit and delete. Now click Project>Export Release Build. Click Next>Create to build a new digital certificate. Click Next and ensure the XML file, contacts database and SWF file are selected, then click Finish. Finally, double-click your newly created AIR file. Select Install, keep the next window’s defaults and select Continue.

STORE ALL YOUR CONTACTS IN A USEFUL AIR APPLICATION BY LEARNING ADD, EDIT AND DELETE DATA TECHNIQUES WITHIN AN SQLITE DATABASE.

Developers can now take their RIA concepts out of the browser and onto the desktop. There are so many concepts feasible in an AIR application and with the ability to store data in a local database, programs we have long been familiar with can now be rebuilt with your own added flair. This tutorial will show you how to build a simplified version of Apple’s Address Book using SQLite to store contact information. The UI will be created using MXML components with ActionScript classes to control all functionality. We urposely aimed to use a variety of techniques in the code to handle states, communicate data, etc, so we would recommend studying the source for further insight. To complete this tutorial, you will need to use the source files to access all of the code; certain scripts are covered in each step. In addition, the guide is split over two parts with next month’s final text including the PDF pages and final files from here.

Author: Simon Bailey | Originally appeared in Issue 146

01 Download required software

Download the latest AIR runtime from http://get.adobe.com/air/ and follow the installation instructions provided by Adobe. If you do not have Flex Builder 3 installed, visit www.adobe.com/products/flex/ to download the 60-day free trial and install as instructed. Now we are ready to start setting up our project.

02 New Flex project

To fire up Flex, select File>New>Flex Project. Enter ‘ContactManager’ as the project name, check Default Location and check the Desktop application (runs in Adobe AIR). Ensure Application Server Type is set to None and click Next. Keep the default output folder and click Next, once again keeping all the defaults. Click Finish.

03 Construct main component
Within the opening WindowedApplication tag in ContactManager.mxml, enter the code as below. Enter the second set of text above to set some basic styling for the contact manager. Create four new folders in the SRC directory: ‘components’, ‘events’, ‘SQLite’ and ‘VO’. Add the provided contacts database from the CD to the SRC folder.

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
width=”450”
height=”360”
showFlexChrome=”false”
verticalScrollPolicy=”off”
horizontalScrollPolicy=”off”>
<mx:Style>
TitleWindow
{
cornerRadius: 0;
roundedBottomCorners: false;
headerColors: #ffffff, #999999;
footerColors: #cccccc, #999999;
borderThicknessLeft: 0;
borderThicknessTop: 0;
borderThicknessBottom: 0;
borderThicknessRight: 0;
headerHeight: 34;
shadowDistance: 0;
dropShadowColor: #333333;
titleStyleName: “contactTitle”;}
.contactTitle
{
color: #333333;
fontFamily: Verdana;
fontSize: 12;
fontWeight: bold;}
</mx:Style>

04 Contact value object
Right-click the VO folder and create a new ActionScript class named ‘ContactVO’ and uncheck Generate constructor from superclass. Enter the code below. This custom value object will ensure correct data typing of contact details is used throughout this. The [Bindable] meta-data tag assigns instances of this class to MXML components.

package vo
{
[Bindable]
public class ContactVO
{
public var contactID:int;
public var firstName:String;
public var lastName:String;
public var email:String;
public var mobileTel:String;
public var homeTel:String;
public var address:String;
public function ContactVO(){}
}
}

05 Build a UI wrapper
Right-click the components folder, select New>MXML Component. Set the file name as ‘ContactWrapper’ and base it on a TitleWindow. Clear width and height values and define layout as absolute. Within the opening TitleWindow tag, ensure the code is as below. Within the opening and closing TitleWindow tags, create a new <mx:Script> tag.

<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:view=”components.*”
layout=”absolute”
title=”AIR Contact Manager”
showCloseButton=”true”>

06 Add the wrapper
In ContactManager.mxml, ensure the code now looks like above. The main two changes here are a new XMLNS reference to our component’s directory so we can add the ContactWrapper component, which is near the bottom of the script. Next, we added an onCreationComplete method initApp() that runs when the component is fully created.

<<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:view=”components.*” layout=”absolute”
width=”450” height=”360”
showFlexChrome=”false” verticalScrollPolicy=”off”
horizontalScrollPolicy=”off”
creationComplete=”initApp()”>
<mx:Script>
<![CDATA[private function initApp():void{}]]>
</mx:Script>
<view:ContactWrapper id=”contactWrapper”
width=”100%” height=”100%” x=”0” y=”0” />

07 Contact list
In the components folder, create a new MXML component extending Canvas named ‘ContactList’, adding the below code. This component will act as a simple list of all the contacts stored in our database. setName() concatenates the first and last name strings for display. <mx:Binding> binds items in the data grid to the variable selectedContact.

<<?xml version=”1.0” encoding=”utf-8”?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Metadata>
[Event(name=”select”, type=”flash.events.Event”)]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import vo.ContactVO;
public static const SELECT:String = ‘select’;
[Bindable] public var selectedContact:ContactVO;
private function setName( item:Object, column:DataGridColumn ):String
{
return String( item.firstName +” “+ item.lastName );}
public function deSelect():void{
contact_dg.selectedIndex = -1;}]]>
</mx:Script>
<mx:Binding source=”contact_dg.selectedItem as ContactVO” destina
tion=”selectedContact”/>
<mx:DataGrid id=”contact_dg” width=”100%” height=”100%”
click=”if ( contact_dg.selectedIndex != -1) dispatchEvent(
new Event( SELECT, true ) );”>
<mx:columns>
<mx:DataGridColumn labelFunction=”setName” headerText=”Name” />
</mx:columns></mx:DataGrid></mx:Canvas>

08 Contact details
In the components folder, create a new MXML component extending Canvas named ‘ContactDetails’, adding the below code. This displays all the contact data when selected in the ContactList. This component has two visual states, one to view the data and one to edit the data. State change is controlled by the Boolean variable ‘edit’.

i<?xml version=”1.0” encoding=”utf-8”?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
verticalScrollPolicy=”off”
horizontalScrollPolicy=”off”
currentState=”{ ( edit ) ? ‘edit_view’ : ‘’ }”>
<mx:states>
<mx:State name=”edit_view”>
<mx:RemoveChild target=”{ first_txt }” />
<mx:RemoveChild target=”{ last_txt }” />
<mx:RemoveChild target=”{ email_txt }” />
<mx:RemoveChild target=”{ mobile_txt }” />
<mx:RemoveChild target=”{ home_txt }” />
<mx:AddChild position=”lastChild”>
<mx:TextInput id=”first_in” text=”{ contact.firstName }” width=”95”
x=”69” y=”10” />
</mx:AddChild><mx:AddChild position=”lastChild”>
<mx:TextInput id=”last_in” text=”{ contact.lastName }” width=”95”
x=”174” y=”10” />
</mx:AddChild><mx:AddChild position=”lastChild”>
<mx:TextInput id=”email_in” text=”{ contact.email }” width=”200”
x=”69” y=”50” />
</mx:AddChild><mx:AddChild position=”lastChild”>
<mx:TextInput id=”mobile_in” text=”{ contact.mobileTel }” width=”200”
x=”69” y=”90” />
</mx:AddChild><mx:AddChild position=”lastChild”>
<mx:TextInput id=”home_in” text=”{ contact.homeTel }” width=”200”
x=”69” y=”130” />
</mx:AddChild></mx:State></mx:states>
<!– Transition for the screen –>
<mx:transitions>
<mx:Transition id=”fadeTransition” fromState=”*” toState=”*”>
<mx:Parallel target=”{ this }”>
<mx:Dissolve duration=”600”/>
</mx:Parallel></mx:Transition>
</mx:transitions>
<!– First name –>
<mx:Text id=”first_txt”
text=”{ contact.firstName }” fontWeight=”bold”
fontSize=”14” x=”66” y=”10”/>
<!– Last name –>
<mx:Text id=”last_txt”
text=”{ contact.lastName }” fontWeight=”bold”
fontSize=”14” x=”{ first_txt.x + first_txt.width + 3 }”
y=”10”/>
<!– Label = email –>
<mx:Label text=”email”
color=”#666666” fontSize=”12” x=”23” y=”50”/>
<!– Label = mobile –>
<mx:Label text=”mobile”
color=”#666666” fontSize=”12”
x=”15” y=”90”/>
<!– Label = home –>
<mx:Label text=”home”
color=”#666666” fontSize=”12”
x=”21” y=”130”/>
<!– Label = address –>

09 Populating contact details
Still in ContactDetails, enter the below code. Data will be parsed into this component as a custom contact value object, with each visual component referencing the object for data to display. To save the contact-edited information, the entered text in each TextInput component is assigned to its corresponding variable in the value object.

<mx:Script>
<![CDATA[
import vo.ContactVO;
[Bindable] public var contact:ContactVO;
[Bindable] public var edit:Boolean = false;
public var add:Boolean;
public function newContact():void{
contact = new ContactVO();
}
public function saveContact():ContactVO
{
contact.firstName = first_in.text;
contact.lastName = last_in.text;
contact.email = email_in.text;
contact.mobileTel = mobile_in.text;
contact.homeTel = home_in.text;
contact.address = address_txt.text;
return contact;
}
public function clear():void
{
newContact();
edit = false;
}]]></mx:Script>
<mx:Label text=”address”
color=”#666666” fontSize=”12”
x=”5” y=”170”/>
<!– Email –>
<mx:Text id=”email_txt”
text=”{ contact.email }” color=”#000000”
fontSize=”11” x=”66” y=”50”/>
<!– Mobile –>
<mx:Text id=”mobile_txt”
text=”{ contact.mobileTel }”
color=”#000000” fontSize=”11” x=”69” y=”91”/>
<!– Home –>
<mx:Text id=”home_txt”
text=”{ contact.homeTel }” color=”#000000”
fontSize=”11” x=”69” y=”131”/>
<!– Address –>
<mx:TextArea id=”address_txt”
text=”{ contact.address }”
color=”#000000” fontSize=”11” right=”40” left=”69”
height=”90” borderThickness=”{ ( edit ) ? 1 : 0 }”
wordWrap=”true” editable=”{ edit }” y=”171”/>
</mx:Canvas>

10 Add components to wrapper
Return to ContactWrapper and add the code below. Here we use the HDividedBox component to display our list and details custom components. This enables us to mimic Address Book and adjust the width of each component accordingly. A ControlBar is added to hold the buttons controlling the application’s add/edit and delete functionality.

<!– Contact components container –>
<mx:HDividedBox id=”contactContainer” x=”0” y=”0”
width=”100%” height=”100%”>
<view:ContactList id=”c_list” width=”30%” height=”100%” select=”displa
yContact()” />
<view:ContactDetails id=”c_details” width=”70%” height=”100%” />
</mx:HDividedBox>
<mx:ControlBar id=”c_controls” width=”100%” height=”37” y=”229”>
<mx:Button id=”addButton” height=”16” label=”add” click=”onClick(
ADD )” x=”0”/>
<mx:Button id=”deleteButton” height=”16” label=”delete”
click=”onClick( DELETE )”/>
<mx:Spacer width=”{ c_details.width + c_list.width – (
deleteButton.x + deleteButton.width + editButton.width + 20 ) }”/>
<mx:Button id=”editButton” height=”16” label=”{ (c_details.edit ) ?
‘save’ : ‘edit’ }”
enabled=”{ c_details.edit || c_list.contact_dg.selectedIndex != -1
}” click=”onClick( EDIT )”/></mx:ControlBar>

11 Handle window closure
TitleWindow has a close button available if showCloseButton is set as true. Enter the code below into the TitleWindow tag and within the mx:Script tags type: private static const CLOSE_WIN:String = ‘closeWin’. This will dispatch a named constant on clicking the close button. We will pick up this event in the ContactManager.

<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:view=”components.*”
layout=”absolute”
title=”AIR Contact Manager”
showCloseButton=”true”
close=”{ dispatchEvent( new Event ( CLOSE_WIN ) ); }”>

12 Listen for close event
To listen out for the ContactWrapper dispatching our closeWin event modify the ContactWrapper tag as below and enter the closeWindow method within mx:Script tags. When the closeWin event is dispatched, the closeWindow method is fired calling the close() method in the NativeWindow class, and in turn closes the application window.

<view:ContactWrapper id=”contactWrapper”
width=”100%” height=”100%” x=”0” y=”0”
closeWin=”closeWindow( event )” />
private function closeWindow( e:Event ):void{
stage.nativeWindow.close();}

13 Transparent backgrounds
Now we have the basic visual framework in place, let’s build our back-end. In the SQLite
folder, create an ActionScript class to extend EventDispatcher named ‘SQLConnector’.
This class will handle asynchronous connections to our SQLite database and dispatch
SQLConnectionEvents for the application to progress and start querying the database.
Enter the code as listed below:

package sqlite{
import flash.data.SQLConnection;
import flash.events.*;
import flash.filesystem.File;
public class SQLConnector extends EventDispatcher{
public static const OPEN:String = ‘open’;
public static const CLOSE:String = ‘close’;
public static const ERROR:String = ‘error’;
private var _connection:SQLConnection;
private var _dbFileName:String;
private var _dbFile:File;
public function SQLConnector( name:String ){
_dbFileName = name;
_dbFile = File.applicationDirectory.resolvePath( _dbFileName );}
public function connect():void{
_connection = new SQLConnection();
_connection.addEventListener( SQLEvent.OPEN, onOpen );
_connection.addEventListener( SQLEvent.CLOSE, onClose );
_connection.addEventListener( SQLErrorEvent.ERROR, onError );
_connection.openAsync( _dbFile );}
public function disconnect():void{
_connection.close();}
public function get connection():SQLConnection{
return _connection;}
private function onOpen( e:SQLEvent ):void{
dispatchEvent( new Event( OPEN ) );}
private function onClose( e:SQLEvent ):void{
dispatchEvent( new Event( CLOSE ) );}
private function onError( e:SQLErrorEvent ):void{
dispatchEvent( new Event( ERROR ) );
}}}

14 Set up connection
Return to the ContactManager and within the initApp() method, create a new instance of the SQLConnector ensuring that the class is imported. Parse in the constructor the named constant that has the database name as a ‘String’ and call the Connect method. Assign listeners for all class-dispatched events: OPEN, CLOSE and ERROR.

import sqlite.SQLConnector;
private static const DATABASE:String = “contacts”;
private function initApp():void
{
sqliteConnector = new SQLConnector( DATABASE );
sqliteConnector.connect();
sqliteConnector.addEventListener( SQLConnector.OPEN, onOpen );
sqliteConnector.addEventListener( SQLConnector.CLOSE, onClose );
sqliteConnector.addEventListener( SQLConnector.ERROR, onError );}
private function onOpen( e:Event ):void
{
}
private function onClose( e:Event ):void{
trace(“disconnection”);
}
private function onError( e:Event ):void{
trace(“connection error”);
}

15 Start querying
In the SQLite folder, create an ActionScript class to extend EventDispatcher named ‘SQLQueries’. This class will handle all the database queries and dispatch results for each query made. This class needs a reference to the SQLConnection, adds, edits and deletes, and has a method to build the table ‘records’ in the database.

package sqlite
{
import events.AllContactsEvent;
import flash.data.*;
import flash.errors.SQLError;
import flash.events.*;
import mx.collections.ArrayCollection;
import vo.ContactVO;
public class SQLQueries extends EventDispatcher{
public static const CONTACTS_ARR:String = ‘contactsArr’;
private static const EDIT:String = ‘edit’;
private static const DELETE:String = ‘delete’;
private var _connection:SQLConnection;
private var _statement:SQLStatement;
private var _data:ArrayCollection;
public function SQLQueries( conn:SQLConnection ){
_connection = conn;
buildTable();}
private function buildTable():void{
var _sql:String = “CREATE TABLE IF NOT EXISTS records ( contactID
INTEGER PRIMARY KEY AUTOINCREMENT, “ +
“firstName TEXT DEFAULT ‘’, “ +
“lastName TEXT DEFAULT ‘’, “ +
“email TEXT DEFAULT ‘’, “ +
“mobileTel TEXT DEFAULT ‘’, “ +
“homeTel TEXT DEFAULT ‘’, “ +
“address TEXT DEFAULT ‘’)”;
execute( _sql, buildTableResult );}
public function getContacts():void{
var _sql:String = “SELECT * FROM records”;
execute( _sql, getContactsResult );
}
private function execute( sql:String, _handler:
Function, params:ContactVO=null, action:String=”” ):void{
try
{
var handler:Function = _handler;
_statement = new SQLStatement();
_statement.sqlConnection = _connection;
_statement.text = sql;
if( params )
{
_statement.clearParameters();
if( action != “” ){
_statement.parameters[“:contactID”] = params.contactID;}
if( action != DELETE ){
_statement.parameters[“:firstName”] = params.firstName;
_statement.parameters[“:lastName”] = params.lastName;
_statement.parameters[“:email”] = params.email;
_statement.parameters[“:mobileTel”] = params.mobileTel;
_statement.parameters[“:homeTel”] = params.homeTel;
_statement.parameters[“:address”] = params.address;}}
_statement.addEventListener( SQLEvent.RESULT, handler );
_statement.execute();
}
catch ( e:SQLError )
{
trace(“Error with SQLStatement execution”);
}}
private function buildTableResult( e:SQLEvent ):void{
getContacts();}
private function getContactsResult( e:SQLEvent ):void{
var contacts:ArrayCollection = new ArrayCollection();
for each ( var c:Object in _statement.getResult().data ){
var contact:ContactVO = new ContactVO();
contact.contactID = c.contactID;
contact.firstName = c.firstName;
contact.lastName = c.lastName;
contact.email = c.email;
contact.mobileTel = c.mobileTel;
contact.homeTel = c.homeTel;
contact.address = c.address;
contacts.addItem( contact );}
var event:AllContactsEvent = new AllContactsEvent( contacts,
CONTACTS_ARR, true );
dispatchEvent( event );}}}

The code marathon continues in Part 2 – coming soon