Flex Builder Part 2 - Getting Acquainted With The Workbench

 Flex Builder Part 2 - Getting Acquainted With The Workbench

Having covered the finer points of installing Flex Builder last time, both in it's standalone form and as a plugin, we'll now focus on making sense of the work environment within Flex Builder. Novice Flex users should expect to take away from this article an understanding of the organizational structure of the Flex development environment within Flex Builder 3, as well as an appreciation for the power of the Flex Builder workbench.

Perhaps the easiest way to get those new to Flex Builder started is to revisit a past installment in LFFS with some sample code that can be imported into Flex Builder. If you would, please, point your browsers here.... http://flexglossary.net/lffs/lffs-10-calculator-continued/calculator-code-reviewed/srcview/

Importing an Existing Flex Project

Even though we haven't corrected the "beta" issues with this calculator as of yet, it will do just fine as an example as to how to import a project into Flex Builder. In this example I'm mainly using the Flex Builder plugin in Eclipse, but I'll also discuss any unique processes for importing into the standalone version.

After you have downloaded the .zip file and saved it to your preferred location, you can now import that project into Flex Builder in the following manner:

If you're using Eclipse, the I.D.E. startup procedure includes a prompt for you to declare a workspace. Before I altered the workspace location, the workspace launcher had as its default "C:/Documents and Settings/Admin/workspace". Let me explain to you why I chose not to just simply "click on through" at this point.

I set a unique workspace by typing "C:/Documents and Settings/Admin/workspace/calculator".

In doing this, I'm safeguarding myself against confusing other projects I may be working on with the current one. This can be a real time saver, potentially avoiding the headache of having projects referencing the wrong files. So then, it is recommended that you set up a unique workspace for each individual project, and avoid checking the "use this as the default and don't ask again" box.

Once the Eclipse I.D.E. launches, if the Flex perspective is not viewable, navigate to: Window-->Open Perspective-->Flex Development.

Once we're in the Flex perspective, to import the calculator application we navigate to File-->Import-->General-->Existing Projects Into Workspace.

If you're using the Flex Builder standalone, your import process is similar, with only a few subtle differences. Launching the standalone brings you straight into the Flex Builder workbench. Here, you can navigate to File-->Import-->Flex Project, or File-->Import-->Flex Project.

At this point you are prompted to choose the location of the archived project file, as well as to choose a source directory for your project. I created a folder named "calculator" on my local disc "C" to be the source directory.

There may be an unexpected error at this point regarding the absence of a "libs" folder. Flex Builder stores archived components and other assets in what's known as an SWC file, which is kept in the libs folder. Our calculator's project has an empty libs folder, since we don't have a for any specialized components or frameworks, but Flex Builder still asks that we have it in our file directory nonetheless. Simply find your way up to the Navigator window, and under the projects root folder, right click and choose "new" and "folder". Name this folder "libs", and you should be all set.

By the way, the Navigator panel displays the Flex projects and their hierarchies that are within a particular workspace. The types of projects that can be listed here are: web applications, like what we're currently dealing with, AIR applications, which we'll get to in future posts, and library projects, which would contain code compiled into a SWC file that can be shared between projects.

Let's launch the calculator. Near the top of the screen you should see three green triangles.

The larger one on the left is the one you want at this point. This button runs the application. When Flex Builder runs an application, it goes through what's known as a "build" process. (Flex Builder, get it?) During this process, Flex Builder saves the application and generates the required SWF file that the Flash Player needs to run it. I prefer for now to have "Build Automatically" set in my preferences under Project-->Build Automatically.

Go ahead and click on the larger of the three green arrows, and you'll see the calculator application build and launch. The application launches within a browser window. Keep in mind that although we'll be keeping the default build settings in place for now, Flex Builder gives you the freedom to customize the build process to your liking.

Once back in Flex Builder, take a look at the window named "Outline". This panel displays the visual component hierarchy in your application.

At the top of the main window, you'll see two buttons labeled "Source" and "Design".

Using these controls you can toggle between a code editor view, and a WYSIWYG view. When you're in Design view, a new panel becomes available called "Components".

This panel lists all of the built in visual components available to you. You can simply click and drag these components into your application, and Flex Builder will help you align them correctly. You can click within any of the components, and you'll notice that information about that component will show up in the Properties panel.

The properties panel allows for the editing of a number of things, such as color, size, text, etc. Your choice of how to view the available properties is provided by three buttons labeled: "Standard View", "Category View", and "Alphabetical".

Standard View

Category View

Alphabetical View

We'll cover the use of the "States" panel in future posts, but for now understand that your Flex application can have more than one view state, and those different states are outlined here.

Back up at the top, some of the important drop-down menus are "File", "Edit", "Project", "Run", "Window", and "Help". Although there are useful features available in the others, for now we'll concern ourselves with these few. We've already been acquainted with the File menu when we imported our project. Looking into the Edit drop-down, we find a useful feature that we can use to search for terms within our code. Find/Replace can be a handy tool, especially when your project's code gets to be more than a few lines long.

The Project menu is where you tell Flex Builder to "Build Automatically", and it's also where you would create a "release build" when you'd like to publish your application online, for example.

The Run menu provides a number of options, much of which we'll cover in future posts. For our current purposes, we can get by with running the application by using the "Run" button on the toolbar however.

The Window menu, like in many applications, gives choices for what panels can be displayed in the workbench.

And finally, the Help menu should be a frequent stop for beginning Flex developers.

The first time you use the "dynamic help" option, Flex Builder will compile an indexed help section which you can use to get a better understanding of the Flex environment. Using this menu is a great way to learn about Flex in a hands-on type of way.

Finally, like other Adobe products, Flex Builder allows you the freedom to re-arrange your workbench any way you'd like. If you use one panel more than another, you can put that panel in a spot that's convenient for you if it improves your workflow.

If you're new to Flex, this should give you just enough information to get started using Flex Builder. Try experimenting by importing projects, as well as by starting new ones of your own by clicking File-->New-->Flex Project, and then going through the standard project setup wizard. Remember that if things get too messed up, you can always re-import the project and start over. Make good use of the Help menu, and have fun!