webuijsf
Tag masthead


Use the webuijsf:masthead tag to display a masthead, or page banner, at the top of each rendered HTML page of the web application. The masthead can be used to display information about the application, the current user and server, and include various links and status information. If you use the image attributes of this tag and the images are PNG file type, then you must set the height and width attributes of this tag for them to display properly on Internet Explorer.

The webuijsf:masthead tag must be used as a child of the webuijsf:form tag.

The webuijsf:mastFooter tag is intended to be used in pages that use the masthead, to provide a matching footer that contains the corporate branding image.

HTML Elements and Layout

In the rendered HTML page, the masthead is created with <table> elements. The masthead consists of the following areas:

The following diagram shows the locations of the masthead areas, and the attributes and facets you can use to provide the content for each area.

Utility Bar  utilityBar facet
consoleLink
facet
versionLink
facet
search facet
 Links specified with utilities attribute  logoutLink
facet
helpLink
facet
User Info
userInfo, userInfoLabel attributes or userInfo facet
Server Info
serverInfo, serverInfoLabel attributes or serverInfo facet
(empty)
Brand Image
brandImageURL and related attributes, or brandImage facet
Product Info
productImageURL
and related attributes, or productInfo facet
Status Area  statusArea facet
notificationMsg attribute
notificationInfo facet
jobCount attribute
jobsInfo facet
dateTime attribute
dateTimeInfo facet
 alarmCounts attribute
currentAlarmsInfo facet 

Utility Bar

The content of the Utility Bar can be specified with the following individual facets:

The child components of the facets can override the labels of the buttons by specifying their own text values.

These facets can be used along with the utilities attribute, which specifies additional custom links to display in the utility bar. The utilities attribute must be bound to an array of Hyperlink components. If no style has been set on the hyperlinks bound to the utilities attribute, the masthead component applies styles that are used for the Logout and Help links. The links that you specify with the utilities attribute are displayed to the left of the Logout and Help buttons.

utilityBar Facet

The Utility Bar content can also be specified with the utilityBar facet, which overrides all other attributes and facets supported for the Utility Bar area. If you want to specify more than one component in the utilityBar facet, you must enclose the component tags in a container such as the webuijsf:panelGroup tag.

Status Area

The Status Area can display the status items shown in the following table. Each status item can be configured with an attribute of the webuijsf:masthead tag, or a facet, or as a component in the statusArea facet. The attributes provide the default display of the status items, and adhere to UI guidelines. The individual facets allow you to customize an individual status item, while using the attributes for other status items to obtain the default display style. You can use the statusArea facet to customize the entire status area, by adding your own custom tags in the facet. See the statusArea Facet section for more information.

Status items Attributes Individual Facets Components in statusArea facet
A notification message notificationMsg notificationInfo webuijsf:notificationPhrase
The number of jobs running jobCount

jobsInfo webuijsf:jobStatus
The current date and time dateTime

dateTimeInfo webuijsf:timeStamp
The current number of down, critical, major and minor alarms alarmCounts

currentAlarmsInfo webuijsf:alarmStatus

statusArea Facet

The statusArea facet overrides all the attributes and individual facets for the status items. In addition to your own tags, you can use component tags in the statusArea facet to add functionality that is similar to functionality provided by the attributes. If you want to specify more than one component in the statusArea facet, you must enclose the component tags inside a container such as the webuijsf:panelGroup tag. You should also enclose the components within <div> tags to specify a class selector that properly sets the spacing around the components within the masthead.  For example:

See the Examples section for sample code that uses the statusArea facet.

Theme Identifiers

See the Theme package javadoc for the constants that can be used to specify masthead theme elements.

Client Side Javascript Functions

None.

Examples

The examples use the MastheadBean, which is shown after the examples.

Example 1:  Create a masthead using individual facets for links in the Utility Bar

This example uses the utility bar facets to add UI-guideline compliant links to the top of the masthead.
  <webuijsf:page>
    <webuijsf:html>
        <webuijsf:head id="foo" title="Foo Page" />
        <webuijsf:body>
            <webuijsf:form id="form1">
                <webuijsf:masthead id="Masthead" productImageURL="../images/webconsole.png"
                 productImageDescription="Java Web Console" productImageHeight="40"
                 productImageWidth="165" userInfo="user_name" serverInfo="server_name"
                 jobCount="0" dateTime="true" notificationMsg="Beer is good"                
                 alarmCounts="#{MastheadBean.alarms}">
                    <f:facet name="helpLink">
                      <webuijsf:hyperlink action="#{MastheadBean.helpClicked}" />
                    </f:facet>
                    <f:facet name="consoleLink">
                      <webuijsf:hyperlink action="#{MastheadBean.consoleClicked}" />
                    </f:facet>
                    <f:facet name="versionLink">
                      <webuijsf:hyperlink action="#{MastheadBean.versionClicked}" />
                    </f:facet>
                    <f:facet name="logoutLink">
                      <webuijsf:hyperlink action="#{MastheadBean.logoutClicked}" />
                    </f:facet>
                </webuijsf:masthead>
             </webuijsf:form>
       </webuijsf:body>
    </webuijsf:html>
</webuijsf:page>

Example 2: Create a masthead using the statusArea facet 

This example uses webuijsf:panelGroup to enclose the tags for the status items. The components are also enclosed in webuijsf:markup tags that specify <div> elements with a class selector that applies the correct spacing around the component in the masthead.

<webuijsf:page>
    <webuijsf:html>
        <webuijsf:head id="foo" title="Foo Page" />
        <webuijsf:body>
            <webuijsf:form id="form1">
               <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>
             </webuijsf:form>
       </webuijsf:body>
    </webuijsf:html>
</webuijsf:page>

Example 3: Create a masthead with custom links and search capability in the Utility Bar

This example shows how to create custom links in the utility bar, along with the links produced with the facets. This example also shows how you might add search with the search facet, and use the versionLink facet to open a version popup page. 

<webuijsf:page>
    <webuijsf:html>
       <webuijsf:head id=foo title="Foo Page"/>
       <webuijsf:body>
            <webuijsf:form id="form1">
            <webuijsf:masthead id="Masthead" productImageURL="../images/webconsole.png"
                 productImageDescription="Java Web Console" userInfo="user_name"
                 serverInfo="server_name" jobCount="0" dateTime="true"
                 notificationMsg="Beer is good" utilities="#{MastheadBean.links}"
                 alarmCounts="#{MastheadBean.alarms}">                
              
               <f:facet name="helpLink">
                 <webuijsf:hyperlink action="#{MastheadBean.helpClicked}" />
               </f:facet>              
               <f:facet name="consoleLink">
                 <webuijsf:hyperlink action="#{MastheadBean.consoleClicked}" />
               </f:facet>
               <f:facet name="search">
                 <webuijsf:panelGroup >
                  <webuijsf:textField id="searchText"
                                     text="#{MastheadBean.searchCriteria}"/>

                  <webuijsf:button icon="MASTHEAD_SEARCH" id="searchButton"
                                   text="Search" style="vertical-align:bottom"
                                   actionExpression="#{MastheadBean.doSearch}" />
                 </webuijsf:panelGroup>
               </f:facet>              
               <f:facet name="versionLink">
                 <webuijsf:hyperlink  toolTip="Display Product Version. (Opens a new window)"
                                onClick="javascript: var versionWin = window.open('../faces/version/version.jsp','VersionWindow','scrollbars,resizable,width=650,height=500,top='+((screen.height - (screen.height/1.618)) - (500/2))+',left='+((screen.width-650)/2) ); versionWin.focus()" />
               </f:facet>
               <f:facet name="logoutLink">
                 <webuijsf:hyperlink action="#{MastheadBean.logoutClicked}" />
               </f:facet>
               <f:facet name="userInfo">
                 <webuijsf:hyperlink text="user_name" styleClass="#{themeStyles.MASTHEAD_USER_LINK}" action="#{MastheadBean.userClicked}" />
               </f:facet>
               <f:facet name="serverInfo">
                 <webuijsf:hyperlink text="s" styleClass="#{themeStyles.MASTHEAD_USER_LINK}" action="#{MastheadBean.serverClicked}" />
               </f:facet>
            </webuijsf:masthead>   
          </webuijsf:form>
       </webuijsf:body>
    </webuijsf:html>
</webuijsf:page>

MastheadBean used in the examples

import com.sun.webui.jsf.component.Hyperlink;
import com.sun.webui.jsf.component.DropDown;
import com.sun.webui.jsf.model.Option;

import javax.el.MethodExpression;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.AbortProcessingException;

import util.JSFUtilities;

/**
 *
 * @author Administrator
 */
public class MastheadBean{   
    String message = "foobar";
    Hyperlink[] links = null;
    int[] alarms = new int[] {1, 2, 3, 4};
    String selectedItem = "view1";
    private Option[] views = null;
    String helpText = "This very, very, very, very, very, very, very, very, " +
        "very, very, very, very, very, very, very, very, very, very, very " +
        "very, very, long help text sentence should line wrap.";
   
    /** Creates a new instance of JumpBackingBean */
    public MastheadBean() {

        links = new Hyperlink[2];

    FacesContext context = FacesContext.getCurrentInstance();
       
        links[0] = new Hyperlink();
        links[0].setText("One");
        //links[0].setUrl("#");      
    JSFUtilities.setMethodExpression(links[0], "actionExpression",
        "#{MastheadBean.extraOneClicked}");

    //
        links[1] = new Hyperlink();
        links[1].setText("Two");
        //links[1].setUrl("#");       
    JSFUtilities.setMethodExpression(links[1], "actionExpression",
        "#{MastheadBean.extraTwoClicked}");
       
       
        views = new Option[3];
        views[0] = new Option("view1", "View 1");
        views[1] = new Option("view2", "View 2");
        views[2] = new Option("view3", "View 3");

    /*
    for (Option view : views) {
        JSFUtilities.setMethodExpression(view, "actionExpression",
        "#{MastheadBean.viewChanged}");
    }
    */
    }
   
    public String getSelectedItem() {
        return selectedItem;
    }
   
    public void setSelectedItem(String s) {
        selectedItem = s;
    }
   
    public String getHelpText() {
        return helpText;
    }
   
    public Option[] getViews() {
        return views;
    }
   
    public String getMessage() {
        return message;
    }
   
    public void setMessage(String msg) {
        message = msg;
    }   
   
    public Hyperlink[] getLinks() {
        return links;
    }
   
    public void setLinks(Hyperlink[] links) {
        this.links = links;
    }
   
    public int[] getAlarms() {
        return alarms;
    }
   
    public void setAlarms(int[] alarms) {
        this.alarms = alarms;
    }
   
    public String extraOneClicked() {       
        message = "Extra link one was clicked";
        return "";
    }
   
    public String extraTwoClicked() {
        message = "Extra link two was clicked";
        return "";
    }
   
    public String consoleClicked() {
        message = "Console link was clicked";
       
        return "";
    }
   
    public String versionClicked() {
        message = "Version link was clicked";
       
        return "";
    }
   
    public String logoutClicked() {
        message = "Logout link was clicked";
       
        return "";
    }
   
    public String helpClicked() {
        message = "Help link was clicked";
       
        return "";
    }
   
    public String userClicked() {
        message = "User link was clicked";
       
        return "";
    }
   
    public String serverClicked() {
        message = "Server link was clicked";
       
        return "";
    }
   
    public String saveClicked() {
       
        System.out.println("Save clicked");
       
        message = "Save page button was clicked";
       
        return "";
    }
   
    public String resetClicked() {
        message = "Reset page button was clicked";
       
        return "";
    }
   
    public String action1Clicked() {
        message = "Page action 1 was clicked";
       
        return "";
    }
   
    public String action2Clicked() {
        message = "Page action 2 was clicked";
       
        return "";
    }
   
    public String action3Clicked() {
        message = "Page action 3 was clicked";
       
        return "";
    }
   
    public String viewChanged() {
        message = "View menu was changed";
       
        return "";
    }
   
    private String searchCriteria = "*";
   
    public String getSearchCriteria() {
        return searchCriteria;
    }
   
    public void setSearchCriteria(String s) {
        searchCriteria = s;
    }
   
    public String doSearch() {
        System.out.println("doSearch called");
        message = "Search was clicked with criteria " + searchCriteria;
       
        return "";
    }
   
    public void menuChanged(ActionEvent e) throws AbortProcessingException {
        UIComponent c = e.getComponent();
       
        DropDown menu = (DropDown) c;
       
        message = "View menu was changed to value " + menu.getValue();
    }
}


Tag Information
Tag Classcom.sun.webui.jsf.component.MastheadTag
TagExtraInfo ClassNone
Body ContentJSP
Display NameNone

Attributes
NameRequiredRequest-timeTypeDescription
bindingfalsefalsejava.lang.String A ValueExpression that resolves to the UIComponent that corresponds to this tag. This binding allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children.
alarmCountsfalsefalsejava.lang.String

A JavaServer Faces EL expression that resolves to a backing bean or a backing bean property that is an array of integers that specify the down, critical, major, and minor alarm counts.

renderedfalsefalsejava.lang.String Use the rendered attribute to indicate whether the HTML code for the component should be included in the rendered HTML page. If set to false, the rendered HTML page does not include the HTML for the component. If the component is not rendered, it is also not processed on any subsequent form submission.
userInfoLabelfalsefalsejava.lang.String

The label text to display for the current User information.

idfalsetruejava.lang.StringNo Description
dateTimefalsefalsejava.lang.String

Set to true to display a date and time stamp in the status area.

secondaryfalsefalsejava.lang.String

Set to true to indicate that the masthead is to be used in a secondary/popup window.

styleClassfalsefalsejava.lang.String

CSS style class(es) to be applied to the outermost HTML element when this component is rendered.

productImageHeightfalsefalsejava.lang.String

The height to use for the Product Name Image, in pixels. For mastheads that are used in secondary windows, you might need to specify the productImageHeight and productImageWidth for correct display on Internet Explorer.

productImageURLfalsefalsejava.lang.String

The url to the image file to use for the Product Name Image.

stylefalsefalsejava.lang.String

CSS style(s) to be applied to the outermost HTML element when this component is rendered.

serverInfoLabelfalsefalsejava.lang.String

The label text to display for the current Server information.

serverInfofalsefalsejava.lang.String

Text to display for the current Server information, such as the name of the server whose data is being displayed.

notificationMsgfalsefalsejava.lang.String

Text to display for the notification info in the status area

roleInfofalsefalsejava.lang.String

Text to display for the current Role information, such as the name of the user who is running the application.

userInfofalsefalsejava.lang.String

Text to display for the current User information, such as the name of the user who is running the application.

brandImageURLfalsefalsejava.lang.String

The url to the image file to use as the Brand Image. Use this attribute to override the brand image that is set in the theme.

utilitiesfalsefalsejava.lang.String

A JavaServer Faces EL expression that resolves to a backing bean or a backing bean property that is an array of one or more custom Hyperlink components to display in the utility bar. The Hyperlink components must be given ids.

productImageDescriptionfalsefalsejava.lang.String

The description for the product name image, used as alt text for the image.

brandImageWidthfalsefalsejava.lang.String

The width to use for the Brand Image, in pixels. Use this attribute when specifying the brandImageURL, along with the brandImageHeight attribute, to specify dimensions of PNG images for use in Internet Explorer.

visiblefalsefalsejava.lang.String

Use the visible attribute to indicate whether the component should be viewable by the user in the rendered HTML page. If set to false, the HTML code for the component is present in the page, but the component is hidden with style attributes. By default, visible is set to true, so HTML for the component HTML is included and visible to the user. If the component is not visible, it can still be processed on subsequent form submissions because the HTML is present.

roleInfoLabelfalsefalsejava.lang.String

The label text to display for the current User information.

productImageWidthfalsefalsejava.lang.String

The width to use for the Product Name Image, in pixels. For mastheads that are used in secondary windows, you might need to specify the productImageHeight and productImageWidth for correct display on Internet Explorer.

brandImageDescriptionfalsefalsejava.lang.String

The description to use for the Brand Image, used as alt text for the image.

jobCountfalsefalsejava.lang.String

The number of currently executing jobs or tasks. A JavaServer Faces EL expression that resolves to a backing bean or a backing bean property that is an integer.

brandImageHeightfalsefalsejava.lang.String

The height to use for the Brand Image, in pixels. Use this attribute along with the brandImageWidth attribute to specify dimensions of PNG images for use in Internet Explorer.


Variables
No Variables Defined.


Output Generated by Tag Library Documentation Generator. Java, JSP, and JavaServer Pages are trademarks or registered trademarks of Sun Microsystems, Inc. in the US and other countries. Copyright 2002-4 Sun Microsystems, Inc. 4150 Network Circle Santa Clara, CA 95054, U.S.A. All Rights Reserved.