Principes et conseils : Construire des interfaces utilisateur WebRubriquesIntroduction
L'environnement de développement Web dans RAD 6.0 contient 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 présente les principes et concepts applicables à l'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 immédiatement utiliser 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 :
Commencez par élaborer un diagramme hiérarchique représentant la structure de votre site Web. Un tiroir de sites est disponible dans la vue de palette pour vous permettre d'effectuer un glisser-déplacer dans le diagramme de nouvelles pages, de pages existantes et de projets, 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 personnalisable pour afficher uniquement les liens appropriés en fonction de la structure du site (vous pouvez par exemple afficher uniquement les liens Haut, Parent, et Premier enfant). 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. L'éditeur de navigation permet d'appliquer facilement un canevas aux pages sélectionnées de votre diagramme (ou à la totalité d'entre elles). 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. Cliquez deux fois sur une page pour lancer l'assistant de création de page. Il permet de sélectionner l'un des types de page pris en charge (reportez-vous à la 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 désormais composer et modifier le contenu de la page Web. Notez qu'un tiroir de navigation dans les sites Web est automatiquement disponible dans la vue de palette et vous permet d'effectuer un glisser-déplacer 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 de la technologie HTML, JSP et Faces JSP. Chacune représente un choix d'implémentation qui répond aux besoins 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 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 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 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 fait en outre 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 marquage (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 canevass 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 à Concepts : 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 des éléments 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 Struts. Cet outil inclut automatiquement l'accès aux bibliothèques 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 Concepts : Infrastructures d'applications Web. Il offre l'accès à la bibliothèque 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 d'éléments 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 :
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.
* 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
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 de palette La vue de 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 de 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.
Tableau 3 - Outils de palette par défaut par type de page
Vue de modification rapide Cette vue vous permet d'ajouter rapidement des éléments 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 de modification rapide. Elle vous permet de sélectionner un événement et d'ajouter un script pour ce dernier. Pour cela, procédez comme suit :
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 :
|
RUP (Rational Unified Process)
|