Creating Flex Applications with IntelliJ IDEA

Size: px

Start display at page:

Download "Creating Flex Applications with IntelliJ IDEA"

Barbara Cunningham
5 years ago
Views:

1 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 2. Flex SDK from You may also want to check 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 2. On the File menu, click New Project. The New Project wizard appears. Click Next. 3. Specify the project name, for example, MyFlexProject.

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

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

5 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=" <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=" <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).

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

7 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)?

8 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=" 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.

9 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 { } ]]> </mx:script> return mygreeter.creategreeting(mytextbox.text); 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.

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

11 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:

Chapter 8: Sizing and Positioning Components

145 Chapter 8: Sizing and Positioning Components Adobe Flex lays out components by determining their sizes and positions; it provides you with multiple options for controlling both sizes and positions.