Progressive Panel

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

JSF Component
Back to Component Library

Table of Contents

• 1 Progressive Panel
  
  
  
  • 1.1 General Description
  
  
  • 1.2 Tag details
  
  
  • 1.3 Custom tag attributes
  
  
  • 1.4 Example
  
  
  • 1.5 Screenshots
  
  

Progressive Panel

General Description

The progressive panel component enables the user to hide/show areas of the UI to progressive display more complex areas of the UI as required. It also allows the developer to surround an area of the UI with an attractive graphical border and title label. The component tags can contain any combination of HTML or child JSF components. IMPORTANT NOTE: Currently there is an issue in the SunRI and MyFaces impl of JSF whereby all child components of the panel must have an id attribute specified if a progressive style panel is used - else an exception will occur when the panel visibility is toggled by the user! The IDs are not required if the progressive attribute is set to false.

Tag details

<string>' MANDATORY
  rendered='<boolean>'
  styleClass='<string>'
  style='<string>'
  border='<string>'
  bgcolor='<string>'
  progressive='<boolean>'
  expanded='<boolean>'
  label='<string>'
  titleBorder='<string>'
  titleBgcolor='<string>'
  linkLabel='<string>'
  linkIcon='<string>'
  linkTooltip='<string>'
  linkStyleClass='<string>'
  expandedActionListener='<method-binding>'
/>

Custom tag attributes

border - specifies the well known name of a set of border image files that will be used to create the graphical edges of the panel. The currently available border image sets include: ballongrey, ballonwhite, blue, buttonboxgrey, greyround, innergrey, mainwhite, salmon, white, yellow and yellowInner. See Linton or Kevin for more details on the image sets. No border images will be displayed if this value is not set.

bgcolor - the HTML background colour value to use for the background of the panel area. The default is white if this value is not set.

progressive - set true to allow the panel contents to be made hidden/visible by the user. The default value is false.

expanded - set the initial expanded state of the panel. Default is true so the panel is open by default.

label - the title label to display in the top left of the panel area.

titleBorder - border image set to use for the upper title area if any. This attribute is used to add an additional title area border as well as the outer border. See #Screenshots below.

titleBgcolor - the HTML background colour value to use for the background of the optional upper title area. The default is white if this value is not set.

linkLabel - if present, the panel will generate a link in the top right of the title area of the panel. When clicked the link will fire the action associated with the panel.

linkIcon - if present, the panel will generate an icon in the top right of the title area of the panel. When clicked the link will fire the action associated with the panel.

linkTooltip - tooltip text to use for the linkIcon.

linkStyleClass - CSS class to apply to the linkLabel.

action - command outcome action value used when the user cliks the text or icon generated by the linkLabel or linkIcon attributes.

actionListener - command listener method binding used when the user clicks the text or icon generated by the linkLabel or linkIcon attributes.

Example

   <a:panel id='panel1' border='mainwhite' bgcolor='white' progressive='true'
      label='Progressive Panel'>
      nothing exciting here
      Any HTML you like here
      

      <h:outputText id='text1' value='#{msg.value}'/>
      <p>
      <h:commandButton id='but1' value='Test Button' action='success' />
   </a:panel>

<pre>

  <a:panel id='panel2' border='white' titleBorder='blue' titleBgcolor='#D3E6FE' bgcolor='white'
     action='editPanelProps' actionListener='#{Bean.method}'
     linkIcon='/images/edit.gif' progressive='true' label='Progressive Panel 2'>
     Any HTML you like here as before
  </a:panel>

Screenshots

Shows a progressive panel with a blue border and a title label wrapping a RichList component:

Panel_1.gif

The same panel after the user has clicked the small arrow icon to hide the panel contents:

Panel_2.gif

A simple non-progressive panel without a title label, showing a nice white bevelled border:

Panel_3.gif

A more complex progressive panel with a title border and linkIcon in the top right of the title area:

Panel_4.png