myfaces-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Udo Schnurpfeil (JIRA)" <>
Subject [jira] [Commented] (TOBAGO-1565) Specification for "collapsible" for Popup, Box, Section, ...
Date Fri, 01 Jul 2016 17:26:11 GMT


Udo Schnurpfeil commented on TOBAGO-1565:

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:
>             Project: MyFaces Tobago
>          Issue Type: New Feature
>          Components: Core, Themes
>            Reporter: Udo Schnurpfeil
>            Assignee: Udo Schnurpfeil
>             Fix For: 3.0.0-beta-1, 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,
> * {{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

View raw message