利用Flex 4.5 SDK和Flash Builder 4.5开发的web和移动参考应用（二）

创建web项目和移动项目快速列表

数据感知控制很重要，通常用在Flex项目中。在所有移动参考项目中，列表均用来显示数据及用户与列表之间的互动，从而深度挖掘应用。与之相类似，web项目使用列表及其他类似列表的组件来为终端用户提供数据及上下文信息的显示功能。

我们已对Spark List组件进行了优化，以便用于Flex 4.5 SDK的移动用途。另外，Spark数据表和Flex 4.5 SDk一同首次亮相。在两种情况下，很重要的是要了解如何借助显示数据的组件来创建高性能的条目渲染器。条目渲染器通常是罪魁祸首，它能够降低列表和列表组件的交互性和平滑性。在下列章节中，我们将向您提供在使用Spark Lists和Spark DataGrids创建高性能条目渲染器方面的几点建议。

在Web Shopping Cart应用程序中书写快速渲染器

条目渲染器是对列表组件显示数据界限的类。当滚动Spark List时，条目渲染器的重绘非常频繁，有时会影响用户的使用兴趣。高效、灵活的条目渲染器的书写工作将大大改善用户对移动或非移动应用程序列表的滚动体验。

 

在Shopping Cart web项目中，我们使用了若干自定义的条目渲染器。让我们来看一下ShoppingCartWeb.fxp项目中的ItemPreviewListRenderer.mxml。注意：该条目渲染器中不含无关的FXG元素，也未使用过多的数据绑定，也未存放过多的容器或组。无论是移动列表还是非移动列表，这些建议对于创建高性能的条目渲染器都很有用。

Spark List组件包含useVirtualLayout属性，默认设置为真。这表示当新的数据项滚入视图中时，可以重新使用条目渲染器。这在通过长条数据进行显示和导航时非常有用。

当创建或回收条目渲染器时，同时设置数据属性与需要显示的项。用户需要覆盖数据属性设置来管理数据设置。在ItemPreviewListRenderer.mxml中，我们可以注意到数据属性实际上是提供器对象的一个实例。设置时，数据属性被设置为ItemPresenter，然后设置为presenter类属性。可视化组件反过来又受提供器属性的限制，调用提供器的方法。这是证明如何使用提供器来封装逻辑的有力证据。

在移动Shopping Cart应用程序中书写快速渲染器

在开发ShoppingCart 移动项目时，我们需要重点关注的是对每个视图中使用的、包含Spark List组件的条目渲染器进行优化。我们不建议用户在Flex 移动项目中使用在web及桌面Flex项目中均很熟悉的默认Flex ItemRender类。我们为用户引入了专门面向移动优化的新条目渲染器类，其中包括LabelItemRender（显示一行文本的默认移动渲染器）及IconTemRenderer（显示文本及图像的默认移动渲染器），参见图2。

LabelItemRenderer

条目1

条目2

条目3

 

      图2：利用新的LabelItemRenderer类开发的简单SparkList

在创建Flex移动项目中使用的列表组件的简单文本条目渲染器时，用户所使用的基类是LabelItemRenderer。LableItemRenderer由UIComponent扩展而来，比ItemRenderer的尺寸要小得多；而ItemRenderer由Group扩展而来，承载的重量更大。LabelItemRenderer是移动Flex项目List组件的默认条目渲染器，对上述截图中显示的文本元素进行渲染。

LabelItemRenderer继承母列表组件中的LabelField属性，在“标签”文本元素中显示文本。标签是StyleableTextField中的实例之一。StyleableTextField对TextField 进行扩展，同时提供控制CSS样式的机制，控制文本显示（顾名思义）。虽然TLF文本在web应用程序和桌面应用程序中的应用情况很好，但是TextField比移动方案性能较好。TextField尤其用在移动应用程序中，此时滚动元素文字比较集中。

为实现文本框外最佳滚动性能，建议用户选择LabelItemRenderer。在书写条目渲染器时，从LabelItemRenderer中分出子类。一般来讲，我们照搬的是LabelItemRenderer中的实践和原则，如处理测量和布局的编程代码及过度使用数据绑定的灵敏度。

IconItemRenderer

条目1

条目2

条目3

 

          图3：利用新IconItemRenderer类开发简单SparkList

IconItemRenderer由LabelItemRenderer扩展而来。除LabelItemRender提供的文本显示功能之外，IconItemRenderer还提供其他显示元素，例如：

• 标签
• 信息
• 图标
• 装饰器
• iconPlaceholder

标签元素与LabelItemRenderer的元素相同，对渲染器显示文本界限。信息显示元素是二级（可选）文本显示元素，同时也是StyleableTextField的实例之一。

图标显示元素是BitmapImage组件实例之一。由于BitmapImage能够存储正在显示的可视化资源，所以我们在Flex 4.5 SDK中对BitmapImage做了增大处理，使其性能更加优越。图标元素是出现在上图显示的默认条目渲染器左端的图像（参见图3）。

 

装饰器元素是BitmapImage实例之一，通常设置为雪佛龙图标，默认出现在渲染器的右端。建议将装饰器设置为嵌入式图像资源，以实现最佳性能。

iconPlaceholder也是BitmapImage的实例之一，是图标图片加载时或消失时显示的图像。如同装饰器一样，我们建议iconPlaceholder的asset采取嵌入式资源，以实现最佳性能。

当用户需要自定义移动列表中的条目渲染器时，有三种选择：扩展UIComponent、扩展LabelItemRender或扩展IconItemRenderer。在Shopping Cart移动项目中，查看com.adobe.mobileshoppingcart.view.renderer包中ItemPreviewImageRenderer。该条目渲染器由IconItemRenderer扩展而来，利用定义好的现有显示元素。用户只要对必要的属性进行必要的设置，就可以得到平滑的滚动列表。

Spark DataGrid 控件的使用
 

在Expense Tracker web 项目中，我们使用的是Flex 4.5 SDK中的新控件SparkDataGrid。与MX DataGrid控件相比，SparkDataGrid做了很多改进。该控件借助Spark皮肤协议，完全支持可视化定制。另外，Spark DataGrid支持标题和项目的渲染，完全支持调整大小和分类等高级功能，完全可以访问、可编辑。用户通过查看CRUDWeb.fxp中的DataGridView.mxml，可以看到动作中的DataGrid。

 

DataGrid列的定义

Spark DataGrid控件具有类型I列表的列属性。列表应包括GridColumn对象。在Expense Tracker web应用程序中，用户借助设置空间就可以打开及关闭列。

在上述架构中，提供器存储着视图的所有状态。在本例中，提供器存储着用户目前打开的可视化列表。由于GridColumn属于视图对象，GridColumn无法满足置于共享CRUDLib Library 项目、与Expense Tracker移动项目共享的标准。

为解决这个问题，我们制作了一个新的接口和模型对象：

IgridColumnModel和GridColumnModel。IgridColumnModel仅是GridColumn视图对象的一种数据表现形式。主要提供器类存储着columnList ArrayCollection中的GridColumnModel对象列表。视图转而监听columnList ArrayCollection的变动，利用自定义的factory类来建立GridColumn视图对象实例。Factory类被称作GridColumnFactory，包含一个名为buildGridColumn()的静态方法，该方法取IgridColumnModel对象，返回GridColumn，从而使所有视图代码停留在相应的项目中，其状态仍然存放在共享提供器代码中。

与其他条目渲染器一样，在创建DataGrid条目渲染器时，我们应该注重渲染效率。下面几点建议可帮助我们创建DataGrid条目渲染器：

• 在GridColumn中创建格式化对象，而不是在条目渲染器中直接创建对象，从而减少需要创建的格式化对象的数目。另外，GridColumn内部支持格式化的应用，由此，可以对条目渲染器的标签属性进行格式化。
• GridItemRenderers应使用prepare()方法而非set data方法来初始化渲染器，执行更新。
• 请勿将过多的容器放入DataGrid条目渲染器中，也不要将不必要的显示元素添加到DataGrid条目渲染器中。提高性能的关键是对条目渲染器中的显示列表进行精心裁剪。

Web项目和移动项目中MX图表的使用

虽然Flex 移动项目中需要Spark组件，但也有例外，即允许使用ColumnChart、Barchart和PieChart等MX图表组件。当用户在Flash Builder 4.5中创建新的Flex移动项目时，图表组件已包含在项目的library路径中，这些组件在代码提示和设计视图中直接可用。Sales Dashboard web项目和移动项目均使用图表组件来显示财务信息。共享数据层及共享UI图表组件包含在DashboardChartLib.fxpl中。下面是web项目和移动项目借助Flex Library项目来共享UI代码的例子。DashboardMobile.fxp和DashboardWeb.fxp包含所有代码，这与图表组件有不同之处，图表组件直接面向web或移动尺寸外型（如移动专用的条目渲染器）。

Tablet应用程序的创建

我们在文中讲述的大部分内容都是关于“移动应用程序”的开发，包括smart phone和tablets。 利用Flex 4.5能够创建两种应用程序类型，尽管用户需要决定基本架构，是创建一个应用程序还是两个应用程序。如果用户的应用程序未在phone和tablet两种尺寸外型之间发生剧烈变化，则用户最好选择利用条件逻辑来处理布局变更的单一Flex移动应用程序。如果用户的tablet应用程序的交互模型与布局不同，按照上述说明对Libarary 项目进行综合利用，同时平衡两个Flex 移动应用程序。每个应用程序的设计均面向目标尺寸外型，同时依赖Library项目中的同一个核心逻辑外部化。我们已借助ShoppingCartTablet.fxp在Shopping Cart实例中对其做了验证。该项目具有新布局及面向tablet的功能。同时，该工作流可加快用户的跨设备及跨平台开发进程。

未来发展方向

本文仅介绍了关于Adobe Flash Builder 4.5和Flex 4.5 SDK新特征的皮毛知识。希望读者能够学会如何使用新版本的框架和工具，尤其是学会如何创建移动smartphones和tablets中的内容。我们很高兴各位能够学会如何安装三种面向移动和面向web的参考应用程序、如何区分代码并学习如何书写快捷、好看代码的最佳实践及技巧。

本作品已获得非商业使用的创意共享署名3.0的许可授权。

其他相关内容

• 面向学生的十大Adobe Flex 和AIR应用
• 利用Cairngorm微体系结构进行Flex RIA的开发——第一部分：Cairngorm简介
• 利用Flex、ColdFusion和BlazeDS技术进行移动文本信息的收发
• Flex移动皮肤——第一部分：优化皮肤基础
• 从Flex 3应用到Flex 4应用——第2部分：从Dashboard应用到Flex 4应用
• 从Flex 3应用到Flex 4应用——第四部分：Spark面板、列表及VGroup组件的使用；自定义皮肤及状态的添加
• 从Flex 3应用到Flex 4应用——第四部分：Spark组件及简单皮肤的介绍
• 从Flex 3应用到Flex 4应用——第一部分：将Flex 3 Dashboard应用程序引入到Flash Builder 4中
• Adobe Flex 4.5 SDK简介
• 利用Adobe Flex 4.5 SDK 和Flash Builder 4.5进行的移动开发

教程与实例

 

教程

利用Flex和Flash Builder 开发的移动员工目录实例

Flex移动皮肤——第二部分

Twitter Trends——创建第一个移动Flex应用程序

 

实例

Twitter Trends

Flex 4.5的参考应用

移动商在Android市场上的Flex应用

 

Flex 用户论坛              更多内容             

06/27/2011 Flash字体（Arial）

06/29/2011 在向Flex 4的过渡中出现的问题

06/29/2011 preventDefault在利用TextEvent.TEXT_INPUT

开发的spark文本输入组件中不能工作

06/29/2011 利用spark 标签组件开发的截流行为漏洞  

 

 

Flex 锦囊妙计              更多内容  

06/28/2011 如何向Flex移动应用程序中添加QR代码阅读器

06/28/2011 借助Flex Mobile发送邮件

06/28/2011 打开Flex Mobile中的phone对话框

06/28/2011 Android Mobile中Filefilter的使用