Flex Test Drive for Mobile: Add application functionality

Video | Code | Tutorial | Links

Email, text, and call

Download the complete sample code (ZIP, 14.8 MB)

Code

DetailView.mxml

Tutorial

In Module 1, you retrieved data from a database and displayed it in a mobile application. In this module, you add application functionality. In this tutorial, you modify the DetailView, adding the ability to call employees and send them emails or texts. In the next tutorials, you modify the database: adding, updating, and deleting data.

Note: In the previous tutorial, Run on a device, you changed the project server settings (step 2) and the photo URLs (step 4) to reference your publicly available server. You should continue to use these settings so you can test sending emails and texts and making phone calls from the device in this tutorial.

Step 1: Add an email icon next to the email label.

In DetailView.mxml, place the Email Label component inside a Group container that has a height of 100%. Add an Image component to the Group and set its id to emailIcon , its right constraint to 5, its top constraint to 0, and its source property to a multiresolution bitmap using embedded assets, email160.jpg, email240.jpg, email320.jpg.

Step 2: Navigate to a mail URL when the email icon is clicked.

Generate a click handler for the emailIcon image. Inside the handler, call the navigateToURL() method and pass to it a new instance of the URLRequest object with a url property set to the string "" concatenated with the employee's email.

You use the navigateToURL() function in the flash.net package to make a request to the parent container, in this case, the device's operating system. In web and desktop applications, this function is typically used to open or replace browser windows (by passing a URL value). It can also be used to send emails (by passing a mailto link) in which case a mail program is opened to send an email. You can use the same syntax to send an email from a mobile application.

The navigateToURL() function has one required argument, an instance of the URLRequest class (see Figure 2).

The URLRequest constructor has one optional argument, a url string(see Figure 3).

Pass to the constructor a mailTo string with the selected employee's email. Your click handler for the email icon should appear as shown here:

Step 3: Send emails from the desktop simulator and your device.

Run the application in the desktop simulator, select an employee, and click the email icon. Repeat using your device.

On the desktop, you should see your mail program open (see Figure 4).

Run the application on your device, select an employee, and click the email icon (see Figure 5). Your email program should open for sending an email to the selected employee (see Figure 6).

Click the device's Back button to return to the application.

Step 4: Add phone and text messages icons next to the phone fields.

Place the Cell Phone Label component inside a Group container that has a height of 100%. Inside the Group after the Label, add an HGroup with a right constraint of 5. Add two Image controls to the HGroup. For the first, set its id to phoneIcon and its source property to a multiresolution bitmap using embedded assets, phone160.jpg, phone240.jpg, phone320.jpg. For the second, set its id to textIcon and its source property to a multiresolution bitmap using embedded assets, text160.jpg, text240.jpg, text320.jpg. Repeat for the Office Phone Label giving the images the id's textIcon2 and phoneIcon2 (see Figure 7).

Your code should appear as shown here:

Step 5: Navigate to sms URLs when the text message icons are clicked.

Generate a click handler for the textIcon image. Inside the handler, call the navigateToURL() method and pass to it a new instance of the URLRequest object with a url property set to the string "sms:" concatenated with the employee's cell phone number.

Your click handlers for the text message icons should appear as shown here:

Step 8: Send text messages from your device.

Run the application in the desktop simulator, select an employee, and click the text message icon. Repeat using your device.

On the desktop, you should see a message that the sms protocol is not associated with any program (unless yours is set up to!) (see Figure 8).

Run the application on your device, select an employee, and click the text message icon (see Figure 9). Your text message program should open for sending a text message to the selected employee (see Figure 10).

Click the device's Back button to return to the application.

Step 9: Navigate to tel URL's when the phone icons are clicked.

Generate a click handler for the phoneIcon and phoneIcon2 images. Inside the handlers, call the navigateToURL() method and pass to it a new instance of the URLRequest object with a url property set to the string "tel:" concatenated with the employee's phone number.

Your click handlers for the phone icons should appear as shown here:

Step 10: Make calls from your device.

Run the application on your device, select an employee, and click phone.

Your phone program should open for calling the selected employee (see Figure 11).

Click the device's Back button to return to the application.

In this tutorial, you learned to make calls and send emails and text messages from your application. In the next tutorial, you add new employees to the database from the application.

Learn more

Refer to the following resources to learn more about this topic:

ActionScript 3 Reference

• navigateToURL

Mobile and Devices Developer Center