Adobe is changing the world through digital experiences. Our creative, marketing and document solutions empower everyone — from emerging artists to global brands — to bring digital creations to life and deliver them to the right person
at the right moment for the best results.

Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.

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 itsidtoemailIcon, its right constraint to 5, its top constraint to 0, and itssourceproperty 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 thenavigateToURL()method and pass to it a new instance of the URLRequest object with aurlproperty 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).

Figure 2. View the arguments for the navigateToURL() function.

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

Figure 3. View the arguments for the URLRequest constructor.

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

Figure 4. Send an email from the application using the desktop simulator.

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

Figure 5. See the email icon on the device.

Figure 6. Send an email from the application using your device.

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 itsidtophoneIconand itssourceproperty to a multiresolution bitmap using embedded assets, phone160.jpg, phone240.jpg, phone320.jpg. For the second, set itsidtotextIconand itssourceproperty 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).

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 thenavigateToURL()method and pass to it a new instance of the URLRequest object with aurlproperty 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).

Figure 8. Try to send a text from the application using the desktop simulator.

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.

Figure 9. See the text message and phone icons on your device.

Figure 10. Send a text message from the application using your device.

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

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.

Figure 11. Make a call from the application using your device.

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.

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.

Figure 12: Hide phone and text icons on tablets.

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.