LavishGUI:User Interface XML Files
Contents
Introduction
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
