使用IntelliJ_IDEA开发Flex应用
在这个指南中,你将会:
1. 使用Flex模块来创建IntelliJ IDEA 工程
2. 使用ant来编译和运行Flex应用
3. 创建一个Flex应用
4. 代码补助与快速修复
5. 运行Flex应用
先决条件:
使用IntelliJ IDEA,开发Flex,需要首先下载下列软件:
1. IntelliJ IDEA EAP :http://www.intellij.net/eap
2. Flex SDK :http://www.adobe.com/products/flex/downloads/
你可能还需要从http://www.adobe.com/support/documentation/en/flex/ 上查看关于Flex的最新消息,包括语言参考。
开始
首先你需要创建一个Flex模块的工程和ant文件来编译、运行及调试Flex应用。
1. 运行IntelliJ IDEA
2. 打开”File”菜单,单击”New Project”,弹出”New Project”向导,选择”Next”。
3. 指定项目名称,例如:MyFlexProject。
4. 保留创建源目录的选项,并且选择”Next”。
5. 选中”Flex”并且选择”…”指定Flex SDK的安装目录,然后选择”Finish”
现在,当Flex项目被创建后,我们需要添加Ant构建文件:
1. 在Src目录创建两个文件:Ant构建文件buildexml 和 Ant配置文件 local.build.properties 。
2. 为Flex工程创建两个Ant的任务:打开build.xml文件,添加如下两个任务:”compile”和”run”。
<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. 定义构建Flex项目的properties配置。打开local.build.properties文件,添加如下的配置:
flex.sdk.dir=D:/Libraries/flex
testAppPath=C:/Program Files/Mozilla Firefox/firefox.exe
testAppFileName=application.swf
deploymentPath=D:/myFlex
说明:
flex.sdk.dir Flex SDK安装的路径
testAppPath 指定运行Flex应用的浏览器路径
testAppFileName Flex应用的名称
deploymentPath 发部Flex项目的目录路径。如果这个目录不存在,IntelliJ IDEA会在发布前创建。
关于Ant 的更多信息,请访问:http://ant.apache.org
现在一切先决条件已经具备,让我们首先试一试下面的例子。
经典示例
我们将采用一个非常经典的示例:Hello World,并且用Flex来实现它。
1. 在Src目录下创建Application.mxml文件,并且在编辑器中打开它。然后,拷贝下面的代码:
<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>
这段代码仅仅定义了一个面板(Panel),并且仅包含这个”Click Me”的按钮(Button),当你点击这个面板,将会弹出一个”Hello World”的消息框。
2. 现在,我们需要定义一个描述Flex程序结构的配置文件,在Src目录下创建文件flex-config.xml ,在编辑器中打开它,拷贝下面的代码:
<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>
它是如何工作的?单击Intellij IDEA右工具栏上的”Ant Build”按钮,打开Ant工具窗口,在工具条上单击”+”,然后选择我们刚才创建的build.xml文件。当Intellij IDEA加载build.xml文件后,右击”Run”这个任务并且在弹出右键菜单中选择”Run Target”。
IntelliJ IDEA会自己编译Flex,并且在你指定的浏览器中显示它。
让我们稍微修改一个代码,看一下IntelliJ IDEA对于Flex代码的代码补助功能:
首先从添加一些控制开始。嗯,我们并不想要仅仅说一声”Hello World”,我们需要改成更具人性化的问候。为此,我们需要添加一些附加的控制。再次打加Application.mxml文件,在<mx:panel>标签后试着输入下面的代码:
<mx:Label text="Type your name:" top="15" left="15"/>
<mx:TextInput id="myTextBox" width="150" top="15"/>
在输入这些代码的时候,你可以在任何时候通过”ctrl+space”快捷键来查看当然元素的代码提示。
IntelliJ IDEA能够正确地识别并且提供充分的提示,如标签、属性、值等。
为了更好的实现控制,让我们使用HBox来包装它们。为此,选中我们刚才键入的代码,执行”Ctrl+Alt+J”或”Ctrl+Alt+T”快捷键,然后键入"mx:HBox"。
这将使用<mx:HBox>标签来包裹我们刚才选中的代码。在代码补助的帮助下,你可以马上输入所有需要的属性。
<mx:HBox>
<mx:Label text="Type your name:" top="15" left="15"/>
<mx:TextInput id="myTextBox" width="150" top="15"/>
/mx:HBox>
让我们键入更多实现问候功能的代码,并且这将展示InteliiJ IDEA如何正确识别自定义包以及其它资源。
右击”Src”目录,选择”Package”,输入”MySamplePackage”,然后选择”OK”。
之后,在刚才创建的包中创建Greeter.as文件,并且在编辑器的打开它。类的名字与文件名必须相同,这点比较重要。在编辑框中输入下面的代码,并享受自动代码补助所带来的乐趣。
package MySamplePackage {
public class Greeter {
public function createGreeting(name:String) {
var greetingText = 'Hello, ';
greetingText += (name.length < 1) ? 'Anonymous' : name;
return greetingText;
}
}
}
注意InteliiJ IDEA高亮了代码中的一些错误:下划线。将鼠标移动在上面可以查看错误提示。在这个例子中,我们忘记了定义变量的类型和函数的返回类型。单击错误代码,并且使用”ALT+ENTER”快捷键,将会出现所有错误的解决方案的列表。
现在回到Application.mxml文件。首先,需要指定我们刚刚创建的包,这样就可以在mxml文件中使用Greeter.as文件中的代码:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:x="MySamplePackage.*">
让我们在代码中添加Greeter类的一个实例。输入下面的代码:
<x:Greeter id="myGreeter"/>
代码补助工具已经能够正确识别Greeter的实例。
IntelliJ IDEA甚至可以在<mx:Script>代码块中进行提示。在这里我们创建一个函数,这个函数将输入的值传递给createGreeting方法并且以字符串的形式返回结果。
<mx:Script>
<![CDATA[
function greetMe(name:String):String {
return myGreeter.createGreeting(myTextBox.text);
}
]]>
</mx:Script>
代码补助工具可以在script文件和mxml文件之间提供正确的提示,并且能够检查出各种不同的错误。这样,可以使用”ALT+ENTER”快速地解决错误。
现在让我们稍微改动一个这个Button,它将会显示新的提示信息。要做在这一点,打开Application.mxml文件,并且修改<mx:Button>的控制:
<mx:Button label="Greet" click="mx.controls.Alert.show(greetMe())"/>
重新运行Ant的”Run”任务,现在我们可以看到我们修改后的结果。