将Flex 3应用程序移植到Flex 4.5中 第2部分：Dashboard应用程序

SparkTabBar组件使用的变化

然后，对新的Flex4.5 Spark TabBar做出改动。

在main.mxml中做出下列修改。

1.?????? 修改TabBar组件标签的命名空间前缀，从而使用Spark的命名空间前缀而非mx前缀。

2.??????????在{viewStack}中括入TabBar dataProvider 值。

3.??????????编辑TabBar，从而对change事件而非itemClick事件做出响应。

?完成上述步骤之后，TabBar标签应类似于下列形式：

由于所选择的标签发生变化时，SparkTabBar控件会分派不同的事件，所以用户需要做出其他必要的改进。

4. 将下列事件导入定位在main.mxml的上方：

import mx.events.ItemClickEvent;

5. 使用下列语句替换上述语句：

importspark.events.IndexChangeEvent;

6. 在main.mxml及函数签名中搜索onItemClickTabBar()函数的定义，使用IndexChangeEvent替换ItemClickEvent：

private functiononItemClickTabBar(e:IndexChangeEvent):void

7. 在函数定义中，由于IndexChangeEvent通过不同属性获得点击的标签， 所以需要将e.index变为e.newIndex。

8. 定位onItemClickTabBar()函数定义的下一行代码（在onResultHttpService()函数定义的底部附近）。

onItemClickTabBar(newItemClickEvent(ItemClickEvent.ITEM_CLICK,false,null,index));

9. 将改行代码改为：

由于首次创建该应用程序时，该代码可以创建事件实例，来模拟标签点击，所以上述改动是必要的。

10.保存修改并创建应用程序。

编辑时应该不会发生错误。启动应用程序，点击标签，确保仍然能够运行。

执行TabBar组件的自定义皮肤

本节及下一节执行两个自定义皮肤，从而使得TabBar组件中的标签显示和Flex 3Dashboard 应用程序中显示相同。本节中的皮肤用于TabBar组件，下一节的皮肤用于构成标签的ButtonBarButton组件。创建TabBar 自定义皮肤的步骤如下：

1.?????? 右键点击package Explorer中的skins 文件夹，选择New>MXMLSkin。

2.?????? 同样，在Name（名称）位置键入CustomTabBarSkin，在Host Component（主机组件）位置键入spark.components.TabBar。

3.?????? 确认Create As Copy Of value设置为spark.skins.spark.TabBarSkin，同时勾选该选项。

4.?????? 勾选Remove ActionScript Styling Code。

5.?????? 点击Finish。

FlashBuilder 在src/skins文件夹下创建名为CustomTabBarSkin.mxml的新文件。

6. 为了能够使用用户尚未修改的自定义skin类，在main.mxml文件的顶部将下列语句添加到<s:Application>标签中。

skinClass="skins.CustomTabBarSkin"

7. 在skin文件（CustomTabBarSkin.mxml）中，将focusThickness="0"添加到<s:ButtonBarButton>中，这样当离开、返回到Dashboard窗口时，标签就不会显示焦点边框。

8. 保存修改。

执行ButtonBarButton子组件的自定义皮肤

在本节中，我们要创建构成标签的ButtonBarButton组件的自定义皮肤。创建皮肤的步骤很多，请仔细阅读。

1.???????右键点击skins文件夹，选择New>MXMLSkin。

2.???????在Name（名称）位置键入CustomButtonBarButtonSkin，在Host Component（主机组件）位置键入spark.components.ButtonBarButton。

3.???????勾选CreateAs Copy Of，键入spark.skins.spark.TabBarButtonSkin。注：与用户到目前为止创建的其他皮肤不同，这并不是Flash Builder的默认设置（ButtonSkin）。

4.???????与早期版本的皮肤不同，取消选择Remove ActionScript Styling Code。

5.???????点击Finish。

Flash Builder在src/skins文件夹中创建CustomButtonBarButtonSkin.mxml。

6.打开skins/CustomTabBarSkin.mxml，使用自定义skin类，在文件底部的<s:ButtonBarButton>标签中，使用skins.CustomButtonBarButtonSkin替换spark.skins.spark.TabBarButtonSkin。

标签如下：

接下来，我们使用styles.css中更常见的样式，特别是tabBarButton和tabBarButtonSelected类选择器。

7. 打开CustomButtonBarButtonSkin.mxml。

8. 在labelDispaly标签中，将textAlign属性值由center改为left。

9. 使用labelDisplay属性left、right及top执行padding样式。将left属性值设置为10，将right属性值设置为20，将top属性值设置为-4。

10. 将下列样式属性添加到labelDisplay Label标签中：

?color="#333333" fontSize="12"fontFamily="arial"

11. 将fontWeight="bold"添加到同一标签中。Flex 3 Label控件文本默认为“粗体”，而在Flex 4.5中，默认frontWeight为“normal”。

我们需要对下面三个一般样式属性进行解释。在styles.css的tabBarButton样式中，text-roll-over-color属性表示当指针悬停在未选择的标签上方时显示的标签文本颜色；在tabBarButtonSelected样式中，text-roll-over-color属性表示当指针悬停在选择的标签上方时显示的标签文本颜色，颜色属性表示指针未悬停在选择的标签上方时显示的文本颜色。虽然这里用了两次text-roll-over-color样式属性，但是由于是两种不同的样式，所以不会发生冲突。

12. 为实现CustomButtonBarButtonSkin中相同的目标，将下列三种皮肤状态属性设置到LabelDisplay标签中（下面是所使用的新MXML状态句法实例）：

LabelDisplay Label标签样式类似于下列格式：

最后，用户需要使用六种图像样式，用于实际的标签显示。实际上，仅使用两种图像，一种是未选定标签的up、over和down状态，另外一种是目前选定标签的up、over和down状态。

13. 首先，删除CustomButtonBarButtonSkin<fx:Script>标签中除下列各行的代码，保留如下：

14. 然后，删除到第7层（含）的所有图形内容。一般，用户需要删除</s:states>关闭标签至第7层末尾的所有内容。包含labelDisplay Label的第8层仍然保留。

15. 将下列代码添加到第8层labelDisplay元素之前。这就添加了两个<s:BitmapImage>组件，每个组件对应每个标签图像。

注意使用includeIn属性，该属性可使用户指定每个图像应该显示的状态。同时还要注意使用绑定的方法将宽度设置为名为labelDisplayWidth的变量。这是很有必要的，这样，对于每个标签文件来说，可相应地调整TabBar标签的尺寸。

16. 添加下列代码，在<fx:Script>标签开始处声明labelDisplayWidth变量及设置数值的方法：

注：labelDisplay 皮肤部分带有IdisplayText类型，所以用户需要在skin ActionScript代码中将其置为Label。

17. 最后，将下列代码放在<s:Label id="labelDisplay">标签的末尾：

creationComplete="setTabWidth();"

18. 保存修改，创建应用程序。

用户启动应用程序时，会发现标签文本的定位与Flex 3 Dashboard应用程序中的确切位置不同。在Flex 4.5 Dashboard中，文本略低于Flex 3 Dashboard中的文本位置（参见图7）。

图7. 标签文本位置与Flex 3Dashboard中的文本位置不同

19. 为纠正这一细微差异，修改<s:states>标签内容如下：

20. 接着，删除labelDisplay标签中的horizontalCenter和verticalCenter属性，将left属性值改为12，使用top.selectedStates="0"top.nonSelected="-2"替换top属性。LabelDisplay Label 标签样式类似于下列格式：

这些变化指明标签选择后标签的不同位置。

21. 保存修改，重新创建项目。

现在我们已完成了TabBar的蒙皮。标签的显示和Flex 3 Dashboard中显示的相同，即使光标悬停在标签上。

总结

现在，本系列文章（共4部分）的第2部分介绍完了，内容包括移植Flex 4.5 Spark控件及架构的第一个代码的修改，在第3部分，用户需要做出改动，从而使得应用程序的ViewStack使用新的Flex 4.5 Spark NavigatorContent容器。

? ????如果用户想获得关于Flex 4.5，尤其是与Dashboard应用程序相关的特征，请参见下列资源：

l? Flex4.5帮助——图表入门

l? Flex4.5帮助——数据挖掘

l? Flex4.5帮助——拖放

l? Flex开发者中心——AdobeFlex 4.5 SDK简介

l? Week视频培训（免费培训）中的Flex