Exercice 2.3 : Utilisation du composant de téléchargement en amont de fichiers

Avant de commencer, vous devez effectuer l'exercice 2.2 : Formatage d'une table de données

Maintenant que la colonne PHOTO est affichée, vous devez donner aux utilisateurs la possibilité de télécharger en amont des images pour les annonces classées. Cette fonction revêt une importance particulière dans les pages new_record.jsp et update_record.jsp. Le composant de téléchargement en amont de fichiers permet aux utilisateurs de naviguer dans leur système de fichiers, de télécharger en amont un fichier vers la base de données et de l'y faire apparaître immédiatement.

Etant donné que la procédure de création et de mise à jour est la même dans le composant de téléchargement en amont de fichiers, cet exercice permet à la page de mise à jour de modifier l'image en cours pour afficher n'importe quelle liste. Si vous le souhaitez, vous pouvez apporter les mêmes modifications à la nouvelle page d'enregistrements après en avoir fini avec la page de mise à jour.

Ajout de la photo en cours dans la page

Présentation visuelle

Comme vous pourrez le constater, le formulaire de mise à jour n'est autre qu'une table HTML comportant du texte statique et des composants d'entrée associé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. Au cours des étapes suivantes, vous allez ajouter une nouvelle ligne afin d'afficher la photo en cours.

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, voir Optimisation de la table de données par défaut dans l'exercice 1.2 : Utilisation de la liste d'enregistrements relationnels et de la table de données.

  1. Cliquez deux fois 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. Dans la barre de menus, cliquez sur Table > Ajouter une ligne > Au-dessus pour créer une ligne au début de la table, destinée à contenir la photo en cours pour l'enregistrement.
  4. Dans la cellule située à l'extrême gauche de cette nouvelle ligne, entrez le libellé Photo actuelle :.
  5. Faites glisser un composant d'image à partir du tiroir Composants Faces de la palette dans la cellule située à l'extrême 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. Associez le composant d'image à la colonne PHOTO de l'enregistrement update_record en faisant glisser la colonne PHOTO de la vue Données de page vers le nouveau composant d'image. Le composant d'image est maintenant associé à la colonne PHOTO de la base de données.
  7. Dans la vue Propriétés, cliquez sur le bouton Sélection d'un objet de données de page en regard de la zone Type. La fenêtre Sélection d'un objet de données de page s'affiche.
  8. Cliquez sur le symbole + pour développer l'enregistrement relationnel update_record.
  9. Cliquez sur IMAGETYPE (String).
  10. Cliquez sur OK.

    La photo en cours pour l'annonce classée apparaît maintenant dans la page. Cette dernière doit se présenter de la manière suivante :

    Aspect de la page en cours

Ajout du composant de téléchargement en amont de fichiers dans la page

Présentation visuelle

Ajoutez ensuite une nouvelle ligne au bas de la table, destinée à contenir le composant de téléchargement en amont de fichiers.

  1. Placez le curseur sur la dernière ligne en cliquant dans la cellule contenant le texte Phone:.
  2. Dans la barre de menus, cliquez sur Table > Ajouter une ligne > En-dessous.
  3. Dans la première cellule de la nouvelle ligne, entrez le libellé Nouvelle photo :.
  4. Faites glisser un composant Téléchargement en amont de fichiers à partir du tiroir Composants Faces de la palette dans la dernière cellule de la nouvelle ligne.
  5. Comme vous l'avez fait pour le composant d'image, associez le composant de téléchargement en amont de fichiers à 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é en amont sera placé dans cette colonne.

    Cette dernière doit se présenter de la manière suivante :

    Aspect de la page actuelle

  6. Sauvegardez la page et, si nécessaire, testez-la.

Vous êtes prêt à aborder l'exercice 2.4 : Utilisation des règles de navigation.

Retour d'informations
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.