mygui初探（四）自定义ui控件

作者：游蓝海（http://blog.csdn.net/you_lan_hai）

        上班的时候，觉得零散的时间太短，不足以完成业余作品或者学习某方面知识，希望放到周末去做。到了周末，想睡觉、看电影，就是不想学习，又希望，学习可以在上班空闲的时间进行。人生总是这么矛盾，充满了拖延症，这也难怪普通程序员很多，大牛级别的人很少。随着工作年限增加，这种懒惰心理越来越严重。为了向大牛看齐，还是得强迫一下自己，开始学习吧。

1.基本步骤

        在mygui中添加自定义类型控件是比较容易的，大致分成以下几步：

        （1）.添加自定义类；

        （2）.注册自定义类到Widget工厂；

        （3）.添加自定义类的属性描述；

        （4）.给自定义控件添加一个默认模板。

        下面详细说明这几个步骤。

2.添加自定义类

        这一步是关键步骤，需要你花费的时间最多，但是没什么好说的，因为都是你的任务。自定义类必须从Widget或其派生类继承，例如：

class MYGUI_EXPORT GridView : public ScrollView{        MYGUI_RTTI_DERIVED( GridView );    public:        GridView();        ~GridView();}；

3.注册自定义类到Widget工厂

        修改MyGUIEngine\src\MyGUI_WidgetManager.cpp，在void WidgetManager::initialise()函数中注册自定义类：

factory.registerFactory<GridView>(mCategoryName);

4.添加自定义类的属性描述

        修改Media\Tools\LayoutEditor\Settings\Widgets.xml，追加自定义类的属性描述。

<Widget name="GridView"><Property key="DefaultSkin" value="GridView"/><Property key="Base" value="ScrollView"/><Property key="Parent" value="true"/><Property key="Child" value="true"/><Parameter key="RowsCols" value="2 int"/><Parameter key="ItemSize" value="2 int"/><Parameter key="ItemLayout" value="String"/><Parameter key="Vertical" value="Bool"/></Widget>

（1）标签必须是<Widget>，name是自定义类的名称；

（2）Property描述了自定义类的基本信息：基类（Base），默认皮肤（DefaultSkink），皮肤（Skin）等；

（3）Parameter描述了自定义类的基本属性，会显示在ui编辑器的属性界面上，供我们编辑。

        value的类型可以是：字符串（String)，布尔（Bool），颜色（Colour），文件名称（FileName），n个整数（n int，n可取的值为1、2、4），n个浮点数（n float，n可取的值为1、2）等。所有的类型可以在代码Tools\LayoutEditor\PropertyFieldManager.cpp void PropertyFieldManager::initialise()函数中看到。

        当然value的类型可以自定义，比如你有一个枚举类型的参数mystyle，枚举值为（mystyleA, mystyleB, mystyleC），那么你就可以用一个下拉框来表示mystyle的所有取值。

        首先，修改Media\Tools\LayoutEditor\Settings\Values.xml，把mystyle的取值描述填进去。

<Value name="TMystylle"><Property key="#{ColourDefault}[DEFAULT]"/><Property key="mystyleA"/><Property key="mystyleB"/><Property key="mystyleC"/></Value>

        然后，修改 Tools\LayoutEditor\PropertyFieldManager.cpp，在函数void PropertyFieldManager::initialise()中追加：

mFactories["mystyle"] = GenericFactory<PropertyFieldComboBox>::getFactory();

5.给自定义控件添加一个默认模板

        自定义类需要至少指定一个默认模板（DefaultSkin），才能出现在ui编辑器的widget面板中，比如修改Media\MyGUI_Media\MyGUI_BlueWhiteTemplates.xml，给自定义类添加一个模板。关于如何写模板，详见http://blog.csdn.net/you_lan_hai/article/details/37349313，如下是我的自定义模板：

<Resource type="ResourceLayout" name="GridView" version="3.2.0"><Widget type="Widget" skin="PanelSkin" position="5 5 55 55" name="Root"><UserString key="LE_TargetWidgetType" value="GridView"/><Widget type="Widget" skin="PanelEmpty" position="3 3 32 32" align="Stretch" name="Client"/><Widget type="ScrollBar" skin="ScrollBarV" position="35 3 15 32" align="Right VStretch" name="VScroll"/><Widget type="ScrollBar" skin="ScrollBarH" position="3 35 32 15" align="HStretch Bottom" name="HScroll"/></Widget></Resource>

6.后记

        mygui初探系列的文章，应该可以结束了，后面有时间的话，我想剖析一下mygui的架构。虽然mygui并没有我想象中那么好，但这毕竟是一套完整的ui系统，有很多东西可以学习和借鉴，也有很坑可以学会如何去规避。我还想学习一下cegui，在对比中学习两者的优劣，从更广的角度去学习ui系统。

        如果你准备在你的项目中集成mygui，我的建议是如果没有好的选择再考虑它。我不敢向你推荐cegui，但我可以确定的告诉你，不要轻易使用mygui。当然，你如果是学习用途的话，那就随便折腾吧。