RichFaces 4.x panels

Common part

http://anonsvn.jboss.org/repos/richfaces/root/ui-sandbox/panels/trunk/docs/panels taglib - UML diagram for all switchable panels. All the components attributes was revised and unified for switchable panels.

http://anonsvn.jboss.org/repos/richfaces/management/design-4x/ - placement for markups in SVN.

popup component [forum thread] - all the points from thread which is not covered there - should be revised out of M1 scope.

 

At UML diagram - there are next component which will be described there:

  • panel
  • collapsiblePanel
  • popupPanel

Document will cover mainly differences from 3.3.x or highlight key functionality which should be required for succesfull component release or additionally discussed. Any points which not covered - should be transparently migrated from 3.3.x.

Panel

simple panel componentshould be migrated from 3.3.x without changes.

 

Popup Panel

Overview

This component provides popup panel component. The main difference from 3.3.x - it could be shown  in modal and non-modal states.

 

choosing if the panel is modal

boolean modal attribute (true by default?) should be used to define if the panel should be modal when shown.

 

Modal state

In modal state when the panel is shown - all the content on main page should be blocked. Need to consider tabbing through keyboard also.

Events like onmask* should be fired in non-modal state

 

Showing the panel

There should be next ways to show the panel on the client

    • by calling JS api show method
  • by defining show boolean attribute(false by default) to true. (prev showWhenRendered)

POST M! We should discuss switchType(showMode) for the panel in future - loading by ajax out of the box on show.

 

Hidding the panel

The same as for show.

 

Positioning the panel

There should be next attributes which should be used to define poistioning

  • top
  • left

this attributes should also accept "center" value in order to define the panel centered horizontally and/or vertically. And center - should be default value.

 

Sizing the panel

width and height attributes should be available at component in order to define sizes.

 

Autosize

there should be autosized attribute which should be defined as true if the panel should be sized to fit the content.

 

Overflow

We should provide the body container with rich-* class that could be used to define overflow. No speciall attributes on component should be added (could discuss attributes only if it could not be solved at markup level)

 

Browser scroll

We should provide two behaviors for panel related to browser scroll activation. The popup should be able to "follow" the scroll(have fixd position relativelly to visible browser area) and to be displayed in a fixed place (scrolled together with the other page content). followScroll boolean attribute should be defined at component to define the mode

 

domElementAttachment

we still need to keep the attribute functionality from 3.3.x because of problem of overlapping relativelly positioned elements.

 

Resizing and moving

3.3.x functionality should be kept

 

Probably out of M1. Additionally we should provide useMaskForClientOperations(definitelly to be renamed just can't imagine bettrer name during writing) boolean attribute(default false). If defined as true - on resize and movement of the panel just mask div created and operated till the end of operation and only then - changes applied to panel. It will allow to define more lightweight panel.

 

minWidth minHeight

these attributes should be considered in two cases:

  • showing the autosized panel - the sizes of the panel should consider minimal values for cases when there is small content
  • resizing the panel - panel should not be allowed to be resized less than specified in these attributes.

maxWidth maxHeight - Probably out of M1 but should consider

these attributes should be considered in two cases:

  • showing the autosized panel - the sizes of the panel should consider maximal values for cases when there is small content
  • resizing the panel - panel should not be allowed to be resized more than specified in these attributes.

trimOverlayedElements and overlapEmbededObjects

We should keep the same functionality from 3.3.x.

 

Facets

the same controls and header facet from 3.3.x should be available for redefinition.

 

Additionally we should provide the footer facet(after M1 if will not fit into release). It should be encoded at the bottom of the table. This should be highly usable if we will provide rich class to make the body scrollable - people could need fixed footer in this case.

 

Shadow attributes

TBD - revise design.

proposed to remove the attributes if we could grant control on shadow elements fror rich-* css classes.

 

Events

next special event handlers should be available on component:

  • onbeforeshow
  • onshow
  • onbeforehide
  • onhide
  • onmove
  • onresize

 

Client Side API

the should be next methods available:

isShown() - boolean. returns if the panel is shown

hide()

refresh(showParams) - redraws the panel according to given options. (options could be empty - so according to default ones)

show(showParams) - shows the panel with given options. (defined at attributes if nothing passed)

 

showParams - hash options which could redefines any default option defined at component attribute. contains of next params set:

  • width
  • height
  • minWidth
  • minHeight
  • top
  • left

 

Collapsible Panel

 

Overview

The component provides collapsible panel. (migrated simpleTogglePanel from 3.3.x)

 

Page usage

 

rich:collapsiblePanel tag should be used to define the panel. Nested content - defines with the nested tags.

 

headerExpanded facet should behaves the same as header facet for rich:panel component in expanded state

 

headerCollapsed should behaves the same as header for rich:panel coponent for collapsed state.

 

expandControl facet should allow  to redefine right aligned control which used for panel expansion

 

collapseControl facet should allow t redefine right aligned control which used for panel collapse

 

Panel expand/collapse

toggleElement attribute should be available in order to define click by which element  will initiate state change. Values - "header" (default), "control", "panel" should be accepted in the attribute. header - means that click anywhere in header will initiate toggle, control - that only click by control will toggle the panel. and panel  value - defines that click anywhere on the panel will change it's state.

 

panel expand/collapse mode

switchType attributes with values ajax(default) server and client (modes of switching) should be available.

 

State management

expanded attribute should be available in order to manage current state.

 

Server side events

ChangeExpandEvent should be risen at server on state change. changeExpandListener should be avilable in order to define listener method to handle the event.

 

Client  side events

switch and beforeswitch events should be fired on state changes and onswitch and onbeforeswitch attributes should be provided to register handlers.