标签：style blog http color 使用 os strong io
不知不觉一晃两个月过去，说来惭愧，在此期间alterto一直没有再研究DuiEngine。主要是因为DuiEngine的作者现在构建一个新的界面库soui，而笔者也一直处于观望状态，因为DuiEngine的作者说了以后可能就不维护DuiEngine了，要把主要的经历放在SOUI上。alterto顿时犹豫了，既然这样我还为DuiEngine做什么教程啊。于是这两个月的时间里一直都很犹豫，也没有再出DuiEngine相关的教程。现在看来这种焦躁对于一个优秀的程序猿来说着实不应该，这也正暴露了出了国内很多和我一样的初学者所经常抱有的心态:”1.XXX语言还有没有前途 2.我是学XXX好还是学XXX好”。对于一个优秀的程序猿来说去抱怨这些问题是没有什么意义的，回归正题就算作者要转做SOUI，首先SOUI刚刚起步开始做，你永远不要妄想一个好的界面库在几个月内就成形，就拿DuiEngine来说，原本就是借鉴了金山开源界面库而来的，其后又经过了作者多次打磨与BUG提交才到现在的逐渐完善，这里我想说的是SOUI也同样是这样，前天DOWN了一个最新版本，发现BUG很多，毕竟几乎是由作者一个人完成的，疏漏之处在所难免；其次，DuiEngine的作者也说过SOUI在编程方法上会尽可能的与原来DuiEngine类似，也就说如果在一两年以后SOUI逐渐成型，我们可以轻易的从DuiEngine赚到SOUI上来。好了不发牢骚了，DuiEngine再次搞起，也希望SOUI在不远的将来能带给我们更多惊喜。
从今天开始，Alterto将带大家把DuiEngine界面库中所有的基本控件的创建过一遍。
下面带来第一个控件---按钮。
按钮控件，基本是所界面体系中最长用到的一类控件，而按钮又分为多种类型:标准按钮、单选按钮、复选按钮。
创建一个工程ButtonDemo，这里为了方便，所有的工程都使用静态链接。
这个时候编译会出错:
在上一章中介绍过，如果使用“支持ID系统”的话，会生成winres.h文件，定义了系统中的控件ID，然后问题就出来了，大家可以先自己考虑下为什么
宏定义:#define 标识符 表达式
标识符中不能包含”-”(没看出什么问题的小伙伴们该补补C语言了)
这里我们把所有DUI-DEMO都替换为DUI_DEMO
编译成功！
此时，系统已经为我们生成一个按钮，接下来我们就对这个按钮进行改造
首先在布局文件（dlg_main.xml）里定位这个按钮：
我们可以看到控件的皮肤定义(图片)并未直接在布局中给出，但是我们可以看到很多控件都带有“skin”和“class”属性，字面意思即“皮肤”和“样式”
这两个属性都在init.xml中给出定义
init.xml基本格式如下：
<DuiEngine> <font face="宋体" size=20><!--字体定义--> <string> <!--字符串定义--> <s id="1">按钮控件</s> </string> <skins> <!--为控件定义皮肤，目前笔者已知的有如下类型--> <!--单幅图片--> <imgframe name="dlg_frame" owner="DUI-DEMO" cache="1" src="IDP_MAIN_DLG_FRAME" left="5" right="5" top="40" bottom="40"/> <!--多幅图片--> <imglst name="tabskin_default" src="IDP_TAB_COMMON" subwidth="94"/> <!--普通按钮--> <button name="normalbtn" border="7D9EBC" bg="FBFCFD" bgup="FEFEFE" bgdown="C6E2FD" bguphover="FEFEFE" bgdownhover="DBEDFE" bguppush="C6E2FD" bgdownpush="FEFEFE"/> <!--水平滚动条--> <scrollbar name="sb_common" src="IDP_SCROLL" margin="3" hasgripper="0"/> <!--垂直滚动条--> <vscrollbar name="sb_vertical" src="IDP_VSCROLLBAR" margin="3"/> <border name="skin_menuborder" src="IDP_MENUBORDER" left="2" top="2" border="2,2,2,2" key="FF00FF" alpha="100"/> <!--gif图片--> <gif name="face0" src="IDP_GIF_FACE0"/> </skins> <!--样式定义,对控件外观进行定义，当然也可以在其中嵌套皮肤，有点类似于CSS中的类选择器--> <style> <class name="normalbtn" skin="normalbtn" font="0000" crtext="385e8b" crdisabled="91a7c0" textmode="25" cursor="hand" x-margin="0"/> ... ... </style> <!--为标准控件定义默认皮肤、样式--> <objattr> <button class="normalbtn"/> <check skin="btncheckbox"/> <radio skin="btnRadio"/> <imgbtn class="linkimage"/> <tabctrl tabskin="tabskin_default" crtext="000000" align="top" tabwidth="70" tabheight="38" tabspacing="0" tabpos="10" dotted="1"/> <divex sbskin="sb_common" sbwid="16"/> <edit transparent="1" x-margin="2" y-margin="2" ncskin="skin_editnc"/> <treectrl toggleskin="TreeToggle" checkskin="TreeCheckBox" critembg="FFFFFF" critemselbg="000088" critemtext="000000" critemseltext="FFFFFF" indent="17" itemmargin="4"/> </objattr> </DuiEngine>
我们看到可以看到msg box中class被定义为normalbtn,我们在<style>…</style>中找到他
<class name="normalbtn" skin="normalbtn" font="0000" crtext="385e8b" crdisabled="91a7c0" textmode="25" cursor="hand" x-margin="0"/>
其中定义了：
1.皮肤skin:nomarlbtn;
2.字体font:0000(表示用默认字体,见上述init.xml第二行)；
3.crtext:文本字体颜色
4.crdisabled:按钮无效时文本字体颜色
5.textmode:文本样式，参考DrawText的Format Flags，
这里的textmode=”25” 25(十六进制) = DT_CENTER|DT_VCENTER|DT_SINGLELINE（水平垂直居中单行）；
我查了下MSDN将各个flag所代表的意思和属性值在这里列一下：具体值和组合，大家可以自己查
值 说明 DT_BOTTOM 将正文调整到矩形底部。此值必须和DT_SINGLELINE组合。 DT_CALCRECT 决定矩形的宽和高。
如果正文有多行，DrawText使用lpRect定义的矩形的宽度，并扩展矩形的底部以容纳正文的最后一行。
如果正文只有一行，则DrawText改变矩形的右边界，以容纳下正文行的最后一个字符。
出现上述任何一种情况，DrawText返回格式化正文的高度，而不是绘制正文。DT_CENTER 使正文在矩形中水平居中。 DT_EDITCONTROL 复制多行编辑控制的正文显示特性。
特殊地，为编辑控制的平均字符宽度是以同样的方法计算的，此函数不显示只是部分可见的最后一行。DT_END_ELLIPSIS 对于显示的文本，如果结束的字符串的范围不在矩形内，它会被截断并以省略号标识。
如果一个字母不是在字符串的末尾处超出了矩形范围，它不会被截断并以省略号标识。
字符串不会被修改，除非指定了DT_MODIFYSTRING标志。DT_EXPANDTABS 扩展制表符，每个制表符的缺省字符数是8。
DT_WORD_ELLIPSIS, DT_PATH_ELLIPSIS和DT_END_ELLIPSIS不能和此参数一起使用DT_EXTERNALLEADING 在行的高度里包含字体的外部标头，通常，外部标头不被包含在正文行的高度里。 DT_HIDEPREFIX 忽略正文中的前缀字符（&），并且前缀字符后面的字母不会出现下划线。其它前缀字符的调用方式不受影响。
输入的字符串： "A&bc&&d"
正常： "Abc&d"
DT_HIDEPREFIX: "Abc&d"DT_INTERNAL 用系统字体来计算正文度量。 DT_LEFT 正文左对齐。 DT_MODIFYSTRING 修改给定的字符串来匹配显示的正文。
此标志必须和DT_END_ELLIPSIS 或 DT_PATH_ELLIPSIS同时使用。DT_NOCLIP 无裁剪绘制。当DT_NOCLIP使用时DrawText的使用会有所加快。 DT_NOFULLWIDTHCHARBREAK 在宽字符的字符串中防止行断开，因此折行规则相当于单字符的字符串。
例如，我们可以用在棒子版的windows中，为图标标签提供更好的可读性。
除非指定DT_WORDBREAK，否则此值没有作用。DT_NOPREFIX 关闭前缀字符的处理。
通常DrawText解释助记前缀字符，&为给其后的字符加下划线，解释&&为显示单个&。指定DT_NOPREFIX，这种处理被关闭。DT_PATH_ELLIPSIS 对于显示的正文，替换字符串在椭圆中的字符，以确保结果能在合适的矩形内。
如果该字符串包含反斜杠（\）字符，DT_PATH_ELLIPSIS尽可能的保留最后一个反斜杠之后的正文。
字符串不会被修改，除非指定了DT_MODIFYSTRING标志。DT_PREFIXONLY 仅仅在（&）前缀字符的位置下绘制一个下划线。不绘制字符串中的任何其他字符。
输入的字符串： "A&bc&&d"
正常： "Abc&d"
DT_PREFIXONLY:" _ "DT_RIGHT 正文右对齐。 DT_RTLREADING 当选择进设备环境的字体是希伯来文或阿拉伯文字体时，为双向正文安排从右到左的阅读顺序都是从左到右的。 DT_SINGLELINE 显示正文的同一行，回车和换行符都不能折行。 DT_TABSTOP 设置制表，参数uFormat的15"C8位（低位字中的高位字节）指定每个制表符的字符数，每个制表符的缺省字符数是8。
注意：DT_CALCRECT, DT_EXTERNALLEADING, DT_INTERNAL,
DT_NOCLIP, DT_NOPREFIX值不能和DT_TABSTOP值一起使用。DT_TOP 正文顶端对齐。 DT_VCENTER 使正文在矩形中垂直居中。
(DreamSmart注：此值必须和DT_SINGLELINE连用，否则GDI无法计算目的矩形)DT_WORDBREAK 断开字。当一行中的字符将会延伸到由lpRect指定的矩形的边框时，此行自动地在字之间断开。一个回车一换行也能使行折断。 DT_WORD_ELLIPSIS 截短不符合矩形的正文，并增加省略号。
6.cursor:光标移动到按钮上时的显示类型
7.x-margin:x方向外边距（具体应该可以参考CSS盒子模型）
由于按钮默认就是normalbtn样式，所以布局文件中我们将msg box中的class=“normalbtn去掉也无影响
1.创建新的按钮class：mybtn（<style></style>中添加)
<class name="mybtn" skin="mybtn" font="0000" crtext="385e8b" crdisabled="91a7c0" textmode="25" cursor="hand" x-margin="0"/>
为按钮定义皮肤,因为按钮有多种状态，一张图片肯定是放不下的所以这里我们使用<imglst></imglst>
<imglst name="mybtn" src="IDP_BTN_MYBTN" subwidth="72" />
(按钮皮肤资源，对应按钮四种状态)
subwidth = 总长度/按钮数量 = 288/4 = 72
src=“皮肤资源ID”，在index.xml中定义，格式如下
2.定义皮肤资源
<resid type="IMGX" name="IDP_BTN_MYBTN" file="image\mybtn.png" />
3.替换原有class，查看效果
最后将btn_msgbox的class定义为btn_msgbox
重新编译，运行
还有一种方法同样可以。
3.其他
在布局文件中 “msg box”不是使用class = “mybtn”改成 skin=”mybtn”这样就直接为按钮使用”mybtn”皮肤
而去掉了class “mybtn”中的一些额外属性。
细心的朋友可以发现在布局文件中使用<button></button>标签创建的按钮在点击后都会带有一个虚边框，很多时候这样是不允许的，其实DuiEngine中真正的图片按钮有
自己单独的标签<imgbtn>按钮名称</imgbtn>，<button/>一般只是用作普通按钮的定义,下面我们就用<imgbtn />标签创建一个按钮。
1.在布局文件dlg_main.xml中添加一个imgbtn，略掉class直接使用刚才定义的skin
<imgbtn pos="|-250,|-15,|-200,|15" name="btn_msgbox2" skin="mybtn">msg box2</imgbtn>
这里我简单介绍一下imgbtn的各个属性
pos:坐标体系，具体定义大家参照DuiEngine工程doc目录下的几篇文章
这里我们还是直接使用刚才定义的皮肤,效果如下
我们接着去掉skin再换上刚才的class试一下
这下是不是连字体都改变了，总上所述，skin只是为控件定义皮肤，而class可以为控件定义额外的属性（如字体）
下面我们做一个实验,来验证一个问题：init.xml中除skin属性以外的其他属性，是否会对<button/>造成影响?
此时我们的刚刚用到的<button/>和<imgbtn>都是通过class来定义自身样式的，我们将先前init.xml中定义的“mybtn”class属性
<class name="mybtn" skin="mybtn" font="0000" crtext="000000" crdisabled="91a7c0" textmode="02" cursor="hand" x-margin="0"/>除skin以外的其他属性都变更一下来看看效果：
这里将按钮文本颜色改成黑色，右对齐：
我们可以发现
为此我得出结论:class中除skin外的其他属性对<button/>无影响
注意:这里的这个论证并不完全，大家有时间可以把其他属性也验证一下。
最后我们来做下按钮的消息响应，弹出一个windows的MessageBox
模板程序中，将对MainDlg的所有消息响应放到了UIHander中去，所以我们为mybtn2添加消息响应也该放到这里
这里我们在DUI_NOTIFY_MAP_BEGIN()—END()间添加消息映射
DUI_NOTIFY_MAP_BGIN()
DUI_NOTIFY_NAME_COMMAND("btn_msgbox", OnMsgBtnClick)DUI_NOTIFY_NAME_COMMAND("btn_msgbox2", OnMyBtnClick)
DUI_NOTIFY_MAP_END()这里用到了一个宏定义DUI_NOTIFY_NAME_COMMAND(按钮name属性,响应函数)
来完成对按钮的消息映射。
接着我们自定义消息响应函数:
//声明 void OnMyBtnClick(); //定义 void CUIHander::OnMyBtnClick() { ::MessageBox(NULL,L"Enjoy DuiEngine",L"提示",MB_OK); }
刚才我们用的按钮控件在布局文件中的name标识来关联消息响应函数的，下面我们换一种方法。第一章中讲到，如果创建工程时，选择“支持ID系统”
系统会为我们生成winres.h文件，里面定义了我们定义控件的ID，下面我们通过此ID来关联一下：
如下代码所示：
//DUI_NOTIFY_NAME_COMMAND("btn_msgbox2", OnMyBtnClick)
DUI_NOTIFY_ID_COMMAND(btn_msgbox2, OnMyBtnClick)同样OK！
好了，这章的教程就到这里，go home.
标签：style blog http color 使用 os strong io
原文地址：http://www.cnblogs.com/alterto/p/3884248.html
