使用IntelliJ_IDEA开发Flex应用

使用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”任务，现在我们可以看到我们修改后的结果。

评论

7 楼 rainlife 2008-02-22  

scud 写道

rainlife 写道

scud 写道

全手工? ...

是手工翻的。

汗...

我是说搭界面全用手工写? 那还是用Flex Builder吧

我也汗一个，呵呵，不好意思，以为是说翻译的事。

6 楼 scud 2008-02-22  

rainlife 写道

scud 写道

全手工? ...

是手工翻的。

汗...

我是说搭界面全用手工写? 那还是用Flex Builder吧

5 楼 rainlife 2008-02-15  

scud 写道

全手工? ...

是手工翻的。

4 楼 scud 2008-02-15  

全手工? ...

3 楼 rainlife 2008-02-14  

dellsoft 写道

好像是翻译 idea blog上的文章吧！

是的朋友，就是翻译的idea上面的文章。

2 楼 foodyi 2008-02-13  

为什么 adobe自己不开发个 ide像 flash那样的~
是不是有点重复

1 楼 dellsoft 2008-02-11  

好像是翻译 idea blog上的文章吧！