CEGUI学习笔记二-- FalagardSkinning使用手册第2章翻译

CEGUI学习笔记二-- [翻译]
FalagardSkinning使用手册第2章

本文翻译了FalagardSkinning使用手册的第2章。

阅读完本文，你将了解如何自定义一个控件外观的方法，并且将看见自己刚刚的成果！

 

---

 

首先需要说明的是，这个部分不是教你如何使用XML。因此我们假定读者熟悉并知道如何使用XML。

2.1
开始前：一个空皮肤
在我们添加任何关于控件外观的代码之前，先让我们写一个XML文件的轮廓。这很简单，如下格式：

<? xml version = "1.0" ?>
< Falagard >
</ Falagard >

 

我们会把自己定义的控件外观加入到<Falagard>和</Falagard>之间。
因为可以定义很多子节点（XML特性），因此我们可以把所有的外观定义都写在一个文件里。

2.2
起步例子：Button
毫无疑问，按钮是我们在任何UI中都可以看到的、使用最多的。所以我们从Button开始。
要定义任何控件皮肤，你需要使用WidgetLook元件，并且使用name属性来给你定义的控件取一个名字。
因此开始的时候，我们会添加一个空的WidgetLook（控件外观）到外观初始化文件里:

 

< WidgetLook  name  = "TaharezLook/Button" >
</ WidgetLook >

 

查询手册(FalagardSknning.pdf)可以知道，我们必须定义几种指定特定的状态外观：
Normal
Hover
Pushed
Disabled

一旦我们查询到了哪些状态必须被定义，我们就把它们添加到外观定义中去。虽然空的定义不会显示任何东西，但最好这样做，这样至少我们的定义是完整可用的。

对于特定的显示，我们使用外观配置ImagerySection元素(节点)来描述。每一个外观配置imagery sction都有一个名字，这个名字会在之后StateImagery的Layer定义中被引用。

对于我们的按钮来说，每一个按钮状态都会有一个ImagerySection。我们把它们添加到正在制作的Button中。

 

   < WidgetLook  name  ="TaharezLook/Button" >
     < ImagerySection  name  ="Normal_imagery" >
     </ ImagerySection >
     < ImagerySection  name  ="Hover_imagery" >
     </ ImagerySection >
     < ImagerySection  name  ="Pushed_imagery" >
     </ ImagerySection >
     < StateImagery  name  ="Normal" >
     </ StateImagery >
     < StateImagery  name  ="Hover" >
     </ StateImagery >
     < StateImagery  name  ="Pushed" >
     </ StateImagery >
     < StateImagery  name  ="Disabled" >
     </ StateImagery >
   </ WidgetLook >

 

现在我们可以给每一个Section定义ImageryCommpnents。这个节点将告诉系统我们的按钮显示在屏幕上会是个什么样子。
TaharezLook给按钮的每一种状态都提供了3种Imagery。(除了Disabled，在这个状态下，按钮只使用了"normal_imagery"，还用了一些不同的颜色)。可用的ImagerySections向我们提供了左、中、右3个组件。
有很多方法在控件上应用这些ImagerySection，虽然我们假定按钮的绘制是 绘制两头（左、右），然后用中部件来填充这两个之间的空缺。但实际上这些象素尺寸并没有自动经过修正。之所以TaharezLook提供的图片集没出问题是因为这个图片集使用了自动缩放特性。因此如果你想使用自己所给定的外观，注意尺寸的计算，这样你才能得到预期的效果。

要指定如何绘制ImagerySection，我们需要使用ImageryCompnents。它作为ImagerySection的子节点。好了，现在我们从添加一个空的ImageryCompnent到mormal_imagery节点开始。

 

     < ImagerySection  name  ="Normal_imagery" >
       < ImageryComponent >
       </ ImageryComponent >
     </ ImagerySection >

 

首先加入到ImageryComponent的是一个Area节点定义，它会告诉系统应该在哪把图象显示出来。（控件坐标）

 

       < ImageryComponent >
         < Area >
         </ Area >
       </ ImageryComponent >

       
我们从配置按钮的左边开始。这是最容易配置的组件，因为我们知道一般都是（0，0）。设定这些绝对的值，我们使用AbsoluteDim。

我们使用Dim来描述需要自定义的图象显示区域。再使用子节点来给出它的值是多少：

 

       < ImageryComponent >
         < Area >
           < Dim  type  ="LeftEdge" >
             < AbsoluteDim  value ="0" />
           </ Dim >
           < Dim  type  ="TopEdge" >
             < AbsoluteDim  value ="0" />
           </ Dim >
         </ Area >
       </ ImageryComponent >

 

现在已经定义了(相对父窗口的)左间距和顶间距，接下来再定义显示区域的大小。
我们希望使用图片源自己的宽度大小，要这么做的话，使用ImageDim来告诉这个元件应该访问哪个图片。

 

           < Dim  type  ="Width" >
             < ImageDim  imageset  ="TaharezLook"
                      image  ="ButtonLeftNormal"
                      dimension ="Width" />
           </ Dim >

 

这段代码就告诉系统 显示区域宽度的大小和外观了：
使用TaharezLook图片集里名字叫ButtonLeftNormal的图片区域，宽度为图片区域的默认值。

设置Area的最后一个部分是高度。一般来说我们希望显示高度和我们定义的高度一直。因此我们可以使用UnifiedDim或者WidgetDim来做这个事。因为不需要通过名字来查找控件，因此在这里我们选择使用更加简洁的UnifiedDim来完成。

 

           < Dim  type  ="Height" >
             < UnifiedDim  scale  ="1.0"  type ="Height" />
           </ Dim >

在这里我们使用缩放值1.0来表示我们需要使显示区域为整个控件的高度。

现在我们已经完成了第一个外观的Area设置。它整个的看起来是这个样子：

 

       < ImageryComponent >
         < Area >
           < Dim  type  ="LeftEdge" >
             < AbsoluteDim  value ="0" />
           </ Dim >
           < Dim  type  ="TopEdge" >
             < AbsoluteDim  value ="0" />
           </ Dim >
           < Dim  type  ="Width" >
             < ImageDim  imageset  ="TaharezLook"  image  ="ButtonLeftNormal"  dimension ="Width" />
           </ Dim >
           < Dim  type  ="Height" >
             < UnifiedDim  scale  ="1.0"  type ="Height" />
           </ Dim >
           </ Area >
       </ ImageryComponent >

 

接下来，我们需要告诉系统显示哪张图片。我们用Image来完成这个事，它紧接着Area。

 

< Image  imageset  ="TaharezLook"  image ="ButtonLeftNormal" />

 

在ImageryComponent中需要添加的最后一个元素是VertFormat。
通过设置这个元素，我们可以通知系统在显示图片的时候，在垂直方向上做拉伸，以完全覆盖我们定义的Area显示区域。

 

       < VertFormat  type ="Stretched" />

 

现在我们完成了按钮的左部件的设置，让我们完整的来看一下：

 

       < ImageryComponent >
         < Area >
           < Dim  type  ="LeftEdge" >
             < AbsoluteDim  value ="0" />
           </ Dim >
           < Dim  type  ="TopEdge" >
             < AbsoluteDim  value ="0" />
           </ Dim >
           < Dim  type  ="Width" >
             < ImageDim  imageset  ="TaharezLook"  image  ="ButtonLeftNormal"  dimension ="Width" />
           </ Dim >
           < Dim  type  ="Height" >
             < UnifiedDim  scale  ="1.0"  type ="Height" />
           </ Dim >
         </ Area >
         < Image  imageset  ="TaharezLook"  image ="ButtonLeftNormal" />
         < VertFormat  type  ="Stretched" />
       </ ImageryComponent >

 

下一张需要设置的图片是右部件。我们可以精确的把显示区域设置为整个图象，但是有一个更好的办法就是，我们使用对齐格式来指明需要在右边显示。

用这样的方式来设置控件的部件也将是你使用的最多的手段，现在来看看代码是如何写的：

 

       < ImageryComponent >
         < Area >
           < Dim  type  ="LeftEdge" >< AbsoluteDim  value ="0" /></ Dim >
           < Dim  type  ="TopEdge" >< AbsoluteDim  value ="0" /></ Dim >
           < Dim  type  ="Width" >< UnifiedDim  scale  ="1.0"  type ="Width" /></ Dim >
           < Dim  type  ="Height" >< UnifiedDim  scale  ="1.0"  type ="Height" /></ Dim >
         </ Area >
         < Image  imageset  ="TaharezLook"  image ="ButtonLeftNormal" />
         < VertFormat  type  ="Stretched" />
         < HorzFormat  type  ="RightAligned" />
       </ ImageryComponent >

 

对于normal_imagery，最后需要设置的是中间部件。记住我们希望这个图象自动的填充另外2个部件之间的空白部分。
只需要正确的定义了图片区域就可以正确的显示了。

首先我们需要告诉系统左边距，很明显是左部件的宽度。因此我们可以通过ImageDim来得到。

         < Area >
           < Dim  type  ="LeftEdge" >
             < ImageDim  imageset  ="TaharezLook"
                      image  ="ButtonLeftNormal"
                      dimension  ="Width"
             />
           </ Dim >
         </ Area >

 

现在有趣的事情来了，我们需要告诉系统中间部件的宽度。如果我们知道控件的实际大小，那我们可以自己计算出精确的坐标信息。但是我们事先并不知道控件的整体宽度，因此我们需要另外的计算方法。幸运的是，我们可以通过XML语法来使系统在显示之前进行预先计算。使用DimOperator就可以搞定这个事。
在展示代码之前，让我们来看看计算公式：

中间部件的宽度=控件宽度-(右部件宽度+左部件宽度)。

同时我们还需要计算右边距：

中间部件的右边距=控件宽度-右部件宽度

好，让我们先从右边距开始：

                < Dim  type ="RightEdge" >
                </ Dim >

 

首先我们得到控件的宽度：

                < Dim  type ="RightEdge" >
                  < UnifiedDim  scale  = "1.0"  type ="Width" >
                  </ UnifiedDim >
                </ Dim >

 

然后在添加进行减法运算的代码

                < Dim  type ="RightEdge" >
                  < UnifiedDim  scale  = "1.0"  type ="Width" >
                    < DimOperator  op ="Subtract" >
                    </ DimOperator >
                  </ UnifiedDim >
                </ Dim >

 

我们再将得到右部件宽度的代码添加到减法操作节点里去

                < Dim  type ="RightEdge" >
                  < UnifiedDim  scale  = "1.0"  type ="Width" >
                    < DimOperator  op ="Subtract" >
                       < ImageDim  imageset  ="TaharezLook"
                                image  ="ButtonRightNormal"
                                dimension  ="Width"
                        />
                    </ DimOperator >
                  </ UnifiedDim >
                </ Dim >

 

这样我们就得到了右边距的大小。
在进行更加复杂的运算之前，先来看2个关于运算先后次序的规则：
1、每一对DimOperator定义了一个操作，顺序是从最里面的DimOperator定义开始计算，然后是外层的。
2、结合律不满足实际运算，只按照DimOperator的顺序从往外开始计算。
比如：(LineSpacing + 4)*2,如果我们写成：

...
< FontDim  type  ="LineSpaceing" >
   < DimOperator  op ="Add" >
     < AbsoluteDim  value ="4" >
       < DimOperator  op ="Multiply" >
         < AbsoluteDim  value ="2" >
       </ DimOperator >
     </ AbsoluteDim >
   </ DimOperator >
</ FontDim >
...

 

上面的计算公式是：4*2+LineSpacing。显然这不是我们想要的

应该是：

 

< AbsoluteDim  value ="2" >
   < DimOperator  op ="Multiply" >
     < AbsoluteDim  value ="4" >
       < DimOperator  op ="Add" >
         < FontDim  type  ="LineSpaceing" />
       </ DimOperator >
     </ AbsoluteDim >
   </ DimOperator >
</ AbsoluteDim >

 

首先计算了 temp = 4+LineSpaceing;
然后将临时结果temp返回到上层，进行第2步计算 result = 2 * temp;

OK，我离题了。让我们重新回到我们的按钮显示上来。
既然计算的问题解决了，那么唯一的问题就是设置水平显示模式HorzFormat了，在这里我们将他设置为拉伸。

         < HorzFormat  Type ="Stretched" />

现在我们来看看完整的中间部件的代码

       < ImageryComponent >
         < Area >
           < Dim  type  ="LeftEdge" >
             < ImageDim  imageset  ="TaharezLook"
                      image  ="ButtonLeftNormal"
                      dimension  ="Width"
             />
           </ Dim >
           < Dim  type ="RightEdge" >
             < UnifiedDim  scale  = "1.0"  type ="Width" />
             < DimOperator  op ="Subtract" >
               < ImageDim  imageset  ="TaharezLook"
                      image  ="ButtonRightNormal"
                      dimension  ="Width"
               />
             </ DimOperator >
           </ Dim >
           < Dim  type  ="TopEdge" >< AbsoluteDim  value ="0" /></ Dim >
           < Dim  type  ="Height" >< UnifiedDim  scale  ="1.0"  type ="Height" /></ Dim >
         </ Area >
         < Image  imageset  ="TaharezLook"  image ="ButtonLeftNormal" />
         < VertFormat  type  ="Stretched" />
         < HorzFormat  Type ="Stretched" />
       </ ImageryComponent >

现在我们已经完成了normal_imagery section的外观设置。你可以用类似的方法将另外2个外观搞定，实际上在这里例子里，你只需要根据按钮Hover或者Pushed状态来替换相关的图片名字。一切都跟我们先前配置normal_imagery时一样。

现在我们可以在各种状态节点中添加对各种外观的引用了。对外观的引用需要在Layer节点中定义。很可能在每一个Layer中都包含多个外观配置。虽然在大多数例子你，你只看到了一个Layer。
现在让我们为按钮的Normal状态来添加一个外观。

 

     < StateImagery  name  ="Normal" >
       < Layer >
         < Section  section ="normal_imagery" />
       </ Layer >
     </ StateImagery >

 

Hover和Pushed状态除了图片和名字不一样以外，其他没什么不同。

Disabled状态稍微有些不同；我们不为这个状态重新编写任何外观，我们将复用normal_imagery。但是我们将指定一些颜色，使按钮处于这种状态时显示为灰色。这个工作在Section节点中的Colours节点中完成，先来看看范例：

 

     < StateImagery  name  ="Disabled" >
       < Layer >
         < Section  section ="normal_imagery" >
           < Colours
             topLeft ="FF7F7F7F"
            topRight ="FF7F7F7F"
            bottomLeft ="FF7F7F7F"
            bottomRight ="FF7F7F7F"
           />
         </ Section >
       </ Layer >
     </ StateImagery >

 

现在我们的按钮在各种默认状态下都有外观了。但是我们少做了一件事情：我们需要在按钮上显示一些文字。

为了指定文字，你需要使用TextComponent节点，当然可以象在ImagerySection中加入ImageryComponent节点一样，在每一个外观配置里加入TextComponent，但是这样实在是太罗嗦了。一个更好的方法是定义一个包含文本的ImagerySection，然后我们就可以在所有状态下复用了。
这样我们就从定义包含文本元件的ImagerySection开始吧：

     < ImagerySection  name  ="label" >
       < TextComponent >
       </ TextComponent >
     </ ImagerySection >

 

定义一个文本元件TextComponent和定义外观元件ImageryComponent很相似，我们指定一个区域的大小和它的显示格式，用来显示文本。我们也可以通过使用Text节点来明确指示出字体和（或）字符串。如果不做这些设置，元件也可以通过控件的设置来得到这些设置。
我们希望Area居中显示，因此我们需要将文本元件的显示区域设置为整个控件。
同样我们需要为文本设置居中，因此垂直格式就象这样：
 

        < VertFormat  type  ="CentreAligned" />

水平格式就象这样：

         < HorzFormat  type  ="WordWrapCentreAligned" />

最后整个Label外观设置的定义就象这样：

     < ImagerySection  name  ="label" >
       < TextComponent >
         < Area >
           < Dim  type ="LeftEdge" >< AbsoluteDim  value ="0" /></ Dim >
           < Dim  type ="TopEdge" >< AbsoluteDim  value ="0" /></ Dim >
           < Dim  type ="Width" >< UnifiedDim  scale ="1"  type ="Width" /></ Dim >
           < Dim  type ="Height" >< UnifiedDim  scale ="1"  type ="Height" /></ Dim >
         </ Area >
         < VertFormat  type  ="CentreAligned" />
         < HorzFormat  type  ="WordWrapCentreAligned" />
       </ TextComponent >
     </ ImagerySection >

现在就差往各个Layer添加这个外观了，Normal状态的代码如下：

     < StateImagery  name  ="Normal" >
       < Layer >
         < Section  section ="normal_imagery" />
         < Section  section ="label" />
       </ Layer >
     </ StateImagery >

至于Disabled状态，则需要添加另外一些指定的颜色。

     < StateImagery  name  ="Disabled" >
       < Layer >
         < Section  section ="normal_imagery" >
           < Colours
             topLeft ="FF7F7F7F"
            topRight ="FF7F7F7F"
            bottomLeft ="FF7F7F7F"
            bottomRight ="FF7F7F7F"
           />
         </ Section >
         < Section  section ="label" >
           < Colours
             topLeft ="FF7F7F7F"
            topRight ="FF7F7F7F"
            bottomLeft ="FF7F7F7F"
            bottomRight ="FF7F7F7F"
           />
         </ Section >
       </ Layer >
     </ StateImagery >

关于介绍就到这里了。需要完整的例子，以及全部其他的控件定义，可以参看CEGUI发行版的looknfeel文件夹里的文件。目录为："cegui_mk2/Samples/datafiles/looknfeel"

 

--------------------------------------------------------------------
1、一定要按照文档的介绍，自己写一写这些代码，注意不要抄错了，否则你无法真正了解作者在说什么。当然，如果你不明白我那些翻译在说什么，一定要去看英文的。

2、编写XML文档的时候容易出错，最好导入xsd文件以验证正确性。方法为：视图-其他窗口-属性窗口-架构，将looknfeel文件夹里的falagard.xsd添加进来。这样就有语法和规则检测了。

3、我们写了这么一个Button外观配置，如果能直接看到它那该多好~
最好的途径是自己写例子来验证，比如上次我留下的作业，如果你已经实现了通过Layout文件来创建窗口，那就好验证了。不过没关系，我们也可以使用CELayoutEditor.exe来验证我们的成果。首先，这个软件是直接加载TaharezLook.scheme的，所以我们直接去对应的TaharezLook.looknfeel里，将我们的按钮添加进去，为了防止重复命名，我们把刚才写的Button外观改成Button1，或者任何你想要叫的名字。

4、现在视感文件里已经有Button1的外观了，我们再来设置falagard映射。这个很简单，到TaharezLook.scheme文件里照着Button复制一下，然后修改WindowType = "TaharezLook/Button1", LookNFeel = "TaharezLook/Button1"。

5、启动CELayoutEditor.exe,添加我们刚刚写的按钮看看？

6、现在我可以完全理解Imageset，知道looknfeel，大概知道scheme文件都是些什么东西了，不过在我完全理解以前，不会自以为是的去向大家传递错误的信息：）

 

---