![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
皮肤(Skin)
tiangej
这个作者很懒,什么都没留下…
展开
-
Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--伪类:s|Button:up
熟悉html和css的朋友们都知道,伪类是用来设置组件在不同状态下的样式。test1.mxml<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/f原创 2012-06-14 00:07:24 · 1331 阅读 · 0 评论 -
Flex中的CSS: (4)内部样式和外部样式最终被编译的AS源文件完全相同
看下面两个Flex源文件,一个使用的是内部定义的CSS,一个使用了外部定义的CSS。经验证,被编译器编译后,自动生成的AS文件内容完全相同。 例1:<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns原创 2012-06-14 23:23:48 · 784 阅读 · 0 评论 -
Flex中的CSS: (4)内部样式和内联样式最终被编译的AS源文件不相同
看例子。这些区别有助于我们归纳编译器对不同形式CSS的编译规则。内部样式:<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"原创 2012-06-14 23:39:28 · 1022 阅读 · 0 评论 -
CSS继承
这是一篇非常容易懂得文章。对理解CSS继承的概念有很大帮助。http://www.slideshare.net/zhangxinxu/css-4863848转载 2012-06-15 20:22:52 · 444 阅读 · 0 评论 -
Flex中的CSS: (6) CSS匹配分析
Flex的各种资料中对CSS没有深入地介绍。Flex是开发Web应用展示层的利器。所谓“展示”就是可以看到的部分,作为控制外观(看到的部分)的CSS,其实大有学问。CSS涉水太深,很难用通俗易懂的语言完整地说明CSS的方方面面。 当FlashPlayer显示列表中的某个显示元素寻找属于自己的样式的时候,它会按照如下顺序进行寻找:1。自己的内联属性中是否直接设置了样式,如果是就采原创 2012-06-20 20:09:24 · 743 阅读 · 0 评论 -
Flex中的CSS: (5) global与*
全局样式有global与*,它们谁的优先级高呢?*优先于global。 示例:按钮标签将显示蓝色。<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.co原创 2012-06-20 12:03:57 · 696 阅读 · 0 评论 -
转载: 样式工作原理分析
http://www.flashshe.com/articles/article.asp?id=3Flex 注:该内容的一部分似乎不正确,有待确认。转载 2012-06-19 20:39:35 · 463 阅读 · 0 评论 -
Flex中的CSS: (9)可继承/不可继承样式的定义 以及Flex中的实现方法
在Flex中,不同可视化组件拥有哪些样式,这些样式哪些是可以继承的,哪些不可以继承,这是由Flex框架的设计者决定的。查看Flex语言参考就可以了解到这些内容。组件拥有的样式,以及各种样式的可继承特性是如何在Flex框架中通过代码反映出来的呢?首先,我们看编译自动生成的代码文件_XX_FlexInit-generated.as。在最后有一些代码,把可继承的样式全部罗列并保存在Sty原创 2012-06-27 23:16:51 · 1962 阅读 · 0 评论 -
Flex中的CSS: (9)可继承/不可继承样式的定义 以及Flex中的实现方法 1
样式最终将作用在组件上,从效率化考虑,每类组件内部持有属于自己的全部样式信息,进一步分为可继承样式和不可继承样式。可以从UIComponent的源代码中找到如下定义:private var _inheritingStyles:Object //可继承的样式将被保存在其中private var _nonInheritingStyles:Object //不可继承的样式将被保存在其中原创 2012-06-27 23:26:00 · 2255 阅读 · 0 评论 -
Flex4概念: 外观、样式
Flex4开始出现“外观”这个词。外观、样式是并存的,都是用来实现程序看得见部分的样子。有什么不同呢?作用的对象和范围不同。 看下面的“外观”代码(http://www.adobe.com/cn/devnet/flex/articles/flex4_skinning.html):它将呈现一种看得见的形态,既可以作用于按钮,又可以做用于其他组件。Skin1.mxml原创 2012-06-27 22:44:20 · 1331 阅读 · 0 评论 -
UI组件各个部分的分工
结构:同类型的UI组件可以有不同的结构。皮肤:与结构是配对的。不同的结构需要完全不同的皮肤。皮肤使用基调提供的静态颜色属性。基调:静态定义主体色调。比如背景颜色,字体大小,按钮颜色等。===================================使用UI组件构建应用时,需要设置诸如按钮颜色,字体大小之类的吗?答:不需要,这些属于皮肤定义的范畴。如何通原创 2013-08-26 23:39:08 · 1171 阅读 · 0 评论 -
UI组件分类规划
类型 结构 皮肤 支持基色系 按钮 结构1 皮肤1 黑色、橙色、灰色 “” “” 皮肤2 黑色、橙色、灰色原创 2013-08-26 23:51:15 · 1212 阅读 · 0 评论 -
UI组件分离皮肤的自问自答
必要性: 皮肤就是看见的外观, UI组件根据设计,会呈现出不同的外观。 同样功能的UI组件会有千变万化的外观。 如果不将外观分离出去,UI组件的功能部分将连同外观一起被“复制”成多份儿,产生大量的重复代码,不方便维护。还影响开发效率。 所以,UI组件从结构上必须将外观分离出去。实现的理念(原创 2013-08-19 23:44:02 · 816 阅读 · 0 评论 -
UI组件:分离皮肤的原型
UIComponent -> ComponentISkin -> SkinUIComponent:package { import flash.display.Sprite; public class UIComponent extends Sprite { public var _width:Number = 0; public var _height原创 2013-09-05 00:37:01 · 751 阅读 · 0 评论 -
UI组件设计方案: 大幅减少与外观相关的属性
Flex的UI组件提供了大量的可以运行时修改的属性,很多与外观视觉效果有关(圆角,渐变色等)。增加了灵活度,但是否有必要?实际项目开发中,绝大多数的视觉效果是一致且不变的。不妨从”风格统一“的设计角度去思考这个问题。 这个UI组件结构的设计带来了新思路:不必像Flex的UI组件那样公开那么多的属性。皮肤完成了绝大多数的外观功能。UI组件的结构设计要合理。结构和皮肤的结合原创 2013-10-17 18:47:13 · 896 阅读 · 0 评论 -
Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--全局选择器:global
顾名思义。test1.mxml<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight原创 2012-06-14 00:00:21 · 823 阅读 · 0 评论 -
Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--派生的另一种表示:#XXX s|TextInput
解说:id 选择器常常用于建立派生选择器。test1.mxml<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWid原创 2012-06-13 23:50:46 · 577 阅读 · 0 评论 -
皮肤(Skin)--类继承关系
以TextInput的边框皮肤为例,它使用了mx.skins.halo.HaloBorder。 包mx.skins.halo类public class HaloBorder继承HaloBorder RectangularBorder Border ProgrammaticSkin FlexShape原创 2012-05-01 20:20:41 · 633 阅读 · 0 评论 -
Flex编程皮肤: (4)绘制圆角矩形的工具类GraphicsUtil
编程皮肤的基类mx.skins.ProgrammaticSkin使用了工具类mx.utils.GraphicsUtil,用来绘制圆角矩形。我们看看该工具类做了些什么事情。 test.aspackage{ import flash.display.Graphics; import flash.display.Sprite; import utils.GraphicsUtil;原创 2012-05-24 22:09:42 · 3699 阅读 · 0 评论 -
Flex4比Flex3”肥”了很多
简单比较一下Flex框架的版本4和3的体积:通过最简单的代码来做实验。将下面的代码导出发行版。Flex3:172947 个字节Flex4:268681 个字节“肥”了不少啊。原因之一:Flex4的组件框架比Flex3复杂了不少(灵活性的副作用)。自然地,框架整体代码的可读性继续降低。Flex4 对绘图API的flash.display.Graphics又进行了封原创 2012-06-06 00:08:43 · 1106 阅读 · 0 评论 -
Flex3/4 皮肤的本质不同:一个是背景,一个是可视化组件
Flex3/4 皮肤的本质不同:1. Flex3的皮肤是背景,也就是由flash.display.graphics绘图API绘制的图像背景,没有交互功能。2. Flex4的皮肤是可视化组件,也就是继承自mx.core.UIComponent的组件,有交互功能。背景显然比可视化组件轻量得多。相反,功能也要弱一些。原创 2012-06-10 11:42:00 · 812 阅读 · 0 评论 -
Flex控件中的Graphics: CheckBox
TestCheckBoxSkin.aspackage { import flash.display.Graphics; import flash.display.Sprite; public class TestCheckBoxSkin extends Sprite { public function TestCheckBoxSkin() { var g:Graphic原创 2012-05-21 21:44:45 · 1419 阅读 · 0 评论 -
Flex中的CSS: (1)本质:CSS被编译器转换为AS代码
进入正文前,我们先温习下什么是“CSS选择器”?CSS层叠样式表有很多种选择器,最基本的三种选择器:类选择器、类型选择器、ID选择器。看几个例子: (1-1)类选择器 下例是为所有按钮类型定义CSS样式,所有按钮的文字大小都被约束为12像素。 以某类型为对象来定义CSS样式,这个“Button” 就属于“类选择器”。原创 2012-06-13 11:16:44 · 1197 阅读 · 0 评论 -
Flex中的CSS: (2)三种基本类型的CSS会被编译器转换为什么样的AS代码?
我们接着做试验。在代码中定义三种不同形式的基本的CSS,如下: test1.mxml<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">原创 2012-06-13 22:21:58 · 986 阅读 · 0 评论 -
Flex编程皮肤: (3)最基础的ProgrammaticSkin都做了些什么 --- 其实很简单
我们解析mx.skins.ProgrammaticSkin类的源代码。 ProgrammaticSkin类如其名,是用来编写皮肤外观的,也就是使用ActionScript的绘图能力。具体来讲就是使用Graphics类来绘制各种外观效果。 ProgrammaticSkin作为Flex框架基础类之一,和框架结构设计有很多关联,如果要分析ProgrammaticSkin类的全原创 2012-05-23 23:34:04 · 1250 阅读 · 0 评论 -
Flex编程皮肤: (1)编程皮肤 / 图片皮肤
皮肤顾名思义,就是我们看到的各种可视组件的外观。Flex皮肤可分为两类:编程皮肤和图片皮肤。 图片皮肤就是用图片作为可视化组件的外观,通过动态(比如鼠标移入与移出)切换图片来达到外观变化的效果。编程皮肤就是利用ActionScript语言的画图功能来绘制可视化组件的外观。 两者比较起来:图片皮肤能够实现通过编程无法实现的复杂的外观效果,而且对于程序开发人员,图片原创 2012-05-23 23:11:43 · 754 阅读 · 0 评论 -
Flex编程皮肤: (2)为什么解析Flex3而不是Flex4.6呢?
无论是解析Flex3还是Flex4.6,归根结底都是在尝试去了解ActionScript3是如何被使用的。万变不离其宗,Flex3与Flex4.6最终殊途同归。Flex4.6更加强化了编译器的功能,很多代码依赖编译器的再加工。如此使得源代码在内容形式上变得更抽象了,成为解析框架代码的阻碍。而Flex3就相对原始一些,可以看到很多框架代码的原貌。这就是为什么不去解析Flex4原创 2012-05-23 23:43:36 · 901 阅读 · 0 评论 -
Flex中的CSS: (1)本质:CSS被编译器转换为AS代码1
如果我们自定义一个CSS样式,情况又会变得如何呢?在刚才的基础上,我们增加了CSS式样,并作用于按钮上。text1.mxml<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.ad原创 2012-06-13 12:31:35 · 951 阅读 · 0 评论 -
Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--交集:s|Button#btn
解说:s|Button#btn 这种形式的CSS将作用在id为btn的按钮上。其他的按钮不受影响。s|Button.MyStyle 这种形式的CSS将作用在指定类型选择器“MyStyle”的按钮上。其他的按钮不受影响。这种形式的定义称为:交集 test1.mxml<s:Application xmlns:fx="http://ns.a原创 2012-06-13 22:51:09 · 871 阅读 · 0 评论 -
Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--组合:s|Button#btn, .MyStyle
解说:s|Button#btn, .MyStyle 这种用逗号分隔形式的CSS定义体实际上是多个定义的组合。即s|Button#btn{。。。}.MyStyle{。。。} 这种形式的定义称为:组合 test1.mxml<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="l原创 2012-06-13 23:09:19 · 578 阅读 · 0 评论 -
Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--派生:s|HGroup s|TextInput
解说:s|HGroup s|TextInput 为HGroup中定义的TextInput设置CSS样式。这是一种依据元素在其位置的上下文关系来定义样式的方式。这种形式的定义称为:派生test1.mxml<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.原创 2012-06-13 23:41:35 · 776 阅读 · 0 评论 -
组件特性
>>基本单位1. TextField (MyTextBase)2. Sprite (MyContainerBase) >>组件性质复合组件(个别无文字的按钮被设计成为基本单位性质的组件:纯粹由单个Sprite完成) >>层次结构扁平化显示列表中各节点的父子层次数量最少化设计(纵深嵌套的关系影响FlashPlayer渲染性能,并增加组件的复杂程度)原创 2013-10-23 16:14:53 · 1257 阅读 · 0 评论