[TOBAGO-1565] Specification for "collapsible" for Popup, Box, Section, ...

• Type: New Feature
• Status: Closed
• Priority: Major
• Resolution: Fixed
• Fix Version/s: 3.0.0-alpha-4, 3.0.0
• Component/s: Core, Themes
• Assignee: Henning Nöth
• Reporter: Udo Schnurpfeil
• Created: 03/Jun/16 08:27
• Updated: 03/Aug/16 07:58
• Resolved: 08/Jul/16 14:46

Description

Overview

This is the specification of concept of collapsible. This concept will be implemented into <tc:box>, <tc:section> and <tc:panel>, but also be the logic of <tc:popup>. The collapsible state and behavior may depend on the component. E.g. for collapsed box the header is visible, but the content not. For a collapsed popup there is nothing visible. (Nevertheless there is a hidden fragment on the browsers DOM, but this is a technical detail.)

Concept

The state and the mode

The state will be hold in an attribute named {{ boolean collapsible}} and the mode in the attribute collapsibleMode. The mode is an enum which has the values hidden and absent.

The meaning on the client side is:

• hidden: The content is present but not visible
• absent: The content is not present and not visible.

The meaning on server side is:

• hidden: The content is part of the lifecycle (validation, update-model, etc.).
• absent: The content is not part of the lifecycle.

Transitions

The state model with transitions:
There are 2 transitions show, hide, which ends in the state given in the figure.
You may notice, that this is the case, when the state absent is involved to the transition. The reason is that either (case show or hide) data must be loaded from the server.

Implementation

Commands

There might be components which have implicit commands to change the state. But here we define the API to describe the command. To respect CSP the commands will be added to the data attribute tobago-data-commands of e.g. a button. The relevant part has two values:

• transition for the transition to execute and
• for which contains the id of the collapsible component.

The examples shows code internal JSON for a command which opens a popup with the given id ":page:popup":

"collapse": {
  "transition": "show"
  "for": ":page:popup"
  }

The Facelet XHTML code may look like this:

<tc:button label="Open Popup">
  <tc:collapse transition="show" for=":page:popup" /> <!-- TBD: define a good tag name -->
</tc:button>

The for attribute may contain useful shortcuts like @auto (TBD).
It may be a good idea to allow more than one collapsible tags in a command.

DOM

On server side each collapsible component has at least one DOM element with its id independent from the state. The state will be hold in a hidden input field like this:

<div class="tobago-popup" id=":page:popup">
  <input type="hidden" name=":page:popup::collapsible">
</div>

JSF Lifecycle

The implementation of UIPopup, UIButton, etc. needs to respect the state in the implementation of these lifecycle methods:
processValidators() and processUpdates(). In the case of state is absent the children must not be validated nor update the model.

The transition command itself will be executed at the end of the update model phase.

Use cases:

TODO: Define the most important usecases.

• Popup: submit data and close the popup.
  • Rerender if validation fails.
• Popup: Cancel-button to close the popup.

Issue Links

• is related to: TOBAGO-1523 Improve collapsible concept
• relates to: TOBAGO-745 Popup should not rendered in PageRenderer