mx3-皮肤引擎特性.doc

MX3 皮肤引擎特性对应皮肤框架版本号: 1.0.11文档版本: 1.0.0阅读本文档需要一定的 HTML & CSS 基础.简述Mx3 使用的界面引擎是基于 HTML 的轻量级渲染引擎.修改 mx3 的界面与修改网页一样方便灵活.此界面引擎基于 HTMLayout 开发, 关于 HTMLayout 的更多信息请访问以下网站:/htmlayout/main.whtm相关演示可以下载 HTMLayout 的Demo文件包查看:/htmlayout/HTMLayoutDemo.zip(下载后解压. 启动 binbrowse.exe, 然后用它打开 html_samples 目录下的文件查看.)界面引擎的结构mx3的界面通过下面4个方面定义: HTML定义界面的基础结构 CSS 样式定义界面元素的表现 CSS 的 behavior 扩展属性定义界面元素的基础交互行为 CSSS! 脚本为界面提供简单的脚本控制能力我们会在后面的内容中对它们逐一介绍.HTML支持界面的 HTML 文件奠定了界面的基础层级和结构.mx3 的界面引擎的HTML 支持以HTML 4.0规范为基础, 在此基础上又扩展了一些特殊标记.这里仅介绍mx3界面中用到的基本元素. 标记include 标记是一个扩展的特殊标记.顾名思义, 就是引用并包含其他 htm文件.它有以下两种书写格式:Missing: layout.htm需要注意的是, 被引用的文件如果不在同级目录, 引用后里面的相对路径都会基于引用页的路径处理.标记menu 标记被用于定义界面中的菜单.这个标记产生的元素默认是隐藏的, 只有被 popup-menu 行为触发时才显示. 元素内部的 和带有 role=menu-item 的元素都会被当作菜单项处理.mx3 界面中菜单的定义书写格式如下:Menu ItemMenu Item with Icon and Shortcut LabelSub MenuSub Menu Item 1Sub Menu Item 2Menu ItemChild Item 1Child Item 2其他扩展元素还有很多其它的扩展元素, 因为在 mx3 的主界面中没有使用到, 因此在这里不做介绍.mx3的对话框界面中用到很多控件, 这些元素在内建的 basecontrol.css中定义.主界面的皮肤文件中没有使用此css文件.HTMLayout 的 Demo 文件包中 html_samplesform 目录下有大部分控件的范例文件.(包括进度条, 日期选择框, 数字输入框等)CSS支持mx3皮肤引擎的css支持以 css 2.1 为基准.同时支持部分 css3 的属性和选择符.在这里不再介绍css2.1标准支持的属性和选择符, 只对界面用到的扩展属性和选择符进行介绍.扩展选择符支持选择符说明div:not(:first-child)非状态选择符.范例为匹配所有不是第一个子元素的 div 元素.divfoo=val匹配foo属性值以val开头的 div 元素.divfoo$=val匹配foo属性值以val结尾的div元素.divfoo*=val匹配foo属性值中含有val字串的div元素.tr:nth-child(An+B)匹配父元素里以A个为一组的每组中的第B个div元素.tr:nth-last-child(An+B)匹配父元素里以A个为一组的每组中的倒数第B个div元素.button:only-child匹配父元素里唯一的 button 子元素.a:focus匹配拥有焦点的 a 元素.a:tab-focus匹配通过按 TAB 键获得焦点的 a 元素.option:current匹配一组option元素中具有当前状态的 元素.input:checked匹配被选定的 input 元素. 用于具有 checkbox, radio, select 等行为的元素.input:disabled匹配被禁用的 input元素.input:read-only匹配只读的input元素.input:empty匹配内容为空的 input元素.div:has-child匹配只含有一个子元素的 div 元素.div:has-children匹配含有多个子元素的 div 元素.menu:popup匹配被作为弹出菜单或面板显示的menu元素.button:owns-popup匹配触发了弹出行为且弹出菜单或面板处于可见状态的 button 元素.div:drop-target匹配在拖放操作中可以接受被拖放对象的div元素.div:drag-over匹配在拖放操作中鼠标所处的可接受被拖放对象的 div元素.li:moving匹配正以移动模式被拖放的li元素.li:copying匹配正以复制模式被拖放的li元素. (原元素的一个副本)li:drag-source匹配被拖放的源li元素.li:drop-marker匹配指示拖放操作释放位置的li元素. (原元素的一个副本)扩展属性文本相关特殊字体font: system;/* 系统输入框字体 */font: system-menu;/* 系统菜单字体 */font: system-caption;/* 窗口标题字体 */font: system-status;/* 状态栏 tooltip 的字体*/文本选择区颜色text-selection: #FFF #C00;/* 格式: 前景色 背景色 */文本过长截断text-overflow: ellipsis;/* 省略号处理 */此属性需配合 white-space: nowrap; 和 overflow: hidden; 使用.特殊折行处理text-wrap: unrestricted;/* 允许截断换行. CSS3里面为 text-wrap: avoid */white-space: prewrap;/* 按多行文本输入框的折行方式处理文本 */文本内容content: text here!;/* 同 CSS3 */布局布局方向direction: ltr;/* 从左到右布局 */direction: rtl;/* 从右到左布局 */自适应高度和自适应宽度width: 50%;height: 100%;使用双百分号表示占用剩余空间的比例.margin 和 padding 等属性也可以使用 % 单位.垂直/水平布局flow: vertical;/* 将容器内部变为垂直布局. (标准的布局模式) */flow: horizontal; /* 将容器内部变为横向布局. */垂直/水平流式布局flow: v-flow;/* 将容器内部变为垂直流式布局. */flow: h-flow;/* 将容器内部变为水平流式布局. */填充和背景渐变色背景background-color: red yellow blue yellow;/* 格式: 上左颜色 上右颜色 下右颜色 下左颜色 */这个渐变填充的实现与 CSS3 标准不同, 能实现的效果也有限.保持长宽比拉伸background: url(image.png) stretch keep-ratio;仅能在 stretch 模式中使用.切片贴图background: url(bg.png) expand;background-position: 6px 6px 6px 6px;background-stretch: stretch-left stretch-middle stretch-right;background 这行将bg.png 指定为背景图, 并指定了贴图的模式为 expand (切图填充).background-position 指定了切图的位置(按上右下左的顺序).background-stretch 指定了切出来的图的拉伸方式. 可用的参数有:o stretch-left拉伸左中切块o stretch-middle拉伸正中切块o stretch-right拉伸右中切块o stretch-top拉伸上中切块o stretch-bottom拉伸下中切块不写 background-stretch 则默认使用平铺贴图方式处理.前景样式foreground: red url(fg.png) no-repeat 50% 50%;foreground-color: foreground-image: foreground-repeat: foreground-position: foreground-stretch: 此属性的语法与background 的对应属性相同. 也支持切片填充.前景样式会覆盖在背景和元素的内容之上.图像变换效果foreground-image-transformation: colorize(#666);background-image-transformation: contrast-brightness-gamma(0.5,0.5,1.2);引擎支持对前景和背景图像的多种变换效果.目前可用的变换效果有如下几种:o colorize(#FFCC00)颜色滤镜效果o contrast-brightness-gamma(0.5, 0.5, 1.5)对比度,亮度,gamma值调整. 对比度和亮度的中间值为 0.5.o color-schema(red, yellow, blue)将图像的灰度色部分按给出的颜色(可以有多个)进行插值变换.colorize() 常用于实现按钮图标的禁用状态.contrast-brightness-gamma() 可用于鼠标悬停时的按钮图标变化.边框圆角边框border-radius: 4px;与 CSS3 规范相同.光晕效果outline: 1px glow #0CF 3px;对 outline 样式的扩展. 格式: 宽度 glow 颜色 渐变偏移值.如果被设置此样式的对象有前景/背景色或图像填充, 光晕的边缘会按背景的轮廓绘制.阴影效果outline: 1px glow #0CF 3px;outline-shift: 3px;在光晕效果的基础上增加 outline-shift 属性指定阴影的偏移位置.动画效果渐变效果transition: blend;渐变切换不同状态的样式效果.适合用于制作按钮效果.有一定的性能问题, 不建议大量使用.自定义变换效果transition: width(linear,400ms) height(linear,400ms);transition: width(back-in,0.5s) background-color(back-in,0.5s,0.5s);用指定的变换速率算法和时间控制指定的属性值变化.在HTMLayout 的 Demo 里面的 html_samplestranstions 目录下有相关的描述文档和示例.交互相关扩展对象的响应区域hit-margin: 4px 5px 4px 8px;将元素的交互范围扩大. (从元素的 border 算起)格式同 margin 属性.右键菜单context-menu: selector(#ITEM_CONTEXT_MENU);为元素指定对应的右键菜单.鼠标拖放操作.item draggable: only-move;/* 定义拖放的形式 */.item-container drop: insert;/* 定义拖放结束时的处理方式 */accept-drop: selector( .item );/* 定义容器可接受的被拖放对象 */draggable 有 4 个取值, 它决定了元素被拖放时的行为:o none不可拖动o copy-move复制并移动o only-copy仅复制o only-move仅移动drop 也有 4个取值, 它决定了放开鼠标后拖放的结果:o insert在鼠标位置插入o append在最后面添加o prepend在最前面添加o recycle删除accept-drop 通过css选择符决定容器可以接受的被拖放对象范围.在HTMLayout 的 Demo 里面的 html_samplesdrag-n-drop 目录下有相关示例.网站上有对此的详细介绍: /wiki/h-smile/drag-n-drop行为属性behavior: button;通过 css 给元素附加特定的预定义的交互行为.皮肤引擎内建有多种行为可供使用. 下面一节的内容将讨论 behavior 的使用.behavior 行为属性behavior 是界面引擎为了满足交互需求而扩展的特殊css属性.通过为元素设定 behavior, 可以为几乎任意元素附加上交互行为, 从而将元素改造成具有特定功能的按钮,输入框等控件.所有的behavior 都是预先通过程序写好的.示例分析以下是mx3界面文件中 basecontrol.css 的一段 css :/* checkbox button */atype=checkbehavior: check;display: inline-block;cursor: pointer;margin: 2 0;padding: 0 4 0 22;min-width: 22px;min-height: 18px;line-height: 18px;white-space: pre;text-decoration: none;background: url(images/check.png) no-repeat 0% 50%;atype=check:checkedbackground-image:url(images/checked.png);默认情况下, 标记会作为链接处理.而在这里, 我们通过给它指定 behavior: check; 为它附加了复选框的交互行为.在使用时, 此元素会根据用户的点击, 修改自己的 :checked 状态. 从而改变自己的背景图像表现.不同的 behavior, 在使用时会有不同的状态和相关的属性进行互动.例如 behavior: menu; 会把附有该行为元素下的 元素或设置了 role=menu-item 属性的元素当作菜单项.下面的介绍中会简要的描述部分常用 behavior 和它们相关状态和属性.常用 behavior 介绍行为简介behavior: button;按钮行为.附加了此行为的元素会具有标准的按钮行为.属性: value=caption - 按钮标题文本. 如果没有设置, 则使用元素内容文本.状态: :hover - 悬停 :active - 按下 :focus - 获得焦点 :disabled - 被禁用behavior: clickable;将元素变为可点击.附加了此行为的元素才能在点击后触发程序的消息.与 button行为的唯一不同是具有此行为的元素不会获得焦点.状态: :hover - 悬停 :active - 按下 :disabled - 被禁用behavior: check;复选框行为.属性: checked - 初始选定状态.o 取值范围: true, false, undefined(半选定状态). mixed - 半选定状态.状态: :hover - 悬停 :active - 按下 :focus - 获得焦点 :disabled - 被禁用使用中会出现比较复杂的复合状态, 例如:inputtype=checkmixed:checked:disabledbehavior: radio;单选框行为.属性: name=group - 用于区分单选框组(必须) value=0 - 对应选项的值状态: :hover - 悬停 :active - 按下 :focus - 获得焦点 :disabled - 被禁用behavior: edit;文本输入框行为.属性: value=“text” - 初始文本. size=20 - 元素的初始宽度. maxlength=12 - 最大文本长度. filter=“09” - 限制可输入的字符内容. 支持单个字符或字符范围.o ”.09azAZ” - 允许输入所有字母和数字以及 . 和 字符(Email).o “.,-” - 允许输入除 . , - 之外的任意字符. 作为排斥标记使用. novalue=“please input” - 如果文本框为空, 则显示此属性指定的文本.o 你可以通过 :empty 伪类来修改这个提示文本的样式.状态: :hover - 悬停 :focus - 获得焦点 :disabled - 被禁用 :empty - 内容为空behavior: password;密码框输入行为.属性和状态同 behavior: edit;额外的属性: password-char=“#” - 指定密码提示字符为 #.behavior: select;下拉列表框行为.内部结构同 HTML中的 元素用法.列表条目元素为 元素或具有 role=option 属性的元素.属性: size=8 - 显示为多行选择列表框. multiple - 允许多选 multiple=checks - 允许多选, 且每个条目前显示复选框.状态: option:current - 当前选定的条目.behavior: menu;菜单行为.此行为定义了一个菜单元素.此元素中包含的 元素和具有 role=menu-item 属性的元素会被当作菜单项对待.鼠标悬停的菜单项元素会被赋予 :current 状态.菜单元素被调用时, 它的父元素会被设置为调用它的元素.behavior: menu-bar;菜单栏行为.所有 子元素将被作为菜单栏的条目.behavior: popup-menu;打开弹出菜单.具有该行为的元素在点击后会打开子元素中的第一个 或元素作为菜单. 如果有设置 menu 属性, 则打开其中css选择符对应的元素.属性: menu=#MENU_ID - 指定要弹出的菜单元素. 取值为css选择符. align-popup=top - 指定弹出菜单的位置. top, left, right, bottom(默认).behavior: progress;进度条行为.被绑定此行为的元素, 其前景图像会按比例拉伸,作为进度条绘制.属性: value=5.2 - 初始值. 可以是小数. maxvalue=100 - 最大值. 可以是小数.behavior: path;路径缩略显示行为.将过长的路径显示为中间加省略号的缩略形式.例如:roottestappp123456assetsscriptscharactermax.dat 显示为:roottestappp123.max.datbehavior: file-icon;文件图标显示行为.如果没有指定大小. 此行为会提取最符合显示区域大小的图标显示. 属性: filename=test.exe - 获取指定可执行文件的图标 filename=.doc - 获取指定扩展名的系统图标 filename=. - 文件夹图标 filename=. - 驱动器图标 filename= - 我的电脑图标 icon-size=small - 图标大小. 可取值: small(默认), ”large”.CSSS! 脚本 behavior 并不适合实现那些细碎却有没有通用性的交互操作.这时我们就需要用 CSSS! 来解决问题了.顾名思义, CSSS! = CSS +Script, 它是写在 CSS 中的脚本.它的语法其实很简单.让我们看看下面这段 CSSS! 脚本:.item hover-on! :elem = $1( input.url ) ,elem:empty = true ?(self.value = empty) #(self.value = filled),elem:hover = true,self:width = elem.box-content-width(),self.$(.icon) - (elem) elem:background = #CCC;它的格式看起来就像是个扩展的 CSS 属性一样.一些要注意的地方: CSSS! 语句使用逗号,作为语句结束符. CSSS! 中的字符串只能双引号标识, 不能使用单引号(string). CSSS! 中使用关键字 self 表示当前对象.截获事件.item hover-on! :elem = $1( input.url ) ,elem:empty = true ?(self.value = empty) #(self.value = filled),elem:hover = true,self:width = elem.box-content-width(),self.$(.icon) - (elem) elem:background = #CCC;hover-on! 是我们的脚本要处理的事件标识.当具有 .item 类的元素被鼠标悬停时, 会触发此事件并执行里面的代码.下面是完整的事件支持列表:事件说明hover-on!hover-off!鼠标悬停/离开时触发active-on!active-off!鼠标按下/抬起时触发click!鼠标单击时触发 (在鼠标按下/抬起之后)focus-on!focus-off!获得/失去焦点时触发key-on!key-off!键盘的按键按下/抬起时触发通过 key-code() 函数获取按键信息.key-code() 获得的按键信息可能是一个用单引号包含的有效字符(a, 4, $)或是下列预定义值之一:RETURN, LEFT, RIGHT, UP, DOWN, PRIOR, NEXT, TAB, HOME, END, DELETE, INSERT, BACKassigned!所属的样式被应用到元素上时触发value-changed!元素的值发生变化时触发validate!表单提交前的数据验证事件timer!定时触发器配合 start-timer(ms) 和 stop-timer() 函数使用.start-timer(ms) 中的参数是以毫秒为单位的时间间隔.animation-start!animation-step!animation-end! 动画控制事件animation-start! 在调用了元素的 element.start-animation() 方法后触发.animation-step! 事件处理的最后必须返回一个整数(下次执行的间隔毫秒数). 例如: return 500;如果animation-step! 返回的是 return cancel; 则动画中止, 同时触发 animation-end! 事件.size-changed!元素大小发生改变时触发获取元素接下来看看事件处理的代码的第一句:.item hover-on! :elem = $1( input.url ) ,elem:empty = true ?(self.value = empty) #(self.value = filled),elem:hover = true,self:width = elem.box-content-width(),self.$(.icon) - (elem) elem:background = #CCC;这是个赋值语句. $1() 函数根据参数 input.url 返回第一个匹配此 css 选择符的元素.然后将这个元素的引用赋给 elem 变量.这里要注意, CSSS! 的语句使用逗号 , 分割, 不是我们习惯的;.在 CSSS! 中获取元素有如下几个函数可用:函数/方法说明$1(.item)获取匹配 .item 的第一个元素$(.item)获取所有匹配 .item 的元素.elem.$1(.item)获取elem子元素中匹配.item的第一个元素elem.$(.item)获取elem子元素中匹配.item的所有元素elem.$1p(.item)获取elem的父元素中匹配.item的最近的一个元素.elem.$p(.item)获取elem的父元素中所有匹配.item的元素.elem.parent()获取elem的父元素elem.next()获取elem同级的下一个元素elem.previous()获取elem同级的上一个元素elem.child(3)elem.children()获取elem的第3个子元素. 参数范围 1 elem.children().可以通过 elem.children() 获取子元素的数目.访问元素的属性, 样式, 状态.item hover-on! :elem = $1( input.url ) ,elem:empty = true ?(self.value = empty) #(self.value = filled),elem:hover = true,self:width = elem.box-content-width(),self.$(.icon) - (elem) elem:background = #CCC;代码中的三处展示了3种内容的访问方法:语句说明elem:hover = false,elem:disabled = true,通过:访问元素的状态.elem.value = string, = my_elem,elem.disabled = true,elem.title = null,通过.访问元素的属性值.注意部分属性值和状态是相互有关联的.要删除一个属性, 只需要赋值 null给它即可.elem:width = 56px,elem:display = none,通过:访问元素的CSS样式属性.在 CSSS! 中有如下状态可在执行时使用:状态说明elem:value元素DOM节点的值.对于输入框这个值为输入的文本. 其他元素为内部的文本.elem:index元素在子元素的序号. 取值从 1 开始到 self.parent().children()elem:hoverelem:activeelem:emptyelem:readonlyelem:disabledelem:focusable部分CSSS!中常用的布尔型状态. (true/false)调用元素的方法.item hover-on! :elem = $1( input.url ) ,elem:empty = true ?(self.value = empty) #(self.value = filled),elem:hover = true,self:width = elem.box-content-width(),self.$(.icon) - (elem) elem:background = #CCC;这里的代码通过 .box-content-width() 方法获取元素当前的内容宽度.元素有以下方法可供调用:方法说明elem.start-timer(500)开始触发元素的 timer! 事件. 参数为间隔的毫秒数.调用 elem.stop-timer() 或return cancel; 可以结束触发.elem.stop-timer()停止触发 timer! 事件.elem.scroll-to-view()滚动视图使元素可见.elem.box-type-what()这是个组合函数, 通过不同的 type 和 what 取值, 可以组合出多个函数.type 可取值: margin - 元素的 margin 框 border - 元素的边框 padding - 元素的padding 框 content - 元素的内容框(内容的外轮廓). inner - 元素的内部框what 可取值: left - 框的左坐标 right - 框的右坐标 top - 框的上坐标 bottom - 框的下坐标 width - 框的宽度 height - 框的高度elem.x-what()elem.y-what()获取元素的相对x,y坐标.what的取值可以是: parent - 相对于父元素的坐标值 root - 相对于根元素()的坐标值 view - 相对于当前窗口视图(window)的坐标值; screen - 元素在屏幕上的绝对坐标elem.start-animation()开始元素动画.触发动画事件 animation-start! 和 animation-step!