by Adobe
Adobe logo

Created

3 May 2011

Email, text, and call

 
 

Code

DetailView.mxml
 
<?xml version="1.0" encoding="utf-8"?> <s:View …> <fx:Script> <![CDATA[ (…) import flash.net.navigateToURL; protected function emailIcon_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("mailto:"+getEmployeesByIDResult.lastResult.email)); } protected function textIcon_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("sms:"+getEmployeesByIDResult.lastResult.cellphone)); } protected function textIcon2_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("sms:"+getEmployeesByIDResult.lastResult.officephone)); } protected function phoneIcon_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("tel:"+getEmployeesByIDResult.lastResult.cellphone)); } protected function phoneIcon2_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("tel:"+getEmployeesByIDResult.lastResult.officephone)); } ]]> </fx:Script> (…) <s:Scroller height="100%" width="100%"> <s:VGroup height="100%" width="100%" gap="10" paddingLeft="120"> <s:Label fontWeight="bold" paddingTop="10" text="Title"/> <s:Label text="{getEmployeesByIDResult.lastResult.title}"/> <s:Group width="100%"> <s:Label fontWeight="bold" paddingTop="10" text="Cell Phone"/> <s:HGroup right="5"> <s:Image id="phoneIcon" click="phoneIcon_clickHandler(event)"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/phone160.png')" source240dpi="@Embed('assets/phone240.png')" source320dpi="@Embed('assets/phone320.png')"/> </s:source> </s:Image> <s:Image id="textIcon" click="textIcon_clickHandler(event)"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/text160.png')" source240dpi="@Embed('assets/text240.png')" source320dpi="@Embed('assets/text320.png')"/> </s:source> </s:Image> </s:HGroup> </s:Group> <s:Label text="{getEmployeesByIDResult.lastResult.cellphone}"/> <s:Group width="100%"> <s:Label fontWeight="bold" paddingTop="10" text="Office Phone"/> <s:HGroup right="5"> <s:Image id="phoneIcon2" click="phoneIcon2_clickHandler(event)"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/phone160.png')" source240dpi="@Embed('assets/phone240.png')" source320dpi="@Embed('assets/phone320.png')"/> </s:source> </s:Image> <s:Image id="textIcon2" click="textIcon2_clickHandler(event)"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/text160.png')" source240dpi="@Embed('assets/text240.png')" source320dpi="@Embed('assets/text320.png')"/> </s:source> </s:Image> </s:HGroup> </s:Group> <s:Label text="{getEmployeesByIDResult.lastResult.officephone}"/> <s:Group width="100%"> <s:Label fontWeight="bold" paddingTop="10" text="Email"/> <s:Image id="emailIcon" right="5" top="0" click="emailIcon_clickHandler(event)"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/email160.png')" source240dpi="@Embed('assets/email240.png')" source320dpi="@Embed('assets/email320.png')"/> </s:source> </s:Image> </s:Group> <s:Label text="{getEmployeesByIDResult.lastResult.email}"/> <s:Label fontWeight="bold" paddingTop="10" text="Office"/> <s:Label text="{getEmployeesByIDResult.lastResult.office}"/> </s:VGroup> </s:Scroller> </s:View>

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.
 
Add an email icon.
Figure 1. Add an email icon.

 
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).
 
View the arguments for the navigateToURL() function.
Figure 2. View the arguments for the navigateToURL() function.
The URLRequest constructor has one optional argument, a url string(see Figure 3).
 
View the arguments for the URLRequest constructor.
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:
 
protected function emailIcon_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("mailto:"+getEmployeesByIDResult.lastResult.email)); }

 
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).
 
Send an email from the application using the desktop simulator.
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).
 
See the email icon on the device.
Figure 5. See the email icon on the device.
Send an email from the application using your device.
Figure 6. Send an email from the application using your device.
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).
 
Add phone and text icons.
Figure 7. Add phone and text icons.
Your code should appear as shown here:
 
<s:Group width="100%"> <s:Label fontWeight="bold" paddingTop="10" text="Cell Phone"/> <s:HGroup right="5"> <s:Image id="phoneIcon"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/phone160.png')" source240dpi="@Embed('assets/phone240.png')" source320dpi="@Embed('assets/phone320.png')"/> </s:source> </s:Image> <s:Image id="textIcon"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/text160.png')" source240dpi="@Embed('assets/text240.png')" source320dpi="@Embed('assets/text320.png')"/> </s:source> </s:Image> </s:HGroup> </s:Group> <s:Label text="{getEmployeesByIDResult.lastResult.cellphone}"/> <s:Group width="100%"> <s:Label fontWeight="bold" paddingTop="10" text="Office Phone"/> <s:HGroup right="5"> <s:Image id="phoneIcon2"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/phone160.png')" source240dpi="@Embed('assets/phone240.png')" source320dpi="@Embed('assets/phone320.png')"/> </s:source> </s:Image> <s:Image id="textIcon2"> <s:source> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/text160.png')" source240dpi="@Embed('assets/text240.png')" source320dpi="@Embed('assets/text320.png')"/> </s:source> </s:Image> </s:HGroup> </s:Group> <s:Label text="{getEmployeesByIDResult.lastResult.officephone}"/>

 
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:
 
protected function textIcon_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("sms:"+getEmployeesByIDResult.lastResult.cellphone)); } protected function textIcon2_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("sms:"+getEmployeesByIDResult.lastResult.officephone)); }

 
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).
 
Try to send a text from the application using the desktop simulator.
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). Your text message program should open for sending a text message to the selected employee (see Figure 10).
 
See the text message and phone icons on your device.
Figure 9. See the text message and phone icons on your device.
Send a text message from the application using your device.
Figure 10. Send a text message from the application using your device.
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:
 
protected function phoneIcon_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("tel:"+getEmployeesByIDResult.lastResult.cellphone)); } protected function phoneIcon2_clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("tel:"+getEmployeesByIDResult.lastResult.officephone)); }

 
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).
 
Make a call from the application using your device.
Figure 11. Make a call from the application using your device.
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