CEGUI In Practice - Using .layout files

CEGUI InPractice 5

In this tutorial we will introduce how to use the .layout file. This is likely what will be used for larger scale projects, where the art team isn't going to want to wait for you to recompile the source for every change they make.

Meet the Layout

The Layout file (.layout) is an xml file. There exists at least two editors for layouts. The first one is the CEGUI LayoutEditor This is a fairly mature editor. Unfortunately it is deprecated and has not received any updates in sometime. There is a new Editor (CEGUI Layout Editor 2) which is available from the SVN. For the usage of this tutorial tho, we will not be using an editor and will be manipulating the .layout file with a plain old text editor.

First thing to note, is its an XML file. So proper XML formatting is required. Second, is that it is hierarchical just like CEGUI. We will work towards writing a Simple Console here. I have created a console layout, and that will be the goal of this tutorial, to make a console editor like you would find in the various MMORPG's.

Attached is the layout:

<?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
    <Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
        <Property Name="Text" Value="Chat Window" />
        <Property Name="TitlebarFont" Value="DejaVuSans-10" />
        <Property Name="TitlebarEnabled" Value="True" />
        <Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
        <Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
            <Property Name="MaxTextLength" Value="1073741823" />
            <Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
            <Property Name="TextParsingEnabled" Value="False" />
        </Window>
        <Window Type="TaharezLook/Button" Name="ConsoleRoot/SendButton" >
            <Property Name="Text" Value="Send" />
            <Property Name="UnifiedAreaRect" Value="{{0.732211,0},{0.812349,0},{0.928283,0},{0.946832,0}}" />
        </Window>
        <Window Type="TaharezLook/Listbox" Name="ConsoleRoot/ChatBox" >
            <Property Name="UnifiedAreaRect" Value="{{0.00534809,0},{0.0131038,0},{0.949636,0},{0.762443,0}}" />
        </Window>
       </Window>
</GUILayout>

Okay, i'll admit. I cheated and used a LayoutEditor for this. But i'm allowed to, I know what I'm doing otherwise, so do don't back talk me and do your homework.

Erm. Anyway, lets look at the setup of the .layout file.