Flash Builder 4.5 provides tools for developing mobile apps for iOS, Android, and BlackBerry tablets. It features accelerated coding, templates for common patterns, and over 20 new touch-enabled mobile components. The document walks through creating a simple "Hello World" mobile app in Flash Builder, including generating code for views and buttons, running the app, and steps for exporting and deploying the packaged app to devices.

1. Mobile apps development
using
Adobe Flash Builder 4.5
Bharat Patel
www.bharatria.wordpress.com
Ahmedabad Flash Platform User Group

2. Objective
- Overview of Flash Builder 4.5
- Create Hello World mobile application

3. 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

4. Overview of Flash Builder 4.5
Key features of Flash Builder 4.5:
- Developing mobile and multiscreen apps
- Accelerated coding for apps
- Improved performance

5. Developing mobile & multiscreen apps
- Adds comprehensive support for developing,
testing, deploying mobile AIR apps
- Encapsulate common design patterns (templates)
for mobile apps

6. Developing mobile & multiscreen apps

7. Accelerated coding for apps
- Generating getter/setters
- Enhanced CSS content assists, navigations &
refactoring
- Content assists for event handlers

8. 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

9. 8/26/2011

10. Mobile web components
- 21 new touch-enabled, optimized, mobile
components
For e.g - View
- ViewNavigator
- TabbedViewNavigator
- MobileApplication

11. Creating a new mobile project

12. Creating a new mobile project
1) Select File > New > Flex Mobile Project

13. Creating a new mobile project

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

15. 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

16. Creating a new mobile project

17. Creating a new mobile project
When you create a Flex mobile project, FB generates the
following files for the application :
- ProjectName.mxml → application file for the
project
- ProjectNameHomeView.mxml → initial screen
(or view) of the project

18. 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>

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

20. Creating a new mobile project
Now its time to Run the application :)

21. Export packages for release
1) Select Project > Export Release Build
2) Target platforms and the location to export
3) Sign a platform-specific application package
- Digital Signature
- Package Contents
- Deployment

22. Export packages for release

23. Deploy apps on mobile device
1) Connect device to development computer
2) In FB, select Run → Run Configurations →
select the mobile you want to deploy
3) Select the launch configuration method as 'On
Device'
4) Click Apply

24. Resources
1) Getting Started with Flash Builder
2) Flex Test Drive for Mobile
3) Start Mobile Application Development

25. Thank You