将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视频培训(免费) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |