[转] [Flash/Flex] Flex框架下的RIA开发现场--第2回 令开发更轻松的FB4的11项功能

http://bbs.9ria.com/thread-75804-1-1.html

第2回
令Flex开发更轻松的Flash Builder 4的11项功能
   Flash Builder 4的3大特性
    Adobe AIR/Flex应用程序的开发环境Flex Builder已在日前升级到了4.0版，并作为Flash平台的开发环境重新打造成新的品牌“Flash Builder”。
    本文将主要介绍Flash Builder 4中让开发更便捷的11个新功能。Flex Builder 4中列出了以下3大特性。
生产率的提高
【1】包资源管理器
【2】与FlexUnix的整合
【3】AsDoc的支持
生产率的提高（自动编码功能）
【4】缩进的修正
【5】自动生成Getter/Setter方法
【6】模板的支持
【7】事件处理器的自动生成
设计/开发的协作工作流
【8】与Flash Catalyst的协作
【9】与Flash CS5的协作
【10】Flex主题
【11】以数据为中心的开发



Flash Builder 4的 “生产率提高”功能

□ 【1】包资源管理器
    Flash Builder 4引入了“包资源管理器”。过去在Flex导航器中，包层次较深的情况下必须打开很多目录，而现在随着包资源管理器的引入使访问文件变得愈加便捷明了。



图1　包资源管理器


    此外，还能以树形结构查看编译时会用到的库（SWC文件），可以看到其中的类、接口和方法。



図2　在包资源管理器中查看.swc文件中包含的类


    对于代码目录下的类和MXML文件，以前只能在大纲视图中展开层次结构，现在可以在包资源管理器上显示了，更方便查看与编辑。



図3　包资源管理器中能显示类的层次关系

□ 【2】和FlexUnit的整合
　  在Flash Builder 4中得到增强的是，整合了FlexUnit单体测试框架。
    在先前的开发环境（Flex Builder），需要将单体测试所需的类库复制一遍，再写个让测试运行的TestSuite类，或者使用Ant来执行。而在Flash Builder 4中，单体测试的作成和执行将变得更简单。
    在右键菜单中选择【文件】|【新建】，根据向导便可生成 与FlexUnit 4、FlexUnit 1相应的测试类。
测试用例类
测试套件类




図4　新建时可以选择“测试用例类”


    另外，只要预先指定待测类，再选择待测方法，Flash Builder 4便能自动生成相应的测试方法的骨架。
    运行作成的单体测试时，在所选类上右击鼠标，点击【FlexUnit测试】，即可在FlexUnit结果的视图中查看测试结果。
    由于单体测试类的生成和执行都变得更为容易，要做的仅是添加测试所需部分便可，这能让开发者高效地进行测试和修改，从而使应用程序的质量获得提高。




図5　在FlexUnit视图显示测试的执行结果



□ 【3】ASDoc的支持
    在Flex Builder 3中，要查看“ASDoc”，必须先选择变量或类，再按F1或从窗口选择【帮助】。而在Flex Builder 4中，只要代码编辑器中选择类、方法、变量或获得焦点，ASDoc便能以悬浮框的形式显示出来。
    除了悬浮框之外，还增加了ASDoc视图。如此，在编码过程中便能确认内容。
  Flash Builder 4的“编码自动化”功能

□【4】缩进的修正
     在做复制粘贴代码等操作时，代码的缩进格式常常会被破坏。在Flash Builder 4的文本编辑器中，选择代码，按<Ctrl> + <I>或在右键菜单中选择【代码】|【修订缩进】便会自动整理 。

□【5】Getter/Setter的自动生成
    增强了重构功能。Flash Builder 4开始，支持在Eclipse的Java开发中非常熟悉的Getter/Setter自动生成功能。
    选择变量，右击鼠标，选择【代码】|【生成Getter/Setter】。在弹出对话框中，完成【重命名变量】、【Getter/Setter的生成选择】、【在哪里插入代码】的选项，点击OK按钮，Getter/Setter的代码便生成了。

□【6】模板的支持
    新建ActionScript类或MXML文件时，支持模板功能。在Flash Builder中可编辑预置的模板，然后在代码提示框中确认即可。
    可以输出编辑好的模板，在团队组织中应用。通过共享遵循编码规范的初期文件、可以省下花在写头文件和注释等既定文字上的功夫。




図6　模板编辑对话框



□【7】事件处理器的自动生成
    在设计视图中排列着各种组件，通过鼠标点击就能生成点击或点选事件的事件处理器。
　  即使没有真正写好被调用的事件处理器的内容，通过本自动生成功能可以避免产生异常。因此，这是一个在做原型开发等快速对应时非常有用的功能。
    而且，该事件处理器的方法名也是由本功能自动生成的。


使用Flash Builder的设计／开发协作工作流

□【8】与Flash Catalyst CS5的协作
    在Adobe CS5中增加了一个新的工具Flash Catalyst CS5，它能使在Photoshop、Illustrator等设计工具中建立的图像便捷地应用到Flex应用程序UI中。
Flash Builder能直接以Flex工程的形式读取由Flash Catalyst建立的工程。
    这样一来，“先由设计人员作成包含交互元素的UI，再由开发者添加逻辑”的协作方式将变得更容易进行。详情请参考连载的第1回《改变了工作流的Flex 4及Flash Catalyst基础》。

□【9】与Flash CS5的协作
    增强了同時使用Flash Builder和Flash CS5时的协作功能。Flash Builder能管理从读取Flash CS5的文件。
在Flash CS5中，能将Flash Builder作为ActionScript的编辑器来使用。在Flash Builder中，可通过按Flash CS5的快捷键（<Ctrl> + <Enter>）来调用Flash动画发布。
    可以进行“在Flash Builder中进行素材管理和记录代码，而在Flash CS5中进行设计和处理动态内容”的协作方式。

□【10】Flex主题
    能够将使用CSS等作成的应用程序样式作为Flex主题管理起来。排列组件（控件）作成UI之后，可通过属性选择主题来改变应用程序的样式。
    主题能运用独立作成的素材，因此可在Flash Builder中读取设计者用其他工具作成的主题，在应用程序框架建成后的阶段投入使用。

□【11】Flash Builder 4的人气功能 -- 以数据为中心开发
    在Flash Builder 4中大幅增强的功能之一是“以数据为中心开发”。
    先前的版本中，能从WebService（WSDL）生成Service，也能从数据库（MySQL）建立应用程序。但有些情况下，因SOAP版本问题会有一些限制，只支持PHP、ASP.NET、以及在WTP工程中建立的J2EE(Java EE)。
    以数据为中心开发是Flash Builder的特性之一，比3.X版本得到大幅改进。虽然不再支持从数据库建立应用程序，但能连接以下服务类型。
BlazeDS
Live Cycle Data Services
PHP
ColdFusion
HTTPサービス
Webサービス
XML


    另外，还具有“扩展点”，能够括展可连接的服务。除此之外，还可自行建立服务，甚至可能公开成为新的可连接服务类型。
以数据为中心的开发不仅能连接服务，还能将调用服务的结果与List，ComboBox等绑定，几乎不用写多少代码就能作出显示数据的应用程序。


建立BlazeDS 4的应用程序体验一下“以数据为中心开发”吧。
    下面，我们使用和Flex一起升级到4.0版的BlazeDS样板程序来介绍一下以数据为中心的开发功能。
请读者朋友们也按照操作步骤动手做一下。

□步骤0．Flash Builder 4的环境搭建
    请参照相关文章，此处不再赘述。

□步骤1．下载BlazeDS 4
    BlazeDS 4能从Adobe官方网站上下载。
    本文使用的是与Tomcat捆绑在一起易于使用的BlazeDS turnkey。

□步骤2．添加RDS服务器设置
    为了能在Flash Builder 4中取得服务一览表，需要添加RDS（远程数据服务）服务器的配置。在解压后的文件夹中，找到blazeds-turnkey-4.0.0.14931\tomcat\webapps\samples\WEB-INF\目录下的web.xml，配置其中的RDSDispachServlet项目。
    <servlet>
        <servlet-name>RDSDispatchServlet</servlet-name>
        <display-name>RDSDispatchServlet</display-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
        <init-param>
            <param-name>useAppserverSecurity</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>10</load-on-startup>
    </servlet>

    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServlet</servlet-name>
        <url-pattern>/CFIDE/main/ide.cfm</url-pattern>
    </servlet-mapping>


    为防恶意用户访问到服务一览，一般会进行安全设置。这里，由于作为开发环境使用，就不做安全设置了。
通过将<init-param>的useAppserverSecurity设为false，访问时将不进行认证。
    配置真实环境时，有时不进行RDSDispatchServlet的设定，请根据需要合理配置useAppserverSecurity。□步骤3．启动服务器
    首先，进入BlazeDS turnkey解压后的sampledb目录，运行startdb命令行脚本，启动BlazeDS样例程序所使用的数据库。
    然后，通过运行blazeds-turnkey\tomcat\bin下的startup命令，来启动blazeds-turnkey附带的tomcat，便能访问BlazeDS了。
    打开浏览器，输入"http://localhost:8400/samples"来确认启动成功。



图7　BlazeDS的样例页面


□步骤4．建立Flex工程
    新建Flex工程，在服务器技术中选择“J2EE”，勾选“使用远程对象方法服务”，并选择“BlazeDS”。



图8　建立工程

□步骤5．配置服务器
    输入将连接的BlazeDS配置信息。




图9　配置J2EE服务器
［Root文件夹］
C:\dev\blazeds\blazeds-turnkey-4.0.0.14931\tomcat\webapps\samples（请根据Blaze的安装目录修改相应的路径）
［Root URL］
http://localhost:8400/samples/
［Context Root］
/samples

□步骤6．配置数据和服务连接
    建立工程后，需要进行配置数据和服务配置。在“数据和服务”视图点击“数据和服务连接”，显示向导画面。在服务类型中选择BlazeDS图标。



图10　选择服务类型


    显示服务器的RDS认证设置对话框。由于在步骤2里面，将useAppserverSecurity设为了false，这里就选“不需要密码”，再按OK按钮，就会显示服务一览。




图11　认证的配置
    勾选ProductService，按下完成按钮，就会生成相应的调用Service的Action Script类以及
以返回的数据模型Product类。





图12　选择读取对象


□步骤7．控件和绑定
    以设计模式打开主MXML文件，配置显示数据一览用的控件DataGrid。
    在“数据和服务”视图中，从设定好的服务中选择取得产品一览的方法“getProducts()roduct[]”,将其拖拽到设计视图中的DataGrid上。




图14　设置服务的方法和数据网格


    显示数据绑定对话框。



图15　数据绑定对话框


　如图，点击OK按钮，就配置好了在调用ProductService的getProducts方法时，返回的Product类的属性与DataGrid项目的绑定。□步骤8．确认动作
    将工程保存并运行，就可以确认通过浏览器访问Tomcat，产品（product）数据一览在DataGrid上显示出来了。




图16　根本没有编码，产品（product）数据一览就显示在了DataGrid中！



    如此，若只是取数据，即使不手动写Flex代码也可以做出调用服务来显示结果的应用程序。


Flex 3的项目也能用Flash Builder来提升生产率
    Flex Builder更名为Flash Builder 4，引入了包资源管理器、整合了FlexUnit4、又增加了以数据为中心开发等重要功能。
    还改善了编码功能，使其更易于使用。我预期能显著地获得3大特性之一的生产率提高。 
    Flash Builder 4不仅支持Flex 4、还支持Flex 3。Flex 3的项目也可通过导入开发环境而轻松编码，为生产率的提高做出贡献。