Flash Builder 4.6 Wizard: Create New Flex Mobile Project with Tab Views

1) In the Welcome Screen, choose "New Flex Mobile Project". Or, alternatively, in main application window, go to menu File/New/Flex Mobile Project.





2) New Project Settings.
2a) Project Location.
Project Name: FlexMobile2.
Accept other default settings.
Click Next.



2b) Mobile Settings.
Add 3 tabs, i.e Tab1, Tab2, and Tab3 toe the Tabs List.
Accept all other default settings.
Click Next.




2c) Server Settings.
Accept all default settings.
Click Next.




2d) Build Paths.
Type a valid name for the package id, e.g. com.example.flexmobile1.
Click Finish.



2e) New project was successfully created.



2f) Notice that Tab1View.mxml is automatically opened in the main panel. To view other tabs files, double-click their names in the Package Explorer panel.




3) Run Project.
3a) Select the FlexMobile2.mxml by clicking the file tab in the main panel.
3a) Go to Run drop-down menu, select Run As mobile application.




3b) Set Run Configuration as below:
Click Apply.
Click Run.



3c) Android Emulator pops up showing an app with three tabs.

Flash Builder 4.6 Wizard: Create New Flex Mobile Project

1) In the Welcome Screen, choose "New Flex Mobile Project". Or, alternatively, in main application window, go to menu File/New/Flex Mobile Project.





2) New Project Settings.
2a) Project Location.
Project Name: FlexMobile1.
Accept other default settings.
Click Next.




2b) Mobile Settings.
Accept all default settings.
Click Next.



2c) Server Settings.
Accept all default settings.
Click Next.




2d) Build Paths.
Type a valid name for the package id, e.g. com.example.flexmobile1.
Click Finish.



2e) New project was successfully created.


2f) Notice that there are two files created, i.e

i) FlexMobile1.mxml
You can run this file as a mobile application.

and

ii)FlexMobile1HomeView.
In contrast to (i), you cannot run this file as a mobile application directly.





3) Run the project.
3a) While selecting the file FlexMobile1.mxml in the main panel, click Run/Run As/Mobile Application.


3b) Run Configuration dialog window pops up with error message.
You have to select a launch method.



3c) Change Launch method to Apple iPhone4.
Click Apply.
Click Run.



3d) iPhone emulator pops up.



3e) Close the emulator.



4) Change Run Configuration to BlackBerry Platform.
4a) Click the drop-down arrow besides the Run icon and choose Run Configurations..



4b) Click Mobile Application. Then, Click New.



4c) Change Target Platform and Launch method.
Click Apply.
Click Run.



4d) BlackBerry PlayBook emulator pops up.



4e) Close the emulator.




5) Change Run Configuration to Android Platform.
5a) Click the drop-down arrow besides the Run icon and choose Run Configurations...

5b) Click Mobile Application. Then, Click New.



5c) Change Target Platform and Launch method.
Click Apply.
Click Run.

5d) Samsung emulator pops up.

5e) Close the emulator.


6) Run options.
6a) If you click the drop-down arrow besides the Run icon, you would notice that there are 3 run options available.


6b) You can change the name by going to the Run Configurations item in the Run drop-down menu..



6c) Having meaningful names help you to quickly select the desired emulator.

Flash Builder 4.6 Wizard: Create New Flex Project to run on desktop

1) In the Welcome Screen, choose "New Flex Project". Or, alternatively, in main application window, go to menu File/New/Flex Project.

2) New Flex Project Dialog box shows up.
2a) In Project Location tab, set as follows...
Project name: FlexProject2
(accept other default settings).




2b) In the Server Settings tab, accept default settings.




2c) In the Build Path tab, accept default settings.




3) New Project created.


4) Click the drop-down arrow besides the Run icon.
Select Run As Desktop Application.



5) A new application window pops up.



6) Re-edit the project.
6a) Switch back to Flash Builder.
6b) In Component panel, click and drag the Label item and place it on the project page design.



6c) Double-click the label object and change the text to "Hello World".



6d) Re-run the project.


6e) You see the effect of the current changes.

Flash Builder 4.6: Show line numbers in text editor

1) In main application window, go to menu window/preferences.

2) Go to the section General/Editors/Text Editors.

3) Select the checkbox for "Show line numbers".

4) You see the line numbers displayed on the left margin of the text editor.

Flash Builder 4.6 Wizard: Create New Flex Project...

1) In the Welcome Screen, choose "New Flex Project". Or, alternatively, in main application window, go to menu File/New/Flex Project.

2) New Flex Project Dialog box shows up.
2a) In Project Location tab, set as follows...
Project name: FlexProject1
(accept other default settings).




2b) In the Server Settings tab, accept default settings.




2c) In the Build Path tab, accept default settings.




3) New Project created.



3a) Package Explorer shows the project files organization.

3b) Main panel shows the Source file view (FlexProject1.mxml)

3c) Outline panel shows the Source code organization.


4) Click the Design Tab in main panel (3b).



4a) Package Explorer view doesn't change.

4b) Main panel shows the view.

4c) Outline panel shows the UI components.



5) Run the project.
(If the Flash Builder warns you to get newer version of Flash Player, download Flash from http://www.adobe.com/support/flashplayer/downloads.html#fp11)





6) Switch back to Flash Builder.
6a) Drag Label component to the Main Panel (in Design mode).




6b) Double-click the label and type "Hello World".




7) Run the project again.

7a) Now you see the label displayed on the page.




8) Switch back to Flash Builder.
8a) In main panel, click the Source tab.



8b) You can set the line numbers to be visible by going to menu windows/preferences and select the "show line numbers" options in General/Editors/Text Editors (click here to learn more).



9) Close and Delete project.
9a) In the Package Explorer, right-click the project name and choose Close Project.
9b) In the Package Explorer, right-click the project name and choose Delete Project.