Intégration Techno Web2.0 (Application Lotus-Notes Domino)

 

imdominotéléchargement

 

 

 

 

 

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.

notes_subformjs

  • Copiez/ collez le bloc des Champs Cachés

notes_hiddenfields

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"

notes_headcontent

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 :

notes_fieldsexemples

notes_regdept

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

 3CONCLUSION

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.