Skip to content

Page Structure

Overview

A single layout [layout-name] model element that is not referenced from another layout element is turned into a web page. A web page always belongs to a business capability, which modeled like this: capability [capability-name] The relative URL to access that web page is:

/[context-root]/[capability-name]/[layout-name]/[layout-name].xhtml.

Templates

A web page is assembled by a number of XHTML files. One of those XHTML files is a template file, that defines the overall layout of a page, kind of dividing the page into sections. There are two different template files that can be used:

Both of the above template files define five extension points to place visual content on a web page: north, west, center, east, south:

Template Sections

The dimensions of the sections are not hard-coded but are determined by the content that is put there.

The center section is further split into two separate sections: center-north and center-center. This is done in order to have an easy means to place common content into the top area of the center section. a nested template file (template-embedded-north-center.xhtml or template-embedded-north-center-responsive.xhtml) is being used to achieve this split.

Template Sections in Center

For a web page you can switch off any of the sections. By doing so you can for instance get layouts as follows:

Template without East and South

Template with Center-Center only

XHTML Files per Web Page

For every web page that is modeled as layout [layout-name], the generator JSF Web-Fragment generates 9 XHTML files into a web fragment component:

File Purpose
[layout-name].xhtml references the file template.xhtml
[layout‑name]‑center‑center.xhtml includes the file [layout-name]_generated.xhtml
[layout-name]-center-north.xhtml the default XHTML file that is included in the center-north section (to of the center section)
[layout-name]-center.xhtml references the file template-embedded-north-center.xhtml
[layout-name]-east.xhtml the default XHTML file that is included in the east section
[layout-name]-north.xhtml the default XHTML file that is included in the north section
[layout-name]-south.xhtml the default XHTML file that is included in the south section
[layout-name]-west.xhtml the default XHTML file that is included in the west section
[layout-name]_generated.xhtml the XHTML file that contains all the JSF components like input fields, labels, tables, buttons, links, …

In case you want to manually change the content of the generated file [layout‑name]_generated.xhtml, you have to create a copy of it (e.g. [layout‑name]_custom.xhtml) and manually change the method implementation of the method getXhtmlInclude() in [layout‑name]BeanCustomization.java in the web fragment project.

Web Page Content Customization

In a web application project you can write code to control, which content should be displayed in the various page sections by implementing the following methods of the LayoutCustomizationI interface, which is found in the common web fragment component. The parameter key of the getXhtmlSource() method is the id of a section. The id of a section is constructed like this: layout.[capability-name].[layout-name].[section-name] where section-name is one of north|south|west|east|center|center-north|center-center

public static interface LayoutCustomizationI {
...
    Boolean isLayoutNorthRendered(UIViewRoot view);
    Boolean isLayoutEastRendered(UIViewRoot view);
    Boolean isLayoutSouthRendered(UIViewRoot view);
    Boolean isLayoutWestRendered(UIViewRoot view);
    Boolean isLayoutCenterRendered(UIViewRoot view);
    Boolean isLayoutCenterNorthRendered(UIViewRoot view);
    Boolean isLayoutCenterCenterRendered(UIViewRoot view);
    String getXhtmlSource(UIViewRoot view, String key);
...

The generator JSF Application generates a Java file AppLayoutCustomizationBean.java that implements the LayoutCustomizationI interface. Therein you can manually write code to do the customization. The methods isLayout[section-name]Rendered() let you switch off certain sections by returning false. For every call of those functions that returns null, the default configuration of the web page in the web fragment component is being applied.

Note

Typically, you use LayoutCustomizationI.getXhtmlSource() to provide page content that should be displayed by all or at least by a set of the pages that make up your web application, like for instance a common header with a logo and a menu or a common menu on the left side of a web page. The content of the center-center section is already determined by the web fragment components.

Web Page Layout Variants

When you want to provide some variants of a web page in a web fragment component, such that the web page always uses the same set of managed beans, you can configure a set of XHTML file variants. Those variants might for instance have the same JSF components but in a different order or in a different position.

Note

The layout variant functionality has the purpose to provide those variants in a shared component, a web fragment component. Then let a developer of a web application choose one of the variants. To come up with your very own version of an existing web page, without making it available to be used in other web applications, you should rather use the web page content customization functionality that is described further above.

In the model you specify the variants by introducing and assigning an enumeration as follows:

...

enumeration LayoutEnum {
    entry DEFAULT;
    entry OTHER_ORDER;
    entry FLIP_LEFT_TO_RIGHT;
}

layout Page {
    ...

    link LayoutVariants = LayoutEnum;

    ...
}

...

Doing so you will get not only the file page_generated.xhtml, but also page_default.xhtml, page_other_order.xhtml and page_flip_left_to_right.xhtml. And in page-center-center.xhtml you’ll see the following code:

<!DOCTYPE html  [
    <!ENTITY nbsp "&#160;">
]>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:o="http://omnifaces.org/ui"
    xmlns:of="http://omnifaces.org/functions"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<!--DA-START:xhtml.center.center:DA-START-->
<!--DA-ELSE:xhtml.center.center:DA-ELSE-->
<ui:composition>
    <o:importConstants type="com.gs.gapp.LayoutEnum" var="LayoutVariantsEnum"/>
    <c:if test="#{LayoutVariantsEnum.DEFAULT.name() eq pageBeanCustomization.configurationItems.pageLayout.name()}">
        <ui:include src="#{pageBeanCustomization.getXhtmlInclude(LayoutVariantsEnum.DEFAULT.name())}" />
    </c:if>
    <c:if test="#{LayoutVariantsEnum.OTHER_ORDER.name() eq pageBeanCustomization.configurationItems.pageLayout.name()}">
        <ui:include src="#{pageBeanCustomization.getXhtmlInclude(LayoutVariantsEnum.OTHER_ORDER.name())}" />
    </c:if>
    <c:if test="#{LayoutVariantsEnum.FLIP_LEFT_TO_RIGHT.name() eq pageBeanCustomization.configurationItems.pageLayout.name()}">
        <ui:include src="#{pageBeanCustomization.getXhtmlInclude(LayoutVariantsEnum.FLIP_LEFT_TO_RIGHT.name())}" />
    </c:if>
</ui:composition>
<!--DA-END:xhtml.center.center:DA-END-->
</html>

Finally, in a web application project you choose the variant by manually writing code in the class AppPageBeanCustomization that gets generated for the web page:

...
    /**
     *
     * @param configuration  the configuration
     */
    @Override
    public void getConfigurationItems(PageBeanCustomization.Configuration configuration) {
        //DA-START:eu.highq.web.AppLoginBeanCustomization.getConfigurationItems.Configuration:DA-START
        configuration.setPageLayout(LayoutEnum.FLIP_LEFT_TO_RIGHT);
        //DA-ELSE:eu.highq.web.AppLoginBeanCustomization.getConfigurationItems.Configuration:DA-ELSE
//        return;
        //DA-END:eu.highq.web.AppLoginBeanCustomization.getConfigurationItems.Configuration:DA-END
    }
...