[
https://issues.apache.org/jira/browse/TOBAGO-1565?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15359330#comment-15359330
]
Udo Schnurpfeil edited comment on TOBAGO-1565 at 7/4/16 7:25 AM:
-----------------------------------------------------------------
We should split the state to 2 attributes:
* collapsed=true|false (default: false)
* collapsedRendered=true|false (default: false)
The collapsedRendered=false means visible < - > absent and
collapsedRendered=true means visible < - > hidden.
This might be simpler to understand.
was (Author: lofwyr):
We should split the state to 2 attributes:
* collapsed=true|false (default: false)
* collapsedRendered=true|false (default: false)
The collapsedRendered=false means visible <-> absent and collapsedRendered=true
means visible <-> hidden.
This might be simpler to understand.
> Specification for "collapsible" for Popup, Box, Section, ...
> ------------------------------------------------------------
>
> Key: TOBAGO-1565
> URL: https://issues.apache.org/jira/browse/TOBAGO-1565
> Project: MyFaces Tobago
> Issue Type: New Feature
> Components: Core, Themes
> Reporter: Udo Schnurpfeil
> Assignee: Henning Noeth
> Fix For: 3.0.0-alpha-4, 3.0.0
>
> Attachments: collapsible-state.png
>
>
> h4. Overview
> This is the specification of concept of collapsible. This concept will be
> implemented into *<tc:box>* and *<tc:section>*, 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.)
> h3. Concept
> h4. The state
> There is an interface {{Collapsible}} which holds an enum {{state}} which has
> the values {{visible}}, {{hidden}} and {{absent}}.
> The meaning on client side is:
> * {{visible}}: The content is *present* and *visible*
> * {{hidden}}: The content is *present* but *not visible*
> * {{absent}}: The content is *not present* and *not visible*.
> The meaning on server side is:
> * {{visible}} or {{hidden}}: The content *is part* of the lifecycle
> (validation, update-model, etc.).
> * {{absent}}: The content is *not part* of the lifecycle.
> h4. Transitions
> The state model with transitions:
> !collapsible-state.png!
> There are 3 transitions {{show}}, {{hide}} and {{absent}}, which ends in the
> state given in the figure.
> The * marks transitions, which makes a server request required. 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, or (case {{drop}}) the state should be
> synchronized with the server (this might not required, but is here defined to
> be easier implemented).
> h3. Implementation
> h4. 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":
> {code}
> "collapse": {
> "transition": "show"
> "for": ":page:popup"
> }
> {code}
> The Facelet XHTML code may look like this:
> {code}
> <tc:button label="Open Popup">
> <tc:collapse transition="show" for=":page:popup" /> <!-- TBD: define a good
> tag name -->
> </tc:button>
> {code}
> 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.
> h4. 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:
> {code}
> <div class="tobago-popup" id=":page:popup">
> <input type="hidden" name=":page:popup::collapsible">
> </div>
> {code}
>
> h3. 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.
> h3. 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.
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
