by Adobe
Adobe logo

Created

20 June 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)); } protected function isTablet():Boolean { var screenDiagonal:Number=Math.sqrt(Math.pow(Capabilities.screenResolutionX/Capabilities.screenDPI,2) + Math.pow(Capabilities.screenResolutionY/Capabilities.screenDPI,2)); return (screenDiagonal > 6); } ]]> </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)" visible="{!isTablet()}"> <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)" visible="{!isTablet()}"> <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)" visible="{!isTablet()}"> <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)" visible="{!isTablet()}"> <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:HGroup width="100%" paddingRight="5"> <s:Label fontWeight="bold" paddingTop="10" text="Email"/> <s:Spacer width="100%" includeInLayout="{!isTablet()}"/> <s:Image id="emailIcon" 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:HGroup> <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.
Your code should appear as shown here:
 
<s:Group width="100%"> <s:Label fontWeight="bold" paddingTop="10" text="Email"/> <s:Image id="emailIcon" right="5" top="0"> <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>

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

 
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 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.
 
Make a call from the application using your device.
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.
 
protected function isTablet():Boolean { var screenDiagonal:Number=Math.sqrt(Math.pow(Capabilities.screenResolutionX/Capabilities.screenDPI,2) + Math.pow(Capabilities.screenResolutionY/Capabilities.screenDPI,2)); return (screenDiagonal > 6); }
Here is the code for one of the icons:
 
<s:Image id="phoneIcon" click="phoneIcon_clickHandler(event)" visible="{!isTablet()}" .../>
Here is the code for the group containing the email icon:
 
<s:HGroup width="100%" paddingRight="5"> <s:Label fontWeight="bold" paddingTop="10" text="Email"/> <s:Spacer width="100%" includeInLayout="{!isTablet()}"/> <s:Image id="emailIcon" click="emailIcon_clickHandler(event)" .../> </s:HGroup>
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.
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.
 

 
Learn more

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