Use the webuijsf:accordion tag to display an accordion component in the rendered HTML page. Think of an accordion as a vertical tab set. This set can contain one or more tabs each of which can contain virtually any HTML markup and have the following characteristics:

• Each tab contains links to different sections(tasks) of the application.
• Only one accordion tab can be open at any given time.

Unless otherwise specified the accordion dows not display the expand all, collapse all and refresh icons. To display these icons, set the toggleControls and refreshIcon attributes to true.

Facets

Theme Identifiers

None.

Client Side Javascript Functions

Client Side JavaScript Events

When the accordion component is manipulated client-side, some functions may publish event topics for custom AJAX implementations to listen for. For example, you can listen for the refresh event topic by using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:test1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


The following events are supported.

Code Examples

Example 1: Accordion as a navigational Element.

In this example, the component is used for navigational purposes.

       <webuijsf:accordion id="acc1" style="width:70%">
        
                <webuijsf:accordionTab id="tab1" label="Buttons and links" >
                    <webuijsf:hyperlink id="hyper1" text="Button Examples" 
                    url="/faces/button/index.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper2" text="Link Examples" 
                    url="/faces/hyperlink/index.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper3" text="Image Link Examples" 
                    url="/faces/imagehyperlink/index.jsp"
                    target="rightFrame"/>
                </webuijsf:accordionTab>
                
                <webuijsf:accordionTab id="tab2" label="Input Elements" >
                    <webuijsf:hyperlink id="hyper1" text="CheckBoxes" 
                        url="/faces/clientsideCheckbox/checkbox.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper2" text="CheckBox group" 
                    url="/faces/clientsideCheckbox/index.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper3" text="Radio Button Group" 
                    url="/faces/clientsiderbcbGroup/index.jsp"
                    target="rightFrame"/>
                </webuijsf:accordionTab>
                
                <webuijsf:accordionTab id="tab3" label="label1" >
                    <webuijsf:hyperlink id="hyper1" text="Calendar" 
                        url="/faces/calendar/index.jsp"
                    target="rightFrame"/>
                </webuijsf:accordionTab>
                
          </webuijsf:accordion> 
 

Example 2: TBD

This example shows the how Ajax is used to refresh the accordion component as a whole or simply a single AccorionTab.

<webuijsf:accordion id="acc1" toggleControls="true" refreshIcon="true">
         
                   <webuijsf:accordionTab id="tab1" title="#{msgs.accordion_tab1}" 
                     contentHeight="50px" > 
                     <webuijsf:staticText binding="#{AccordionBean.text1}"/> 
                   </webuijsf:accordionTab> 
 
                
                   <webuijsf:accordionTab id="tab2" title="#{msgs.accordion_tab2}" 
                     contentHeight="50px"> 
                     <webuijsf:staticText binding="#{AccordionBean.text2}"/> 
                   </webuijsf:accordionTab > 

                
                   <webuijsf:accordionTab id="tab3" title="#{msgs.accordion_tab3}" 
                     contentHeight="50px" > 
                     <webuijsf:staticText binding="#{AccordionBean.text3}"/> 
                   </webuijsf:accordionTab > 

                
                   <webuijsf:accordionTab id="tab4" title="#{msgs.accordion_tab4}" 
                     contentHeight="50px" > 
                     <webuijsf:staticText binding="#{AccordionBean.text4}"/> 
                   </webuijsf:accordionTab > 

                
                 </webuijsf:accordion > 


		<webuijsf:script > 
               function refreshAccordion1() { 
                 var acc = document.getElementById("accordionExample:acc1:tab1"); 
                 acc.refresh("accordionExample:acc1:tab1"); 
                 return false; 
               }
             </webuijsf:script > 

The corresponding backing bean.

public class AccordionBackingBean { 
    
    public final static String SHOW_ACCORDION = "showAccordionIndex"; 

    
    /** Creates a new instance of AccordionBackingBean */ 
    public AccordionBackingBean() { 
    } 

    
      
    public StaticText text1 = new StaticText(); 
    public StaticText text2 = new StaticText(); 
    public StaticText text3 = new StaticText(); 
    public StaticText text4 = new StaticText(); 

    
    public StaticText getText1() { 
        this.text1.setText(getTime());
        return text1;
    }    

    
    public void setText1(StaticText text1) {
        this.text1 = text1; 
        this.text1.setText(getTime());
    }

    
    public StaticText getText2() {
        this.text2.setText(getTime());
        return text2;
    }    

    
    public void setText2(StaticText text2) {
        this.text2 = text2;
        this.text2.setText(getTime());
    }

    
    public StaticText getText3() { 
        this.text3.setText(getTime());
        return text3;
    }    

  
    public void setText3(StaticText text3) { 
        this.text3 = text3;
        this.text3.setText(getTime()); 
    }

    
    public StaticText getText4() { 
        this.text4.setText(getTime());
        return text4;
    }    

    
    public void setText4(StaticText text4) { 
        this.text4 = text4;
        this.text4.setText(getTime()); 
    } 

        
    private String getTime() { 
        Calendar calendar = Calendar.getInstance(); 
        return calendar.getTime().toString();
    }

    
}

Use the webuijsf:accordionTab tag within webuijsf:accordion to create an accordion tab within an accordion in the rendered HTML page. The webuijsf:accordionTab tag represents a container within which an arbitrary number of components can be placed. These components will render within the content area of the given tab inside the accordion.

HTML Elements and Layout

The accordionTab component renders an XHTML <div> tag.

Configuring the webuijsf:accordionTab Tag

The webuijsf:accordionTab tag should be configured to have a label that will appear in the accordion body even when the tab is not selected. The height of the content area can also be specified. Tabs with larger content can have greater height.

Facets

Client Side Javascript Functions

Client-Side JavaScript Events

When the component is manipulated on the client side, some functions might publish event topics for custom Ajax implementations to listen for. For example, you can listen for the refresh event topic by using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:test1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


The following events are supported.

Examples

Example 1: Using the AccordionTab in an Accordion.

In this example, the accordionTab component is populated with hyperlink components that act as navigational elements.

       <webuijsf:accordion id="acc1" style="width:70%">
        
                <webuijsf:accordionTab id="tab1" label="Buttons and links" >
                    <webuijsf:hyperlink id="hyper1" text="Button Examples" 
                    url="/faces/button/index.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper2" text="Link Examples" 
                    url="/faces/hyperlink/index.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper3" text="Image Link Examples" 
                    url="/faces/imagehyperlink/index.jsp"
                    target="rightFrame"/>
                </webuijsf:accordionTab>
                
                <webuijsf:accordionTab id="tab2" label="Input Elements" >
                    <webuijsf:hyperlink id="hyper1" text="CheckBoxes" 
                        url="/faces/clientsideCheckbox/checkbox.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper2" text="CheckBox group" 
                    url="/faces/clientsideCheckbox/index.jsp"
                    target="rightFrame"/>
                    <br/>
                    <webuijsf:hyperlink id="hyper3" text="Radio Button Group" 
                    url="/faces/clientsiderbcbGroup/index.jsp"
                    target="rightFrame"/>
                </webuijsf:accordionTab>
                
                <webuijsf:accordionTab id="tab3" label="label1" >
                    <webuijsf:hyperlink id="hyper1" text="Calendar" 
                        url="/faces/calendar/index.jsp"
                    target="rightFrame"/>
                </webuijsf:accordionTab>
                
          </webuijsf:accordion> 
 

Use the webuijsf:addRemove tag to display an addRemove component in the rendered HTML page. The addRemove component can be used to construct a list and determine the order of the items in the list. List items are selected from another list and moved to the list that is being constructed.

The addRemove component presents all the items that can be included in the list, and does not permit users to add their own list items. Items are shifted from one list to the other, and can be moved up and down in the list until the user is satisfied with the list of selected items.

Another component, the editableList, also enables users to manipulate lists. However, the editableList is designed to allow users to provide their own list items. Users cannot change the order of the items after they have been added to the list.

HTML Elements and Layout

The addRemove component renders two listboxes, one for available options and one for selected options. Buttons are used to move the options between the lists, and optionally to order the selected options.

The addRemove component has a horizontal layout by default, as shown in the Horizontal layout diagram. If you set the webuijsf:addRemove tag's vertical attribute to true, the component is rendered in a vertical layout, as shown in the Vertical layout diagram. In both diagrams, the supported facets are shown in light blue. Non-facet areas are gray. The facets are described in Facets section.

Horizontal layout

In the horizontal layout, the component label (or header) is displayed next to the component by default. The header facet shows the location of the component label in the diagram. The header is displayed above the component when the webuijsf:addRemove tag's labelOnTop attribute is set to true.

Vertical layout

Configuring the webuijsf:addRemove Tag

Use the items attribute to associate the component with an array, collection, or map of com.sun.webui.jsf.model.Option. The contents of the items attribute are used for the items in the available items list.

Use the selected attribute to associate the component with a model object that represents the selected items. The model object must be an array of objects, whose values must be represented by the values on the com.sun.webui.jsf.model.Option.

The label attribute can be used to specify a header label for the addRemove component. The labelOnTop attribute can be used to display the label above the lists. By default the header label is displayed to the left of the list of available items. You can use the header facet to specify a custom component for the header label. The labelOnTop attribute also affects the header facet.

The availableItemsLabel attribute can be used to specify the label text that is displayed above the list of available items. The selectedItemsLabel attribute can be used to specify the label text that is displayed above the list of items that are selected. These labels are always displayed above the lists, regardless of the value of the labelOnTop attribute.

By default, only the Add and Remove buttons are displayed. You can use the moveButtons attribute to render the Move Up and Move Down buttons, which enable users to specify the order of selected list items by moving them up or down in the list. You can use the selectAll attribute to render the Add All and Remove All buttons so that the users can quickly move all items from one list to another. In addition, any of the buttons can be replaced with a facet, as described in Facets.

If you want the user to be able to add available list items to the selected list more than once set the duplicateSelections attribute. When this attribute is true, items remain displayed in the available items list after they have been added to the selected items list. The default behavior is to remove an item from one list when it is added to the other list.

The sorted attribute can be specified to automatically alphabetize items in the lists.

Facets

The webuijsf:addRemove tag supports the facets in the following table. These facets enable you to customize the layout of the component.

Theme Identifiers

None.

Client-Side JavaScript Functions

When the AddRemove component is rendered, a DOM object corresponding to the component is created. To manipulate the component on the client side, you can call functions on the DOM object. To add elements on the available list, call document.getElementById(id).add() where "id" is the DOM id of the AddRemove element.

Code Examples

Example 1: Horizontal AddRemove Component

In this example, the component gets the list options from a managed bean called AirportBean. The selections are stored in another managed bean (AirportSelectionBean). The selectAll attribute indicates that the Add All and Remove All buttons should be shown. A label for the component as a whole (label) is shown next to the component (labelOnTop is false). Labels have been specified for the list of available items and for the list of selected items. The sorted attribute indicates that the options on the list will be shown in alphabetical order. See also the sample backing bean code below.

         <webuijsf:addRemove id="list"
                       items="#{AirportBean.airports}"
                       selected="#{AirportBean.airportSel}"
                       label="Select airports"
                       availableItemsLabel="Available Airports"
                       selectedItemsLabel="Selected Airports"
                       selectAll="true"
 		      sorted="true"
                       labelOnTop="false"/>
 

Example 2: Vertical AddRemove Component

This example is similar to the previous example- with the following exceptions: The component is rendered using vertical layout (in this case, the main component label is always rendered above the component). The moveButtons attribute indicates that the Move Up and Move Down buttons should be shown. See also the sample backing bean code below.

 
         <webuijsf:addRemove id="list"
                       items="#{AirportBean.airports}"
                       selected="#{AirportBean.airportSel}"
                       label="Select some names"
                       availableItemsLabel="Available Names"
                       selectedItemsLabel="Selected Names"
                       selectAll="true"
                       moveButtons="true"
                       vertical="true"/>
 

Example 3: AddRemove Using Facets

This example uses the header facet to create a label with the webuijsf:label tag, which provides the labelLevel attribute to change the appearance of the label. The example also uses the addButton facet to replace the standard Add button. The child Button component uses the add() Javascript function on the webuijsf:button tag's onClick attribute, to enable the button to add items to the selected items list. See also the sample backing bean code below.

 
  <webuijsf:form id="arform1">
  ...
   <webuijsf:addRemove id="arlist" 
                       label="Select some names"
                       availableItemsLabel="Available Names:"
                       selectedItemsLabel="Selected Names:"
                       items="#{AirportBean.airports}"
                       selected="#{AirportBean.airportSel}"
                       labelOnTop="false" >
               <f:facet name="header">
                    <webuijsf:label id="arheader" text="Label in a Facet" for="arlist" labelLevel="1" />
               </f:facet>
               <f:facet name="addButton">
                    <webuijsf:button id="arlist_addButton" text="Add It!" onClick="document.getElementById('arform1:arlist').add()"/>
               </f:facet>
           </webuijsf:addRemove>
 ...
 </webuijsf:form>
  

Example Backing Bean Content

 public class BackingFileChoice {
     private static final boolean DEBUG = false;
     private String airport = "ARN";
     private String[] airportSel = { "ARN", "MNL" };
     private Option[] airports = null;
     private Option[] multibyte = null;
     public String getAirport() {
         return airport;
     }
     public void setAirport(String s) {
         airport = s;
     }
     public String[] getAirportSel() {
         return airportSel;
     }
 }
     public String getAirportSelString() {
         String s = new String();
         if(airportSel == null) return "NO Option";
         for(int i=0; i<airportSel.length; ++i) {
             s = s.concat(" " + airportSel[i]);
         }
         if(DEBUG) log("\tString is " + s);
         return s;
     }
     public void setAirportSel(String[] s) {
         if(DEBUG) { 
             log("setAirportSel() with new value");
             if(s == null) log("No value!"); 
             else {
             for(int i=0; i<s.length; ++i) 
                 log("adding value " + s[i]);
             }
         }
         airportSel = s;
     }
     public Option[] getAirports() {
         return airports;
     }
     public BackingFileChoice() {
         airports = new Option[11];
         airports[0] = new Option("SFO", "San Francisco");
         airports[1] = new Option("OAK", "Oakland");
         airports[2] = new Option("SAN", "San Diego");
         airports[3] = new Option("BOS", "Boston");
         airports[4] = new Option("ARN", "Stockholm");
         airports[5] = new Option("MNL", "Manila");
         airports[6] = new Option("CDG", "Paris");
         airports[7] = new Option("PDX", "Portland");
         airports[8] = new Option("LAX", "Los Angeles");
         airports[9] = new Option("NRT", "Tokyo");
         airports[10] = new Option("TBD", "Future Airport");
         airports[10].setDisabled(true);
     }
  }
  

Use the webuijsf:alarm tag to display a theme-specific alarm image in the rendered HTML page. The webuijsf:alarm tag can be used anywhere that an image can be displayed. Alarm images are useful in pages and tables that display the status of devices.

HTML Elements and Layout

The rendered HTML page displays an XHTML compliant <img> element with any applicable attributes.  The attributes can be specified through the <webuijsf:alarm> tag attributes.

Configuring the webuijsf:alarm tag

Use the severity attribute to specify the alarm severity, which determines the theme-specific alarm icon to render. The Alarm supports a set of Indicators which enables you to define custom types and associated images in addition to default types. Indicators also support the sorting attribute which enables sorting among Indicators depending on the sortValue value.

The text attribute is used to specify the text to be displayed next to the alarm icon, and the textPosition attribute specifies whether the text should be displayed to the left or right of the icon.

The url attribute can be used to override the theme-specific alarm icon. The image that you specify with the url attribute is always rendered, even if a severity is not specified. If you specify a theme key with the icon attribute, you must also specify a standard severity. If you do not specify a severity, the component will assume default severity. The icon is coupled with the severity, while the url is not. If you specify an icon attribute as well as a url attribute, the image specified by the url takes precedence over the image specified by the icon attribute.

Other image-related attributes, such as border, height, and width, can also be specified with the webuijsf:alarm tag attributes to override the image attributes of the icon.

Facets

Theme Identifiers

The Theme provides the following alarm icon identifiers.

 DOWN_ALARM_INDICATOR
 CRITICAL_ALARM_INDICATOR
 MAJOR_ALARM_INDICATOR
 OK_ALARM_INDICATOR
 ALARM_CRITICAL_SMALL
 ALARM_CRITICAL_MEDIUM 
 ALARM_MAJOR_SMALL
 ALARM_MAJOR_MEDIUM 
 ALARM_MINOR_SMALL 
 ALARM_MINOR_MEDIUM
 ALARM_DOWN_SMALL 
 ALARM_DOWN_MEDIUM
 ALARM_MASTHEAD_CRITICAL_MEDIUM 
 ALARM_MASTHEAD_DOWN_MEDIUM 
 ALARM_MASTHEAD_MAJOR_MEDIUM
 ALARM_MASTHEAD_MINOR_MEDIUM

Client-Side JavaScript Functions

Client-Side JavaScript Events

When the component is manipulated client side, some functions might publish event topics for custom Ajax implementations to listen for. For example, you can listen for the refresh event topic by using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:test1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


Code Examples

Example 1: Alarm with Critical Severity.

Example 2: Alarm with Major Severity Overriding the Alarm Image.

 <webuijsf:alarm id="alarm2" 
           severity="major"
           url="../images/major.gif" 
           height="10" 
           width="10" 
           alt="Processor Alarm:Major" />
 

Example 3: Using Alarms in a Table

See the Examples section in the documentation for the webuijsf:tableColumn component.

Backing Bean for Examples

AlarmBackingBean.java

 AlarmBackingBean {
 ...
 public List getCustomIndicator() {
        
        FacesContext context = FacesContext.getCurrentInstance();
        UIComponent comp = context.getViewRoot().findComponent("form1:alarm1");
        Alarm alarm = (Alarm) comp;
               
        Indicator indicator = new Indicator("ALARM_CRITICAL_SMALL", "mySeverity", 600);
        
        List lst = Alarm.getDefaultIndicators();
        lst.add(indicator);
                
        return lst;
    }  
    ...
 } 
 

Example 5: Update Client-Side Alarm Properties Using the getProps And setProps Functions

<webuijsf:radioButton id="rb1" name="rb1" label="Toggle Alarm Visible" onClick="toggleVisible()"/>
<webuijsf:alarm id="alarm1" severity="major" text="#{MyBean.text}" />

<webuijsf:script>
    function toggleVisible() {
        var domNode = document.getElementById("form1:alarm1"); // Get alarm
        return domNode.setProps({visible: !domNode.getProps().visible}); // Toggle visible state
    }
</webuijsf:script>

Example 6: Asynchronously Update Alarm Using Refresh Function

<webuijsf:radioButton id="rb1" name="rb1" label="Refresh Alarm" onClick="refreshAlarm()"/>
<webuijsf:alarm id="alarm1" severity="major" text="#{MyBean.text}" />

Example 7: Asynchronously Update Alarm Using Refresh Function

<webuijsf:alarm id="alarm1" severity="major" text="#{MyBean.text}" />
<webuijsf:textField id="field1" text="#{MyBean.text}" label="Change Text"
          onKeyPress="setTimeout('refreshAlarm();', 0);"/> // Field used to asynchronously update text.

Use the webuijsf:alarmStatus tag to display alarm information as hyperlinks. This tag is typically specified as part of the webuijsf:masthead tag's statusArea facet. The webuijsf:alarmStatus tag produces alarm information identical to the webuijsf:masthead tag's alarmCounts attribute. See the webuijsf:masthead documentation for more information about the statusArea facet.

Note that when you use the webuijsf:masthead attributes, spacing between the components is handled automatically. When you use the webuijsf:alarmStatus, webuijsf:jobStatus, webuijsf:timeStamp, and webuijsf:notificationPhrase tags in the statusArea facet, you may have to add code to handle the spacing between the components, as demonstrated in the example below.

Note that the AlarmStatus component is deprecated. Look at the examples to see how the equivalent of webuijsf:alarmStatus can be created in the masthead.

HTML Elements and Layout

The rendered HTML page includes a <span> element that contains the label for the alarm count. The label text is "Current Alarms:" by default. Immediately following the <span> element are four image hyperlinks that show the number of alarms for each severity. You can determine how the links respond when clicked by specifying attributes such as url, action, or actionListener. The links can be used to show the user more information about the alarms.

Configuring the webuijsf:alarmStatus tag

Use the text attribute to specify a title or label for the alarmStatus component. The default text is "Current Alarms:".

The immediate attribute should be set to true when this component is used in the masthead.

By default, all four alarm icons and counts are displayed. You can prevent any alarm type from being displayed by setting the following attributes to false:

• criticalAlarms
• downAlarms
• majorAlarms
• minorAlarms

• numCriticalAlarms
• numDownAlarms
• numMajorAlarms
• numMinorAlarms

The order in which you specify the attributes does not matter because the alarms are always displayed in the order of severity: down, critical, major, minor. If the count of an alarm type is 0, a dimmed version of the icon is displayed.

You can also specify key identifiers for alternative theme image files to use for the icons. See the Theme Identifiers section.

The image-related attributes such as align, border and vspace apply to all the alarm images. The link-related attributes such as type, url, and action apply to all the alarm count links.

If you want to customize a particular alarm count icon count, you can use facets to replace any of the icons. See Facets for more information.

Facets

The webuijsf:alarmStatus tag supports the following facets.

For example, to replace the down alarms icon, use the following facet in the webuijsf:alarmStatus tag:

Note that you can use the theme style class MstAlmLnk to apply appropriate spacing for links you create with facets.

Theme Identifiers

The theme provides the following alarm icon key identifiers.

 ALARM_CRITICAL_SMALL
 ALARM_CRITICAL_MEDIUM
 ALARM_MAJOR_SMALL
 ALARM_MAJOR_MEDIUM
 ALARM_MINOR_SMALL
 ALARM_MINOR_MEDIUM
 ALARM_DOWN_SMALL
 ALARM_DOWN_MEDIUM
 ALARM_MASTHEAD_CRITICAL_MEDIUM
 ALARM_MASTHEAD_CRITICAL_DIMMED
 ALARM_MASTHEAD_DOWN_MEDIUM
 ALARM_MASTHEAD_DOWN_DIMMED
 ALARM_MASTHEAD_MAJOR_MEDIUM
 ALARM_MASTHEAD_MAJOR_DIMMED
 ALARM_MASTHEAD_MINOR_MEDIUM
 ALARM_MASTHEAD_MINOR_DIMMED
 

These identifiers can be specified with the criticalIcon, majorIcon, minorIcon, downIcon attributes to vary the appearance of the icons.

Client-Side JavaScript Functions

None.

Code Examples

Example 1: Display Alarm Status Information As Part of the Masthead StatusArea facet

This example shows the webuijsf:alarmStatus tag with attributes set to indicate the numbers of each type of alarm. The example shows literal values for these attributes, but you can set them to a JavaServer Faces EL expression that resolves to a backing bean property. The f:verbatim tags are used to add style selectors that are defined in the theme style sheet.

<webuijsf:masthead id="Masthead" productImageURL="../images/webconsole.png"
         productImageDescription="Java Web Console" userInfo="user_name" 
         serverInfo="server_name">
      <f:facet name="statusArea">
        <webuijsf:panelGroup id="statusPanel" separator="">
          <webuijsf:markup tag="div" styleClass="#{themeStyles.MASTHEAD_STATUS_DIV}">
            <webuijsf:notificationPhrase text="Important info goes here" />
            <webuijsf:image icon="DOT" border="0" width="20" height="1" />
            <webuijsf:jobStatus numJobs="1" />
          </webuijsf:markup>
          <webuijsf:markup tag="div" styleClass="#{themeStyles.MASTHEAD_TIME_DIV}">
            <webuijsf:timeStamp />
          </webuijsf:markup>
          <webuijsf:markup tag="div" styleClass="#{themeStyles.MASTHEAD_ALARM_DIV}">
            <webuijsf:alarmStatus numDownAlarms="0" numCriticalAlarms="1" numMajorAlarms="2" numMinorAlarms="3" />
          </webuijsf:markup>
        </webuijsf:panelGroup>
      </f:facet>
 </webuijsf:masthead>
 

Example 2: Create the Equivalent of webuijsf:alarmStatus tag

 <f:facet name="currentAlarmsInfo">  
  <webuijsf:panelGroup id="alarmStatus">

      <webuijsf:staticText id="labelstatus" text="Current Info :" styleClass="#{themeStyles.MASTHEAD_TEXT}"/>
      <webuijsf:panelGroup id="downAlarmsPanel">
        <webuijsf:imageHyperlink id="downAlarmsLink" 
                           icon="ALARM_MASTHEAD_DOWN_DIMMED" text="0" disabled="true" >                        
          <f:param name="severity" value="down" />
          </webuijsf:imageHyperlink>
        <f:verbatimk>&nbsp;&nbsp;</f:verbatim>
      </webuijsf:panelGroup>

      <webuijsf:panelGroup id="criticalAlarmsPanel">
        <webuijsf:imageHyperlink id="criticalAlarmsLink" styleClass="#{themeStyles.MASTHEAD_ALARM_LINK}" 
                           icon="ALARM_MASTHEAD_CRITICAL_MEDIUM" text="1"  actionExpression="#{MastheadBean.alarmClicked}">
          <f:param name="severity" value="critical"/>
        </webuijsf:imageHyperlink>
     <f:verbatim>&nbsp;&nbsp;</f:verbatim>
      </webuijsf:panelGroup>                        

      <webuijsf:panelGroup id="majorAlarmsPanel">
        <webuijsf:imageHyperlink id="majorAlarmsLink" styleClass="#{themeStyles.MASTHEAD_ALARM_LINK}" 
                           icon="ALARM_MASTHEAD_MAJOR_MEDIUM" text="2" actionExpression="#{MastheadBean.alarmClicked}">
          <f:param name="severity" value="major"/>
        </webuijsf:imageHyperlink>
      <f:verbatim>&nbsp;&nbsp;</f:verbatim>
      </webuijsf:panelGroup>

      <webuijsf:panelGroup id="minorAlarmsPanel">
        <webuijsf:imageHyperlink id="minorAlarmsLink" styleClass="#{themeStyles.MASTHEAD_ALARM_LINK}" 
                           icon="ALARM_MASTHEAD_MINOR_MEDIUM" text="3" actionExpression="#{MastheadBean.alarmClicked}">
          <f:param name="severity" value="minor"/>
        </webuijsf:imageHyperlink>
        <f:verbatim>&nbsp;&nbsp;</f:verbatim>
      </webuijsf:panelGroup>
  </webuijsf:panelGroup>
</f:facet>              
               

Use the webuijsf:alert tag to display an inline alert message at the top of the rendered HTML page. Inline alert messages permit users to correct problems or proceed with their work without having to dismiss a window and navigate to a new location.

HTML Elements and Layout

The alert component includes an icon, a summary message, and an optional detail message. The icon shown is determined by the type attribute, which must be set to information, success, warning, error or one of the developer define types. Alert supports a set of Indicators which enables to define custom types and associated images in addition with default types. Indicators also support the sorting attribute which enables sorting among Indicators depending on the sortValue value. A different icon is shown for each alert type. The icon is determined by the theme or could be a ImageComponent.

The component renders HTML <div> and <table> elements for the alert box and text, with an <img> element for the icon. If you include a link with the alert, an <a> element is also rendered.

Configuring the webuijsf:alert tag

The summary message is specified with the summary attribute, and is displayed prominently next to the icon. The optional detail message is specified with the detail attribute, and is displayed in less prominent text following the summary text. The detail text provides more information about the alert.

You can also include a link to further information or another window by using the linkTarget, linkText, linkToolTip, linkURL, and linkActionExpression attributes. The link is displayed below the detail text.

The icon and link can be overridden with facets.

Facets

The webuijsf:alert tag supports the following facets:

• alertImage - use this facet to specify a custom component to use for the alert icon. For example, you might override the theme icon for the alert with the webuijsf:image component.

• alertLink - use this facet to specify a custom component to use for the link, to add formatting or extra text, for example.

Client Side Javascript Functions

Client Side JavaScript Events

When the component is manipulated on the client side, some functions might publish event topics for custom Ajax implementations to listen for. For example, you can listen for the refresh event topic by using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:test1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


Examples

Backing Bean for Examples

AlertBackingBean.java

 AlertBackingBean {
 ...
 public List getCustomIndicator() {
        
        FacesContext context = FacesContext.getCurrentInstance();
        UIComponent comp = context.getViewRoot().findComponent("form1:alert1");
        Alert alert = (Alert) comp;
               
        Indicator indicator = new Indicator("ALARM_CRITICAL_SMALL", "myType", 600);
        
        List lst = Alert.getDefaultIndicators();
        lst.add(indicator);
                
        return lst;
    }  
    ...
 } 
 

Example 5: Update Client-Side Alert Properties Using the getProps and setProps Functions

<webuijsf:radioButton id="rb1" name="rb1" label="Toggle Alert Visible" onClick="toggleVisible()"/>
<webuijsf:alert id="alert1" type="information" summary="#{MyBean.summary}" />

<webuijsf:script>
    function toggleVisible() {
        var domNode = document.getElementById("form1:alert1"); // Get alert
        return domNode.setProps({visible: !domNode.getProps().visible}); // Toggle visible state
    }
</webuijsf:script>

Example 6: Asynchronously Update Alert Using Refresh Function - 1

<webuijsf:radioButton id="rb1" name="rb1" label="Refresh Alert" onClick="refreshAlert()"/>
<webuijsf:alert id="alert1" type="information" summary="#{MyBean.summary}" />

Example 7: Asynchronously Update Alert Using Refresh Function - 2

<webuijsf:alert id="alert1" type="information" summary="#{MyBean.summary}" />
<webuijsf:textField id="field1" text="#{MyBean.summary}" label="Change Summary Text"
          onKeyPress="setTimeout('refreshAlert();', 0);"/> // Field used to asynchronously update summary.

Use the webuijsf:anchor tag to

• Create an anchor that traverses to the specified URL.
• Anchor a position in the page so that you can jump to it.

The value of the id attribute of the rendered anchor element will be the component id, not the component's client id. In order to obtain the DOM node of the anchor element, on the client, the component id must be used and not the component's client id. This means that the component id must be unique in the page and not just unique within the closest NamingContainer.

Facets

None

Client Side Javascript Functions

Client Side JavaScript Events

When the component is manipulated on the client side, some functions may publish event topics for custom Ajax implementations to listen for. For example, you can listen for the refresh event topic by using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:test1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


Code Examples

Example 1: Create an Anchor That Points to an URL

Example 2: Create an Anchor That Anchors a Particular Position on the Page. 

Example 3: Create a Hyperlink to The Anchor Above

Example 4: Create a Relative Anchor to the Anchor in Example 1

Example 5: Update Client-Side Anchor Properties Using the getProps and setProps Functions

Example 6: Asynchronously Update Anchor using refresh Function

<webuijsf:anchor id="anchor1" text="#{MyBean.text}"/>
<webuijsf:button id="button1" text="#{MyBean.text}" onClick="refreshAnchor();return false;"/>

Example 7: Asynchronously Update Anchor Using refresh Function

<webuijsf:anchor id="anchor1" text="#{MyBean.text}"/>
<webuijsf:textField id="field1" text="#{MyBean.text}" label="Change Anchor Text"
          onKeyPress="setTimeout('refreshAnchor();', 0);"/> // Field used to asynchronously update text.

Using Body Tags on Pages Without Frames

Using Body Tags on Pages With Frames

If you are using frames in your page, use the webuijsf:frameSet tag instead of the webuijsf:body tag.

The focus can be maintained with the body tag's focus and preserveFocus attributes. The preserveFocus attribute's default value is true. This means that after the first display, the focus, will be returned to the element that had the focus when the request was made. Setting preserveFocus to false inhibits that behavior.

The focus attribute allows the developer to specify the element that should receive the focus on first display. If preserveFocus is set to false the focus attribute can control which element receives the focus on every request/response cycle.

HTML Elements and Layout

The body component creates an HTML <body> element in the rendered HTML page. Attributes that you specify with the webuijsf:body tag are used to specify the corresponding attributes in the rendered <body> element.

Client-Side Javascript Functions

None.

Code Examples

Example 1: Create a Body Tag

This example shows a simple webuijsf:body tag.

Example 2: Create a Body Tag That Sets the Focus

This example demonstrates how to set the focus in the webuijsf:body tag for a particular component in the page. When the page is first loaded, the third text field has focus.

Since preserveFocus has not been specified, if the same page is redisplayed in the response, then the focus will be set in one of two ways.

• If the Enter key is pressed in an input field, then the focus returns to that field in the subsequent response.
• If the page is submitted is some other fashion, for example through a submit button then the focus returns to the element that submitted the page since it was the last element to have the focus.

Use the webuijsf:breadcrumbs tag to display a set of hyperlinks that can be used as a navigation aid in the rendered HTML page. Breadcrumbs, or a parentage path, show the user's location within an application, and the physical or logical path to a page. The user can click breadcrumbs to navigate to other locations previously traversed within the application.

A breadcrumb's hyperlinks may be specified in one of two ways:

• Directly in the JSP, by placing one or more webuijsf:hyperlink tags within the webuijsf:breadcrumbs tag. Hyperlinks specified in this manner are referred to as "child" hyperlinks.
• Indirectly via the pages attribute. The value must a value binding expression that identifies an array of com.sun.webui.jsf.Hyperlink components. Hyperlinks specified in this manner are referred to as "bound" hyperlinks. Bound hyperlinks must be uniquely identifiable by the value of their id attribute, and this attribute must not be null. Bound hyperlinks should not be part of a view tree, and the value of their parent property should be null.

Bound hyperlinks are treated as child hyperlinks for all phases of request processing, except that they are not asked to save or restore their state.

The breadcrumbs component has an immediate property, the default value of which is true. If the breadcrumbs is immediate, all action events generated by child or bound hyperlinks will be treated as though they too were immediate, whether or not the source hyperlink is immediate. If the breadcrumbs is not immediate, action events will be processed according to whether their source hyperlink is immediate or not.

HTML Elements and Layout

Breadcrumbs are rendered as a series of <a> XHTML hyperlinks separated by ">"  symbols, similar to the following: 

Main App Page > Second level page  > Another level > Current page

The last element in the breadcrumbs should correspond to the current page, and is rendered as static text.

Separators are rendered between hyperlinks that are visible and renderable. The last child hyperlink is always assumed to refer to the current page, whether or not it is visible or renderable.

Theme Identifiers

Client Side Javascript Functions

Examples

Example 1: Using child components

       <webuijsf:breadcrumbs id="breadcrumbs1">
         <webuijsf:hyperlink url="http://google.com" label="Google"/>
         <webuijsf:hyperlink url="http://yahoo.com" label="Yahoo"/>
         <webuijsf:hyperlink url="http://sun.com" label="Sun"/>
       </webuijsf:breadcrumbs>
 

Example 2: Using a value binding

       <webuijsf:breadcrumbs id="breadcrumbs2" pages="#{FieldBean.pagelist}" />
 

Use the webuijsf:bubble tag to display a bubble component in the rendered HTML page. Bubble component is a pop up window which appears on screen in response to certain mouse interactions.The purpose of the bubble component is to provide detailed information to the end user when a mouse hovers on a particular screen element. To include a bubble component in the JSP page, the web application developer will include a tag as follows: <webuijsf:bubble id="bubble" title="Bubble Help Title"> <webuijsf:staticText text="Add help Text" /> </webuijsf:bubble>

Facets

Theme Identifiers

None.

Client-Side JavaScript Functions

Client Side JavaScript Events

When the component is manipulated on the client side, some functions might publish event topics for custom AJAX implementations to listen for. For example, you can listen for the refresh event topic by using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:test1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


The following events are supported.

Examples

Example 1: Bubble Component for Hyperlink.

 <webuijsf:bubble id="bubble" autoClose="true" helpTitle="Bubble Help Title">
        <webuijsf:staticText text="Bubble positioning examples..." />       
</webuijsf:bubble>

<webuijsf:hyperlink id="topleft" onMouseOver="document.getElementById('form1:bubble').open(event);" 
                    onMouseOut="document.getElementById('form1:bubble').close();"   
                    text="Bubble with Left top arrow"/>

Example 2: Bubble Refresh Example

<webuijsf:bubble id="bubble" helpTitle="#{BubbleBean.titleText}">
                <webuijsf:staticText text="Bubble refresh example..." />       
        </webuijsf:bubble>
<webuijsf:textField id="field1" text="#{BubbleBean.titleText}" 
          onKeyUp="return refreshBubble();" 
          />

        <webuijsf:script>
            // Refresh bubble.
            function refreshBubble() {

                var domNode = document.getElementById("form1:bubble"); 
                               
                return domNode.refresh("form1:field1_field");
                
            }
        </webuijsf:script>

Use the webuijsf:button tag to display an input button in the rendered HTML page. The input button submits the associated form when activated by the user. The corresponding ActionEvent events then occur on the server.

HTML Elements and Layout

Configuring the webuijsf:button tag 

The text attribute is used to specify the characters displayed on the buttons, which use a default button image set by the theme. The escape attribute, when set to false, causes an HTML <button> to be rendered instead of an <input> element. The <button> element, unlike the  <input> element, allows you to specify button text that will be interpreted as HTML. For example if you wanted the button to say M&M, you would have to specify M&M and set escape="false".  

You can use the imageURL attribute to specify a different image for a button, or the  icon attribute to specify a theme key to a button image. When you use these attributes, the text attribute is ignored, so your button image must include any desired button text.

Note that the mini attribute at one time rendered a smaller button, but currently all buttons are the same size. The mini attribute has no effect. However, you can use style and styleClass attributes to create a smaller button if desired.

Button Actions

The button component is the most commonly used component for submitting a page. By default, the button component creates a submit button. However, you might want to use a button to go to another page in the application. In this case, you should configure the button with immediate="true" and an actionExpression that handles the navigation.

If you want a button to submit a page, you should not set immediate, and should set an actionExpression and possibly an actionListenerExpression.   The action should get information from the managed bean and perform some business logic, and then determine what to show next on the basis of the outcome of the business logic.

If you want the button to reset all the input component values on the page, set the reset attribute to true.

Client Side Javascript Functions

Client Side JavaScript Events

When the component is manipulated client side, some functions may publish event topics for custom AJAX implementations to listen for. For example, listen for the refresh event topic using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:button1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


The following events are supported.

Examples

Example 1: Create a primary button

Example 2: Create a secondary button

Example 3: Create a reset button

Example 4: Create an image button

Example 5: Update client-side button properties using the getProps and setProps functions

<webuijsf:radioButton id="rb1" name="rb1" label="Toggle Button Disabled" onClick="toggleDisabled()"/>
<webuijsf:button id="button1" text="My Button" />

<webuijsf:script>
 function toggleDisabled() {
 var domNode = document.getElementById("form1:button1"); // Get button
 return domNode.setProps({disabled: !domNode.getProps().disabled}); // Toggle disabled state
 }
</webuijsf:script>

Example 6: Asynchronously update button using refresh function

<webuijsf:radioButton id="rb1" name="rb1" label="Refresh Button" onClick="refreshButton()"/>
<webuijsf:button id="button1" text="#{MyBean.text}"/>

Example 7: Asynchronously update button using refresh function

<webuijsf:button id="button1" text="#{MyBean.text}"/>
<webuijsf:textField id="field1" text="#{MyBean.text}" label="Change Button Text"
 onKeyPress="setTimeout('refreshButton();', 0);"/> // Field used to asynchronously update text.

Use the webuijsf:calendar when the user needs to select a date. The calendar component displays a text field that expects a date as input, together with an icon that displays a small calendar when clicked. The user can either type directly into the textfield or select a date from the calendar display.

HTML Elements and Layout

The calendar component renders several elements: an optional <label>, an <input type="text"> and an <img> element for the icon. They are laid out inside a HTML <table>.

The pop-up calendar is a complex component also formatted using a HTML <table>. It has child components corresponding to <webuijsf:dropDown>, <webuijsf:iconHyperlink> (See these for details) and anchors <a> to represent the dates and the "close" button.

Configuring the webuijsf:calendar tag

Use the selectedDate attribute to associate the component with a model object that represents the current value, by setting the attribute's value to an EL expression that corresponds to a property of a backing bean.

By default, the component accepts dates between the current date and hundred years out. The years shown in the popup calendar reflect this range. If a date outside of the range is entered into the textfield, the component indicates a validation error. To specify a different range of date, use the minDate and maxDate attributes.

To optionally specify a label for the component, use the label attribute, or specify a label facet.

Facets

• label: Use this facet to specify a custom component for the label.
• readOnly: Use this facet to specify a custom component for displaying the value of this component when it is marked as readonly. The default is webuijsf:staticText.

Client-side JavaScript functions

When the component is rendered, a DOM object corresponding to the component is created. To manipulate the component on the client side, you can call functions on the DOM object.To disable the component, invoke document.getElementById(id).setProps({disabled: false}) where id is the DOM id of the calendar widget.

getProps()	Use this function to get widget properties. See setProps() function for a list of supported properties.
refresh(execute)	Use this function to asynchronously refresh the component. [optional] execute: Comma separated string containing a list of client ids against which the execute portion of the request processing lifecycle must be run.
setProps(props)	Use this function to change any of the following supported properties: accesskey align calendar className dir disabled id label lang notify onClick onDblClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseOut onMouseOver onMouseUp onMouseMove patternHelp readOnly required style tabIndex title valid value visible
subscribe(topic, obj, func)	Use this function to subscribe to an event topic. topic: The event topic to subscribe to. obj: The object in which a function will be invoked, or null for default scope. func The name of a function in context, or a function reference to invoke when topic is published.

Client Side JavaScript Events

When the calendar component is manipulated client side, some functions may publish event topics for custom Ajax implementations to listen for. For example, custom Ajax implementations can listen for the refresh event topic using:

<webuijsf:script>
    var processEvents = {                       
        update: function(props) {
            // Do something...
        }
    }

    // Subscribe to refresh event.
    var domNode = document.getElementById("form1:test1");
    domNode.subscribe(domNode.event.refresh.endTopic, processEvents, "update");

</webuijsf:script>


Code Examples

Example 1: Basic Pop-up Calendar

The component gets the options from a managed bean called CalendarBean. The value of the component selectedDate is bound to a property of the managed bean. A label for the component as a whole (label) is shown next to the component.

This example shows how to create a simple calendar.

<webuijsf:calendar id="startDate" 
               selectedDate="#{CalendarBean.startDate}"
               label="Start Date: " />

Code for the managed bean:

CalendarBean.java

Example 2: DateFormat Pattern and Date Ranges Configured

The calendar component gets its options from a managed bean called TravelBean. The value of the attribute selectedDate is bound to a property called travelDate, that belongs to the managed bean. A label for the component as a whole (label) is shown next to the component; the label is retrieved from a message bundle.

The calendar component has been configured to use a pattern for date representation consisting of four digits for the year, two for the month, and two for the day, separated by dashes. This pattern, set using the dateFormatPattern attribute will be used regardless of locale. With this date format pattern, the default help string will be "YYYY-MM-DD", which is suitable for English, but not for other locales where other words are used. So a different message will be retrieved for each locale (dateFormatPattern).

The calendar component is also configured to restrict the range of dates that are valid, so that the first valid date is the day after the day the component is viewed, and the last valid date is six months from that date.

     <webuijsf:calendar id="travelDate" 
         selectedDate="#{TravelBean.travelDate}"
         label="#{msgs.travelDate}"
         dateFormatPattern="yyyy-MM-dd"
         dateFormatPatternHelp="#{msgs.dateFormatPattern}"
         minDate="#{TravelBean.tomorrowsDate}"
         maxDate="#{TravelBean.sixMonthsFromNow}" />
 

Example 3: Update Calendar Client Side using the getProps and setProps Functions

This example shows how to toggle the disabled state of a calendar client side using the getProps and setProps functions.

<webuijsf:calendar id="calendar1" label="Start Date:"/>
<webuijsf:button id="button1" text="Toggle Calendar Disabled" onClick="toggleDisabled(); return false"/>

<webuijsf:script>         
   function toggleDisabled() { 
        var domNode = document.getElementById("form1:calendar1"); 
        domNode.setProps({ disabled: !domNode.getProps().disabled });
    }        
</webuijsf:script>

Example 4: Asynchronously Update Calendar Using refresh Function

<webuijsf:calendar id="calendar1" label="#{MyBean.label}"/>
<webuijsf:textField id="field1" text="#{MyBean.label}" label="Change Calendar Label" 
          onKeyPress="setTimeout('refreshCalendar();', 0);"/> // Field used to asynchronously update label.

Use the webuijsf:checkbox tag to display a checkbox in the rendered HTML page. The tag can be used as a single checkbox or as one checkbox among a group of checkboxes. A group of checkboxes represents a multiple selection list which can have any number of checkboxes selected, or none selected. A checkbox can represent a value of a class type such as Boolean, Byte, Character, Double, Float, Integer, Long, Short, String or the primitive form of one of these class types. A checkbox may also re