Accueil
Accueil Le Club Delphi Kylix C C++ Java J2EE DotNET & C# Visual Basic Access Pascal Dev Web PHP ASP XML UML SQLSGBD Windows Linux Autres
logo

precedent    sommaire    suivant   


Comment créer un composant personnalisé (customControl) ?
auteur : nico-pyright(c)
On crée un composant personnalisé lorsqu'on a besoin de créer un contrôle propre qui doit se comporter comme un WebControl.
Il s'agit de créer une classe qui hérite de WebControl.
add -> new item -> class

Public Class MonWebControl
    Inherits WebControl
End Class

	
Toute la logique interne doit ensuite etre implémentée, événement, rendu, etc ...
Voir aussi : quelle est la différence entre un composant personnalisé et un contrôle utilisateur ?


Quelle est la différence entre un composant personnalisé et un contrôle utilisateur ?
auteur : nico-pyright(c)
Un contrôle utilisateur (userControl) et un contrôle personnalisé (customControl) sont tous les deux des contrôles. Ils ont en général tous les deux pour but d'être des composants réutilisables.
Les contrôles utilisateurs sont en général des contrôles composés d'autres contrôles de base à utiliser dans des situations précises. Ca peut etre le cas par exemple pour un contrôle utilisateur de login, qui possède deux labels, deux textbox et un bouton valider, ainsi que le traitement associé au bouton valider.
Les contrôles personnalisés sont en général des contrôles unitaires qui font une tache unique et qui sont créés de A à Z ou en dérivant d'un contrôle existant. Il peut s'agir par exemple d'un textbox numérique qui sera exactement comme un textbox sauf qu'on pourra saisir uniquement des nombres.
En général, on crée un contrôle personnalisé lorsqu'il a pour vocation d'etre utilisé dans plusieurs applications. Si le contrôle ne doit etre utilisé que dans un seul site web, on créera en général un contrôle utilisateur.
Un contrôle utilisateur est une page dont l'extension est .ascx alors qu'un contrôle personnalisé sera une assembly


Comment utiliser un contrôle personnalisé ?
auteur : nico-pyright(c)
Il s'agit d'abord d'utiliser la directive Register en précisant un préfixe, le namespace et l'assembly qui contient le contrôle.


<%@ Register TagPrefix="Exemple" Namespace="testWeb" Assembly="testWeb" %>
	
Pour utiliser le contrôle, on fera ensuite :

<Exemple:MonControle ID="monId" runat="server" ... />
	

Comment créer un composant personnalisé à partir d'un contrôle existant ?
auteur : nico-pyright(c)
Il faudra faire dériver notre custom control du contrôle père et surcharger les méthodes qui nous intéressent.
Exemple : voici l'implémentation d'un custom control qui dérive du composant Image pour proposer l'ajout d'un rollover.
Public Class MonImageRollOver
    Inherits Image

    Private _imageOverUrl As String
    Public Property ImageOverUrl() As String
        Get
            Return _imageOverUrl
        End Get
        Set(ByVal value As String)
            _imageOverUrl = value
        End Set
    End Property

    Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)
        Attributes.Add("onmouseover", String.Format("this.src = '{0}'", _imageOverUrl))
        Attributes.Add("onmouseout", String.Format("this.src = '{0}'", ImageUrl))
        MyBase.OnPreRender(e)
    End Sub
End Class
	
On a rajouté ici la propriété ImageOverUrl et surchargé le rendu en ajoutant les attributs javascript onmouseover et onmouseout.
On pourra utiliser le contrôle de cette facon :
<Exemple:MonImageRollOver ID="IdImageRollover" runat="server" ImageUrl="image.gif" ImageOverUrl="image_Over.gif" />

Comment faire le rendu d'un composant personnalisé ?
auteur : nico-pyright(c)
il faudra surcharger la méthode

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

	
et utiliser l'objet HtmlTextWriter pour faire le rendu.
Exemple : voici l'implémentation d'un contrôle hyperlink de A à Z qui gère le rollover


Public Class MonHyperLinkRollOver
    Inherits WebControl

    Private _imageOverUrl As String
    Public Property ImageOverUrl() As String
        Get
            Return _imageOverUrl
        End Get
        Set(ByVal value As String)
            _imageOverUrl = value
        End Set
    End Property

    Private _imageUrl As String
    Public Property ImageUrl() As String
        Get
            Return _imageUrl
        End Get
        Set(ByVal value As String)
            _imageUrl = value
        End Set
    End Property

    Private _navigateUrl As String
    Public Property NavigateUrl() As String
        Get
            Return _navigateUrl
        End Get
        Set(ByVal value As String)
            _navigateUrl = value
        End Set
    End Property

    Private _alt As String
    Public Property Alt() As String
        Get
            Return _alt
        End Get
        Set(ByVal value As String)
            _alt = value
        End Set
    End Property

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
        writer.WriteBeginTag("a")
        writer.WriteAttribute("href", ResolveUrl(_navigateUrl))
        writer.Write(HtmlTextWriter.TagRightChar)

        writer.WriteBeginTag("img")
        writer.WriteAttribute("id", ID)
        writer.WriteAttribute("src", _imageUrl)
        writer.WriteAttribute("style", "border:none;")
        writer.WriteAttribute("alt", _alt)
        writer.WriteAttribute("onmouseover", String.Format("this.src = '{0}'", _imageOverUrl))
        writer.WriteAttribute("onmouseout", String.Format("this.src = '{0}'", _imageUrl))
        writer.Write(HtmlTextWriter.SlashChar)
        writer.Write(HtmlTextWriter.TagRightChar)

        writer.WriteEndTag("a")
    End Sub

End Class
	
On a d'abord le code pour les propriétés et ensuite le rendu.
On utilise WriteBeginTag / WriteAttribute / Write / WriteEndTag pour écrire du html.
Ici l'appel :

<Exemple:MonHyperLinkRollOver ID="MonImageRollOver1" NavigateUrl="~/Default.aspx" runat="server" ImageUrl="image.gif" ImageOverUrl="image_Over.gif" alt="mon alt"/>

	
produira en sortie :

<a href="/Default.aspx"><img id="MonImageRollOver1" src="image.gif" style="border:none;" alt="mon alt" onmouseover="this.src = 'image_Over.gif'" onmouseout="this.src = 'image.gif'"/></a>

	

Comment faire pour référencer automatiquement un contrôle dans toutes les pages ?
auteur : nico-pyright(c)
il faut placer sa définition dans le web.config :

<pages>
  <controls>
      <add tagPrefix="Exemple" namespace="testWeb" assembly="testWeb" />
  </controls>
</pages>

	

precedent    sommaire    suivant   

Consultez les autres F.A.Q's


Les sources présentés sur cette pages sont libre de droits, et vous pouvez les utiliser à votre convenance. Par contre cette page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright ©2007  Developpez LLC. Tout droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérets. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide Accueil - Publiez vos articles, tutoriels, cours et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones. Nous contacter - Copyright 2000..2005 www.developpez.com