getting started with flex2

8/15/2019 getting started with flex2

1/14

Getting Started with Flex 2.0By Eric Anderson

Flex 2.0 Product Descriptions

Flex Builder 2.0

Flex Builder 2.0 IDE provides advanced visual design, intelligent code editing,

debugging, and automated testing for delivering professional Flex applications.

Flex SDK 2.0

The Flex SDK includes the command line compiler, the Flex Framework 2.0, and

documentation required to develop, compile, and deploy Flex applications. This is the

equivalent to the Java Developer Kit (JDK) or .NET Framework.

Flex Enterprise Services 2.0

Flex Enterprise Services 2.0 product line provides data services for building data-

intensive applications. Flex Enterprise Services product provides the following dataservices: Messaging Services (for publish/subscibe and data-push messaging), Data

Management Services (which enables data paging, data synchronization, and

occasionally connected applications), RemoteObject services, and web services support.

Flex Charting 2.0

Flex Charting feature provides a rich library of interactive charts and graphs that enables

rich data dashboards and interactive data analysis.

Flash Player 8.5Flash Player 8.5 provides a high-performance, reliable client runtime environment

necessary for running applications built with Flex 2.0.

Installing the Software

To get started building Flex applications, follow these steps:

1. Download the installers for Flex Builder 2.0, Flex Enterprise Services 2.0, FlexCharting 2.0 and Flash Player 8.5.

2. Install Flex Enterprise Services 2.0. This enables the Flex Builder installer todetect that Flex Enterprise Services is available and automatically configure the

product.Note: Flex Enterprise Services requires a J2EE application server. If you already use a

supported J2EE application server (see the list of application server supported

http://labs.adobe.com/technologies/flexenterprise_services2/ ), install there. If you do not

have an application server, Flex Enterprise Services includes an integrated JRun

application server to help you get started quickly.

3. Install Flex Builder 2.0 in the default location.


2/14

4. Install Flex Charting 2.0. The Flex Charting installer recognizes the location ofthe Flex Builder installation directory and prompts you for the correct location to

install the charting components. If the installer does not suggest a location, install

charting components in the {Flex Builder root location}\Flex Framework2\frameworks\libs directory.

Youre now ready to create your first Flex project.

Setting up a project

After you install all the Flex products, you must create a Flex project inside of Flex

Builder for coding your first application.

To create a Flex project:

1. Start Flex Builder.2. Select File > New > Flex Project.3. In the New Flex project dialog box, select No, and click Next.

4. In the next dialog box, enter HelloWorld for the name your project. Then enter alocation where you want your project files to be stored. Finally, name the Main

application file HelloWorld.mxml , and click Finish.


3/14

You are now ready to start coding your first Flex application.

Coding your Application

After you set up your project, your Flex Builder IDE should look like the following

image:

To build a simple Hello World application:


4/14

1. In Source mode in Flex Builder, copy and paste the following code into your file:

Your Flex Builder application should look like the following image:


5/14

2. To compile and view your application, you can select the green Run application

button, or you can select Run Tab > Run. A window that lets you configure the compilerand debug properties of Flex Builder, as the following image shows:


6/14

3. To configure Flex Builder to run and debug code, click the New button on the windowto create a Flex Builder configuration.


7/14

4. Depending on your needs, you can change the name of this configuration or change theURL paths to launch the application for running or debugging. The following image

shows how you can change the configuration to load the SWF file (instead of the HTML

wrapper) directly for running, but leave the debugging configuration in its default

configuration.


8/14

5. When your configuration is ready, click Apply, to apply the configuration changes and

then select Run. This invokes the MXML compiler and loads the application in Flash

Player. Your application looks like the following image:


9/14

Using Flex Enterprise Services

Now that you have a simple Flex application built, lets build a small application that

uses Flex Enterprise Services messaging capabilities.

Before we start coding, we must configure the Flex Builder compiler to be able to build

messaging-enabled applications.

To configure the compiler:

1. Select Project > Properties. A window like the following appears:


10/14

2. Select the Flex Compiler option, and add the following compiler argument to the

Additional Compiler Arguments input:

-services {fes install directory}/jrun4/servers/default/samples/WEB-INF/flex/flex-

enterprise-services.xml

Note: You must change the location to match your installation.

3. Click Apply, and then click OK.

4. Copy and paste the following code over your previous Hello World application.

import mx.messaging.messages.*;

import mx.messaging.events.*;

public function initApp() {

consumer.subscribe();

}


11/14

public function sendMessage(messageText:String):void

{

var message:AsyncMessage = new AsyncMessage();

message.body = publishName.text;

producer.send(message);

}

public function handleMessage(event):void {

subscribeName.text=event.message.body

}

]]>

Your application in Flex Builder looks like the following image:


12/14

5. To compile and view your application, you can select the green Run applicationbutton, or you can select the Run Tab > Run. You already configured Flex Builder to

compile and run the application, so the application opens without you having to configure

anything. The following example shows the application:


13/14

This example has slightly more code than the previous Hello World example, so lets

look closer at what is happening. Starting from the top of the MXML file, the followingnotable things occur:

The initialize() method can be assigned for any component in the library. Inthis sample, we applied it to the Application class. You can also apply it to visual

classes like . The initialize

event is called whenever that component (in this case the Application class) is

initialized when it is loaded by the player and visually created on the application

Stage.

Notice the block of code. This code is written in ActionScript ,which is an implementation of ECMA script. (JavaScript is also a derivative of

ECMA script..) You can add ActionScript functionality to your MXML inline (as

in this example) or you can build classes using only ActionScript.

The Producer and Consumer MXML tags define how this application publishesand subscribes to the Flex message service. Service-specific details like serverlocations and destinations are provided at compile-time through the flex-

enterprise-services.xml file that you added to the Flex Builder compiler

arguments.

Notice the change event that you declared on the TextInput control. This meanswhenever a change event on the control is triggered (by typing a keystroke) the


14/14

sendMessage function is called.

Congratulations. Youve just built your first Flex application.

getting started with flex2

Documents

Transcript of getting started with flex2