Requirement: Let us assume we have an outputText om the ADF page. Now, the moment we hover the mouse over the outputText, it should immediately show details or description as a popup. Also, I want to automatically dismiss the popup after 5 seconds of its launch. Here we will use the noteWindow component.

Explanation: A note window is a layer that contains read-only information associated with a particular UI component. Note windows are used to display help and messages. Note windows are commonly shown on mouse over or on focus. Note windows are always attached to their associated component and cannot be manually re-positioned. The af:noteWindow must be used with the af:popup component and is required to be the immediate child of the af:popup. The note window is shown using the af:showPopupBehavior tag or programmatically using the client and server popup APIs.

The default auto-dismissal behavior of a af:noteWindow is like that of the af:menu but is also influenced by the trigger type (mouseHover) when using the af:showPopupBehavior tag. If focus leaves from the content of the popup or from the launching source, it’s automatically canceled. The default auto-dismissal behavior can be overridden using the autoDismissalTimeout property of the noteWindow. A common usecase for using this property is when a noteWindow is used to communicate general information that is not associated directly with the state of an input component but still aligned to some status indicator within the page.

To know more on af:noteWindow click here.

Solution: For solution of the above requirement follow the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application. Create a demo.jspx page inside the ViewController project of the application.

Step 2: Drag and drop an af:outputText inside the page. Set the value=”What is a noteWindow?”

Drag and drop an af:popup. Set autoDismissalTimeout=”5″. The autoDismissalTimeout property value of 5 will automatically close the popup after 5 seconds of its launch.

Drag and drop af:showPopupBehavior inside the af:outputText and set popupId=”p1″ and triggerType=”mouseHover”

Drag and drop af:noteWindow inside the af:popup. Set the inlineStyle=”width:300px;”

Write some content inside the af:noteWindow

Thus, the complete code for demo.jspx is shown below:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
          xmlns:af="">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo" id="d1">
            <af:form id="f1">
                <af:outputText value="What is a noteWindow?" id="ot1">
                    <af:showPopupBehavior popupId="p1" triggerType="mouseHover"/>
                </af:outputText>
                <af:popup childCreation="deferred" autoCancel="disabled" id="p1" autoDismissalTimeout="5">
                    <af:noteWindow id="nw1" inlineStyle="width:300px;">
                        <p style="color:red;">A note window is a layer that contains read-only information associated
                                               with a particular UI component. Note windows are used to display help and
                                               messages. Note windows are commonly shown on mouse over or on focus. Note
                                               windows are always attached to their associated component and cannot be
                                               manually repositioned. The <b>af:noteWindow</b> must be used with the <b>af:popup</b>
                                               component and is required to be the immediate child of the af:popup. The
                                               note window is shown using the <b>af:showPopupBehavior</b> tag or
                                               programmatically using the client and server popup APIs.</p>
                    </af:noteWindow>
                </af:popup>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Save all and run the application. Thus, the ran application is shown below.

Hover on the outputText, and we can see the description about the outputText as shown below.

If you notice, it will automatically close the popup after 5 seconds of its launch.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 527 total views,  1 views today