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 [wiki:GUI_-_Styles 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 [wiki:GUI_-_Sprites 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 [wiki:GUI_-_Custom_Objects 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 [wiki:GUI_-_Actions 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 [wiki:GUI_-_Properties 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 [wiki:GUI_-_Actions here].