2 GUI XML_Files

s0600204 edited this page 2021-12-17 20:49:43 +00:00

Table of Contents

• Style Files
• Sprite Files
• Setup Files
• Object Files

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 ` 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.