There are several types of files used to build the GUI, their main difference is the element used as their root.

Here's an example of an XML file with a root element of <objects>.

<?xml version="1.0" encoding="utf-8"?>
  
<objects>
    <!-- Child elements go here. -->
</objects>

Naturally, if you're creating a file that uses a different root element, <objects> (and </objects>` should be amended as appropriate.

Style Files

Root element: <styles>

Styles XML files are explained in the Styles Documentation. Here's an example:

<?xml version="1.0" encoding="utf-8"?>

<styles>
    <!-- This style will hide the object it's used by -->
    <style name="style_name1"
        hidden="true" 
    />

    <!-- This style provides styling to create a nice-looking edit box. -->
    <style name="editbox_nice"
        sprite="sprite1"
        font="font1"
    />
</styles>

Sprite Files

Root element: <sprites>

Sprite files are explained in the Sprites Documentation. Here's an example:

<?xml version="1.0" encoding="utf-8"?>

<sprites>
    <!-- Here's a sprite with two images next to each other -->
    <sprite name="sprite1">
        <image texture="texture1.jpg"
            size="0 0 50% 100%"
            texture_size="0 0 20 20"
        />
        <image texture="texture2.jpg"
            size="50% 0 100% 100%"
            texture_size="0 0 20 20"
        />
    </sprite>

    <!-- Here's a simple sprite that is just one image stretched to fit the whole area -->
    <sprite name="sprite2">
        <image texture="texture1.jpg"
            size="0 0 100% 100%"
            texture_size="0 0 100% 100%" 
        />
    </sprite>
</sprites>

Setup Files

Root element: <setup>

Within the <setup> tag a number of templates can be defined on a stack, in no specific order.

<?xml version="1.0" encoding="utf-8"?>

<setup>  
    <scrollbar name="sb"
        width="18"
        minimum_bar_size="5"
        sprite_button_top="sprite2"
        sprite_button_top_over="null"
        sprite_button_bottom="sprite2"
        sprite_button_bottom_over="null"
        sprite_back_vertical="grey"
        sprite_bar_vertical="sprite2"
        sprite_bar_vertical_over="null"
        sprite_bar_vertical_pressed="null"
        sprite_button_bottom_pressed="sprite2_pressed"
        sprite_button_top_pressed="sprite2_pressed"
    />

    <icon name="0ad_icon"
        texture="0ad_icon"
        size="16 16"
    />

    <tooltip name="pregame_mainmenu_tooltip"
        use_object="pregame_mainmenu_tooltip"
        delay="0"
        hide_object="true"
    />
</setup>

The templates are actually called Custom Objects, click the link to find out more specific information.

Object Files

Root element: <objects>

How to build the GUI is easiest explained with an example XML file:

<?xml version="1.0" encoding="utf-8"?>

<objects>
    <object name="object_name"
        type="button"
        size="50%+2 50%+5 50%+10 50%+10"
        hotkey="example_button.toggle" 
        sprite="example_button"
        sprite_pressed="example_button_pressed"
    >
        This is the button's caption.

        <!-- Example child objects -->
        <object name="child1"
            type="text"
        />
        <object name="child2"
            type="image"
        />
    </object>
</objects>

The GUI defined above has got one uppermost object, or root object (i.e. it is parentless as it is bounded by the <objects> start and end tags, and not another <object>), and it has two child objects.

An object may have any number of children, placed anywhere within the parent. You may have more than one root object in a single file: just place them next to each other within the bounds of the <objects> tag.

Within the <object> tag you define its properties as shown above. If an object has a caption, it should be placed just after the opening tag, and before any other sub-elements.