Flex 3 with Java - Satish Kore - E-Book

Flex 3 with Java E-Book

Satish Kore

0,0
31,19 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

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.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB

Seitenzahl: 301

Veröffentlichungsjahr: 2009

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Flex 3 with Java
Credits
About the Author
About the Reviewers
Preface
What this book covers
What you need for this book
Conventions
Reader feedback
Customer support
Downloading the example code for the book
Errata
Piracy
Questions
1. Installing and Configuring Adobe Flex
Installing open source Flex 3 SDK
Installation directory structure
About configuration files
Flex compilers
Using compc—the component compiler
Using mxmlc—the application compiler
Installing Flex Builder 3
Creating a Flex project
UI designer and source code editor
Flex LiveDocs
Summary
2. Introduction to Flex 3 Framework
How Flex works
Compiling and running an application
About MXML
Understanding namespaces
Using namespaces in your code
Containers
Layout manager
Layout containers
Using Box, HBox, and VBox containers
Navigator containers
Form containers
Constraint-based layout
Using events in MXML
Creating custom events
Validating and formatting data
Restricting user entry
Formatting
Data binding
Using the [Bindable] metadata tag
Creating MXML custom components
Understanding Flex itemRenderers
Drop-in itemRenderers
Inline itemRenderers
External itemRenderers
Summary
3. Introduction to ActionScript 3.0
ActionScript 3.0 language features
Strict data typing
Runtime exceptions
Sealed classes and dynamic classes
Method closure
XML and E4X
New primitive data types
Regular expressions
Object-oriented programming
ActionScript 3.0 fundamentals
Variables
Access modifiers
Packages
Classes and interfaces
Classes
Interfaces
Implementing an interface in a class
Inheriting classes
Functions and methods
Named functions
Anonymous functions
Function parameters
The default parameter values
The ...(rest) parameter
Setter and getter methods
Flow control and looping
If/else statement
switch statement
Looping
While looping
do..while looping
for looping
for..in looping
for each..in looping
Exceptions and error handling
try...catch...finally statements
Create your own custom Error class object
Reserved words and keywords
Using ActionScript 3.0 with MXML
Using the <mx:script> tag
Using the include directive
Working with events
Registering event handlers
Dispatching an event
About the target and currentTarget properties
Event propagation
Capturing phase
Targeting phase
Bubbling phase
Creating custom events
Creating and using ActionScript components
The commitProperties() method
The createChildren() method
The layoutChrome() method
The measure() method
The updateDisplayList() method
Summary
4. Using External API and LocalConnection
Using External API
Using the ExternalInterface class
Getting information about external container
Calling JavaScript code from ActionScript
Calling ActionScript code from JavaScript
Using LocalConnection
Summary
5. Working with XML
XML basics
Understanding E4X
The XML object
The XMLList object
Working with XML objects
Using XML as dataProvider
Loading external XML documents
An example: Building a book explorer
Summary
6. Overview of LiveCycle Data Services and BlazeDS
LiveCycle Data Services
BlazeDS
BlazeDS vs LiveCycle Data Services
LiveCycle Data Services
BlazeDS
Understanding AMF
Summary
7. Flex Data Access Methods
Flex data access components
The HTTPService class
Using the HTTPService tag in MXML
An example of HTTPService
Using the HTTPService class in ActionScript
The WebService class
Using the WebService tag in MXML
An example of WebService
WSDL document
Using the WebService class in ActionScript
Working with SOAP headers
The RemoteObject class
Using the RemoteObject tag in MXML
An example of RemoteObject
Working with strongly-typed objects
Understanding the Flash Player security sandbox
Understanding the cross-domain policy file
Creating a proxy service
Summary
8. Communicating with Server-side Java
The HTTPService class
Working with XML data
Working with JSON data
Summary
9. Debugging Techniques
Flash Debug Player
Using client-side logging
Flex Builder Debugger
The Debug view
The Variables view
The Breakpoints view
The Expressions view
Network monitoring
ServiceCapture
Charles Web Debugging Proxy
Summary
10. Styling your Application
Using inline styles
Using external CSS files
Creating and designing Cascading Style Sheets
Loading stylesheets at runtime
Summary
11. Packaging and Deployment
Packaging your application
Using Flex Ant Tasks
Deploying your application
Flex deployment options
Using a single SWF file deployment
Using web-tier compilation
Summary
12. Internationalization and Localization
Internationalization (i18n) and localization (l10n)
Language
Assets
Culture
Time zones
Localization of Flex applications
Creating a resource file
Creating resource modules
Summary
13. Creating an E-commerce Application
The general anatomy of the application
Let's start coding
The Flex code
The Java code
Directories and files
Summary
Index

Flex 3 with Java

Satish Kore

Flex 3 with Java

Copyright © 2009 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: June 2009

Production Reference: 1220609

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-847195-34-0

www.packtpub.com

Cover Image by Vinayak Chittar (<[email protected]>)

Credits

Author

Satish Kore

Reviewers

Wim Bervoets

Trevor Burton

Acquisition Editor

James Lumsden

Development Editor

Swapna Verlekar

Technical Editor

Dhiraj Bellani

Copy Editor

Sneha Kulkarni

Indexer

Hemangini Bari

Editorial Team Leader

Abhijeet Deobhakta

Project Team Leader

Lata Basantani

Project Coordinator

Neelkanth Mehta

Proofreaders

Laura Booth

Lynda Sliwoski

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

About the Author

Satish Kore is a software engineer, an amateur blogger, and a dreamer based in a beautiful city Bangalore in India. He has worked on a variety of technologies including Adobe Flex, Java, and J2ME over the past eight years. He has always been passionate about Rich Internet application (RIA) technologies and loves working on Adobe Flex. He always enjoyed writing software applications and solving common problems using technology. You can keep up with his work by visiting his blog at http://blog.satishkore.com, or by following him on Twitter http://twitter.com/satishkore.

I thank my family for being encouraging and supportive and special thanks to my friends for always inviting me on parties even though I constantly refused to join them by giving them the same boring reason that I am busy with writing.

This book means a lot to me since I have spent all my weekends and free time writing this book for the past 6-7 months. However, this book would not have been possible without some individuals who have worked alongside me during the writing, reviewing, and publishing phases.

I would thank James Lumsden for giving me the opportunity to write this book. I would also like to thank Neelkanth Mehta, Swapna Verlekar, Dhiraj Bellani, and all my technical reviewers for proofreading, reviewing, and refining the content of this book; without their efforts, this book wouldn’t have been completed.

About the Reviewers

Wim Bervoets is a Senior J2EE/Java software engineer and architect from Belgium, Europe, who helps organizations to implement complex web-based business applications.

Since 2000, Wim Bervoets has specialized in developing and architecting web-based solutions in various companies and industries (for example, banks, pharmacy, and so on) and in various roles (as a lead developer, architect, consultant, designer, and so on).

Since 2008, he has also started working with Adobe Flex RIA Technologies in combination with existing Java applications.

Wim Bervoets is also no stranger to Web2.0, internet marketing and web site launches. He created successful international web sites, such as http://www.javablog.be —a blog about Java and Flex, http://www.dancevibes.be —a blog about music, and http://www.wimsbios.com — a site for PC tech enthusiasts.

To contact Wim Bervoets, please email to<[email protected]>or go to his blog at http://www.javablog.be.

Trevor Burton is a software developer based in London, UK. He works primarily in Actionscript and Java. He has been working with Flash since the release of Flash 4 and Flex since the release of version 3 and has a wealth of experience developing Flash games from the banner advergames to multi-million pound online gambling applications.

He currently works for Infrared5, developing a wide range of web applications. In his spare time, he experiments with multi-user interaction and human—computer interaction.

Dedicated to my beautiful wife, Archana. I remain thankful to her for being supportive and understanding

Preface

Rich Internet applications (RIAs) are a new breed of web applications that are capable of doing things such as loading and handling heavy data ten times faster than HTTP, designing great-looking and sophisticated user interfaces that resemble desktop-based applications, and having the possibility of utilizing existing server technology such as Java, that would have never been possible with typical web technologies, such as HTML. Flex 3 is a leading technology for developing RIAs for the Web, as well as for the desktop. This book gives you an insight into, and provides a hands-on experience in, programming in Flex 3 by utilizing your existing knowledge of Java programming.

This book includes comprehensive information on various concepts of Flex 3 and ActionScript 3.0, such as developing simple applications and handling events to creating custom components and events, using RPC services, integration with Java and BlazeDS, styling and formatting, and how to package and deploy Flex applications. Finally, this book provides a step-by-step tutorial for developing e-commerce applications using Flex 3, ActionScript 3.0, BlazeDS, and Java.

You will start with downloading, installing, and configuring Flex 3 SDK and Flex Builder 3 and learn basic concepts, such as what is Macromedia Flex Markup Language (MXML) and ActionScript, understanding UI components, controls and compilers, and so on. Furthermore, you will start developing simple applications and slowly go 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 much more.

What this book covers

Chapter 1: Installing and Configuring Adobe Flex—In this chapter, you will learn the basics of Flex programming, that is, downloading, installing, and configuring Flex SDK and Flex Builder 3.

Chapter 2: Introduction to Flex 3 Framework—This chapter will introduce you to the MXML scripting for laying out User Interfaces (UI) in the Flex world. This chapter also provides hands-on examples required to get you started with MXML programming.

Chapter 3: Introduction to ActionScript 3.0—This chapter will introduce you to the ActionScript 3.0 programming language along with detailed code samples.

Chapter 4: Using External API and LocalConnection - In this chapter, you will learn how to communicate with JavaScript from a Flex application and vice versa.

Chapter 5: Working with XML—In this chapter, you will learn how to work with XML data using Flex's E4X approach.

Chapter 6:Overview of LiveCycle Data Services and BlazeDS—This chapter will provide an overview of BlazeDS and LiveCycle Data Services.

Chapter 7: Flex Data Access Methods—This chapter provides you with in-depth information about various data access methods available in Flex with detailed and step-by-step code samples along with Flash Player security model. It also gives you a detailed insight into how to use RemoteObject to communicate with Java code.

Chapter 8: Communicating with Server-side Java—This chapter provides step-by-step code examples to get started with Flex and Java communication along with clear and simple code examples..

Chapter 9: Debugging Techniques—In this chapter, you will learn how to debug your Flex application using Flex Builder 3 and some third-party tools.

Chapter 10: Packaging and Deployment—You will learn how to build and package a Flex application using available tools, such as Apache Ant, and learn about various deployment options that you can use.

Chapter 11: Styling Your Application—This chapter will give an overview of using Cascading Style Sheet (CSS) for changing the look and feel of your Flex application and components with brief code examples and tools for designing CSS files.

Chapter 12: Internationalization and Localization—This chapter will give you an overview of internationalizing your application.

Chapter 13: Creating an E-commerce Application—This chapter will provide a step-by-step guide for creating an end-to-end e-commerce application using Flex 3, ActionScript 3.0, BlazeDS, and Java.

What you need for this book

First and foremost, you need to have a need for learning Flex 3 technology; yes, I say that because most of us learn a new technology either by accident or because of some need, such as client/project demand or for doing things that are not possible with current technology or maybe you just want to upgrade your skill sets. Whatever is your reason behind learning Flex 3, I assure you that this book will serve as a simple and clear handbook for any developers to get started with Adobe Flex 3 programming.

Although this book is very easy to read and understand for any novice programmer, having some basic knowledge of Java programming in general, including Java Server Pages (JSP), would help you to pick up quickly. Apart from this, I assume that you have already heard about terms such as Rich Internet applications (RIAs) and understand theory behind it; if not, then please visit http://en.wikipedia.org/wiki/Rich_Internet_application.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: " The ExternalInterface.available property can be used to determine if the container application that is hosting your Flash Player instance supports an external interface."

A block of code is set as follows:

<mx:Style> Label { color: #ffff00; fontSize: 20; fontWeight: bold; } </mx:Style>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<mx:Style> Label { color: #ffff00; fontSize: 20; fontWeight: bold; } Label.helloStyle { color: red; fontSize: 20; fontStyle: italic; } Label.bonjourStyle { color: blue; fontFamily: Arial; fontSize: 20; } </mx:Style>

Any command-line input or output is written as follows:

mxmlc -library-path+=..../MyLibraries/bin/Main.mxml

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an email to<[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email<[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code for the book

Visit http://www.packtpub.com/files/code/5340_Code.zip to directly download the example code.

The downloadable files contain instructions on how to use them.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at<[email protected]>with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at<[email protected]>if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Installing and Configuring Adobe Flex

In this chapter, you will learn how to install and configure Basic Flex 3.0 SDK (Software Development Kit) and Flex Builder 3. The Adobe Flex SDK contains everything you need to build and deploy Flex Rich Internet applications (RIAs). You can write Flex programs typically using any freely available text editing tools, such as Notepad, TextPad, or any Integrated Development Environment (IDE) of your choice. Adobe provides a specialized IDE for developing and designing Flex applications known as Flex Builder. Flex Builder is built on top of Eclipse platform. So if you are familiar with the Eclipse development paradigm, it will be very easy for you to use Flex Builder.

Although you do not need Flex Builder to write and compile Flex applications, Flex Builder does facilitate development with powerful tools, such as debugger, profiler, and visual designer apart from what the Eclipse platform offers you.

I prefer using Flex Builder 3, since I use Eclipse a lot for my Java development and I have installed Flex Builder 3 as a plugin to my Eclipse IDE.

I am assuming that you have prior knowledge of installing and configuring software packages on the Windows platform. In this chapter, I will explain how to install Flex Builder 3 on Windows. Mac and Linux users should visit Adobe's web site at http://www.adobe.com/support/documentation/en/flex/3/releasenotes_flex3_fb.html for installation instructions.

Installing open source Flex 3 SDK

Flex SDK comes in different types such as licensed Free Adobe Flex SDK (with a mixture of open source and closed open source components) and open source Flex SDK. The latter package contains entirely open source components under the Mozilla Public License version 1.1 (MPL) agreement, which includes its binaries. To know more about the available types of SDKs, visit http://opensource.adobe.com/wiki/display/flexsdk/Downloads. In this chapter, I will cover open source Flex SDK as an example.

In order to install Flex 3 SDK, download the latest open source SDK from Adobe's web site at http://opensource.adobe.com/flex/. Adobe is continuously working on improving and fixing bugs in Flex SDK and they release nightly builds on a regular basis. You can download them from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 and install them in order to stay updated with the latest feature and bug fixes in Flex 3 SDK.

Note

At the time of writing this book, Adobe was actively working on Flex 4, code named Gumbo. For more information, you can visit http://opensource.adobe.com/wiki/display/flexsdk/Gumbo .

Installation directory structure

Once you have downloaded the latest SDK in a ZIP format, extract it at your desired location, for example, C:\Flex3.1_SDK. That's it; you are done with the Flex SDK's installation. Now before you jump into coding, let's first understand the Flex SDK's installation directory structure.

When you install Flex SDK, the installer creates the following directory structure under the installation directory:

Directory

Description

/ant

Contains the Flex Ant tasks, which provide a convenient way to build your Flex projects

/asdoc

Contains ASDoc, a command-line tool that you can use to create API language reference documentation as HTML pages from the classes in your Flex application

/bin

Contains the executable files, such as the mxmlc and compc compilers

/frameworks

Contains configuration files, such as flex-config.xml and default.css

/frameworks/libs

Contains the library (SWC files); you use the files to compile your application

/frameworks/locale

Contains the localization resource files.

/frameworks/projects

Contains the Flex framework source code

/frameworks/rsls

Contains the Runtime Shared Libraries (RSLs) for the Flex framework

/frameworks/themes

Contains the theme files that define the basic look and feel of all Flex components

/lib

Contains JAR files

/runtimes

Contains the standard and debugger versions of Adobe ® Flash® Player and the Adobe® AIR™ components

/samples

Contains sample applications

/templates

Contains template HTML wrapper files

In order to compile your Flex application, you need to set your bin folder in the Windows PATH environment variable under your System settings, so that you can use mxmlc and compc compilers from your project root folder.

About configuration files

There are a couple of important configuration files that you need to be aware of before you start using SDK. They are as follows.

The flex-config.xml file defines the default compiler options for the compc and mxmlc command-line compilers. You can set and tweak many compiler- and application-related configuration parameters in the flex-config.xml file located under the sdk_install_directory/frameworks/ folder such as namespaces, library path, accessibility, and locale for application internationalization.

All of the Flex component names are defined in the mxml-manifest.xml file. This manifest file maps Flex component namespaces to class names with complete package names. This is similar concept as XML namespaces. The mxml-manifest.xml file is used to avoid element name conflicts and it also helps in organizing your source files. Don't worry about these files right now. You will learn more about them and their usage in a better manner further in the book.

Example:

<?xml version="1.0"?> <componentPackage> <component id="HelloLabel" class="usa.hello.HelloLabel"/> <component id="NamasteLabel" class="ind.namaste.NamasteLabel"/> </componentPackage>

In a manifest file, the id property of each<component> tag must be unique. That id is the name you use for the tag in your Flex applications, for example:

<local:HelloLabel label="Hello!"/>

You will learn more about how to use namespaces in Chapter 2 of this book.

The Flex compiler requires Java Runtime Environment (JRE) to compile Flex source code; configuring Java Virtual Machine (JVM) parameters can actually result in much faster and optimized compilation in some cases. Without JRE you cannot use Flex compilers, such as mxmlc and compc.

You can configure JVM settings in the jvm.config file, which is typically located under the sdk_install_dir/bin folder. The most common JVM configuration you may ever need is the JVM heap size. The Java heap is the amount of memory reserved for a particular JVM instance for faster performance; for example:

java.args=-Xms256m -Xmx512m

Flex compilers

Flex SDK is bundled with two command-line compiler tools—one for compiling component library SWC files and the other for compiling executable Shockwave Flash (SWF) files.

The SWC files are Flex component archive files that include compiled binaries and embedded assets of a component. The SWC files can be referenced by Flex application as the external library of component definition. You can think of SWC files as JAR files in Java. To read more about the SWC format, visit http://livedocs.adobe.com/flex/3/html/help.html?content=building_overview_5.html.

The SWF files are complied binaries of Flex application. Think of these files as executables of the Flex applications which are executed by Flash Player either inside the Internet browsers or standalone Flash Player. To read more about the SWF file, visit http://www.adobe.com/devnet/swf/.

Using compc—the component compiler

You use the component compiler to generate SWC files from component source files and other asset files, such as images and stylesheets. The SWC files are more like the .jar files in Java. They are typically used as library files in a Flex project.

This is the general compc syntax:

compc -namespace http://www.mynamespace.com manifest.xml -source-path . -include-namespaces http://www.mynamespace.com -include-classes com.mycomponents.Component1 com.mycomponents.Component2 -include-file icon.png mx/containers/icon.png -output=bin/MyComponents.swc

Note

Type the preceding command on a single line. It appears here on multiple lines for the sake of clarity.

You can use the -namespace and -include-namespaces options to include any number of components. This can keep the command line from being untidy.

The source-path option includes the current directory in the source path. This is how compc finds the various classes that are listed in the include-classes option.

The output option specifies the output location of the SWC file. In this case, compc writes the MyComponents.swc file to a folder named bin.

The include-classes option specifies the classes that you want to include in the SWC file. The compc component compiler is typically used in Flex for creating an external components library that can be referenced into Flex application or for creating Runtime Share Libraries, and so on. This is different from the mxmlc application compiler, which generates a Flex application executable.

Using mxmlc—the application compiler

You use the mxmlc application compiler to compile your Flex application source into an SWF binary file. The SWF files are executables of the Flex application that are executed into Flash Player. You can use the SWC files generated by component compiler, that is compc, when compiling MXML files. You typically use the library-path option to specify which SWC files the application uses.

This is the general mxml syntax:

mxmlc -library-path+=..../MyLibraries/bin/Main.mxml

The -library-path option includes the SWC files from the MyLibraries/bin folder for referencing any component referenced inside Main.mxml. For example, if Main.mxml is referencing any component which is part of the MyComponents.swc file, then you will need to include MyComponents.swc into the -library-path option. This is similar to what you do by including JAR files in -classpath while compiling the Java source.

Installing Flex Builder 3

Flex Builder is the official IDE for creating Flex applications, and as I mentioned earlier, it is built on the Eclipse platform. Flex Builder provides very powerful coding tools, such as MXML, ActionScript, and CSS editors with syntax coloring and hinting, statement completion, code collapse, interactive step-through debugging, code profiling; and very importantly, a rich visual-designing user interface layout, and more.

Later in this book, I will be using this Flex Builder IDE for demonstrating Flex code examples.

Also, make a note that if you are installing Flex Builder 3, then you need not install Flex SDK separately because Flex Builder 3 installs Flex SDK automatically as a part of its installation. You will learn more about the directory structure that the installer creates when you install Flex Builder in Flex Builder installation directory structure section.

Unlike the open source Flex SDK, Flex Builder is a licensed product from Adobe which you need to buy. But you can download a 60-day evaluation copy from Adobe's web site at http://www.adobe.com/go/flex_trial. Flex Builder 3 is available on Windows, Mac OS, and Linux operating systems.

Flex Builder comes with two different installation options. They are:

Flex Builder as a standalone IDE: This option installs Flex Builder as a standalone IDE with only the Flex perspective. So if you need to work on a Java project, go for Flex Builder plugin installation on top of Eclipse or install JDT (Java Development Tools) in Flex Builder to support Java development. You can download JDT from http://www.eclipse.org/jdt/.Flex Builder as an Eclipse plugin: This option installs Flex Builder as an Eclipse plugin on an existing Eclipse IDE. Before installing it, you must first install Eclipse 3.2, or higher. So make sure you have done that.

Note

An Eclipse perspective is a collection of windows/views and a mechanism of providing task-oriented interactions in the IDE that are associated with a particular programming language.

Flex Builder 3 installation consists of the following main components:

Flex SDKThe Eclipse-based IDE (Integrated Development Environment)Flash Player 9 or higher versions

Now, assuming that you have downloaded Flex Builder 3 and are ready for installation, follow these steps. Please note that depending on which operating system you use, these steps will change. So please refer to the Adobe installation documentation at http://www.adobe.com/support/documentation/en/flex/3/releasenotes_flex3_fb.html#installation for installing it on Mac OS or Linux. There is only a one-step difference between installing Flex Builder as an Eclipse plugin and a standalone. I have combined installation steps for both into the following tutorial.

Start the installation by double-clicking on the downloaded file. A program, InstallAnywhere, should start. It may take a few minutes before the first screen appears. It is a good idea to close any running Windows applications (especially browser applications) because Flex Builder will install Flash Player 9 or higher.

The first screen will prompt you to choose a language. Choose the appropriate language from the drop-down list and click on the OK button to proceed.

The introduction screen will be displayed. Click on Next.

The next screenshot is the license agreement screen. Read the agreement, select the I accept the terms of the License Agreement option, and click on the Next button, as shown in the following screenshot:

Now you need to choose the installation folder. Click the Choose button to choose anything other than the default location. Now click on Next to proceed, as shown in the following screenshot:

The next screen will appear only if you are installing Flex Builder as an Eclipse plugin. In this step, you need to choose the existing Eclipse installation root folder so that the installation wizard can configure the Flex Builder plugin. This works only with Eclipse 3.2 or higher versions. Please skip this step if you are installing Flex Builder as a standalone version.

The next screen is an optional installation, but it is a quite important step because it prompts you to install the debug version Flash Player in each of your installed browsers on your computer. Installing the debug version of Flash Player is very important in order to use Flex Builder's debugger to debug Flex applications. So, for now, we will continue with the default selection and allow the install wizard to install the debug version of Flash Player. We will skip other optional components in this tutorial, so click on Next to proceed.

The following screen details the pre-installation summary of your selections throughout this install wizard. Just confirm that the details are correct and click on the Install button to begin the installation process.

The next screen shown notifies the user of the installation's progress. The install wizard will install all necessary files on your system, including Java Runtime Environment. This may take a while, so please be patient.

Once the installation is finished, you can launch Flex Builder 3 from Windows | Program Files | Adobe | Flex Builder 3.

Note

Adobe has a unique program called Free Flex Builder Pro for Education, where students and faculties can get a free licensed copy of Flex Builder 3 Professional. In order to register for this program, please visit http://www.adobe.com/products/flex/faq/#section-4.

Before we start using Flex Builder 3, let's have a quick look at its directory structure. The installer creates the following directory structure:

Directory

Description

Flex Builder 3

The top-level directory for Flex Builder

/configuration

A standard Eclipse folder that contains the config.ini file and error logs

/features

A standard Eclipse folder that contains the plugins corresponding to the features of Flex Builder

/jre

Contains Java Runtime Environment installed with Flex Builder, used by default when you run the standalone version of Flex Builder

/Player

Contains the different versions of Flash Player—the standard version and the debugger version

/plugins

Contains the Eclipse plugins used by Flex Builder

/sdks

Contains the different Flex SDKs for a directory description

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/.

Summary

In this chapter, you learned how to install and configure Flex 3 SDK and Flex Builder 3 on the Windows platform. You also learned about creating a Flex project and the various views available in the Flex perspective.

In the next chapter, you will learn about general Flex application architecture and MXML language. You will also start writing your first Flex program.

Chapter 2. Introduction to Flex 3 Framework