Le composant af:noteWindow d’ADF (Oracle Application Development Framework) permet grâce au composant af:popup d’afficher une fenêtre lorsque la souris est positionnée sur un champ de la page. L’utilisation la plus courante de ce composant est l’affichage de l’aide contextuelle pour les champs ou les régions d’une page. Définir une noteWindow par champ n’est pas une bonne pratique. Cet article  va exposer la mise en place d’une noteWindow générique qui sera ensuite utilisée pour tous les champs devant afficher une aide contextuelle.

Exemple :

Le principe

Pour chaque composant de la page nécessitant l’affichage d’une noteWindow, il faut affecter à un af:clientAttribute qui sera nommé dans notre exemple « placeHolderField », la valeur qui sera affichée dans la noteWindow. Ici une valeur statique mais qui pourrait aussi bien être une référence à un attribut d’un Backing Bean qui (via une méthode de l’AppModule) effectuerait une lecture en base de données de la valeur à afficher.
Exemple :

 <af:outputText value="Code département" id="ot1" clientComponent="true">
    <af:clientAttribute name="placeHolderField"
        value="Informations complémentaires sur le code département"/>
    <af:showPopupBehavior popupId="generalNoteWindow" triggerType="mouseOver"/>
</af:outputText>

Configuration de la noteWindow générique

 <af:popup id="generalNoteWindow"
        launcherVar="source"
        eventContext="launcher"
        contentDelivery="lazyUncached">
    <af:setPropertyListener from="#{source.attributes.placeHolderField}"
            to="#{helpBean.message}"
            type="popupFetch"/>
    <af:noteWindow id="nw3">
        <af:outputText value="#{helpBean.message}" id="ot26"/>
    </af:noteWindow>
</af:popup>

Il n’est pas possible d’afficher directement dans la noteWindow, le contenu de l’af:clientAttribute « PlaceHolderField ». Pour y arriver, il faut passer un attribut d’un Backing Bean qui sera alimenté par un setPropertyListener défini au niveau de l’af:popup

 <af:setPropertyListener from="#{source.attributes.placeHolderField}"
    to="#{helpBean.message}"
    type="popupFetch"/>

puis affiché via un getter dans l’af:notewindow.

 <af:noteWindow id="nw3">
    <af:outputText value="#{helpBean.message}" id="ot26"/>
</af:noteWindow>

Quelques explications sur les propriétés de l’af:popup

• La propriété launcherVar permet de référencer le composant ayant lancé la Popup et ainsi de retrouver la valeur du clientAttribute (placeHolderField) positionné par le composant appelant (un outputText dans notre exemple)

<af:outputText value="Code employé" ....>
    <af:clientAttribute name="placeHolderField"
        value="Informations complémentaires sur le code employé"/>
    <af:showPopupBehavior .... />
</af:outputText>
<af:popup id="generalNoteWindow"
        launcherVar="source"
        ... >
    <af:setPropertyListener from="#{source.attributes.placeHolderField}"
        ... />
</af:popup>        

Important : Dans la version JDeveloper 11.1.1.6, la propriété « from » de « af:setPropertyListener » apparaît soulignée en jaune indiquant que la référence « source » n’est pas trouvée : ne pas tenir compte de cette alerte.

• La propriété eventContext = « launcher » permet d’exécuter le setPropertyListener avant l’affichage de la noteWindow et ainsi permettre de mettre à jour dans le Backinkg Bean le champ qui sera affiché par l’outputText  de la noteWindow (via l’expression language)

 <af:popup id="generalNoteWindow"
        ...
        eventContext="launcher"
        ...>
    <af:setPropertyListener from="#{source.attributes.placeHolderField}"
        to="#{helpBean.message}"
        type="popupFetch"/>
    <af:noteWindow id="nw3">
        <af:outputText value="#{helpBean.message}" id="ot26"/>
    </af:noteWindow>
</af:popup>

Backing Bean

Ce Backing Bean de type «  »request »  sera uniquement utilisé pour permettre le passage de la valeur à afficher de la popup vers l’outputtext.

 public class HelpBean {
    private String message;
    public HelpBean() {
        super();
    }
    public void setMessage(String nwMessage) {
        this.nwMessage = nwMessage;
    }
    public String getMessage() {
        return nwMessage;
    }    
}

 Page JSPX

 <af:panelGroupLayout id="pgl3" layout="vertical" inlineStyle="margin-left:20px">
    <af:outputText value="Code employé" id="ot2" clientComponent="true">
        <af:clientAttribute name="placeHolderField"
            value="Informations complémentaires sur le code employé"/>
        <af:showPopupBehavior popupId="generalNoteWindow" triggerType="mouseOver"/>
    </af:outputText>
    <af:outputText value="Code département" id="ot1" clientComponent="true">
        <af:clientAttribute name="placeHolderField"
            value="Informations complémentaires sur le code département"/>
        <af:showPopupBehavior popupId="generalNoteWindow" triggerType="mouseOver"/>
    </af:outputText>
    <af:popup id="generalNoteWindow"
            launcherVar="source"
            eventContext="launcher"
            contentDelivery="lazyUncached">
        <af:setPropertyListener from="#{source.attributes.placeHolderField}"
            to="#{helpBean.message}"
            type="popupFetch"/>
        <af:noteWindow id="nw3">
            <af:outputText value="#{helpBean.message}" id="ot26"/>
        </af:noteWindow>
    </af:popup>
</af:panelGroupLayout>