Image, contrôle

Article
04/11/2008

La possibilité de transmettre des images vers des périphériques sans fil tient une place importante dans la génération d'applications Web mobiles ASP.NET efficaces. Le contrôle Image permet de spécifier l'image à afficher sur un périphérique sans fil.

En raison de la nature des périphériques sans fil, un même fichier image ne convient pas à tous les périphériques. Certains navigateurs sont incapables d'afficher des formats d'image particuliers ; en outre, les tailles d'image et les couleurs ne sont pas toutes acceptées pour l'ensemble des périphériques. Par exemple, une image au format de fichier .gif peut s'afficher sur les navigateurs HTML, mais pas sur les navigateurs WML. Ces derniers nécessitent une image au format de fichier .wbmp.

Le contrôle Image vous permet de spécifier plusieurs fichiers image ; par conséquent, vous pouvez créer la même image dans plusieurs formats de fichier différents. Le contrôle choisit le fichier image approprié en fonction des caractéristiques du périphérique. Le contrôle Image est indépendant du type de fichier image que vous utilisez. Vous pouvez utiliser n'importe quel type de fichier image compatible avec le navigateur cible.

De même que la réutilisation du code est une technique efficace en matière de design d'application, la réutilisation des images l'est également. Grâce au contrôle Image, vous pouvez réutiliser une image en créant un contrôle utilisateur à partir de celle-ci. Pour plus d'informations sur les contrôles utilisateur, consultez Création de contrôles mobiles personnalisés.

Syntaxe des contrôles mobiles

Les propriétés, valeurs par défaut et éléments de code requis sont indiqués en caractères gras.

<mobile:Imagerunat="server"
   id="id"
   Font-Name="fontName"
   Font-Size="{NotSet|Normal|Small|Large}"
   Font-Bold="{NotSet|False|True}"
   Font-Italic="{NotSet|False|True}"
   ForeColor="foregroundColor"
   BackColor="backgroundColor"
   Alignment="{NotSet|Left|Center|Right}"
   StyleReference="styleReference"
   Wrapping="{NotSet|Wrap|NoWrap}"

   AlternateText="AltText"
   ImageUrl="masterImageSource"
   NavigateUrl="targetURL"
   SoftkeyLabel="label">
Place DeviceSpecific/Choice construct here. (optional)
</mobile:Image>

Règles relatives à la relation contenant-contenu

Les contrôles suivants peuvent contenir un contrôle Image.

Contrôle	Commentaires
System.Web.UI.MobileControls.Form	Peut contenir n'importe quel nombre de contrôles Image.
System.Web.UI.MobileControls.Panel	Peut contenir n'importe quel nombre de contrôles Image.

Le contrôle Image peut contenir les contrôles ci-dessous.

Contrôle	Commentaires
System.Web.UI.MobileControls.DeviceSpecific	Spécifie les images de remplacement par périphérique. Un contrôle Image ne contient qu'un seul contrôle DeviceSpecific, voire aucun.

Modèles de périphériques

Aucun.

Comportement spécifique au périphérique

Lorsqu'un contrôle Image est activé sur un périphérique mobile, il évalue les fonctionnalités du périphérique. En fonction de cette évaluation, les événements suivants peuvent se produire :

Le texte de la propriété AlternateText est rendu sous forme de contrôle Label si le périphérique n'est pas capable d'afficher les images.
Sur les périphériques capables d'afficher des images, le contrôle recherche un URI vers une image inscrite pour un périphérique spécifique. Pour trouver une image inscrite, le contrôle recherche une clause <DeviceSpecific> dans le contrôle Image. Si elle existe, le contrôle prend la valeur extraite d'une clause <Choice> correspondante. Cette valeur est considérée comme l'URI d'un fichier image et permet d'afficher le fichier sur le périphérique.

Quel que soit le résultat rendu, le contrôle récupère les propriétés d'alignement et de texte associées à l'objet Style.

Utilisation du modèle d'URL symbol:

La propriété ImageUrl contient généralement l'URL d'une image. Cependant, lorsque le contrôle Image extrait l'URL, il recherche également un modèle particulier qui lui signale les informations spécifiques au périphérique. Ce modèle ou texte mis en forme par préfixe signale au contrôle qu'il doit générer un balisage spécifique permettant au périphérique cible d'afficher l'image intégrée associée au modèle.

Le modèle symbol:, utilisé en tant que valeur de la propriété ImageUrl, signale au contrôle Image qu'il doit rechercher l'image spécifiée et l'afficher sur le périphérique cible. Par exemple, sur un téléphone i-mode, si la valeur de la propriété ImageUrl est symbol:63726*,* elle est émise sous la forme #63726 et est rendue sur le périphérique cible sous la forme de l'icône d'un cœur.

Le modèle symbol: est reconnu sur les téléphones i-mode et WML version 1.1, qui prennent en charge les glyphes.

Points communs aux langages HTML et WML

Au moment de l'exécution, le contrôle Image génère habituellement une balise <img> dont l'attribut src a la valeur Choice souhaitée. L'attribut alt a la valeur du texte de remplacement (s'il existe).

Si une propriété NavigateUrl est spécifiée, l'image est délimitée par une balise <a> rendue de manière appropriée (ancre).

Le contrôle Image n'affiche pas de balise <br> (saut de ligne) après l'image. Cela permet d'obtenir des images qui sont rendues les unes à la suite des autres. Toutefois, pour simuler un saut de ligne, vous pouvez insérer un contrôle Label vide après l'image.

Si la propriété Alignment est définie, le contrôle Image affecte cette valeur à l'attribut align.

Remarque Les périphériques WML offrent diverses limites en matière de taille d'image. Avant toute chose, vérifiez les spécifications des périphériques concernés.

Exemple

L'exemple suivant présente trois images de remplacement qui doivent être choisies par le contrôle, en fonction des caractéristiques du périphérique. Le contrôle sélectionne le texte de remplacement lorsque aucune image ne convient. Remplacez les noms des images pour exécuter le contrôle et ajoutez les filtres de périphérique à votre fichier web.config. Pour plus d'informations sur les filtres de périphérique, consultez Rendu spécifique au périphérique.

<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<mobile:Form runat="server">
  <mobile:Image runat="server" id="myImages" AlternateText=
   "Sorry, this requested image cannot be displayed on this device.">
   <deviceSpecific>
     <choice Filter="IsColor"
      ImageUrl="myColor.gif"/>
     <choice Filter="Wml"
      ImageUrl="myWMLImage.wbmp"/>
     <choice ImageUrl="myColor.bmp"/>
   </deviceSpecific>
  </mobile:Image>
</mobile:Form>

Voir aussi

Image, classe | Image, membres de classe | Guide de référence des contrôles

Partager via