ASTUCE - Avertissement avant de quitter une page Web

Il arrive souvent qu'un utilisateur, porté par la fougue de la navigation, clique sur un lien alors qu'il est en train de rédiger un formulaire qu'il n'a pas encore enregistré. Il doit alors tout refaire et se retrouve aigri.

Sous Lotus Notes, lorsque l'on ferme un formulaire, le client lourd a la prévenance d'avertir l'utilisateur qu'il devrait enregistrer ses données avant de quitter. Il est en fait assez simple de faire la même chose sur le Web.


Détection d'une modification sur le formulaire
Avant de l'avertir, mieux vaut vérifier que celà en vaut vraiment la peine. Un moyen simple est de se baser sur un champ qui sera modifié dès qu'un des champs a été modifié en se basant sur l'évènement onChange. Ce champ de controle n'a pas à être visible pour l'utilisateur on peut donc le déclarer en type "hidden" soit :

<input type="hidden" name="isChanged" id="isChanged" value="0">

Pour modifier la valeur du champ, on utilisera une fonction Javascript qui pourra être déclarée dans une librairie ou tout simplement dans "l'entête JS" du masque.
Cette fonction pourra être de la forme :

function formChange(){
  document.forms[0].isChanged.value="1";
}

On peut alors appeler la fonction dans l'évènement onChange de chaque champ que l'on souhaite controler en ajoutant :

formChange()

Détection que l'utilisateur quitte le formulaire
Il faut déclarer le nouvel évènement onBeforeUnload. Pour celà, dans l'entête JS du masque, ajouter :

window.onbeforeunload = confirmExit;

où confirmExit est une fonction Javascript permettant de vérifier s'il faut afficher la boite d'avertissement mais aussi de personnaliser un peu le message.

function confirmExit() {
  if(document.forms[0].isChanged.value=='1') 
    return "Vous avez effectuez des modifications sans les enregistrer.";
}

La première condition permet de vérifier s'il est utile de lui présenter la fenêtre de confirmation en allant vérifier la valeur du champ caché.

Hors-Sujet - Idée lecture : "Un dimanche avec Garbo"

Une fois n'est pas coutume, ceci n'a rien à voir avec Lotus Domino, Ajax ou autres technologies dites "Web 2.0". Juste une simple recommandation de lecture d'un recueil de nouvelles écrit par quelqu'un de très proche.

Un dimanche avec Garbo et autres histoires
de Olivier Mony
Editions Confluences

"Hemingway à Chantaco, Cocteau à Arcachon, tournage de Hôtel des Amériques de Téchiné à Biarritz, ce récit fait revivre les personnalités de passage dans le Sud-Ouest : écrivains, aventuriers, stars de cinéma, sur leurs lieux de tournage, sur les plages ou dans les citadelles."

Sur Amazon ou dans toutes les bonnes librairies.


Au passage, un petit clin d'oeil à Julien notre célèbre expert Lotus du Sud-Ouest.

PS : Olivier vient de recevoir le prix Hennessy du journalisme littéraire 2007. (Source : TV5.org)

OUTILS - Représentation graphique de données Notes

L'une des principales demande de mes utilisateurs est la mise à disposition de graphiques à partir des données contenues dans une base Lotus Notes.

Il existe aujourd'hui de multiples méthodes permettant de faire celà à travers une applet ou une servlet JAVA, de feuilles de style CSS, en utilisant des API ou tout simplement en exportant les données vers un tableur comme OpenOffice Calc ou Microsoft Excel (voire Lotus 123 pour les nostalgique). Cependant je trouve qu'aucune de ces solutions ne répondent à tous les besoins, à savoir : simplicité, rapidité, maintenabilité, personnalisation.


L'interface de Google Analytics (outil de suivi de statistique d'accès Web) présente une interface graphique avec de multiples graphiques de toute sorte que je trouve agréable. Ces graphiques sont générés grace à du Adobe Flash. Après de multiples recherches je pense avoir enfin trouvé LE package Flash gratuit de gestion des graphiques : XML/SWF Chart.

Le graphique est généré à partir de données fournies au format XML et les possibilités de personnalisation sont infinies. 20 type de graphiques sont disponibles, du simple graphique à barre aux graphiques mixtes en passant par les camemberts 3D. L'ensemble des éléments du graphiques sont aramétrables à travers le fichier XML et le rendu est non seulement très propre mais en plus rapide.


Comment intégrer XML/SWF Chart dans une application Lotus Domino

Etape 1 : Intégration du package
Le package comprend plusieurs fichiers SWF.

• Télécharger le package sur le site Web


• Décompresser le package


• Ajouter les fichiers dans les ressources de votre base Notes.


• Faire attention de reproduire l'arborescence des fichiers en intégrant le nom du répertoire (exemple, depuis les ressources Notes, renommer arno.swf en charts_library/arno.swf)

Etape 2 : Préparation de la vue pour afficher les données à représenter
Dans mon exemple je considère que les données peuvent âtre représentées à travers une vue Notes. On pourra aussi se baser sur des champs calculés si la méthode décrite ne peut répondre aux besoins.
Les données doivent être présentées sous le format XML suivant :

<row>

<string>Intitulé de ma colonne</string>

<number>Valeur 1<number>

...

<number>Valeur n<number>

</row>

Ma vue pourra donc avoir la forme suivante :

• 1ère colonne - Intitulé : <row>, Valeur : "<row>"


• 2nde colonne - Intitulé : <null/>, Valeur : "<string>" + champ_titre + "</string>"


• 3ème colonne - Intilué : <string>Titre Valeur 1</string>, Valeur : "<number>" + @text(champ_valeur1) + "</number>"


• ...


• Dernière colonne - Intitulé : </row>, Valeur : "</row>"

Les données de la vue ne doivent pas être interprétées par le moteur Domino. Il faut donc absolument cocher l'option "Traiter contenucomme du code HTML" depuis l'avent dernier onglet des propriétés de la vue.


Etape 3 : Le masque de vue
C'est dans le masque associé à la vue que nous allons pouvoir définir toutes les options de représentation du graphique. Pour connaitre toutes ces options je ne peux que recommander de consulter l'aide très complète disponible sur le site. Je ne donnerai ici qu'une configuration mimale pour afficher un graphique.

1. Création d'un masque nommé : $$ViewTemplate for nom_de_ma_vue_précédemment_créée


2. Indiquer : <chart>


3. Ajouter : <chart_type>type de graphique souhaité</CHART_TYPE>


4. Ajouter comme vue intégrée votre vue précédemment créée


5. Ajouter à la fin : </chart>


6. Depuis le second onglet des propriétés du masque, indiquer Accès Web\Type de contenu\Autre : text/xml

Etape 4 : Intégration du graphique dans une page Web
Pour ajouter le graphique dans une page, indiquez le code suivant :

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

 WIDTH="400"

 HEIGHT="270"

 id="charts"

 ALIGN="">

<PARAM NAME=movie VALUE="charts.swf?openfileresource&library_path=charts_library&xml_source=nom_de_ma_vue">

<PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#eeeeee>



<EMBED src="charts.swf?openfileresource&library_path=charts_library&xml_source=nom_de_ma_vue?openview"

       quality=high

       bgcolor=#eeeeee

       WIDTH="400"

       HEIGHT="270"

       NAME="charts"

       ALIGN=""

       swLiveConnect="true"

       TYPE="application/x-shockwave-flash"

       PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">

</EMBED>

</OBJECT>

Conclusions
Vous pouvez voir un exemple en ligne ainsi que télécharger une base Notes contenant un exemple un peu plus complet (Pour Lotus Notes 7+ pour le moment)

Il est aussi à noter que le site offre deux autres packages qui semblent interressants ou du moins amusants :

• XML/SWF Gauge : pour créer des compteur graphiques


• XML/SWF Slideshow : pour créer des animations réactives

Je n'ai pas encore eut le temps de tester ces deux applications.

INFO - Exemple d'une site Web Lotus Domino intégrant Litebox et Smooth SlideShow entre autre

Après une longue absence, je vais commencer tranquillement par la présentation d'un site Web hébergé sous Lotus Domino intégrant quelques techniques décrites ici.

Le nouveau site d'une entreprise spécialiée dans l'instrumentation de mesure et de surveillance intègre des Litebox est un Smooth Slideshow présenté sur ce blog : Site web de Sol Data

GOOGLE API - Quelques compléments sur Google Maps

Je viens de découvrir deux nouvelles fonctions offertes par la version 2 de la l'API de Google Maps, la géolocalisation à partir d'une adresse postale et les boites d'information multi onglets.

La géolocalisation à partir d'une adresse postale

J'avais déjà proposée une solution pour retrouver la position géographique d'un lieu à partir de son adresse postale dans l'un des premiers messages de ce blog. Les deux éventuels problèmes posés par la méthode décrite était :

1. l'obligation de séparer chaque composante de l'adresse (rue, ville et pays)
2. l'utilisation d'un service sans pérennité assurée

Ces deux problèmes sont résolus grace à Geocoder de Google Maps.

L'une des méthodes les plus simples pour récupérer les coordonnées d'une adresse consiste à envoyer une requète http avec le format suivant :

http://maps.google.com/maps/geo?q=adresse+recherchee&output=csv&key=abcdefg

Où :

• q= : indiquer l'adresse recherchée au format URL. Exemple : place+concorde+paris+france
• output= : format de la réponse. On peut indiquer xml, kml, json ou csv selon le besoin. Le format csv est le plus simple à traiter puisqu'il ne renvoie que quatre nombres séparées par des virgule en résultat.
• key= : votre clé Google Maps

Comme indiqué, le format CSV renvoie une réponse sous forme de quatre nombres correspondant au statut de la réponse (200 si tout va bien), le niveau de zoom, la latitude puis la longitude.

Plusieurs onglets dans la boite d'informations

J'avais rapidement présenté comment ajouter une bulle d'information sur la carte GoogleMaps en utilisant marker.openInfoWindowHtml(bulle);.
Pour ajouter une boite de dialogue avec plusieurs onglet il suffit d'utiliser marker.openInfoWindowTabsHtml(infoTabs); en ayant préalablement défini infoTabs comme ceci :

var infoTabs = [
 new GInfoWindowTab("Titre Onglet 1", "Contenu onglet 1"),
 new GInfoWindowTab("Titre Onglet 2", "Contenu onglet 2")
];

AJAX - Mes photos de vacances avec LightBox

Comme promis lors de la présentation du "Smooth Slideshox", je vais présenter une seconde librairie Javascript permettant de présenter les photos. La bibliothèque LightBox est de plus en plus utilisé sur le Web. Il a l'immense avantage d'agrandir joliment une photo sans avoir à se soucier de la navigation. La bibliothèque s'appuie sur le couple prototype.js/scriptaculous.


Comment installer LightBox
L'installation et l'utilisation de la bibliothèque LightBox dans une application Lotus Domino est similaire aux autres librairies déjà présentées sur ce blog :

1. Télécharger le package sur http://www.huddletogether.com/projects/lightbox2/
2. Décompresser le fichier ZIP sur le disque dur
3. Ajouter les fichiers prototype.js, scriptaculous.js, effect.js et lightbox.js et lightbox.css dans les ressources partagées de la base Notes
4. Ajouter les fichiers close.gif, loading.gif, blank.gif dans les ressources images partagées. On peut aussi ajouter les autres images présentées mais elle ne seront pas nécessaires dans l'exemple décrit.

Comment utiliser la bibliothèque Lightbox
Depuis l'élément de structure devant afficher les images LightBox (masque ou page), indiquer comme "Contenu de titre HTML" :

"<link rel=\"stylesheet\"
type=\"text/css\" href=\"lightbox.css\"
media=\"screen\" title=\"Normal\" />
<script src=\"script/prototype.js\" type=\"text/javascript\">
</script> 
<script src=\"script/scriptaculous.js\" type=\"text/javascript\">
</script>
<script src=\"script/lightbox.js\" type=\"text/javascript\">
</script>"

Ajouter aussi sur l'évènement "OnLoad" :

initLightbox();

Votre masque ou page est prête.

Pour déclarer une image ou photo devant utiliser lightbox il faut utiliser la syntaxe suivante :

<a href="path_de_l_image_agrandie" rel="lightbox" >
<img src="path_de_l_imagette" />
</a>

Une mini-galerie photo sous Lotus Domino à télécharger
Pour l'ocasion j'ai créé une mini galerie photo sous Lotus Notes à télécharger. Ne vous attendez pas à une révolution. Cette application n'a que comme unique but de présenter l'intégration de LightBox dans une base Notes. Par contre, pour faire plaisir à Julien, les 3 photos fournies en exemple sont ... en couleur.

Télécharger la galerie photo Lightbox

AJAX - Tag Clouds

Une fois n'est pas coutume, je vais profité du travail des autres ! Je cherchais en effet comment mettre en place un nuage de tags dans une application Lotus Notes. Avant de commencer le développement j'ai recherché ce qui existait et j'ai été étonné de trouver rapidement trois approches différentes d'implémenter cette fonctionnalité Web 2.0 avec Lotus Domino. C'est d'autant plus interressant que ces trois méthodes utilisent chacune une approche différente typique de l'évolution du développement des applications Domino pour le Web, formula avec Javascript, LotusScript et LotusScript avec DXL.

Qu'est-ce qu'un nuage de tags ?

Un nuage de tags est une représentation sous forme de liste de mots représentés de taille proportionnelle à leur importance. Cette importance est principalement lié au nombre d'occurences du mot.
On retrouve aujourd'hi ces nuages de tags un peu partout sur les applications dites 2.0 comme delicious, Flickr ou encore Technorati.

Ces nuages de tags sont aussi utilisés dans l'application Nébuloscope de Jean Veronis dont je ne peux que recommandé la lecture du blog Technologies du langage.


Cette forme de représentation permet de remplacer la visualisation catégorisée des vues et s'interface très facilement avec les options de restriction des vues intégrées.


Trois approches d'implémentation de la solution

Comme indiqué en introduction les trois méthodes présentées utilisent chacune une approche originale est montrant bien les approches différentes de développement des application Lotus Domino.

Approche Formula/Javascript
Ferdy Christant propose de générer un tableau Javascript à partir d'une vue présentée en HTML et d'un peu de formula. Le Javascript se charge après de représenter le nuage de tags sur le poste client.
Cette approche ressemble énormément à de nombreux exemples que j'ai présenté ici.

L'avantage d'une telle méthode est d'économiser la charge coté serveur. Seule une vue est appelée.

Malheureusement cette méthode a aussi ces inconvénients :

• Le poste client doit supporter le Javascript. Même si quasimeent tous les navigateurs Web récents supporte le Javascript on peut le désactiver. De plus, même si le javascript peut s'exécuter coté client il faut tout de même faire attention au volume de données à traiter.
• Même si celà peut paraitre secondaire, cette méthode retire l'attrait principal du nuage de tag pour le webmestre. En effet, l'un des effets secondaire du nuage de tag est l'indexation des pages web auprès des moteurs de recherche. Les liens d'un nuage pointent non seulement sur des ensembles de pages du site mais en plus porte un nom cohérent, le tag, vers ce lien. Hors dans le cas d'un traitement Javascript, les moteurs de recherche ne voient pas ce nuage.
• Enfin, pour ceux qui voudraient encore développer des applications compatibles Web et Client Notes, il n'est pas possible d'utiliser cette méthode sur le client lourd.

Approche traditionnelle via LotusScript
Thomas Adrian utilise une méthode plus traditionnelle en utilisant un agent LotusScript. Le nuage de tags est calculé en temps réel par un agent LotusScript se basant sur un NotesViewNavigator et renvoie le résultat via des print. Le serveur est donc sollicité à chaque appel du nuage. Par contre, il génère une page Web qui pourra être proprement indexées auprès des moteurs de recherche. Bref les inconvénients de la première méthodes sont les avantages de celle-ci et inversement.

S'il fallait choisir une solution entre ces deux méthodes je privilégierai la première pour un Intranet avec un parc matériel et logiciel maitrisé, sans indexation auprès des moteurs de recherche et surtout où l'important est la vitesse de réponse du serveur. Par contre, la seconde approche est préférable pour une application à vocation publique.


Approche LotusScript/DXL
Christian Mueller propose une troisième approche pouvant répondre à tous les besoins exprimés en utilisant du LotusScript avec DXL. Le calcul du nuage de tag s'appuie exactement sur la même méthode que celle proposée via agent LotusScript par Thomas Adrian. La différence est qu'il n'envoie pas directement le résultat au navigateur Web mais créé un nouveau masque via DXL contenant ce nuage. La mise à jour de ce masque peut alors être recalculé uniquement lorsqu'un document est créé, modifié ou supprimé, bref lorsque le nuage est modifié.

Donc non seulement le serveur n'est pas sollicité lors de l'appel de cette page, le nuage est présentée sous forme HTML pour les moteurs de recherche mais en plus il est facilement présentable pour les utilisateurs de clients Lotus Notes.

Serait-ce la solution idéale ? Par rapport aux contraintes exposées précédemment, c'est sans conteste la meilleure solution. Reste le problème d'intégration et de maintenance de l'application. Le nombre de développeurs Lotus Notes utilisant et surtout maitrisant DXL est encore rare (du moins je n'en fait pas encore partie même si je prends des cours réguliers sur le blog de Yogi).

SITE - Version anglaise

Le peu d'articles de ces derniers jours n'est pas dût à manque d'inspiration ou pire à un manque de motivation. J'ai profité de la fin du mois d'Août pour mettre en ligne une version allégée de ce blog en anglais et en même temps tester la version Béta de la nouvelle version de Blogger.