Tutorial 14 – Binder une image stockée en base

La vidéo du Tutorial

Design du Schéma

Nous allons ajouter les Entités qui contiennent les images des produits. Les images sont contenues dans la table ProductPhoto, qui est associée à la table Product avec la table ProductProductPhoto.

Dans Visual Studio, ouvrez le Schéma AdventureWorks.Entities. Ouvrez le Server Explorer. Avec la touche Ctrl enfoncée, sélectionnez les 2 tables ProductPhoto et ProductProductPhoto et dropez les dans le Schéma.
Une nouvelle Entité et une Relation sont créées dans le Schéma. Comme la table ProductProductPhoto a une ForeignKet vers la table Product, la relation est automatiquement créée avec l’Entité Product du schéma. La relation est une relation 0-N/0-N, mais il n’y a qu’une seule photo par Product. L’image du produit est dans la colonne LargePhoto, qui est de type ByteArray. Sauvez le Schéma.

Ecriture du code de chargement de l’image

Nous allons ajouter une commande pour charger l’image à partir de la base de données.

Byte[] LoadProductPhoto(int productId);

byte[] IADWService.LoadProductPhoto(int productId)
{
    IDataManager dm = EntityManager.FromDataBaseService("DataAccessAdventureWorks");
    List<ProductPhoto> productPhotos = dm.GetAssociated<ProductPhoto, ProductProductPhoto>(productId);
    if (productPhotos.Count > 0)
    {
        return productPhotos[0].LargePhoto;
    }
    return new Byte[0];
}

Ajout du contrôle pour afficher l’image

<tr>
    <td align="right" style="width:200px">Photo:</td>
    <td style="width:200px" ><div aas:name="ProductImage" class="AspectizeImage"></div></td>
</tr>

Binding de l’image

Nous allons maintenant bindé notre contrôle. Ce binding est un peu particulier, car nous n’allons pas bindé de propriétés du controles sur les données du DataSet, mais utiliser directement le binding de la commande sur un événement du contrôle.

Dans BindingStudio, ouvrez la vue ADWProduct. Ajoutez un Binding sur le contrôle ADWProduct.ProductImage.
Ce contrôle n’a pas de propriétés bindables pour afficher l’image, mais un évènement OnNeedImage. Cet évènement est dynamique, c’est à dire qu’il est levé lorsque le paramètre de la commande bindée change de valeur. Bindez cet événement sur notre commande serveur. Le retour de la commande n’est pas bindé dans le DataSet.
Bindez le paramètre sur l’identifiant du product qui est sélectionné. Sauvez la configuration.

Si nous lançons notre application, nous constatons bien que le controle image affiche la photo du produit.

A chaque sélection de produit, l’image associée est affichée.

Comprenons la cinématique d’échange:

- lorsque l’on sélectionne un Product, le productId prend la valeur du Product sélectionné.

- l’événement dynamique est levé, car le paramètre de la commande a changé de valeur.

- le contrôle Image fabrique une url avec le nom de la commande et le paramètre productId

- le browser appelle l’url, dont le type de retour est un mime type image

- le serveur appelle la commande avec le paramètre productId et renvoie le ByteArray qui représente l’image du produit

- le browser affiche le contenu sous forme d’image

Les échanges entre client et serveur sont minimes, seul le contenu de l’image est échangé, quand nécessaire.

Nous avons affiché une image, sans création de fichier temporaire sur le serveur, en bindant directement un contrôle sur une commande server.

La suite au prochain épisode.