Flex Test Drive for Mobile: Add application functionality

Video | Code | Tutorial | Links

Email, text, and call

Download the completed tutorial project (ZIP, 19.6 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.

Your code should appear as shown here:

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).

On Google Android and Blackberry Tablet OS devices, click the device's Back button to return to the application. On Apple iOS devices, double-click the Home button and press the application's icon to return to it.

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). If the device has text capabilities, the text message program should open for sending a text message to the selected employee (see Figure 10). Otherwise, nothing happens.

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 the phone icon.

If the device has phone capabilities, the phone program should open for calling the selected employee (see Figure 11). Otherwise, nothing happens.

Step 11: Hide the phone and text icons for tablets.

Add the isTablet() function included below to the Script block. Bind the visible property of the four phone and text icons to the opposite of the value returned from the function. Change the Group containing the email icon to an HGroup with a paddingRight of 5 and add a Spacer component between the Label and Image controls; set its width to 100% and bind its includeInLayout property to the opposite of the value returned from the isTablet() function.

Here is the isTablet() function to add to your application. It calculates the screen diagonal of the device and returns true if the screen diagonal is greater than 6 inches, which most devices without phone capabilities are.

Here is the code for one of the icons:

Here is the code for the group containing the email icon:

You are changing the layout so the email icon will not appear by itself way off to the right on larger devices.

Run the application on your device and select an employee. You should no longer see the phone and text icons on the larger devices (see Figure 12).

Note: Device values are not returned when using the Capabilities class in the desktop emulator so isTablet() always returns true. To test this functionality with the emulator, temporarily modify the isTablet() function to return false.

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