Book Image

Flex 3 with Java

Book Image

Flex 3 with Java

Overview of this book

Flex 3 is a great technology for developing Rich Internet Applications for the Web as well as for the desktop. If you are a developer looking to design great-looking and sophisticated user interfaces that resemble desktop-based applications, and want to utilize an existing server technology such as Java to develop RIAs, this book is for you. Targeting developers who want to get started with Adobe Flex 3 programming, this simple and clear handbook introduces Flex technology quickly and straightforwardly. Utilizing your existing knowledge of Java, it gives you the insight and hands-on experience to program with Flex 3. This book provides comprehensive information on various aspects of Flex 3 and ActionScript 3.0. These include developing simple applications, handling events, creating custom components and events, using RPC services, integration with Java and BlazeDS, styling and formatting, and how to package and deploy Flex applications. You will start with downloading, installing and configuring Flex 3 SDK and Flex Builder 3 and learn basic concepts such as what MXML and ActionScript are, understanding UI components, controls, compilers, and more. Further you will develop simple applications and slowly advance into more depth where you will learn advanced concepts such as creating custom components, debugging, integrating with Java, using RPC services, styling, internationalizing, and deploying Flex applications, and more. One of the things you're really going to love about this book is that you will develop a full-blown e-commerce application using a combination of Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java. At the end of the book you will have the knowledge and experience needed to develop Rich Internet Applications.
Table of Contents (18 chapters)
Flex 3 with Java
Credits
About the Author
About the Reviewers
Preface
8
Communicating with Server-side Java

Creating a Flex project


If you are already using Eclipse IDE, then you are aware of a project definition. In Flex Builder 3, the same process is followed for creating a new Flex project. Let's start by creating one.

Select File | New to bring up options as shown in the following screenshot:

Select Flex Project, which will display the dialog box shown here:

In the Project name field, enter the name of your project. To change the location of your project (other than default), uncheck Use default location and choose a new location. Using Flex Builder, you can create desktop applications (that run in Adobe AIR) and web applications. In this book, we will be focusing on web applications, so leave the Application type as Web application (runs in Flash Player).

The Server technology section lets you select the Application server type. For example, if you are planning to use Java on the server side, then you can select J2EE as the application server type. This lets you create combined Java and Flex projects with output deployment configured on the server. Leave the application server type set to None for now.

Note

For more information on different server types and configuration, visit http://livedocs.adobe.com/flex/3/html/index.html?content=Part1_Using_FB_1.html.

The following screen lets you specify the Output folder for the compiled Flex application. Click on Next.

The next screen lets you select your source folder and sets a main application filename. By default, Flex Builder gives the application MXML file the same name as the project. You can change this if you want. Usually, a Flex project consists of one MXML file called the application file and several other components files. Don't worry too much about this now; just think of this as a Java file having a main() method, which is equivalent to the main entry point of the application. Click on Finish to create the project with these default settings.

Flex Builder will open a project as shown in the following screenshot:

Notice how the Flex Navigator view now contains all the necessary project files and folders. The Outline view shows the structure of the application, and you will see how this helps you while writing code later in this book. The right-side area, where code is displayed, is called the Editor view. Here you can write your MXML or ActionScript code.

UI designer and source code editor

Notice that the Editor view has two tabs in the top left corner of the window—Source and Design. The Source tab is obviously used to edit the source code and the Design tab will put you into a design perspective where you can design and layout your UI components by using drag-and-drop. You can switch between these two tabs while writing code and designing UI layout.

Click on the Design tab to bring up the design perspective as shown in the following screenshot:

Notice that in the design perspective, you see some views that you didn't see in the source perspective. For example, you see the Components view, States view, and Flex Properties view.

In the design perspective, we can create our application visually in much the same way as Microsoft's popular Visual Basic or Adobe's Dreamweaver.

Flex LiveDocs

Flex LiveDocs can be accessed from http://livedocs.adobe.com/flex/3/langref/index.html, or it can be downloaded from http://livedocs.adobe.com/flex/3/flex3_documentation.zip for offline use.

When you install Flex Builder, it also installs all documentation and language reference along with it for offline use and contextual help purpose. To access language reference from Flex Builder, press the Shift+F2 key combination. This will launch offline LiveDocs.

This documentation contains ActionScript and MXML language references in the HTML and PDF format. The language reference format is similar to JavaDoc, so it will be familiar to Java developers. LiveDocs covers very brief API information for MXML and ActionScript along with good examples wherever it is applicable.

I suggest you read this documentation for in-depth API-level information. You can also find many other related tutorials and documentations at http://livedocs.adobe.com/flex/3/.