Procédure pas à pas : création d'un Concepteur de contrôles de base pour un contrôle serveur Web

Article
10/22/2014

Mise à jour : novembre 2007

Cette procédure pas à pas montre comment créer un Concepteur de contrôles de base pour fournir une interface utilisateur au moment du design pour un contrôle serveur Web.

Lorsque vous créez un contrôle serveur ASP.NET personnalisé, vous pouvez créer un concepteur associé pour restituer le contrôle dans un outil de design visuel tel que Microsoft Visual Studio 2005. Le concepteur permet à l'environnement hôte de restituer une interface utilisateur au moment du design pour le contrôle, afin que les développeurs puissent configurer facilement les propriétés et le contenu du contrôle. Pour plus d'informations sur les fonctionnalités du concepteur et les différentes classes de concepteur que vous pouvez associer à un contrôle personnalisé, consultez Vue d'ensemble des Concepteurs de contrôles ASP.NET.

Au cours de cette procédure pas à pas, vous apprendrez à :

créer un Concepteur de contrôles composites standard et l'associer à un contrôle composite ;
créer un Concepteur de contrôles composites redimensionnable et l'associer à un contrôle composite ;
créer un Concepteur de contrôles conteneurs de base avec une zone modifiable et l'associer à un contrôle WebControl. Ce concepteur vous permet d'ajouter du texte à la zone modifiable sur l'aire de conception, vous pouvez également faire glisser des contrôles supplémentaires dans cette région.
référencer les contrôles personnalisés (et leurs concepteurs associés) sur une page Web ;
utiliser la page Web en mode Design dans Visual Studio 2005.

Composants requis

Pour exécuter cette procédure pas à pas, vous devrez utiliser :

Visual Studio 2005, qui vous servira à créer une page Web qui héberge vos contrôles personnalisés et leurs concepteurs associés ;
un site Web ASP.NET, pour la page qui héberge les contrôles. Si vous avez déjà configuré un site, vous pouvez l'utiliser comme point de départ de cette procédure pas à pas. Sinon, pour plus d'informations sur la création d'un répertoire ou d'un site virtuel, consultez Comment : créer et configurer des répertoires virtuels dans IIS 5.0 et 6.0.

Création de contrôles personnalisés et de concepteurs

De cette section, vous créerez trois contrôles serveur Web de base et un Concepteur de contrôles personnalisés associé pour chacun d'entre eux.

Pour créer un fichier pour le code

Dans un éditeur, créez un nouveau fichier nommé SimpleControlDesigners avec l'extension appropriée au langage utilisé. Par exemple, dans Visual Studio 2005, créez un nouveau fichier de classe nommé SimpleControlDesigners.vb ou SimpleControlDesigners.cs.

Ajoutez les références d'espace de noms suivantes qui sont nécessaires pour utiliser les classes de concepteur. Ajoutez également un espace de noms qui contiendra vos contrôles et les concepteurs associés.

Imports System
Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.Design.WebControls
Imports System.Web.UI.WebControls

Namespace Samples.AspNet.VB.Controls
End Namespace

using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.Design.WebControls;
using System.Web.UI.WebControls;

namespace Samples.AspNet.CS.Controls 
{
}

Enregistrez le fichier.

Vous êtes désormais prêt à créer un contrôle serveur Web composite et un concepteur associé. Un concepteur peut se trouver dans le même assembly que le contrôle ou dans un assembly différent ; au cours de cette procédure pas à pas, vous les créez dans le même fichier de code et dans le même assembly pour des raisons de commodité.

Pour créer un contrôle composite et un concepteur associé

Dans l'espace de noms que vous avez déclaré dans le fichier SimpleControlDesigners, créez une déclaration publique pour une classe de contrôle composite qui hérite de CompositeControl, comme indiqué dans l'exemple de code suivant.
```
    Public Class SimpleCompositeControl
        Inherits CompositeControl
    End Class
```
```
 public class SimpleCompositeControl : CompositeControl
    {
    }
```

Ajoutez les propriétés publiques indiquées dans l'exemple de code suivant à la classe. Celles-ci seront utilisées pour créer une partie de l'interface utilisateur sur la page Web.

Dim _prompt As String = "Please enter your date of birth: "
Overridable Property Prompt() As String
    Get
        Dim o As Object
        o = ViewState("Prompt")
        If o Is Nothing Then
            Return _prompt
        Else
            Return CType(o, String)
        End If
    End Get
    Set(ByVal value As String)
        ViewState("Prompt") = value
    End Set
End Property

Overridable Property DOB() As DateTime
    Get
        Dim o As Object
        o = ViewState("DOB")
        If o Is Nothing Then
            Return DateTime.Now
        Else
            Return CType(o, DateTime)
        End If
    End Get
    Set(ByVal value As DateTime)
        ViewState("DOB") = value
    End Set
End Property

private String _prompt = "Please enter your date of birth: ";
public virtual String Prompt
{
    get
    {
        object o = ViewState["Prompt"];
        return (o == null) ? _prompt : (string)o;
    }
    set
    {
        ViewState["Prompt"] = value;
    }
}

public virtual DateTime DOB
{
    get
    {
        object o = ViewState["DOB"];
        return (o == null) ? DateTime.Now : (DateTime)o;
    }
    set
    {
        ViewState["DOB"] = value;
    }
}

Créez une méthode pour ajouter des contrôles enfants au contrôle composite. La méthode suivante ajoute deux zones de texte et un saut de ligne qui seront visibles sur la page Web.

Protected Overrides Sub CreateChildControls()
    Dim lab As New Label

    lab.Text = Prompt
    lab.ForeColor = System.Drawing.Color.Red
    Me.Controls.Add(lab)

    Dim lit As New Literal()
    lit.Text = "<br />"
    Me.Controls.Add(lit)

    Dim tb As New TextBox()
    tb.ID = "tb1"
    tb.Text = DOB.ToString()
    Me.Controls.Add(tb)

    MyBase.CreateChildControls()
End Sub

protected override void CreateChildControls() 
{
    Label lab = new Label();

    lab.Text = Prompt;
    lab.ForeColor = System.Drawing.Color.Red;
    this.Controls.Add(lab);

    Literal lit = new Literal();
    lit.Text = "<br />";
    this.Controls.Add(lit);

    TextBox tb = new TextBox();
    tb.ID = "tb1";
    tb.Text = DOB.ToString();
    this.Controls.Add(tb);

    base.CreateChildControls();
}

Créez une classe de Concepteur de contrôles composites simple qui dérive de CompositeControlDesigner à associer au contrôle composite que vous venez de créer.

Même s'il est possible d'ajouter plusieurs fonctionnalités de rendu d'interface utilisateur au concepteur, l'exemple de code suivant crée simplement le concepteur et substitue une propriété clé dans la classe de base pour empêcher le contrôle d'être redimensionné en mode Design.

Public Class SimpleCompositeControlDesigner
    Inherits CompositeControlDesigner
    ' Set this property to prevent the designer from being resized.
    Public Overrides ReadOnly Property AllowResize() As Boolean
        Get
            Return False
        End Get
    End Property
End Class

public class SimpleCompositeControlDesigner : CompositeControlDesigner
{
    // Set this property to prevent the designer from being resized.
    public override bool AllowResize 
    {
        get { return false; }
    }
}

Juste au-dessus de la déclaration de classe du contrôle composite, ajoutez un attribut de métadonnées Designer qui associe le contrôle à la classe de concepteur que vous venez de créer, comme indiqué dans l'exemple de code suivant.
```
<Designer(GetType(SimpleCompositeControlDesigner))> _
Public Class SimpleCompositeControl
    Inherits CompositeControl
```
```
[Designer(typeof(SimpleCompositeControlDesigner))]
public class SimpleCompositeControl : CompositeControl
```
Enregistrez le fichier.

Après avoir créé un contrôle serveur Web composite personnalisé et un concepteur associé, vous pouvez créer un deuxième contrôle qui dérive du premier. Le deuxième contrôle diffère uniquement dans la mesure où son concepteur associé peut être redimensionné sur l'aire de conception.

Pour créer un contrôle composite redimensionnable et un concepteur associé

Dans l'espace de noms que vous avez déclaré dans le fichier SimpleControlDesigners, créez une déclaration publique pour une nouvelle classe de contrôle composite qui hérite du contrôle SimpleCompositeControl que vous avez créé auparavant. L'exemple de code suivant illustre une nouvelle déclaration.
```
    Public Class SimpleCompositeControl2
        Inherits SimpleCompositeControl
    End Class
```
```
 public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
```

Associez ce contrôle à la classe de base CompositeControlDesigner.

Par défaut, cet exemple crée un concepteur redimensionnable de base pour le contrôle composite.

<Designer(GetType(CompositeControlDesigner))> _
Public Class SimpleCompositeControl2
    Inherits SimpleCompositeControl
End Class

[Designer(typeof(CompositeControlDesigner))]
public class SimpleCompositeControl2 : SimpleCompositeControl
{
}

Enregistrez le fichier.

Les deux premiers contrôles que vous avez créés étaient des contrôles composites que vous avez associé aux Concepteurs de contrôles composites. Vous devez maintenant créer un contrôle simple qui dérive de WebControl et l'associer à une classe ContainerControlDesigner. Ce type de concepteur est utile lorsque vous souhaitez associer un concepteur à un seul contrôle serveur Web personnalisé et fournir une seule zone modifiable sur l'aire de conception. Le contrôle personnalisé que vous créez à cette étape n'implémente aucune fonctionnalité réelle ; il sert uniquement à afficher les fonctionnalités de la classe ContainerControlDesigner.

Remarque :
Vous pouvez également fournir les mêmes fonctionnalités à l'aide d'un contrôle composite et d'un concepteur tels que ceux que vous avez créés auparavant. Cet exemple sert uniquement à montrer comment utiliser la classe ContainerControlDesigner et l'associer à un contrôle WebControl.

Pour créer un contrôle serveur Web et un concepteur conteneur avec une zone modifiable

Dans l'espace de noms que vous avez déclaré dans le fichier SimpleControlDesigners, créez une déclaration publique pour une nouvelle classe de contrôle serveur Web, comme indiqué dans l'exemple de code suivant.
```
   Public Class SimpleContainerControl
        Inherits WebControl
        Implements INamingContainer
    End Class
```
```
 public class SimpleContainerControl : WebControl, INamingContainer
    {
    }
```

Créez une classe de Concepteur de contrôles conteneurs à associer au contrôle personnalisé. Implémentez deux propriétés : une propriété FrameStyle qui contiendra le style du frame du concepteur et une propriété FrameCaption qui contiendra le texte de l'en-tête du frame. Ces propriétés fournissent un frame au contrôle qui doit être restitué visiblement et sélectionné sur l'aire de conception. Le code du concepteur et des propriétés est affiché dans l'exemple de code suivant.

Remarque :
La classe ContainerControlDesigner gère automatiquement tous les autres aspects du rendu du contrôle personnalisé au moment du design et de la fourniture d'une seule zone modifiable.

Public Class SimpleContainerControlDesigner
    Inherits ContainerControlDesigner

    Dim _style As Style

    ' Add the caption by default.
    Public Overrides ReadOnly Property FrameCaption() As String
        Get
            Return "A Simple ContainerControlDesigner"
        End Get
    End Property

    Public Overrides ReadOnly Property Framestyle() As Style
        Get
            If _style Is Nothing Then
                _style = New Style()
                _style.Font.Name = "Verdana"
                _style.Font.Size = New FontUnit("XSmall")
                _style.BackColor = Color.LightBlue
                _style.ForeColor = Color.Black
            End If

            Return _style
        End Get
    End Property

End Class

public class SimpleContainerControlDesigner : ContainerControlDesigner
{
    private Style _style = null;

    // Add the caption by default. Note that the caption 
    // will only appear if the Web server control 
    // allows child controls rather than properties. 
    public override string FrameCaption
    {
        get
        {
            return "A Simple ContainerControlDesigner";
        }
    }

    public override Style FrameStyle
    {
        get
        {
            if (_style == null)
            {
                _style = new Style ();
                _style.Font.Name = "Verdana";
                _style.Font.Size = new FontUnit ("XSmall");
                _style.BackColor = Color.LightBlue;
                _style.ForeColor = Color.Black;
            }

            return _style;
        }
    }
}

Associez le concepteur au contrôle. Juste au-dessus de la déclaration de classe du contrôle serveur Web, ajoutez l'attribut de métadonnées Designer. Notez que dans ce cas, comme indiqué dans l'exemple de code suivant, vous ajoutez également l'attribut ParseChildren avec un paramètre false. Cela indique à l'analyseur au moment du design de traiter le contenu interne des contrôles comme des contrôles enfants plutôt que comme propriétés. Dans ce cas, vous souhaitez traiter le contenu interne de ce contrôle comme des contrôles enfants afin de pouvoir faire glisser effectivement d'autres contrôles serveur dans la zone modifiable au moment du design et également modifier leurs propriétés.
```
<Designer(GetType(SimpleContainerControlDesigner))> _
<ParseChildren(False)> _
Public Class SimpleContainerControl
    Inherits WebControl
    Implements INamingContainer
End Class
```
```
[Designer (typeof(SimpleContainerControlDesigner))]
[ParseChildren (false)]
public class SimpleContainerControl : WebControl, INamingContainer
{
}
```
Enregistrez le fichier.

Vous avez créé trois contrôles personnalisés et les Concepteurs de contrôles associés qui s'y rapportent. Il reste à compiler les contrôles dans un assembly, puis à les utiliser dans un outil de design visuel.

Pour compiler les concepteurs et les contrôles personnalisés

Ouvrez une invite de commandes dans le dossier où vous avez créé le fichier SimpleControlDesigners. Depuis cette invite, vous pouvez compiler le code source dans un assembly.

Remarque :
Pour exécuter les compilateurs .NET Framework à partir de cet emplacement, vous devez avoir déjà ajouté le chemin de votre installation .NET Framework à la variable PATH de votre ordinateur. En général, ce chemin d'accès se trouve dans le répertoire d'installation de Windows à l'emplacement \Microsoft.NET\Framework\<numéro de version>. Si vous n'avez pas mis à jour la variable PATH, cliquez avec le bouton droit sur Poste de travail, sélectionnez Propriétés, cliquez sur l'onglet Avancé, puis sur le bouton Variables d'environnement. Dans la liste Variables système, double-cliquez sur la variable PATH. Dans la zone de texte Valeur de la variable, ajoutez un point-virgule à la fin des valeurs existantes dans la zone de texte, puis entrez le chemin de votre installation .NET Framework. Cliquez sur OK pour fermer toutes les boîtes de dialogue.

Pour exécuter les compilateurs .NET Framework à partir de cet emplacement, vous devez avoir déjà ajouté le chemin de votre installation .NET Framework à la variable PATH de votre ordinateur. En général, ce chemin d'accès se trouve dans le répertoire d'installation de Windows à l'emplacement \Microsoft.NET\Framework\<numéro de version>. Si vous n'avez pas mis à jour la variable PATH, cliquez avec le bouton droit sur Poste de travail, sélectionnez Propriétés, cliquez sur l'onglet Avancé, puis sur le bouton Variables d'environnement. Dans la liste Variables système, double-cliquez sur la variable PATH. Dans la zone de texte Valeur de la variable, ajoutez un point-virgule à la fin des valeurs existantes dans la zone de texte, puis entrez le chemin de votre installation .NET Framework. Cliquez sur OK pour fermer toutes les boîtes de dialogue.

Compilez les contrôles dans le fichier SimpleControlDesigners dans un assembly à l'aide de la commande de compilation suivante.

csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersCS.dll simplecontroldesigners.cs

vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersVB.dll SimpleControlDesigners.vb

Déplacez le fichier d'assembly résultant vers le dossier \Bin du site Web de la page qui hébergera vos contrôles.

Remarque :
Les utilisateurs Visual Studio qui souhaitent compiler les contrôles et les concepteurs doivent ajouter une référence à System.Design.dll. Pour plus d'informations, consultez Comment : ajouter une référence à un composant .NET ou COM dans un site Web.

Création d'une page Web qui hébergera les contrôles

Après avoir créé un assembly avec vos contrôles personnalisés et leurs Concepteurs de contrôles associés, vous créerez une page Web dans Visual Studio 2005 afin de référencer les contrôles, visualiserez comment ils s'affichent en mode Design, puis chargerez la page dans un navigateur.

Pour créer une page Web qui hébergera les contrôles

En laissant votre site Web ouvert dans Visual Studio 2005, créez une nouvelle page appelée ControlDesigners.aspx. En haut de cette page, juste en dessous de la déclaration de page, ajoutez une directive Register afin de référencer l'assembly et les contrôles que vous avez créés auparavant, comme indiqué dans l'exemple de code suivant.
```
<%@ Page Language="VB" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersVB" 
  namespace="Samples.AspNet.VB.Controls" %>
```
```
<%@ Page Language="C#" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersCS" 
  namespace="Samples.AspNet.CS.Controls" %>
```

Complétez le reste de la page comme indiqué dans l'exemple de code suivant, afin de référencer chacun des trois contrôles créés auparavant : SimpleCompositeControl, SimpleCompositeControl2 et SimpleContainerControl. Notez que pour référencer chaque contrôle, vous utilisez le préfixe aspSample spécifié dans la directive Register.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1"  />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3"  
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1"  />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3"  
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

Enregistrez la page.

Vous pouvez maintenant tester la page en mode Design afin de voir comment les Concepteurs de contrôles fonctionnent.

Pour montrer le rendu au moment du design des contrôles

Basculez en mode Design de la page.

Les contrôles doivent apparaître tels que dans la capture d'écran suivante. Vous pouvez remarquer que le deuxième contrôle composite est redimensionnable alors que le premier ne l'est pas.

Page ControlDesigners.aspx en mode Design
Cliquez dans la région de contenu du contrôle conteneur, puis tapez du texte pour le contrôle.
Basculez en mode Source, puis localisez le code source du contrôle conteneur. Confirmez que le texte que vous avez tapé dans la région apparaît désormais dans le code source.
Basculez à nouveau en mode Design.
Cliquez sur le frame du contrôle, positionnez le pointeur de la souris sur l'une des icônes de redimensionnement, puis redimensionnez le contrôle conteneur.
Cliquez dans la zone modifiable du contrôle à la fin du contenu de texte, puis appuyez sur ENTRÉE pour ajouter un saut de ligne.
Faites glisser un contrôle Button depuis la Boîte à outils, puis placez-le dans la zone modifiable située sous le texte que vous avez saisi. Faites glisser un contrôle Label depuis la Boîte à outils, puis placez-le à côté du bouton. Cela indique que vous pouvez faire glisser des contrôles enfants dans la zone modifiable. Si vous le souhaitez, vous pouvez définir des propriétés sur les contrôles enfants au moment du design et vous pouvez ajouter le code du contrôle Button afin de mettre à jour la propriété Text du contrôle Label au moment de l'exécution.

La page contenant les contrôles que vous venez d'ajouter doit ressembler à la capture d'écran suivante.

Contrôle conteneur avec contrôles enfants
Enregistrez la page.

Pour afficher la page au moment de l'exécution

Chargez la page dans un navigateur.

Les contrôles doivent apparaître tels que lorsque vous les avez personnalisés en mode Design. Votre page doit ressembler à la capture d'écran suivante.

Page Web de Concepteurs de contrôles terminée

Étapes suivantes

Cette procédure pas à pas a illustré les tâches de base qu'implique la création d'un contrôle personnalisé associé à un Concepteur de contrôles conteneurs ou composites. Vous avez créé des contrôles personnalisés avec des concepteurs qui vous ont permis de redimensionner les contrôles et d'ajouter du texte dans une zone modifiable en mode Design dans Visual Studio 2005. Voici quelques suggestions pour une exploration plus approfondie :

Étudiez les autres nouvelles fonctionnalités puissantes disponibles avec les Concepteurs de contrôles. Pour plus d'informations, consultez Vue d'ensemble des Concepteurs de contrôles ASP.NET.
Essayez de créer des scénarios de concepteurs plus élaborés où vous créez un rendu au moment du design spécialisé et tirez parti de fonctionnalités telles que les listes d'actions. Pour plus d'informations, consultez Exemple de Concepteur de contrôles avec listes d'actions et services.

Voir aussi

Concepts

Vue d'ensemble des Concepteurs de contrôles ASP.NET

Partager via