述
Mx3 使用的界面引擎是基于 HTML 的轻量级渲染引擎(HTMLayout).
修改 HTMLayout 的界面与修改网页一样方便灵活.
此界面引擎基于 HTMLayout 开发, 关于 HTMLayout 的更多信息请访问以下网站:
相关演示可以下载 HTMLayout 的 Demo 文件包查看:
(下载后解压. 启动 bin\browse.exe, 然后用它打开 html_samples 目录下的文件查看.)
界面引擎的结构
HTMLayout 的界面通过下面 4 个方面定义:
・ HTML
定义界面的基础结构
・ CSS样式
定义界面元素的表现
・ CSS的 behavior扩展属性
定义界面元素的基础交互行为
・ CSSS!脚本
为界面提供简单的脚本控制能力
我们会在后面的内容中对它们逐一介绍.
HTML 支持
界面的 HTML 文件奠定了界面的基础层级和结构.
HTMLayout 界面引擎的 HTML 支持以 HTML 4.0 规范为基础, 在此基础上又扩展了一些特殊标记.
这里仅介绍 HTMLayout 界面中用到的基本元素.
标记
include 标记是一个扩展的特殊标记.
顾名思义, 就是引用并包含其他 htm 文件.
它有以下两种书写格式:
Missing: layout.htm
需要注意的是, 被引用的文件如果不在同级目录, 引用后里面的相对路径都会基于引用页的路径处理.
menu 标记被用于定义界面中的菜单.
这个标记产生的元素默认是隐藏的, 只有被 popup-menu 行为触发时才显示.
- 和带有 role=”menu-item” 的元素都会被当作菜单项处理.
HTMLayout 界面中菜单的定义书写格式如下:
- Menu Item
Menu Item with Icon and Shortcut Label
Sub Menu
- Sub Menu Item 1
- Sub Menu Item 2
- Menu Item
-
- Child Item 1
- Child Item 2
其他扩展元素
还有很多其它的扩展元素, 因为在 mx3 的主界面中没有使用到, 因此在这里不做介绍.
mx3 的对话框界面中用到很多控件, 这些元素在内建的 base\control.css 中定义.
主界面的皮肤文件中没有使用此 css 文件.
HTMLayout 的 Demo 文件包中 html_samples\form\ 目录下有大部分控件的范例文件.
(包括进度条, 日期选择框, 数字输入框等)
CSS 支持
HTMLayout 皮肤引擎的 css 支持以 css 2.1 为基准.
同时支持部分 css3 的属性和选择符.
在这里不再介绍 css2.1 标准支持的属性和选择符, 只对界面用到的扩展属性和选择符进行介绍.
扩展选择符支持
选择符
说明
div:not(:first-child)
“非”状态选择符.范例为匹配所有不是第一个子元素的 div 元素.
div[foo^=”val”]
匹配 foo 属性值以”val”开头的 siv 元素.
div[foo$=”val”]
匹配 foo 属性值以”val”结尾的 div 元素.
div[foo*=”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 子元素.
input:only-of-type
匹配父元素里唯一使用了 input 标记的子元素.
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;