CEGUI资源文件之layout文件

       Layout文件是CEGUI中至关重要的数据文件之一。你可以通过CEGUI的Layout编辑器来生成和编辑该文件，但是在本例中下面这个XML格式的 .layout 文件完全是手动编写出来的，实际上很简单。在Ogre的Debug文件夹下resource目录下有个压缩包是gui.zip，你在里面会发现一个文件叫”Katana.layout”，下面是该文件的全部内容：

<? xml version="1.0"  ?>
< GUILayout >  
    < Window  Type ="TaharezLook/FrameWindow"  Name ="Main" >
        < Property  Name ="UnifiedAreaRect"  Value ="{{0.0,0},{0.0,0},{1.0,0},{1.0,0}}"   />  
        < Property  Name ="FrameEnabled"  Value ="false"   />
        < Property  Name ="TitlebarEnabled"  Value ="false"   />
        < Property  Name ="CloseButtonEnabled"  Value ="False"   />
        < Window  Type ="TaharezLook/Button"  Name ="cmdQuit" >
           < Property  Name ="Text"  Value ="Quit"   />
           < Property  Name ="UnifiedAreaRect"  Value ="{{0.4,0},{0.7,0},{0.6,0},{0.77,0}}"   />
        </ Window >
        < Window  Type ="TaharezLook/Button"  Name ="cmdOptions" >
           < Property  Name ="UnifiedAreaRect"  Value ="{{0.4,0},{0.6,0},{0.6,0},{0.67,0}}"   />
           < Property  Name ="Text"  Value ="Options"   />
        </ Window >
        < Window  Type ="TaharezLook/Button"  Name ="cmdInstantAction" >
           < Property  Name ="UnifiedAreaRect"  Value ="{{0.4,0},{0.5,0},{0.6,0},{0.57,0}}"   />
           < Property  Name ="Text"  Value ="Instant Action"   />
        </ Window >
    </ Window >
</ GUILayout >

       你在浏览这些代码的时候，首先可能发现里面那些神秘的数字。在CEGUI 0.5.x版本中，UI元件需要定义的是UI元件的绝对尺寸大小。而在这个layout文件中，我们使用的是统一的相对尺寸范围。Value =”” 中定义了元件的左，右，上，下点的位置。但这个位置我们既可以定义这些点的绝对位置，也可以是定义这些点针对其父容器UI元件的相对位置。例如，下面这个UI元件的区域定义：

{{0.4,0},{0.5,0},{0.6,0},{0.57,0}}

这些数值告诉了CEGUI，这个UI元件在其上一层元件容器中的相对位置和大小。

      如本例，这个元件左上角将距离其上一层元件容器的左上角的右偏移距离为 （0.4 * 上一层元件容器宽度），这个元件左上角将距离其上一层元件容器的左上角的下偏移距离为 （0.5 * 上一层元件容器高度）。该UI元件宽度将为(（0.6 – 0.4）* 上一层元件宽度 )大小，高度将为( (0.57 – 0.5) * 上一层元件告诉 )大小。

      那么，那些参数中的”0”是什么意义呢？如果你想同时指定UI元件的绝对象素位置的话，可以把这些”0”替换为该元件的象素位置。所以这就意味着，你能够根据自己喜好，为UI元件设置相对坐标或者象素的绝对坐标。我想不起来指定象素绝对坐标时这些数值的意义，如果谁看到本例并且知道这些绝对坐标数值意义的话，请帮助补充到本文中。：）不过，如果谁是曾经做过网页的话，将会非常熟悉这些绝对坐标的意义和顺序，因为这俩完全是一个东西。

      在上面的这个Layout文件中，第一行告诉CEGUI，我们想创建一个顶层的窗口”Main”，而且这个窗口大小是占满整个程序显示区----它的相对宽高是(1.0 - 0.0 )。我们不希望看到它的标题栏，也不希望看到这个顶层窗口右上边的关闭按钮和其边框。于是，下面我们设置他们的Value为false。（这三项是FrameWindow框架窗口默认存在的捆绑控件）。

      接下来，我们在屏幕中放置三个按钮----这样的话，在我们运行程序的时候将会从上到下见到“Instant Action”“Options”“Quit”三个按钮。按钮控件的名称属性是非常重要的，这是我们在代码中获取该控件行为的唯一标识。