| |||||||
FRAMES NO FRAMES |
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.
In the rendered HTML page, the masthead is created with <table>
elements. The masthead consists of the following areas:
Utility Bar - The masthead's top row, which spans across
the width of the masthead. The utility bar contains links that you
specify with the utilities
attribute or with various
facets. See the Utility Bar section for more
information.
User Info - Displays the name of the user running the
application, which is specified with the userInfo
attribute. By default the label is User
but this can be changed with the userInfoLabel
attribute.
The userInfo
facet can be used to replace both user info
fields with other components.
Server Info - Displays the name of the server where the
application is running, which is specified with the serverInfo
attribute. By default the label is Server,
but this can be changed with the serverInfoLabel
attribute. The serverInfo
facet can be used to replace
both server info fields with other components.
Product Info - Displays the graphic file for the product name,
which is specified with the productImageURL
attribute.
The productImageDescription
attribute is used to provide
text to be used as alt text for the image, and productImageHeight
and productImageWidth
can be used to provide the
dimensions of the image when necessary.
Status Area - Displays system messages, job information,
date/time, and alarm counts by default. These items are specified with
the attributes notificationMsg
, jobCount
, dateTime
,
and alarmCounts
. The status area content can
also be specified with various facets. See the Status
Area section for more information.
Brand Image - Displays the graphic file for a brand for the
application. By default, this is an image that is specified in the
theme, but can be overridden with the brandImageURL
attribute. The brandImageDescription
attribute is used to
provide text to be used as alt text for the image, and brandImageHeight
and brandImageWidth
can be used to provide the dimensions
of the image when necessary.
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
|
|||||||||
User Info userInfo , userInfoLabel attributes or userInfo
facet |
Server Info serverInfo , serverInfoLabel attributes
or serverInfo facet |
(empty) |
Brand ImagebrandImageURL and related attributes, or brandImage
facet |
||||||
Product Info and related attributes, or productInfo
facet |
|||||||||
Status Area
statusArea
facet
|
The content of the Utility Bar can be specified with the following individual facets:
consoleLink -
by default displays an Applications button. This button can
be used to provide a link back to some "home" location, such as an
application launch page, or a main console page.
versionLink -
by default displays a Version button, which can be used to
provide a popup window that displays information about the application
version. You can use the webuijsf:versionPage
tag to display version information in the JSP for the popup window.
search
- displays components that you specify to
provide search capability. You must provide the action method to
perform the search. The theme provides an icon with the key MASTHEAD_SEARCH
that can be used for a search button. See the Examples
for more details about using the search
facet.logoutLink
- by default displays a Logout button, which can be used to
log the user out of the application.
helpLink
- by default displays a Help button, which can be used to
open a popup window that displays help for the application. You can use
the webuijsf:helpWindow tag as a child
of the helpLink
facet to implement the help window.
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.
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.
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 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:<webuijsf:markup tag="div"
styleClass="#{themeStyles.MASTHEAD_STATUS_DIV}">
Sets
padding and alignment for status/progress
information in status area of masthead
<webuijsf:markup tag="div"
styleClass="#{themeStyles.MASTHEAD_TIME_DIV}">
Sets
padding and alignment for time stamp information
in status area of masthead
<webuijsf:markup tag="div"
styleClass="#{themeStyles.MASTHEAD_ALARM_DIV}">
Sets padding
and alignment for alarm information in
status area of
masthead
See the Examples section for sample code
that uses the statusArea
facet.
None.
The examples use the MastheadBean, which is shown after the examples.
<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>
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>
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>
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 Class | com.sun.webui.jsf.component.MastheadTag |
TagExtraInfo Class | None |
Body Content | JSP |
Display Name | None |
Attributes | ||||
Name | Required | Request-time | Type | Description |
binding | false | false | java.lang.String | A ValueExpression that resolves to the UIComponent that corresponds to this tag. This attribute allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children. |
alarmCounts | false | false | java.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. |
rendered | false | false | java.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. |
userInfoLabel | false | false | java.lang.String | The label text to display for the current User information. |
id | false | true | java.lang.String | No Description |
dateTime | false | false | java.lang.String | Set to true to display a date and time stamp in the status area. |
secondary | false | false | java.lang.String | Set to true to indicate that the masthead is to be used in a secondary/popup window. |
styleClass | false | false | java.lang.String | CSS style class(es) to be applied to the outermost HTML element when this component is rendered. |
productImageHeight | false | false | java.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. |
productImageURL | false | false | java.lang.String | The url to the image file to use for the Product Name Image. |
style | false | false | java.lang.String | CSS style(s) to be applied to the outermost HTML element when this component is rendered. |
serverInfoLabel | false | false | java.lang.String | The label text to display for the current Server information. |
serverInfo | false | false | java.lang.String | Text to display for the current Server information, such as the name of the server whose data is being displayed. |
notificationMsg | false | false | java.lang.String | Text to display for the notification info in the status area |
roleInfo | false | false | java.lang.String | Text to display for the current Role information, such as the name of the user who is running the application. |
userInfo | false | false | java.lang.String | Text to display for the current User information, such as the name of the user who is running the application. |
brandImageURL | false | false | java.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. |
utilities | false | false | java.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. |
productImageDescription | false | false | java.lang.String | The description for the product name image, used as alt text for the image. |
brandImageWidth | false | false | java.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. |
visible | false | false | java.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. |
roleInfoLabel | false | false | java.lang.String | The label text to display for the current User information. |
productImageWidth | false | false | java.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. |
brandImageDescription | false | false | java.lang.String | The description to use for the Brand Image, used as alt text for the image. |
jobCount | false | false | java.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. |
brandImageHeight | false | false | java.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. |
| |||||||
FRAMES NO FRAMES |