Instructions: Conception d'interfaces utilisateur Web
Ces instructions expliquent comment construire des interfaces utilisateur Web à l'aide de l'environnement de modélisation RAD6.0.
Relations
Description principale

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 :

  1. Lancez Rational Application Developer v6.0.
  2. Dans la barre du menu, sélectionnez Aide > Table des matières.
  3. Développez Développement d'application Web.
  4. Explorez Conception de site Web ou Conception de page Web.