Ensembles de modèles et contrôles basés sur un modèle

Article
08/21/2008

Mise à jour : novembre 2007

ASP.NET fournit des contrôles basés sur un modèle, c’est-à-dire des contrôles qui exposent un certain nombre de propriétés de modèle qui définissent la présentation et le contenu du contrôle. Ces modèles sont insérés aux bons endroits pendant le rendu du contrôle. Par exemple, pour le contrôle List, il existe des modèles d'en-tête et de pied de page. Cette fonctionnalité permet une personnalisation considérable de l'apparence des contrôles au moment de l'exécution, en fonction du périphérique.

Les contrôles mobiles ASP.NET étendent ce modèle et introduisent la notion d'ensembles de modèles. Un ensemble de modèles est une collection de modèles. Cependant, un seul contrôle basé sur un modèle peut faire référence à plusieurs ensembles de modèles, chaque ensemble ayant différents critères spécifiques au périphérique.

Rendu des critères pour les ensembles de modèles

Chaque ensemble de modèles d'un contrôle basé sur un modèle est contenu dans un élément <Choice> au sein d'un élément <DeviceSpecific> partagé. Au moment de l'exécution, les choix dans l'élément <DeviceSpecific> sont évalués dans l'ordre. Le premier élément <Choice> correspondant est utilisé pour le contenu spécifique au périphérique. Si le choix sélectionné contient des modèles, le contrôle les utilise. Si les modèles sont introuvables ou si aucun des choix spécifiés n'est approprié, le contrôle affiche son balisage par défaut.

Modèles indépendants du périphérique

Tout contrôle basé sur un modèle peut avoir un modèle indépendant du périphérique. Pour spécifier les modèles indépendants du périphérique, utilisez un élément <Choice> sans attribut Filter explicite. Un choix indépendant du périphérique, lorsqu'il est spécifié, doit toujours être le dernier déclaré, de manière à être choisi si aucun autre choix ne s'applique au périphérique cible.

Rendu spécifique au contrôle

Le comportement de rendu des contrôles en mode modèles est spécifique au contrôle. Certains contrôles, tels que List et ObjectList, peuvent afficher l'ensemble de leur contenu à partir des modèles fournis. D'autres peuvent ajouter le contenu de modèles spécifiques à leur contenu par défaut. Par exemple, si un modèle d'en-tête ou de pied de page est sélectionné pour le contrôle Form, le balisage contenu dans le modèle est ajouté au contenu du formulaire respectivement comme en-tête ou pied de page.

Définition des propriétés pour un contrôle basé sur un modèle

Pour définir par programme les propriétés d'un contrôle dans un modèle, vous devez obtenir une référence au conteneur d'attribution de noms et utiliser la méthode FindControl pour trouver le contrôle. Vous pouvez alors définir ses propriétés. L'exemple suivant illustre cette technique.

Remarque :
Étant donné que les informations de feuille de style doivent être chargées avant de pouvoir modifier par programme la propriété StyleReference, sa modification dans le code n'a aucun effet.

void Page_Load(Object sender, EventArgs e)
{
    // Iterate through the controls in the form.
    foreach(Control c in Form1.Controls)
    {
        if(c.GetType()) == typeof(TemplateContainer)
        {
            // Get the link control.
            Link ctrl = (Link)c.FindControl("myLink");
            if (ctrl != null)
            {
                // Set the text and url properties.
                ctrl.Text = "Home Page";
                ctrl.NavigateURL = "https://www.microsoft.com";
            }
        }
    }
}

Ensembles de modèles et styles

Les styles dans un contrôle StyleSheet peuvent également contenir des ensembles de modèles. Par conséquent, vous pouvez avoir des contrôles basés sur plusieurs modèles qui référencent le même style, utilisent les mêmes ensembles de modèles et offrent les mêmes avantages d'encapsulation qu'un style. Pour obtenir un exemple illustrant ces ensembles de modèles, consultez Démarrage rapide pour les contrôles mobiles ASP.NET.

Modèles de style et propriétés de style

Vous pouvez hériter d'un style d'un parent, vous pouvez définir de manière explicite la propriété StyleReference ou vous pouvez hériter du style par l'intermédiaire de l'agrégation. Avec les modèles, néanmoins, il n'y a pas d'effet de cascade. Vous ne pouvez pas extraire un modèle d'un modèle de style parent à moins d'utiliser un modèle dans une feuille de style. Pour plus d'informations, consultez Styles.

Modèles ajoutés de manière dynamique

Dans certains scénarios élaborés, il est utile d'instancier et d'ajouter des modèles de manière dynamique. L'exemple de code suivant ajoute les événements dans un gestionnaire d'événements Init.

<%@ Page Language="C#" 
    Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script >
    private void Form_Init(object sender, System.EventArgs e)
    {
        DeviceSpecific devSpecific = new DeviceSpecific();

        // Create the choice tag.
        DeviceSpecificChoice devChoice = 
            new DeviceSpecificChoice();
        devChoice.Filter = "isHTML32";

        // Create the template.
        ITemplate myTemplate = 
            new CustomTemplate("HeaderTemplate");

        // Create the templateContainer.
        TemplateContainer container = new TemplateContainer();
        myTemplate.InstantiateIn(container);

        // Create the tree.
        devChoice.Templates.Add("HeaderTemplate", myTemplate);
        ((IParserAccessor)devSpecific).AddParsedSubObject(devChoice);
        ((IParserAccessor)form1).AddParsedSubObject(devSpecific);
    }
    public class CustomTemplate : ITemplate
    {
        String strWhichTemplate;

        public CustomTemplate(String strTemplate)
        {
            strWhichTemplate = strTemplate;
        }

        public void InstantiateIn(Control container)
        {
            if (strWhichTemplate == "HeaderTemplate")
            {
                System.Web.UI.MobileControls.Label lb =
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "Header Template";

                System.Web.UI.MobileControls.Command cmd = 
                    new System.Web.UI.MobileControls.Command();
                cmd.Text = "heLLo";

                container.Controls.Add(lb);
                container.Controls.Add(cmd);
            }
            else if (strWhichTemplate == "FooterTemplate")
            {
                System.Web.UI.MobileControls.Label lb = 
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "FooterTemplate";
                container.Controls.Add(lb);
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <mobile:form id="form1"  OnInit="Form_Init">
  </mobile:form>
</body>
</html>

Considérations particulières pour l'utilisation des modèles spécifiques au périphérique

Lorsque vous mélangez des langages de balisage spécifiques au périphérique et des contrôles mobiles, vous devez respecter une certaine cohérence sur la base de ce que les contrôles mobiles restituent. La détection et l'adaptation intelligentes pour le mélange de balisages spécifiques au périphérique et indépendants du périphérique ne sont pas prises en charge.

Notez par exemple le paramètre alignment sur le premier contrôle Panel et le contrôle Label dans l'exemple de code suivant :

<mobile:Panel runat=server alignment="right">
<DeviceSpecific>
  <Choice Filter="isWML11">
    <ContentTemplate>
      <table columns="2" align="LR">
        <tr><td>
    </ContentTemplate>
  </Choice></Devicespecific>
</mobile:panel>

<Mobile:Label id="label1" runat=server Text="HELLO, HOW ARE YOU?" 
    alignment="left">
</Mobile:Label>
<mobile:Panel runat=server>
<DeviceSpecific>
  <Choice Filter="isWML11">
    <ContentTemplate></td><td>
    </ContentTemplate>
  </Choice>
</DeviceSpecific> 
</mobile:panel>

Les éléments <p> WML sont utilisés pour restituer l'alignement qui n'est pas celui par défaut. Dans l'exemple précédent, le deuxième contrôle Label est réalisé dans un élément <td> WML, et l'élément <p> généré pour le deuxième contrôle Label est restitué de manière incorrecte par le navigateur, car il se trouve dans l'élément <td>.

Dans ce cas, le contrôle Label n'hérite pas de l'alignement du premier contrôle Panel, il génère donc une balise <p> pour son alignement. Cependant, dans cette situation, il est impossible d'ajouter une balise <p>. Ce n'est pas une situation courante, mais vous pouvez contourner le problème en marquant le contrôle Label comme visible si le périphérique cible n'est pas WML et en faisant en sorte que le texte du contrôle Label soit spécifié dans le modèle.

Balisage spécifique au périphérique arbitraire

Dans certains cas, vous souhaiterez éventuellement insérer un balisage arbitraire pour un périphérique ou type de périphérique spécifique. Pour activer cette opération, les pages Web mobiles ASP.NET fournissent un modèle de contenu pour le contrôle Panel. Si un choix sélectionné contient un modèle de contenu, le contrôle effectue le rendu en utilisant le modèle plutôt que son contenu habituel.