Chapter 08_Building a Cross Platform Compatible Mobile App Using Flex

7/31/2019 Chapter 08_Building a Cross Platform Compatible Mobile App Using Flex

1/13

97

Chapter #8

Buildinga cross

platformcompatiBle

moBile appusing flexYou no longer have to worry about

specications and compatibility,

whether youre developing or desktopenvironments or or mobile devices.

A

dobe Flash Builder 4.5, as you already know, makes it very

easy or you to develop and compile mobile apps or most

popular mobile platorms by using the same workfow. You can

also build desktop AIR or web applications discussed earlier.With Adobes latest update or Flex 4.5 and Flash Builder 4.5, you can also

develop mobile applications or the BlackBerry Tablet OS and iOS devices

as well! In this chapter we will basically be walking through the steps to

be ollowed in Flash Builder 4.5 to build a simple mobile Flex project that

gives you an app that can work both on the desktop and a mobile device.

We will build a basic Hello, World! app or your device. This applica-


2/13

98 Building a cross platform compatiBle moBile app using flex

tion will also have a styled button in the bottom hal o the screen which

you can tap to switch to another screen. The goal here is to show how the

same workfow can be used to package the app or dierent platorms. Make

sure you upgrade your installed Adobe Flash Player and Flash builder tothe latest version.

mb jCreating a new Flex mobile project in Flash Builder 4.5 is simple and has

already been discussed in the previous chapters. None the less to sum-

marize again,

1. Go to File > New > Flex Mobile Project on the main toolbar to open theproject wizard.

2. Set the Project name as HelloWorld in the Project Location screen o the

dialogue box

3. Let all other settings be with the deault options. Then click Next.

4. You will get the Mobile Settings screen o this wizard soon ater in Flash

Builder 4.5, just make sure that the Google Android option has been

checked as the target platorm. In the latest update, Flash Builder 4.5 also

Creating a

new project

and setting

the Flex

project loca-

tion


3/13

99Building a cross platform compatiBle moBile app using flex

has the option or BlackBerry Tablet OS and Apple iOS or deploying

applications. You can choose between three dierent app design styles;

View-Based Application is what we will be working with or now.

5. This particular step is optional. With more complex applications, youcan select the permissions tab to check and set the permissions or the

app to have on the device during runtime. You can let the Internet option

be checked, since you would ideally want the application to be able to

The mobile

settings

or the Flex

Project


4/13


connect to the Internet.

6. Now simply click Next to move orward to the Server Settings part o

the project wizard. You can choose to leave the deault settings.

7. Flash Builder will now by itsel create a new project and will automati-cally update all the path settings. It will now display the Build Paths

screen, here you can add libraries and source paths that you might be

using in your application. You can choose to change a ew flenames

and parameters i required. In this case we will only be changing theApplication ID, a unique string necessary to identiy your application.

In case you are building a test project, any name will work but or an

actual mobile application it is a good practice to use something which

is atleast close to a validated domain name. For example, something

like com.mydomain.MyApp is a viable choice. Here MyApp will be

Defning the permission or the mobile app


5/13


the actual proposed name o application. In this chapter, we will be

using com.mydomain.HelloWorld as the Application ID. Now you can

click Finish to create the project.

At this juncture Flash Builder will load the entire project and launch

the code editor or you. It will show your new Flex mobile application ina code authoring environment as a complete project with individual les.

When you start working on a new Flex mobile project, on launching

the project Flash Builder will automatically generate a ew fles or the

project. Here ProjectName is the name o your project and the les will

be named accordingly,

ProjectName.mxml An application le. Usually you will not be adding

content to the application le by yoursel.ProjectNameHomeView.mxml - The initial screen fle. Basically

the view o the app. Flash Builder will place this le in Views

Your app should currently be a simple empty container, except or the

inormation you will see as meta data and or the deault layout. I not already

visible keep the HelloWorldHomeView.mxml tab visible inside Flash Builder

by double clicking the HelloWorldHomeView.mxml view in the Package

Choosing the server technology that will be used by the mobile app


6/13


Explorer which is a window on the let side o the project workspace. Insert

a ew empty lines above the closing tag. Enter the code,

ouseEvent):void

{

navigator.pushView(MyNewView);

}

]]>

Adding source paths to

fles and new libraries

that will be used by the

mobile app


7/13


Click on File > Save to save this le. So what does this code do? Inside the

VGroup which is a layout container that sorts and displays the dierent ele-

ments in a vertical fow, the code will create a text eld that displays Hello,

World! and below it a Continue button will be visible. Just below this lies a

script that will slide the HelloWorldHomeView screen to the side makingway or the second screen called MyNewView when the button is tapped.

Note that when you type out the code, the code hinting eature in built

into Flash Builder is a very important eature that helps you in coding

properly and speeding up the workfow.

Now that you have the core code o the application done, you can test

it. Also keep in mind that the new MyNewView screen that is supposed to

show when you click the continue button does not yet exist, so let us createit. From the main toolbar, choose File > New > MXML Component. This will

open up a New MXML Component dialog box. Make sure that HelloWorld/

A mobile project in Flex ready to be coded using Flash Builder


8/13


src is the source older. In case it is not just click on Browse to nd and select

the HelloWorld project. In the Name eld, type in the name o the screen

as it is reerenced in the script that does the sliding: MyNewView. Click onFinish and you are done. The new le is created.

Back in the main project workspace, you can now click on the

MyNewView tab to make it visible or code authoring. You can now put

any text and another button into this view. Insert some blank lines above

the closing tag. Now enter the ollowing code,

protected function button1 _ clickHandler(event:MouseEvent):void

{

navigator.popToFirstView();

}

]]>

The code to show the Hello, World! text and the button


9/13


Choose File > Save to save the changes to your fle. This will create a

new label that says Success! on the screen and below it will be the Back

button. The script below pops you back to HelloWorldHomeView when

the button is tapped.

t h h kAnother great eature o Flex is that you do not need a mobile device to test

your application.

To test the application make sure the primary MXML le o the project

is open and active in the code editor. Then click on the run button present

on the main toolbar.

The new MyNewView view or a new screen


10/13


Next you need to make sure that the platorm specied is set to Google

Android. Now or the Launch method, you can choose On Desktop and

then select the device you would like to simulate. Click on Run in the dialogbox ater you have selected the settings launch the application on your

desktop within an emulator. ADL, the program launcher runs and shows

a window that displays the HomeView screen with Hello, World! and a

clickable Continue button below it. On clicking it the screen will slide to the

MyNewView screen which shows Success! and the Back button below it.

You can click on the Back button or simply press Control-B (Command-Bon a Mac) to go back to the previous screen. Ater testing the app on your

desktop select File > Save to save your Flash Builder project.

t h hy vTesting your app in a simulated environment is a cheap and eective way o

To run the code click the Run button on the main toolbar

Printing Success! on the new screen and having the Back button on the next screen


11/13


seeing how it looks but it is not a ull fedged substitute or actually testing

on a physical device. To debug using a real device, lets try using an Android

device connected to the computer over USB.Enable the USB debugging mode on your device. In Android 2.2, you

can do this through the the system settings application. Tap Applications

> Development, and then check the USB Debugging option. Confrm by

clicking OK. Plug in your device to the computer via the USB cable and

mount it as a disk drive i asked. In case you dont see your device in the

dialog box that asks you to choose your device, click on the I do not see

Chose the device in which you want to test the app by emulating it on your desktop

The application runs in a

window which mimics the

mobile device. The initialscreen is on the let and the

second on the right.


12/13


my connected device in the list option. This will take you to the Google

Android devices page with online support.

Since you already ran a test conguration o HelloWorld on the desktop

in the previous section, now just click on the arrow next to the Run buttonin the Flash Builder workspace and select Run Congurations or the Run

Congurations dialog box.

In the Run Congurations dialog box make sure that the Project eld

says HelloWorld and the application le should be set to src/HelloWorld.

mxml. Choose Google Android as the target platorm, and launch method

should be On Device. Click Run to make Flash Builder transer the app to

your device. Your device will respond and your app will launch automatically.

So nally you have been able to successully actually build and run a

The arrow button next

to the Run button on themain toolbar and select

Run Confgurations

The settings

or the app

to run on a

mobile device


13/13


real world application on a smart phone. The application was built only

using the Flex mobile environment and will the new updates rom Adobe,soon you will be able to deploy it on Blackberry Tablet OS and iOS as well.

pk h Ater all the testing and debugging, when you are sure that your application

runs on a mobile device, you can release the nal build o your application,

or the particular device and release it or launch at the app store. All o this

can be done directly through Flash Builder. When you want to package theapp, simply open the project in Flash Builder and select Project > Export

Release Build to package the app. Within the Export Release Build dialog

box, ensure that your project is visible in the Project selector while the mxml

le should be open in the Application selector. Now connect your device

to your computer and speciy the base lename or the Android Package

le (APK le). You may leave the deault name o the project i you wish

Ensure that Signed packages or each target platorm has beenchecked. Click on Next to start exporting and building the package. Flash

Builder will now ask you to select a digital signature to sign the applica-

tion. This next step is optional. Click on the Package Contents tab to see

the dierent les that are being included into the release. There are a ew

necessary fles that your app will need to run, and these usually vary

rom app to app. But Flash Builder will determine them or you. Click

Finish and you are done.Flash Builder now will have created the release build (APK in case o

Android) le or you. This le can be deployed and installed it on the par-

ticular device. You can now publish and submit this as a mobile app to an

online store or market place.

In case you need an upgrade to the latest version o Adobe AIR on your device, you will

be prompted or it

Date post:	05-Apr-2018
Category:	Documents
Upload:	lacto17
View:	221 times
Download:	0 times

Chapter 08_Building a Cross Platform Compatible Mobile App Using Flex

Documents