Creating Flex Applications with IntelliJ IDEA

In this tutorial you will:

1. Create an IntelliJ IDEA project with Flex-enabled module

2. Create Ant build configuration to compile and run Flex application
3. Create a Flex application
4. While editing, try hands-on the Flex-aware coding assistance and quick fixes
5. Run Flex application

Prerequisites

To develop Flex applications with IntelliJ IDEA, download the following software:

1. The latest IntelliJ IDEA EAP build from http://www.intellij.net/eap

2. Flex SDK from http://www.adobe.com/products/flex/downloads/

You may also want to check http://www.adobe.com/support/documentation/en/flex/ for the latest

information about Flex itself, including the language reference.

Getting Started

First you need to create a project with a Flex-enabled module and an Ant build configuration, to
compile, run and debug Flex applications.

1. Run IntelliJ IDEA.

2. On the File menu, click New Project. The New Project wizard appears. Click Next.

3. Specify the project name, for example, MyFlexProject.

4. Leave the option to create source directory selected and click Next.

5. Select Flex and click … to specify the path to the folder where you installed the Flex
SDK. Click Finish.
Now, when the project is created we’re about to add the Ant build configuration:

1. Create two files: Ant build file build.xml and configuration properties file
local.build.properties To do that, right-click src folder in Project View and select New, then
File and type file name in the dialog box. IntelliJ IDEA opens XML editor for each created file.

2. Create two Ant targets for compiling and running your Flex application. To do that, paste the
following code in the editor tab of the build.xml file:

<project default="compile" basedir=".">

<property file="local.build.properties"/>
<property name="mxmlc.jar" location="${flex.sdk.dir}/lib/mxmlc.jar"/>
<property name="deployDirectory" value="${deploymentPath}"/>
<property name="testApplication" value="${testAppPath}"/>

<target name="compile">
<java
jar="${mxmlc.jar}"
fork="true"
maxmemory="512m"
failonerror="true">
<arg value="+flexlib=${flex.sdk.dir}/frameworks"/>
<arg line="-load-config+=flex-config.xml" />
<arg line="-source-path ."/>
<arg line="-output='${deployDirectory}/${testAppFileName}'"/>
</java>
</target>

<target name="run" depends="compile">

<exec executable="${testApplication}" spawn="yes" dir="${deployDirectory}">
<arg line="'${testAppFileName}'"/>
</exec>
</target>
</project>

3. Define the properties that Ant configuration will use to build your application. To do that,
paste the following code in the editor tab of the local.build.properties file,:

flex.sdk.dir=D:/Libraries/flex
testAppPath=C:/Program Files/Mozilla Firefox/firefox.exe
testAppFileName=application.swf
deploymentPath=D:/myFlex

where:
- flex.sdk.dir is the path to Flex SDK installation folder

- testAppPath is the path to the Web Browser or any other SWF viewer that will be used
to display the application.

- testAppFileName is the application file name

- deploymentPath is the path to the folder where the application will be created. If it does
not exist, IntelliJ IDEA will create it before deployment.

For more information about Ant build scripts, check out http://ant.apache.org

Now everything is ready to create the Flex application from scratch. Let’s try it on the following
example.
The Classic Example

We will take the classic example of all times, Hello World, and implement it in Flex.

1. Create the Application.mxml file in the src folder and open it in the editor. Then, paste
the following code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="IntelliJ IDEA Sample Flex Application" height="20%"

width="30%" paddingTop="10" paddingLeft="10" paddingRight="10"
paddingBottom="10" id="mainPanel">

<mx:Button label="Click Me" click=" mx.controls.Alert.show('Hello,

World!')"/>

</mx:Panel>

</mx:Application>

This code defines a panel, containing a single button labeled Click Me. When you click
this button, a message saying “Hello, World” appears.

2. Now, we need to create the configuration file that describes the Flex application
structure. In the editor tab of the flex-config.xml file, paste the following code:

<flex-config xmlns="http://www.adobe.com/2006/flex-config">
<compiler>
<debug>true</debug>
</compiler>
<file-specs>
<path-element>Application.mxml</path-element>
</file-specs>
</flex-config>

To see how it all actually works, bring up the Ant tool window by clicking the Ant Build button
on the rightmost IntelliJ IDEA window side, click + on the toolbar, then locate build.xml we just
created. After IntelliJ IDEA recognizes the file, right-click the Run target and select Run target
from the context menu.

IntelliJ IDEA will then invoke Flex compiler which is bundled with Flex SDK, compile the
application and show it to you via the viewer you specified (Firefox, for an instance).
Let’s modify the code slightly to see how IntelliJ IDEA coding assistance works with Flex code.

Start with adding some more controls. Say, we don’t want the app to simply say “Hello, World”,
but we want a personalized greeting instead. For that, we’ll need some additional controls. Type
the following code to Application.mxml after mx:panel opening tag:

<mx:Label text="Type your name:" top="15" left="15"/>

<mx:TextInput id="myTextBox" width="150" top="15"/>

While typing this code, you can press CTRL+SPACE almost at any time to get the quick list of
appropriate choices for an element, attribute or attribute value. IntelliJ IDEA completely
recognizes everything and offers full assistance. For example, tag and attribute names, values,
etc.

To better arrange the controls, let’s wrap them with an HBox. For that, select the code we just
typed, press CTRL+ALT+J and T, and then simply type mx:HBox.
This will wrap our selection with the <mx:HBox> tag. You can specify all the required attributes
right away, with full coding assistance still available.

<mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10"

paddingLeft="10" paddingRight="10">

<mx:Label text="Type your name:" top="15" left="15"/>

<mx:TextInput id="myTextBox" width="150" top="15"/>

</mx:HBox>

Let’s write some code that produces the greeting. Also, this will demonstrate how IntelliJ IDEA
recognizes custom packages and other resources.

Right-click the src folder and select Package. Type MySamplePackage and click OK.

After that, create the Greeter.as file in the newly added package. Double click it to open the
editor. It’s important that the class name and the file name be the same. Type the following code
in the editor, enjoying the Flex-aware coding assistance that supports all language elements.
package MySamplePackage {

public class Greeter {

public function createGreeting(name:String) {

var greetingText = 'Hello, ';

greetingText += (name.length < 1) ? 'Anonymous' : name;

return greetingText;
}

Notice that IntelliJ IDEA highlights some errors in this code: they are underlined. Hover your
mouse over them to see what’s wrong. In this case, we forgot to specify the type for a variable
and a function result. Click the erroneous code and press ALT+ENTER. All you need to fix the
error is to pick a solution from the list.

Now go back to the Application.mxml file. First of all, we need to add the reference to our
newly created package so that it would be available in the code.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:x="MySamplePackage.*">

Let’s add an instance of Greeter element to the code. Type the following line:
<x:Greeter id="myGreeter"/>

Notice that coding assistance already recognizes the instance of Greeter.

IntelliJ IDEA can help us even with the code inside of mx:Script blocks. Here we’re creating the
function that will pass the value of text input to the createGreeting method and return the result
as string, right in our Application.mxml file.

<mx:Script>
<![CDATA[

function greetMe(name:String):String {

return myGreeter.createGreeting(myTextBox.text);

}
]]>
</mx:Script>

Notice that coding assistance provides the complete cross-resolution between the active script
files and mxml files, plus it detects various code errors — in this case, an unused parameter
name, which you can fix instantly with ALT+ENTER.
Now let’s slightly modify our push button, so that it will display the new alert text. To do that, in
the editor tab of the Application.mxml file modify the mx:Button control:

<mx:Button label="Greet" click="mx.controls.Alert.show(greetMe())"/>

Now we’ll see how it works with all our changes. To do that, invoke the Ant build tool window
and execute the Run target again.
Now, let’s add a color picker that will let us change the background color of our application. For
that, add the following element to the source code of the Application.mxml file, just after the
mx:TextInput element.

<mx:ColorPicker id="mainColorPicker"

change="mainPanel.setStyle('backgroundColor',mainColorPicker.value);"
selectedColor="0xFFFFFF"/>

As you type, notice that inline script coding assistance is available even in the attributes (in this
case, the change event handler). Run the application again, and play with the color picker to see
the result: