首页 > 代码库 > 第四篇：SOUI资源文件组织
第四篇：SOUI资源文件组织
什么是资源？
现代的软件只要有UI，基本上少不了资源。
资源是什么？资源就是在程序运行时提供固定的数据源的文件。
在MFC当道的时代，资源一般就是位图(Bitmap)，图标(Icon)，光标(Cursor)，对话框模板(Dialog)等资源。
在SOUI中，资源主要变成了XML布局和PNG图片文件。
SOUI-DEMO的资源解析
首先看一下SOUI-DEMO中用到的资源索引XML(uires.idx)：
1 <?xml version="1.0" encoding="utf-8"?> 2 <resource> 3 <UIDEF> 4 <file name="xml_init" path="xml\init.xml" /> 5 </UIDEF> 6 <ICON> 7 <file name="LOGO" path="image\img_logo.ico" /> 8 </ICON> 9 <CURSOR>10 <file name="ANI_ARROW" path="image\021.ani" />11 <file name="CUR_TST" path="image\camera_capture.cur"/>12 </CURSOR>13 <LAYOUT>14 <file name="maindlg" path="xml\dlg_main.xml" />15 <file name="menu_test" path="xml\menu_test.xml" />16 <file name="page_layout" path="xml\page_layout.xml" />17 <file name="page_treebox" path="xml\page_treebox.xml" />18 <file name="page_treectrl" path="xml\page_treectrl.xml" />19 <file name="page_misc" path="xml\page_misc.xml" />20 <file name="page_webkit" path="xml\page_webkit.xml" />21 <file name="page_about" path="xml\page_about.xml" />22 </LAYOUT>23 <IMGX>24 <file name="png_page_icons" path="image\page_icons.png" />25 <file name="png_small_icons" path="image\small_icons.png" />26 27 <file name="webbtn_back" path="image\webbtn_back.png" />28 <file name="webbtn_forward" path="image\webbtn_forward.png" />29 <file name="webbtn_refresh" path="image\webbtn_refresh.png" />30 31 <file name="png_treeicon" path="image\TreeIcon.png"/>32 <file name="png_menu_border" path="image\menuborder.png" />33 34 <file name="png_vscroll" path="image\vscrollbar.png" />35 36 <file name="png_tab_left" path="image\tab_left.png" />37 <file name="png_tab_left_splitter" path="image\tab_left_splitter.png" />38 <file name="png_tab_main" path="image\tab_main.png" />39 <file name="btn_menu" path="image\btn_menu.png" />40 </IMGX>41 <GIF>42 <file name="gif_horse" path="image\horse.gif"/>43 <file name="gif_penguin" path="image\penguin.gif"/>44 </GIF>45 <rtf>46 <file name="rtf_test" path="rtf\RTF测试.rtf"/>47 </rtf>48 <script>49 <file name="lua_test" path="lua\test.lua"/>50 </script>51 <translator>52 <file name="lang_cn" path="translation files\lang_cn.xml"/>53 </translator>54 </resource>
uires.idx文件是SOUI资源的入口，定义了程序中使用的各种资源，以"resource"为根节点。
在soui-demo的uires.idx中，我定义了UIDEF，ICON，CURSOR，LAYOUT，IMGX，GIF，rtf，script，translator这些资源类型。
其实你还可以定义任意的资源类型，只要类型长度不超过30个字符。
每一个资源类型下都是一些file元素，每个file包含两个属性：name 及path。
name是UI布局的XML文件引用该资源的标识，而path则是该资源真实的文件存储路径。
除了UIDEF中定义的xml_init及layout中定义的布局XML外，其它资源都比较简单，就是提供一种从name映射文件的方式。
UIDEF资源（布局XML再单独开篇介绍）
其中uidef中定义的init.xml用来定义SOUI中使用的全局UI定义。
这个文件一般应该在main函数中被SApplication对象使用，如：
//... //定义一个唯一的SApplication对象，SApplication管理整个应用程序的资源 SApplication *theApp=new SApplication(pRenderFactory,hInstance); //... //加载全局资源描述XML theApp->Init(_T("xml_init"));
这里直接使用uidef中定义的name属性来初始化系统。SApplication::Init默认从uidef段中去查找xml_init资源，当然也可以定义在其它资源类型如xml中，但是需要在init中显示指定资源类型。
下面我们打开xml\init.xml看一下里面的内容：
1 <?xml version="1.0" encoding="utf-8"?> 2 <UIDEF> 3 <font face="微软雅黑" size="18"/> 4 5 <string> 6 <ver value="1.0"/> 7 </string> 8 9 <skins>10 <imglist name="skin_page_icons" src="imgx:png_page_icons" states="9"/>11 <imglist name="skin_small_icons" src="imgx:png_small_icons" states="12"/>12 <imglist name="skin_tree_icon" src="imgx:png_treeicon" states="3"/>13 14 <imglist name="skin_menuicon" src="imgx:png_small_icons" states="12"/>15 <border name="skin_menuborder" src="imgx:png_menu_border" left="2" top="2" border="2,2,2,2" key="FF00FF" alpha="100"/>16 <imglist name="skin_webbtn_back" src="imgx:webbtn_back" states="4"/>17 <imglist name="skin_webbtn_forward" src="imgx:webbtn_forward" states="4"/>18 <imglist name="skin_webbtn_refresh" src="imgx:webbtn_refresh" states="4"/>19 <imglist name="skin_tab_left" src="imgx:png_tab_left" states="3"/>20 <imglist name="skin_tab_left_splitter" src="imgx:png_tab_left_splitter"/>21 <imglist name="skin_tab_main" src="imgx:png_tab_main" states="3"/>22 <imglist name="skin_btn_menu" src="imgx:btn_menu" states="3"/>23 <gif name="gif_horse" src="gif:gif_horse"/>24 <gif name="gif_penguin" src="gif:gif_penguin"/>25 26 </skins>27 28 <style>29 <class name="cls_dlg_frame" skin="_skin.sys.wnd.bkgnd" font="" colorText="#000000" margin-x="0"/>30 31 <class name="cls_btn_link" cursor="hand" colorHover="#0A84D2" />32 <!--定义文字按钮的样式-->33 <class name="cls_btn_weblink" cursor="hand" colorText="#1e78d5" colorHover="#1e78d5" font="italic:1" fontHover="underline:1,italic:1" />34 35 <class name="cls_txt_red" font="face:宋体,bold:1" colorText="#FF0000" />36 <!--定义白色粗体宋体-->37 <class name="cls_txt_black" font="face:宋体,bold:1" colorText="#000000" />38 <!--定义黑色粗体宋体-->39 <class name="cls_txt_white" font="face:宋体,bold:1" colorText="#FFFFFF" />40 <!--定义白色粗体宋体-->41 42 <class name="normalbtn" font="" colorText="#385e8b" colorTextDisable="#91a7c0" textMode="25" cursor="hand" margin-x="0"/>43 44 <class name="toptext" textMode="20" />45 <class name="vcentertext" textMode="24"/>46 <class name="rightvcentertext" textMode="26"/>47 <class name="centertext" textMode="25"/>48 <class name="righttext" textMode="22"/>49 50 <class name="linkimage" cursor="hand"/>51 52 <class name="cls_edit" ncSkin="_skin.sys.border" margin-x="2" margin-y="2" />53 </style>54 55 <objattr>56 <button class="normalbtn"/>57 <imgbtn class="linkimage"/>58 <tabctrl colorText="000000" align="top" tabWidth="70" tabHeight="38" tabSpacing="0" tabPos="10" dotted="1"/>59 <edit transParent="1" margin-x="2" margin-y="2"/>60 <treectrl colorItemBkgnd="#FFFFFF" colorItemSelBkgnd="#000088" colorItemText="#000000" colorItemSelText="#FFFFFF" indent="17" itemMargin="4"/>61 </objattr>62 </UIDEF>
这个xml_init必须是以UIDEF为唯一根节点。
在UIDEF下，可以定义font，string，skins，style，objattr五个子节点。
其中，font定义SOUI中使用的默认字体，只有face和size两个属性。
string是一个字符串表，定义一个"name-字符串"映射，在布局的XML文件中可以通过引用字符串的name来获得字符串。
skins定义SOUI中使用的全局窗口元素绘制对象，每一个对象都对应一个SOUI::ISkinObj的派生类。
SOUI系统默认实现了SSkinImgList(imglist), SSkinImgFrame(imgframe), SSkinButton(button), SSkinGradation(gradation), SSkinScrollbar(scrollbar), SSkinMenuBorder(border)这几种绘图类型。SSkinImgList为SOUI中的C++类名，imglist为在skins节点中的元素类型名。
下面分别介绍这几种绘图类型：
imglist
imglist是一个图片序列对象，可以包含一组小图片，常见的如按钮需要使用的4种状态图。
imglist包含4个属性：
SOUI_ATTRS_BEGIN() ATTR_CUSTOM(L"src", OnAttrImage) //skinObj引用的图片文件定义在uires.idx中的name属性。 ATTR_INT(L"tile", m_bTile, TRUE) //绘制是否平铺,0--位伸（默认），其它--平铺 ATTR_INT(L"vertical", m_bVertical, TRUE)//子图是否垂直排列，0--水平排列(默认), 其它--垂直排列 ATTR_INT(L"states",m_nStates,TRUE) //子图数量,默认为1 SOUI_ATTRS_END()
imgframe
imgframe是一个提供九宫格显示的绘图对象，SSkinImgFrame派生自SSkinImgList，因此imgframe也拥有imglist的全部属性。
此外，imgframe提供了几个新的属性：
SOUI_ATTRS_BEGIN() ATTR_INT(L"left", m_rcMargin.left, TRUE) //九宫格左边距 ATTR_INT(L"top", m_rcMargin.top, TRUE) //九宫格上边距 ATTR_INT(L"right", m_rcMargin.right, TRUE) //九宫格右边距 ATTR_INT(L"bottom", m_rcMargin.bottom, TRUE) //九宫格下边距 ATTR_INT(L"margin-x", m_rcMargin.left=m_rcMargin.right, TRUE)//九宫格左右边距 ATTR_INT(L"margin-y", m_rcMargin.top=m_rcMargin.bottom, TRUE)//九宫格上下边距 SOUI_ATTRS_END()
button
button绘图对象是绘制按钮时使用的，它使用渐变实现绘制按钮的4种状态。
包含以下属性：
SOUI_ATTRS_BEGIN() ATTR_COLOR(L"colorBorder", m_crBorder, TRUE) //边框颜色 ATTR_COLOR(L"colorUp", m_crUp[ST_NORMAL], TRUE) //正常状态渐变起始颜色 ATTR_COLOR(L"colorDown", m_crDown[ST_NORMAL], TRUE) //正常状态渐变终止颜色 ATTR_COLOR(L"colorUpHover", m_crUp[ST_HOVER], TRUE) //浮动状态渐变起始颜色 ATTR_COLOR(L"colorDownHover", m_crDown[ST_HOVER], TRUE) //浮动状态渐变终止颜色 ATTR_COLOR(L"colorUpPush", m_crUp[ST_PUSHDOWN], TRUE) //下压状态渐变起始颜色 ATTR_COLOR(L"colorDownPush", m_crDown[ST_PUSHDOWN], TRUE) //下压状态渐变终止颜色 ATTR_COLOR(L"colorUpDisable", m_crUp[ST_DISABLE], TRUE) //禁用状态渐变起始颜色 ATTR_COLOR(L"colorDownDisable", m_crDown[ST_DISABLE], TRUE) //禁用状态渐变终止颜色 SOUI_ATTRS_END()
gradation
渐变绘图对象，提供3个属性：
SOUI_ATTRS_BEGIN() ATTR_COLOR(L"colorFrom", m_crFrom, TRUE) //渐变起始颜色 ATTR_COLOR(L"colorTo", m_crTo, TRUE) //渐变终止颜色 ATTR_INT(L"vertical", m_bVert, TRUE) //渐变方向,0--水平(默认), 1--垂直 SOUI_ATTRS_END()
scrollbar
滚动条皮肤，虽然它派生自imglist，实际上imglist中实现的属性在scrollbar中没有意义，只是为了省点代码。
SOUI_ATTRS_BEGIN() ATTR_INT(L"margin",m_nMargin,FALSE) //边缘不拉伸大小 ATTR_INT(L"hasGripper",m_bHasGripper,FALSE) //滑块上是否有帮手(gripper) ATTR_INT(L"hasInactive",m_bHasInactive,FALSE) //是否有禁用态 SOUI_ATTRS_END()
一般的scrollbar皮肤资源如下：
如果没有帮手也没有禁用状态，图片应该是8*3的正方形网格。
有帮手则X增加一个网格，有禁用状态则Y增加一个网格。
border
给menu用的，以后再介绍。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。