在Spark Components上使用用于全定制版图的skinClass

Adobe Flash Builder 4 简体中文正式版 下载: http://subject.csdn.net/adobedownload/index.html

在本文中，我们将探讨定制化您的Flex应用程序的技巧（在标准的Flex Spark组件上使用skinClass样式）。使用skinClass样式，你的视图就会比“通常”的视图组件提取更多内容。你还可以在视图范围内，在您的应用程序里创建控件。不过，skinClass决定了这些控件是如何呈现给用户的。

这听上去有点困惑，不过我们来整理下思路吧。考虑到你已经有了一个标准的Spark面板，包含有很多按钮，在控制栏里，你有一个下拉菜单。该菜单没有应用任何样式，你会看到顶部有个标题，而控制栏在面板的底部。

缺省的面板spark皮肤类就用于该版图。有了spark组件模块，你可以利用皮肤类来改变组件的版图格式，而无需更改你视图执行中的任何代码。你所需要做的就是改变skinClass的样式（在本例中，为面板）。在皮肤类里，你可以完全改变呈现给用户的形式。

我们来看看一个例子，以更好地理解我所说的。下面的范例就是上面所陈述的。这是一个spark面板，包括一组按钮。如果你更改了控制栏里的combo box，皮肤类就会被更改，并且更新版图。

“缺省”的选项就是用于spark面板的缺省皮肤类。而“翻转”选项将使用替换标头和控制栏的位置的皮肤类，所以现在标头在底部，而控制栏在顶部。“旋转”版图是我最喜欢的，因为在旋转版图里，标题和控制栏结合在一起并旋转，这样就位于面板的左边了。在所有各类情况中，面板内组件的代码根本没有改变。

<s:Panel id="panel" title="Test Panel" top="10" left="10" right="10" bottom="10"> <s:Scroller width="100%" height="100%"> <s:DataGroup width="100%" dataProvider="{ new ArrayCollection( [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30] ) }" > <s:itemRenderer> <fx:Component> <s:ItemRenderer> <s:Button label="this is a button {data}" /> </s:ItemRenderer> </fx:Component> </s:itemRenderer> <s:layout> <s:TileLayout /> </s:layout> </s:DataGroup> </s:Scroller> <s:layout> <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" /> </s:layout> <s:controlBarContent> <s:ComboBox id="skinSelector" selectedIndex="0" change="combobox1_changeHandler(event)" dataProvider="{ new ArrayCollection(['default', 'flipped', 'rotated']) }" /> </s:controlBarContent> </s:Panel> 在所有的视窗中，真正的UI执行代码是一致的。当 combo box被更改时，skinClass类就被更新，成为一个不同的皮肤类定义。 protected function combobox1_changeHandler(event:IndexChangeEvent):void { switch( skinSelector.selectedIndex ) { case 1: panel.setStyle( "skinClass", FlippedPanelSkin ); break; case 2: panel.setStyle( "skinClass", RotatedPanelSkin ); break; default: panel.setStyle( "skinClass", undefined ); break; } }

在所有的视窗中，真正的UI执行代码是一致的。当combo box被更改时，skinClass类就被更新，成为一个不同的皮肤类定义。

protected function combobox1_changeHandler(event:IndexChangeEvent):void { switch( skinSelector.selectedIndex ) { case 1: panel.setStyle( "skinClass", FlippedPanelSkin ); break; case 2: panel.setStyle( "skinClass", RotatedPanelSkin ); break; default: panel.setStyle( "skinClass", undefined ); break; } }

皮肤类实际上就是MXML文件，包含有特定的逻辑，用来呈现主组件的版图。每个皮肤类有特定的容器，与目标主组件对应。例如，面板的皮肤类有一个组，id为“bottomGroup”和“contentGroup”，还有一个标签，id为“titleDisplay”。titleDisplay标签被面板的标题填充。而contentGroup被用来渲染面板的内容，bottomGroup被用来排版控制栏的内容。你可以创建自己的皮肤类，以控制这些内容，并开始独立创建定制化的UI。

Flash builder可以让这一切变得简单。你可以为标准组件创建全新的皮肤类，在顶部的菜单里，选择File->New->MXML Skin, 如下所示：

你将看到一个wizard，你可以给皮肤类命名，设置package，并且明确主组件。

当明确主组件时，你可使用wizard选定一个已有的Flex组件。在本范例中，我正在修改一个面板，所以我已选定了spark面板组件。

该wizard然后会根据spark组件的缺省皮肤类创建皮肤类。你然后进入，定制化或进行任何更改，改变其版图形式。

针对如下所示的“翻转”的视窗，我只是在产生的皮肤类中转变Group容器的次序。这样，控制栏就在顶部显示，而标题标签就是底部显示。

下面，你可以看到代码（注：有一组生成的内容，首先可能会略有困扰，但是没什么问题的）。

下一步，“旋转”视窗如下所示。我改变了标题Group容器的旋转，插入控制栏内容。这样，每个内容都被旋转，并包括在“顶部”标题栏中。

下面，你可以看到代码（再次提醒：有一组生成的内容，首先可能会略有困扰，但是没什么问题的）。

?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for a Spark Panel container. @see spark.components.Panel @langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 --> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5"> <fx:Metadata> <!--[CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.Panel")] ]]--> </fx:Metadata> <s:states> <s:State name="normal" /> <s:State name="disabled" /> <s:State name="normalWithControlBar" stateGroups="withControls" /> <s:State name="disabledWithControlBar" stateGroups="withControls" /> </s:states> <!-- drop shadow can't be hittable so it stays sibling of other graphics --> <!--- @private --> <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> <!-- drop shadow can't be hittable so all other graphics go in this group --> <s:Group left="0" right="0" top="0" bottom="0"> <!-- top group mask --> <!--- @private --> <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" > <!--- @private --> <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> </s:Group> <!-- bottom group mask --> <!--- @private --> <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" includeIn="normalWithControlBar, disabledWithControlBar"> <!--- @private --> <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> </s:Group> <!-- layer 1: border --> <!--- @private --> <s:Rect id="border" left="0" right="0" top="0" bottom="0" > <s:stroke> <!--- @private --> <s:SolidColorStroke id="borderStroke" weight="1" /> </s:stroke> </s:Rect> <!-- layer 2: background fill --> <!--- Defines the appearance of the PanelSkin class's background. --> <s:Rect id="background" left="1" top="1" right="1" bottom="1"> <s:fill> <!--- @private Defines the PanelSkin class's background fill. The default color is 0xFFFFFF. --> <s:SolidColor id="backgroundFill" color="#FFFFFF"/> </s:fill> </s:Rect> <!-- layer 3: contents --> <!--- Contains the vertical stack of titlebar content and controlbar. --> <s:Group left="1" right="1" top="1" bottom="1" id="contents"> <s:layout> <s:HorizontalLayout gap="0" verticalAlign="justify" /> </s:layout> <!--- @private --> <s:Group id="topGroup" mask="{topGroupMask}" rotation="-90"> <!-- layer 0: title bar fill --> <!--- @private --> <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xE2E2E2" /> <s:GradientEntry color="0xD9D9D9" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 1: title bar highlight --> <!--- @private --> <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0xEAEAEA" /> <s:GradientEntry color="0xD9D9D9" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!-- layer 2: title bar divider --> <!--- @private --> <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> <s:fill> <s:SolidColor color="0xC0C0C0" /> </s:fill> </s:Rect> <!-- layer 3: text --> <!--- @copy spark.components.Panel#titleDisplay --> <s:Label id="titleDisplay" maxDisplayedLines="1" left="9" right="3" top="1" bottom="0" minHeight="30" verticalAlign="middle" fontWeight="bold"> </s:Label> <s:Group id="controlBarGroup" right="1" top="1" bottom="1" minWidth="0" minHeight="0"> <s:layout> <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" /> </s:layout> </s:Group> </s:Group> <!-- Note: setting the minimum size to 0 here so that changes to the host component's size will not be thwarted by this skin part's minimum size. This is a compromise, more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 --> <!--- @copy spark.components.SkinnableContainer#contentGroup --> <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> </s:Group> <!--- @private --> <s:Group id="bottomGroup" minWidth="0" minHeight="0" includeIn="normalWithControlBar, disabledWithControlBar" > <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}"> <!-- layer 0: control bar divider line --> <s:Rect left="0" right="0" top="0" height="1" alpha="0.22"> <s:fill> <s:SolidColor color="0x000000" /> </s:fill> </s:Rect> <!-- layer 1: control bar highlight --> <s:Rect left="0" right="0" top="1" bottom="0"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0xE5E5E5" /> <s:GradientEntry color="0xD8D8D8" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!-- layer 2: control bar fill --> <s:Rect left="1" right="1" top="2" bottom="1"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xDADADA" /> <s:GradientEntry color="0xC5C5C5" /> </s:LinearGradient> </s:fill> </s:Rect> </s:Group> </s:Group> </s:Group> </s:Group> </s:SparkSkin>

使用这些基本的技巧，你就可以做出一些超酷的版图和立体动画，而这一切都会变得相对简单。皮肤类可以应用到多种不同的皮肤组件上，并且可以用来封装诸如动画等内容，或说明皮肤类中的变化，而无需视窗组件(例如，在鼠标悬停上运行animate的按钮)。有了这种方法，这些版图或动画就可以在诸多组件实例上重复使用了。

你可以在新的视窗中浏览上述范例：

http://www.tricedesigns.com/portfolio/skinclass/ 

或在 http://www.tricedesigns.com/portfolio/skinclass/srcview/index.html

下载全部源代码

本文来自：http://www.insideria.com/2010/04/using-skinclass-for-custom-lay.html