Title & Property Type

In this chapter, we will refine the UI built by shouwmail template.

Class Template

NUI allows develope a Class Template, which contains properties template for a certain class.
A class template chould use class name(with postfix ".nui.xml") as file name and deploy in same directory with .class file. Or can use full (qualified)class name(package.name.className.nui.xml) and deploy in "/".

NUI locates template file in WebContext(if exists) and class path.

Now create a file named Mail.nui.xml, and add following code:

<?xml version="1.0"?>
<nui xmlns="" xmlns:n="http://nui.org">
	<property name="sender">
		<template category="title">
		<n:out>From</n:out>
		</template>
	</property>
	<property name="receiver">
		<template category="title">
		<n:out>To</n:out>
		</template>
	</property>
	<property name="subject">
		<template category="title">
		<n:out>Subject</n:out>
		</template>
	</property>
	<property name="content">
		<template category="title">
		<n:out>Message Body</n:out>
		</template>
	</property>
	<property name="createDate">
		<template category="title">
		<n:out>Create Time</n:out>
		</template>
	</property>
</nui>

<n:out> render it's text content to output.
NUI would not reload template file automatically, you can set init parameter "clearCache" of NuiConfigServlet as true to notify NUI clear template cache after each request processing.

This file define title template for each property of Mail, we got a better UI:

From:	webwork@mail.nui.org
To:	struts@mail.nui.org
Create Time:	2006/04/14
Subject:	About NUI, a property oriented template engine.
Message Body:	message body.

Property title also chould be defined as a message in resource bundles.

Property Type

Each property has a data type, such as integer, String, and so on. Each type associate a series template. This chapter, we introduce "value" type.
Typically, a mail address should be show as a mailto link, we can assign the property type as "mail" to achieve. Add "type" attribute to property sender & receiver with value "mail":

	<property name="sender" type="mail">
		<template category="title">
		<n:out>From</n:out>
		</template>
	</property>
	<property name="receiver" type="mail">
		<template category="title">
		<n:out>To</n:out>
		</template>
	</property>

The result UI is:

From:	webwork@mail.nui.org
To:	struts@mail.nui.org
Create Time:	2006/04/14
Subject:	About NUI, a property oriented template engine.
Message Body:	message body.

Mail property value template defined in file: /nuitemplates/property/value/mail.nui.xml.

The createTime property has no time part in result UI. We can add a type="time" easily to show it.

	<property name="createDate" type="time">
		<template category="title">
		<n:out>Create Time</n:out>
		</template>
	</property>

Time property value template defined in file: /nuitemplates/property/value/time.nui.xml.
As default a property whose type is java.util.Date(and its sub-class) is treat as a Date property.

Refine Message Body

As we known that message body is a long text, so we need show it in a separate column:

<?xml version = "1.0"?>
<showmail>
<template ignoreText="false">
	<table>
	<n:loop for="{'sender' , 'receiver' , 'createDate' , 'subject' , 'content'}" id="'propertyName'">
		<tr>
		<td><p:title bean="mail" property="propertyName"/>: </td>
		<td><p:value bean="mail" property="propertyName"/></td>
		</tr>
	</n:loop>
	<tr><td colspan="2"><p:title bean="mail" property="'content'"/></td></tr>
	<tr><td colspan="2"><p:value bean="mail" property="'content'"/></td></tr>
	</table>
</template>
</showmail>

We can see that NUI is flexible to build UI you want.