[ADC视频FlashBuilder4]为DataGroup容器制作皮肤

/ u6 N/ z) C/ N
- C9 C* v9 S' G; I. ?为DataGroup容器制作皮肤 - 翻译：RIAMeeting社区翻译小组hanyejingming
      在这个练习中你将学到怎么改变DataGroup和itemRenderer的皮肤。这是那最后的效果。你能看到容器是一个灰色的背景和每一个itemRenderer元素是一个深灰色的背景。当你鼠标从itemRenderer上略过时，它们变成另外一个颜色。
5 ~. ?  Q/ v6 g& `6 h9 _      在“Understanding components and layouts”视频中，你们学习到了DataGroup容器不是一个更换皮肤的容器。然而它有一个更换皮肤相当的类是SkinnableDataContainer类。在这两者之间的不同是SkinnableDataContainer能有可视化的元素提供给它。
      你提供一个皮肤类它有一个skinClass属性。我的例子里这是主的application文件。我是正在查找DataGroup容器的位置和改变SkinnableDataContainer打开和关闭标签。当我保存文件和运行应用程序的时候，你能看到应用程序和以前的视频和练习是一样的。
& t8 R- a" E8 B, Z' o, |      Package Explorer界面，我是正在打开皮肤文件夹和BackgroundSkin.mxml类文件。这个文件是设定SkinnableDataContainer类作为主要的组件类，包括一个状态模块它有两个嵌入State标签和一个Rect模块它有一个填充属性。
      在“Skinning Spark components”的部分，你学习到了这些经典的皮肤元素。回到主的应用文件，我是正在增加skinClass属性到SkinnableDataContainer和给它一个skins.BackgroundSkin的值。
      当我保存文件和运行应用程序，你能看到既没有皮肤也没有内容被呈现。记得在以前的视频里面SkinnableContainer有一个皮肤的部分被命名为contentGroup在容器中他描绘所有的内容。SkinnableDataContainer也有一个皮肤的部分，但是它被命名为dataGroup。
' S. a2 W$ o" N$ Z, W      在BackgroundSkin.mxml文件的最后，我增加了一个DataGroup容器它有一个属性id值。
3 Y# X7 z# c/ `8 B      当我保存文件和运行应用程序你能看到以前itemRenderer组件的显示，但是现在它们的父容器有了一背景皮肤。
      记得每一个itemRenderer的呈现都是被定义在itemRenderer类里。你简单的增加可视化元素到itemRenderer类文件里，为每一个itemRenderer实例创建一个皮肤。
      在组件目录里我是正在打开EmployeeItemRenderer.mxml文件和创建第二个状态被命名为hovered。在Hgroup容器上和UI组件注释下，我是正在创建一个Rect标签，设置一个height为100%和一个width为100%。这将创建一个矩形它将填充itemRenderer的背景。
$ G& q2 U+ [5 U0 u! X/ N6 d/ k% W      我是正在增加radiusX属性值为10和一个radiusY属性值也是10。为背景创建弧形角。然后，在Rect实例里我创建一个填充属性标签。在填充属性里，我讲创建一个SolidColor实例，为背景颜色的透明度设置透明值为0.5。
      最后，我指派颜色。Hovered属性值是0xE36906  当一个使用者略过item，呈现一个桃色。当我保存文件和运行程序，你能看到灰色的背景和在hovered状态的时候它呈现桃色的背景
      不幸的，虽然renderer的背景颜色填充全部的renderer，但是在SkinnableDataContainer里，它们自己有不同的尺寸
0 `0 A$ f8 A% w$ T6 v      在容器里我也想要改变itemRenderer的布置目的是你能在边缘看到这些容器。我正返回主application文件在SkinnableDataContainer实例的位置。在VerticalLayout实例里我是正在增加一个gap属性，值是15 pixels.
: Q' ?4 j% L5 [* z      我也增加一个paddingTop属性，值是20 pixels和类似的属性paddingBottom，paddingRight，paddingLeft。现在当我保存文件和运行程序时，你能看到itemRenderer实例是在一个精细地位置。
      设置itemRenderer填充整个容器的宽度，我是正在增加一个width属性在ItemRenderer类里。当我保存文件和运行程序，你能看到renderers现在是正确的呈现。下一个阶段，是通过一个名为“Skinning the DataGroup container”的练习。