Pages

The Page is a root element for creating the UI.

Structure

A Page has a standard layout as follows:

headerbodyfooter

where:

  • header and footer are optional.
  • margins on both sides of the body are set with Page.setReadingWidth(NORMAL|WIDE|MAX)

The body layout is then computed as:

  • NORMAL: the body is as wide as 65em. The margins take all the rest.
  • WIDE: the margins are 35 pixels wide, the body takes the rest.
  • MAX: there is no margins, the body is as wide as the page.

Any layout or component added with Page.append(...) goes into the body.

CSS and Javascript

A Page instance may need resources in order to be displayed correctly in a web browser.

  • The CSS will apply global style policies.
  • The Javascript code will manage interactions with the user.

These resources are optional. When present, they can be embedded or referenced with a link.

For example, in order to produce this documentation page, we do not add any script in the page, and the CSS is entirely embedded (isExternal=false):

page.toHTMLNode(new Page.Resource(false, style.toCSS()), null);

Here we give the full content of our CSS, but we could instead give a relative path to the CSS resource (which will have to be served by the backend).

page.toHTMLNode(new Page.Resource(true, "/ui/css"), null);

Note that the CSS does not contain any custom style that you may have set on components. The style customization is part of the HTML code of customized element.

CSS

It is recommended to use the Style class of TUI in order to produce the CSS code. A very simple starting point may be the way it is done for this documentation:

final Style style = new Style();
style.footer().layout().setHeight_px(50);

Javascript

If you want your page to be interactive, you absolutely need to add the tui.js code to it. It is part of the jar resources and locates in: js/tui.js
You can look at the code of the TUIBackend to see an example how to serv this code as an external file.

Session parameters

When you need all the requests to your backend to have a set of parameters, then you can add them as follows:

page.setSessionParameter("sessionId", "Xvagm0SgrNHcmmKgRpGL");

Fetching method

By default, the requests to your backend are built with parameters in json format. But this can be changed to form-data by calling:

page.setFetchType(FetchType.FORM_DATA);