HTMLayout学习笔记

by BBDXF

一、界面篇

学习界面需要有一定的HTML、CSS认知，如果你问为什么，那就当我白说。

由于界面库官方没有给一个完善的User guide，所有的学习都靠自己，而唯一的标准教程就是SDK中给的例程，所以为了完善地学习此库，以SDK中的例程一个个解析学习。

此篇主要来解析html_samples下的界面编写，我想这是大家都非常关心的话题，所以放在第一位。（PS：由于界面编写需要很多 HTML+CSS 知识，我也是新手，没有多少这方面的学习，所以如有错误纯属正常，望谅解。）

参考文档：http://www.terrainformatica.com/wiki/h-smile/drag-n-drop?do=index

1、@font-face

此例程主要讲解字体（自定义字体）在界面中的使用。（以后若无特殊情况，都会按照以下形式【文件结构+代码+解析】组织文章）

文件结构：

NinjaLine.ttf

test.htm

代码：在Style中，插入

@font-face

{

font-family: NinjaLine;

src: url(NinjaLine.ttf);

}

p

{

font: 18pt NinjaLine;

}

解析：其中font:18pt NinjaLine; 是设置段落<p></p>之内的文字以NinjaLine字体显示。而由于这种字体没有在系统里注册，所以不能直接调用，需要按照@font-face{...}的形式给予声明（和C/C++的函数声明的感觉差不多），如果是系统里已经有的字体，如“宋体”、“楷体”等就可以不声明，直接使用。

2、@image-map

这部分讲的是@image-map的用法。

文件结构：

cmd.bat

dpi-aware.htm

rttb.png

star-1x.png

star-2x.png

test.htm

toolbar-icons.htm

第一个文件：dpi-aware.htm,讲的是关于自适应DPI的问题。

代码：

@image-map dpi-aware {

src: url(star-1x.png) 100dpi,

url(star-2x.png) ;

}

#star {

size:180dip;

background: no-repeat 50% 50%;

background-image: image-map(dpi-aware);

border:1px solid;

}

#star-no {

size:180dip;

background: no-repeat 50% 50%;

background-image: url(star-1x.png);

border:1px solid;

}

//HTML代码省略

解析：

代码中比较值得注意的就是声明了一个@image-map dpi-aware {}(不专业，但是方便理解就这么说了)，然后再#star这一块调用image-map(dpi-aware)，将它设置为背景图片。在我的电脑上运行的效果是#star和#star-no显示的是同一张图片（大家的效果都应该差不多），但是将声明的部分改为：

@image-map dpi-aware {

src: url(star-1x.png) 90dpi,

url(star-2x.png) ;

}

之后，显示的是声明的第二张图片。为什么呢？

官方给出的说明其实已经解释了这个问题，@image-map dpi-aware 声明，当被调用时，会根据电脑屏幕的DPI（每英寸点数，win7可以通过注册表 HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetric\AppliedDPI查看），当电脑DPI小于设定的100dpi时，就会调用第一张图片，否则就是第二张了。总的来说，就是根据屏幕DPI自适应显示相应的图片。

第二个文件：test.htm 是关于设置样式的问题，官方没给任何解释，但是根据第三个文件内容，可以很明显地看出来，它啥也不是，就是个Test,Pass掉。

第三个文件：toolbar-icons.htm 这个文件很重要，他给我们提供了一种很方便地加载类似MFC中工具条界面的方法。

代码：

Style部分样式代码：

@image-map tb-icon

{

src:url(rttb.png);

cells:15 2;

items:  ulist,

olist,

unindent,

indent,

picture,

table,

link,

align-left,

align-center,

align-right,

align-justify,

align,

fullscreen,

unfullscreen,

props,

bold,

italic,

underline,

strikethrough,

font-family,

font-size,

text-color,

text-back-color,

source;

}

toolbar {

display:block;

display-model:block-inside;

flow:horizontal; border-spacing:2px;

padding:0;

border-left: 1px solid #F4F4F4;

border-bottom: 1px solid #BBB;

background-color: #F1F1F1 #F1F1F1 #DADADA #DADADA;

}

toolbar > widget.button {

behavior:clickable;

size:21px;

padding:0;

foreground:no-repeat 50% 50%; padding:3px;

foreground-repeat:no-repeat;

background-image:none;

background-repeat:stretch;

hit-margin: 2px;

margin: 2px;

transition:none;

}

toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); }

toolbar > widget.button.italic { foreground-image:image-map(tb-icon,italic); }

....(类似的省略)

Body部分Htm代码：

<toolbar>

<widget .button .bold />

<widget .button .italic />

....其他的省略

解析：

Style部分的第一个声明@image-map和字体声明类似，声明了一个ToolBar的结构，其中，src:url(xx.png);表明Toolbar所使用的图片，一般为了美观，png要做成透明背景的。cells:15 2;表明整个Toolbar的大小为多少行多少列。items:xx1,xx2,...;表明Toolbar中有哪些项，都以名称表示，每个名称都和图片中的图标相对应。一般cells中形成的表格数一定要大于items的项目数。

toolbar{ .... }和toolbar > widget.button{....}和其类似样式的就是CSS样式了，虽然并不和平常使用的CSS完全相同，但是除了添加的一些专门适用于程序的样式之外，其他的都差不多，我只捡一些比较重要和特殊的加以说明，一般性描述的不做介绍，有问题的可以去W3CSchool和HTMLayout官网查询。

toolbar{}  //设置<toolbar></toolbar>之间的内容的样式，这种使用方法以后会很常见

display:block; //显示当前块，一般不需要设置，默认的就是这个

flow:horizontal; //水平放置其内部块，这个很重要，是HTMLayout专用的

toolbar > widget.button{} //设置<toolbar>内部<widget style="button">或者有<widget .button>声明的块的样式，这种用法很常见,你可以根据各块的关系随意组合下去。

toolbar > widget.button：hover{} //上一个用法的扩展，表明是在上一个样式的前提下，当鼠标移到上面时，所表现的的样式，类似的还有 :active、:disable等。

behavior:clickable;//设置它对应控件的动作为可以被点击。behavior有很多动作，每一个动作的具体含义需要查阅官方的文档。

background-image:url(theme:toolbar-button-hover); //设置背景图片，重点是后面的theme主题设置，目前未找到全的列举说明，暂时明白什么意思就行了，当然也可以自己设置对应的图片。

foreground-image-transformation: colorize(#70F); //设置当每一项被至于焦点时，图片的前景颜色，通过colorize(xx)可以改变图片的显示颜色（透明的前景色）。

toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); } //这里才是重点的重点，它将HTML中的name="bold"（.bold）对应的widget和@image-map中的图片对应起来，{}中的bold就是在声明时指定的名称。

最后是HTML部分，重点是<widget .button .bold /> 这表明widget控件的类型(style)为button,其名称为bold（bold这里只是表示一个名称，不是粗体的标志）,个人猜测完全可以写为<widget style="button" class="blod" ></widget>这种比较正规的写法，只是样式需要做很多调整，没有官方的方法省事。值得注意的是，CSS中的名称一定要和这里的style和class对应，原因我也不用多说了。

3、abs

文档结构：

│  abs.htm

│  abspos.htm

│  abs_fix.htm

│  fix_center.htm

│  menus.htm

│  rel_abs.htm

└─images

back.png

menu-back.png

第一个文件：abs.htm  演示的是绝对位置的不同效果。

代码：

Style部分：

#abs1 {

position:relative;

overflow:auto;

height:50%;

...

}

#abs2 {

position:absolute;

width:150px;

...

}

#abs3 {

position:absolute;

width:150px;

...

}

HTML部分(只写框架)：

<div id="abs1">

<p>很多的p段落</p>

....

<p id="abs2"></p>

</div>

<div id="abs3">

xxxxxxxx

</div>

解析：

Style部分值得注意的就是position属性的设置，其中absolute指绝对的，relative相对的。这里的绝对是相对于当前所在的大块（母块）来说的，由于abs1的height:50%，配合overflow:auto,每次只显示一半的区块，所以拉动滑动条时它的左上角坐标是变化的，而abs2相对于他的左上角的绝对位置不变，所以abs2区块也会跟随着abs1移动。而abs3由于直接位于body之内，他的位置相对于body的左上角来绝对确定，body不变，他的位置就不会变。

做个小总结：

1、absolute：不占位、relative：有占位！position为rel的层在显示时，会占用一行！其后面的abs层只会在下一行显示出来！ position为abs的层在显示时，会与后面的重叠在一起！

2、默认情况下（不结合top等来定位），absolute（绝对定位）以父层来定位的

如上面的id为abs的层，如果不结合top等来定位，则其显示位置会随父级posi层（posi在文档左下角，其也会在左下角）

3、在结合top、bottom、right、left等属性时，absolute（绝对定位）以窗口做为定位，relative以自身的占位为基线做偏移！

4、在结合top、bottom、right、left等属性时，如果想absolute（绝对定位）能以父层做为定位基线的话，则在父层应用absolute或relativ属性就可以!

HTML部分是标准的html标记，不做解释。

第二个文件：abs_fix.htm 第一个的拓展，介绍属性position:fixed; 的用法

由于其他的都和第一个类似，不做介绍，只讲解position:fixed; 的原理。

position:fixed; 除了相对位置和绝对位置，还有一个fixed(固定的)，它用来定位一个区块相对于边框（上下左右）的位置，使用非常方便，通过它你可以很简单地将一个区块固定到右边框、上边框、下边框，而不同设置太多的代码。一般他需要left,right,top,bottom中的一个或者多个配合。如将一个区块设置为距右边框10px，上下10px,宽度100px,高度随框架变化，代码如下：

#fix {

position:fixed;

right:10px;

top:10px;

width:100px;

bottom:10px;

}

相当的方便和简单，唯一的缺点是在低版本的IE引擎(如IE6.0)，变现的不好，不过对于HTMLayout没有问题。

第三个文件：abspos.htm 这个比第一个还简单，介绍绝对位置的，略过。

第四个文件：fix_center.htm 这个和第二个类似，是它的威力加强版。呵呵，实现居中效果。这个很简单。

左右居中： left:*;right:*;

上下居中：top:*;bottom:*;

PS: 千万不要忘了设置width:属性，这应该是理所当然的，你不给人家提供宽度，如何居中！

第四个文件：menus.htm 通过定位实现菜单的样式，这个比较有意思。这个里面没有新的内容，但是需要有一定的排版美化能力，完全用css组合成的一个菜单框架，这里也只讲解思路。

代码：

Style部分：

menu {

flow:horizontal;

padding-right:100%%;

...

}

menu li{

display:block;

position:relative;

...

}

menu menu{

flow:vertical;

display:none;

...

}

menu > li:hover > menu{

display:block;

}

HTML部分：

<menu>

<li>

File

<menu>

<li>New</li>

<li>Open</li>

<hr/>

<li>Exit</li>

</menu>

</li>

</menu>

代码解析：

先说HTML结构，先有一个<Menu>内部包含多个<li>，每个<li>都作为主菜单显示的内容，在<li>的内部，再设置一个<menu><li>这样的结构，作为子菜单，还可以在主菜单下创建一个<table>填充一些想要的控件。

CSS部分，重点是flow:horizontal/vertical;其中主菜单使用水平排列，使得每个<li>都成为一个单独的菜单存在，子菜单同样使用垂直排列，这样就成为了一个完整的菜单栏。

第五个文件：rel_abs.htm 相对定位，参看第一个的总结就可。

4、animated-png 动画的png（挺有意思的）

文件结构：

012-dispose-background.png

012-dispose-none.png

012-dispose-previous.png

apng.htm

bouncing-beach-ball.png

disposal.htm

loading.htm

loading_16.png

第一个文件：apng.htm 展示如何使用APNG动画

代码：

Style部分：

p:nth-child(3) { background-color:#8080ff; }

p:nth-child(2) { background-color:#ff8080; }

HTML部分：

<p><img src="bouncing-beach-ball.png"></p>

<p><img src="bouncing-beach-ball.png"></p>

<p><img src="bouncing-beach-ball.png"></p>

<p><img src="bouncing-beach-ball.png"></p>

解析：

首先说下调用问题，就和普通的图片调用一样。然后，背景的问题，可以通过设置背景色来展现不同的背景。最后需要注意一个用法：p:nth-child(3) { }  这种调用是指，第3个<P>标签的样式，可以用来避免多次设置class和id。

第二个文件：disposal.htm 用来展示用不同模式制作出来的动画APNG的差别，这个对于制作APNG的时候有点帮助，程序控制方面没用。

第三个文件：Loading.htm 和第一个一样。不解释。

5、animations

文件结构：

│  blend.htm

│  h-sliding-bar-csss!.htm

│  h-sliding-bar.htm

│  popup-animations.htm

│  sliding-bar-csss!.htm

│  sliding-bar.htm

│  sliding-list.htm

│

└─images

│  2.gif

│  4.gif

│  5.gif

│  7.gif

│  led-blue.png

│  led-green.png

│  led-red.png

│  led-yellow.png

│  leds.xar

│  list-back.png

│

├─cds

│      darkside.jpg

│      delicate.jpg

│      finalcut.jpg

│

└─outlook

calendar.gif

contacts.gif

folder.gif

mail.gif

notes.gif

tab-hover.png

tab.png

注：这里的文件比较特殊，如sliding-bar.htm 和sliding-bar-csss!.htm，这两个文件其实实现的是同一种效果，只是前者使用的是静态的CSS，后者使用了类似动态语言的编程，由于个人能力原因，这里只对静态的加以解释，对于想了解的各位说声抱歉。

第一个文件：Blend.htm 展示的是图片的渐变效果和一个动作

代码：

img:hover

{

foreground-image:url(images/led-red.png);

transition: blend;

}

#test { behavior:dropdown; }

#test popup img

{

foreground-image:url(images/led-yellow.png);

transition: blend;

}

#test popup img:hover

{

foreground-image:url(images/led-blue.png);

transition: blend;

}

HTML部分：

<div>

<img><img><img><img>....

</div>

<div id="test">

<popup>

<img><img><img><img>....

</popup>

</div>

解析：

先说Blend的问题，我们能很明显地发现CSS中有这么一条属性：transition:blend;它告诉我们所有的渐变使用混合模式，这就是程序中看到的鼠标滑过之后一些浅颜色的残留，视觉效果很好。

再来说动作的问题：behavior:popup;之前也讲到过clickeable的动作，那个使一个button成为一个可以被点击的对象。这里的popup也是一个固定的动作，它使<popup>标签中的内容项菜单一样弹出。这里的弹出和之前的菜单比较类似，但是原理完全不一样。菜单弹出的是通过CSS的动作控制，将隐藏的动态显示出来，属于外部处理，而这里的就像是内部自动实现，只要你定义了popup标签，通过设置它父层的behavior，系统会自动调出下层的pop内容。

第二个文件：h-slider-bar.htm 水平的动态工具条

( 暂停更新，预计年后继续 )