7thGen

Macromedia Flex Starter’s Kit

前言：看了我之前的1st View的朋友有需要自己试试而又遇到问题的，可以看看这个guide。

Step 1 下载和安装需要的软件

首先到这里下载所有的相关软件。

这个下面有三个目录：
fundamental: 这里面是支持性的软件，一个是Java运行环境(JDK)，一个是Flex的宿主服务，也就是一个运行JSP/Servlet的Web服务，这里我给出的是著名的开源软件Jakarta Tomcat。
server: 这里面就是Macromedia Flex Server的安装程序，运行Flex那些漂亮的界面必须这个软件的支持。

builder: 这是用来开发Flex应用的IDE(集成开发环境)。

全部拉下来就行了。

Step 2 安装和Java运行环境

到下载下来的fundamental目录下找到j2sdk-1_4_2_06-windows-i586-p.exe，这就是Java SDK的安装文件，这里我提供的版本是Sun的1.4.2_06版本，对于非专门的人员我只推荐使用Sun发行的JDK。注意这个软件是不定期升级的，你可以到这里来检查有没有更新的版本，但是注意不要去下载和安装高于1.4.*的版本，因为那是个很麻烦的版本。

运行这个下载的exe文件，按照提示进行就行了。安装前最好关掉所有其他应用，不然可能会要求你重启。以下我们假定你把它安装在C:\java目录下。

安装完成以后(如果要你重启，那就老老实实重启)，执行Start(开始)菜单的Run…(运行)，运行cmd.exe打开命令行，输入：
java -version(回车)

如果看到以下的提示，说明安装成功：

C:\Documents and Settings\Neo>java -version
java version “1.4.2_06”
Java(TM) 2 Runtime Environment, Standard Edition (build 1.4.2_06-b03)
Java HotSpot(TM) Client VM (build 1.4.2_06-b03, mixed mode)

接下来要设置JAVA_HOME环境变量，以保证后续的操作成功。邮件点击My Computer(我的电脑)，选择Properties，在对话框中选择Advanced(高级)页下面的Ebvirenment Variables(环境变量)按钮。在打开的对话框中选择New(新建)，这里有两个新建的按钮，上面一个是只对你当前登录用户有效的，下面一个是对任何用户都有效的，就我们目的来说，随便哪个都可以。在新建的对话框中输入：
Variable name(变量名): JAVA_HOME
Variable value(变量值): C:\java (如果你把JDK装在别的目录，要填入你安装的目录)

Step 3 安装和配置Jakarta Tomcat Web Server

同样在下载的fundamental目录下有一个jakarta-tomcat-5.0.28.tar.gz文件，这是一个压缩包。用Winzip或者WinRAR都可以解压。

解压后就得到

这里大部分的目录都不用管它，但是有两个目录要注意：
bin: 这里面有Tomcat的运行脚本，例如运行startup.bat可以启动Tomcat Server，运行shutdown.bat可以停止已启动的Tomcat Server。
webapps: 这是放Web应用的地方。Flex必须运行在某个Web应用下面，所以等下我们要往这个目录拷贝一些东西。

现在试着运行startup.bat，如果一切正常，它会打开一个命令行界面，显示一大堆启动信息。。。直到出现这样的两行：

2005-6-23 14:25:34 org.apache.catalina.startup.Catalina start
信息: Server startup in 62279 ms

就表示Tomcat启动完毕，这时打开你的浏览器，访问：

http://localhost:8080/

你应该可以看到那只传说中的傻猫和Apache Tomcat/5.0.28字样。Congratulations! 搞Java开发也没啥难的嘛。现在你要运行shutdown.bat来停止这个猫服务。

也许你还希望每次启动Windows这个dd都能自动的启动起来，这就需要把Tomcat配置为Windows的系统服务(Service)，这个将在最后介绍。

Step 4 安装和配置Macromedia Flex Server

在下载的server目录下就是Flex Server的安装和破解文件。

首先运行主安装文件flex-15-win.exe，开始之后不就就会提示输入Serial No.，这时你要运行下载目录里的那个keygen.exe，并且把它创建的那串序列号copy到安装程序中，然后就没啥了，全部装完，我假定你装在C:\Program Files\Macromedia\Flex目录下。你现在需要研究一下这个目录。

这里有很多东西，但是需要特别注意的是两个目录：
resources: 这里面有Flex所有组件的skin文件，一般是Flash格式的视觉设计，和一些后缀为as的脚本文件(ActionScript)。以后定制自己的个性化Flex界面就要从这里入手。
根目录: 这下面有两个war文件，一个是flex.war，这是Flex的服务器程序核心，另一个是samples.war，实在flex.war的基础上增加了一些例子，组成的一个Flex应用。

其他目录也都很重要，不过开始时不用管它。

现在把flex.war和samples.war这两个文件copy到你上一步安装好的Tomcat的webapps子目录下。然后运行Tomcat的startup.bat来启动服务，如果一切正常，你应该可以在启动信息中看到类似这样的几行：

信息: Installing web application at context path /flex from URL file:D:\lib\java\tomcat5\webapps\flex
06/23 14:47:15 INFO License Service: Flex 1.5 Full Commercial Edition enabled
06/23 14:47:15 INFO Macromedia Flex Build: 87315.134646

信息: Installing web application at context path /samples from URL file:D:\lib\java\tomcat5\webapps\samples
06/23 14:47:37 INFO License Service: Flex 1.5 Full Commercial Edition enabled
06/23 14:47:37 INFO Macromedia Flex Build: 87315.134646

(不一定是连着的，那些文件路径当然你的也和我不一定一样的啦)

服务起来之后，你会在webapps目录下看到两个新的子目录：flex和samples，这是Tomcat自动把那两个war文件解开以后产生的，所以你随时可以把webapps下的那两个war删掉了，当然不删也没啥问题，不过我还是建议你删掉它们。

现在打开浏览器，访问：

http://localhost:8080/samples

你应该可以看到Flex的范例页面，里面有不少Flex的例子，现在很值得花上些时间仔细的、一个不漏的把每个例子跑一遍，一方面检验你的安装，另一方面充分了解一下Flex的强大能力。研究完之后别忘了运行shutdown.bat停止Tomcat服务。

Step 5 安装和配置Macromedia Flex Builder

Flex Builder是MM基于Dreamweaver的框架开发的Flex的可视化开发环境，在里面你可以可视化的定制Flex应用界面，也就是后缀为mxml的那些文件。由于是基于DW的，所以它其实包含了DW的所有功能，也就是说你也可以在Flex Builder中编辑各种页面文件，完成JSP和Flex的整合之类的工作。

在下载的builder目录下，运行FlexBuilder1.5Installer.exe安装程序，安装中也会提示输入序列号，那么就用同一目录下的keygen.exe来生成你自己的序列号。

运行安装好的Flex Builder，你看到的是熟悉的类似DW的界面，没啥好说的，让我们赶紧进入下一个环节，开始自己的Flex之旅罢！

Step 6 建立自己的Flex开发环境和第一个应用

设计和开发Flex的应用需要使用Tomcat这类的服务器来运行后台程序和预览你设计的mxml文件。所以首先你要在Tomcat这里配置好一个你的开发环境。Let’s Go!

1、找到你的Tomcat的webapps目录。下面应该有一个名为flex的子目录。

2、选中flex子目录，按Ctrl+C，然后Ctrl+V来复制它，这会产生一个Copy of flex的目录，现在你可以把它改名为你希望的名字，例如flex_test。

3、找到flex_test\WEB-INF下面的web.xml文件，用任何支持UTF-8编码的编辑器打开它，里面有很多的参数配置，目前唯一建议你修改的是这两个：

Flex Test App
Flex Test Web Application

4、运行Flex Builder，在起始画面上选择Create New – Flex Site…

注意：
Local root folder: 是你的本地目录，相当于一个临时目录。
Flex server root folder: 是你的Tomcat上新建的那个Web应用的目录，在上图的例子中，我的Tomcat安装在D:\lib\java\tomcat5，而上面第2步新建的Flex应用在D:\lib\java\tomcat5\webapps\flex_test，那么就填这个目录。
URL prefix: 这个是说在浏览器上用什么样的URL访问你那个新建的Web应用，在Tomcat中，你可以把webapps目录看作根，webapps目录下的各个子目录****就对应 http://localhost:8080/**** 这样的URL，所以D:\lib\java\tomcat5\webapps\flex_test目录里的东西的URL前缀就是 http://localhost:8080/flex_test/ 。

5、你还可以选择More Settings…来进行其他设置，和在DW中设置站点差不多，不过一般没必要设置其他的东西了。点击OK就可以完成站点的初始化。Congratulations! 你已经完成了环境的配置，剩下的就是发挥你的创造力了。

作为检验，你可以试试下面的操作。

6、确认你的Site视窗中刚才建立的Flex Test Site处于选中的状态，在起始画面中选择Create New – MXML Application，Flex Builder会打开一个新的页面。

7、切换到代码视图，用下面的代码替换掉原来的：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Flex Simple Test Page">
<mx:MenuBar id="myMenuBar" width="100%">
<mx:dataProvider>
<mx:XML>
<menuitem label="MenuItem A" >
<menuitem label="SubMenuItem 1-A" />
<menuitem label="SubMenuItem 2-A" />
</menuitem>
<menuitem label="MenuItem B" />
<menuitem label="MenuItem C" />
<menuitem label="MenuItem D" >
<menuitem label="SubMenuItem 1-D" type="radio" groupName="one" />
<menuitem label="SubMenuItem 2-D" type="radio" groupName="one" />
<menuitem label="SubMenuItem 3-D" type="radio" groupName="one" />
</menuitem>
</mx:XML>
</mx:dataProvider>
</mx:MenuBar>
<mx:Panel id="main" title="Flex Simple Demo" width="100%" height="100%" resizeStartEffect="Resize">
<mx:TextInput x="46" y="27" id="txtInput" text="Hello, world!"  />
<mx:Button x="46" y="69"  label="Test" id="btnTest" click="lblOutput.text=txtInput.text" />
<mx:Label x="46" y="111" id="lblOutput" width="160" />
<mx:PieChart id="pieHRAnalysis" x="46" y="149"  dataProvider="{modelPieData.state}" width="320" height="320" showDataTips="true">
<mx:series>
<mx:Array>
<mx:PieSeries field="apples" labelPosition="callout" />
</mx:Array>
</mx:series>
</mx:PieChart>
</mx:Panel>
<mx:Model source="chartdata.xml" id="modelPieData"></mx:Model>
</mx:Application>

再切换回设计视图，你可以看到一个Flex的界面，上面有不少的UI控件，你还可以从顶上的工具条加入其他你想试试的控件。

8、保存你的这个新文件，例如叫做simple.mxml。

然后下载这个文件chartdata.xml放到跟它同一个目录下。

启动Tomcat服务(还记得怎么干吧)，然后在Flex Builder中选择在浏览器中预览，系统也许会提示你是否上传相关的文件，选是，然后等待系统上传文件到Tomcat的webapps目录，然后编译。。。然后一切顺利的话，你就可以看到你的第一个Flex App实际运行的样子啦！

BTW，你的画面中的那个饼状图可能没有这么好看，为什么呢？这个问题还是留给你去自己研究吧！

Bonus Step 将Tomcat部署为Windows Service

很久以前，Tomcat是不提供简单的办法实现这个功能的，除非你使用它的Windows Installer安装包。但是后来Tomcat的发行包中加入了一些必须的组件，使得将Tomcat配置为Windows服务变得十分简单。

首先找到你的Tomcat安装目录，进入bin子目录，在这个目录下打开一个命令行窗口，运行：
service.bat install(回车)

你应该看到类似这样的提示：

D:\lib\java\tomcat5\bin>service.bat install
Installing the service ‘Tomcat5’ …
Using CATALINA_HOME: D:\lib\java\tomcat5
Using JAVA_HOME: D:\java
The service ‘Tomcat5’ has been installed.

这表示这个脚本帮你建立了一个新的Windows服务，他的服务名为”Tomcat5″，而显示名为”Apache Tomcat”。现在打开你的Control Panel(控制面板)-Administrative Tools(管理工具)-Services(服务)，就可以看到这个服务了。

你可以在这里启动和停止Tomcat服务，不过这个办法其实并不一定好，因为你看不到提示信息。不过你可以在这里把这个服务设置为自动启动，这样你就不用每次手工启动这个服务了，尤其是你的Tomcat环境已经完全OK的情况下，这个还是有点意义的。

Bonus Step 关于Flex的其他资源

关于Flex最活跃的社区，毫无疑问是CFLEX。有兴趣研究Flex的同志一定要把首页那几个feed加到你的RSS Reader中去。