|
|
|
Client programming with Dojo
Zero includes the Dojo Toolkit for developing AJAX-based clients. Although AJAX and Dojo are not required for Zero applications, the combination can result in compelling Web applications.
Adding Dojo to your application
Dojo can be added to your Zero application as a dependency. Start by adding the following line to the dependencies element in your config/ivy.xml file:
<dependency org="zero" name="dojo" rev="1.0+"/>
If you're using Eclipse, then the dependency is automatically resolved when you save the modified ivy.xml file. Steps to resolve from the command line are outlined on the dependencies page.
Dojo References
The best sources of information for Dojo can be found here:
Examples with Zero
One common design pattern will be an AJAX-based client as the user interface for RESTful services. This pattern is demonstrated in the Employee Demo sample.
Highlights of the sample, showing snippets from public/index.gt:
Including Dojo
<head>
<script type="text/javascript"
src="/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false"></script>
<script type="text/javascript">
dojo.require("my.widget.Table");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.TextBox");
dojo.require("dojo.parser");
</head>
Comments:
- To enable the Dojo debug console, set the
isDebug attribute to true.
Render collection data
By clicking on the "List Employees" button, the empTable table is populated with the list of employees.
<script type="text/javascript">
function listEmployees() {
setError("");
var req = dojo.xhrGet({
url: '/resources/employees',
handleAs: 'json-comment-optional',
sync: false
});
req.addCallbacks(displayEmployees, onError);
}
function displayEmployees(response){
var w=dijit.byId("empTable");
w.setData(response);
}
function onError(response){
setError(response);
}
function setError(errorText) {
if (errorText != null) {
errorText = "<font color=red>"+errorText+"</font>";
}
var err = dojo.byId("error");
err.innerHTML = errorText;
}
</script>
<table dojoType="my.widget.Table" id="empTable" valueField="username"
multiple="false" alternateRows="true"
cellpadding="0" cellspacing="0" border="0" style="margin-bottom:24px;">
<thead>
<tr>
<th field="username" dataType="String" align="center">Username</th>
<th field="firstname" dataType="String" align="center">First Name</th>
<th field="lastname" dataType="String" align="center">Last Name</th>
<th field="location" dataType="String" align="center">Location</th>
<th field="phonenumber" dataType="String" align="center">Phone Number</th>
</tr>
</thead>
</table>
<input type="button" value="List Employees" onclick="listEmployees();" />
<!-- display error message -->
<div id="error"></div>
Create new employee entry
By clicking on the "Add New Employee" button, a form is displayed for creating a new employee record.
<script type="text/javascript">
function addEmployee() {
var empform = dijit.byId("empform");
var values = empform.getValues();
if (values.username == '') {
setError("Username cannot be empty.");
return;
}
var req = dojo.rawXhrPost({
url: '/resources/employees',
handleAs: 'json-comment-optional',
postData: dojo.toJson(values),
sync: false,
contentType: 'application/json'
});
req.addCallbacks(onEmployeeAdded, onError);
}
function showEmployeeForm() {
hideEditForm(false);
var empformholder = dojo.byId("empformholder");
empformholder.style.display = "block";
}
function hideEmployeeForm(reset) {
var empformholder = dojo.byId("empformholder");
empformholder.style.display = "none";
if (reset) {
var empform = dijit.byId("empform");
empform.containerNode.reset();
}
setError("");
}
</script>
<input type="button" value="Add New Employee" onclick="showEmployeeForm();" />
<!-- form for creating an employee -->
<div id="empformholder" style="display:none">
<form dojoType="dijit.form.Form" id="empform" name="empform">
<br/><br/>
<table border=2>
<tr><th align="left">Property</th><th align="left">Value</th></tr>
<tr><td>Username</td><td><input type="text" dojoType="dijit.form.TextBox" maxlength="32" name="username" /></td></tr>
<tr><td>First Name</td><td><input type="text" dojoType="dijit.form.TextBox" maxlength="16" name="firstname" /></td></tr>
<tr><td>Last Name</td><td><input type="text" dojoType="dijit.form.TextBox" maxlength="16" name="lastname" /></td></tr>
<tr><td>Location</td><td><select dojoType="dijit.form.ComboBox" store="locationStore" maxlength="64" name="location" /></td></tr>
<tr><td>Phone Number</td><td><input type="text" dojoType="dijit.form.TextBox" maxlength="16" name="phonenumber" /></td></tr>
</table><br />
<input type="button" onClick="addEmployee();" value="Add" />
<input type="reset" onClick="hideEmployeeForm(true);" value="Cancel"/>
</form>
</div>
Update employee entry
By clicking on the "Add New Employee" button, an edit form appears with the selected employee record.
<script type="text/javascript">
function updateEmployee() {
// the same as addEmployee, except this is a PUT
var editform = dijit.byId("editform");
var values = editform.getValues();
var username = dijit.byId("editUsername").getDisplayedValue();
var req = dojo.rawXhrPut({
url: '/resources/employees/' + username,
putData: dojo.toJson(values),
handleAs: 'json-comment-optional',
sync: false,
contentType: 'application/json'
});
req.addCallbacks(onEmployeeUpdated, onError);
}
function showEditForm() {
hideEmployeeForm(false);
var username = getSelectedUserName();
if (username == null) {
return;
}
var req = dojo.xhrGet({
url: employeeURL + '/' + username,
handleAs: 'json-comment-optional',
sync: false
});
req.addCallbacks(onShowEditForm, onError);
var editformholder = dojo.byId("editformholder");
editformholder.style.display = "block";
}
function onShowEditForm(data){
var editform = dijit.byId("editform");
editform.setValues(data);
}
</script>
<input type="button" value="Edit Selected Employee" onclick="showEditForm();" />
<!-- form for editing employee details -->
<div id="editformholder" style="display:none">
<form dojoType="dijit.form.Form" id="editform" name="editform">
<br/><br/>
<table border=2>
<tr><th align="left">Property</th><th align="left">Value</th></tr>
<tr><td>Username</td><td><input type="text" id="editUsername" dojoType="dijit.form.TextBox" maxlength="32" name="username" disabled/></td></tr>
<tr><td>First Name</td><td><input type="text" dojoType="dijit.form.TextBox" maxlength="16" name="firstname" /></td></tr>
<tr><td>Last Name</td><td><input type="text" dojoType="dijit.form.TextBox" maxlength="16" name="lastname" /></td></tr>
<tr><td>Location</td><td><select dojoType="dijit.form.ComboBox" store="locationStore" maxlength="64" id="edit_location" name="location"/></td></tr>
<tr><td>Phone Number</td><td><input type="text" dojoType="dijit.form.TextBox" maxlength="16" name="phonenumber" /></td></tr>
</table><br />
<input type="button" onClick="updateEmployee();" value="Update" />
<input type="reset" onClick="hideEditForm(true);" value="Cancel"/>
</form>
</div>
Delete employee entry
By clicking on the "Add New Employee" button, a form is displayed for creating a new employee record.
<script type="text/javascript">
function deleteEmployee() {
setError("");
// retrieve selected employee's username
var username = getSelectedUserName();
// request deletion from server
var req = dojo.xhrDelete({
url: '/resources/employees/' + username,
sync: false
});
req.addCallbacks(listEmployees, onError);
}
</script>
<input type="button" value="Delete Selected Employee" onclick="deleteEmployee();" />
|
