MyGui笔记（2）控件类型和皮肤

前篇：《MyGui笔记（1）建立第一个工程》
本篇：创建控件的方法要传入控件类型和控件皮肤，这里简单记录下所有控件的类型和皮肤。
环境：MyGui3.2.0(OpenGL平台)

控件类型

        从WidgetManager::initialise()可以看到所有的控件类型为下：

控件类型	控件说明	控件备注
Button	按钮
Canvas	画布	显示纹理
ComboBox	下拉框	派生自EditBox，可设置是否可编辑
DDContainer	拖曳容器
EditBox	编辑框
ItemBox	项框	派生自DDContainer，支持拖曳
ListBox	列表框
MenuBar	菜单栏
MenuControl	菜单控件
MenuItem	菜单项
MultiListBox	多行列表框
MultiListItem	多行列表项
PopupMenu	弹出菜单
ProgressBar	进度条
ScrollBar	滚动条
ScrollView	滚动视图
ImageBox	图像框
TextBox	文本框
TabControl	标签控件
TabItem	标签项
Widget	控件
Window	窗口

        这些控件的关系图如下：
第一张：

第二张：

第三张： 

 控件皮肤

        再来看Widget::_initialise(WidgetStyle _style, const IntCoord& _coord, const std::string& _skinName, Widget* _parent, ICroppedRectangle* _croppedParent, const std::string& _name)如何加载皮肤，代码如下：

1 2 3 4 5 6 7

ResourceSkin* skinInfo = nullptr; ResourceLayout* templateInfo = nullptr; if  (LayoutManager::getInstance().isExist(_skinName))     templateInfo = LayoutManager::getInstance().getByName(_skinName); else     skinInfo = SkinManager::getInstance().getByName(_skinName);

可以看到先判断皮肤是否来自布局管理器，否则的话再从皮肤管理器进行获取，亦即先从MyGUI_BlueWhiteTemplates.xml获取，再从MyGUI_BlueWhiteSkins.xml获取。MyGUI_BlueWhiteTemplates.xml内容部分为下： 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<Resource type = "ResourceLayout"  name = "Window"  version = "3.2.0" >          <Widget type = "Widget"  skin = "PanelEmpty"  position = "15 10 68 49"  name = "Root" >              <Property key = "Snap"  value = "true" />              <Property key = "Movable"  value = "false" />              <UserString key = "LE_TargetWidgetType"  value = "Window" />              <Widget type = "Widget"  skin = "CaptionEmptySkin"  position = "0 0 68 28"  align = "HStretch Top" >                  <Widget type = "TextBox"  skin = "TextBox"  position = "2 3 62 24"  align = "HStretch Top"  name = "Caption" >                      <Property key = "TextColour"  value = "0 0 0" />                      <Property key = "TextAlign"  value = "Center" />                      <Property key = "FontName"  value = "Default" />                  </Widget>              </Widget>              <Widget type = "Widget"  skin = "WindowFrameSkin"  position = "0 28 68 20"  align = "Stretch" >                  <Widget type = "Widget"  skin = "ClientTileSkin"  position = "4 2 58 12"  align = "Stretch"  name = "Client" />              </Widget>          </Widget>      </Resource>      <Resource type = "ResourceLayout"  name = "Button"  version = "3.2.0" >          <Widget type = "Widget"  skin = "ButtonSkin"  position = "20 25 29 26"  name = "Root" >              <Property key = "FontName"  value = "Default" />              <Property key = "TextAlign"  value = "Center" />              <UserString key = "LE_TargetWidgetType"  value = "Button" />          </Widget>      </Resource>

每个可视控件都有一个Resource type="ResourceLayout"的节点来描述该控件的布局，由上内容也可以看出某些控件是其他基本控件进行组合而成的。做为根子控件带有属性name="Root"，其子节点包含属性描述、子控件描述等等。注意一点<UserString key="LE_TargetWidgetType" value="Button"/>
表明这个控件所使用的控件类型为Button。所有的布局控件为下：

布局名称	说明	控件类型
CheckBox	勾选框	Button
RadioButton	单选按钮	Button
ScrollBarH	水平滚动条	ScrollBar
ScrollBarV	垂直滚动条	ScrollBar
SliderH	水平滑块	ScrollBar
SliderV	垂直滑块	ScrollBar
SliderHEmpty	空白水平滑块	ScrollBar
SliderVEmpty	空白垂直滑块	ScrollBar
Button	按钮	Button
ButtonImage	图像按钮	Button
TextBox	文本框	TextBox
EditBox	编辑框	EditBox
EditBoxStretch	可伸缩编辑框	EditBox
EditBoxEmpty	空白编辑框	EditBox
WordWrapEmpty	空白换行	EditBox
ComboBox	下拉框	ComboBox
Window	窗口	Window
WindowC	带标题的窗口	Window
WindowCS	带标题可调整大小的窗口	Window
WindowCX	带标题带关闭按钮的窗口	Window
WindowCSX	带标题可调整大小带关闭按钮的窗口	Window
MenuBar	菜单栏	MenuBar
MenuBarButton	菜单栏按钮	Button
MenuBarSeparator	菜单栏分割线	Widget
PopupMenu	弹出菜单	PopupMenu
PopupMenuSeparator	弹出菜单分割线	Widget
PopupMenuNormal	弹出菜单打钩按钮	Button
PopupMenuPopup	弹出菜单右侧展开按钮	Button
ProgressBar	进度条	ProgressBar
ProgressBarFill	填充式进度条	ProgressBar
ListBoxItem	列表框项	Button
ListBox	列表框	ListBox
ItemBox	项框	ItemBox
ItemBoxEmpty	空白项框	ItemBox
ScrollView	滚动视图	ScrollView
ScrollViewEmpty	空白滚动视图	ScrollView
TabHeaderButton	标签头按钮	Button
TabControl	标签控件	TabControl
MultiListBox	多行列表框	MultiListBox
MultiListButton	多行列表按钮	Button
MultiSubListBox	多行子列表框	ListBox

MyGUI_BlueWhiteSkins.xml内容部分为下： 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<Resource type = "ResourceSkin"  name = "ButtonSkin"  size = "29 26"  texture = "MyGUI_BlueWhiteSkins.png" >          <BasisSkin type = "SubSkin"  offset = "0 0 7 7"  align = "Left Top" >              <State name = "disabled"  offset = "136 2 7 7" />              <State name = "normal"  offset = "136 29 7 7" />              <State name = "highlighted"  offset = "136 56 7 7" />              <State name = "pushed"  offset = "136 83 7 7" />              <State name = "disabled_checked"  offset = "136 110 7 7" />              <State name = "normal_checked"  offset = "136 137 7 7" />              <State name = "highlighted_checked"  offset = "136 164 7 7" />              <State name = "pushed_checked"  offset = "136 191 7 7" />          </BasisSkin>          <BasisSkin type = "SubSkin"  offset = "7 0 14 7"  align = "HStretch Top" >              <State name = "disabled"  offset = "143 2 14 7" />              <State name = "normal"  offset = "143 29 14 7" />              <State name = "highlighted"  offset = "143 56 14 7" />              <State name = "pushed"  offset = "143 83 14 7" />              <State name = "disabled_checked"  offset = "143 110 14 7" />              <State name = "normal_checked"  offset = "143 137 14 7" />              <State name = "highlighted_checked"  offset = "143 164 14 7" />              <State name = "pushed_checked"  offset = "143 191 14 7" />          </BasisSkin>         ……      </Resource>

可以看出记录的是控件皮肤的构成，size属性指定控件的大小，texture指定控件所在的纹理图。含有多个SubSkin子节点，代表此皮肤的构成，比如这里的ButtonSkin皮肤是由九宫格拼接的，则有9个SubSkin子节点，另外还有个SimpleText来指定按钮上的文本位置。用SkinEditor.exe打开纹理文件MyGUI_BlueWhiteSkins.png，在Skins标签里选择ButtonSkin，切换到Regions标签，可看到具体的子皮肤构成，如下图所示：

关于MyGUI_BlueWhiteImages.xml文件的作用，这个文件全部内容如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?xml version = "1.0"  encoding = "UTF-8" ?> <MyGUI type = "Resource"  version = "1.1" >      <Resource type = "ResourceImageSet"  name = "MultiListButtonImage" >          <Group name = "Icons"  texture = "MyGUI_BlueWhiteSkins.png"  size = "12 10" >              <Index name = "None" >                  <Frame point = "74 185" />              </Index>              <Index name = "Up" >                  <Frame point = "74 198" />              </Index>              <Index name = "Down" >                  <Frame point = "74 211" />              </Index>          </Group>      </Resource> </MyGUI>

只定义了一个ResourceImageSet资源图像集，名称为MultiListButtonImage，这个名称被MyGUI_BlueWhiteTemplates.xml里面的内容进行引用，内容如下： 

1 2 3 4 5 6 7 8 9 10 11 12 13

<Resource type = "ResourceLayout"  name = "MultiListButton"  version = "3.2.0" >          <Widget type = "Widget"  skin = "MultiListButtonSkin"  position = "20 25 45 21"  name = "Root" >              <Property key = "FontName"  value = "Default" />              <Property key = "TextAlign"  value = "Center" />              <UserString key = "LE_TargetWidgetType"  value = "Button" />              <Widget type = "ImageBox"  skin = "ImageBox"  position = "29 4 12 10"  align = "Right VCenter"  name = "Image" >                  <Property key = "ImageResource"  value = "MultiListButtonImage" />                  <Property key = "ImageGroup"  value = "Icons" />                  <Property key = "ImageName"  value = "Down" />                  <Property key = "NeedMouse"  value = "false" />              </Widget>          </Widget>      </Resource>

MultiListButton多行列表按钮采用了这个图像集，用ImageEditor.exe打开MyGUI_BlueWhiteImages.xml文件，在Images标签选择MultiListButtonImage，切换到Indexes标签，可看到索引到的是空白图像、上箭头图像、下箭头图像，如下图所示：

另外，MyGUI_BlueWhiteTheme.xml文件，内容如下：

1 2 3 4 5 6

<?xml version = "1.0"  encoding = "UTF-8" ?> <MyGUI type = "List" >      <List file = "MyGUI_BlueWhiteImages.xml" />      <List file = "MyGUI_BlueWhiteSkins.xml" />      <List file = "MyGUI_BlueWhiteTemplates.xml" /> </MyGUI>

这个主题文件列出了该主题所需要使用到的另外文件，分别是MyGUI_BlueWhiteImages.xml、MyGUI_BlueWhiteSkins.xml和MyGUI_BlueWhiteTemplates.xml，这些都已在上面进行大概介绍过了。
下一篇继续……​