Applications Web : Communications entre Composants
Une des fonctionnalités majeures de l’environnement WebObjects est la possibilité de définir des composants web et de partager des données entre eux.
Comme mentionné précédemment, WebObjects est un système fortement orienté objet. Il permet une encapsulation facile de données dans des composants et des classes personnalisées et facilite le partage de données entre composants quand l’application s’exécute.
Dans ce chapitre, vous allez :
- encapsuler des données dans une classe personnalisée,
- apprendre comment WebObjects suit les chemins d’accès aux clés,
- ajouter un composant web à une application,
- instancier programmatiquement des composants web et les renvoyer à l’utilisateur,
- passer des informations entre des composants web.
Objets Personnalisés
Dans le projet “Saisie Utilisater” décrit dans les pages “Gestion des Saisies Utilisateurs”, les données Nom et Nourriture sont stockées dans des variables d’instance du composant Main, renonçant ainsi aux avantages d’un système orienté objet.
Si vous souhaitez passer les informations que l’utilisateur saisit à d’autres composants, vous devez passer les deux valeurs. Si vous aviez plus d’informations relatives à une personne particulière, vous auriez à passer chaque donnée séparément. Il serait alors plus commode d’encapsuler toutes les données d’une personne dans un seul objet et passer cet objet de composant en composant. Puisque WebObjects est pleinement orienté objet, vous pouvez définir un objet personnalisé afin qu’il contienne les données saisies par l’utilisateur.
Pour le moment, vous allez encapsuler les mêmes données dans un objet. Par la suite, ce type d’encapsulation est exactement ce qui vous permettra d’utiliser une base de données en tant que système persistant de stockage de données.
Une fois que vous avez défini la classe User avec les propriétés appropriées, vous ajoutez une variable d’instance User au composant Main et vous modifiez le WOTextFields de Main.wo pour utiliser les propriétés de cette variable à la place des variables personName et favoriteFood.
Ajout de la Classe Personnalisée
Cette section vous guide au travers de la création de la classe personnalisée User et de son ajout au projet “UserEntry”.
- Assurez-vous que le projet UserEntry est ouvert dans Project Builder.
- Sélectionnez le groupe des Classes situé dans la liste Files.
- Ajoutez le fichier classe :
- Choisissez File > New File.
- Dans la fenêtre New File Assistant, sous WebObjects, sélectionnez Java Class et cliquez sur Next.
- Dans le panneau New Java Class de l’Assistant, saisissez User.java dans le champ texte File Name, sélectionnez Application Server dans la liste des Targets, et cliquez sur Finish.
- Déplacez les variables et les méthodes en rapport avec les propriétés “nom de la personne” et “nourritures favorites” ainsi que la méthode entryIncomplete de Main.java vers le nouveau fichier source en faisant un couper-coller.
- Sauvegardez Main.java et User.java.
- Ajoutez une variable User au composant Main :
- Ouvrez le composant Main dans WebObjects Builder.
- Choisissez Add Key dans le menu Edit Source.
- Nommez la variable user et choisissez User dans le menu pop-up Type. N’incluez pas de méthodes accesseurs.
- Instancier la variable user dans la classe Main.Vous devez créer un object User dans le composant Main. Faites en sorte que la méthode constructeur de la classe Main ressemble au Listing 7-1.
Listing 7-1 Instantiating the user instance variable in the constructor of the Main class
public Main(WOContext context) {super(context);user = new User();}Sauvegardez Main.java.
- Changez les liens vers les éléments dynamiques pour utiliser la nouvelle variable venant d’être ajoutée.Cliquez sur user dans le navigateur de variable de la fenêtre principale de WebObjects Builder. Glisser-Déposez une connexion à partir de la variable favoriteFood vers le WOTextField qui est actuellement lié à favoriteFood. Lorsque vous relachez la souris, un menu pop-up listant les liens disponibles pour le champ texte apparaît. Remarquez que value est suivi d’un symbole indiquant qu’elle a actuellement un lien. La sélection de value remplace favoriteFood par user.favoriteFood.
Reliez favoriteFood au WOString et remplacez les liens de personName de la même manière. Assurez-vous de changer à la fois les WOStrings et les WOTextFields.
Finalement, reliez user.entryIncomplete aux WOConditionals.
![[image: ../art/wobuserentrykeypaths.gif]](/globals/images/webobjects_images/wobuserentrykeypaths.gif)
- Construisez et lancez l’application.L’application se comporte de la même manière qu’avant (“Gestion des Saisies Utilisateurs”), mais les données sont maintenant accédées via une instance de la classe User.
Suivre le Chemin d’Accès à une Clé
Remarquez que les liens des éléments dynamiques du composant Main sont dans un format sensiblement différent. Plutôt que de nommer simplement la variable ou la méthode à appler, ils spécifient un chemin d’accès vers la propriété en question ; par exemple, au lieu de faire référence à personName, le premier WOString au sein du WORepetition fait référence à user.personName. Ceci est appelé un chemin d’accès à une clé (key path).
L’encapsulation de données dans des objets, comme dans cet exemple, est une partie très importante du développement orienté objet. L’accès à ces données est défini par un chemin d’accès à une clé qui spécifie les objets, les méthodes ou les variables qui peuvent fournir les données en question.
Un chemin d’accès à une clé est un ensemble de clés séparées par des point-virgules. Quand WebObjects a besoin d’accéder aux données spécifiées dans un “key path”, il suit le chemin d’accès en évaluant la première clé de la liste.
Cette première clé est évaluée dans la périmètre de l’instance représentant le composant—le fichier source Java du composant est examiné afin d’y trouver la méthode ou la variable. Dans notre cas, la variable d’instance user trouvée dans le fichier Main.java.
A ce point, s’il y a une autre clé dans le “key path”, elle est évaluée de la même manière mais en utilisant le résultat de la première clé comme objet source de la méthode ou de la variable. Maintenant, la méthode personName est appelée. Puisqu’il n’y a plus de clés dans le “key path”, la valeur issue de la méthode personName est retournée comme valeur pour la liaison.
De cette manière, vous pouvez accéder aux données dont vous avez besoin, tant qu’elles peuvent être atteintes par des méthodes du composant courant. Dans le cas le plus simple, vous stockez des variables dans le composant lui-même. Lorsque vos données deviendront plus complexes, vous devrez les stocker dans des objets personnalisés et les passer de composants à composants.
Définir un Nouveau Composant
Cette section vous montre comment créer un nouveau composant web dans le but d’afficher et d’éditer les données utilisateur.
Souvenez-vous que chaque composant web définit sa propre classe Java. Il est commode d’imaginer des composants, ainsi que les objets les représentant, comme des entités à part entière effectuant des taches spécifiques. La tache du composant décrit ici est de permettre à l’utilisateur de l’application d’éditer un objet User. En encapsulant le comportement de cette manière, vous vous assurez que si vous ajoutez, retirez ou altérez les propriétés d’objets USer, vous n’aurez qu’à modifier ce composant pour permettre l’édition des nouveaux attributs.
Vous commencez par créer une nouveau projet. Puis vous copiez le fichier User.java contenu dans le projet “UserEntry” et créez un composant pour l’édition d’un objet User. Enfin, vous modifiez le composant Main pour maintenir une liste d’utilisateurs au lieu d’un seul, et ajoutez des méthodes pour utiliser le nouveau composant afin d’éditer un utilisateur.
- Créez un projet application WebObjects et nommez le ComponentCommunication.
- Copiez le fichier User.java à partir du projet “UserEntry” :
- Sélectionnez le groupe Classes de la liste Files.
- Choisissez Project > Add Files.
- Naviguez jusqu’au dossier du projet “UserEntry”, sélectionnez User.java et cliquez sur Add.
![[image: ../art/pbcomcomaddfile.gif]](/globals/images/webobjects_images/pbcomcomaddfile.gif)
- Dans le dialogue qui apparaît, sélectionnez “Copy items into destination group’s folder”, sélectionnez la cible Application Server et cliquez sur Add.
![[image: ../art/pbcomcomaddfile2.gif]](/globals/images/webobjects_images/pbcomcomaddfile2.gif)
- Ajoutez un composant au projet.
- Sélectionnez Web Components dans la liste Files.
- Choisissez File > New File.
- Dans le panneau New File de l’Assistant Project Builder, sélectionnez Component (sous WebObjects) et cliquez sur Next.
- Saisissez UserEdit dans le champ texte File Name.
- Assurez-vous que Application Server est sélectionné dans la liste Targets et cliquez sur Finish.
Remarquez que le nouveau composant est ajouté au groupe des composants Web du projet.
![[image: ../art/pbusereditwo.gif]](/globals/images/webobjects_images/pbusereditwo.gif)
Vous êtes maintenant prêt à personnaliser le composant servant à éditer un objet User, UserEdit. L’utilisateur édite un seul objet User à la fois, UserEdit doit donc avoir une variable d’instance du type User. Le composant UserEdit nécessite des champs similaires à ceux définis dans le composant Main du projet “UserEntry” (voir “Interface Utilisateur”) et des boutons pour soumettre et annuler les changements.
- Ouvrez UserEdit.wo dans WebObjects Builder.
- Ajoutez une variable d’instance de l’objet User nommée user au composant.Sélectionnez les options qui créent une variable d’instance et fournit les méthodes accesseurs. Cette variable contiendra l’objet User en cours d’édition.
- Ajoutez un élément WOForm au composant UserEdit.
- Ajoutez les intitulés et les WOTextFields comme dans la Figure 7-1 et reliez les WOTextFields à user.personName et à user.favoriteFood.
- Ajoutez une méthode action appelée submitChanges au composant. Choisissez Main comme page retournée par la méthode. Cela veut dire que lorsqu’un utilisateur a fini d’éditer, il est renvoyé à la page principale plutôt qu’à la page UserEdit.
![[image: ../art/wobcomcomsubmitactn.gif]](/globals/images/webobjects_images/wobcomcomsubmitactn.gif)
- Utilisez le menu Forms pour ajouter un WOSubmitButton et un WOResetButton, et reliez la méthode submitChanges à l’attribut action du WOSubmitButton.Le WOResetButton réinitialise les champs du formulaire.
- Sauvegardez UserEdit.wo.
- Editez la méthode submitChanges dans UserEdit.java en ajoutant les lignes numérotées du Listing 7-2.
Listing 7-2 The submitChanges method of the EditUser class
public Main submitChanges() {Main nextPage = (Main)pageWithName("Main");// Initialiser votre composant ici.// Envoi <code>user</code> à la page principale. //1nextPage.setUser(user); //2return nextPage;} - Sauvegardez UserEdit.java.
Figure 7-1 Le composant UserEdit dans WebObjects Builder
![[image: ../art/wobuseredit.gif]](/globals/images/webobjects_images/wobuseredit.gif)
Modification du Composant Main
Cette section montre comment ajouter des éléments au composant Main de façon à ce qu’il affiche les informations utilisateur après qu’elles aient été éditées. Le composant a besoin d’un élément WOConditional de façon à ce que les informations utilisateur ne soient affichées seulement après leur saisie par l’utilisateur dans la page UserEdit. Après avoir effectué les modifications suivantes, Main.wo devraient ressembler à ce qui est montré dans la Figure 7-2.
- Ajoutez une méthode appelée noDataEntered dans Main.java, comme illustrée dans le Listing 7-3.
Listing 7-3 La méthode noDataEntered de la classe Main/*** Détermine si l'utilisateur a entré des données dans <code>user</code>.** @return <code>true</code> lorsque l'utilisateur a saisi des données dans* <code>user</code>.*/public boolean noDataEntered() {boolean noDataEntered;if (user == null || user.entryIncomplete()) {noDataEntered = true;}else {noDataEntered = false;}return noDataEntered;} - Ouvrez Main.wo dans WebObjects Builder.
- Ajoutez une variable d’instance de l’objet User appelée user, y compris les méthodes accesseurs.
- Ajoutez un texte d’information affiché quand aucune donnée n’a été saisie :
- Ajoutez un élément WOConditional.
- Saisissez le texte suivant dans le WOConditional : Aucune donnée utilisateur n’a été saisie.
- Reliez l’attribut condition du WOConditional à noDataEntered.
- Ajoutez des champs d’affichage et un titre affichés uniquement quand des données ont été saisies :
- Ajoutez un autre élément WOConditional en-dessous du premier.
- A l’intérieur du second WOConditional, ajoutez un WOString, saisissez le texte “ aime manger “ après, et ajoutez un autre WOString.
- Reliez l’attribut value du premier WOString à user.personName et du second à user.favoriteFood.
- Reliez l’attribut condition du WOConditional à noDataEntered.Cliquez sur “+” dans le WOConditional de façon à ce qu’il change en “-”. Cela fait en sorte que le contenu d’un seul élément WOConditional est affiché à la fois. Voir “Affichage Conditionnel avec des Eléments WOConditional” pour plus d’informations.
- Ajoutez une action nommée editUser qui renvoie un composant UserEdit.
- Ajoutez deux sauts de ligne (Shift-Enter) en dessous du second WOConditional.
- Ajoutez un lien qui affiche la page web UserEdit :
- Ajoutez un WOHyperlink sous le second WOConditional et saisissez Editer comme titre.
- Reliez l’attribut action du WOHyperlink à l’action editUser.
- Sauvegardez Main.wo.
- Editez la méthode editUser dans Main.java en ajoutant les lignes numérotées du Listing 7-4.
Listing 7-4 La méthode editUser du composant Mainpublic UserEdit editUser() {UserEdit nextPage = (UserEdit)pageWithName("UserEdit");if (user == null) { //1user = new User(); //2}// Renvoie l'utilisateur vers la page UserEdit. //3nextPage.setUser(user); //4return nextPage;} - Sauvegardez Main.java.
Figure 7-2 Le composant Main dans WebObjects Builder
![[image: ../art/wobcomcommain.gif]](/globals/images/webobjects_images/wobcomcommain.gif)
Lancement de l’Application
Assurez-vous que la cible ComponentCommunication est sélectionnée. Construisez et lancer l’application. Lorsque la page Main est affichée, il n’y a aucune donnée utilisateur à montrer (la variable d’instance user est null) ; par conséquent, le message “Aucune donnée utilisateur n’a été saisie” apparaît. Lorsque l’utilisateur clique sur Editer, le composant Main invoque son action userEdit qui retourne une page UserEdit. Si l’utilisateur saisit des données dans les champs texte Nom et Nourriture favorite de la page UserEdit et clique sur Soumettre, l’action submitChanges de la UserEdit, qui renvoie à la page Main, est invoquée.
Il n’y a qu’une seule instance de User lors de l’exécution de l’application. L’objet User est instancié dans la méthode editUser de Main si elle n’existe pas déjà (voir Listing 7-4). Main envoie alors cet objet vers la page UserEdit nouvellement créée. De la même manière, UserEdit envoie l’objet User vers une nouvelle instance de Main dans sa méthode submitChanges.

Textes originaux en anglais sur developer.apple.com : WebObjects Web Application - Component Communication
Chargement
Commentaires récents