Getting Started With Flex2

Getting Started with Flex 2.0 By 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 dataintensive applications. Flex Enterprise Services product provides the following data services: 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.5 Flash 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, Flex Charting 2.0 and Flash Player 8.5. 2. Install Flex Enterprise Services 2.0. This enables the Flex Builder installer to detect 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.

4. Install Flex Charting 2.0. The Flex Charting installer recognizes the location of the 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 Framework 2\frameworks\libs directory. You’re 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 a location where you want your project files to be stored. Finally, name the Main application file HelloWorld.mxml , and click Finish.

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:

1. In Source mode in Flex Builder, copy and paste the following code into your file: <mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="absolute"> <mx:Label text="Hello World"/>

Your Flex Builder application should look like the following image:

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 compiler and debug properties of Flex Builder, as the following image shows:

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

4. Depending on your needs, you can change the name of this configuration or change the URL 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.

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:

Using Flex Enterprise Services Now that you have a simple Flex application built, let’s 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:

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/flexenterprise-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. <mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="absolute" initialize="initApp()"> <mx:Script>
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 } ]]> <mx:Producer id="producer" destination="chat-topic-jms" /> <mx:Consumer id="consumer" destination="chat-topic-jms" message="handleMessage(event)"/> <mx:VBox> <mx:HBox> <mx:Label text="Enter Name"/> <mx:TextInput id="publishName" change="sendMessage(publishName.text)"/> <mx:Button click="publishName.text=''" label="Clear Message"/> <mx:HBox> <mx:Label id="helloLabel" text="Hello"/> <mx:TextArea id="subscribeName" /> <mx:Button click="subscribeName.text=''" label="Clear Messages"/>

Your application in Flex Builder looks like the following image:

5. To compile and view your application, you can select the green Run application button, 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:

This example has slightly more code than the previous Hello World example, so let’s look closer at what is happening. Starting from the top of the MXML file, the following notable things occur: •

•

•

•

The initialize() method can be assigned for any component in the library. In this sample, we applied it to the Application class. You can also apply it to visual classes like <mx:Button initialize “doSomething()”/>. 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 <mx:Script> 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 publishes and subscribes to the Flex message service. Service-specific details – like server locations and destinations – are provided at compile-time through the flexenterprise-services.xml file that you added to the Flex Builder compiler arguments. Notice the change event that you declared on the TextInput control. This means whenever a change event on the control is triggered (by typing a keystroke) the

sendMessage function is called.

Congratulations. You’ve just built your first Flex application.