Afficher des informations dynamiques sur les pages Web à l'aide de composants JSF > Module 2 : Ajouter des fonctions avancées >
< Précédent | Suivant >

Leçon 2.2 : Utiliser le composant de téléchargement de fichier montant

Dans cette leçon, vous allez voir comment donner aux utilisateurs la possibilité d'accompagner leurs annonces de photos des articles qu'ils vendent et donc de leur proposer une fonction de téléchargement de fichier montant (upload). Cette fonction revêt une importance particulière dans les pages new_record.jsp et update_record.jsp. Le composant de téléchargement de fichier montant permet aux utilisateurs de naviguer dans leur système de fichiers, de télécharger un fichier vers la base de données et de l'y faire apparaître immédiatement.

Etant donné que le composant de téléchargement s'utilise de la même manière lorsque l'utilisateur crée ou met à jour une annonce, pour cet exercice, nous étudierons seulement le cas s'appliquant à la page de mise à jour. Lorsque vous aurez terminé, vous pourrez au besoin apporter les mêmes modifications à la page de création d'un nouvel enregistrement.

Ajouter la photo actuelle de l'article à la page de mise à jour

Comme vous pouvez le constater, le formulaire de mise à jour n'est autre qu'une table HTML comportant du texte statique et des composants d'entrée liés aux colonnes de l'enregistrement relationnel update_record. Vous pouvez donc ajouter des lignes et des colonnes pour modifier le formulaire, comme vous le feriez pour modifier une table HTML. Dans les étapes qui suivent, vous allez ajouter une nouvelle ligne au formulaire de mise à jour afin d'afficher la photo actuelle de l'article.

L'ajout de lignes et de colonnes présente plus de difficultés dans une table de données qui contient une liste d'enregistrements relationnels. Pour plus d'informations sur l'ajout de colonnes dans une table de données, reportez-vous à la Leçon 1.2 : Se connecter à une base de données et afficher des données sur une page Web.

  1. Faites un double clic sur la page update_record.jsp dans la vue Explorateur de projets.
  2. Placez le curseur dans la première cellule (en haut à gauche) de la table. Cette cellule a pour nom ID.
  3. Sur la barre de menus principale, sélectionnez Table > Spécifier et ajouter. La boîte de dialogue Ajout de lignes ou de colonnes s'ouvre. Cliquez sur Lignes, puis sur Au-dessus de la cellule sélectionnée. Cela aura pour effet de créer une nouvelle ligne en haut de la table, destinée à contenir la photo associée à l'enregistrement en cours de mise à jour. Cliquez sur OK.
  4. Dans la cellule gauche de cette nouvelle ligne, entrez le libellé Current photo:.
  5. A partir du tiroir Composants Faces de la palette, faites glisser un composant Image et déposez-le dans la cellule la plus à droite de la nouvelle ligne. Contrairement à l'exercice précédent, vous allez permettre à l'utilisateur d'afficher l'image complète sans contrainte de taille. Ne modifiez donc pas la largeur et la hauteur dans la vue Propriétés.
  6. Liez le composant Image à la colonne PHOTO de l'enregistrement update_record. Pour cela, dans la vue Données de page, faites glisser la colonne PHOTO et déposez-la sur le nouveau composant Image. Le composant Image est maintenant lié à la colonne PHOTO de la base de données.
  7. Le composant Image étant toujours sélectionné, allez dans la vue Propriétés et cliquez sur le bouton Sélection d'un objet de données de page, à droite de la zone Type. La fenêtre Sélection d'un objet de données de page s'affiche.
  8. Cliquez sur update_record (Service Data Object) > update_record (ADS) > IMAGETYPE (String).
  9. Cliquez sur OK. La page présente maintenant la photo actuellement insérée dans l'annonce, s'il en existe une. Votre page doit maintenant ressembler à ceci :
    Apparence actuelle de la page

Ajouter le composant de téléchargement montant à la page

Ajoutez maintenant une nouvelle ligne au bas de la table, destinée à contenir le composant de téléchargement de fichier montant.
  1. Placez le curseur sur la dernière ligne en cliquant dessus.
  2. Sur la barre de menus, sélectionnez Table > Ajouter une ligne en dessous.
  3. Dans la première cellule de la nouvelle ligne, entrez le libellé New photo:.
  4. A partir du tiroir Composants Faces de la palette, faites glisser un composant Téléchargement en amont de fichiers et déposez-le dans la dernière cellule de la nouvelle ligne.
  5. Comme vous l'avez fait pour le composant Image, liez le composant de téléchargement montant à la colonne PHOTO de l'enregistrement relationnel update_record. {PHOTO} apparaît dans la zone de texte pour indiquer que ce composant est associé à la colonne PHOTO et que le fichier téléchargé sera placé dans cette colonne. Votre page doit maintenant ressembler à ceci :
    Apparence actuelle de la page
  6. Sauvegardez la page et, si nécessaire, testez-la.

Etat des connaissances

Vous avez terminé la leçon 2.2. Vous avez appris à manipuler la table sur la page de mise à jour, notamment pour y ajouter la photo actuelle de l'article et un composant de téléchargement de fichier montant.

< Précédent | Suivant >