Updating a page

Overview

When you want to update a component in a TUI Page, let's say the text of a paragraph, you have to configure the page so
that something will trigger the complete reload of this component.

Let's see how it looks like in a simple code:

Page page = new Page("my title");
page.append(new Paragraph("my initial text here"));

That code will build a very simple page that contains a text. But it is still static. In order to make the paragraph 'updatable', we will add a few things:

• The paragraph will need to be reloaded. To do that, we need a backend with a web service which will serve the new content of the paragraph.
• The page needs something so that the user could trigger the update of the paragraph. Here we use the simplest TUI component for that purpose: a RefreshButton.

The code for the page becomes as follow:

Page page = new Page("my title");
Paragraph paragraph = page.append(new Paragraph("my initial text here"));
paragraph.setSource("/end_point_paragraph");
RefreshButton button = page.append(new RefreshButton("Reload paragraph"));
button.connectListener(paragraph);

And the code for the web service (where you want in your backend) must serve the content of the new version of the paragraph in the appropriate Json format of TUI:

Paragraph updatedParagraph = new Paragraph("my text provided by the backend");
String responseContent = updatedParagraph.toJsonMap().toJson();
String responseContentType = "application/json";

Triggers and updates

The following TUI components are able to trigger other components' updates:

• RefreshButton
• TablePicker
• Search
• Form and ModalForm

The following TUI components (and layout components) can be updated:

• Paragraph
• SVG
• Table and TablePicker
• Grid (layout)
• Panel (layout)

Any triggering component can be connected to one or several refreshable components. And any refreshable component can be connected to one or several triggering components (that is not obvious, we will talk about that later).

In order to be updated, a component must have a source set and a proper web service must be available in the backend.
If you don't provide source to a component, you will not even be able to connect a triggering component to it. But
if no suitable web service is available in the back, the user will only see an error appear on the component when
the update process fails.

Parameters sent to backend

When a component update is triggered, some parameters are sent to the web service which provides the updated version
of the component.

There a 3 kind of parameters that will be added to the update request:

1. The session parameters. They are configured at the page level.
2. The parameters given by the triggering component. They depend on the type of triggering component and its configuration.
3. The parameters previously given by any triggering component which has been activated. This allows to manage filtering.