Building Adobe AIR application with BlackBerry PlayBook Tablet
October 24, 2011 2 Comments
Adobe Flash Builder 4.5 is an interactive tool for developing Flex applications for BlackBerry Device, Tablets, Android , i-OS based i-Phone & i-pads.
Lets start of Building an Healthcare – Hospital application that runs in BlackBerry Tablet, i-Phone & Android devices.
Start with Adobe Flash Builder 4.5 -> New-> Flex Mobile Project -> Name of Project ->Select Platform -> “BlackBerry Tablet OS”, “Google Android” & “Apple i-OS”.
Now Specify the Project Settings. Select ProjectNameHomeView.mxml & add the following code after <fx:Declarations>
VGroup
width=”100%” height=”100%” verticalAlign=”top” horizontalAlign=”center“>
<s:Label text=”Departments” fontStyle=”normal“/>
<s:Button x=”104” width=”392” label=”Paediatrics” click=”navigator.pushView(DoctorDirectory)”
styleName=”
next“/>
<s:Button x=”104” width=”392” label=”Gynaecology” click=”navigator.pushView(DoctorDirectory)”
styleName=”
next“/>
<s:Button x=”100” width=”400” label=”Psychiatry” click=”navigator.pushView(DoctorDirectory)”
styleName=”
next“/>
<s:Button x=”101” width=”399” label=”General Medicine“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button label=”Echocardiography” click=”navigator.pushView(DoctorDirectory)” styleName=”next“/>
<s:Button label=”Eye(Opthamology)” click=”navigator.pushView(DoctorDirectory)” styleName=”next“/>
<s:Button label=”Dermatology(Skin)” click=”navigator.pushView(DoctorDirectory)” styleName=”next“/>
<s:Button x=”96” width=”409” label=”General Surgery“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”LaproScopic Surgery“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Reconstructive“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”ENT“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Gynaecological Surgery“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Homeopathy“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Gastroenterology“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Haemotology“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Neuro Surgery“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Audiometry Tympanometry“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Oral Mazillofacial Surgery“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Cardiology“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Urology“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Neprology“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Orthopaedics“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Oncology“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Endocrino Diabetology“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
<s:Button x=”96” width=”409” label=”Acupuncture“
click=”navigator.pushView(DoctorDirectory)” styleName=”
next“/>
</s:VGroup>
Next , specify the List View screen for Flex in Blackberry Tab, Android, i-Phone devices.
<?xml version=”1.0″ encoding=”utf-8″?>
<s:View
xmlns:fx=”http://ns.adobe.com/mxml/2009”
xmlns:s=”
library://ns.adobe.com/flex/spark” title=”DoctorDirectory“
creationComplete=”srv.send()”
>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
<s:HTTPService id=”srv” url=”assets/employees.xml” result=”data=srv.lastResult.list.employee “/>
</fx:Declarations>
<s:titleContent>
<s:TextInput id=”key” width=”100%“/>
</s:titleContent>
<s:actionContent>
<s:Button icon=”@Embed(‘assets/search.png’)” click=”srv.send()”/>
</s:actionContent>
<s:List id=”list” top=”0” bottom=”0” left=”0” right=”0”
dataProvider=”
{data}“
change=”navigator.pushView(DoctorDetails,list.selectedItem)”
>
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer
label=”
{data.firstName} {data.lastName}“
messageField=”
title” />
</fx:Component>
</s:itemRenderer>
</s:List>
</s:View>
Already , employee.xml is used in assets/employee.xml folder as data provider from XML database.
Next , implement the Device functionality screen for Call, SMS options.
<?xml version=”1.0″ encoding=”utf-8″?>
<s:View
xmlns:fx=”http://ns.adobe.com/mxml/2009”
xmlns:s=”
library://ns.adobe.com/flex/spark” title=”DoctorDetails“>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[
Bindable]
protectedvar actions:ArrayCollection;
[
Embed(source=“assets/sms.png”)]
privatevar smsIcon:Class;
[
Embed(source=“assets/phone.png”)]
privatevar phoneIcon:Class;
[
Embed(source=“assets/mail.png”)]
privatevar mailIcon:Class;
overridepublicfunctionset data(value:Object):void
{
super.data = value;
actions =
new ArrayCollection();
if(data.officePhone)
{
actions.addItem({
type:
“tel”,
name:
“Call Office”,
icon:phoneIcon });
}
if(data.cellPhone)
{
actions.addItem({type:
“tel”, name: “Call mobile”,
details: data.cellPhone, icon:phoneIcon});
actions.addItem({type:
“sms”,name: “SMS”,
details:data.cellPhone,icon:smsIcon});
}
if(data.email)
{
actions.addItem({type:
“mailto”, name: “Email”,
details: data.email,icon:mailIcon});
}
}
protectedfunction list_changeHandler(event:IndexChangeEvent):void
{
var action:Object = list.selectedItem;
switch(action.type)
{
case“tel”:
navigateToURL(
new URLRequest(“tel:” +action.details));
break;
case“sms”:
navigateToURL(
new URLRequest(“sms:”+action.details));
break;
case“mailto”:
navigateToURL(
new URLRequest(“mailto:”+action.details));
break;
}
}
]]>
</fx:Script>
<s:HGroup verticalAlign=”middle” gap=”12“>
<!–<s:Image source=”assets/pics/{data.picture}”/> –>
<s:VGroup>
<s:Label text=”{data.firstName} {data.lastName}“/>
<s:Label text=”{data.title}“/>
<!–<s:Label text=”{data.department}”/> –>
<s:Label text=”{data.city}“/>
</s:VGroup>
</s:HGroup>
<s:List id=”list” dataProvider=”{actions}”
top=”
160” left=”0” right=”0” bottom=”0“
change=”list_changeHandler(event)”
>
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer
paddingTop=”
8” paddingBottom=”8” verticalGap=”6“
labelField=”
name”
messageField=”
details”
decorator=”
{data.icon}“/>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:View>
Excellent, Now we are done with our apps, Next step is to test in different devices. I have tried it with BlackBerry PlayBook Tablet, Google Android Galaxy, Motorola Droid Pro, Google Nexus one.
ScreenShots for BlackBerry Tablet PlayBook:
ScreenShots for Google Android Samsung Galaxy Tab:
Anindita's Blog 
You must be logged in to post a comment.