Introduction
L'environnement de développement Web de RAD 6.0 fournit un ensemble complet d'outils permettant de construire
rapidement des interfaces utilisateur Web. Il inclut un concepteur de sites Web et un concepteur de
pages, ainsi qu'un grand nombre d'assistants destinés à simplifier la création de pages Web complexes. Ce document
fournit des instructions permettant une utilisation efficace de ces outils dans le but de créer des interfaces
utilisateur Web. Pour cela, il décrit une approche de développement, identifie les types de pages pris en charge et met
en évidence les fonctions facilitant la création d'une page Web.
Approche de développement
Bien que vous puissiez utiliser immédiatement le concepteur de pages pour la création d'une page Web dans
votre interface utilisateur, RAD 6.0 recommande une approche de développement descendante utilisant le concepteur
de sites Web comme point de départ. Son éditeur de navigation vous permet d'effectuer les opérations
suivantes :
-
Définir la structure de navigation de votre site Web :
Commencez par élaborer un diagramme hiérarchique représentant la structure de votre site Web. Un tiroir
Sites est disponible dans la vue Palette pour vous permettre de glisser-déposer de nouvelles
pages, des pages existantes et des projets dans le diagramme, puis de les organiser par groupes. L'éditeur
permet d'ajouter, de supprimer et de réorganiser facilement les pages de façon visuelle. La création d'un
diagramme de navigation permet au concepteur de sites Web d'identifier automatiquement les liens de
navigation entre vos pages Web (et d'en faire le suivi), puis de générer une carte du site. Ultérieurement,
lors de la création d'une page à l'aide du concepteur de pages, vous pourrez ajouter des éléments de
navigation, comme par exemple une barre ou un menu de navigation, personnalisables pour afficher uniquement les
liens appropriés en fonction de la structure du site (vous pouvez par exemple afficher uniquement les liens
Haut, Parent, Soeur/frère et Premier enfant).
-
Appliquer un canevas de page :
Un canevas de page définit les éléments visuels et la présentation communs à toutes vos pages et vous permet
d'appliquer une présentation homogène à votre site Web. Vous pouvez créer un canevas de page à l'aide d'un
assistant au moment de la création de votre projet Web, ou encore ultérieurement de manière indépendante.
L'éditeur de navigation permet d'appliquer facilement un canevas aux pages sélectionnées de votre
diagramme (ou à toutes les pages). Il est conseillé d'incorporer vos éléments de navigation au canevas et
d'appliquer ce dernier à toutes vos pages, afin que votre site Web soit homogène au niveau des commandes de
navigation.
-
Sélectionner le type de page à utiliser pour chaque page Web :
Cliquez deux fois sur une page pour lancer l'assistant de création de page. Cet assistant permet de
sélectionner l'un des types de page pris en charge (voir Sélection du type de page), de spécifier des
propriétés initiales de page et d'ouvrir le type de page dans l'éditeur du concepteur de pages. Vous
pouvez à présent composer et modifier le contenu de la page Web. Notez qu'un tiroir Navigation dans les
sites Web est automatiquement disponible dans la vue Palette et vous permet de glisser-déposer
des éléments de navigation dans votre page.
Sélection du type de page
RAD 6.0 prend en charge la création d'interfaces utilisateur Web à l'aide des technologies HTML, JSP et Faces JSP.
Chacune représente un choix d'implémentation qui répond aux exigences de différents types d'applications Web. Chaque
technologie définit également un type de page prenant en charge différentes fonctions d'interfaces utilisateur Web.
Lorsque vous créez une interface utilisateur Web, il est donc important de bien comprendre les fonctions prises en
charge par chaque type de page et de savoir si elles sont adaptées au type d'application Web en cours de développement.
Les sections ci-après identifient les fonctions des interfaces utilisateur Web prises en charge par les différents
types de pages dans RAD 6.0 et spécifient les types de pages pouvant être utilisés dans les applications Web à
infrastructure préfabriquée statique, dynamique, Struts et JSF (JavaServer Faces).
Fonctions des interfaces utilisateur prises en charge
Les différents types de pages contenus dans RAD 6.0 pour l'implémentation des interfaces utilisateur Web peuvent être
regroupés en trois catégories : HTML, JSP et Faces JSP. Le type de page JSP approfondit la distinction entre les
fichiers JSP simples et les pages JSP Struts. De la même façon, un type de page JSP Faces peut représenter un type JSP
Faces de base ou un type JSP Faces avec mise en mémoire cache côté client. Les différents types de pages sont décrits
ci-après.
HTML
Ce type de page permet de créer une page HTML de base et prend en charge d'autres langages de balisage (voir le tableau
1 - Fonctions des types de pages). Les fonctions HTML classiques telles que l'agencement de cadres, les feuilles de
style en cascade et les scripts JavaScript sont également prises en charge. Cet outil permet en outre de définir et
d'utiliser des canevas de pages en vue de la création d'une présentation homogène dans les différentes pages Web.
JSP
Le type de page JSP est destiné aux interfaces utilisateur implémentées à l'aide de la technologie JSP (RAD 6.0 prend
en charge la norme JSP 2.0). Toutes les fonctions d'une page HTML de base sont disponibles et complétées par la
technologie d'élaboration de scripts JSP (Java Scriptlet) et d'action (balises personnalisées). Cet outil permet de
définir un fragment JSP pour factoriser les parties communes d'une page en un fichier séparé à inclure dans d'autres
pages JSP, selon les besoins. L'accès aux données à l'aide de la technologie SDO (Service Data Object) est également
pris en charge (pour obtenir la description des SDO, reportez-vous à Concept : Infrastructures d'applications Web).
JSP Struts
Une page JSP Struts permet d'étendre une page JSP simple grâce à la prise en charge automatique d'éléments Struts
spécifiques (pour obtenir la description de Struts, reportez-vous aux Concepts : Infrastructures d'applications Web).
Elle doit être utilisée en vue du développement d'interfaces utilisateur Web, pour les applications implémentées à
l'aide de l'infrastructure préfabriquée Struts. Cet outil inclut automatiquement l'accès aux bibliothèques Struts de
balises HTML (struts-html.tld) et Bean (struts-bean.tld) et permet d'inclure directement dans la page des zones en
provenance d'un bean ActionForm. Vous pouvez également ajouter d'autres bibliothèques Struts.
JSP Faces
Le type de page JSP Faces a été spécialement conçu pour les interfaces utilisateur Web implémentées à l'aide de la
technologie JSF (pour obtenir une description de JSF, reportez-vous aux Concept : Infrastructures d'applications Web. Il offre l'accès à la bibliothèque
principale de balises JSF et aux composants prédéfinis des interfaces utilisateur (composants Faces) pouvant être
placés dans la page. Par ailleurs, le type de page JSP Faces prend en charge l'élaboration de scripts à l'aide de
fragments Java (par exemple, pour spécifier la gestion des événements de composants d'interfaces utilisateur).
JSP Faces avec mise en mémoire cache côté client
Ce type de page constitue une extension du type JSP Faces car il fournit des composants d'interfaces utilisateur dont
les données peuvent être mises en mémoire cache côté client. La mise en mémoire cache côté client permet de lier un
composant à des variables JavaScript (par opposition aux données côté serveur). Cela permet d'optimiser le
fonctionnement des pages Web car le nombre d'allers-retours entre le client et le serveur est limité. Les composants
client Faces fournis incluent :
-
Grille de données : affiche dans une table les enregistrements d'une source de données relationnelle ou les
éléments issus des JavaBeans.
-
Graphique : présente les données dans un graphique à barres, à secteurs ou à lignes. Pour que vous puissiez
utiliser les graphiques, le plug-in Flash Macromedia doit être installé sur le navigateur.
-
Vue d'arborescence : affiche les données hiérarchiques au sein d'une structure en forme d'arborescence.
-
Service Web : permet aux pages de type Faces d'extraire les données d'un service Web existant sans actualiser la
page.
Le tableau ci-après répertorie les fonctions prises en charge par chaque type de page et peut être utilisé comme guide
pour déterminer le type répondant le mieux aux exigences de l'interface utilisateur d'une application Web.
Type de page
|
Langage de balisage
|
Prise en charge des feuilles de style en cascade
|
Prise en charge des canevas de page
|
Syntaxe XML
|
Prise en charge des scripts
|
Accès aux données SDO (*)
|
HTML
|
HTML 4.01
HTML 4.01 Frameset
Compact HTML 1.0
XHTML 1.0 ou 1.1
XHTML 1.0 Frameset
WML 1.3
|
Oui
Oui
Non
Oui
Oui
Non
|
Oui
Non
Non
Oui
Non
Non
|
S/O
|
JavaScript
|
S/O
|
JSP
|
HTML 4.01
HTML 4.01 Frameset
Compact HTML 1.0
XHTML 1.0 ou 1.1
XHTML 1.0 Frameset
WML 1.3
|
Oui
Oui
Non
Oui
Oui
Non
|
Oui
Non
Non
Oui
Non
Non
|
Non
Non
Non
Oui
Oui
Oui
|
JavaScript
Java Scriptlet
Balise personnalisée
|
Oui
|
JSP Struts
|
HTML 4.01
HTML 4.01 Frameset
XHTML 1.0 ou 1.1
XHTML 1.0 Frameset
|
Oui
Oui
Oui
Oui
|
Oui
Non
Oui
Non
|
Non
Non
Oui
Oui
|
JavaScript
Java Scriptlet
Balise personnalisée
|
Oui
|
JSP Faces
|
HTML 4.01
XHTML 1.0 ou 1.1
|
Oui
Oui
|
Oui
Oui
|
Non
Oui
|
JavaScript
Java Scriptlet
Balise personnalisée
Fragment Java
|
Oui
|
JSP Faces avec mise en mémoire cache côté client
|
HTML 4.01
XHTML 1.0 ou 1.1
|
Oui
Oui
|
Oui
Oui
|
Non
Oui
|
JavaScript
Java Scriptlet
Balise personnalisée
Fragment Java
Macromedia Flash
|
Oui (avec mise en mémoire cache côté client)
|
* L'accès aux données SDO nécessite la sélection de WAS v5.1 comme cible de déploiement
Tableau 1 - Fonctions de types de pages
Applicabilité des applications Web
Le type de page à utiliser pour l'implémentation d'une interface utilisateur Web dépend en premier lieu du type
d'application Web en cours de développement. Pour les applications Web statiques, le choix est simple, car le type de
page HTML constitue la seule possibilité. Pour les applications Web dynamiques, vous pouvez utiliser à la fois des
pages HTML et des pages JSP. En outre, si vous développez une application Web dynamique à l'aide de l'infrastructure
préfabriquée Struts ou JSF, vous pourrez tirer parti de l'utilisation des types de pages propres à ces technologies.
Cela vous permettra de bénéficier du support spécialisé offert par cet outil et de créer facilement votre interface
utilisateur. Le tableau 2 illustre l'applicabilité de chaque type de page pour les applications Web statiques,
dynamiques et pour celles qui utilisent les infrastructures préfabriquées Struts et JSF.
Type de page
|
Application Web statique
|
Application Web dynamique (non basée sur l'infrastructure préfabriquée)
|
Application Web Struts
|
Application Web JSF
|
HTML
|
Oui
|
Oui
|
Oui
|
Oui
|
JSP
|
Non
|
Oui
|
Oui
|
Oui
|
JSP Struts
|
Non
|
Non
|
Oui (recommandé)
|
Non
|
JSP Faces
|
Non
|
Non
|
Oui (avec bibliothèque d'intégration)
|
Oui (recommandé)
|
JSP Faces avec mise en mémoire cache côté client
|
Non
|
Non
|
Oui (avec bibliothèque d'intégration)
|
Oui (recommandé)
|
Tableau 2 - Applicabilité des types de pages
Modification de pages
Le concepteur de pages représente l'outil utilisé dans RAD 6.0 pour modifier une page Web. Il fournit une vue
de l'éditeur central qui permet de créer une page sur la base d'un code source visuel (WYSIWYG) ou textuel. Cet outil
utilise d'autres vues pour le développement de différents types de pages Web. En particulier, les vues suivantes
facilitent énormément l'édition de pages :
Vue Palette
La vue Palette offre un ensemble varié de composants d'interface utilisateur prêts à l'emploi, que vous pouvez placer
dans une page. Elle les organise en tiroirs qui regroupent les composants possédant les mêmes fonctionnalités. Par
exemple, les éléments HTML standard tels que les boutons, les zones de texte et les listes déroulantes sont regroupés
dans le tiroir Balises de présentation. La liste de tiroirs affichée dans la vue Palette varie en fonction du
type de page édité. Le tableau 3 dresse la liste des tiroirs par défaut indiqués pour chaque type de page pris en
charge. Vous pouvez personnaliser la palette et la plupart des tiroirs via l'ajout, la suppression, le masquage ou
l'affichage des tiroirs et des composants, respectivement. Pour obtenir la description de chaque tiroir et de son
contenu par défaut, consultez la documentation produit.
Tiroir de palette
|
HTML
|
JSP
|
JSP Struts
|
JSP Faces
|
JSP Faces avec mise en mémoire cache côté client
|
Balises HTML
|
X
|
X
|
X
|
X
|
X
|
Balises de présentation
|
X
|
X
|
X
|
|
|
Canevas de page
|
X
|
X
|
X
|
X
|
X
|
Navigation sur site Web
|
X
|
X
|
X
|
X
|
X
|
Portail
|
X
|
X
|
X
|
X
|
X
|
Balises JSP
|
|
X
|
X
|
X
|
X
|
Données
|
|
X
|
X
|
X
|
X
|
Composants Faces
|
|
|
|
X
|
X
|
Composants client Faces
|
|
|
|
|
X
|
Balises HTML Struts
|
|
|
X
|
|
|
Balises Bean Struts
|
|
|
X
|
|
|
Balises logiques Struts
|
|
|
X
|
|
|
Balises imbriquées Struts
|
|
|
masquées
|
|
|
Balises de présentation en mosaïques Struts
|
|
|
masquées
|
|
|
Tableau 3 - Tiroirs de palette par défaut par type de page
Vue Edition rapide
Cette vue vous permet d'ajouter rapidement des fragments de code Java à votre page. Lorsque vous sélectionnez un
composant dans votre page, une liste des éléments appropriés s'affiche dans le panneau gauche de la vue Edition rapide.
Elle vous permet de sélectionner un événement et d'ajouter un script pour ce dernier. Pour cela, procédez comme suit :
-
Entrez directement le script dans l'éditeur de scripts, dans le panneau de droite.
-
Cliquez avec le bouton droit de la souris sur l'éditeur de scripts, puis sélectionnez Insérer fragment
et choisissez un fragment dans la liste contextuelle qui s'affiche.
Ressources
Pour obtenir des informations détaillées sur le concepteur de sites Web et sur le concepteur de
pages, reportez-vous à la documentation du produit :
-
Lancez Rational Application Developer v6.0.
-
Dans la barre du menu, sélectionnez Aide > Table des matières.
-
Développez Développement d'application Web.
-
Explorez Conception de site Web ou Conception de page Web.
|