Flex 101 with Flash Builder 4 – Part 1

The article is intended towards developers who have never used Flex before and would like to exercise a “Hello World” kind of tutorial. The article does not aim to cover Flex and FB4 in detail but rather focuses on the mechanics of FB4 and getting an application running with minimal effort.

For developers familiar with Flex and the predecessor to Flash Builder 4 (Flex Builder 2 or 3), it contains an introduction to FB4 and some differences in the way you go about building Flex Applications using FB4.

Even if you have not programmed before and are looking at understanding how to make a start in developing applications, this would serve as a good start.

The Flex Ecosystem

The Flex ecosystem is a set of libraries, tools, languages and a deployment runtime that provides an end-to-end framework for designing, developing and deploying RIAs. All these together are being branded as a part of the Flash platform.

In its latest release, Flex 4, special efforts have been put in to address the designer to developer workflow by letting graphic designers address layout, skinning, effects and general look and feel of your application and then the developers taking over to address the application logic, events, etc.

To understand this at a high level, take a look at the diagram shown below. This is a very simplified diagram and the intention is to project a 10,000 ft view of the development, compilation and execution process.

Let us understand the diagram now:

  1. The developer will typically work in the Flash Builder Application. Flash Builder is the Integrated Development Environment (IDE) that provides an environment for coding, compiling, running / debugging your Flex based applications.
  2. Your Flex Application will typically consist of MXML and ActionScript code. ActionScript is an ECMAScript compatible Object Oriented language, whereas MXML is an XML-based markup language.
  3. Using MXML you can define/layout your visual components like buttons, combobox, data grids, and others. Your application logic will be typically coded inside ActionScript classes/methods.
  4. While coding your Flex Application, you will make use of the Flex framework classes that provide most of the core functionality. Additional libraries like Flex Charting libraries and 3rd party components can be used in your application too.
  5. Flash Builder compiles all of this into object byte code that can be executed inside the Flash Player. Flash Player is the runtime host that executes your application.

This is high level introduction to the ecosystem and as we work through the samples later on in the article, things will start falling into place.

Flash Builder 4

Flash Builder is the new name for the development IDE previously known as Flex Builder. The latest release is 4 and it is currently in public beta.

Flash Builder 4 is based on the Eclipse IDE, so if you are familiar with Eclipse based tools, you will be able to navigate your way quite easily. Flash Builder 4 like Flex Builder 3 previously is a commercial product and you need to purchase a development license. FB4 currently is in public beta and is available as a 30-day evaluation.

Through the rest of the article, we will make use of FB4 and will be focused completely on that to build and run the sample applications. Let us now take a look at setting up FB4.

Setting up your Development Environment

To setup Flash Builder 4, follows these steps:

  1. The first step should be installing Flash Player 10 on your system. We will be developing with the Flex 4 SDK that comes along with Flash Builder 4 and it requires Flash Player 10. You can download the latest version of Flash Player from here: http://www.adobe.com/products/flashplayer/
  2. Download Flash Builder 4 Public Beta from http://labs.adobe.com/technologies/flashbuilder4/. The page is shown below:

After you download, run the installer program and proceed with the rest of the installation.

Launch the Adobe Flash Builder Beta. It will prompt first with a message that it is a Trial version as shown below:

To continue in evaluation mode, select the option highlighted above and click Next. This will launch the Flash Builder IDE.

Let us start coding with Flash Builder 4 IDE. We will stick to tradition and write the “Hello World” application.

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

  • A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
  • Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
  • Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
  • Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

Continue to Flex 101 with Flash Builder 4 – Part 2

About Bryan
Bryan Li has more than 10 years business consulting and project development experience with major corporate clients including Sony, Bank of Montreal, Bruce Power, etc. As a fan and advocate for RIA(Rich Internet Application) technologies, Bryan helps companies and developers learn, design, and build richer applications using Adobe Flex.

1 Comment on Flex 101 with Flash Builder 4 – Part 1

  1. hi i want 2 learn flex with .net any books r online videos tutorials

Leave a comment

Your email address will not be published.