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
<?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 [wiki:GUI_-_Styles Styles Documentation]. Here's an example:

{{{
#!xml
<?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 [wiki:GUI_-_Sprites Sprites Documentation]. Here's an example:

{{{
#!xml
<?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
<?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 [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
<?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 [wiki:GUI_-_Properties 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.