将Flex 3应用程序移植到Flex 4.5中 第2部分：Dashboard应用程序到Flex 4.5的初步移植 （二）
2011-11-23 14:22
483 查看
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, 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
然后，对新的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, 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 将Flex 3应用程序移植到Flex 4.5中 第2部分：Dashboard应用程序到Flex 4.5的初步移植 (一)
- 将Flex 3 应用程序移植到Flex 4.5中 第1部分：将Flex 3 Dashboard应用程序导入Flash Builder 4.5
- 将Flex 3应用程序移植到Flex 4.5中 第3部分：Spark组件及皮肤制作简介 (一)
- 将Flex 3应用程序移植到Flex 4.5中 第3部分：Spark组件及皮肤制作简介 (二)
- 将 Flex 3 的应用程序迁移到 Flex 4 — 第 1 部分：将 Flex 3 Dashboard 应用程序导入 Flash Builder 4
- 我的应用程序崩溃，现在怎么办？ - 第2部分
- 将 Windows IPC 应用程序移植到 Linux，第 2 部分: 信号量和事件
- 【转】使用Flex 4.5 SDK和Flash Builder 4.5构建Web和移动参考应用程序
- 将 Windows IPC 应用程序移植到 Linux，第 1 部分: 进程和线程
- 将 Windows IPC 应用程序移植到 Linux，第 2 部分: 信号量和事件
- 您的应用程序架构中的Ext JS 4，第2部分
- 将 Windows IPC 应用程序移植到 Linux，第 3 部分: 信号
- 将 Windows IPC 应用程序移植到 Linux，第 1 部分: 进程和线程
- 将 Windows IPC 应用程序移植到 Linux，第 2 部分: 信号量和事件
- Adobe Flash Builder 4.5（Flex）DataGrid 竖直线颜色的设置及combobox下拉部分颜色的设置
- 将 Windows IPC 应用程序移植到 Linux，第 2 部分: 信号量和事件
- 将 Windows IPC 应用程序移植到 Linux，第 2 部分: 信号量和事件
- Windows IPC 应用程序移植到 Linux，第 2 部分: 信号量和事件
- 将 Windows IPC 应用程序移植到 Linux，第 3 部分: 信号
- 将 Windows IPC 应用程序移植到 Linux，第 2 部分: 信号量和事件