ObjectList, contrôle

Il fournit un affichage riche en fonctionnalités d'une liste d'objets de données. Le contrôle ObjectList hérite du contrôle List une bonne part de son comportement, notamment la prise en charge du rendu basé sur un modèle via l'utilisation de jeux de modèles de périphérique et la pagination interne. Pour plus d'informations, consultez Jeux de modèles et contrôles basés sur un modèle ou Pagination. Le contrôle ObjectList diffère du contrôle List à plusieurs égards.

Fonctionnalités	Contrôle ObjectList	Contrôle List
Dépendance	Strictement dépendant. La seule façon d'ajouter des éléments à une liste d'objets dans un contrôle, consiste à lier la liste à une source de données.	Prend en charge l'ajout d'éléments de manière statique, par programme et via la liaison de données.
Affichage de plusieurs propriétés	Vous permet d'afficher plusieurs propriétés ou champs associés à chaque élément. En fonction des caractéristiques du périphérique, le contrôle peut être rendu sous forme d'un tableau affichant plusieurs propriétés pour chaque objet ; sinon, une interface utilisateur peut être fournie pour permettre à l'utilisateur d'afficher les propriétés supplémentaires d'un objet.	Affiche une seule propriété pour chaque élément.
Commandes d'élément multiples	Vous permet d'associer plusieurs commandes à chaque élément. L'ensemble de commandes d'un élément peut être soit partagé par tous les éléments, soit spécifique à l'élément.	Prend en charge une seule commande par défaut pour chaque élément.
Pagination et création de modèle internes	Pris en charge ; cependant, si vous affichez un objet comportant de nombreuses informations, utilisez une liste dans un formulaire distinct pour afficher les détails des éléments.	Pris en charge.

Ce tableau compare les fonctionnalités des contrôles ObjectList et List. Cependant, il faut bien comprendre que même si ces deux contrôles prennent en charge la pagination et la création de modèle personnalisées, la classe SelectionList ne prend pas en charge la pagination.

Pour plus d'informations sur l'utilisation du contrôle ObjectList, consultez Concepts relatifs au design et au rendu pour les contrôles mobiles.

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:ObjectListrunat="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}"

   AutoGenerateFields="{True|false}"
   BackCommandText="backCommandText"
   CommandStyle="commandStyle"
   DataMember="dataMember"
   DetailsCommandText="detailsCommandText"
   ItemCount="itemCount"
   LabelField="dataTextField"
   LabelStyle="labelStyle"
   MoreText="moreText"
   OnItemDataBind="onItemDataBindHandler"
   OnItemCommand="onItemCommandHandler"
   OnItemSelect="onItemSelectHandler"
   OnLoadItems="onLoadItemsHandler"
   OnShowItemCommands="onShowItemCommandsHandler"
   TableFields="tableFields">
Place DeviceSpecific/Choice construct here. (optional)
   <DeviceSpecific>
      <Choice>
        Add choice attributes here.
     </Choice>
   </DeviceSpecific>
Place explicitly declared Fields here. (optional)
   <Field 
      id="id"
      Title="titleText" 
      DataField="value"
      FormatString="formatString" 
      Visible="{True|False}"/>
   </Field>
Place explicitly declared Commands here. (optional)
   <Command Name="CommandName" Text="CommandText" />
</mobile:ObjectList>

Les champs et les commandes statiques peuvent être déclarés en tant qu'éléments enfants.

Règles relatives à la relation contenant-contenu

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

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

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

Contrôle	Commentaires
System.Web.UI.MobileControls.DeviceSpecific	Un contrôle ObjectList ne contient qu'un seul contrôle DeviceSpecific, voire aucun.
System.Web.UI.MobileControls.ObjectList.Field	Un contrôle ObjectList peut contenir n'importe quel nombre de contrôles Field.
System.Web.UI.MobileControls.ObjectList.Command	Un contrôle ObjectList peut contenir n'importe quel nombre de contrôles Command.

Modèles de périphériques

Pour plus d'informations sur la spécification de modèles pour le contrôle ObjectList, consultez Rendu spécifique au périphérique. Le tableau suivant contient une liste de modèles utilisables avec le contrôle ObjectList.

Modèle	Description
AlternatingItemTemplate	Ce modèle affiche les éléments d'un objet ObjectList dont le rang est pair en mode Liste.
HeaderTemplate	Le modèle d'en-tête est rendu au début de la liste. En mode paginé, l'en-tête est rendu sur chaque page.
FooterTemplate	Le modèle de pied de page est rendu à la fin de la liste. En mode paginé, le pied de page est rendu sur chaque page.
ItemDetailsTemplate	Ce modèle remplace le rendu du mode Commandes/Détails pour un objet ObjectList.
ItemTemplate	Le modèle d'élément est rendu pour chaque élément de liste.
SeparatorTemplate	Le modèle de séparateur sépare les éléments.

Remarque   Seul le modèle ItemsDetails affecte le mode Commandes/Détails. Pour appliquer un modèle à tous les modes, vous devez spécifier un mode ItemsDetails pour le mode Commandes/Détails et l'un des autres modèles pour le mode Liste.

Comportement spécifique au périphérique - HTML

Sur les périphériques HTML, la liste d'objets est rendue initialement sous forme de table, où chaque élément de liste (objet) est représenté par un lien. Par défaut, ce lien correspond à une valeur associée à la première colonne du groupe de données. Si la propriété LabelField est définie, le lien correspond à une valeur associée au champ spécifié par la propriété. Il est possible de modifier ce comportement de manière à afficher l'élément de liste initial sous la forme d'une simple étiquette accompagnée du lien « Plus ». En cliquant sur le lien « Plus », l'utilisateur peut afficher des détails supplémentaires sur un objet particulier dans une liste d'objets. Par exemple, l'utilisateur peut voir une table répertoriant le titre et la valeur de chaque champ, ainsi que toutes les commandes associées à l'élément.

Si la propriété TableFields est définie, et si le périphérique permet l'affichage d'une table, chaque élément de liste est représenté plutôt par une ligne de table ; chaque champ de table spécifié figure dans une colonne et est suivi d'un lien facultatif indiquant « Plus ». L'étiquette de l'élément (ou la première colonne de l'élément dans la vue Table) peut être rendue sous la forme d'un lien hypertexte.

Le choix des liens à afficher et leur mode de traitement dépendent de deux facteurs : la possibilité d'afficher ou non des champs d'élément supplémentaires et la définition ou non d'une commande par défaut.

Le tableau suivant récapitule ce comportement.

Commandes définies	Commande par défaut	Champs supplémentaires	Comportement
Non	Non	Non	Le contenu rendu est statique.
Non	Non	Oui	Les éléments sont affichés sous forme de liens hypertexte. Le fait de cliquer sur un lien permet d'afficher les détails de l'élément.
Non (*)	Oui	Non	Les éléments sont affichés sous forme de liens hypertexte. Le fait de cliquer sur un lien déclenche une commande par défaut.
Non (*)	Oui	Oui	Les éléments sont affichés sous forme de liens hypertexte. Le fait de cliquer sur un lien déclenche une commande par défaut. Des liens Plus sont affichés. Le fait de cliquer sur un lien permet d'afficher les détails de l'élément.
Oui	Non	Oui ou non	Les éléments sont affichés sous forme de liens hypertexte. Le fait de cliquer sur un lien permet d'afficher les détails de l'élément.
Oui	Non	Oui	Les éléments sont affichés sous forme de liens hypertexte. Le fait de cliquer sur un lien permet d'afficher les détails de l'élément.
Oui	Oui	Oui ou non	Les éléments sont affichés sous forme de liens hypertexte. Le fait de cliquer sur un lien déclenche une commande par défaut. Des liens Plus sont affichés. Le fait de cliquer sur un lien permet d'afficher les détails de l'élément.

Le tableau précédent utilise les en-têtes de colonne suivants :

• Commandes définies indique si des commandes sont définies ou non dans la liste d'objets. Un astérisque (*) signifie qu'aucune commande autre que la commande par défaut n'est définie.
• Commande par défaut indique si une commande par défaut a été définie par le biais de la propriété DefaultCommand.
• Champs supplémentaires indique si des champs supplémentaires définis dans la liste d'objets ne sont pas affichés en mode Liste.

Le mode Détails, s'il est affiché, présente une table qui répertorie le titre et la valeur de chaque champ, toutes les commandes associées à l'élément, ainsi qu'un lien nommé « Back » (Précédent) qui permet de retourner au mode Liste.

Comportement spécifique au périphérique - WML

Sur les périphériques WML, la liste d'objets est rendue initialement sous forme d'une liste de sélection, où chaque élément est représenté par son étiquette. En sélectionnant l'élément, l'utilisateur peut afficher un menu de commandes correspondant, ainsi qu'un lien « Détails ». En cliquant sur « Détails », l'utilisateur peut afficher le titre et la valeur de chaque champ.

Exemple

L'exemple suivant utilise un contrôle ObjectList pour afficher une liste d'articles d'épicerie. L'utilisateur peut afficher les détails relatifs à des articles individuels et peut accéder à des commandes telles que Reserve (Réserver) et Buy (Acheter).

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

<script language="vb" runat="server">

Public Class GroceryItem
   private _department, _item, _status As String

   Public Sub New( department As String, item As String, status As String)
      _department = department
      _item = item
      _status = status
   End Sub

   Public ReadOnly Property Department as String
      Get
         Return _department
      End Get
   End Property
   Public ReadOnly Property Item as String
      Get
         Return _item
      End Get
   End Property
   Public ReadOnly Property Status as String
      Get
         Return _status
      End Get
   End Property
End Class

Public Sub Page_Load(o As Object, e As EventArgs)
   If Not IsPostBack Then
      Dim arr As New ArrayList()
      arr.Add (New GroceryItem ("Bakery", "French Rolls", "On Sale"))
      arr.Add (New GroceryItem ("Dairy", "Eggnog", "Half price"))
      arr.Add (New GroceryItem ("Produce", "Apples", "A dollar a bushel"))

      List1.DefaultCommand = "Default"
      List1.MoreText       = "Click for Details"
      List1.DataSource = arr
      List1.DataBind
   End If
End Sub

Public Sub List1_Click(sender As Object, e As ObjectListCommandEventArgs)
   If e.CommandName = "Reserve" Then
      ActiveForm = Form2
   ElseIf e.CommandName = "Buy"
      ActiveForm = Form3
   Else
      ActiveForm = Form4
   End If
End Sub

</script>

<mobile:Form id="Form1" runat="server" BackColor="LightBlue">
   <mobile:ObjectList id="List1" runat="server"
         LabelField="item"
         OnItemCommand="List1_Click">
      <Command Name="Reserve" Text="Reserve"/>
      <Command Name="Buy" Text="Buy"/>
   </mobile:ObjectList>
</mobile:Form>

<mobile:Form id="Form2" runat="server" BackColor="LightBlue">
   <mobile:Label id="ResLabel" runat="server"
        text="Sale item reservation system coming soon!" />
   <mobile:Link id="ResLink" NavigateURL="#Form1" runat="server" text="Return" />
</mobile:Form>

<mobile:Form id="Form3" runat="server" BackColor="LightBlue">
   <mobile:Label id="BuyLabel" runat="server"
        text="Online purchasing system coming soon!" />
   <mobile:Link id="BuyLink" NavigateURL="#Form1" runat="server" text="Return" />
</mobile:Form>

<mobile:Form id="Form4" runat="server" BackColor="LightBlue">
   <mobile:Label id="DefLabel" runat="server"
        text="Detailed descriptions of the items will be here soon!" />
   <mobile:Link id="DefLink" NavigateURL="#Form1" runat="server" text="Return" />
</mobile:Form>
[C#]
<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"
    Language="C#" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<script language="c#" runat="server">

class GroceryItem
{
   private String _department, _item, _status;

   public GroceryItem(string department, string item, string status)
   { 
      _department = department;
      _item = item;
      _status = status;
   }

   public String Department { get { return _department; } }
   public String Item { get { return _item; } }
   public String Status { get { return _status; } }
}

public void Page_Load(Object o, EventArgs e)
{
   if (!IsPostBack)
   {
      ArrayList arr = new ArrayList();
      arr.Add (new GroceryItem ("Bakery", "French Rolls", "On Sale"));
      arr.Add (new GroceryItem ("Dairy", "Eggnog", "Half price"));
      arr.Add (new GroceryItem ("Produce", "Apples", "A dollar a bushel"));

      List1.DefaultCommand = "Default";
      List1.MoreText       = "Click for Details";
      List1.DataSource = arr;
      List1.DataBind ();
   }
}

public void List1_Click(Object sender, ObjectListCommandEventArgs e)
{
   if (e.CommandName == "Reserve")
   {
      ActiveForm = Form2;
   }
   else if (e.CommandName == "Buy")
   {
      ActiveForm = Form3;
   }
   else
   {
      ActiveForm = Form4;
   }
}

</script>

<mobile:Form id="Form1" runat="server" BackColor="LightBlue">
   <mobile:ObjectList id="List1" runat="server"
         LabelField="item"
         OnItemCommand="List1_Click">
      <Command Name="Reserve" Text="Reserve"/>
      <Command Name="Buy" Text="Buy"/>
   </mobile:ObjectList>
</mobile:Form>

<mobile:Form id="Form2" runat="server" BackColor="LightBlue">
   <mobile:Label id="ResLabel" runat="server"
        text="Sale item reservation system coming soon!" />
   <mobile:Link id="ResLink" NavigateURL="#Form1" runat="server" text="Return" />
</mobile:Form>

<mobile:Form id="Form3" runat="server" BackColor="LightBlue">
   <mobile:Label id="BuyLabel" runat="server"
        text="Online purchasing system coming soon!" />
   <mobile:Link id="BuyLink" NavigateURL="#Form1" runat="server" text="Return" />
</mobile:Form>

<mobile:Form id="Form4" runat="server" BackColor="LightBlue">
   <mobile:Label id="DefLabel" runat="server"
        text="Detailed descriptions of the items will be here soon!" />
   <mobile:Link id="DefLink" NavigateURL="#Form1" runat="server" text="Return" />
</mobile:Form>

Résultat de l'exemple

Le premier formulaire affiche les trois articles avec un lien vers des informations supplémentaires :

Lorsque vous cliquez sur « Click for Details » pour l'entrée Eggnog, l'écran suivant s'affiche :

Voir aussi

ObjectList, classe | Label, membres de classe | List, contrôle | Guide de référence des contrôles