Ahmedabad Flash Platform User Group

Mobile apps development using

Adobe Flash Builder 4.5

www.bharatria.wordpress.comBharat Patel

Objective

- Overview of Flash Builder 4.5- Create Hello World mobile application

Overview of Flash Builder 4.5

- FB 4.5 provides easy way to build mobile apps

- You can build apps for Apple iOS, Google Android and BlackBerry Tablet OS platform

Overview of Flash Builder 4.5

- Developing mobile and multiscreen apps- Accelerated coding for apps- Improved performance

Key features of Flash Builder 4.5:

Developing mobile & multiscreen apps

- Adds comprehensive support for developing, testing, deploying mobile AIR apps

- Encapsulate common design patterns (templates) for mobile apps

Developing mobile & multiscreen apps

Accelerated coding for apps

- Generating getter/setters- Enhanced CSS content assists, navigations & refactoring- Content assists for event handlers

Code templates

- Speed-up to reduce your coding efforts by auto-insert frequently used coding patterns

- Flash Builder > Editors > Code Templates

- Type the name of the template in the code editor, and press Control+Space

8/26/2011

Mobile web components- 21 new touch-enabled, optimized, mobile components

For e.g - View - ViewNavigator - TabbedViewNavigator - MobileApplication

Creating a new mobile project

Creating a new mobile project

1) Select File > New > Flex Mobile Project

Creating a new mobile project

Creating a new mobile project Permissions tab to see which permissions are allowed by the app on the device at runtime

Creating a new mobile project

- Click Next to advance to the Server Settings screen of the wizard. Leave the settings as-is and then click Next

- In Next step, you can add libraries or source paths that required in application then Click Finish

Creating a new mobile project

Creating a new mobile project

- ProjectName.mxml → application file for the project - ProjectNameHomeView.mxml → initial screen (or view) of the project

When you create a Flex mobile project, FB generates the following files for the application :

Creating a new mobile project Now add a Lable (Hello World) and Button and generate following code, in ProjectNameHomeView :

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<s:Label text="Hello, World!"/><s:Button label="Continue" click="navigator.pushView(MyNewView)" styleName="next"/> </s:VGroup>

Creating a new mobile project Now create MyNewView mxml component and add new Button called 'Back' and Lable 'Success' as below:

Creating a new mobile project

Now its time to Run the application :)

Export packages for release

1) Select Project > Export Release Build2) Target platforms and the location to export3) Sign a platform-specific application package - Digital Signature - Package Contents - Deployment

Export packages for release

Deploy apps on mobile device

1) Connect device to development computer2) In FB, select Run → Run Configurations → select the mobile you want to deploy3) Select the launch configuration method as 'On Device' 4) Click Apply

Resources

1) Getting Started with Flash Builder2) Flex Test Drive for Mobile3) Start Mobile Application Development

Thank You