Table of contents

• Part 1: Creating a basic mobile application
• Part 2: Using a Mobile Item Renderer
• Part 3: Navigating Between Views
• Part 4: Creating an Action Bar
• Part 5: Integrating with the Device Capabilities
• Part 6: Using the Local SQLite Database
• Part 7: Navigating the Org Chart

• Search for employees
• View employee details
• Navigate up and down the org chart
• Call, text, and email employees

 

Part 1: Creating a basic mobile application

 

Step 1: Create the Flex Mobile Project

1. Select File>New>Flex Mobile Project in the Flash Builder menu.
2. On the Project Location tab, specify EmployeeDirectory as the project name and click Next (see Figure 1).

3. On the Mobile Settings tab, keep the default values and click Finish (see Figure 2).

4. Copy the assets directory from the FlexMobile60Minutes folder you just unzipped and paste it under the src directory of the EmployeeDirectory project.

 

Step 2: Code the application

1. Open EmployeeDirectory.mxml:
   • Notice the root node: ViewNavigatorApplication
   • Notice the firstView attribute of VieNavigatorApplication referencing EmployeeDirectoryHomeView
2. Open EmployeeDirectoryHomeView.mxml and implement the View as follows:

• Make sure you implement this code in EmployeeDirectoryHomeView.mxml, not EmployeeDirectory.mxml.
• Don’t forget to add the creationComplete event to the view.

 

Step 3: Run the application

1. Right-click anywhere in EmployeeDirectory.mxml and select Run AS>Mobile Application
2. Select On desktop and choose a device to simulate. For example, Apple iPhone 4 (see Figure 3).

3. Click Run and test the application. The application should look like this (see Figure 4):

 

Part 2: Using a Mobile Item Renderer

 

Steps

1. Open EmployeeDirectoryHomeView.mxml and define an inline itemRenderer for the List. The item renderer displays the first name and the last name of the employee on the first line and the tile of the employee on the second line.

2. Run and test the application. The application should look like this (see Figure 5):

 

Part 3: Navigating Between Views

 

Step 1: Creating the EmployeeDetails View

1. Right-click the views folder in the EmployeeDirectory project and select New>MXML Component. Specify EmployeeDetails as the component name and click Finish (see Figure 6).

2. Implement EmployeeDetails as follows:

 

Step 2: Opening the Details View

1. Open EmployeeDirectoryHomeView.mxml and provide the List with a change handler used to open the details view for the selected employee:

 

Step 3: Run the Application

1. Select an employee in the list: an employee details view should appear for the selected employee (see Figure 7).

 

Part 4: Creating an Action Bar

• You provide all the views of the application with a Home button that the user can click to go back to the first view of the application.
• You provide the EmployeeDirectoryHomeView’s Action Bar with search controls to search for employees.

 

Step 1: Creating a Home Button

1. Open EmployeeDirectory.mxml and define the following navigation bar content (just before the closing </s:ViewNavigatorApplication> tag):
   

2. Run and test the application. Notice that because the navigation control is defined at the application level, it is shared by all the views of the application (see Figure 8).

 

Step 2: Creating a Search Bar

1. Open EmployeeDirectoryHomeView.mxml
2. Add the following titleContent and actionContent (just after the closing </fx:Declarations> tag) to create a search bar:

3. Since we now send the request for data when the user clicks the Search button, remove the creationComplete handler defined on the View.
4. Run and test the application.
   Note that both the EmployeeDetails and the EmployeeDirectoryHome views inherit the Home button defined in EmployeeDirectory.mxml. Although it is generally a good idea for all the views of the application to have a Home button, it is superfluous (and potentially confusing) for the Home view of the application to have a Home button (see Figure 9).

    

 

Step 3: Removing the Home Button in EmployeeDirectoryHome

1. Open EmployeeDirectoryHomeView.mxml and add an empty navigatonContent tag just before the <s:titleContent> tag:

2. Run and test the application (see Figure 10).

 

Step 4: Persisting the Search Results

1. Add a result event handler to the HTTPService in which you assign the lastResult of the HTTP service invocation to the data attribute of the view.

2. Bind the List to data attribute of the view.

3. Run and test the application.

 

Part 5: Integrating with the Device Capabilities

 

Step 1: Display a List of Actions

1. In EmployeeDetails.mxml, add a <fx:Script> block just before the <s:HGoup> opening tag.

2. Inside the new <fx:Script> block, define a bindable ArrayCollection to hold the list of actions available for the selected employee:

3. Define the following embedded icons. You’ll use them in the action list itemRenderer.

4. Override the setter for the “data” attribute of the view to populate the action list with the actions available for the employee based on the available data. For example, an “SMS” action should only be presented to the user if the mobile phone number is available.

5. Display the list of actions: Below the closing </s:HGroup> tag, add a List component bound to the actions list.

6. Run and test the application.
   When you select an employee in the list, you should see the list of available actions for that employee (see Figure 11). The actions don’t work yet. You make them work in the next step.

    

 

Step 2: Triggering the Actions

1. Add a change handler to the List:

2. Implement list_changeHandler as follows:

3. Run and test the application.

 

Part 6: Using the Local SQLite Database

 

Steps

1. Copy the dao directory from the FlexMobile60Minutes folder and paste it under the src directory of the EmployeeDirectory project.
2. Explore the source code of the EmployeeDAO and Employee classes:
   
   • The EmployeeDAO class provides a basic implementation of the Data Access Object (DAO) pattern: it encapsulates the data access logic to create, update and delete employees. If the employee table doesn’t exist in the database, EmployeeDAO also includes some logic to create it and populate it with sample data.
   • Employee is a basic value object that also provides some lazy loading logic to load the employee’s manager and direct reports as needed.
3. In EmployeeDirectoryHomeView.mxml, replace the HTTPService with an instance of EmployeeDAO

4. Modify the search button click event handler accordingly. 

5. Open EmployeeDirectory-app.xml, and scroll down to the end of the document. In the <android><manifestAdditions> section, uncomment the following permission:

6. Run and test the application

 

Part 7: Navigating the Org Chart

 

Step 1: Create the DirectReports View

1. Right-click the views folder in the EmployeeDirectory project and select New>MXML Component. Specify DirectReports as the component name and click Finish (see Figure 12).

2. Implement DirectReports.mxml as follows:

 

Step 2: Add the Actions to Navigate the Org Chart

1. In EmployeeDetails.mxml, add two possible actions to the set data function:

2. In the List change handler, add two case statements to trigger the corresponding actions:

 

Step 3: Run the application.

1. Select an employee who has a manager (see Figure 13) and click the “View manager” action (see Figure 14).

2. Select an employee who has a direct reports (see Figure 14) and click the “View direct reports” action (see Figure 15).

 

Where to go from here

• Introducing Adobe Flex 4.5 SDK
• What's new in Flash Builder 4.5
• Flex Test Drive for Mobile
• Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5
• Flex 4.5 SDK sample applications
• Flex Developer Center
• Mobile and Devices Developer Center

• Using Flash Builder 4.5 to package applications for Google Android devices
• Using Flash Builder 4.5 to package applications for Apple iOS
• Using Flash Builder 4.5 to package applications for BlackBerry Tablet OS devices