View Templates

Some widgets like ListView, GridView and others in RuiML bind to data in form of collections or arrays. The items in these collections are typically rendered in a uniform way.

View Templates allow you to define a template for the collection items. You define a template by adding a Template element to the collection view as shown in the following listing.

Items to be displayed, e.g. contained in a List:

public List<String> listItems = Arrays.asList("one", "two", "three");

A simple TextView as template for each item

<ListView width="fill_parent" height="fill_parent" items="#{listItems}">
	<Template>
		<TextView text="#{item}" />
	</Template>
</ListView>

Within the template, the variable item is implicitly assigned with the current item in the collection that is bound to the parent view (listItems in this example). You can bind properties of the item to attributes in the template view.

When the RemoteUI Client connects to the application, it caches the template. As soon as data are available, the RemoteUI Framework only sends the bound property values for each item to the client. The client then applies the template to render the data.

Conditional Templating

Sometimes, you need a possibility to select a template depending on the item’s state. In this case, you can apply the if attribute to the Template element and check for a certain condition. In the following example, the first template is only applied, if the item (a String in this case) starts with the word 'ERROR'. If this is not the case, the following template is checked. If the item starts with the word 'WARN', it is applied. Only if this condition is not true, the last template is applied.

Templates applied depending on a condition

<ListView width="fill_parent" height="fill_parent" items="#{listItems}">
	<Template if="#{item.startsWith('ERROR')}" >
		<TextView text="#{item}" textColor="red" />
	</Template>
	<Template if="#{item.startsWith('WARN')}">
		<TextView text="#{item}" textColor="yellow" />
	</Template>
	<Template>
		<TextView text="#{item}" textColor="green" />
	</Template>
</ListView>

You can use the full power of MVEL expressions in your conditions. If you have complex selection logic, you should think about implementing it in a static method within your compiled sources. This clears up the layout definition.

results matching ""

    No results matching ""