1.3 GUI Specification Examples
1.3.1 Address book
This section is to demonstrate an example of an address book, which contains the employee’s information. The GUI specification is completely done in the XML document.
addressbook.xml – GUI specification of the address book
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="gui_xhtml.xsl" ?>
<gui xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="gui.xsd">
<XML id="xmlid" src="addresslist.xml" ID="XML"/>
<grid style="left: 17; top: 37; width: 499; height: 23; position: relative"
ID="grid">
<Label text="Address Book:" ID="Label"/>
</grid>
<grid style="left: 17; top: 57; width: 499; height: 23; position: relative"
ID="grid">
<Label text="Name:" name="Label1" ID="Label"/>
<Edit size="20" DATASRC="#xmlid" DATAFLD="name" ID="Edit"/>
</grid>
<grid style="left: 17; top: 67; width: 499; height: 23; position: relative"
ID="grid">
<Label text="Mobile:" name="Label2" ID="Label"/>
<Edit size="20" DATASRC="#xmlid" DATAFLD="mobileph"
onMouseOut="checkPhone(mobileph)" ID="Edit"/>
</grid>
<grid style="left: 17; top: 77; width: 499; height: 23; position: relative"
ID="grid">
<Label text="Tele:" name="Label3" ID="Label"/>
<Edit size="20" DATASRC="#xmlid" DATAFLD="teleph"
onMouseOut="checkPhone(teleph)" ID="Edit"/>
</grid>
<grid style="left: 17; top: 87; width: 499; height: 23; position: relative"
ID="grid">
<Label text="Email:" name="Label4" ID="Label"/>
<Edit size="20" DATASRC="#xmlid" DATAFLD="email"
onMouseOut="checkEmail(email)" ID="Edit"/>
</grid>
<grid style="left: 17; top: 97; width: 499; height: 23; position: relative"
ID="grid">
<Label text="Address:" name="Label5" ID="Label"/>
<Edit size="20" DATASRC="#xmlid" DATAFLD="address" ID="Edit"/>
</grid>
<grid style="left:17;top:107;width:499;height:23;align='center';position:
relative" ID="grid">
<Label text="Sex:" name="Label6" ID="Label"/>
<Radio size="1" name="1" ID="Radio">
<Item name="sex" DATASRC="#xmlid" DATAFLD="sex" value="male"
ID="Radio"/>
<Item name="sex" DATASRC="#xmlid" DATAFLD="sex" value="female"
ID="Radio"/>
</Radio>
</grid>
<grid style="left:17;top:117;width:499;height:23;position: relative"
ID="grid">
<Button name="first" value="first" onClick="moveFirst()" ID="Button"/>
<Button name="previous" value="prev" onClick="movePrevious()"
ID="Button"/>
<Button name="next" value="next" onClick="moveNext()" ID="Button"/>
<Button name="last" value="last" onClick="moveLast()" ID="Button"/>
</grid>
<grid style="left:17;top:127;width:499;height:23;position: relative"
ID="grid">
<Button name="add" value="AddNew" onClick="addNew()" ID="Button"/>
</grid>
<grid style="left:17;top:137;width:499;height:23;align='center';position:
relative" ID="grid">
<Button name="cc" value="Save" onClick="Send();" ID="Button"/>
</grid>
</gui>
addresslist.xml – specification of the data island document, containing all the data in the address book
<addresslist>
<person>
<name>xin</name>
<sex>female</sex>
<mobileph>26508665</mobileph>
<teleph>44942744</teleph>
<email>lovexin@hotmail.com</email>
<address>Herlev, Denmark</address>
</person>
<person>
<name>Susan</name>
<sex>female</sex>
<mobileph>28376765</mobileph>
<teleph>36578906</teleph>
<email>susan@hotmail.com</email>
<address>Beijing, China</address>
</person>
<person>
<name>Jim</name>
<sex>male</sex>
<mobileph>36758925</mobileph>
<teleph>55678902</teleph>
<email>jim@hotmail.com</email>
<address>Copenhagen, Denmark</address>
</person>
<person>
<name>Steven</name>
<sex>male</sex>
<mobileph>68532166</mobileph>
<teleph>88906578</teleph>
<email>ste@hotmail.com</email>
<address>London, England</address>
</person>
</addresslist>
With the above specification, we can freely add new data to the address book and view all the data on the GUI. Finally we can transform the document “gui.xml” into the XHTML document.
After transformation by using Xalan-Java, we got one output document called
“addressbook.xhtml”, the source code is shown below:
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="function.js" type="text/JavaScript"
language="JavaScript"></script>
</head>
<body>
<table cellspacing="1" cellpadding="1" height="128" width="50%" border="0">
<tr>
<td height="18" align="left" width="100%">
<form>
<xml id="xmlid" src="addresslist.xml"></xml>
<div style="left: 17; top: 37; width: 499; height: 23; position: relative"
id="">Address Book:<Label name=""></Label>
</div>
<div style="left: 17; top: 57; width: 499; height: 23; position: relative"
id="">Name:<Label name="Label1"></Label><input name="" type="text"
DATASRC="#xmlid" DATAFLD="name" style="">
</div>
<div style="left: 17; top: 67; width: 499; height: 23; position: relative"
id="">Mobile:<Label name="Label2"></Label><input name="" type="text"
DATASRC="#xmlid" DATAFLD="mobileph" style=""
onMouseOut="checkPhone(mobileph)">
</div>
<div style="left: 17; top: 77; width: 499; height: 23; position: relative"
id="">Tele:<Label name="Label3"></Label><input name="" type="text"
DATASRC="#xmlid" DATAFLD="teleph" style=""
onMouseOut="checkPhone(teleph)">
</div>
<div style="left: 17; top: 87; width: 499; height: 23; position: relative"
id="">Email:<Label name="Label4"></Label><input name="" type="text"
DATASRC="#xmlid" DATAFLD="email" style=""
onMouseOut="checkEmail(email)">
</div>
<div style="left: 17; top: 97; width: 499; height: 23; position: relative"
id="">Address:<Label name="Label5"></Label><input name="" type="text"
DATASRC="#xmlid" DATAFLD="address" style="">
</div>
<div style="left:17;top:107;width:499;height:23;align='center';position:
relative" id="">Sex:<Label name="Label6"></Label><input id="Radio"
type="Radio" name="sex" DATASRC="#xmlid" DATAFLD="sex"
value="male">male</input><input id="Radio" type="Radio" name="sex"
DATASRC="#xmlid" DATAFLD="sex" value="female">female</input>
</div>
<div style="left:17;top:117;width:499;height:23;position: relative" id="">
<input name="first" type="Button" value="first"
onClick="moveFirst()"><input name="previous" type="Button"
value="prev" onClick="movePrevious()"><input name="next" type="Button"
value="next" onClick="moveNext()"><input name="last" type="Button"
value="last" onClick="moveLast()">
</div>
<div style="left:17;top:127;width:499;height:23;position: relative" id="">
<input name="add" type="Button" value="AddNew" onClick="addNew()">
</div>
<div style="left:17;top:137;width:499;height:23;align='center';position:
relative" id="">
<input name="cc" type="Button" value="Save" onClick="Send();">
</div>
The GUI is displayed in the browser as shown below:
Figure 78