Previous
5.1.9 Editing entities: Kauri Forms
Most web applications will contain forms, and thus while prototyping the front-end, you will eventually also be designing some forms. You could define these forms simply as HTML. But you could also start using Kauri Forms right away. Together with DB Mock, this will to some extent give the impression of a real working application, as you can load and store data. It also makes that you can to a large detail develop the front-end before, or in parallel with, the back-end.
Let us create a form for editing an order. Create a file at
module1/src/main/kauri/pages/orders/{orderid}-edit.html.xml
and put the following in it:
<html xmlns:t="http://kauriproject.org/template"
t:inherit="module:/templates/layout.xml">
<t:init>
<t:variable name="id" value="${request.attributes.orderid}"/>
<t:if test="${id != 'new'}">
<t:variable name="order" src="service:/data/orders/${id}"/>
</t:if>
</t:init>
<t:block name="content">
<t:include src="service:/forms/templates/snippet/headerlinks.xml"/>
<script type="text/javascript">
jQuery(document).ready(function() {
// Define form configuration
var fconf = {
"createURI": "${publicUri('service:/data/orders/')}",
"dataURI": "${publicUri(txt:concat('service:/data/orders/', id))}",
};
// Create the form
var editForm = new jQuery.org.kauriproject.forms.Form("edit-form", fconf);
// Modify some form properties
editForm.submitSuccess = function (data, success) {
window.location = "${publicUri('service:/main/orders.html')}";
};
editForm.setCreateMode(${id == 'new'});
<t:if test="${id != 'new'}">
// Load data into the form
editForm.setWireValue(${order});
</t:if>
});
</script>
<form id="edit-form">
<div kauri-role="input" kauri-idref="/" kauri-type="composite">
<h1>Order number: ${id}</h1>
<h2>Bill to</h2>
<div kauri-idref="billTo" kauri-type="composite" kauri-role="input">
Name: <input kauri-idref="name" kauri-type="string"/>
<br/>
Address: <input kauri-idref="address" kauri-type="string"/>
</div>
<h2>Items</h2>
<table kauri-idref="items" kauri-type="collection" kauri-role="input">
<tr><th>Nr</th><th>Description</th><th>Price</th><th/></tr>
<tr kauri-role="layout">
<td><input kauri-idref="code" kauri-type="string"/></td>
<td><input kauri-idref="description" kauri-type="string"/></td>
<td><input kauri-idref="price" kauri-type="string"/></td>
<td><a kauri-role="delete" href="#" onclick="return false;">delete</a></td>
</tr>
</table>
<a kauri-idref="items" kauri-role="add" href="#" onclick="return false;">add item</a>
<p><input type="submit" value="Submit"/></p>
</div>
</form>
</t:block>
</html>
This form supports both editing existing orders and creating new orders.
To edit an existing order, browse to:
http://localhost:8888/orders/12345-edit.html (the 12345 should correspond to an existing JSON file in mockdata/orders)
To create a new order, browse to:
http://localhost:8888/orders/new-edit.html
You will see how the existing data is loaded, or the new data is saved and appears in the order overview. You will also see that you can add and remove items to the order.
In the template above, you see a script element containing some Javascript. A variable fconf is created, whose purpose is (mostly) to describe the form structure. In the example here, there is actually nothing of form structure described in the fconf. When this is the case, Kauri Forms will automatically derive the form structure from your HTML form, based on the kauri-idref and kauri-type attributes.
Kauri Forms can load and save form data from and to JSON. The IDs of the form widgets (in the kauri-idref attributes) correspond to the properties of the JSON object. In case you are editing an existing order, the data is loaded into the form by the setWireValue(${order}) call. The ${order} is evaluated by the template engine, so it will be replaced by the actual form data in the HTML sent to the browser.
We won't explain Kauri Forms in more detail here. If this example has wet
your appetite, check out the