webuijsf
Tag bubble


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

None.

Theme Identifiers

None.

Client-Side JavaScript Functions

The bubble component exposes two JavaScript functions "open()" and "close()". "open()" accept "event" as argument. These two functions needs to be invoked by the component that requires a bubbleHelp. When the bubble component is rendered, a DOM object corresponding to the bubble component is created. To manipulate the component on the client side, you can call functions on the DOM object. With reference to the DOM ID, to change the helpTitle, invoke document.getElementById(id).setProps({helpTitle: "New Help Title"}).

JavaScript Function Description
open(event) Use this function to open the bubble component.
  • event: JavaScript Event object generated by the onClick of an HTML element.
close() Use this function to close bubble component.
getProps() Use this function to get widget properties. Please 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:
  • autoClose
  • contents
  • duration
  • id
  • title
  • width
  • style
  • styleClass
  • visible

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. Using the Dojo event system, you can instruct Ajax to listen for the refresh event topic by using:

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

    // Subscribe to refresh event.
    dojo.subscribe(webui.suntheme.widget.bubble.event.<eventname>.endTopic, processEvents, "update");


</webuijsf:script>

The following events are supported.

Event Description
webui.suntheme.widget.bubble.event.refresh.beginTopic Event topic published before asynchronously refreshing the component. Supported properties include:
  • [optional] execute - list of the components to be executed along with this component
  • id - The client ID to process the event for
webui.suntheme.widget.bubble.event.refresh.endTopic Event topic published after asynchronously refreshing the component. Supported properties include: setProps() function.
  • props - JSON object containing properties of the component. See setProps() function for details on properties and their usage

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>


Tag Information
Tag Classcom.sun.webui.jsf.component.BubbleTag
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 attribute allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children.
htmlTemplatefalsefalsejava.lang.String Alternative HTML template to be used by bubble component.
focusIdfalsefalsejava.lang.String

focusId is use to set the focus to the one of the elements inside bubble. By default focus is set to bubble header.

openDelayfalsefalsejava.lang.String

Use to put a delay in ms before opening the bubble.

styleClassfalsefalsejava.lang.String

CSS style class or classes to be applied to the outermost HTML element when this component is rendered.

widthfalsefalsejava.lang.String

Number of pixels for the width of the bubble help window. The default is 200px.

titlefalsefalsejava.lang.String

Text for popup help title.

autoClosefalsefalsejava.lang.String

Use to close the bubble help automatically

visiblefalsefalsejava.lang.String

Use 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 false, so HTML for the component HTML is included and not visible to the user. If the component is not visible, it can still be processed on subsequent form submissions because the HTML is present.

stylefalsefalsejava.lang.String

CSS style or styles to be applied to the outermost HTML element when this component is rendered.

closeButtonfalsefalsejava.lang.String

Use to display close button for bubble.

tabIndexfalsefalsejava.lang.String

This tabIndex value is used for making bubble component accessible. The value must be one higher than the last tabIndex value provided to the bubble body element.

durationfalsefalsejava.lang.String

Number of milli-seconds after which pop-up help window should close. The default is 2000 milliseconds.

valuefalsefalsejava.lang.StringNo Description
converterfalsefalsejava.lang.String The converter attribute is used to specify a method to translate native property values to String and back for this component. The converter attribute value must be one of the following:
  • A JavaServer Faces EL expression that resolves to a backing bean or bean property that implements the javax.faces.converter.Converter interface; or
  • the ID of a registered converter (a String).
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.
idfalsetruejava.lang.StringNo Description

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.