Préambule▲
XMLRAD est un outil de haut niveau d'exigence. Il utilise strictement les standards (HTML, SQL, XML, etc.) ce qui n'est pas le cas des outils de fabrication de sites Internet. De plus, il n'autorise aucun laxisme (déclaration de variable et de fonction n'importe où et sans déclaration préalable de type), se conformant strictement aux principes de la recommandation XML (modularité, séparation stricte des étapes du développement, etc.). Cette rigueur (qui devrait être la norme) se retrouve jusque dans la maintenance des applications. L'accoutumance à cette pratique sera toujours bénéfique, même avec les outils anciens.
Enfin, XMLRAD automatise entièrement toutes les facettes du développement d'application http. Les écrans Web étant devenus à leur tour des standards, XMLRAD les fabrique tous. Le développeur n'a plus qu'à se consacrer à la diffusion juste et utile des données. C'est de cette puissance que peut bénéficier le développeur de sites graphiques qui accepte de changer d'outils.
Introduction▲
Certes, le besoin dominant (dans une proportion de 99 sur 100) est la fabrication de sites Intranet privilégiant la mise à disposition immédiate de toute donnée nécessaire à la prise de décision dans l'environnement fonctionnel de l'entreprise.
Cet article montre la création de sites Internet avec XMLRAD. C'est-à-dire des sites orientés vers l'internaute extérieur à l'entreprise, ayant cette fois une approche plus graphique tout en conservant sa rigoureuse gestion des données. Ce qui permettra la remontée de méta données concernant la vie de ce site.
L'usage de XMLRAD, pour des développeurs d'applications habitués aux outils classiques est de nature à faire prendre conscience de la validité du développement dans le cadre strict de la recommandation XML (qui est loin de se limiter à un simple format de données).
Par ailleurs, cette autre possibilité de XMLRAD (connu pour le développement d'intranet) montre également la très grande souplesse de cet outil de développement.
Première création du site▲
On envisage de créer le site d'une petite librairie.
Notre client nous a fourni son système d'information et l'on en a construit avec MySQL, la Base de données meslivressql est accessible par un clic sur WAMP5 / PHP MyAdmin, comme le montre l'écran suivant sous PHPMyAdmin. (elle est extrêmement rudimentaire pour les besoins de cet article).
En cliquant sur Bases de données, on voit la base nécessaire à l'application.
La source de données étant assurée, on peut commencer la création du site. On crée la première ossature du site par l'usage de DDA.
Précision : DDA pour Data Driven Architecture est une technologie qui prend les données, les examine et construit autour d'elles toute l'application. C'est une orientation radicalement différente de la pratique usuelle qui privilégie le codage dans laquelle d'ailleurs, les données viennent le plus souvent se noyer. (Prenons l'exemple d'un code PHP qui n'interdit pas de mélanger, instructions PHP, le code HTML, requêtes SQL, données, etc.le débogage est alors un débogage de … code, à la charge du client.) Comme le répète l'équipe des concepteurs de XMLRAD, cet outil met la donnée au centre de tout et construit autour. (Le débogage est alors un simple suivi de la donnée tout au long du processus de développement.)
Concrètement cette technologie DDA permet par une série de neuf clics de créer complètement l'application Web. Cet exploit repose sur le choix exclusif des standards (SQL, HTML, XML, XSL-T, etc.).
On peut toutefois rappeler les étapes de cette construction d'application : 0 - sur le niveau zéro de XMLRAD (là où l'on se trouve au départ), choisir "Créer un nouveau projet"
On obtient l'écran :
On appuie sur suivant.
1 - choix du nom. On prendra bien soin d'indiquer le langage de développement (ici DELPHI 7 pour Apache 2.0)
Suivant
2 - on choisit le type de serveur de données
Suivant
3 - on vérifie l'authentification du serveur de données :
Suivant
4 - on choisit la base de données fournie par le serveur (clic sur la liste déroulante)
On clique sur Terminer.
On voit alors que XMLRAD est capable de lire la structure des tables fournies par la base de données.
On a ainsi le schéma de la base de données. On remarque que XMLRAD est capable de reconnaître les clés étrangères (d'où l'intérêt de la convention de nommage). Clic sur suivant.
Dans le sens d'une plus grande simplicité, on confirme tous les écrans suivants.
5 - le choix des formes
Suivant
6 - description
(on n'a qu'une partie de l'écran, dans la partie basse, on clique sur Suivant)
7 - détail de la description. Il s'agit de vérifier toutes les WebFormes liées :
Suivant
8 - simple vérification des emplacements :
En descendant l'écran, on clique sur : "Construction de l'application" :
9 - l'application est construite
Il ne reste plus qu'à la tester. Pour cela on clique sur le niveau zéro (ici le nom de l'ordinateur : Felix_Port) et l'on trouve l'application réalisée par XMLRAD.
En sélectionnant PetiteLibrairieSQL, on clique sur la commande du menu central "exécuter le projet"
On obtient la première page de l'application construite :
Ce qui est formidable c'est que l'on est dans cet écran de navigateur, en présence directe de l'application telle qu'elle serait si on l'avait installée et qu'un internaute la consulte.
On a bien construit une application en neuf clics de souris. Cette présentation est l'allure standard de toute application de type intranet. Elle ne convient pas forcément pour l'objectif que l'on s'est fixé. On souhaite se rapprocher de l'esthétique des sites Internet.
Transformations pour la création du site Internet▲
Dans un premier temps on va construire une fenêtre portail tout à fait nouvelle, puis l'on va modifier l'allure des écrans Web de l'application (on en fera qu'un pour l'exemple).
Mise en place d'un nouveau portail▲
on se positionne sur PortalWM.
Juste un petit mot pour s'y retrouver : on voit dans la partie gauche une arborescence des diverses "composantes" du projet (on parle de niveaux) dmdXMLAdmin, Main et PortalWM sont appelés des XMLModules. Un XMLModule est comparable à un dossier qui regroupe des XMLServices ayant des caractéristiques communes (toutes les pages Web pour l'affichage du portail, etc.)
C'est dans le XMLModule que se trouve tout ce qui est nécessaire à l'affichage de la page portail. C'est donc dans ce XMLModule que l'on se pose pour créer le nouveau portail.
Pour effectuer cette création de nouvelle page, on se place dans le menu central et l'on choisit "divers" comme type d'assistant puis "Fiche vide" :
Clic sur Suivant.
On renomme en "FormAccueil" ce nouveau XMLService. On remarque que les fichiers .xmlgram et .xsl sont modifiés en conséquence.
Clic sur "Terminer".
On souhaite que ce soit cet écran qui soit affiché en premier. Pour cela on se positionne sur ce XMLService puis dans le menu central on clique sur "Définir en tant qu'action par défaut".
C'est cette page qui sera affichée au lancement du site. Ce que l'on peut tester tout de suite en exécutant le projet :
Lorsque l'on a précisé pour ce WebService, qu'il s'agit de la page par défaut, bien évidemment la précédente (FormPortal) ne l'est plus. On va procéder à quelques modifications :
- simplement visuelles : nuance de fond, image de taille réduite, animée ou non ;
- fonctionnelle : il s'agira d'ajouter des composants permettant l'affichage des données.
Ces modifications concernent aussi bien cette page d'accueil que les écrans Web existants. On détaille donc dans la rubrique suivante.
modification d'écrans Web existants▲
Les modifications visuelles vont porter sur :
- la suppression d'éléments inhabituels dans un site à prédominance graphique ;
- l'insertion d'une nuance de fond, correspondant à la chartre graphique ;
- l'insertion de quelques images animées ou non de bandeaux, etc.
Et ce sera tout (ou presque), car il ne faut jamais oublier la bande passante, et la patience de l'internaute qui sont tout de même très limitées.
l'insertion d'éléments de caractères graphiques▲
On retrouve les instructions HTML bien connues :
- l'insertion d'un fond d'écran, c'est l'instruction: <BODY BACKGROUND='image_de_fonD.jpg> Rappel : le fait de rendre une image transparente est du ressort d'un logiciel de traitement d'images ;
- l'insertion d'une image fixe : <IMG SRC="images/mon_image.gif NAME="son_nom"WIDTH=x HEIGHT=y ALT="le titre affiché"BORDER=1 ALIGN="left"> ;
- la mise en place de zones réactives permettant le lancement d'une autre page. <AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées" HREF="adresse_destination" ALT="commentaire"> ;
- enfin l'insertion d'une image animée : c'est également un fichier .gif (constitué de plusieurs images) qui représente de ce fait, une petite animation. Ce fichier s'insère comme un fichier .gif fixe. (attention à la lenteur d'affichage).
Bien évidemment, ce n'est pas le lieu de commenter ces instructions. Il suffit de savoir comment insérer ces instructions HTML dans l'un des fichiers XML.
D'abord il faut impérativement se rappeler l'ordre et l'importance des divers fichiers de la recommandation XML :
Comme il est rappelé dans plusieurs articles de ce forum XMLRAD, un fichier XML (de données) est associé par un parseur (petit programme) à un fichier XSL (d'instructions de présentation) pour donner un fichier de sortie (le plus souvent au format html).
Ce qui est résumé par le schéma que l'on trouve dans XMLRAD pour tout XMLService :
Prenons comme exemple l'insertion d'un Gif animé (les autres instructions se font semblablement).
C'est donc dans le fichier xsl que l'on va poser cette instruction HTML de représentation d'une image animée.
Dans la page portail FormeAccueil, on se pose sur le fichier constitutif xsl.
À droite de l'écran, les deux autres parties de l'écran sont fournies par un outil puissant de XMLRAD : XSLStudio qui permet de mettre en rapport la représentation visuelle et son code associé.
Au milieu de l'écran, se trouve la palette des composants XSL fournis par XSLStudio. En haut à droite de l'écran, on trouve une représentation visuelle de l'écran FormAccueil.
Revenons à notre insertion de motif visuel. On imagine que l'on veuille poser le Gif animé sous la phrase "Ceci est un formulaire simple".
On veut insérer l'image sous le texte. On clique à cet endroit et XSLStudio, donne dans la partie basse, le code XSL de cet endroit.
Il faut retrouver le code xsl (=partie de la recommandation XML qui est l'ensemble des instructions de mise en forme) correspondant à cette phrase. Pour cela, on se positionne sur la phrase. On a dans la partie basse de cet écran, toutes les instructions xsl, il faut descendre le curseur (et remonter la ligne de séparation entre les parties grise et blanche). On se pose sur "p" qui se met en surbrillance bleue (car c'est là que l'on va insérer). On a l'écran suivant :
Pour poser le GIf animé, en dessous de la phrase, on pose au préalable un saut de ligne.
Dans la colonne des composants on sélectionne d'abord Breack Line puis revenant sur la partie du code XSL marquée "p", un clic droit "insert after" permet de poser ce saut de ligne, comme le montre l'écran suivant :
On obtient bien ce saut de ligne, bien connu en HTML :
C'est sous cette séparation invisible que l'on va poser l'image animée. Pour cela, de la même façon, on sélectionne le composant "image" et l'on se pose sous ce saut de ligne, et clic droit "insert after"
On obtient l'insertion d'un composant Image, et son code xsl, comme le montre l'écran suivant :
La partie de l'écran qui affiche les instructions xsl montre bien l'instruction HTML img … src="nom du fichier image".
C'est ici que l'on indique le nom du fichier image .gif que l'on souhaite. Ici, le fichier chat010.gif (préalablement copié dans c: program files/Delos/SharedPortal/Pictos/msn). Il suffit de préciser ce nom de fichier dans l'attribut SRC.
On clique sur l'icône de disquette (tout en bas à droite) ou sur CTRL S. On obtient l'écran ainsi modifié :
Bien évidemment tout cela est à parfaire, il s'agit ici de poser les principes de manipulation. L'insertion d'image fixe est de la même nature.
La suppression d'éléments présents et inhabituels aux sites graphiques▲
Il se peut que l'on ne souhaite pas laisser des éléments visuels que l'on ne trouve pas habituellement disposés dans les sites marchands.
Imaginons que l'on veuille supprimer le menu de Forme Accueil qui se trouve à la gauche de l'onglet.
Toujours dans XSL Studio, on se positionne sur cet élément et comme d'habitude, on a en dessous, le code XSL correspondant qui commence par : xsl:call template name="xslc:ActionPanel". On sélectionne cette section (en se posant délicatement sous le mot xsl : toute la partie sélectionnée devient bleue).
Clic droit "cut" le petit menu Forme Accueil a disparu :
Et l'on obtient :
On peut de la même façon supprimer l'onglet restant en sélectionnant son code XSL et clic droit "cut", pour arriver à l'écran d'accueil simplifié selon les critères graphiques habituels :
Pour obtenir :
On vient de voir les principales modifications en vue de produire un site plutôt orienté vers l'aspect graphique des sites de représentation.
Mais ce souci ne dispense en rien d'ajouter ce qu'il faut pour l'affichage des données. Or XMLRAD a, de son côté, généré toutes les pages écrans nécessaires. Il suffit d'en assurer la jonction.
Jonction avec les pages Web …▲
Toutes les pages Web nécessaires à la circulation la présentation, la création la modification et la suppression des données sont créées d'office par XMLRAD.
Elles sont regroupées dans divers XMLModules :
- MainAdm : contient les pages Web des tables de références ;
- MainBM = BusinessModule (contient les pages Web des tables de données) ;
- MainRM = ReportModule (les pages Web pour l'impression) ;
- MainWM = WebModule (toutes les pages Web directement présentées dans le site) ;
- la page immédiatement présentée b à l'ouverture se trouve dans le XMLModule PortalWM.
En se contentant de lier ces pages à l'application, le développeur n'a plus à perdre son temps à les créer de toute pièce. Il tire profit de la puissance des sites de type Intranet. C'est tout l'intérêt de l'usage XMLRAD pour ce type d'applications.
Pour faire afficher ces pages dans une autre page, il suffit de créer un lien (opération bien connue en HTML).
Imaginons que l'on veuille afficher immédiatement la page : FormTab_Auteurs. On la trouve dans /Main/MainWM/, comme le montre l'écran suivant :
Et quand on exécute ce XMLService, on voit qu'elle a cette allure :
Pour avoir cette page dès l'ouverture de la page portail, on se positionne sur la page d'accueil que l'on a construite.
Puisqu'il s'agit d'une question de présentation, on se positionne sur le fichier xsl. De la même façon que l'on a vu pour une image, on peut insérer une ligne de séparation et un lien.
On a :
Il suffit de changer le nom de la page appelée par l'encre HTML : on remplace (dans l'instruction HREF) ListORGANIZATION par la page que l'on souhaite, en l'occurrence, FormTab_auteurs.
On sauvegarde par un simple "CTRL S".
Quand on revient au niveau zéro, celui du PC on se pose sur notre application on exécute la page portail, on a :
Quand on clique sur le lien, on obtient bien :
Ce qu'il fallait démontrer.
Bien évidemment toutes sortes d'ajustages restent à faire, le retour des pages, l'insertion d'autres XMLService, mais l'ensemble de la technique est sommairement parcouru.
Prolongements : il n'est pas difficile d'ajouter les fonctionnalités classiques d'un site marchand, telles que la gestion des contacts, des courriels, etc.
Il restera à :
- intervenir dans le déroulement des instructions ;
- effectuer le débogage des données ;
- gérer la sécurité de chaque XMLService ;
- développer la documentation ;
- les diverses versions ;
- le déploiement ;
- la supervision.
Sur tous ces points, les articles de cet onglet XMLRAD fournissent de précieux renseignements.
Conclusion▲
On a réalisé même de façon très sommaire, un véritable site Web Internet avec XMLRAD. Mais il ne s'agit là que de la première étape, finalement toute simple. La puissance de XMLRAD va s'exprimer bien au-delà de la simple réalisation de quelques écrans un peu plus aguicheurs que les écrans intranet, car il est capable de véritablement "enrichir" l'entreprise, en lui fournissant à foison, de multiples données sur le fonctionnement du site en cours de vie. Le site graphique privilégiait l'allure et se souciait peu de la donnée. Maintenant a ce graphisme, on peut ajouter la puissance de traitement de la donnée grâce à XMLRAD.
De plus, par suite de la grande diffusion actuelle, le simple site "marchand" ne se suffit plus à lui-même, il doit devenir un véritable tableau de bord en temps réel pour les décideurs.
Ce que XMLRAD rend possible par tous ses outils de monitoring, de documentation et de journalisation des évènements, sans oublier la dernière étape DDA : la supervision de toute l'application en cours d'utilisation par les internautes.
C'est là, à n'en pas douter, un gigantesque gisement de travail pour toutes les SSII qui vont se trouver confrontées d'une part à l'uniformisation XML, et d'autre part à l'inévitable optimisation de l'existant, c'est-à-dire tous les sites qui devront nécessairement apporter plus que l'information sur les produits !
Les développeurs habitués aux outils classiques de développement Web (plus ou moins propriétaires et surtout non standards) ont ainsi une opportunité à ne pas manquer : XMLRAD de par son choix exclusif de la recommandation XML et de ses standards associés, donne une avance considérable dont on tirera longtemps le profit.
Aussi pour continuer sur cette lancée, on lira avec le plus grand profit les deux articles de Jean Philippe Bempel dans le même site : "Statistiques et montée en charge de votre application XMLRAD" et "Instruction Cache : augmentez les performances de votre application XMLRAD".