Customization of UI Components

The UI components that are part of the generated XHTML file [layout-name]_generated.xhtml can be customized. Generally, there are two ways how you can customize the components. It makes perfectly sense to combine those two ways.

  • copy & paste the file, make changes therein and make code changes to make sure that the new file is taken when the web page is rendered
  • write custom code in [layout-Name]BeanExtendedCustomization.java

The following sections assume that the following model is being used:

layout PersonView {
    link Children = PersonData;
}

display PersonData {
    ...
}

Copy & Paste …_generated.xhtml

Copy personView_generated.xhtml to personView.xhtml and write the following code in the method getXhtmlInclude() in PersonViewBeanCustomization.java:

public String getXhtmlInclude() {
    return "/path/personView.xhtml";
}

From then on you can make changes in personView.xhtml without having that overwritten by the generator. Special care has to be taken when you make changes to the model afterwards or you use a newer version of the generator. You then have to make a diff between personView_generated.xhtml and personView.xhtml after the generation and take over the changes being found in personView_generated.xhtml

Code in Extended Customization

The file personView_generated.xhtml calls methods in inner classes of PersonViewBeanExtendedCustomization.java. For every modeled display an inner class is found in PersonViewBeanExtendedCustomization.java, e.g. PersonViewBeanExtendedCustomization.PersonDataPanelGrid. Therein you find fields and methods that allow to customize some XML attributes. The names of the fields in the inner classes follow the naming convention [name of component]_[name of XML attribute], e.g. datenAendern_update. The XML tags in the XHTML files feature more attributes than you can customize here. When you want to use the missing attributes, then use the copy & paste way that is outlined in the previous section.

Every inner class has a method initForTemplate(LayoutCustomizationBean.Template template). Thats the place where you should write custom code to customize UI components. The type of the template parameter is an enumeration. It allows you to set XML attribute values depending on the template that’s being used, e.g. RESPONSIVE or PRIMEFACES_CALIFORNIA. initForTemplate() is called from init(). In init() there are also default values set for certain attributes. They are set by calling methods that are found in ApplicationBean. Doing so makes changing those default values as simple as changing the implementation in ApplicationBean.

Warning

The customization in init and initForTemplate is called once for a web page. When there are AJAX calls being made for that web page, those methods are not called again.

Here are some customization examples:

Show a busy indicator when clicking ‘next’ on a wizard

private void initForTemplate(LayoutCustomizationBean.Template template) {
    this.anlageassistent_onnext = "PF('blockUi').show();";
}

Customize a <p:calendar> component for birthday selection

private void initForTemplate(LayoutCustomizationBean.Template template) {
    Date now = new Date();
    Calendar cal = Calendar.getInstance();
    cal.setTime(now);
    cal.add(Calendar.YEAR, -120);
    Date minDate = cal.getTime();

    this.birthday_yearRange = "-120:+0";
    this.birthday_minDate = minDate;
    this.birthday_maxDate = now;
    this.birthday_pattern = applicationBean.getDefaultDatePattern();
    this.birthday_mask = "true";
    this.birthday_navigator = "true";
}

Activating a responsive style functionality of <p:dataTable>

private void initForTemplate(LayoutCustomizationBean.Template template) {
    this.usageList_reflow = "true";
}

Allowing to render raw HTML code within a <p:outputLabel>

private void initForTemplate(LayoutCustomizationBean.Template template) {
    this.hint_escape = "false";
}

Setting the ids for the update attribute for an AJAX call

Note

The default value for update is @form.

private void initForTemplate(LayoutCustomizationBean.Template template) {
    this.deleteImage_update = "images actions fileUpload";
}