Boîtes de dialogue modales

Le contrôle Boîte de dialogue affiche un contenu dynamique et accepte les entrées dans une boîte de dialogue modale.

Le contenu de la boîte de dialogue est défini sous forme de contrôles enfant. Les contrôles ne sont pas créés réellement tant que la boîte de dialogue n'est pas affichée. De meilleures performances sont ainsi garanties, car initialement, aucun contrôle n'est créé et aucune source de données n'est ouverte.

Définition de la boîte de dialogue

Le contenu de la boîte de dialogue est défini de la même manière que tout autre contenu XPages et peut accéder au contenu en cours.
Boîte de dialogue modale
La boîte de dialogue ci-dessus, par exemple, se trouve sur une ligne de vue. Elle accède à l'identificateur note courant ou à la ligne afin d'ouvrir le document :
<xe:dialog id="inPlaceDialog1" title="Editer l'utilisateur" >
  <xp:panel>
    <xp:this.data>
      <xp:dominoDocument
        var="document1" formName="Contact" action="editDocument"
        documentId="#{ javascript:row.getNoteID() }"
        ignoreRequestParams="true" >
      </xp:dominoDocument>
    </xp:this.data>

Affichage de la boîte de dialogue

Une boîte de dialogue modale est déclenchée par une action côté client avec la méthode suivante :
XSP.openDialog('#{id:inPlaceDialog1}')

Lorsque cette méthode est appelée, une demande Ajax est soumise au serveur pour créer le contenu de la boîte de dialogue dans l'arborescence JSF. Une fenêtre de boîte de dialogue Dojo est créée et affiche le résultat de l'appel Ajax.

Implémentation du bouton OK

Un bouton OK doit être implémenté en tant que bouton standard (et non en tant que bouton de soumission) avec deux actions simples :
Bouton OK pour l'affichage de la boîte de dialogue modale
La première action sauvegarde les sources de données et la deuxième action exécute le script suivant :
var c = getComponent("inPlaceDialog1")
c.hide()

En général, un événement de bouton actualise partiellement une autre partie de la page. Ce comportement se vérifie en particulier lorsque l'utilisateur clique sur le bouton OK, car cela signifie que certaines données ont été modifiées, et la page doit refléter les changements. Malheureusement, il ne suffit pas de définir la cible d'actualisation partielle onclick du bouton, car la boîte de dialogue ne doit pas être fermée, ni l'actualisation survenir, si l'action OK n'a pas été exécutée correctement (après un échec de validation par exemple). Dans ce cas, la boîte de dialogue doit être actualisée.

La solution est fournie par une version étendue de la méthode hide(), qui admet des paramètres supplémentaires, comme le composant à actualiser après la fermeture de la boîte de dialogue :
var c = getComponent("inPlaceDialog1")
c.hide("repeat1")

Le premier paramètre est l'identificateur du contrôle à actualiser. Il peut également préciser une mappe de paramètres à utiliser lors de l'émission de la demande d'actualisation partielle, dans certains cas.

Notez que la méthode hide() génère du code côté client qui ferme la boîte de dialogue et en option, exécute une actualisation partielle. Les contrôles JSF sont aussi supprimés correctement de l'arborescence JSF.

La boîte de dialogue peut également être fermée par l'utilisateur si celui-ci clique sur le bouton de fermeture dans la barre de titre de la boîte de dialogue. Dans ce cas, aucune demande n'est envoyée au serveur et les contrôles de boîte de dialogue demeurent dans l'arborescence. Ils sont supprimés automatiquement à l'affichage suivant de la page.