Domino & Web 2.0

ASTUCE - Avertissement avant de quitter une page Web

noreply@blogger.com (Anonymous) — Thu, 12 Apr 2007 11:09:00 +0000

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"

noreply@blogger.com (Anonymous) — Mon, 26 Mar 2007 11:08:00 +0000

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

noreply@blogger.com (Anonymous) — Sun, 11 Mar 2007 09:53:00 +0000

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

noreply@blogger.com (Anonymous) — Wed, 25 Oct 2006 19:19:00 +0000

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

noreply@blogger.com (Anonymous) — Thu, 14 Sep 2006 19:28:00 +0000

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

noreply@blogger.com (Anonymous) — Sun, 10 Sep 2006 18:57:00 +0000

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

noreply@blogger.com (Anonymous) — Sun, 03 Sep 2006 20:10:00 +0000

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

noreply@blogger.com (Anonymous) — Sun, 03 Sep 2006 20:03:00 +0000

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

noreply@blogger.com (Anonymous) — Sat, 19 Aug 2006 12:54:00 +0000

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

noreply@blogger.com (Anonymous) — Thu, 17 Aug 2006 20:18:00 +0000

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

noreply@blogger.com (Anonymous) — Thu, 17 Aug 2006 01:03:00 +0000

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

noreply@blogger.com (Anonymous) — Wed, 16 Aug 2006 19:05:00 +0000

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

noreply@blogger.com (Anonymous) — Tue, 08 Aug 2006 20:08:00 +0000

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

noreply@blogger.com (Anonymous) — Mon, 07 Aug 2006 17:32:00 +0000

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

noreply@blogger.com (Anonymous) — Mon, 07 Aug 2006 12:27:00 +0000

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

noreply@blogger.com (Anonymous) — Wed, 26 Jul 2006 17:19:00 +0000

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

noreply@blogger.com (Anonymous) — Sat, 22 Jul 2006 10:36:00 +0000

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

noreply@blogger.com (Anonymous) — Sat, 22 Jul 2006 08:31:00 +0000

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

noreply@blogger.com (Anonymous) — Tue, 18 Jul 2006 09:27:00 +0000

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

noreply@blogger.com (Anonymous) — Sun, 16 Jul 2006 15:36:00 +0000

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é

noreply@blogger.com (Anonymous) — Wed, 12 Jul 2006 11:56:00 +0000

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

noreply@blogger.com (Anonymous) — Sun, 09 Jul 2006 23:03:00 +0000

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

noreply@blogger.com (Anonymous) — Fri, 07 Jul 2006 21:54:00 +0000

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

noreply@blogger.com (Anonymous) — Fri, 07 Jul 2006 20:06:00 +0000

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é

noreply@blogger.com (Anonymous) — Wed, 05 Jul 2006 11:11:00 +0000

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.