Building Adobe AIR application with BlackBerry PlayBook Tablet


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:

This slideshow requires JavaScript.

ScreenShots for Google Android Samsung Galaxy Tab:

This slideshow requires JavaScript.

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

2 Responses to Building Adobe AIR application with BlackBerry PlayBook Tablet

  1. Pingback: Your Questions About Beat Machine Beats | Beat Maker Software SonicProducer

  2. Pingback: Elektrische Zahnbuerste

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: