> Tech > Editeur de Web Diagram

Editeur de Web Diagram

Tech - Par iTPro - Publié le 24 juin 2010
email

Pour commencer à  éditer en utilisant la fonction Web Diagram, sélectionnez le projet Web puis, dans le menu principal, choisissez File, New et Other. Sélectionnez la catégorie Web/Struts à  gauche, puis choisissez Web Diagram à  droite.
L'écran suivant permet de donner un nom à  votre fichier Web Diagram. Choisissez un

Editeur de Web Diagram

nom librement et cliquez
sur Finish. Cela crée et ouvre le fichier
dans l’éditeur Web Diagram et
vous permet de commencer à  concevoir
votre diagramme Web. La vue qui
s’ouvre est connue sous le nom de FFS
(Free Form Surface). Vous vous souvenez
qu’un diagramme Web est tout
simplement un fichier qui aide à  visualiser
la structure des flux de tout ou
partie d’une application Web basée sur
Struts. Vous pouvez créer autant de fichiers
Web Diagram que vous le souhaitez.
En sauvegardant le fichier, notez
que l’extension .gph est créée.
Vous pourrez toujours revenir à  l’éditeur
Web Diagram par un double clic
sur ce fichier.
Parvenu à  ce stade, vous pouvez
commencer à  éditer et concevoir
l’application. Mais, avant d’aborder
cette phase, voyons quelques fonctions
de la vue que vous utiliserez. La figure
3 montre l’éditeur Web Diagram.
A droite, sous Palette, se trouvent plusieurs
boutons : chacun représente un
outil servant à  tracer le diagramme. Les
choix suivants sont proposés :

  • Le bouton Select pour sélectionner
    les objets sur le diagramme.
  • Le bouton Connection pour
    connecter deux objets (noeuds) sur le
    diagramme Web, afin de créer un flux
    dans le modèle.

  • Le bouton Action Mapping
    Node pour représenter une action
    Struts, qui encapsule la logique de gestion invoquée pour un bouton ou un lien sur une page Web.

  • Le bouton Form Bean Node pour représenter un
    noeud Form Bean. En tant que développeur Web iSeries,
    vous n’aurez pas besoin de l’utiliser, car le wizard iSeries Web
    Interaction créera lui-même le form bean.

  • Le bouton Java Bean Node pour créer un bean node
    Java pour les cas où vous voudrez appeler ou utiliser un Java
    bean. Là  encore, vous n’aurez pas besoin d’utiliser ce bouton.

  • Le bouton Web Page Node pour représenter une page
    node Web (c’est-à -dire, un JSP ou un simple fichier HTML).

En principe, ce n’est qu’à  un stade plus avancé que vous
serez amenés à  utiliser les boutons Web Application Node ou
Struts Module Node. Outre l’utilisation de la palette, vous
pouvez facilement obtenir des options similaires en cliquant
du bouton droit sur le FFS. Sélectionnez New pour afficher
les mêmes options que celles de la figure 3.
Si nous utilisons l’application d’interrogation client ou
l’application de consultation de stock pour illustrer ce processus,
nous suivrons les étapes ci-après pour construire le
diagramme basé sur Struts :

  1. Créez un page node Web pour représenter une JSP en cliquant
    du bouton droit et en sélectionnant New et Web
    Page Node. Appelons-le input.jsp. On obtient un noeud
    grisé qui est l’ébauche d’une prochaine page Web.

  2. Répétez l’étape 1, mais appelez la seconde page result.
    jsp.

  3. Vous êtes prêts à  créer un noeud représentant l’action qui
    exécutera une certaine logique déclenchée par un bouton
    actionné sur la page d’entrée. (Dans notre cas, ce sera probablement
    une procédure RPG ou Cobol existante résidant
    sur l’iSeries.) Pour accomplir cela, placez le curseur
    entre et au-dessus des noeuds existants, faites un clic droit
    et sélectionnez New et Action Mapping Node. Comme aux
    étapes 1 et 2, il vous sera demandé de donner un nom à 
    l’action. Appelons-la Inquiry Procedure.

  4. Nous avons créé les noeuds représentant tous les objets
    pour notre simple interaction, sauf pour les connexions
    chargées de représenter le flux. Nous devons connecter la
    page d’entrée à  la logique puis connecter la logique à  la
    page de sortie. Pour cela, sélectionnez d’abord l’icône
    Connection dans la palette. Puis, déplacez le curseur et sélectionnez
    le noeud input.jsp. Enfin, amenez le curseur sur
    l’action InquiryProcedure et cliquez dessus pour accepter
    la connexion. Signalons que cet outil est sensible à  la direction,
    aussi il faut suivre dans l’ordre les étapes décrites
    ci-dessus.

  5. Vous devez créer une autre connexion allant du noeud
    d’action appelé InquiryProcedure à  la page result.jsp. Et
    voilà  !

Nous venons de dessiner une
partie de l’application Web en identifiant
les pages Web, la logique de
gestion, et le flux qui les relie. C’est
volontairement que nous avons
pris un exemple extrêmement
simple. Dans la pratique, il y aura
de nombreuses pages et au moins
une action par page d’entrée. Et
aussi des pages de sortie multiples
à  partir d’une action, ce qui suppose
une certaine logique de
contrôle dans l’action pour choisir
laquelle montrer, généralement
d’après les données renvoyées par
l’appel de la logique de gestion. A
ce propos, il est important de savoir
que, bien que nous ayons un noeud
d’action par bouton cliquable sur
chaque page d’entrée (sauf si le
bouton est traité par JavaScript), la
classe d’action Struts elle-même ne
contient presque jamais directement
la logique de gestion : elle
l’appelle plutôt. Mais ce détail
n’entre pas dans le cadre de ce que
nous devons capturer dans l’éditeur
Web Diagram pour avoir une
vue d’ensemble de l’application
Web.
L’étape suivante consiste à 
commencer la réalisation des
noeuds dans le diagramme Web en
créant concrètement les fichiers
qu’ils représentent. Le plus souvent,
on procède en faisant un clic
droit sur le noeud et en sélectionnant
Open ou en double-cliquant
dessus. Cette opération crée le
fichier et ouvre l’éditeur approprié
le concernant. Mais en tant que
développeurs iSeries, la manoeuvre
est un peu plus facile pour vous : il
vous suffit de cliquer du bouton
droit sur l’action node et de sélectionner
Open iSeries Web Interaction
Wizard. Ce wizard se chargera
de générer tous les fichiers, y
compris la classe d’action, pourvu
qu’on lui donne une procédure ou
un programme RPG ou Cobol à 
appeler.
Intéressant, non ? Bien sûr !
Mais nous vous donnons rendezvous
le mois prochain pour avoir
les détails de cette opération et
d’autres fonctions des outils Web.

Téléchargez cette ressource

SD-WAN de confiance : guide de mise en œuvre

SD-WAN de confiance : guide de mise en œuvre

Ce livre blanc décrit les différents aspects indispensables pour la mise en place d’une approche SD-WAN sécurisée et de confiance. Ce document s’adresse aux consultants et responsables sécurité des systèmes d’information pour bien comprendre les enjeux du Trusted SD-WAN à l’heure de la transformation numérique des entreprises.

Tech - Par iTPro - Publié le 24 juin 2010

A lire aussi sur le site

Revue Smart DSI

La Revue du Décideur IT