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

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

第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导航器中,包层次较深的情况下必须打开很多目录,而现在随着包资源管理器的引入使访问文件变得愈加便捷明了。

[img]http://dl.iteye.com/upload/attachment/447366/e28226b5-68e0-34f3-abb5-cf35625011d0.jpg[/img]

图1 包资源管理器


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

[img]http://dl.iteye.com/upload/attachment/447368/00205886-1051-3cd3-93cf-0e68cb8f9189.jpg[/img]

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


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

[img]http://dl.iteye.com/upload/attachment/447370/a3caee55-dd48-30b1-a3ca-d357abb78800.jpg[/img]

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

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


[img]http://dl.iteye.com/upload/attachment/447372/e4b135d8-5420-3351-bfab-fac57aeea2fa.jpg[/img]

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


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


[img]http://dl.iteye.com/upload/attachment/447374/bfa72e1b-e1c6-310c-ac8e-c9d151543d40.jpg[/img]

図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中可编辑预置的模板,然后在代码提示框中确认即可。
可以输出编辑好的模板,在团队组织中应用。通过共享遵循编码规范的初期文件、可以省下花在写头文件和注释等既定文字上的功夫。


[img]http://dl.iteye.com/upload/attachment/447376/67952bb7-6df5-3554-98b5-43875f49f8b0.jpg[/img]

図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"来确认启动成功。

[img]http://dl.iteye.com/upload/attachment/447378/7d2323a5-f413-32db-83a9-f95b2ab87e98.jpg[/img]

图7 BlazeDS的样例页面


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

[img]http://dl.iteye.com/upload/attachment/447380/6c2d45da-2d81-346d-9026-aa49b87e671c.jpg[/img]

图8 建立工程

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

[img]http://dl.iteye.com/upload/attachment/447382/9f29d468-67c8-358b-96cb-f8c97a50639e.jpg[/img]


图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图标。

[img]http://dl.iteye.com/upload/attachment/447384/6eafb9d9-a60d-3dc3-a9e5-d859d9c4ef60.jpg[/img]

图10 选择服务类型


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


[img]http://dl.iteye.com/upload/attachment/447386/59878f22-b433-3dda-aac7-e35b84c24b9c.jpg[/img]

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


[img]http://dl.iteye.com/upload/attachment/447388/59189c4d-c9e4-3a71-97cd-9f1c3ff31e5c.jpg[/img]

图12 选择读取对象


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


[img]http://dl.iteye.com/upload/attachment/447390/4b6e9ace-f40a-3c1c-a6ed-caa737412bce.jpg[/img]

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


显示数据绑定对话框。

[img]http://dl.iteye.com/upload/attachment/447392/68da093e-365f-382e-bbf2-4fb9844037b1.jpg[/img]

图15 数据绑定对话框


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


[img]http://dl.iteye.com/upload/attachment/447394/23353a32-a4fc-3c68-a7a9-aa48d98a13aa.jpg[/img]

图16 根本没有编码,产品(product)数据一览就显示在了DataGrid中!


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


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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值