Inline PopUp with noteWindow (Excellent feature) in Oracle ADF

A very good and flexible component in adf is af:popup. we can use popup in various ways.
Suppose sometimes we need to show short description or some detail about any text ,button on Mouse Hover, then we can use inline PopUp (excellent look and feel)

For this you have to follow these steps-

• Create a page in your bounded taskflow, drag an output text in page for that we are going to show Short Description.
• Drag n drop a pop component in page in which we show description for that output text

• Now drop a noteWindow under popup component 

•  and write your description in source of .jsff page in notewindow component

<af:popup childCreation="deferred" autoCancel="disabled" id="p1">
      <af:noteWindow id="nw1" inlineStyle="width:200px;" autoDismissalTimeout="5">
                       <p><b>Penguins</b> <b><font color="maroon">(order Sphenisciformes, family Spheniscidae)
                       are a group of aquatic, flightless birds living almost
                       exclusively in the southern hemisphere, especially in
                       Antarctica.</font></b> <b><font color="Green"> adapted for life in the water, penguins
                       have countershaded dark and white plumage, and their wings
                       have evolved into flippers</font></b></p>
      </af:noteWindow>
    </af:popup>

• Drag showPopupBehavior inside output text for that you have to show that popUp

• Now pass popup id in showPopupBehavior and set trigger type to mouseHover 

• Run your page and see how it look-- It is just awesome
  
  
   
  And this is very good that you can show graphs, tables and other information on this type of inline popUp 
  You can find sample application here- Download Sample Application
  
  

PopUp component in Oracle ADF, Use showPopUpBehavior/JavaScript to show PopUp

In this tutorial we will see that how to deal with PopUp component in Oracle ADF.
Suppose we want to show popUp on any button click or on any other action, then there is 2 way to do this.

First one is-

1. Drag a PopUp component on page from Component Pallette

2. Now Drag a Button on page and drag af:showPopupBehavior under the button

3.Select af:showPopupBehavior at page structure and go to property Inspector and pass tha popUp id and trigger type of Popup that you want to show on button click.

  

5. Now run your page and click on Button and you will able to see Popup

Second One is-



In this you have to do some code in Managed Bean, you have to call a method on button click to show Popup

Method to show Popup-

    private void showPopup(RichPopup pop, boolean visible) {
        try {
            FacesContext context = FacesContext.getCurrentInstance();
            if (context != null && pop != null) {
                String popupId = pop.getClientId(context);
                if (popupId != null) {
                    StringBuilder script = new StringBuilder();
                    script.append("var popup = AdfPage.PAGE.findComponent('").append(popupId).append("'); ");
                    if (visible) {
                        script.append("if (!popup.isPopupVisible()) { ").append("popup.show();}");
                    } else {
                        script.append("if (popup.isPopupVisible()) { ").append("popup.hide();}");
                    }
                    ExtendedRenderKitService erks =
                        Service.getService(context.getRenderKit(), ExtendedRenderKitService.class);
                    erks.addScript(context, script.toString());
                }
            }
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

Now we call it on button click, and pass the binding of Popup in it
as we have Popup with binding AddPop then on Button click we call this method as

1. showPopup(Addpop, true);