将Flex 3应用程序移植到Flex 4.5中 第3部分：Spark组件及皮肤制作简介 (二)

修改Pod类管理器以支持自定义皮肤

在Pod类管理器上创建自定义皮肤前需要添加自定义皮肤。第一步要安装以下皮肤组件，这些组件是在Pod类管理器上皮肤上运行的可视部件。

第一组组件是带有最大最小值控制按钮的容器。Flex3仪表盘使用的是HBox容器，而现在需要的是新的Spark HGroup容器，同时需注意访问修饰符的使用，所有皮肤组件都须保证是公共的。

1. 输入以下命令：

private var controlsHolder:HBox;

2. 用以下命令代替：



3. 再输入以下命令：

import mx.containers.HBox;

4. 再用以下命令代替：

import spark.components.HGroup;

以下两组皮肤组件为了控制最大值和最小值。

输入以下命令：



6.用以下命令代替：



7. 输入以下命令：

import mx.controls.Button;

8.用以下命令代替：

import spark.components.Button;

9. 添加以下命令：

import spark.components.ToggleButton;

由于Spark按钮控制无法像MX按钮控制那样支持某种属性，而该属性在按钮显示的最大值和还原值之间转换是非常有必要的，因此需使用Toggle按钮控制。

下一组皮肤组件是用于将标题栏部分与主体内容部分分开。

10. 输入以下命令：

private var headerDivider:Sprite;

11. 用以下命令代替：
12. 添加以下命令：

import spark.primitives.Rect;

需要提醒的是将首标分割器皮肤部分由Sprite改成了Rect。

下一组皮肤组件是一个空白长方形，用于应对用户鼠标点击及将Pod管理器绕着仪表盘拖拉。

13. 添加以下命令：



这样皮肤组件基本创建，需要修改几处Pod类管理器的编码

14. 在createChildren()功能处删除以下文本，用自定义皮肤编码代替：



现在createChildren()功能应与下面相似：



15.将updateDisplayList()功能全部删除，因为将仪表盘应用程序移植至Flex 4.5后不需要此编码。

16.在minimize()功能菜单处删除以下不必要的命令：

setStyle("borderSides", "left topright");

17. 在onClickTitleBar()功能菜单处删除以下不必要的命令：

setStyle("borderSides", "left topright bottom");

18. 在Pod构造器功能菜单处删除以下不必要的命令：

setStyle("titleStyleName","podTitle");

需要做以下修改将Pod管理器显示最小化，也就是说只显示标题栏部分，其余内容部分隐藏。

19. 在Pod类管理器成功创建之前立即添加以下命令：

[SkinState("minimized")];

正常情况下Pod类管理器应显示如下：

[SkinState("minimized")];

public class Pod extends Panel

20. 在Pod管理器中添加以下功能：



21. 在the minimize()功能菜单中添加invalidateSkinState()的传送调用指令功能，显示类似如下：



22. 在onClickMaximizeRestoreButton()功能菜单末端同样添加invalidateSkinState()的传送调用指令功能，显示类似如下：

在运行自定义pod管理器皮肤之前，需要再做一次修改以避免由MX容器和Spark容器面板应用程序编程接口方式之间的差异而导致的运行错误。

23. main.mxml输入addPods()method，出现以下命令：

pod.addChild(podContent);

24. 用以下数据替换：

pod.addElement(podContent);

25. 保存修改，创建程序

这时不应出现编译时间错误，但因为一些Pod类管理器所需的皮肤组件还没有全部建立，如果这个时候启动应用程序，Pod仍不能完全运行。

Pod类管理器运行自定义皮肤

由于Pod类管理器已做修改可支持自定义皮肤，那么实际的皮肤组件也可以正常运行了。

首先，需要创立自定义皮肤文件。

1. 右击皮肤文件夹选择New > MXML Skin选项

2. 在New MXML Skin对话框中输入CustomPanelSkin作为名称

3. 输入com.esria.samples.dashboard.view.Pod作为主机组件

4. 确保创建副本选项建立在spark.skins.spark.PanelSkin.下

5. 断开移除ActionScript样式编码选项

6. 点击完成按钮

7. 使用自定义皮肤，在Pod.as文件顶部添加以下命令：

import skins.CustomPanelSkin;

8. 将以下命令添加在Pod类构造器末端：

setStyle("skinClass",Class(CustomPanelSkin));

现在可以将皮肤组件添加到自定义皮肤并运行Flex3仪表盘中的Pod管理器样式。须确保每件皮肤组件在自定义皮肤及Pod类管理器中的id是一致的。

9. 在CustomPanelSkin.mxml中输入<s:Labelid="titleDisplay"…> tag后及在包含标题显示标签的Group中直接插入以下编码：



10. 输入<s:Rect id="tbDiv" …> tag并将id改成"headerDivider"

接下来需要修改皮肤类别以运行styles.css文件中两种样式定义：podTitle和Pod样式。

11.再次将标题显示标签控制置入皮肤组件，添加fontSize="11"fontFamily="arial"属性

12. 将左边属性值改成12

13. 添加kerning="off"命令以统一面板标题字符串位置，用作Flex3仪表盘。

完成以上步骤之后，标签将显示如下：



14. 在contentGroup Group容器中输入openingcontentGroup <s:Group …> tag命令后，直接添加以下布局编码运行设置补丁边距样式属性，该属性已被调整为类似于Flex3仪表盘的布局。



15. Spark面板默认为方底拐角，因此不需要运行圆底拐角。同时Spark面板边框默认为一条1px的牢固直线，背景颜色默认为白色，因此不需要运行边框厚度、边框风格及背景颜色等Pod样式。

16. 诸如Flex3仪表盘边框颜色，先设置useChromeColor 属性后，在initializationComplete()方式中添加以下两行文字



仅设置borderStroke SolidColorStroke的颜色是不够的，因为若要支持运行时边框风格需要包含以下命令文字：



17. 此办法同样适合转角半径，因此需在initializationComplete()菜单下先输入以下文字，确保Pod管理器顶端转角半径：

setStyle("cornerRadius",6);

18. 用以下命令代替RectangularDropShadowtag：

<s:RectangularDropShadowid="dropShadow" blurX="10" blurY="10"alpha="1" distance="5" angle="0"color="#999999" left="0" top="5"right="5" bottom="0"/>

19. 将headerDivider Rect 的净色填补为0x999999以调整划分Pod标题栏区域和内容区域的分割线的颜色。
20. 将标题显示标签的最低值为22以运行Pod首标高度样式
21. 用以下命令取代tbFill Rect 中的GradientEntry文字，以运行Pod首标颜色样式



Spark面板皮肤不能自定义标题栏突出填补，因此无需安装Pod管理器突出字母样式属性。

22. 保存修改，创建程序。

正常情况下不应出现编译错误或警告提示。

23. 运行程序。

注意：若应用程序运行时出现运行错误，有可能是在之前测试仪表盘应用程序时将Pods其中的一个数值设为最小了。最小值无法运行，从而导致了错误。可参照本系列第二部分：将仪表盘复原到初始值的指引来解决此问题，从而重新运行应用程序。

除了之前第四部分运行的最大值最小值按钮之外，Pod管理器的标题栏区域与Flex3仪表盘也非常相似（详见图二）。



图二：最大值最小值按钮运行之前的仪表盘应用程序局部截图

接下来将学习什么？

本系列第三部分内容到此结束，接下来我们将学习如何在Pod管理器中运行最大值最小值按钮以及继续完成将Flex3仪表盘应用程序移植至Flex4.5的后续步骤。

更多关于Flex4.5的信息尤其是仪表盘应用程序相关特征请参考一下资料：

· Flex 4.5帮助-图表简介

· Flex 4.5帮助-深探数据

· Flex 4.5帮助-拖放

· Flex开发者中心---Adobe Flex4.5 SDK简介

· 一周Flex视频培训（免费）