Sometimes we need popup at the exact place of the page.
For example, when you want to develop a nice and user-friendly tutorial (like in our product FormADFApp)
The user had to be led throughout various UI components and regions.
In order to decorate the components with description popup you can use af:noteWindow
We create one shared popup that can be launched from everywhere and we just control its position.
Here is the popup:
<af:popup id=”noteWindow” contentDelivery=”lazyUncached” eventContext=”launcher” launcherVar=”source” binding=”#{pageFlowScope.mainBean.notesPopup}”> <af:noteWindow inlineStyle=”width:200px” id=”nw3″> <p>This is how you use the panel tabbed component</p> </af:noteWindow> </af:popup>And here is how we place it after/over/next to component:
[java]
public void onTabBtnClick(ActionEvent actionEvent) {
FacesContext context = FacesContext.getCurrentInstance();
UIComponent source = (UIComponent)BINDING-OF-DESIRED-COMPONENT;
String alignId = source.getClientId(context);
RichPopup.PopupHints hints = new RichPopup.PopupHints();
hints.add(RichPopup.PopupHints.HintTypes.HINT_ALIGN_ID,source)
.add(RichPopup.PopupHints.HintTypes.HINT_LAUNCH_ID,source)
.add(RichPopup.PopupHints.HintTypes.HINT_ALIGN,
RichPopup.PopupHints.AlignTypes.ALIGN_OVERLAP);
notesPopup.show(hints);
}
[/java]
Changing the RichPopup.PopupHints.AlignTypes constant gives you flexibility to put the popup everywhere you want – you can choose from pretty much every possible position
Have fun placing popups all around the Oracle ADF screens and forms!
