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