The Window component can be added by placing the <o:window> tag onto the page and placing the window content components inside of that tag. The window's caption can be specified using the caption attribute for text captions or the "caption" facet for more complex caption content. Window visibility can be configured in two ways:
In the following example clicking a button shows a simple window using the show() client-side function.
<h:form id="form"> <input type="button" value="Show Window" onclick="O$('form:window').show();"/> <o:window id="window"> <f:facet name="caption"> <h:outputText value="Window Caption"/> </f:facet> <h:outputText value="Window Content"/> <o:window> </h:form>
The window that is shown in this example displays a caption with the caption buttons on the right that allow minimizing, maximizing and closing the window. The look and set of buttons can be customized as can be seen in the Customizing Caption Buttons section below.
The window's size and pisition can be customized with the width/height and top/left attributes respectively. By default, the window is displayed with a resizing capability, which means that the user can change window's size by dragging its edges and corners. The window can be made non-resizable by assigning false to its resizable attribute. The minimum window size during resizing is defined by the minWidth and minHeight attributes.
Analogously, there's the draggable attribute that can be used to make it impossible for the user to move the window. Note also that one more attribute is also applicable for draggable windows: specifying true in the draggableByContent attribute allows the window to be dragged not just by its caption but by the content area as well.
The visible window can be automatically dismissed when the user clicks outside of the component. This behavior is turned off by default and you can enable it by setting the hideOnOuterClick attribute to "true".
You can specify the Window component to be shown in a modal state by setting its modal attribute to "true". When this attribute is set this way and a window is shown (either using the client-side or server-side API) it is shown in the modal state, which means that all other components on the page are inaccessible until the window is closed. This behavior is often required for displaying modal dialogs in the application.
You can apply a style to the visible part of the page which is not covered by a modal window using the modalLayerStyle and modalLayerClass attributes. Note that this style is applied only if the modal attribute is set to "true". The following example defines a modal window with its modal layer filled with gray color:
<o:window modal="true" modalLayerStyle="background-color: silver;" ...> ... </o:window>
By default, the modal Window can can be closed by pressing the Esc key. This behavior can be turned off by setting the hideOnEsc attribute to false.
By default the Window component displays the close button on the right side of its caption, along with minimize/maximize buttons in case of a resizable window, though a flexible way of customizing caption buttons is provided. Here are some of the scenarios that can be addressed:
The basis for these customizations is the <o:captionArea> tag, which can be placed into the <o:window> tag to customize the set of buttons displayed in the caption. This tag has an alignment attribute, which defines the caption side where the area should be placed. It can take two values: "right" (the default value), and "left".
Adding the <o:captionArea> tag removes the default minimize/maximize/close buttons and allows you to customize the set of buttons by placing components inside of this tag. It is possible to place the following components into caption area tags:
All of the button tags listed above have the following common attributes:
In addition they have the following attributes of their own.
For <o:closeWindowButton> and <o:captionButton> tags:
In addition to these attributes, the <o:captionButton> tag has the action attribute that specifies a server action that should be executed when the button is pressed, similar to the action attribute of the standard <h:commandButton> tag or the <o:commandButton> tag. In addition, like in the <o:commandButton> tag, it is possible to use built-in Ajax capabilities in the <o:captionButton> tag with the render and execute attributes (see the CommandButton documentation for details on using these attributes.
Here's an example of specifying a window closing button with a custom image and a hint:
<o:window ...> <o:captionArea> <o:minimizeWindowButton imageUrl="close.gif" hint="Close"/> <o:maximizeWindowButton imageUrl="close.gif" hint="Close"/> <o:closeWindowButton imageUrl="close.gif" hint="Close"/> <o:captionArea> ... </o:window>
You can also place more than one <o:captionArea> tags, which allows specifying custom areas on both caption sides.
All client-side API methods are listed in the following table:
|© 2010 TeamDev Ltd.|