view.adoc

View

The client interface is based on the Spring MVC integration with Apache Tiles working as a template system for the JSP files. All of the HTML forms are CSS styled with Twitter Bootstrap and use Spring form tags to do the display and form binding.

Every JSP implements a responsive Twitter Bootstrap grid layout and some Twitter Bootstrap styles to make it look better.

Apache Tiles and the corresponding view resolvers are configured in the WebConfiguration.java file while tiles.xml contains the configuration for the Apache Tiles template definitions.

Forms

Client web form submission and validation is performed by Spring MVC Form Binding.

EspdController.java

@InitBinder
private void dateBinder(WebDataBinder binder) {
  SimpleDateFormat dateFormat = new SimpleDateFormat("dd-MM-yyyy");
  CustomDateEditor editor = new CustomDateEditor(dateFormat, true);
  binder.registerCustomEditor(Date.class, editor);
}

The HTML form is implemented by the spring:form tag to bind the controller object via @ModelAttribute. An EspdDocument object will be attached to each HTTP session via the @SessionAttributes("espd") declaration and is reset on each page access to the /welcome page.

EspdController.java

@ModelAttribute("espd")
public EspdDocument newDocument() {
  return new EspdDocument();
}

Internationalization (i18n)

A Web application with a worldwide user base needs to be easily adapted to support several human languages without impacting its design, through internationalization techniques (i18n). ESPD i18n is implemented through the use of Spring interceptors, locale resolvers and resource bundles for different locales.

LocaleChangeInterceptor and LocaleResolver are configured in the WebConfiguration class.

A MessageSource bean is provided by Spring Boot and configured in properties file to enable i18n for the ESPD application.

application.properties

# The location to the resource bundles needed by i18n
spring.messages.basename=i18n/messages

Translated messages could be retrieved with the given code by the Jsp tag spring:message.

example.jsp

<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<s:message code="createca_postcode"/><%-- by static code --%>
<s:message code="${cty.i18nCode}"/><%-- code from variable --%>

It is worth noting the use of custom classes providing more efficient use of the MessageSource bean in JSP. The class I18NFunc provides HTML code generating methods to use in JSPs for translated fields.

espdTemplate.jsp

<%-- Initialization of request objects --%>
eu.europa.ec.grow.espd.util.I18NFunc inst =
	new eu.europa.ec.grow.espd.util.I18NFunc(pageContext);
request.setAttribute("i18n", inst.message());
request.setAttribute("div18n", inst.div());
request.setAttribute("span18n", inst.span());

Using these classes is more concise and the generated code supports translation without page reload.

example.jsp

${i18n['createca_procurer_name']}
${div18n['createca_procurer_name']}
${span18n['createca_procurer_name']}

The JSP code above would generate the following HTML output:

example.html

Title:
<div data-i18n="createca_procurer_name">Title:</div>
<span data-i18n="createca_procurer_name">Title:</span>

Different combinations of custom i18n code generators provide translation labels, tooltips and placeholders without page reload.

example.jsp

<!-- label example -->
<label class="control-label">
  ${span18n['crit_year']
</label>
<!-- tooltip example -->
<span data-toggle="tooltip"data-i18n="${tooltip_code}" title="${tooltip_text}">
</span>
<!-- placeholder example -->
<form:input path="field"
  cssClass="form-control"
  data-i18n="crit_ratio_placeholder"
  placeholder="${i18n['crit_ratio_placeholder']}"/>

Dynamic web page translation

The ESPD Web content is translated to another language automatically without page refresh. The dynamic translation is implemented in Javascript with jQuery and the translation routine is found in the init.js file. The Javascript client makes an HTTP call to the /translate mapping defined inside the MessageSourceController class to fetch the required message labels and afterwards updates the DOM elements containing the data-i18n attribute.