How? I just simply watch whether you use Keyboard or Mouse to operate Flex Builder.

After work on Flex Builder long enough, Pros are the master of shortcuts. They usually press keyboard once to finish an operation (e.g. open a class definition, move a line of code up, build project, run project). While newcomers are struggle to move their mouse around to find something to click.

Knowing more keyboard shortcuts may no mean you have a better programming skills, but it makes you appear like a Pro.  In fact, some companies check it when they interview candidates. When I applied for a position in a big research institute, the hiring manager told me to do a complex task by using some tools. I didn’t finish the task on time, but still got hired. Later, he explained, the way I used those tools (using a lot of keyboard shortcuts, I guess)  made him believe I was a Pro.

Get the list of Flex Builder keyboard shortcuts

All right, so you want to become a Flex Builder Pro. Here is how you can get a list of Flex Builder keyboard shortcuts:

Within Your Flex Builder, Press Control+Shift+L

What you will see is like the below:

The next Flex Builder Pro

Now you have a complete list of Flex Builder shortcuts. Just try to incorporate more of them into your daily work. With the time, you will use Flex Builder like a Pro does.

Assuming you create a Flex project called HelloWorld, and use C:\flexworkspace as your workspace, you will see the following directories under C:\flexworkspace:

• .metadata
• HelloWorld

.metadata contains the flex workspace configuration files, which you usually do not need to touch.  All your project files are under HelloWorld (the project name) folder.

Under HelloWorld folder, you will see some things as follows:

• .settings
  Project configuration files

• bin-debug
  Compiled swf and related application files

• html-template
  Html wrapper page

• libs
  Your custom classes

• src
  Source files, components, and assets

• .actionScriptProperties,  .flexProperties,  .project
  Additional Flex Builder configuration files

In most cases, what you need to work on are the src and libs folders.

1. Get the code hint in the editor view

Press CTRL + SPACE

2. View help for a component or class

Highlight the code and press F1

3. Expand/Restore the editor

Double click the tab on top

4. Locate a close curly bracket

Move cursor to the open curly bracket and press CTRL + SHIFT + P

5. Open a class file by its name

Hold the CTRL key and click the class name.

6. Quickly locate a code element inside the editor view

Press CTRL + O to open an outline dialog, and then click the element name.

7. Highlight all occurrences of a component inside the editor view

Click a component name and click  button (Mark Occurrences) on the tool bar.

8. Compare your code with the local history

Right click a file name in the navigator panel and choose “Compare With -> Local History”.

9. Fold a block of code to save space inside editor view

Click the icon besides the line number on the left of the editor view

10. Comment out a block of code quickly

Highlight a block of code and press CTRL + SHIFT + C.

11. Move a block of code up or down

Highlight a block of code and press ALT + UP or ALT + DOWN.

12. Run or Debug your application

Press CTRL + F11 or F11

After you install the Adobe Flex Builder, you can just double click the following icon on your computer desktop to start it.

You will see a Welcome to Flex page when you first time to start Adobe Flex Builder.

This welcome page provides you an introduction video, quick start tutorials, and download links of sample projects. You might want to take some time to explore it.

Adobe Flex Builder Workbench

To start use Adobe Flex Builder, we need to get familiar with its working environment – workbench in Adobe’s term.

Flex Builder workbench is made up of the following common areas:

1. Menu Bar: Menus for all operations like save file, build project, set preferences, etc.
2. Tool Bar: bookmarks for common actions.
3. Perspective Switch: Switch perspectives like Development or Debugging.
4. Flex Navigator View: List of multiple projects and files
5. Outline View: Shortcut to elements of a class file.
6. Code Editor View: Coding area for Flex programs.
7. Problems View: List of error messages.

Adobe Flex Builder Workspace

You might ask: “Is the Flex Builder Workspace as same as the Flex Builder Workbench?” No, they are actually two different things.

As you saw in the previous section, Flex Builder Workbench is a Flex development environment (IDE) that contains areas like Menu Bar, Tool Bar, Views, and Perspectives. While Flex Builder Workspace is a physical file directory on your machine that contains all folders and files used by Flex projects. For example, you can create a directory on your computer like C:\flexworkspace, and use it as your project workspace in the Flex Builder. I will show you how to do it in the later tutorial.

The biggest benefit of using workspace is: you can quickly find all project files in one place, and easily package, deploy, or backup your project.

The best way to start develop Flex application is to use Adobe Flex Builder. It is an Integrated Development Environment (IDE) based on the open source platform – Eclipse.  It can be used on both Windows and Max OX operation systems.

There are two versions of Flex Builder available: Standard and Professional.

Flex Builder Standard version contains:

• Flex SDK Plug-in
• Visual Design Interface
• Powerful Coding Tools
• Refectory Engine
• AIR Application Support
• Backend Development Wizards

Flex Builder Professional version contains:

• All Features Provided by the Standard Version
• Data Visualization Tool
• Advanced Data Grid
• Powerful Testing Tool

Download Adobe Flex Builder

To start to use Adobe Flex Builder right away, you can download a 60-day trial version here.

Download Flex Builder