There are several types of GUI XML files, their main difference is the root element.

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

  <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
  
  <!DOCTYPE <font color="green">objects</font> SYSTEM "../gui.dtd">
  
  <<font color="green">objects</font>>
  
  <<font color="green">/objects</font>>

The root element's name is highlighted in green, if you're creating a file with another root element, the text should be changed in all those three places.

Style Files

Root element: <styles>

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

  <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
  
  <!DOCTYPE styles SYSTEM "../gui.dtd">
  
  <styles>
    <!-- Style that will hide the object as new default -->
    <style name="style_name1"
           hidden="true" 
    />
    
    <!-- Style that helps us create a nice edit box -->
    <style name="editbox_nice"
           sprite="sprite1"
           font="font1"
    />
  </styles>

Sprite Files

Root element: <sprites>

Sprite files are explained in the Sprites Documentation. Again, still here's an example.

  <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
  
  <!DOCTYPE sprites SYSTEM "../gui.dtd">
  
  <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="iso-8859-1" standalone="no" ?>
  
 <!DOCTYPE setup SYSTEM "../gui.dtd">
  
 <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="iso-8859-1" standalone="no" ?>
  
  <!DOCTYPE objects SYSTEM "../gui.dtd">
  
  <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.
              <action on="Press"><![CDATA[
                    DoSomething();
              ]]></action>
  
              <!-- 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 placed within the <objects> tag, and not another object), and it has got two children objects and one action assigned to it. Objects can have any number of children, and they are placed anywhere within the parent. You can have as many root objects in one file as you like, just place them next to each other. Within the object tag you define its properties as shown above. If an object has got a caption, it should be placed just after the opening tag, and before any other sub-elements. Read more about actions here.