Document:DisplayTagHelper

Samenvatting

Deze tutorial geeft uitleg over het gebruik van displaytag helper in de codebase van wosi.

Op basis van een aantal voorbeelden zullen we wat dieper ingaan op hoe de displaytag helper werkt.

Wat is DisplayTag

The display tag library is an open source suite of custom tags that provide high-level web presentation patterns which will work in an MVC model. The library provides a significant amount of functionality while still being easy to use.^[1]

Binnen de WOSI codebase gebruiken we displaytag helper voor het maken van tabellen en geavanceerde weergave van informatie. Een voordeel van het gebruik van displaytags is het automatich toevoegen van pagina informatie aan de views zonder daar zelf veel extra code aan toe te hoeven voegen.

Wat is DisplayTagHelper

DisplayTagHelper is een classe binnen het project wat het makkelijker maakt om de displaytag functionaliteit in de controller te implementeren. We kunnen op een centrale plek de instellingen van de displaytag vaststellen en deze in een keer gebruiken. Mochten we toch willen afwijken dan is dat ook nog mogelijk maar niet noodzakelijk.

Voorbeeld

We hebben verschillende gebruikerstypes en willen een lijst van alle types laten zien.

Voor het overzicht geven we even een beeld van de interne representatie van "model.types" die we in dit voorbeeld gebruiken:

het is een set/collection en ziet er ongeveer als volgt uit (in een psuedo representatie)

types: 
{
	Naam=Beheerder
	Id=1 
}
{
	Naam=Klant
	Id=2 
}
{
	Naam=Medewerker
	Id=3 
}

<table>
	<thead>
	<tr>
		<th>Type</th>
		<th>Acties</th>
	</tr>
	</thead>
	<tbody>
		<c:forEach items="${model.types}" var="type" varStatus="status">
		<c:choose>
			<c:when test='${(status.index)%2 eq 0}'>
				<c:set var="rowCls" value="odd" scope="page"/>
			</c:when>
			<c:otherwise>
				<c:set var="rowCls" value="even" scope="page"/>
			</c:otherwise>
		</c:choose>
 
		<tr class="${rowCls}">
			<td><c:out value="${type.Naam}"/></td>
			<td>
			<a href="#?<c:out value="${type.Id}"/>">verwijderen</a>
			<a href="#">">bewerken</a>
			</td>
		</tr>
		</c:forEach>
	</tbody>
</table>

Deze code laat gewoon een lijst zien van alle types die in de database aanwezig zijn. Bij een stuk of 10 types is dit nog handzaam maar op het moment dat er meer dan 100 in de database aanwezig zijn krijg je een lijst met 100 types. Beetje onoverzichtelijk. Daarom willen we graag displaytag gebruiken. Dat kan als volgt, we vervangen bovenstaande code door het volgende:

<display:table name="model.types" sort="external" defaultsort="1" pagesize="${model.pageSize}" id="type" partialList="true" size="${model.size}">
	<display:column property="Naam" sortable="true" sortName="Naam" title="Type"/>
	<display:column sortable="false" title="Acties">
		<a href="#?<c:out value="${type.Id}">verwijderen"></a>
		<a href="#">bewerken"></a>
	</display:column>
</display:table>

Om even duidelijk te maken wat alles is zullen we nu alle tags even kort uitleggen:

Display:table

Display:column

Als je property weg laat kan je displaytag:column gebruiken om extra informatie in weer te geven. Zoals hier in het tweede geval is gedaan.

We hebben nu de view aangepast en kunnen de controller gaan wijzigen om met deze nieuwe view te kunnen werken.

In de controller

Map<String, Object> myModel = new HashMap<String, Object>();
 
List<Type> types = services.getTypesService().listAllTypes();
myModel.put("types", types);

// Display tag		
DisplayTagHelper dth = new DisplayTagHelper("Naam", "type");
dth.process(request);

We kunnen displaytaghelper hier op twee manieren gebruiken. We kunnen ook kiezen voor de variant waarin we de pageSize meegeven als we willen afwijken van de applicatie brede definitie van het aantal records per page.

In de constructor geven we "Naam" mee als het veld waarop we willen dat de lijst gesorteerd wordt en "type" wat het id is wat we eerder in de view aan de display:table hebben meegegeven.

Zoals te zien is geven we nu nog wel een lijst met alle types terug aan de view.

List<Type> types = services.getTypesService().listAllTypes(dth.getStartPosition(), dth.getPageSize(), dth.getOrderBy(), dth.getOrder());

Om het geheel af te maken moeten we ook nog een aantal andere elementen toevoegen aan de controller namelijk:

import org.wosi.tags.DisplayTagHelper;

myModel.put("size", services.getTypesService().listAllTypes().size());
myModel.put("pageSize", dth.getPageSize());

Waarbij we moeten opmerken dat we hier omdat de service geen getListSize() (of een vergelijkbare) methode bevat we het oplossen door de complete lijst uit de database te halen.

Map<String, Object> myModel = new HashMap<String, Object>();
 
DisplayTagHelper dth = new DisplayTagHelper("Naam", "type");
dth.process(request);
 
List<Type> types = services.getTypesService().listAllTypes(dth.getStartPosition(), dth.getPageSize(), dth.getOrderBy(), dth.getOrder());
 
myModel.put("types", types);
myModel.put("size", services.getTypesService().listAllTypes().size());
myModel.put("pageSize", dth.getPageSize());

En dat is het nu kunnen we dus meerdere bladzijdes types weergeven.

Voor een aantal voorbeelden in de huidige codebase van WOSI zou je eens kunnen kijken naar:

• UserViewController en de bijbehorende view.jsp
• VheGroupTypeViewController en de bijbehordende view.jsp

1. ↑ Officiele website van displaytag