Depuis plusieurs années, la technologie Xpages a fait son apparition. Elle permet de webiser ou créer des applications web intégrant nativement la technologie Web2.0.
Certains clients n'ont pas franchi le pas mais veulent quand même des applis notes web de plus en plus dynamiques, que ce soit ergonomique-ment ou fonctionnellement parlant.
Dans cet article, nous présenterons une façon d’aborder la technologie Web2.0.
Pour cela nous allons utiliser les fichiers « Prototype.js » (version 1.5.0), associés à « Scriptaculous » (version 1.7.0).
Ces 2 versions sont compatibles entre elles.
Des versions plus récentes sont sur la toile mais pour cela, il va falloir que vous adaptiez votre code (JS, lotus script).
Une base d'exemple sera rattachée à l’article, pour récupérer les fichiers JS et exemples de codes.
Exemples - Web2.0 (Ex_web2-0.nsf)
Lien fichier : Ex_web2-0
1/ INSTALLATION DES COMPOSANTS ET PARAMÉTRAGE
Ouvrez votre base à webiser et la base exemple dans le designer
Tout le code à copier/coller se trouve dans le masque fWeb2
- Copiez/ collez les sous-masques « JS - prototype.js » et « JS - scriptaculous.js » dans la catégorie "Subforms"
- Copiez/ collez l' image ajax-loader-ptf.gif
- Copiez/ collez les sous-masques intégrés dans le masque à webiser.
- Copiez/ collez le bloc des Champs Cachés
A modifier suivant le nom des Champs de votre appli.
- Copiez / Collez l'appel de la fonction loadPage() dans le "onLoad"
- Copiez / Collez la fonction loadPage() dans le "JS Header" ainsi que tout le code (AutoCompletion, liste interdependante, etc...)
- Copiez / Collez le bloc "HTML Head Content"
Toutes ces variables ne sont pas obligatoires mais s'avèrent toujours utiles.
Remplacez le caractère joker "£" par un retour chariot permet une bonne lisibilité à l'affichage du code source de la page.
Maintenant nous allons détailler pas à pas comment mettre en place des listes interdépendantes sans recharger la page comme nativement en Notes.
2/ MISE EN PLACE LISTES INTERDÉPENDANTES AJAX
Dans notre exemple nous avons créé un formulaire de tests comprenant :
Dans le formulaire exemple se trouve tout le code source définit dans le point 1)
Nous avons créé un champ Région de type Dialog list avec une formule simple @dbcolumn
temp:=@Unique(@DbColumn("";"":"";"vRegion"));
@If(@IsError(temp);"";"":Temp + "|" + "" : temp)
Sur ce champ :
onChange
updateDepartement();
$("Departement").value = "";
HTML Attributes
"id=\"Region\""
Important ! Si on omet d'affecter un id à l'objet on ne pourra pas l'instancier avec le Prototype.
Ecrire le code HTML suivant où sera stocké la liste déroulante des départements sans omettre de passer le code en Pass-Thru HTML
<div id="divSelectDepartement" style="font-family:Arial, Helvetica, sans-serif;color:#003476;font-size:11px;font-weight:bold;">Sélectionnez une région</div>
<Computed Value>
<span id="loaderSelectDepartement" style="display: none"><img src="<Computed Value>/ajax-loader-ptf.gif" alt="En cours / Working ..." /></span>
Ce code est toujours le même pour n'importe quelle liste dépendante d'une autre. Il faut bien sûr ne modifier que le nom des objets.
Pour l'instant rien de bien compliqué !
Il faut maintenant charger l'objet au onLoad de la page mais seulement en mode Edit. Vous comprenez maintenant l'importance des variables définies dans le HeadContent !
function loadPage() {
if (isEdit) {
updateDepartement();
}
}
//AJAX Liste Interdependante
function updateDepartement() {
var valeur = $F("Region");
if (valeur == "") {$("divSelectDepartement").innerHTML = "Sélectionnez une région";}
else {
$("loaderSelectDepartement").show();
var url = (isNewDoc=="1")?"./(UpdateList)?OpenAgent":"../(UpdateList)?OpenAgent";
var params = "&&TYPE=DEPT&&KEY=" + valeur;
var myAjax = new Ajax.Request( url + params, { method: 'post', parameters: params, onComplete: loadDepartement});
}
}
Explication du code :
On récupère la valeur de la liste déroulante "Région", avec le prototype, super simple !
Si l'on n'a pas sélectionné de Région on prévient l'utilisateur.
On affiche l'image d'attente ajax-loader
On donne l'URL de l'agent nous permettant de créer la liste déroulante.
Au retour de l'ajax au onComplete on lance la fonction loadDepartement
function loadDepartement(response) {
var rep = response.responseText;
$("loaderSelectDepartement").hide();
$("divSelectDepartement").innerHTML = rep;
$$('select#SelectDepartement option').each(function(o) {
o.selected = o.readAttribute('value') == $("Departement").value;
});
}
Explication du code de l'agent (UpdateList) :
On récupère le paramètre DEPT
On boucle sur la vue des régions avec comme clé le département.
On écrit dynamiquement un Select en lui affectant au onChange la fonction qui nous permettra de stocker le département.
Au print de la variable "res" on a maintenant notre liste déroulante.
Au retour ajax nous n'avons plus qu'à la copier dans le bloc divSelectDepartement
Comme nous avons stocké la région sélectionnée dans le champ "Département", à l'ouverture du document après enregistrement, nous n'avons plus qu'à relancer la fonction "UpdateDepartement" et positionner le bon à l'aide du code (En rouge) :
function loadDepartement(response) {
var rep = response.responseText;
$("loaderSelectDepartement").hide();
$("divSelectDepartement").innerHTML = rep;
$$('select#SelectDepartement option').each(function(o) {
o.selected = o.readAttribute('value') == $("Departement").value;
});
===================================
Option Public
Option Declare
Use "LibOutilsWeb"
Sub Initialize
On Error Goto GestionErreur
' Initialisation
Dim erreur As String
Dim session As New NotesSession
Dim dbCourante As NotesDatabase
Set dbCourante = session.CurrentDatabase
Dim docCtx As NotesDocument
Set docCtx = session.DocumentContext
' Paramètres
Dim sQS As String, sType As String, sKey As String
sQS = docCtx.Query_String_Decoded(0)
sType = getParameter ("TYPE", "&&", sQS)
sKey = getParameter ("KEY", "&&", sQS)
If (sType="") Then
erreur = "Une erreur s'est produite (paramètre inexistant). Veuillez prévenir votre administrateur"
Goto GestionErreur
End If
If (sKey = "") Then
Goto Fin
End If
' Initalisation de la liste
Dim res As String
If sType = "DEPT" Then
res = {<select name="SelectDepartement" id="SelectDepartement" onchange="updateChampDepartement()">}
End If
res = res & {<option value="">}
' Affichage de la liste
Dim vEntry As NotesViewEntry
Dim docExemple As NotesDocument
Dim vueExemple As NotesView
If sType = "DEPT" Then
Set vueExemple = dbCourante.GetView ("vRegion")
If vueExemple Is Nothing Then
erreur = "Impossible d'ouvrir la vue de la base. Veuillez prévenir votre administrateur"
Goto GestionErreur
End If
Dim vc As NotesViewEntryCollection
Set vc = vueExemple.GetAllEntriesByKey (sKey, true)
Set vEntry = vc.GetFirstEntry
While Not vEntry Is Nothing
Set docExemple = vEntry.Document
res = res & {<option value="} & docExemple.getItemValue("Departement")(0) & {">} & docExemple.getItemValue("Departement")(0) & {</option>}
Set vEntry = vc.GetNextEntry(vEntry)
Wend
End If
' Affichage du résultat
Fin:
res = res & {</option></select>}
Print res
Exit Sub
GestionErreur:
erreur = "ERREUR (AJAX - UpdateList) / Initialize : " & Error & " (" & Err() & ") ligne " & Erl & "<br />" & erreur
Print erreur
Exit Sub
End Sub
3/ CONCLUSION
Tout cela vous parait peut être compliqué, mais en se posant et en réfléchissant cela n'est pas insurmontable !
Dans un prochain article nous détaillerons la méthode pour mettre en place l'auto-complétion sur un champ
@ Bientôt