Kauri Documentation
 PreviousHomeNext 
5.1.7 Listing all ordersBook Index5.1.9 Editing entities: Kauri Forms

5.1.8 Defining layout

We want the various pages in our application to share a common layout. Kauri's template language has an interesting " template inheritance" feature for this. You can write a base template in which certain regions, called blocks, can be redefined by child templates.

As part of generating the project, a layout template is already created for you at:

module1/src/main/kauri/templates/layout.xml

If you open this file, you will see it contains the following blocks:

<t:block name="title"/>

and

<t:block name="content"/>

You can of course create as many blocks as you like, and freely choose their names.

Now let's adjust our order pages to inherit from this base layout.

We will show this for the orders.html.xml, you can do the same thing for {orderid}.html.xml

<html xmlns:t="http://kauriproject.org/template"
      t:inherit="module:/templates/layout.xml">

  <t:init>
    <t:variable name="orders" src="service:/data/orders"/>
  </t:init>

  <t:block name="title">Orders</t:block>

  <t:block name="content">
    <h1>Orders</h1>

    <table border="1">
      <tr><th>Order ID</th><th>Client</th></tr>
      <t:forEach var="order" in="${orders}">
        <tr>
          <td><a href="${publicUri('service:/main/orders/')}${order.id}.html">${order.id}</a></td>
          <td>${order.billTo.name}</td>
        </tr>
      </t:forEach>
    </table>
  </t:block>

</html>

Some explanation about this template:

After you have made these changes, the pages will still pretty much look the same. You can adjust the layout.xml to apply a more fancy style.

 PreviousHomeNext 
5.1.7 Listing all orders5.1.9 Editing entities: Kauri Forms