Domino & Web 2.0

ASTUCE - Avertissement avant de quitter une page Web

2007-04-12T13:09:00.000+02:00

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"

2007-03-26T13:08:00.000+02:00

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

2007-03-11T10:53:00.000+01:00

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.

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

Indiquer : <chart>

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

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

Ajouter à la fin : </chart>

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

2006-10-25T21:19:00.000+02:00

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

2006-09-14T21:28:00.000+02:00

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 :

l'obligation de séparer chaque composante de l'adresse (rue, ville et pays)
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

2006-09-10T20:57:00.000+02:00

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 :

Télécharger le package sur http://www.huddletogether.com/projects/lightbox2/
Décompresser le fichier ZIP sur le disque dur
Ajouter les fichiers prototype.js, scriptaculous.js, effect.js et lightbox.js et lightbox.css dans les ressources partagées de la base Notes
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

2006-09-03T22:10:00.000+02:00

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

2006-09-03T22:03:00.000+02:00

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.

SITE - Modification d'URL pour le fil RSS

2006-08-19T14:54:00.000+02:00

Le fil RSS de ce blog change d'URL. La nouvelle adresse est : http://feeds.feedburner.com/DominoWeb20. En effet je viens de m'inscrire sur FeedBurner qui permet non seulement d'assurer une meilleure compatibilité avec les aggrégateurs (au contraire du flux atom précédent) mais aussi pour suivre les statistiques d'accès au site via ce média. Comme vient justement de le faire remarquer Julien sur domlike.net, la majorité des accès sur un blog se fait à travers les aggrégateurs et non depuis un navigateur Web.

L'ancien fil atom restera encore actif quelques semaines. N'hésitez pas à laisser un commentaire en cas de problème.

[mise à jour]J'ai aussi profité de l'occasion pour offrir la possibilité de consulter le flux RSS du site au format PDF et pour Mobile via xFruits. Ce site permet de transformer et d'aggréger des flux RSS vers différents formats. De plus, l'interface est simple, fluide et visuellement agréable. Bref, un outil indispensable que je vous recommande.

ASTUCE - Garder une session Domino ouverte

2006-08-17T22:18:00.000+02:00

L'un des problèmes qui m'ennuie le plus avec les application full-web est l'expiration de session. Encore ce matin un utilisateur m'a appelé paniqué car au moment d'enregistrer son article, patiemment rédigé pour un blog interne de l'entreprise, le serveur Domino lui a répondu que la session était expirée.

En parcourrant l'excellent blog de William Beh "Lotus Notes on Web 2.0" j'ai enfin trouvé une solution simple et rapide à mettre en place. Il propose tout simplement d'appeler en Ajax un fichier sur serveur périodiquement avec la classe PeriodicalExecuter de prototype.js. Ceci permet de garder ouverte la session Domino.

Cette méthode n'est certes pas parfaite d'un point de vue sécurité. L'utilisateur doit absolument fermer son navigateur pour fermer la session. Le coutournement de ce problème sera l'occasion de rédiger un nouvel article.

INFO - Nouvelle version de scriptaculous

2006-08-17T03:03:00.000+02:00

La version 1.6.2 de scriptaculous vient de sortir. Elle corrige un certains nombre (voire un nombre certains) de bugs divers. La version 1.5.0 rc0 de prototype.js est aussi fournie dans le nouveau package d'installation que vous pouvez télécharger depuis la page downloads.

Pour rappel, la librairie scriptaculous est très régulièrement présenté dans ce blog. Elle est très pratique pour gérer notament le drag & drop ainsi que l'autocomplétion. Quelques exemples en ligne sont disponibles sur le site annexe Domino & Web 2.0 : Exemples

La bibliothèque prototype.js est elle utilisée dans de nombreuses bilbiothèques javascript comme scriptaculous, mais aussi Rico ou moo.fx qui ont aussi été présentées ici (livegrid et accordion pour Rico, Smooth Slideshow pour moo.fx).

AJAX - Photos de vacances

2006-08-16T21:05:00.000+02:00

De retour d'un long week-end du 15 Août, il est temps d'exposer les photos souvenir. Le but n'est pas de présenter une application de gestion de photos mais plutôt de présenter deux solutions AJAX que je trouve esthétique et très facilement intégrable avec Lotus Domino. La première solution présentée dans cet article présente les photos sous forme de bandeau avec effet de transition fondu enchainé et la possibilité d'ajouter un titre, une description ainsi qu'un lien. La seconde solution sera présentée dans le prochain article. Elle permet d'ouvrir les photos depuis des imagettes sous forme de boite de dialogue modale. Cet effet est notamment utilisé sur zoomr.

Smooth Slideshow de Jonathan Schemoul

La bibliothèque JonDesign's Smooth SlideShow permet de créer rapidement un bandeau avec effet fondu enchainé comme on en trouve déjà beaucoup en Flash. Cette bibliothèque s'appuie sur prototype.js et moo.fx. Le tout pèse 21,6 ko ce qui me semble très raisonnable surtout si l'on utilise ces bibliothèques pour d'autres usages sur le site. Pour comparaison, dewslider.swf, un excellent équivalent en flash, pèse 30,4 ko. Cependant, n'y connaissant rien en Flash, je ne me permettrais pas d'avancer d'arguments pour ou contre l'une de ces solutions. Le choix de cette bibliothèque est avant tout motivé par le but principal de ce blog, présenter des solutions AJAX pour Lotus Domino.

Installation de la bibliothèque

Pour utiliser la bilbiothèque il faut tout d'abord télécharger le package disponible sur la page de présentation de la bibliothèque. Une fois le fichier décompressé, ajouter les fichiers javascript et la feuille de style dans les ressources partagées de la base Lotus Notes. Les fichiers à ajouter sont :

moo.fx.js
moo.fx.pack.js
protoype.lite.js
showcase.slideshow.js
timed.slideshow.js
jd.slideshow.css

Si l'on utilise déjà prototype.js, inutile d'ajouter prototype.lite.js.

Utilisation de la biliothèque

Comme décrit dans la documentation, il faut

déclarer les bibliothèques javascript et la feuille de style
déclarer les images à présenter
personnaliser la taille de la zone d'affichage
définir la zone d'affichage dans la page

La déclaration des images à présenter se fait à travers un tableau déclaré en javascript sous la forme :

mySlideData[countArticle++] = new Array(
'image1.jpg',
'article1.html',
'Item 1 Title',
'Item 1 Description'
);

Intégration dans Lotus Notes

Pour faciliter la mise à jour des photos, je passerais par un masque pour gérer les photos à afficher. Ce masque est défini avec les champs suivants :

Titre : champ texte libre
Lien : champ texte libre
Description : champ texte libre
Photo : champ texte riche

Une fois le masque créé, reste à définir une vue "Photos". Pour me faciliter la tache, la vue présentera directement le code Javascript à intégrer dans ma page. La formule de colonne sera :

"mySlideData[countArticle++] = new Array('"
+ "0/" + @Text(@DocumentUniqueID) + "/$file/"
+ @subset(@attachmentnames; 1) + "', '"
+ Lien + "', '"
+ Titre + "', '"
+ Description + "');"

Ne pas oublier de trier la première colonne dans la vue pour pouvoir extraire les données avec @dbColumn.

Pour créer ma page Web, je vais passer par une page Notes mais on peut aussi l'intégrer dans un masque.

Comme contenu de titre HTML il faut intégrer les librairies javascript, ajouter un évenement Onload pour lancer le bandeau à l'ouverture de la page puis définir les images à afficher à partir de la vue précédemment créée et enfin définir les options de style pour définir la taille du bandeau, soit :

Photos:= @DbColumn("":"";"";"Photos" 1);
@If(@IsError(val); "" ;
"<script src=\"prototype.lite.js\" type=\"text/javascript\"></script>
<script src=\"moo.fx.js\" type=\"text/javascript\"></script>
<script src=\"moo.fx.pack.js\" type=\"text/javascript\"></script>
<script src=\"timed.slideshow.js\" type=\"text/javascript\"></script>
<link rel=\"stylesheet\" href=\"jd.slideshow.css\"
type=\"text/css\" media=\"screen\" />

<script type=\"text/javascript\">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func; }
else {
window.onload = function() {
oldonload();
func();
}
}
}
function startSlideshow() {
initSlideShow($('mySlideshow'), mySlideData);
}

countArticle = 0;
var mySlideData = new Array();"
+ @Implode(Photos) +
"addLoadEvent(startSlideshow); </script>
<style>
#mySlideshow {
width: 400px !important;
height: 200px !important;
}
</style>");

Il ne reste plus qu'à indiquer dans la page où afficher le bandeau en ajoutant en tant que texte HTML relais :

<div id="mySlideshow"></div>

C'est fini, voici un exemple de résultat avec quelques photos du Golfe du Morbihan.

ASTUCE - CSS dans Notes

2006-08-08T22:08:00.000+02:00

J'ai découvert très récemment que l'on pouvait appliquer les feuilles CSS sur le client Lotus Notes 6. C'était pourtant écrit dans l'aide, mais je n'avais même pas osé imaginer que celà était possible. Attention, cependant il y a de très fortes limitations. Pour le moment on ne peut appliquer un style CSS qu'à quelques éléments, de plus les classes et style semblent ne pas être gérés sur le client.

Une application qui peut être éventuellement intéressante est la personnalisation des tableaux créés dans un champ texte riche.

Pour appliquer un style à un masque, il faut commencer par créer sa feuille de style dans un fichier texte avec notepad, ou un autre éditeur de texte (j'utilise PSPad). La feuille de style pourra par exemple ressembler à :

TD {
  border : 1px solid #ddd;
  background : #eee;
  color : #333;
  font-family : tahoma;
  font-size : 12px;
}

Une fois le fichier enregistré, il faut l'intégrer dans une base Notes comme ressource "Feuille de style".

Pour appliquer la feuille de style à un masque :

Ouvrir le masque,
Sélectionner dans le menu "Création\Ressource\Insérer ressource"
Sélectionner "Feuille de style" comme type de ressource
Sélectionner le fichier puis cliquer sur OK

Un(e) icone symbolisant la ressource doit apparaitre dans le masque Notes.

Il ne reste plus qu'à enregistrer le masque, c'est terminé. Lorsqu'un utilisateur créera un nouveau tableau dans un champ texte riche de ce masque, ce tableau s'affichera avec les options de style définies.

On peut aussi appliquer un style à la balise IMG pour ajouter automatiquement une bordure autour des images iportées ou collées. La feuille de style pourra alors être :

IMG {
  padding : 5px;
  border : 4px solid #373;
}

Les possibilités semblent encore trop limitées pour être vraiment interressantes à exploiter. Il faudrait voir si le support des feuilles CSS évolue avec les prochaines versions de Notes.

ASTUCE - Forcer les propriétés de mise en forme du texte d'un champ texte riche sur le Web

2006-08-07T19:32:00.000+02:00

Rien de plus désagréable qu'un site Web où les fontes de caractères diffèrent d'une page à l'autre. S'il est possible de maitriser une charte graphique pour un site à vocation publique, il est beaucoup plus difficile, voire impossible, de l'imposer pour les importantes bases documentaires internes. A la décharge des utilisateurs, Lotus Notes préserve les propriétés de texte lors des copier/coller depuis les applications Office ou depuis les pages Web.

Heureusement, le moteur de conversion Web Domino n'est pas toujours propre. Il utilise toujours les "vieilles" balises HTML et plus particulièrement la balise <font> pour définir la police de caractère et sa taille. Pour maitriser le rendu du champ texte riche sur le Web il suffit donc de redéfinir le style de cette balise. Ainsi on peut par exemple ajouter en entête de la page web :

<style>
font {
font-family : tahoma, arial, helvetica, sans-serif;
font-size : 1em;
}
</style>

Quelque soit la fonte utilisée et quelque soit sa taille définie dans Notes, le contenu du champ apparaitra toujours en fonte tahoma taille 1em. L'utilisateur pourra par contre mettre en gras ou souligner les caractères afin d'ajouter un peu d'effets au contenu.

On peut bien sûr aussi entourer le champ texte riche d'un div avec une classe définie afin de limiter la portée de l'effet à ce champ. On aura alors dans le masque :

<div class="mybody">
Champ texte riche
</div>

et pour la définition du style :

<style>
#mybody font {
 font-family : georgia, "Times New Roman", Times, Roman, serif;
 font-size : 12px;
}
</style>

GRAPHISME - Amélioration des graphiques Excel

2006-08-07T14:27:00.000+02:00

C'est l'été, il fait beau et chaud. Je vais donc profiter du mois d'août, non pas pour faire une pause, mais pour aborder des sujets que certains pourront trouver plus futiles. Je commencerai par l'aspect graphique lié au Web 2.0. Chaque décennies voit apparaitre une nouvelle mode graphique : les coins carrés, les coins arrondis, les ombres portées, etc... Avec le Web 2.0 (et aussi Apple) est arrivé l'effet reflet.

Le mois d'août étant le mois le moins chargé de l'année, je profite toujours de cette période pour revoir ma documentation et les présentations que je suis amené à diffuser. J'ai donc profiter de l'occasion pour voir comment améliorer le rendu des graphiques générés par Excel. Même si le plus important reste le contenu, l'auditeur est toujours plus attentif si le visuel est agréable.

ETAPE 1 : Préparation du graphique sous Microsoft Excel (ou Calc avec Open Office)
Je ne vais pas donner de cours d'Excel étant très limité en ce domaine. Les seules recommandations que je donnerai est de ne pas se soucier des couleurs car elles pourront être modifiée sous Adobe Photoshop, mais faire très attention de supprimer les bordures des graphiques.
Une fois le graphique prêt, supprimer la légende et agrandir le graphique le plus possible selon la mémoire que vous possédez sur votre ordinateur. L'agrandissement du graphique permettra de supprimer l'effet "escalier". Copier le graphique et coller le comme nouvelle image dans votre éditeur graphique. J'utiliserais Adobe Photoshop mais celà doit aussi pouvoir fonctionner avec Paint Shop Pro ou Gimp.

ETAPE 2 : Préparation du graphique sous l'éditeur graphique
Je commence par modifier les couleurs de mon graphique. Photoshop m'offre beaucoup plus de possibilités que la palette limitée d'Excel. Je décommande d'appliquer des dégradés sur les graphiques qui allourdissent un peu trop à mon goût.
Pour coloriser mon graphique, j'utilise la "baguette magique" pour sélectionner la zone à colorisée puis le pot de peiture pour appliquer la nouvelle couleur.

ETAPE 3 : Préparation de la zone de travail
Avant de redimensionner l'image, je supprime les zone de blanc en trop autour du graphique en utilisant l'outil de recadrage. Il est maintenant possible de redimensionner l'image à la taille souhaitée. Pour redimensionner l'image sous photoshop il faut sélectionner l'option du menu "Image\Taille de l'image" puis indiquer la largeur et/ou la hauteur souhaitée. J'utilise de nouveau la baguette magique pour sélectionner le fond bland et je le supprime. Il ne doit plus que rester le graphique et éventuellement l'échelle dans le cas de graphiques à barres.

L'effet de reflet doit être affichée sous le graphique il faut donc agrandir la zone de travail. Sous Photoshop il faut sélectionner l'option du menu "Image\Taille de la zone de travail". Dans la boite de configuration j'indique une hauteur deux fois plus importante que celle proposée et clique sur la case du haut pour lui indiquer d'agrandir la zone vers le bas.

ETAPE 4 : Application de l'effet reflet
Depuis la zone de calque, click droit sur le calque du graphique puis sélectionner l'option "dupliquer calque".
Sélection du nouveau calque créer puis sélectionner dans le menu "Edition\Transformation\Symétrie axe vertical". Déplacer alors le graph retourné sous l'autre graphique.

Sélectionner l'option "masque de fusion" sur le calque du graphique retourné dans la boite de visualisation des calques.

Sélectionner l'outil de dégradé en spécifiant comme type de dégradé noir vers transparent.

Appliquer le dégradé sur le graphique inversé en partant du milieu de ce graphique vers le haut du graphique.

Vous devriez obtenir un résultat comme celui-ci :

Il ne reste plus qu'à règler l'opacité du calque de reflet en le baissant à 15% par exemple puis en appliquant un fond sur un nouveau calque si nécessaire.

Cette méthode peut bien sûr s'appliquer à tout type d'image et de texte et pas seulement de graphiques Excel.

AJAX - Rico Accordion : Les vues catégorisées

2006-07-26T19:19:00.000+02:00

Le classe accordion de RICO offre une solution très simple de représentation des vues catégorisées sous forme d'accordéon.

La structure des données à représenter doit être sous le format suivant :

<div id="un_identifiant_de_bloc_pour_rico">
<div>
  <div>Titre de la catégorie</div>
  <div>Contenu du panneau</div>
</div>
...
</div>

Préparation de la vue Notes

La vue Notes pourra être définie ainsi :

1ère colonne : Catégorisée avec pour formule

"</div></div><div><div>" + champ_categorie + "</div>";

colonnes suivantes :
```
"<span>" + valeur_affichée + "</span>"
```

Le <span> permet juste de séparer les valeurs affichées dans cet exemple. On pourra le remplacer par n'importe quelle autre balise.
Il faut aussi cocher "Traiter contenu comme code HTML" depuis le cinquième onglet des propriétés de la vue.

Préparation du masque de vue
Le masque associée à la vue précédente devra porter le nom $$ViewTemplate For nom_de_la_vue. Même si on peut coder le masque entièrement en HTML en cochant l'option Type de contenu: HTML" depuis le second onglet des propriétés du masque je vais porfiter de l'occasion pour faire sans dans cet exemple.

Pour commencer il faut inclure les librairies Javascript. Celà se fait normalement entre les balese HEAD de la page HTML. L'équivalent Lotus Notes est la référence "Contenu de titre HTML" présent depuis le panneau présenté sous le masque. Il fautindiquer comme formule :

{<script src="prototype-1.4.0.js" type="text/javascript"></script>
<script src="rico.js" type="text/javascript"></script>}

Attention au chemin des libraires Javascript.

Il faut ensuite instancier la casse accordion en lui spécifiant l'ID de l'élément à transformé. Ceci se fait généralement à l'évènement OnLoad de la page. Toujours depuis le panneau de référence présent sous le masque, il faut cliquer sur "OnLoad" et indiquer le code Javascript :

new Rico.Accordion( $('identifiant_bloc') );

Enfin, dans le masque, il reste à intégrer la vue en ajoutant la déclaration du bloc accordéon comme ceci :

<div id="identifiant_code">
 <div><div>
 insertion de la vue intégrée ici
 </div></div>
</div>

Ne pas oublier de déclarer le code HTML insérer comme HTML relais en le sélectionnant puis en cliquant sur l'option du menu Texte\HTML Relais.

Un exemple en ligne permet de visualiser le résultat en présentant les articles de ce blog par thème. De plus vous pourrez trouver d'autres exemples de l'utilisation de cette classe sur le blog Malaisien (mais en anglais) Lotus Notes on Web 2.0.

AJAX - Rico LiveGrid : personnalisation Lotus Notes

2006-07-22T12:36:00.000+02:00

En utilisant Firebug, on peut constater que Rico envoie une requète AJAX sous le format : data.xml?openview&id=data_grid&page_size=70&offset=149&sort_col=titre1&sort_dir=ASC&_=. Il faut donc modifier le format de cette requète pour qu'elle prenne en compte les paramètres d'URL standard d'appel des vues Notes.

Pour rappel ces paramètres sont :

Start : pour définir la ligne de départ. C'est l'équivalent du offset. Attention, le offset commence à 0 alors que le Start commence à 1.
Count : nombre de ligne à afficher. C'est l'équivalent du page_size.
ResortDescending=xx ou ResortAscending=xx : pour forcer un tri décroissant ou croissant sur la colonne xx. C'est l'équivalent de &sort_col=titre1&sort_dir=ASC. Attention, Rico prend en compte le titre de la colonne alors que Notes attend le numéro de la colonne.

Pour plus d'informations sur le format d'URL de Domino, consulter la page "Domino URL cheat sheet" du site IBM Lotus.

Fonction prototype object.extend

Les paramètres de l'URL sont codés dans la fonction fetchBuffer de la classe RICO.LiveGrid dans le fichier rico.js. Ne souhaitant pas modifier le fichier rico.js j'ai préféré utiliser la fonction prototype Object.extend.
Object.extend permet de redéfinir la fonction fetchBuffer sans avoir à toucher au fichier rico.js.
Pour utiliser cette fonction avec Rico il faut pour le moment l'appliquer sur une instance de la classe. Ceci devrait être corrigé dans la prochaine version de prototype.

Dans la pratique celà va donner :

var PobreLiveGrid = new Rico.LiveGrid ("data_grid",18, 445,
 "data.xml?openview", opts);
Object.extend(PobreLiveGrid, {
...
});

Personnalisation de RICO.LiveGrid pour Notes

Je copie le code de la fonction définie dans RICO est ne modifie que la définition de QueryString dans le cas d'un appel standard et dans le cas d'un appel avec un tri sur colonne.

Le code final est :

Object.extend(PobreLiveGrid, {
 /**
   * PobreLiveGrid : fetchBuffer
   * LiveGrid pour IBM Lotus Notes/Domino
   * -----------------------------------------------------------
   * Modification de la création de l'URL d'appel de mise à jour
   * des données de la table pour l'adapter aux URL de contrôle
   * des vues Lotus Notes.
   *
   * page_size <=>  count
   * offset <=>  start
   * sortcol=x&sort_dir=ASC <=> ResortAscending=x
   * sortcol=x&sort_dir=DESC <=>  ResortDescending=x
   *
   * -----------------------------------------------------------
   * Special thanks to Ross Lawley on Rico Forum
   *
   **/
 
   fetchBuffer: function(offset) {
     if ( this.buffer.isInRange(offset) &&
            !this.buffer.isNearingLimit(offset)) {
       return;
     }
     if (this.processingRequest) {
       this.unprocessedRequest = new Rico.LiveGridRequest(offset);
       return;
     }

     var bufferStartPos = this.buffer.getFetchOffset(offset);
     this.processingRequest = new Rico.LiveGridRequest(offset);
     this.processingRequest.bufferOffset = bufferStartPos;
     var fetchSize = this.buffer.getFetchSize(offset);
     var partialLoaded = false;

     var queryString;
     if (this.options.requestParameters)
       queryString = this._createQueryString(this.options.requestParameters, 0);

     queryString = (queryString == null) ? '' : queryString+'&';

     queryString  = queryString+'id='+this.tableId+'&Count='+
       fetchSize+'&Start='+(bufferStartPos+1)+'&offset='+bufferStartPos;

     if (this.sortCol) {
       var sortNotes =
(this.sortDir=="ASC"?"ResortAscending":"ResortDescending");
       queryString = queryString+'&'+sortNotes+'='+escape(this.sortCol);
     }

     this.ajaxOptions.parameters = queryString;

     $(ajax_call).innerHTML = queryString;
     ajaxEngine.sendRequest( this.tableId + '_request', this.ajaxOptions);

     this.timeoutHandler = setTimeout( this.handleTimedOut.bind(this),
this.options.bufferTimeout);
   }
 })

J'ai gardé la références standard de Rico offset qui sert dans le code. Celà ne pose pas de problème à Lotus Notes qui ignore ce paramètre.
Reste tout de même un problème. Nous souhaitons récupérer le numéro de la colonne à trier et non son nom. Heaureusement LiveGrid offre une option de paraméttrage de la classe très interressante qui non seulement va permettre de règler ce dernier soucis mais en plus permet de restreindre le nombre de colonnes que l'on souhaite triable.

Il faut modifier la définition de opts comme ceci :

var opts = {
   prefetchBuffer: false,
   onscroll : updateHeader,
   sortAscendImg: 'sort_asc.gif',
   sortDescendImg: 'sort_desc.gif',
   columns : [["1",true],["3",true],["5",true],["7",true],["9",true]]
 };

Le paramètre columns : [["valeur de colonne",triable(vrai/faux)]] doit contenir toutes les références aux colonnes affichées. Il renvoi "valeur de colonne" comme identifiant de la colonne au lieu de son nom.

Il faut faire très attention car les numéros de colonnes affichées sur la page Web ne correspondent pas obligatoirement aux numéro de colonne de la vue Lotus Notes. Ainsi dans l'exemple présenté dans l'article précédent (AJAX - Rico LiveGrid pour représenter les vues Lotus Notes), une colonne sur deux permettait de définir les balises HTML qui sont par la suite interprétées.
Les colonnes contenant les valeurs, sont les colonnes impaires dans ce cas (1, 3, 5, 7, 9). C'est ce qu'il faudra renvoyer à Lotus Notes.

Pour voir le code complet, je vous invite à lire le code source de l'exemple en ligne Rico LiveGrid.

AJAX - Rico LiveGrid pour représenter les vues Lotus Notes

2006-07-22T10:31:00.000+02:00

Il existe un nombre de plus en plus important de librairies Javascript AJAX. Après avoir beaucoup parlé de Scriptaculous, il est temps d'en présenter de nouvelles. RICO, s'appuie sur prototype.js, comme scriptaculous. Il offre la classe LiveGrid qui m'a particulièrement interressé après avoir découvert le nouveau moteur de recherche de Microsoft, live.com. Sur ce site, la barre de navigation pour accéder aux pages a disparu. Adieu "page suivante" ou "page précédente". Les résultats de la recherche s'affichent dans une longue liste qui se charge selon la position de l'ascenceur. Hors, ce qui me dérange le plus dans la gestion des vues Notes sur le web est justement la gestion de la navigation entre pages. RICO apporterait il la solution ?

La classe LiveGrid n'est certes pas encore parfaite, cependant le résultat me semble interressant à suivre. Toutes les vues notes ne sont pas représentables sur ce type d'interface, comme les vues catégorisées. Il est à noter que les vues catégorisées ne sont de toute façon pas vraiment utilisables sur le Web en natif non plus.

Installation de la librairie RICO

La librairie RICO ne comporte qu'un seul fichier javascript. Il faudra, par contre,
obligatoirement installer aussi la librairie prototype.js.

Télécharger la librairie RICO 1.1.2 sur la page de téléchargement du site
Télécharger la librairie prototype 1.4.0 sur le site de conio (sélectionner le lien "Just the .js, please").
Intégrer les deux fichiers dans les ressources de la base Lotus Notes.

La classe Rico.LiveGrid

Pour utiliser LiveGrid, il va falloir définir une page Web appelant les librairies et initialisant un tableau permettant de représenter la vue. Ce tableau sera constitué de deux parties :

une entête : pour la définition des titres de colonnes
les données : pour bien s'afficher, les premières lignes de données doivent être initialisées dans la page. Par la suite ces données seront directement extraites d'un fichier XML.

Par rapport aux autres classes Javascript déjà présentées, l'utilisation de LiveGrid est particulièrement contraignante. J'espère que celà sera amélioré dans la version 2 de la librairie.
Pour représenter une vue Lotus Notes avec LiveGrid, j'utilise donc une page au format HTML et une vue avec un masque associé au format XML. On pourrait aussi passer par un agent pour générer le flux XML mais, comme déjà expliqué, l'utilisation d'une vue permet d'économiser des ressources serveur.

Définition de la vue XML

Les données transmises à la classe LiveGrid devront avoir le format XML suivant :

<ajax-response>
  <response type="object" id="data_grid_updater">
    <rows update_ui="true">
      <tr><td>Valeur 1</td><td>Valeur 2...</td></tr>
      ...
      <tr>...</tr>
    </rows>
  </response>
</ajax-response>

Pour arriver à une telle représentation j'ai définie ma vue avec les paramètres suivants ;
Nom de la vue : data.xml
Traiter contenu comme code HTML depuis l'avant-dernier onglet des options de la vue.

Colonne 1 : "<tr><td>"
Colonne 2 : Champ ou formule à représenter dans la grille
Colonne 3 : "</td><td>"
Colonne 4 : Champ ou formule à représenter dans la grille
...
Colonne n : "</td></tr>"

De plus, afin de pouvoir utiliser les options de tri de la vue il faut cocher "Cliquer sur titre de colonne à trier" avec la valeur "Les deux" pour chacune des colonnes représentant des valeurs à afficher.

Il faut maintenant déclarer un masque de vue associé
Nom du masque : $$ViewTemplate For data.xml
Depuis le second onglet des propriétés du masque, cocher "Type de contenu : Autre" et indiquer comme valeur : application/xml
Le contenu du masque est :

<ajax-response>
<response type="object" id="data_grid_updater">
<rows update_ui="true">
Ajout de la vue intégrée data.xml
</rows>
</response>
</ajax-response>

Le nombre de lignes affichées dans la vue intégrée n'a aucune importance. Pour tester votre nouveau fichier XML, ouvrir la vue data.xml depuis un navigateur Web. Le format XML étant très contraigant il est possible que vous ayez un message d'erreur selon le texte affiché. Il n'est pas autorisé, par exemple, d'afficher le caractère '&'. Vous pouvez le supprimer ou le remplacer automatiquement, si nécessaire, à travers la formule de la colonne.

La page Web

J'ai déclarer le contenu de ma page comme étant au format HTML dans les options de la page. De plus, j'ai volontairement supprimé toutes références au style dans le code fourni afin de ne pas l'allourdir. Le contenu de la page doit ressembler à celà :

<body onload="javascript:bodyOnLoad();">

<table id="data_grid_header" class="fixedTable" 
  cellspacing="0" cellpadding="0" style="width:560px">
  <tr>
    <th class="first tableCellHeader">Titre Colonne 1</th>
    <th class="tableCellHeader">Titre Colonne 2</th>
    <th class="tableCellHeader">Titre Colonne 3</th>
  </tr>
</table>

<div id="viewPort" style="float:left">
<table id="data_grid" class="fixedTable" 
  cellspacing="0" cellpadding="0" style="float:left;width:560px;">
  On ajoute ici la vue vue intégrée data.xml
</table>
</div>
</body>
</html>

Attention, le nombre de lignes affichées dans la vue intégrée est très important ici. Il faut que ce nombre soit un peu supérieur au nombre de lignes à affichées.

Il ne reste plus qu'à déclarer l'entête du fichier HTML afin d'initialiser la LiveGrid.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Domino & Web 2.0 : Rico LiveGrid</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="rico.js" type="text/javascript"></script>

<script language="javascript">

function bodyOnLoad(){
  var opts = { 
    prefetchBuffer: false, 
    onscroll : updateHeader
  };
  new Rico.LiveGrid ("data_grid",18, 445, "data.xml?openview", opts);
}

function updateHeader( liveGrid, offset ) {
  }

</script>
</head>

Les options de déclarations de la LiveGrid sont :

"datagrid" : ID du tableau où seront représenter les valeurs
18 : nombre de lignes à afficher à l'écran
445 : nombre de lignes de la vue. Cette valeur devrait être calculée
"data.xml?openview" : URL du flux XML
opts : options complémentaires. Pour le moment celà ne sert pas

La page ainsi définie ne permet pas encore de trier la vue en cliquant sur une colonne ni de gérer le téléchargement des données en tâche de fond. Les paramètres d'appel de la vue XML sont codés dans la librairie rico.js. Hors ces paramètres ne correspondent évidemment pas à la syntaxe d'appel des vues Lotus Notes. Ceci sera corrigé dans le prochain article.

En attendant, voici un exemple complet en ligne. N'ayant pas pu tester l'application sur toutes les plateformes, merci de laisser un commentaire si vous constatez une incompatibilité.

SITE - Le blog en PDF

2006-07-18T11:27:00.000+02:00

A titre expérimental, j'ai mis à disposition un fichier PDF regroupant tous les articles liés à l'intégration des solutions Google Maps et Google Earth dans Lotus Notes/Domino.

Pour le moment le fichier est accessible en cliquant sur la rubrique GOOGLE API depuis le panneau de droite. Si je continue l'expérience je verrai à placer les liens de façon plus visible.

Mise à Jour :
Le fichier PDF est maintenant réellement accessible.

AJAX - Lire un fichier en dehors du domaine

2006-07-16T17:36:00.000+02:00

Comme précédemment indiqué, les applications AJAX ne peuvent pas accèder aux fichiers en dehors du domaine Internet de la page appelante (il est toutefois à noter que cette limitation ne semble pas toucher Microsoft Internet Explorer). La méthode préconisée pour dépasser cette limite, quelque soit le navigateur Web utilisé, est de passer par un "Cross-Domain Proxy".

Cross-Domain Proxy

Un "cross-domain proxy" n'est rien de plus qu'une application hébergée dans le domaine , qui va télécharger le fichier extérieur souhaité et le renvoyer vers l'application AJAX. Cette technique est notamment utilisée par NetVibes. En ouvrant NetVibes avec l'extension de Firefox Firebug, on constate que les fils RSS de la page sont appelés à travers une URL du type : http://www.netvibes.com/xmlProxy.php?url=http%3A//swww.acme.com/rss.xml

L'application PHP xmlProxy.php se contente de récupérer le fichier XML et de la transmettre au navigateur Web. Il ne traite pas d'informations avant expédition. Celà permet de ne pas surcharger le serveur en laissant cette tâche au poste client.

Lotus Domino Cross-Domain Proxy

Pour faire la même chose avec Lotus Notes j'ai commencé par utiliser la méthode "ALAX" présentée dans l'article "La recherche d'informations sur l'Internet depuis un client Lotus Notes". Malheureusement il semble que la propriété responseText gère mal, voire pas du tout, les charset autres que UTF-8. Les principales sources d'informations françaises étant codées en ISO-8859-1 je ne pouvais utiliser cette méthode.

J'ai donc décidé d'en profiter pour développer un agent Lotus Notes en Java.
L'agent doit récupérer l'URL cible en argument et renvoyer le contenu de cette URL.

Le code source de l'agent est :

import lotus.domino.*;
import java.io.*;
import java.net.*;

public class JavaAgent extends AgentBase {

 public void NotesMain() {
     try {
       Session session = getSession();
       AgentContext agentContext = session.getAgentContext();

       // Récupération de l'URL passé en argument de l'agent
       Document doc = agentContext.getDocumentContext();
       String newurl = doc.getItemValueString("Path_Info_Decoded");
       newurl = newurl.substring(newurl.indexOf("url=") + 4);
       URL url = new URL (newurl);
   
     // Initialisation du résultat à renvoyer
       String result = "";
   
       // Les informations seront renvoyés vers le navigateur au format XML
       PrintWriter pw = getAgentOutput();      
       pw.println("Content-type: text/xml");

     // Récupération du contenu de la page cible
      BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream()));
     String inputLine;
     while ((inputLine = in.readLine()) != null) {
         result += inputLine.toString();
     }
 
     // Envoi du résultat vers le navigateur Web
     pw.println(result);
     doc.recycle();

     } catch(Exception e) {
         e.printStackTrace();
     }

 }
}

Pour appeler l'agent il faut utiliser un URL du type : http://serverlocal/path/base.nsf/agent?openagent&url=http%3A//sitecible/path/fichier

Intégration dans l'aggrégateur RSS

On peut très facilement intégrer cette fonctionnalité dans l'aggrégateur RSS précédemment présenté.

Etape 1 : Intégration de l'agent sur une base du domaine Web. L'agent peut être déclaré dans la base elle même ou depuis n'importe quelle autre base du domaine Internet.
Etape 2 : Déclaration des URL d'ouverture de fil. Au lieu d'indiquer directement l'URL de la cible, on la fait précéder de l'URL de l'agent selon le format présenté. On pourra aussi prévoir un développement pour intégrer automatiquement cette syntaxe afin de simplifier la tâche de l'utilisateur.

Attention, le javascript d'interprétation des fils RSS présenté ne prend pas en charge le format ATOM pour le moment.

[Mise à jour] Ajout de doc.recycle() suite à la remarque de Yogi, administrateur du sombre blog DarkBlog à consulter sans hésitation.

AJAX - Une page Web personnalisable (4/4) : Un peu d'interactivité

2006-07-12T13:56:00.000+02:00

Il est temps d'ajouter un peu d'interactivité à cet aggrégateur RSS. L'utilisateur doit pouvoir ajouter un fil RSS, en supprimer, modifier ou mettre à jour le contenu du fil.

L'ensemble des actions doit être géré sans raffraichissement de la fenêtre afin de préserver l'aspect fluide de l'application. Les actions seront transmises via AJAX (suppression d'un fil ou actualisation) mais aussi à travers une boite de dialogue modale si une valeur doit être saisie (ajout et modification d'un fil RSS).

Boite de dialogue modale
Pour la saisie d'information je me suis basé sur la librairie Javascript de subimage que l'on peut trouver sur cette page. Cette librairie a l'avantage de fonctionner sur Internet Explorer, Firefox et Opera (Je n'ai pas testé d'autres navigateurs). En plus d'être simple à intégrer dans le code je trouve de résultat visuel esthétique.
Pour utiliser cette librairie il faut télécharger le package, le décompresser puis ajouter dans la structure de la base Notes les fichiers commons.js, maskBG.png, subModal.js et loading.html, la feuille de style subModal.css et enfin l'image close.gif. Il est à noter que j'ai considéré maskPG.png comme un fichier et non une image car Lotus Notes ne supporte pas encore l'intégration des fichiers PNG dans la librairie d'image.

Pour utiliser cette librairie, il faut d'abord insérer dans l'entête HTML les fichiers javascript ainsi que la feuille de syle :

<head>
  <link rel="stylesheet" type="text/css" href="subModal.css" />
  <script type="text/javascript" src="common.js"></script>
  <script type="text/javascript" src="subModal.js"></script>
</head>

Puis, appeler la fonction showPopWin('URL', largeur, hauteur, fonction_javascript). Par exemple pour ouvrir la boite de dialogue depuis un lien :

<a href="javascript:showPopWin('RSSFeed?openform&action=add', 600, 400, null); ">
Ajouter un fil RSS</a>

Pour fermer la boite de dialogue utiliser la fonction window.top.hidePopWin();
Normalement, si l'on utilise cette dernière fonction avec l'argurment true, la fonction javascript définie dans l'appel de la boite de dialogue s'éxécute.

Supprimer un fil RSS
Pour supprimer un fil RSS, il faut supprimer le document dans la base puis supprimer l'élément sur la page pour ne pas avoir à raffraichir la fenêtre.

Pour supprimer l'élément affiché dans la page nous allons utiliser les fonctions DOM. La fonction sera :

function deleteDiv(fieldname){
  var obj;
  var old;
  if(obj = document.getElementById('NewOrder')){
    if( old = document.getElementById(fieldname)){
       obj.removeChild(old);
    }
  }
}

où 'NewOrder' est l'ID de la div contenant tous les fils RSS et fieldname est l'id du bloc à supprimer dans 'NewOrder' passé en paramètre.

Pour supprimer le document Notes on peut utiliser l'URL http://serveur/path/base.nsf/vue/clé?deletedocument
Toujours pour ne pas avoir à raffraichir la fenêtre je lance cette url via Ajax. La fonction de suppression sera donc :

function deleteEntry(fieldname){
  var myAjax = new Ajax.Request('RSSByFieldname/' + fieldname + '?deletedocument');
  deleteDiv(fieldname)
}

où RSSByFieldname est une vue triée par 'fieldname'.

Le lien permettant de demander la suppression d'un fil sera insérer dans chacun des blocs d'affichage de fil RSS dans la fonction loadRSS, présentée dans le chapitre 3, sous la forme :
<a href="javascript:deleteEntry(\'' + fieldname +'\') ">Supprimer</a>

Actualisation d'un fil RSS
Pour actualiser un fil RSS il suffit de rappeler la fonction loadRSS en spécifiant le fieldname à recharger. Le lien sera lui aussi intégré au niveau de chaque bloc d'affichage de fil RSS depuis la fonction LoadRSS :
<a href="javascript:loadRSS(\'' + url + '\',\'' + fieldname + '\',\''+ nbentrees + '\'); ">Actualiser</a>

Création et modification d'un fil RSS
Pour des raisons de simplification du code la fonction d'ajout et de modification d'un fil RSS sera la même. Pour celà il va falloir :

supprimer le bloc d'affichage du fil RSS s'il existe (dans le cas d'une modification)
créer un nouveau bloc d'affichage du fil RSS sans l'afficher
charger le contenu du fil RSS dans ce bloc
faire apparaitre le bloc
détruire l'objet de gestion du drag & drop qui ne gère pas ce nouveau bloc
reconstruire un nouvel objet de gestion du drag & drop

Soit la fonction :

function addEntry(url, fieldname, nbentrees){
 deleteDiv(fieldname);

 var newDiv = Builder.node('div',
   {id: fieldname, className: 'rss', style: 'display:none;' });
 $('NewOrder').appendChild(newDiv);
 loadRSS(url, fieldname, nbentrees);
 Effect.Appear(newDiv.id);
 Sortable.destroy('NewOrder');
 Sortable.create('NewOrder',{tag:'div',onUpdate:updateOrder});
}

La fonction Builder.node permet de construire rapidement un nouvel objet DOM. Cette fonction est fournie dans la libraire scriptaculous.
Effect.Appear permet de faire apparaitre le nouveau bloc avec un effet 'd'apparition progressive'. Cette fonction est aussi fournie dans la librairie scriptaculous.

Il ne reste plus qu'à appeler cette fonction depuis un masque Notes affiché dans une boite de dialogue modale.

Masque de création/modification
Le masque doit contenir les champs URL (url du fil RSS) et entrees (le nom maximum de lignes à affichier). De plus, il va aussi falloir pouvoir accèder à la valeur du champ fieldname pour le passer en paramètre de la fonction.

Le problème du champ fieldname est qu'il se base sur l'UniqueID du document Notes. Hors, si celà ne pose pas de problème pour la modification de documents existants, celà est beaucoup plus génant lors de la création d'un document pour ajouter un nouveau fil RSS. L'UniqueID du Document ne sera défini qu'après enregistrement du document. Il doit exister de multiples façons de gérer ce problème.
La solution retenue est de n'appeler la fonction de création du nouveau fil RSS que sur l'évènement unload et si l'URL et un champ fielldname_tmp ayant pour valeur fieldname étaient renseignées. Je l'avoue c'est un peu tiré par les cheveux...
Le masque est défini ainsi :

un champ $PublicAccess : texte calculé à la création avec pour formule "1" (celà permet d'autoriser l'accès Public)
un champ URL : texte modifiable
un champ entrees : nombre modifiable
une déclaration HTML de champ field_tmp avec pour valeur le champ fieldname de type texte calculé avec pour formule @If(@IsNewDoc; ""; "liste_" + @Text(@DocumentUniqueID))

La déclaration HTML est : [<input type="hidden" value="<Champ fieldname>" name="fieldname_tmp">]
On peut soit déclarer le contenu entre crochets comme ci-dessus ou déclarer la ligne en HTML relais.

On ajoute trois boutons à ce masque

Fermer (masquer si : @IsNewDoc) avec pour formule Web/Javascript :
window.top.hidePopWin();
Enregistrer avec pour formule :
@Command([FileSave]);
FIELD fieldname := "liste_" + @Text(@DocumentUniqueID);
@Command([FileSave])
Annuler avec pour formule Web/Javascript :
document.forms[0].fieldname_tmp.value = "";
window.top.hidePopWin();

Et enfin, à l'évènement unLoad du masque :

if(document.forms[0].URL.value!='' & document.forms[0].fieldname_tmp.value!=''){
 window.top.hidePopWin();
 window.top.addEntry(document.forms[0].URL.value,
   document.forms[0].fieldname_tmp.value,document.forms[0].entrees.value);
}

On peut constater que le bouton Annuler vide le champ fieldname_tmp ce qui permet de ne pas exécuter l'appel à la fonction d'ajout/modification.

Téléchargement et démonstration en ligne

Vous pouvez télécharger une base Notes permettant de tester toutes les fonctionnalités de cet aggrégateur RSS AJAX. La base contient en plus un module de création de flux RSS afin de pouvoir tester l'application. N'oubliez pas de signer la structure et de définir la LCA.

Vous pouvez aussi tester en ligne ce module en version bridée, les actions sont visibles mais pas enregistrées dans la base. Si vous recharger la fenêtre vous reviendrez sur l'environnement de base. De plus l'ajout de nouveaux fils RSS est inactif.

SITE - Nouveau design pour le Blog

2006-07-10T01:03:00.000+02:00

Je me suis essayé à la personnalisation des modèles de Blogger. Même si c'est à la mode et que c'est très pratique pour la gestion des résolutions écran, je n'aime pas perdre inutilement la place dans des blocs de largeur fixe. Ceci est d'autant plus important lorsque le contenu présenté est volumineux comme ce blog.

Tests de compatibilité
Il ne devrait pas y avoir de gros problèmes de compatibilités pour les navigateurs, J'ai testé la nouvelle interface sous Microsoft Internet Explorer 6 et 7 Beta 2, ainsi évidemment que sous Firefox 1.5.0.4 et Opera 9.0. BrowserShots ne semblant plus répondre, j'ai aussi rapidement controlé la compatibilité avec Safari sur iCapture et Safaritest ainsi que sous Konqueror, Dillo et Lynx sur le site Scapture. Ce dernier montre un résultat quelque peu tronqué.
Si vous rencontrez un problème, n'hésitez pas à poster une remarque en indiquant votre environnement.

Nouvelles fonctionnalités
Il manque deux fonctionnalités, indispensables à mes yeux, sur Blogger :

La recherche
La catégorisation des messages

Le simple tri par date peut être suffisant pour présenter des actualités mais il montre très vite ses limites dès que le contenu n'a pas de lien temporel.

La recherche
Un module de recherche est maintenant mis à disposition en haut de ce blog. Il s'agit de l'API Google Ajax Search. C'est très simple à mettre en place et à personnaliser. De plus, la mise à jour de l'index est quasiment immédiate. Je pense que cette API doit se baser sur les résultats de Google Blog Search.

La catégorisation des messages
Sans aller jusqu'à implémenter un nuage de tags, je trouve interressant de pouvoir catégoriser les messages par thème. Pour pallier à ce manque, j'ai développé ce que certains pourraient appeler une "usine à gaz". Cependant, le résultat semble bien fonctionner et pour un effort minimum.

Un agent LotusScript va récupérer le flux RSS du blog et en extraire le titre ainsi que le premier paragraphe. Il enregistre ces données sur la base Notes d'exemples. La catégorie est automatiquement extraite par rapport au titre. En effet, la sytaxe actuelle des titres de ce blog est CATEGORIE - Titre. Il ne reste plus qu'à afficher la liste des catégories sur le blog par une insertion de texte via javascript. Ces catégories pointent vers une vue de la base Notes qui présente les titres et le premier pargraphe des articles d'une catégorie.

Je reviendrais surement sur l'agent d'extraction qui est un exemple simple de récupération de flux RSS sous Lotus Notes.

SITE - Creative Common et W3C

2006-07-07T23:54:00.000+02:00

Comme vous aurez peut-être pu le remarquer dans la colonne de droite, les informations fournies sur ce blog et la base de démonstrations sont maintenant sous contrat Creative Common. Ceci signifie en fait que vous pouvez officiellement tout faire des informations fournies sur le blog et dans la base de démonstration à la seule et unique condition de citer l'auteur. Ce n'est pas pour flater mon égo mais il semble que le contrat Français impose cette condition.

De plus j'ai totalement redévelopper la base de démonstration. Ce n'est pas très visible mais la page d'accueil a brillament passé les tests XHTML 1.0 et CSS. Qui a dit que les serveurs Domino ne généraient pas de code propre ?

AJAX - Une page Web personnalisable (3/4) : Présentation des fils RSS

2006-07-07T22:06:00.000+02:00

Maintenant que je peux utiliser le drag & drop et produire les fils RSS, reste à assembler les deux avec prototype, scriptaculous et un peu de DOM pour l'interprétation du fichier RSS.

Traitement sur le serveur ou le client ?
La récupération et l'interpétation des fichiers RSS peut se faire soit sur le serveur, soit depuis le poste client. La solution exposée ici s'appuiera sur un traitement au niveau du client. Celà permet de ne pas surcharger le serveur mais entraine des contraintes fortes liées à l'AJAX. En effet, l'AJAX ne permet pas de récupérer des fichiers situés en dehors du domaine de la page appelante (sauf avec Microsoft Internet Explorer). Je présenterais surement plus tard une méthode pour pallier à ce problème mais celà déborde du cadre de cet exposé.

Pour l'occasion j'ai mis à disposition trois fichiers RSS, depuis la base de test, à partir de vues comme décrit sur le chapitre précédent. Le flux RSS du blog se base sur des données enregistrée dans la base de test et non sur les données de BlogSpot, mais là encore je reviendrai sur ce sujet dans un prochain article.

Définir les fichiers RSS à récupérer
Avant d'afficher les fichiers RSS il va falloir stocker la liste des URLs des fichiers RSS à afficher. Pour celà je m'appuie sur un masque Notes semblable à celui présenté lors de la présentation du Drag & Drop
J'ai besoin de trois champs :

L'URL du fil RSS : un champ texte libre
Le nombre d'entrée à présenter : un champ nombre ou texte libre
La position du flux dans la liste : un champ nombre calculé avec pour formule : 0

Une vue pour présenter ces fils RSS
La page d'affichage des fils RSS sur le Web sera en fait une vue. Cette vue sera triée à partir du champ position. On ne souhaite pas afficher l'URL du fil mais son contenu. La seconde colonne de la vue va donc présenter un appel à une fonction javascript affichant le contenu du fil en clair soit :

1ère colonne (trié croissant) : position
2de colonne : "<div id=\"liste_" + @Text(@DocumentUniqueID) + "\" class=\"rss\"><script type=\"text/javascript\">loadRSS('" + URL + "', 'liste_" + @Text(@DocumentUniqueID) + "', "+entrees+");</script></div>"

Pour rappel, la définition du div contenant l'id du document va servir pour le drag & drop. La fonction loadRSS prend trois arguments, l'URL du fil RSS, l'ID du div où afficher le résultat et enfin le nombre d'entrée à afficher. La vue doit être définie avec l'option "Traiter contenu comme du code HTML" accessible depuis le troisième onglet des propriétés de la vue. La déclaration des fonctions ainsi que la gestion du drag & drop seront définis dans le masque associée à cette vue.

Un masque pour présenter la vue
Le masque doit porter le nom $$ViewTemplate for MaVueRSS où MaVueRSS est le nom de la vue créée précédemment. Pour de simples raisons de simplification de présentation du code je vais définir ce masque avec l'option type de contenu : HTML accessible depuis le second onglet des options du masque.

Gestion du drag & drop
Comme vue lors du premier article de cet exposé, la gestion du drag & drop avec Scriptaculous est vraiment très simple.

<head>
<script src="scriptaculous/lib/prototype.js"></script>
<script src="scriptaculous/src/scriptaculous.js"></script>
</head>
<body>
<div id="NewOrder">
VUE INTEGREE
</div>
<script type="text/javascript">
 Sortable.create('NewOrder', {tag:'div'});
</script>
</body>

Par rapport au premier article on peut noter l'option {tag:'div'} qui permet de définir que le drag & drop ne s'applique pas à une balise <li> comme par défaut mais à une balise <div> comme défini dans la vue.

Récupération du fil RSS
L'utilisation de protoype simplifie l'appel AJAX pour récupérer le fil RSS :

function loadRSS(url, fieldname, nbentrees)
{
var myAjax = new Ajax.Request (
url,
{
 method : 'get',
});
}

Interprétation du fil RSS
La fonction d'interprétation du fil RSS doit être appelée lorsque le fichier a été récupéré, soit à l'évènement onComplete. La fonction reçoit automatiquement en paramètre le résultat de la requète : originalRequest.

Un fichier RSS est un fichier XML, comme pour Google Maps. L'avantage de ne pas pouvoir sortir du domaine est que l'on peut maitriser la syntaxe de ce format et ainsi simplifier énormément le code. Un exemple de code Javascript permettant de récupérer les informations à afficher est :

function loadRSS(url, fieldname, nbentrees)
{
var myAjax = new Ajax.Request (
url,
{
method : 'get',
onComplete : function(originalRequest){
 items = originalRequest.responseXML;
 if(parseInt(nbentrees)==0) nbentrees='5';
 var items_count =
  (parseInt(nbentrees)<items.getElementsByTagName('item').length)?
   parseInt(nbentrees):items.getElementsByTagName('item').length;

 for(var i=0; i<items_count; i++) {
  root_node = items.getElementsByTagName('item')[i];
  titre =
   root_node.getElementsByTagName('title')[0].firstChild.data;
  lien =
   root_node.getElementsByTagName('link')[0].firstChild.data;
  publication =
   root_node.getElementsByTagName('pubDate')[0].firstChild.data;
  auteur =
   root_node.getElementsByTagName('author')[0].firstChild.data;
 }
}
});
}

N'étant pas expert Javascript, j'accepte volontiers tous commentaires pour optimiser ce code.

Affichage du résultat
Pour afficher le résultat dans le <div> j'utilise l'une des plus indispensables fonctions de prototype à mon goût : $('id').
$('id') permet tout simplement de récupérer l'élément d'id 'id'. Dans le cas présenter, 'id' vaut fieldname. Pour intégrer du code HTML dans le div je vais utiliser innerHTML. Le code final de la fonction est donc :

function loadRSS(url, fieldname, nbentrees)
{
var myAjax = new Ajax.Request (
url,
{
 method : 'get',
 onComplete : function(originalRequest){
  items = originalRequest.responseXML;
  if(parseInt(nbentrees)==0) nbentrees='5';
  var  items_count =
  (parseInt(nbentrees)<items.getElementsByTagName('item').length)?
   parseInt(nbentrees):items.getElementsByTagName('item').length;

  var feed='<h1>' +
   items.getElementsByTagName('title')[0].firstChild.data + '</h1>';

  for(var i=0; i<items_count; i++) {
   root_node = items.getElementsByTagName('item')[i];
   titre =
    root_node.getElementsByTagName('title')[0].firstChild.data;
   lien =
    root_node.getElementsByTagName('link')[0].firstChild.data;
   publication =
    root_node.getElementsByTagName('pubDate')[0].firstChild.data;
   auteur =
    root_node.getElementsByTagName('author')[0].firstChild.data;

   feed += '<h2><a href='+lien + '>' + titre +
    '</a></h2><h3>' + auteur + ', ' +
    publication + '</h3>';
  }
 $(fieldname).innerHTML = feed;
 }
});
}

En ajoutant quelques lignes de style CSS on arrive au résultat présenté sur la base de démonstration.

AJAX - Autocompletion V3 : Champ multivalué

2006-07-05T13:11:00.000+02:00

En fouillant un peu dans les options de Autocompleter, j'ai découvert l'option "tokens" qui permet de définir un séparateur de valeur. Ceci permet alors de gérer une recherche sur un champ multivalué Lotus Notes.

Les seules choses à modifier pour gérer la recherche sur un champ multivalué sont :

Déclarer le champs Notes avec l'option "Autoriser valeurs multiples"
Dans la vue de recherche, spécifier dans la colonne affichant les noms d'"Afficher valeurs multiples comme entrées distinctes"

Modifier le l'appel à Autocompleter en ajoution l'option tokens :

new Ajax.Autocompleter("autocomplete", 
"autocomplete_choices",
"scriptaculous?createdocument", {tokens:','});

Dans cette configuration j'ai défini la virgule comme séparateur de valeurs. On spécifier d'autres caractères. Pour plus d'informations consulter l'aide de script.aculo.us.

Pour tester l'autocompletion sur champ multivalué, c'est toujours sur la même page.

AJAX - Autocompletion V2 (sans LotusScript)

2006-07-04T01:59:00.000+02:00

La base Notes d'exemple en ligne Domino & Web 2.0 est hébergée gratuitement chez Domino Server. Malheureusement, la gratuité de ce service a ses limites. L'une des plus importantes est l'impossibilité d'utiliser des agents LotusScript et Java dans les applications. A l'époque de la présentation de l'autocompletion avec script.aculo.us je n'avais pas pu mettre d'exemple en ligne utilisant un agent LotusScript.

C'est chose maintenant corrigé ! J'ai fini par trouver une méthode simple n'utilisant qu'un masque et un peu de Formula. Cette solution est d'autant plus interressante qu'elle demande moins de ressources au serveur et qu'en plus elle demande l'utilisation de ressources Lotus Notes standards mais peu utilisées (champs spéciaux et format d'URL).

Nouvelle méthode utilisée

Récupération de la valeur envoyée
La première difficulté à relever est la récupération des arguments de la requète AJAX. Les premiers caractères saisis sont en effet envoyés par défaut sous forme de formulaire encodé. La seule variable CGI permettant de récupérer ces valeurs est "Request_Content" qui ne peut être qu'être exploité dans un agent. L'autre moyen est de tout simplement créer un nouveau document à partir des informations de ce formulaire. Ceci est possible sous Notes en utilisant un masque comportant les champs définis dans ce formulaire est en utilisant une url du type "mon_masque?createdocument" (et non ?openform).

Empêcher l'enregistrement du document de traitement
Un document sera créé à chaque appel, soit après chaque lettre saisie dans le champ de recherche. Il faut donc éviter d'enregistrer le document dans la base. Pour celà, une solution simple, l'utilisation du champ spécial $$SaveOptions avec la valeur "0".

Autoriser l'accès aux anonymes
Dans mon cas, je souhaite aussi que tout le monde, même un anonyme puisse rechercher un mot. Il faut donc déclarer le nouveau masque avec un champ $PublicAccess de type calculé à la création avec comme valeur "1" et cocher la case "Accessible aux utilisateurs ayant l'accès public" dans les options de sécurité du masque (dernier onglet des propriétés du masque).

Calculer et renvoyer le résultat à script.aculo.us
Enfin, on souhaite en retour la liste des mots commençant par les lettres saisies. Pour celà il suffit de calculer et afficher le résultat souhaité dans un champ spécial Notes $$Return.

Pour récupérer les documents commençant par les lettres saisies, j'utilise une nouvelle option du @dblookup, "[PartialMatch]". D'après l'aide Lotus Notes, l'utilisation de cette option renvoie une correspondance si la clé correspond aux premiers caractères de la valeur de colonne.
Le résultat doit être sous le format :
<ul>
<li>valeur 1</li>
<li>valeur 2</li>
...
</ul>
La formule du champ $Return sera donc :
val := @DbLookup("":"nocache"; "";"dbsearch"; autocomplete; 1; [PartialMatch] );
@If(@IsError(val); ""; "<ul>" + @Implode("<li>" + val + "</li>") + "</ul>")
avec dbsearch, ma vue de recherche et autocomplete le champ contenant les valeurs saisies dans la boite de recherche.

Voici à quoi ressemble mon masque nommé "scriptaculous" :

Depuis le formulaire d'utilisation de script.aculo.us décrit dans l'article précédent il suffit de modifié l'appel Javascript vers la page de recherche :

new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openagent", {});
devient
new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"scriptaculous?createdocument", {});

Le résultat de l'implémentation de l'autocomplete de script.aculo.us maintenant utilisable en ligne.

Il est possible d'ajouter de nouvelles valeurs dans la base mais n'en abusez pas :)

AJAX - Une page Web personnalisable (2/4) : Fil RSS Notes

2006-07-03T10:38:00.000+02:00

Afin de mettre à disposition des nouveautés diffusées sur les différentes bases Lotus Notes de l'entreprise je vais utiliser des fils RSS. Celà permettra d'avoir une solution "standard" adaptée pour fes flux internes comme pour les flux externes.

Le Format RSS
Lors de la préparation de cet exposé j'ai ouvert quatre flux RSS que je suis régulièrement et surprise, aucun des quatre n'avait une structure identique ! Entre le format ATOM, RSS 0.91, etc. Il existerait sept format d'après Wikipedia.
Heureusement la structure générale est commune :

Une entête décrivant le flux
Une entrée par article à présentée
Chaque entrée est décrite par au moins un titre, un lien et une date de publication. Par contre le résumé de l'article n'est pas toujours disponible (voir le flux RSS de ce site par exemple).

Pour le flux RSS de mes bases Lotus Notes je vais me baser le format RSS2.

Description rapide du format RSS2
Pour décrire le contenu de mes bases Notes je vais présenter les informations suivantes :

Titre de la base
Lien vers la base
Description de la base
Langue
Titre de chacun des documents diffusés
Date de dernière modification de ces documents
Lien vers ces document
Auteur de ces documents

Soit un fichier RSS2 :

<rss version="2.0">
<channel>
<title>
Nom de la base
</title>
<link>
Lien vers la base
</link>
<description>
Description de la base
</description>
<item>
<title>
  Titre du document
</title>
<author>
  Auteur du document
</author>
<pubDate>
  Dernière date de modification
</pubDate>
<link>
  Lien vers le document
</link>
<description>
  Résumé du document
</description>
</item>
<item>
...
</item>
</channel>
</rss>

Mettre à disposition un flux RSS dans Lotus Notes

Pour générer ce flux depuis une base Lotus Notes, on peut soit s'puyer sur un agent, soit sur une vue (comme pour le KML ou le XML de Google Maps).

L'agent sera du type :

dim s as New NotesSession
dim db as NotesDatabase
dim view as NotesView
dim document as NotesDocument

set db = s .CurrentDatabase
set view = db.GetView("Vue présentant tous les documents à diffuser")
print "Content-Type:text/xml"
print "<rss version="2.0">"
print "<channel>"
print "<title>" + db.Name + "</title>"
...
set document = view.GetFirstDocument
While not (document is nothing)
print "<item>"
print "<title>" + document.Subject(0) + "</title>"
...
print "</item>"
set document = view.GetNextDocument(document)
Wend
print "</channel>"
print "</rss>"

Attention aux accents et caractères spéciaux. De plus, si l'agent peut parraitre plus "propre", l'utilisation de vues avec masque de vue a l'immense avantage de ne demander quasiment aucune ressources serveur au contraire d'un agent LotusScript.

RSS, aggrégateurs et authentification

La méthode d'authentification par session de Lotus Notes ne permet pas l'utilisation d'aggrégateurs standards pour consulter les flux des bases Notes en accès restreint. Jake Howlett, auteur de l'indispensable site CodeStore, propose une méthode permettant de contourner ce problème si l'on souhaite absolument garder le mode Session de Lotus Notes (principalement pour le Single Signon).

L'autre solution est de lire ces flux depuis un aggrégateur RSS Web mis à disposition sur un serveur Notes interne. L'utilisateur s'authentifiant pour accèder à cet aggrégateur, les flux RSS sont alors accessibles sans avoir à s'authentifier de nouveau. La création de ce lecteur RSS sera le but du prochain article...

ASTUCE - Exporter des données Web vers Excel

2006-06-25T21:23:00.000+02:00

Afin d'exporter facilement des données d'un site Web vers Excel on peut utiliser le format CSV. On trouve notament cette option sur tous les sites de statistiques Web.

Description du format CSV
Le format CSV est un fichier texte où les valeurs sont séparées spar des virgules ou des points virgule. Chaque ligne est séparée par un retour chariot. Bref, un format très simple. Un exemple de fichier CSV :

Nom;Janvier;Février;Mars
Anatole;12;13;14
Béatrice;7;15;14
Charles;9;12;15

Intégration dans Lotus Notes pour mise à disposition sur le Web
On peut s'appuyer sur vue pour générer le fichier CSV à partir des données stockées dans la base Lotus Notes.

Création de la vue "statistiques.csv"
Pour la création de la vue Notes, je crée une colonne ne contenant que ";" pour séparer les valeurs puis une colonne avec la formule @char(13) + @char(10) pour forcer le retour chariot à la fin de chaque ligne. Il ne reste plus qu'à indiquer de "Traiter le contenu comme du code HTML" depuis l'avant dernier onglet des options de vue.

Création du masque "$$ViewTemplate for statistiques.csv"
On intègre la vue dans un masque nommé $ViewTemplate for nom de la vue. On décoche l'option d'affichage des entêtes dans les options de la vue intégrée et on indique que l'on veut l'afficher au format HTML. Si je n'affiche pas l'entête c'est que je ne sais pas proprement forcer un retour chariot dans les entêtes.

On veut que lorsqu'on ouvre la vue, elle ne s'affiche pas dans le navigateur Web mais dans Excel. Pour celà, rien de plus simple, il suffit de changer le MIME-Type de la page. Le MIME-Type permet d'indiquer au navigateur Web le type de contenu téléchargé et donc de l'orienter vers le logiciel à ouvrir pour afficher le contenu. Dans notre cas, le MIME-Type est : text/csv.

Pour modifier le MIME-Type, on ouvre les propriétés du masque, depuis le second onglet on coche "Autre" comme "type de contenu" et on indique text/csv dans le champ de saisie.

Un exemple basé sur les données présentées pour l'affichage de graphiques grace au CSS.

AJAX - Une page Web personnalisable (1/4)

2006-06-23T21:18:00.000+02:00

A l'instar des grands portails personnalisable comme Netvibes, Mon Yahoo! ou Google, le but de ce nouveau thème est de présenter les bases à la création de pages personnalisables par les utilisateurs.

Les fonctionnalités présentées permettront aux utilisateurs :

d' organiser la position des blocs d'information
d'intégrer des données de flux RSS externes et internes
d'intégrer d'autres sources d'information

Le quatrième volet de cette série présentera une application complète.
Pour l'intégration de la bibliothèque script.aculo.us je vous invite à lire l'article sur la mise en place de l'autocompletion.

1. Gestion du Drag & Drop pour modifier la position d'éléments
Sript.aculo.us offre des fonctionnalités DHTML très simple à implémenter. La classe "Sortable" permet de gérer le drag & drop pour modifier la position d'éléments sur la page.

Soit une liste d'id "NewOrder" : <ul id="NewOrder"></ul>
Chaque ligne de cette liste va porter un id unique afin de pouvoir l'identifier plus tard :
<li id="liste_1"></li>
<li id="liste_2"></li>
On peut alors appliquer la classe "Sortable" à cette liste : Sortable.create('NewOrder', '');

Ce qui donne au final :
<head>
<script src="scriptaculous/lib/prototype.js"></script>
<script src="scriptaculous/src/scriptaculous.js></script>
</head>
<body>
<ul id="NewOrder">
<li id="liste_1">Un premier élément</li>
<li id="liste_2">Un second élément</li>
</ul>
<script type="text/javascript">
Sortable.create('NewOrder', '');
</script>
</bodyd>

C'est tout, voir l'exemple en ligne.
Attention ! La nouvelle position n'est pas enregistrée. Ainsi, si l'on recharge la page on retrouvera la position d'origine des éléments.

2. Enregistrement de la nouvelle position
Afin de préparer les exposés suivants je vais commencer par modifier la structure de la base en basant la définition des éléments de liste par rapport à une vue. Chaque ligne de la liste sera un document de la vue. Ces documents permettront de définir plus tard le contenu de chaques blocs.

Création d'un masque
Le masque doit contenir au moins deux éléments :

un champ "titre" qui sera présenter comme contenu de l'élément de liste
un champ "position" enregistrant la position du document dans la vue

Création d'un vue
La vue "liste" va contenir deux colonnes

1ère colonne, triée par ordre croissant : position
2nde colonne, "<li id=\"liste_" + @text(@documentuniqueid) + "\">" + titre + "</li>"

Comme indiqué précédemment, chaque ligne doit porter un numéro unique afin de pouvoir l'identifier. Je me base donc sur l'ID unique du document représenté.

Création d'un masque de personnalisation de vue
On peut maintenant créer le masque "$viewtemplate for liste". Ce masque sera de type HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="scriptaculous/lib/prototype.js"></script>
<script src="scriptaculous/src/scriptaculous.js></script>
<script type="text/javascript">

function updateOrder(){
 var pars = Sortable.serialize('NewOrder');
 var myAjax = new Ajax.Request('updateagent?Openagent',
  {parameters:pars});
</script>
</head>

<body>
<form action="UpdateOrder?CreateDocument" method="post">
<ul id="NewOrder">
Intégration d'une vue intégrée
</ul>

<script type="text/javascript">
 Sortable.create('NewOrder', {onUpdate:updateOrder});
</script>
</form>
</body>

On a ajouté une fonction javascript qui va appeler un agent Notes "updateagent" en AJAX et on a déclarer un appel à cette fonction lors de l'évènement "onUpdate", lorsque la liste est modifiée. L'agent sera appelé en lui passant comme paramètre la liste des numéros unique de ligne selon leur nouvel ordre.

Création de l'agent d'enregistrement de la nouvelle position
L'agent recevant un liste d'id unique de document, il n'a qu'à ouvrir ces documents selon l'ordre de la liste envoyée et de les renuméroter. Avant de modifier le document, on vérifiera qu'il n'est pas déjà bien positionner. Inutile de modifier des documents si celà n'est pas nécessaire.

Le code de l'agent Lotuscript "updateagent" sera :

Sub Initialize
Dim s As New NotesSession
Dim db As NotesDatabase
Dim vw As NotesView
Dim docsort As NotesDocument
Dim doc As NotesDocument
On Error Goto Errhandle

Set doc = s.DocumentContext
Set db = s.CurrentDatabase
Set vw = db.GetView("liste")

' Récupération de la liste passée en paramètre
ids = Split( doc.Request_Content(0), "NewOrder[]=")
cpt = 0

' Pour chacun des ids de la liste, ouvrir le document
Forall k In ids
 pos = Instr(k, "&")
 If pos>0 Then
  cpt = cpt+1
  unid = Left(k, pos-1)
  Set docsort= db.GetDocumentByUNID(unid)
  If Not (docsort Is Nothing) Then
   ' Si la nouvelle position du document est différente,
   ' la modifier
   If docsort.order(0) <> cpt Then
    docsort.order = cpt
    Call docsort.Save(False, False)
   End If
  End If
 End If
End Forall
' Recalcul de la vue
Call vw.Refresh()
Exit Sub

Errhandle:
Call agentLog.LogAction("Error" & Str(Err) & ": " & Error$)
Exit Sub
End Sub

CSS - Graphiques : Barres horizontales et verticales

2006-06-19T21:49:00.000+02:00

L'une des plus fortes demandes de mes utilisateurs est la représentation sous forme de graphiques des valeurs stockées dans Lotus Notes. Hors, Lotus n'offre aucune fonction. On peut passer par une applet Java, une servlet ou une API mais ces méthodes restent lourdes à implémenter pour des représentations basiques.

Heureusement, en lisant un article sur la création de graphiques sous forme de barres horizontales en CSS du blog Standards-shmandards j'ai enfin trouvé une solution simple à mettre en place. L'idée est basique, il suffit de jouer sur la hauteur (ou la largeur) d'une image qui va représenter la barre.

Définition d'une vue pour l'exemple
Dans cet exemple je partirai d'une vue mais on aurait aussi pu se baser sur des champs multivalués d'une document. Le graphique à barre est très simple, il suffit d'un libellé de colonne (ou de ligne) et d'une valeur associée. La vue utilisée va donc comporté deux colonnes :

colonne 1 : Libellé de la valeur. Cette colonne doit être triée
colonne 2 : valeur à représenter sous forme de nombre

Définition de la page de représentation du graphique
Là aussi je vais passer par une page mais on peut aussi envisager d'autres solutions.

Pour une représentation sous forme de barres horizontales la structure générale du code HTML devra ressembler à :

<table>
<tr>
<td>Libellé de la ligne</td>
<td><img src="image_barre" height="16"
        width="valeur * ratio" /></td>
</tr>
</table>

avec ratio = largeur_max/Max(valeurs)

Création d'une nouvelle page
Définir comme option "type de contenu : HTML"
Insérer le code : <body><table cellspacing="0" cellpadding="0" summary="Statistiques Domino" style="background-image:url(bg_fade.png); background-repeat:repeat-x; background-position:left top; width: 550px;">
Insérer un texte calculé
Insérer le code : </table></body>

Le code du champ calculé sera :

label := @DbColumn("":"";"";"ma_vue_statistique"; 1);
valeur := @DbColumn("":"";"";"ma_vue_statistique"; 2);
largeur_max := 450;
max := @Max(valeur);
ratio := largeur_max/max;
@Implode("<tr><td class=\"first\" style=\"background : #ffffff;\">" + label + "</td><td class=\"value first\"><img src=\"bar.png\" alt=\"\" width=\"" + @Text(valeur * ratio) +"\" height=\"16\" />" + @Text(valeur) + "</td></tr>")

On peut alors ajouter en entête de la page la feuille de style proposée, soit :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Statistiques Domino</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td.value {
 background-image: url(gridline58.gif);
 background-repeat: repeat-x;
 background-position: left top;
 border-left: 1px solid #e5e5e5;
 border-right: 1px solid #e5e5e5;
 padding:0;
 border-bottom: none;
 background-color:transparent;
}

td.value img {
 vertical-align: middle;
 margin: 5px 5px 5px 0;
}

td.last {
 border-bottom:1px solid #e5e5e5;
}

td.first {
 border-top:1px solid #e5e5e5;
 padding: 4px 6px;
 border-bottom:1px solid #e5e5e5;
 border-left:1px solid #e5e5e5;
}
</style>
</head>

Ne pas oublié d'intégrer les images du fond de grille et de la barre dans les ressources de base.

De façon similaire on peut aussi représenter les valeurs sous forme de graphiques à barres verticales.
Dans ce cas, le code du champ calculé sera :

label := @DbColumn("":"";"";"statistiques"; 1);
valeur := @DbColumn("":"";"";"statistiques"; 2);
max := @Max(valeur);
img := "brun.gif";
@Implode("<td class=graph_data><img class=graph src=\"" + img +"\" height=\"" + @Text((valeur/max) * 100) + "\" alt =\""+@Text(valeur)+"\" title =\""+@Text(valeur)+"\"></td>") +
"</tr><tr class=graph_label>"+
@Implode("<td  class=graph_label>" + label+"</td>")

et le style associé pourra être

table.graph {
margin-top : -5px;
border-collapse: collapse;
border:2px solid #C6B396;
}

td.graph_data {
padding-top : 10px;
text-align : center;
vertical-align : bottom;
border-bottom:1px solid #C6B396;
border-left:1px dotted #C6B396;
border-right:1px dotted #C6B396;
}

td.graph_label {
font-family : tahoma, arial, helvetica, sans-serif;
font-size : 10px;
width : 25px;
text-align : center;
vertical-align : top;
background : #EBE2D5;
}

img.graph {
width : 15px;
}

Voir un exemple de graphique barre

ASTUCE - Options de lancement pour le Web

2006-06-17T18:18:00.000+02:00

Les options de lancement d'applications d'une base Notes sur le Web sont limitées. Il n'est par exemple pas possible de lancer le premier document d'une vue ou encore de définir les options de lancement par rapport à l'utilisateur.

Pour ouvrir n'importe quel élément d'une base on peut utiliser ... un navigateur ! En fait, on utilise pas le navigateur mais le masque d'affichage du navigateur nommé $NavigatorTemplate for NomDuNavigateur. Il serait possible d'utiliser aussi une vue mais je trouve que l'utilisation du navigateur permet de différencier proprement les éléments de structure. L'utilisation du navigateur, et à plus forte raison du masque d'affichage du navigateur, étant devenu obsolète on peut se permettre de détourner son utilisation.

Méthode

Création d'un navigateur vide.
Indiquer comme option de lancement de la base pour le Web : Ouvrir le navigateur dans sa propre fenêtre en indiquant le nom du navigateur précédemment créé.
Création d'un masque nommé $$NavigatorTemplate For NomDuNavigateur
Cocher l'option "Type de contenu : HTML" depuis le deuxième onglet des options du masque
Indiquer le code HTML suivant dans le corps du masque :

<html>
<head>
<meta http-equiv="refresh" content="0;url=URL_de_l_élément_à_ouvrir">
</head>
</html>

AJAX - Autocompletion avec scriptaculous

2006-06-17T15:50:00.000+02:00

L'une des fonctionnalités natives du client Lotus Notes qui me manque le plus sur le Web est le champ de type "Liste de dialogue" avec l'option "Autoriser valeurs non répertoriées". L'un des moyens de reproduire le comportement de ce type de champ sur le Web est de déclarer deux champs, un de type liste et l'autre de type de texte.

Grace à AJAX et plus particulièrement la bibliothèque de script script.aculo.us, il est possible de créer un tel champ.

Intégration de la librairie script.aculo.us

On pourrait déposer les fichiers Javascript directement sur le serveur Domino. Cependant celà pose plusieurs problèmes. En entreprise, les développeurs n'ont pas directement accès aux serveurs. Il est donc complexe de les mettre à disposition et d'assurer les mises à jour. De plus, il faut que ces fichiers soient présents sur tous les serveurs où cette base sera diffusée sur l'environnement Web (serveur de développement, serveur de recettes, serveur de production, serveur en DMZ, etc.). Il est donc préférable d'intégrer ces fichiers dans une base Notes.

Téléchargez le package Javascript su script.aculo.us : http://script.aculo.us/downloads
Décompressez les fichiers sur le disque dur
Si vous utilisez une connexion WebDAV, copiez directement le répertoire vers la base depuis l'explorateur
Si vous n'utilisez pas WebDAV, insérez les fichiers un à un dans les ressources partagées de la base en prenant soin de modifier l'intitulé du fichier en y intégrant le nom du répertoire.

Formulaire de saisie

Pour cet exemple, le formulaire ne contiendra qu'un champ texte libre. Attention, ce champ devra être défini avec un ID afin de pouvoir être exploité par la méthode d'autocomplétion. Pour déclarer un ID sur un champ de saisie il suffit d'ouvrir ses propriétés et d'indiquer un nom dans le champ ID présent dans le dernier onglet.

Pour ajouter la fonction d'autocompletion de script.aculo.us, il faut ajouter le code HTML suivant :

[<div id="autocomplete_choices" class="autocomplete"></div>
<script language="javascript" charset="UTF-8" >
new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openagent", {});
</script>]

J'utilise les crochets pour indiquer à Domino de ne pas interpréter le code. C'est l'équivalent du HTML relais.

Arguments de la méthode AutoCompleter
new Ajax.Autocompleter("ID du nom du Champ Texte", "ID du div affichant le résultat de la recherche", "URL de l'agent à exécuter pour obtenir le résultat à afficher", {});

Modification de l'entête HTML du formulaire
Pour utiliser l'objet Ajax il va falloir spécifier en entête que l'on intègre les fichiers de la bibliothèque Javascript. On va aussi en profiter pour définir un style pour afficher les résultats dans le div.
Il faut ajouter le code suivant dans la propriété "Contenu de titre HTML" du masque.

"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<script src=\"scriptaculous/lib/prototype.js\" type=\"text/javascript\"></script>
<script src=\"scriptaculous/src/effects.js\" type=\"text/javascript\"></script>
<script src=\"scriptaculous/src/dragdrop.js\" type=\"text/javascript\"></script>
<script src=\"scriptaculous/src/controls.js\" type=\"text/javascript\"></script>

<style>
div.autocomplete {
font-size:10px;
font-family : tahoma, arial, helvetica, sans-serif;
width: 350px;
background: #fff;
}
div.autocomplete ul {
border:1px solid #888;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.autocomplete ul li.selected {background-color: #ffb;}
div.autocomplete ul li {
margin:0;
padding:3px;
cursor:pointer;
}
</style>"

Agent de recherche

La méthode AutoCompleter envoi les lettres saisies dans le champ sous form de formulaire encodé (Content-Type: application/x-www-form-urlencoded) avec comme argument &nom_du_champ=texte.
La propriété CGI Request_Content permet de récupérer cet argument. Cependant, d'après la documentation elle ne peut être utilisée qu'à partir d'un agent.

Cet agent va devoir, récupérer la valeur passée en argument, rechercher tous les mots commençant par ces lettres puis renvoyer le résultat sous le format

<ul>
<li>valeur 1</li>
<li>valeur 2</li>
<li>...</li>
</ul>

Function Parse(url, argument)
Pour récupérer la valeur passée en argument j'ai préféré m'appuyer sur une fonction bien utile trouvée sur le forum de Lotus.

Function Parse( StringToParse As String, ParameterName As String ) As String
Const EqualSign = "="
Const Separator = "&"
Const PlusSign = "+"
Const NotFound = "Not Found"
Dim Found As Long
Dim StartPos As Long
Dim SeparatorPos As Long
Dim ParameterValue As String
Dim lenParameterName As Integer
Dim lenParameter As Integer
Dim InputString As String
Dim lenInput As Long
Dim CharacterCount As Integer

InputString = StringToParse
lenInput = Len( InputString )

ParameterName = ParameterName & "="
lenParameterName = Len( ParameterName )
Found = Instr( 1, InputString, ParameterName )
If Found > 0 Then
StartPos = Found + lenParameterName
SeparatorPos = Instr( Found, InputString, Separator )
If SeparatorPos > Found Then
lenParameter = SeparatorPos - StartPos
For CharacterCount = 1 To Len( ParameterValue )
If Mid$( ParameterValue, CharacterCount, 1 ) = _
PlusSign Then Mid$( ParameterValue, CharacterCount, 1 ) = " "
Next
Else ' Is this the last one?
lenParameter = lenInput - StartPos + 1
End If
ParameterValue = Mid$( InputString, StartPos, lenParameter )
StartPos = SeparatorPos + 1 ' Setup for next parameter search
Else
StartPos = 1 ' Didn't find it, so reset StartPos
End If
Parse = ParameterValue
End Function

Vue de recherche
Pour rechercher les valeurs, nous allons avoir besoin d'une vue triée par ordre croissant sur le nom du champ défini dans le masque. Afin d'éviter d'avoir deux fois le même mot dans le résultat de recherche, il faut cocher l'option "Générer clés uniques dans l'index" depuis le cinquième onglet des options de la vue.

Code de l'agent "search"
L'agent va

récupérer la valeur envoyée par la méthode AutoCompleter,
la décoder (la valeur transmise est encodée au format UTF-8),
rechercher depuis la vue précédemment définie les document dont la valeur du champ commence par cet argument. On utilise l'argument False à la méthode getAllDocumentByKeys.
renvoyer le résultat sous le format imposé par la méthode AutoCompleter

Soit :

Sub Initialize
Dim s As New NotesSession
Dim doccur As NotesDocument

Dim db As NotesDatabase
Dim vw As NotesView
Dim dc As NotesDocumentcollection
Dim doc As NotesDocument
Dim valeur As Variant

Set doccur = s.DocumentContext
req_encoded = parse(doccur.Request_Content(0), "autocomplete")
req = Evaluate(|@urldecode({Domino}; {|+req_encoded +|})|)

Set db = s.currentdatabase
Set vw = db.GetView("dbsearch")
Set dc = vw.GetAllDocumentsByKey(req(0), False)
Set doc = dc.GetFirstDocument

Print "Content-Type:text/html;charset=UTF-8"
Print "<ul>"
While Not(doc Is Nothing)
Print "<li>" + doc.autocomplete(0) + "</li>"
Set doc = dc.GetNextDocument(doc)
Wend
Print "</ul>"
End Sub

Le résultat en action :

Télécharger la base d'exemple : D&W : AJAX - Autocompletion

ADMINISTRATION - WebDAV : Web-based Distributed Authoring and Versioning

2006-06-13T21:03:00.000+02:00

Avec l'arrivée de la version 6 de domino, DNFS a disparu. Ce service complémentaire de Domino, permettant de mapper une base Notes comme lecteur réseau, était pourtant bien pratique même si instable et pas toujours très sécurisé.

A la place, IBM a fourni WebDAV. Ce protocole permet d'accèder, via l'explorateur Windows, aux fichiers contenus dans les éléments de structure d'une base Notes. Je suis longtemps resté perplexe devant l'intérêt de cette fonctionnalité. Seules les personnes ayant au moins l'accès concepteur peuvent accèder à une base via WebDAV. Celà retire toute possibilité de l'ouvrir aux utilisateurs. J'ai fini par ne plus m'en passé le jour où j'ai souhaité intégrer une bibliothèque Javascript dans Lotus Notes. Au lieu d'intégrer la cinquantaine de fichiers un à un depuis le designer, il suffit de décompresser l'archive de la bibliothèque et de copier/coller depuis le navigateur Notes. L'organisation de fichiers et répertoire est préservé dans Notes.

Mise en place de WebDAV
Il suffit de modifier le document site (ou d'en créer un nouveau) depuis le client d'administration et de cocher l'option WebDAVdans le second onglet. On relance le serveur HTTP et c'est fini !

Déclaration d'une connexion WebDAV depuis Windows XP
Comme précédemment indiqué, il faut au moins être déclaré comme concepteur sur la base Notes.
Sous Windows XP :

Ouvrir les Favoris Réseau
Cliquer sur Ajouter un favoris réseau
Comme adresse internet spécifier : http://IPduServeurNotes/RépertoireDepuisData/BaseNotes.nsf$files/
Indiquer un nom de connexion. Par exemple : "Ma connexion vers la base truc.nsf"

La nouvelle connexion WebDAV vers la base Notes est terminée.

Utilisation du lecteur WebDAV

Lorsque l'on ouvre cette connexion une boite de demande d'authentification s'ouvre. WebDAV s'appuyant sur le protocole HTTP de Domino il faut indiquer son login et mot de passe Internet déclaré sur le serveur Domino. Il ne reste plus qu'à copier des fichiers ou des répertoires vers ce nouveau lecteur. Ils apparaitront automatique dans la liste des ressources partagées. Il est à noter que les images avec l'extesion JPG, GIF ou BMP seront automatiquement classés dans le dossier "Images" alors que les autres fichiers seront classés dans "Fichier".

Ceci servira lors des prochains articles sur AJAX où j'utiliserai des bibliothèques Javascript comme RICO.

GOOGLE API - Une application Notes avec Google Maps

2006-06-13T20:52:00.000+02:00

Juste un court billet pour présenter un exemple complet d'utilisation de Lotus Notes avec Google Maps :
http://free.dominoserver.de/it/dominoweb.nsf/googlemaps2

Cet exemple reprend tous les éléments présentés dans les billets précédents.

GOOGLE API - La recherche d'informations sur l'Internet depuis un client Lotus Notes (3/3)

2006-06-11T18:47:00.000+02:00

La recherche d'informations de géolocalisation peut aussi s'effectuer à partir d'un client Lotus Notes.

ALAX : Asynchronous LotusScript And XML
La recherche d'informations de géolocalisation à partir d'une adresse postale depuis un client Lotus Notes peut aussi bien être pratique pour l'utilisateur que pour l'utilisation à travers un agent. La méthode utilisée s'appuie sur l'objet XMLHTTP comme pour AJAX présenté dans le billet sur la recherche FullText avec GoogleMaps. LA grande différence est que le développement se fait en Lotus Script et non en Javascript.

Création du masque de saisie
Comme pour le formulaire de recherche d'adresse Web il faut :

Un champ "rue" de type texte éditable
Un champ "ville" de type texte éditable
Un champ "pays" de type texte éditable
Un bouton "Rechercher"
Un champ "latitude" de type texte éditable
Un champ "longitude" de type texte éditable

Le principe d'utilisation de ce masque est simple. L'utilisateur saisie l'adresse (rue, ville et pays) puis clique sur le bouton Rechercher. Si l'adresse est trouvée les champs latitude et longitude sont alors automatiquement renseignés. Si l'adresse n'est pas trouvée, on notifie l'utilisateur par une boite de message.

Code du bouton Rechercher

Lorsque l'on clique sur Rechercher, on doit extraire les valeurs des champs d'adresse, les formater en code URL (codage des espaces et des accents), lancer la requète de recherche sur localsearchmaps, extraire le résultat et alors renseigner les champs latitude et longitude.

Sub Click(Source As Button)
Dim wk As New NotesUIWorkspace
Dim uidoc As NotesUIDocument
Dim doc As NotesDocument
Dim rue, ville, pays As Variant

Set uidoc = wk.CurrentDocument
Set doc = uidoc.Document

' Requète de recherche de longitude/latitude
' -----------------------------------------------------------
' Le texte doit être encodé au format URL pour remplacer les accents
' et les espaces. Le service localsearchmaps n'accepte pas d'avoir une
' rue vide. Si l'utilisateur ne spécifie pas de rue, on renvoie un
' espace "%20"

rue = Evaluate({@URLEncode("UTF-8";"} + doc.rue(0) + {")})
If rue(0)="" Then rue(0) = "%20"
ville = Evaluate({@URLEncode("UTF-8";"} + doc.ville(0) + {")})
pays = Evaluate({@URLEncode("UTF-8";"} + doc.pays(0) + {")})
request = "http://www.localsearchmaps.com/geo/?street=" + rue(0) + _
"&city=" + ville(0) + "&country=" + pays(0) + "&cb=notes"

' Envoi et récupération du résultat de requète
' -------------------------------------------------------------
' Ce code ne fonctionne que si l'utilisateur qui clique sur le bouton
' possède Internet Explorer. Si l'utilisateur a un autre navigateur il
' faudra modifier la déclarationde l'objet XMLHTTP

Set page = CreateObject("Microsoft.XMLHTTP")
Call page.open("GET", request, False)
Call page.send()

strReturn =page.responseText

If (Instr(strReturn,"notes")>0) Then
' Extraction de la longitude et la latitude
' ----------------------------------------------------
' Le résultat de la requète est sous la forme :
'    notes(latitude, longitude,'VILLE', 'CODE', 'PAYS');

search = Mid(strReturn, 7, Instr(strReturn, ",'") -7)
lattitude = Left(search, Instr(search, ",") -1)
longitude = Mid(search, Instr(search, ",") +2)

Call uidoc.FieldSetText("latitude", lattitude)
Call uidoc.FieldSetText("longitude", longitude)
Else
Messagebox "L'adresse n'a pas été trouvée", 48, "Géolocalisation"
End If

Set page = Nothing
End Sub

GOOGLE API - La recherche 'Full Text' Notes avec Google Maps (2/3)

2006-06-10T12:46:00.000+02:00

Dans l'article précédent nous avons vu comment retrouver une adresse postale sur Google Maps. Ceci permet de retrouver les documents situés aux alentours d'une zone géographique recherchée. Nous allons maintenant voir comment retrouver la position d'un document Notes sur la carte. J'ai élargi le périmètre en intégrant aussi la possibilité de rechercher un document dans la base Notes à partir d'un module de recherche Full Text.

AJAX : (Asynchronous JavaScript And XML)
Nous ne pouvons pas utiliser le module de recherche Full Text Web natif de Lotus Notes à moins d'utiliser des frames ou iframes. En effet, à chaque recherche, le formulaire étant POSTé, il faudrait au mieux recharger toute la page à chaque fois. Je vais donc utilisé la méthode AJAX avec un peu de DHTML pour rechercher les résutats en mode asynchrone et les intégrer dans la page sans avoir à la recharger. Je reviendrai régulièrement sur les fonctionalités d'AJAX. En attendant vous pouvez lire ces deux pages de présentation :

Personnalisation de la vue de résultat de recherche

Une fois n'est pas coutume, je vais commencer par la fin. Une fois le résultat de la recherche affiché, il faudra zoomer sur la zone en cliquant sur le lien présenté dans le résultat de la recherche. Je vais donc réutiliser la formule "mapZoom" présentée dans l'article précédent. Les liens hypertextes présentés en résultat de recherche devront avoir la forme :
<A HREF="" OnClick="mapZoom(longitude, latitude); return(false);">monlien</A>

On peut donc dès à présent personnaliser la vue de recherche qui présentera les résultats. Cette personnalisation comprend deux étapes :

Création d'une vue "Search"
- Formule de la première colonne : "<A HREF="" OnClick="mapZoom(" + longitude + ", " + latitude + "); return(false);">" + titre + "</A>"
- Formule de la seconde colonne : description + "<br />"
- Cocher l'option de vue : "Traiter contenu comme code HTML".

Création d'un masque "$$SearchTemplateDefault"
- Insérer un champ nommé : $$ViewBody

Intégration du formulaire de recherche et de la zone d'affichage du résultat

Nous n'aurons besoin que d'un champ de saisie pour taper les mots clés recherchés, un bouton pour lancer la recherche et d'une zone d'affichage du résultat de recherche, soit :

<FORM NAME="form_fts">
<LABEL>Texte : </LABEL> <INPUT NAME="req" SIZE=35 />
<BUTTON VALUE="Rechercher" NAME="Rechercher"
TYPE="button"  onClick="searchNotes()">
Rechercher
</BUTTON>
</FORM>

<DIV id="affres" style="overflow:auto; padding:5px; height:100px;"></DIV>

Lancement de la recherche et affichage du résultat grace à AJAX

Le principe est très simple. On génère une URL pour lancer la recherche sur le serveur Notes, on récupère le récultat et on l'affiche dans le DIV id="affres".

L'URL de lancement de recherche sera de la forme :
"search?searchview&query=texte saisie dans le champ req du formulaire".

function searchNotes(){
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}

xmlhttp.open("GET", "search?searchview&query=" +
              escape( document.form_fts.req.value),true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById("affres").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null)
}

La première partie du code est générique pour pouvoir utiliser l'objet xmlhttp qui va récupérer le contenu du résultat de la requète sans l'afficher sur le navigateur.

document.getElementById("nom id").innerHTML permet de récupérer, et aussi de modifier, le texte contenu entre les balises définies avec l'ID spécifié sans avoir à recharger la page.

Voir le résultat

GOOGLE API - La recherche d'informations dans Google Maps (1/3)

2006-06-09T13:49:00.000+02:00

L'API de Google Maps ne fournit pas de fonctions de recherche géographique à partir d'une adresse postale. Si l'on a pas la longitude et la latitude du point à représenter celà peut devenir fastidieux pour l'utilisateur de rechercher ces informations pour chacun des documents.

De plus, comme indiqué dans mon premier message d'introduction, l'utilisateur de Google Maps et Google Earth va utiliser l'interface principalement dans deux buts :

Trouver les documents situés disponibles un emplacement
Trouver où se situe un document

Pour trouver la position d'un document il faut donc offrir la possibilité de zoomer sur la carte en cliquant sur le document. Ceci est possible nativement dans Google Earth, mais pas sur Google Maps.

Se positionner sur Google Maps à partir d'une adresse postale

Pour se positionner sur Google Maps à partir d'une adresse postale, nous allons utiliser le service Web de localsearchmap. Ce seervice renvoie par défaut la syntaxe de zoom sur un point de l'API GoogleMaps en version 1. Malheureusement cette syntaxe n'est plus valide en version 2. Nous allons donc un peut personnaliser l'appel.

La syntaxe d'utilisation de ce service est :
http://www.localsearchmaps.com/geo/?street=rue&town=ville
&country=pays
On peut aussi ajouter un argument indiquant le nom de la fonction javascript à appeler pour zoomer sur les coordonnées renvoyées : &cb=maFonctionJavascript

Par exemple :
http://www.localsearchmaps.com/geo/
?street=rue+des+cosmonautes&town=palaiseau
&country=france&cb=mapZoom
renvoie comme résultat : mapZoom(46.624, 2.4622);

Nous allons devoir utiliser la carte pour zoomer dessus, la première chose à faire est donc de déclarer map comme variable globale dans le code javascript fourni pour afficher la carte Google Maps dans l'article précédent.

Création d'un formulaire de recherche
Pour permettre à l'utilisateur d'indiquer les coordonnées, il va falloir ajouter un formulaire de recherche permettant de spécifier la rue, la ville et le pays.

<FORM NAME="form">
<LABEL>Rue : </LABEL> <INPUT NAME="rue" SIZE=50 /><BR />
<LABEL>Ville : </LABEL> <INPUT NAME="ville" SIZE=50 /><BR />
<LABEL>Pays : </LABEL> <INPUT NAME="pays" />
<BUTTON VALUE="Rechercher" NAME="Rechercher" TYPE="button"
  onclick="searchPoint()">
Rechercher
</BUTTON>
</FORM>

Déclaration de la fonction mapZoom(lat,long)
Fonction javascript permettent de zoomer sur la carte à partir de sa longitude et sa latitude

function mapZoom(lat, long,town,state,country){
var point = new GLatLng( parseFloat(lat), parseFloat(long));
map.setCenter(point,14, G_HYBRID_MAP );
}

Déclaration de la fonction searchPoint()
Cette fonction va récupérer les informations saisies par l'utilisateur, formater le texte au format URL, lancer le service WEB à partir de ces informations puis lancer la fonction de zoom à partir du résultat.

function searchPoint() {
var queries = "?street=" + escape( document.form.rue.value)+
        "&city="+escape( document.form.ville.value)+
        "&country=" + escape( document.form.pays.value);
var s = document.createElement( "script" );
s.src="http://www.localsearchmaps.com/geo/" + queries + "&cb=mapZoom";
s.type = "text/javascript";
document.getElementsByTagName( "head" )[0].appendChild(s);
}

Code Source complet de la page
N'oubliez pas de remplacer la clé Google Maps.
Voir le résultat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<base href="http://free.dominoserver.de/it/dominoweb.nsf/" target="_self" />
<script src="http://maps.google.com/maps?file=api&v=2&key=CleGoogleMaps"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[
var map;

function load() {
function createMarker(point,title, desc ) {
  var bulle = "<h3>" +  title + "</h3><p>" + desc +"</p>";
  var marker = new GMarker(point);
   GEvent.addListener(marker, "click", function() {
      map.setCenter(point,14, G_HYBRID_MAP );
    marker.openInfoWindowHtml(bulle);
  });
  return marker;
}

if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
GDownloadUrl("googlemaps.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latitude = parseFloat(markers[i].getAttribute("lat"));
var longitude =  parseFloat(markers[i].getAttribute("long"));
var title =  markers[i].getAttribute("title");
var desc =
markers[i].getElementsByTagName("description")[0].firstChild.nodeValue;
var point = new GLatLng(latitude,longitude);
var marker = createMarker(point,title, desc);
map.addOverlay(marker);
}
});
}
}

function mapZoom(lat, long){
var point = new GLatLng( parseFloat(lat), parseFloat(long));
map.setCenter(point,14, G_HYBRID_MAP );
}

function searchPoint() {
var queries = "?street=" + escape( document.form.rue.value) +
            "&city="+escape( document.form.ville.value) +
            "&country=" + escape( document.form.pays.value);
var s = document.createElement( "script" );
s.src="http://www.localsearchmaps.com/geo/" + queries + "&cb=mapZoom";
s.type = "text/javascript";
document.getElementsByTagName( "head" )[0].appendChild(s);
}

//]]>
</script>

<style>
LABEL {
DISPLAY: inline ;
FLOAT: left ;
WIDTH: 40px ;
font-size:10px;
font-weight: bold ;
margin-left: 5px ;}
INPUT {
font-family: Arial, Helvetica, sans-serif ;
font-size:10px; }
BUTTON {
font-size : 11px;
border : 1px solid #CCC;
background-color : #EEE;}
</style>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<div>
<form name="form">
<LABEL>Rue :</LABEL> <input name="rue" size=50><br/>
<LABEL>Ville :</LABEL> <input name="ville" size=50><br/>
<LABEL>Pays :</LABEL> <input name="pays">
<BUTTON VALUE="Rechercher" NAME="Rechercher" TYPE="button"
      onClick="searchPoint()" >
  Rechercher
</BUTTON>
</form>
</div>
</body>
</html>

GOOGLE API - Quelques limites à l'utilisation de Google Earth et Google Maps avec Lotus Notes

2006-06-08T09:56:00.000+02:00

Les principales limites de l'utilisation de Google Earth et Google Maps avec Lotus Notes se situent au niveau :

de la sécurité,

de l'interface,

de la volumétrie de données.

Limitations liées à la sécurité

Google Maps étant défini au niveau d'un élément Notes il est possible de s'authentifier pour accèder à cet élément. Google Maps peut alors accèder au flux XML selon les droits de l'utilisateur. Attention cependant de respecter les termes d'utilisation de l'outil : http://www.google.com/apis/maps/terms.html

Google Earth ne peut qu'ouvrir des fichiers KLM dont il a accès sans avoir besoin de s'authentifier. Celà pose donc un problème lorsque la LCA de la base, ou les propriétés de sécurité de la vue ne permettent pas l'accès à Anonymous. Sur les serveurs qui ne sont pas configuré en mode session, il est toujours possible d'indiquer le login et le mot de passe dans l'URL du flux KLM mais celà n'est évidemment pas recommandé.

Deux solutions permettent de contourner plus ou moins facilement cette limitation.

Authentification sur serveur Lotus Domino en mode Session

Si le serveur Domino est configuré en mode session, il est possible d'ouvrir un flux KLM non public en s'authentifiant sur le serveur à travers le navigateur Web disponible dans GoogleEarth puis en lui demandant de rafraichir les données de flux. Malheureusement, la procédure est assez lourde.

Position des points publique et accès limité pour le détail

La seconde solution consiste à ouvrir l'accès au flux KLM au public mais de limiter l'accès aux détails d'un point. Ainsi, tout le monde pourra voir la position des documents mais seules les personnes autorisées pourront accèder au contenu de ces documents.

Pour limiter l'accès aux documents, on peut ajouter un lien vers celui-ci dans la description du point et activer le navigateur Web de Google Earth. Lorsque l'utilisateur clique sur ce lien la première fois, une fenêtre d'authentification s'ouvre dans le navigateur Web. Une fois authentifié, le document est affiché dans le navigateur Web.

Pour donner un accès public aux documents, on peut créer un agent public générant à la volée le fichier KLM. Ceci permet de ne pas avoir à ouvrir les droits d'accès au niveau des vues et/ou des documents.

Limitations liées à l'interface : la recherche

Google Earth offre nativement un ensemble d'outils permettant de faciliter la navigation. Au contraire l'API de Google Maps est plus basique. Il n'est par exemple pas possible de rechercher une adresse.

L'interface Google Earth ne peut être personnalisée. Il n'existe pas de module de recherche dans le contenu du fichier KLM. Google Maps étant une page Web, il est possible d'intégrer le module de recherche full-text de Lotus Notes sur la page et ajouter des controles pour naviguer sur la carte à partir du résultat de la recherche. On peut à la rigueur créer une page de recherche full-text accessible à travers le navigateur Web de Google Earth mais je ne connais pas de moyen simple de pouvoir pointer un point sur la mappemonde depuis le navigateur. L'utilisation reste donc très limitée.

Limitations liées à la volumétrie

Plus le nombre de points à représenter sur la carte est important, plus le temps de traitement et de transfert de données est long, surtout avec Google Maps. J'ai pu testé Google Maps avec plus de 300 points à représenté et le temps de traitement est visible au contraire de Google Earth.

Afin de limiter l'impact, il est possible de séparer en plusieurs flux les données à représenter. L'utilisateur coche alors le type d'informations à représenter et seules ces informations seront traitées. Pour implémenter cetyte solution au niveau Notes on peut utiliser les vues catégorisées et indiquer dans la vue intégrée du masque de vue de n'afficher que la catégorie passée en paramètre de l'URL.

GOOGLE API - Lotus Notes et Google Maps

2006-06-05T21:20:00.000+02:00

Google Maps est un service Web de cartographie accessible en français à l'adresse http://maps.google.fr

Google fourni une API permettant de personnaliser cette carte. On peut ainsi ajouter ces propres points comme avec Google Earth.

Définition des étapes pour interfacer Lotus Notes et Google Maps
L'intégration de Google Maps dans Lotus Notes peut se découper en trois étapes :

Obtention d'une clé API Google Maps
Création de la source de données définissant les points à afficher (position, description)
Création d'une page web affichant la carte Google Maps ainsi que les points

Etape 1 : Clé API Google Maps
La clé permettant d'utiliser l'API Google Maps est limitée à une utilisation depuis une URL à définir. Seules les éléments directement accessibles depuis le "répertoire" spécifié dans l'URL permettent d'afficher la carte. Il faut donc faire très attention au choix de l'URL. Heureusement, en cas d'erreur il est toujours possible d'obtenir une nouvelle clé.

Si vous souhaitez définir l'appel à la carte depuis une page ou un agent il faudra spécifier l'URL permettant d'accèder à la base, par exemple http://www.acme.com/sample.nsf/
Par contre si vous souhaitez utiliser la carte depuis un document il ne faudra pas oublier d'ajouter la vue dans l'URL. Pour ne pas être trop limité je vous conseille d'utiliser la vue générique Lotus Notes "0", soit une url du type http://www.acme.com/sample/0/

Dans mon exemple, je me baserai sur une page pour déclarer l'appel à la carte Google Maps. J'ai donc déclaré comme URL : http://free.dominoserver.de/it/dominoweb.nsf/

Pour obtenir une clé, rendez vous sur la page http://www.google.com/apis/maps/

Etape 2 : Création de la source de données
Ayant besoin des mêmes informations que pour l'exemple de Google Earth, je me baserai sur le même masque pour les documents à représenter.

De plus, le traitement d'extraction des données XML est gérée en javascript dans la page. On peut donc utiliser la même vue que pour Google Earth.

Création d'une vue XML pour Google Maps
Tous les formats XML peuvent être utilisés pour être interfacés avec Google Maps du moment que l'on puisse extraire la longitude et la titude du point à représenter. Dans cet exemple j'ai choisi comme format :

<markers>
<marker lat="latitude" long="longitude" title="titre">
<description><![CDATA[description]]></description>
</marker>
</markers>

La formule de colonne de la vue dédiée à Google Maps sera donc :

"<marker lat=\"" + latitude + "\" long=\"" + longitude + "\" title=\"" + titre + "\"><description><![CDATA[" + description + "]]></description></marker>"

Pour rappel, il faut cocher l'option "Traiter contenu comme du code HTML" dans les options de la vue.

Il faut aussi créer un masque de vue afin de déclarer l'entête et le pied de page du fichier XML.

On doit nommer le masque "$$ViewTemplate For <nom de la vue Google Maps>".
Le masque doit être déclaré avec un type de contenu Autre:text/xml (depuis le second onglet des options de masque).
Insérer les lignes suivantes :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<markers>

Ajouter une vue Intégrée en spécifiant comme type d'affichage : A l'aide du code HTML
Insérer la ligne suivante :
</markers>

Etape 3 : Création de la page d'affichage de la carte et des points

Il faut maintenant créer la page web qui permettra d'afficher la carte Google Maps avec les points correspondant à la position des documents. Comme indiqué précédemment, j'utilise une "Page" pour déclarer mon code mais on peut aussi utiliser un agent ou un document.

Le code minimal pour afficher la carte sans les points :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MaCleAPIGoogleMaps"
type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>

</html>

Il va maintenant falloir ajouter les points sur la carte. On va utiliser la fonction Google "GDownloadUrl" pour récupérer les données de la vue XML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MaCleAPIGoogleMaps"
type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function load() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );

GDownloadUrl("googlemaps.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var latitude = parseFloat(markers[i].getAttribute("lat"));
  var longitude =  parseFloat(markers[i].getAttribute("long"));
  var title =  markers[i].getAttribute("title");
  var desc =
   markers[i].getElementsByTagName("description")[0].firstChild.nodeValue;
  var point = new GLatLng(latitude,longitude);
  var marker = new GMarker(point);
  map.addOverlay(marker);
}
});
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>

</html>

On peut remarquer les deux appels différents en javascript pour extraire les données du fichier XML :

var latitude = parseFloat(markers[i].getAttribute("lat"));
Permet d'extraire la valeur d'un attribut de tag XML
var desc = markers[i].getElementsByTagName("description")[0]
.firstChild.nodeValue;
Permet d'extraire la donnée déclarée entre deux tags XML.

Seuls les points sont afficher. Il ne se passe rien lorsque l'on clique sur ceux-ci. Il va falloir ajouter un évènement sur chacun des points pour zoomer sur la zone et afficher la bulle de description du site.
On va donc déclarer une nouvelle fonction Javascript permettant de gérer la déclaration du point avec ces évènements associés :

function createMarker(point,title, desc ) {
var bulle = "<h3>" +  title + "</h3><p>" + desc +"</p>";
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
map.setCenter(point,14, G_HYBRID_MAP );
marker.openInfoWindowHtml(bulle);
});
return marker;
}

On remplace alors l'appel var marker = new GMarker(point); par var marker = createMarker(point,title, desc);
Un exemple complet est accessible à l'adresse : http://free.dominoserver.de/it/dominoweb.nsf/googlemaps

L'API Google Maps offre évidemment beaucoup d'autres fonctionnalités que je n'ai pas décrites ici. Je vous invite à aller lire la documentation de l'API.

GOOGLE API - Lotus Notes et Google Earth

2006-06-05T11:46:00.000+02:00

La visualisation de la position des documents depuis Google Earth est la plus simple à implémenter. Google Earth offre en effet la possibilité d'ajouter des points personnalisés sous forme de fichiers au format KML.

Description rapide du format KML
Les fichiers KML sont des fichiers XML permettant de décrire les points à afficher sur la mappemonde. Cette description comprend la position mais aussi la description du site.

<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<description><![CDATA[<a href="http://www.google.com/">Google Search!</a>]]></description>
<name>Google Headquarters</name>
<Lookat>
<longitude>-122.0839</longitude>
<latitude>37.4219</latitude>
<range>540.68</range>
<tilt>0</tilt>
<heading>3</heading>
</Lookat>
<Point>
<coordinates>-122.0839,37.4219,0</coordinates>
</Point>
</Placemark>
</kml>

Placemark : description d'un nouveau point
description : description affichée dans l'info bulle. On peut y insérer du code HTML comme dans cet exemple.
name : nom du point affiché sur la carte
Lookat : définition du point
longitude : longitude du point
latitude : latitude du point
range : hauteur depuis laquelle sera présentée le point lorsque l'on double clique sur celui-ci
tilt : angle sous lequel le point sera présenté
heading : angle par rapport à l'horizon sous lequel le point sera présenté
coordinates : coordonnées du point

Si l'on veut indiquer plusieurs points (Placemark), il faut les déclarer sous la balise racine <Document> qui accepte aussi la balise name permettant de nommer le flux dans Google Earth.

D'autres options peuvent aussi être appliquées comme l'icone représentant le point par exemple. Le but de cet article n'étant pas de présenter toutes les options de Google Earth je vous invite à consulter l'aide (http://www.keyhole.com/kml/docs/webhelp/index.htm)

Intégration dans Lotus Notes à partir d'une simple vue
Il existe évidemment plusieurs techniques dans Lotus Notes pour mettre à disposition un fichier KML à partir des documents. Je vais présenter celle qui me semble la plus simple et la plus naturelle, la création d'une vue.

Etape 1 : Le document
Les éléments indispensables pour présenter un point sont :

un titre
une rapide description
la longitude
la latitude

Les autres éléments peuvent être génériques. Ils seront définis dans la vue dans mon exemple.

Etape 2 : La vue Notes
Après création de la nouvelle vue, cocher l'option "Traiter contenu comme code HTML".
Spécifier comme formule de colonne (faire très attention aux majuscules et minuscules des tags XML)

"<Placemark>
<description><![CDATA[" + description + "]]></description>
<name>" + titre + "</name>
<Lookat>
<longitude>" + longitude + "</longitude>
<latitude>" + latitude + "</latitude>
<range>540.68</range>
<tilt>0</tilt>
<heading>3</heading>
</Lookat>
<Point>
<coordinates>" + longitude + "," + latitude +"</coordinates>
</Point>
</Placemark>"

Etape 3 : le masque de vue
La vue étant diffusée sur le Web, on va créer un masque de vue permettant d'intégrer l'entête du fichier ainsi que le code caractère pour le support des accents en français.

Création d'un masque nommé : $$ViewTemplate For <nom de la vue Google Earth>
Cocher l'option "Type de fichier : Autres : Application/vnd.google-earth.kml+xml"
Insérer les lignes d'entête du fichier

<?xml version="1.0" encoding="iso-8859-1" ?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Document>
<name>Titre de mon flux Google Earth</name>

Insérer la vue intégrée (Dans le menu, Création\Elément Intégré\Vue)
Insérer la ligne de fermeture du fichier XML
</Document>
</kml>

Etape 4 : Intégration dans GoogleEarth
Le type MIME ayant été défini dans les options du masque de vue, il suffit d'ouvrir la vue depuis un navigateur Web pour que la fenêtre de lancement d'application vous soit proposée. Une fois validé, le nouveau flux est automatiquement intégré dans Google Earth.

Vous pouvez aussi ajouter le flux KML depuis Google Earth en ouvrant le menu Add\Network Link puis en indiquant l'URL de la vue dans le champ Location.

Limitation des droits d'accès
Attention, la base Notes doit être au moins accessible en lecture pour "Anonymous". Nous verrons par la suite comment contourner ce problème.

Exemple

Un exemple de fichier KML depuis une base Notes : http://free.dominoserver.de/it/dominoweb.nsf/googleearth.kml
Le fichier XML lisible depuis un navigateur Web : http://free.dominoserver.de/it/dominoweb.nsf/googleearth.xml

GOOGLE API - Google Earth et Google Maps les nouvelles vues de Lotus Notes

2006-06-01T19:04:00.000+02:00

Grace à GoogleEarth et GoogleMaps il est désormaispossible de présenter facilement les documents, non plus à travers des vues, mais directement sur la planète.

Le but de ce premier thème est de présenter des méthodes simples pour

visualiser les documents sous Google Earth
visualiser les documents sous Google Maps
Les limitations de l'utilisation de ces outils
simplifier la recherche de longitude et latitude

Pourquoi représenter les documents sur une carte ?

La géolocalisation des documents ne doit évidemment pas être généralisée à tous les types de documents. La première condition est évidemment de pouvoir associer une position géographique à un document. A partir de là, la représentation sur une carte peut avoir deux intérêts :

Connaître la position géographique d'un document
Connaître les documents qui existent sur une position géographique

Les deux approches sont totalement différentes. Même si Google Earth et Google Maps peuvent répondre aux deux approches, ils pourront plus ou moins facilement s'adapter nativement au besoin.

Différences entre GoogleEarth et Google Maps

Google Earth est un logiciel alors que Google Maps est un service utilisable depuis un navigateur Web récent (IE 6.0 et supp, ou Firefox).

Google Earth demande un minimum au niveau de la configuration du poste client et plus particulièrement au niveau de la carte graphique. Google propose une version complète et non limitée dans le temps que l'on peut télécharger à cette adresse : http://earth.google.com/download-earth.html

Interface Google Earth

Google Maps est accessible en français à l'adresse http://maps.google.fr. De plus google a mis à disposition une API permettant de personnaliser la carte. C'est cette API qui sera utilisée pour représenter la position des documents Lotus Notes. Pour plus d'informations sur l'API GoogleMaps vous pouvez consulter le site http://www.google.com/apis/maps/. Mais j'y reviendrai lors de la présentation de l'intégration de cet outil dans Lotus Notes.

Interface Google Maps