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

Creating Interfaces

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'>
 			<X>5%</X>
 			<Width>90%</Width>
 			<Height>95%</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>50%</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>
 					
 					<commandbutton name='Test Commandbutton'>
 					<X>10%</X>
 					<Y>30%</Y>
 					<Width>120</Width>
 					<Height>20</Height>
 					<Text>Test Commandbutton</Text>
 					<Command>echo Don't Press Me!</Command>
 					</commandbutton>
 
 					<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>
 					<OnChange>This.Parent.FindChild[Test Gauge]:SetValue[${This.Value}]</OnChange>
 					</slider>
 
 					<gauge name='Test Gauge'>
 					<X>2%</X>
 					<Y>10%</Y>
 					<Height>12</Height>
 					<Width>r20</Width>
 					<Range>100</Range>
 					</gauge>
 				</Tab>
 				<Tab name='Backup'>
 					<console name='Test Console'>
 					<X>5</X>
 					<Y>5</Y>
 					<Width>r10</Width>
 					<Height>20%</Height>
 					</console>
 					
 					<text name='Test Text'>
 					<X>5</X>
 					<Y>23%</Y>
 					<Width>r10</Width>
 					<Height>20</Height>
 					<Text>This is not a test.</Text>
 					</text>
 
 					<commandentry name='Test Commandentry'>
 					<X>5</X>
 					<Y>30%</Y>
 					<Width>r10</Width>
 					<Height>20</Height>
 					</commandentry>
 					
 					<textedit name='Test Textedit'>
 					<X>5</X>
 					<Y>45%</Y>
 					<Width>r10</Width>
 					<Height>20%</Height>
 					</textedit>
 		
 					<textentry name='Test Textentry'>
 					<X>5</X>
 					<Y>70%</Y>
 					<Width>r10</Width>
 					<Height>20</Height>
 					<OnKeyDown>if ${Key.Equal["enter"]}
 						   {
 						   echo ${This.Text.Escape}
 						   This:SetText[""]
 						   }
 					</OnKeyDown>
 					</textentry>
 				</Tab>
 			</Tabs>
 		</TabControl>
 	</Children>
 	</Window>
 </ISUI>

Creating Skins

See LavishGUI:Skins

See Also

LavishGUI