什么是資源？
現代的軟件只要有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 <skin> 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 </skin> 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的派生類。
skins
SOUI系統默認實現了SSkinImgList(imglist), SSkinImgFrame(imgframe), SSkinButton(button), SSkinGradation(gradation), SSkinScrollbar(scrollbar), SSkinMenuBorder(border)這幾種繪圖類型。SSkinImgList為SOUI中的C++類名，imglist為在skins節點中的元素類型名。
下面分別介紹這幾種繪圖類型：
1、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()
假定上圖的圖片在uires.idx中的定義為：
<imgx> <file name='btn_next' file='image\btn.next.png'/> </imgx>
要在soui中引用這個圖片，需要在init.xml的skins結節中做如下聲明：
<skins> <imglist name=“skin_btn_next" src="imgx:btn_next" states="4" tile="0" vertical="0"/> </skins>
在上面的skin定義中，
name屬性告訴系統如何引用定義的imglist
src屬性定義該skin需要使用哪一個圖片資源，資源引用格式為type:name，如上面使用的imgx:btn_next，對於圖片資源，通常情況下也可以不指定type,系統會自動在常用的圖片類型下查找，但不建議這樣使用。
states定義圖中包含多少個子圖。
title定義圖片在放大顯示時時平鋪還是拉伸，默認為拉伸。
vertical屬性定義圖中的子圖的排列方式。
在本例子中tile和vertical屬性都可以不指定。
2、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()
imgframe的格式如上圖，在imgframe中通過left, top, right, bottom來定義九宮格。
3、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()
4、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()
5、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增加一個網格。
6、border
給menu用的，以后再介紹。
style
在style節點中，定義UI布局中SOUI窗口對象的屬性集合，它們是SWindow對象的屬性，所有SWindow對象都可以通過class屬性來引用style節點中定義的屬性集合。
objattr
控件的默認屬性。
SOUI可以為每一類UI控件通過objattr來提供一種默認屬性集合，以減少在XML布局中的重復定義。