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面板的缺省皮肤类。而“翻转”选项将使用替换标头和控制栏的位置的皮肤类,所以现在标头在底部,而控制栏在顶部。“旋转”版图是我最喜欢的,因为在旋转版图里,标题和控制栏结合在一起并旋转,这样就位于面板的左边了。在所有各类情况中,面板内组件的代码根本没有改变。
在所有的视窗中,真正的UI执行代码是一致的。当combo box被更改时,skinClass类就被更新,成为一个不同的皮肤类定义。
皮肤类实际上就是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容器的旋转,插入控制栏内容。这样,每个内容都被旋转,并包括在“顶部”标题栏中。
下面,你可以看到代码(再次提醒:有一组生成的内容,首先可能会略有困扰,但是没什么问题的)。
使用这些基本的技巧,你就可以做出一些超酷的版图和立体动画,而这一切都会变得相对简单。皮肤类可以应用到多种不同的皮肤组件上,并且可以用来封装诸如动画等内容,或说明皮肤类中的变化,而无需视窗组件(例如,在鼠标悬停上运行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