LavishGUI:User Interface XML Files

Required Background

A basic understanding of XML or HTML is required. This quick run-down should get you going.

XML, simply described, is a way to arrange items. It is made up of XML tags and text. XML tags look like <Item>, and must be closed, which can look like </Item>. This sequence marks the beginning and end of an "Item". There can be any number of item types, such as <A> <B> <C> and so on. Each begin tag can have attributes. Attributes have a name, an equal sign, and a quoted value (either ' or " can be used), and are placed inside the begin tag like so: <Item Name="My Item">. Items can have text and/or more items contained between the begin tag and end tag. Items that have no text or items inside of them may be closed in the begin tag, like this: <Item Name="My Item" />. There can be multiple items of the same type within the same item.

Here is some sample XML:

<ISUI>
  <Window Name="My Window">
    <X>100</X>
    <Y>100</Y>
    <Width>300</Width>
    <Height>150</Height>
  </Window>
</ISUI>

In this example, there is ISUI,which is Inner Space specific (another application would use its own tag), which contains a Window (which has an attribute called "Name" with the value "My Window"). X, Y, Width and Height are items inside Window, each of which contain a text value. X, Y, Width and Height are also referred to as Properties of Window.

Terminology

• Attribute: A name and value given in an XML "begin tag"
• Child
• Container
• Parent
• Property

Example XML File

<?xml version="1.0" encoding="UTF-8"?>
<ISUI>
	<Window name='Test Window'>
	<X>150</X>
	<Y>100</Y>
	<Width>400</Width>
	<Height>400</Height>
	<Children>
		<TabControl name='Test TabControl'>
			<Width>100%</Width>
			<Height>100%</Height>
			<Tabs>
				<Tab name='Main'>
					<button name='Test Button'>
					<X>10%</X>
					<Y>10%</Y>
					<Width>80</Width>
					<Height>20</Height>
					<AutoTooltip>This is a test button</AutoTooltip>
					<Text>Test Button</Text>
					<OnLeftClick>MessageBox -ok "You clicked the button."</OnLeftClick>
					</button>
					
					<checkbox name='Test Checkbox'>
					<X>30%</X>
					<Y>10%</Y>
					<Width>100</Width>
					<Height>20</height>
					<Text>Test Checkbox</Text>
					<OnLeftClick>echo Is checkbox checked? ${This.Checked}</OnLeftClick>
					</checkbox>
					
					<combobox name='Test Combobox'>
					<X>10%</X>
					<Y>20%</Y>
					<Width>125</Width>
					<Height>20</Height>
					<Items>
						<Item Value='1'>Cheese</Item>
						<Item Value='2'>Pickles</Item>
					</Items>
					</combobox>
				
					<listbox name='Test Listbox'>
					<X>10%</X>
					<Y>50%</Y>
					<Width>125</Width>
					<Height>100</Height>
					<Items>
						<Item Value='1'>Spider-Man</Item>
						<Item Value='2'>Batman</Item>
						<Item Value='3'>Superman</Item>
						<Item Value='4'>Donkey Kong</Item>
					</Items>
					</listbox>
				</Tab>
				<Tab name='Secondary'>
					<slider name='Test Slider'>
					<X>2%</X>
					<Y>2%</Y>
					<Width>100</Width>
					<Height>20</Height>
					</slider>

					<gauge name='Test Gauge' ColorMask='ff33ffff'>
					<X>2%</X>
					<Y>10%</Y>
					<Height>12</Height>
					<Width>r20</Width>
					<Range>100</Range>
					<OnLoad>echo This:SetValue[57]</OnLoad>
					<Filler ColorMask='FF0066cc' Template='gaugefiller'>
						<Height>100%</Height>
						<Width>100%</Width>
					</Filler>						
					</gauge>
				</Tab>
				<Tab name='Backup'>
					<console name='Test Console'>
					<X>0</X>
					<Y>0</Y>
					<Width>100%</Width>
					<Height>20%</Height>
					</console>
					
					<text name='Test Text'>
					<X>0</X>
					<Y>22%</Y>
					<Width>160</Width>
					<Height>20</Height>
					<Text>This is not a test.</Text>
					</text>

					<commandentry name='Test Commandentry'>
					<X>0</X>
					<Y>30%</Y>
					<Width>100%</Width>
					<Height>20</Height>
					</commandentry>
					
					<textedit name='Test Textedit'>
					<X>0</X>
					<Y>45%</Y>
					<Width>100%</Width>
					<Height>20%</Height>
					</textedit>
		
					<textentry name='Test Textentry'>
					<X>0</X>
					<Y>70%</Y>
					<Width>100%</Width>
					<Height>20</Height>
					<OnKeyDown>if ${Key.Equal["enter"]}
						   {
						   echo ${This.Text.Escape}
						   This:SetText[""]
						   }
					</OnKeyDown>
					</textentry>
				</Tab>
			</Tabs>
		</TabControl>
	</Children>
	</Window>
</ISUI>

See Also

LavishGUI