RichFaces 4.x panels

    Common part taglib - UML diagram for all switchable panels. All the components attributes was revised and unified for switchable panels. - 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.


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


    Popup Panel


    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.



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



    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



    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.



    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.



    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


    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



    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.