IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

19/07/2007

Par


1. Présentation
2. Prérequis
3. Les différents types de contrôles mis à votre disposition : contrôles utilisateur Web ou contrôles Web personnalisés ?
4. Les Contrôles Utilisateur Web
4.1. Création
4.2. Installation


1. Présentation


Pour qui a déjà utilisé des outils de développement classique tel que ceux de la gamme borland ou ceux de Microsoft, l’utilisation de composants que l’on dépose sur une page et qui encapsule de nombreuse méthodes et propriétés déjà implémentées facilite grandement le développement. Ils mettent en avant le concept de réutilisabilité.

Les outils de développement tel que C# Builder ou Visual C# proposent bien évidemment de tel composant pour les Win Form classiques mais également pour les Web Form (pages ASP.NET). De nombreux tutoriels nous apprennent comment créer ces propres composants Win Form, mais le sujet est vite épuisé lorsque l’on aborde la création de contrôle pour les Web Forms.

Ce tutoriel a pour objectif de vous apprendre à créer des controles personnalisés réutilisables sur vos pages web et ce à l’aide de C# Builder de Borland.

Dans un premier temps nous présenterons les différents types de Contrôles web disponibles et nous établirons un tableau comparatif. Nous aborderons ensuite la conception et l’installation des Contrôles Utilisateur Web , puis celle des Contrôles Web Personnalisés. A la fin de ce tutoriel vous serez donc en mesure de créer vous-même ces deux types de contrôle afin de construire vos pages ASP.Net dynamiques.

Toutefois, ce tutoriel n’a pas la prétention d’être exhaustif sur le sujet car il est infiniment vaste, mais il vous donnera les concepts de base utiles à votre autonomie.


2. Prérequis


La conception de tel composant nécessite un certain nombre de pré requis : Connaissance du langage C# Connaissance du HTML Connaissance des composants visuels Connaissance des concepts de base d’une page ASP.NET


3. Les différents types de contrôles mis à votre disposition : contrôles utilisateur Web ou contrôles Web personnalisés ?


Si les contrôles mis à votre disposition par C# Builder ne correspondent pas à vos attentes ou que vous souhaitiez ajouter des fonctionnalités à certain composant, vous avez la possibilité de créer vos propres composants. Pour ce faire vous devrez choisir entre les Contrôles Utilisateur Web ou les Contrôles Web Personnalisés.

Comme les appellations ne sont pas très explicites, allons un peu plus dans le détail.

Les Contrôles Utilisateur Web sont des composants dont le code n’est pas compilé. Il faut donc associé leur code à chaque projet devant les utilisés ce qui limite très fortement le déploiement de tel composant. D’autre part n’étant pas compilés, ils ne peuvent être ajoutés à une barre d’outil qui elle utilise des assenbly (dll). Enfin, ne disposant pas de "Designer" leur apparence sur une page ASP.NET en construction est très rudimentaire. Ces composants sont toutefois intéressant à utiliser car leur création est simplifèe du fait qu’elle se fait à l’aide d’un concepteur visuel.

A l’opposé, les contrôles Web personnalisés sont compilés et formes des assemblys. Ils peuvent donc être ajoutés à une barre d’outil et réutilisés sur différentes applications très facilement. De plus ils disposent d’un "Designer" qui gère l’apparence du composant sur la feuille ASP.NET en cours de construction. Par contre la simplicitè d’utilisation est alourdie par une difficulté d’implémentation. En effet, ils ne disposent pas de concepteur visuel et la mise en place du "Designer" de composant relève de l’age de pierre !

Suite à cette comparaison deux conclusions s’imposent.

La première est qu’il est préférable d’utiliser des Contrôles Utilisateur Web si une grande partie de votre contrôle est statique. A l’inverse si votre contrôle est dynamique (Gestion de données, modification de l’apparence) il est préférable d’utiliser des Contrôles Web Personnalisés.

La deuxième conclusion consiste à ce demander pourquoi Microsoft n’ajoute pas les avantages de ces deux types de composant afin de n’en retenir qu’un seul ?

Voici résumées dans ce tableau les caractéristiques des deux types de contrôles :

Contrôles utilisateur Web Contrôles Web personnalisés
Création plus facile Création plus difficile
Intégration dans une barre d’outil impossible Intégration dans une barre d’outil possible
Chaque application requiert une copie distincte du contrôle Une seule copie du contrôle est requise dans le cache d'assembly global
Apparence basique du composant sur une page en mode création Prise en charge complète de l’Apparence du composant sur une page en mode création
Fonctionne avec la présentation statique Fonctionne avec la présentation dynamique
Si ce tableau ne vous paraît pas très clair, il le deviendra au cours de ce tutoriel.


4. Les Contrôles Utilisateur Web


Nous verrons dans un premier temps leur création puis dans un second temps leur utilisation dans une Page ASP.NET.

Pour illustrer notre propos nous allons créer un composant qui implémentera le jeu du taquin. Voici un aperçu du résultat final de ce que nous souhaitons réaliser.

Lorsque le joueur clique sur une piece, elle se dépalce dans la case vide si elle possede une arrete commune avec celle-ci. La partie est finie quand les lettres sont classées dans l'ordre alphabétique.


4.1. Création


Au préalable nous avons créé un répertoire D:\www dans lequel nous stockerons nos projets.

Dans un premier temps nous allons créer le projet qui utilisera le composant :

Dans le menu « Edition » cliquez sur « Nouveau » puis sur « Application Web ASP.NET » Une Boite de dialogue s’affiche.

Vous pouvez changer le nom du projet. Pour le tutoriel nous l’appellerons « ControleUtilisateur ». Cliquez sur « OK ». Un nouveau projet est créé et une webForm s’affiche dans le concepteur.

Fermez cette WebForm.

Le projet étant créé nous pouvons maintenant ajouter au projet le contrôle utilisateur.

Pour ce faire, dans le menu « Edition » cliquez sur « nouveau » puis sur « Autre… ». Une boite de dialogue s’affiche.

Cliquez sur le dossier « Fichiers C# ASP.NET » et sélectionnez l’icône « Contrôle Utilisateur ASP.NET ». Cliquez sur « OK ». Une nouvelle fenêtre apparaît dans le mode concepteur.

Afin de changer le nom du contrôle utilisateur dans le menu « Edition » cliquez sur « enregistrer ». Dans la boite de dialogue qui s’ouvre changez le nom en « Taquin.ascx » et vérifiez bien que le répertoire correspond à celui dans lequel vous avez créez le projet, puis cliquez sur le bouton « Enregistrer».

Vous pouvez vérifier que le contrôle a bien été ajouté au projet en affichant le gestionnaire de projet. Il doit correspondre à ceci :

Revenons à la fenêtre principale et regardons comment est constitué le contrôle utilisateur. Pour cela vous avez à votre disposition trois onglets qui se situent en bas de la page.

L’onglet « Conception » correspond à l’éditeur graphique de composant.

Le second intitulé « Taquin.ascx.cs » qu’en à lui correspond au code « Behind » c'est-à-dire au programme C# exécuté coté serveur. Par défaut il comporte une classe abstraite WebUserControl1 qui hérite des System.Web.UI.UserControl. Changez directement le nom de cette class dans le script en l’appelant « Taquin ». 

public abstract class Taquin : System.Web.UI.UserControl
Cette classe possède une méthode qui correspond à l’événement de chargement du control utilisateur. Nous verrons plus loin comment utiliser cette méthode. 

private void Page_Load(object sender, System.EventArgs e)
Enfin le troisième onglet intitulé « Taquin.ascx » correspond à la sortie HTML qui sera envoyée au client. Par défaut il comporte la ligne qui permet au client de trouver les différent éléments afin d’afficher la page correctement. 

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="Taquin.ascx.cs" Inherits="ControleUtilisateur.WebUserControl1"%>
Pour le détail des options voir l'aide de C# Builder avec l'index : "@ Control (directive)".

Retournons sur la page de conception pour y déposer les objets dont nous avons besoin.

Tous les objets constituant un Controle Utilisateur doivent être des Web Controls.

Dans un premier temps déposons un « Web Controls » « Button ». Le Control se dessine sur la feuille de conception et sa position est automatiquement relative.

Modifier sa position de sorte qu’elle soit absolue en cliquant sur l’icône puis décalez le vers la droite.

Allons voir maintenant le résultat sur les deux autres pages.

Dans le code Behind, une déclaration de l’objet est ajoutée. Elle nous permettra d'avoir acces à l’objet. 

protected System.Web.UI.WebControls.Button button1;
Sur la page ASPX nous obtenons le code suivant : 

<asp:button id=button1 style="LEFT: 78px; POSITION: absolute; TOP: 38px" text="Button" runat="server"> </asp:button>
Il s’agit de balises de code HTML ASP. C’est ce code qui sera interprété et ajouté au code HTML de la page ASP.NET sur laquelle le composant est déposé. Le tout sera ensuite envoyé au client.

A la lecture de ce code nous en déduisons que l’objet est de classe button, que son identificateur est button1, que sa position est absolue, que sa position gauche est de 78, que sa position haute est de 38, que la valeur de du texte est "Button" et qu’il est géré par le serveur. Il est indispensable de comprendre le code contenu dans les balises ASP car il devra être modifié afin de paramétrer les composants.

Maintenant que nous avons compris comment fonctionne l’ajout d’un Web Control sur le composant nous allons pouvoir retourner sur la page composition afin d’ajouter les autres éléments du Taquin.

Nous avons besoin de 10 Buttons d’un Label et d’un TextBox. Ne vous énervez pas à les disposer manuellement, nous ajusterons leurs positions et leurs dimensions via le code HTML. Vous pouvez tout de même changer la police et la couleur de fond dans le mode conception.

Une fois les objets insérer sur la feuille, contrôlez dans l’onglet « Taquin.ascx.cs » que tous les objets sont déclarés.

Nous allons maintenant modifier l’apparence de chaque objet.

Remarque : ceci aurait pu être fait directement dans la page de conception à l’aide de l’inspecteur d’objet. Pour des raisons pédagogiques mais aussi afin d’obtenir un résultat parfaitement conforme à ce que l’on souhaite nous allons modifier directement le code HTML.

Nous allons modifier la propriété "Style" qui comporte la position "Left" et "Top" et nous modifirons également les propriétés "width" et" height".

Voici le code final 

<%@ Control Language="c#" AutoEventWireup="false" 
Codebehind="Taquin.ascx.cs"
Inherits="ControleUtilisateur.Taquin"%>

<asp:button id=button1 style="LEFT: 100px; POSITION: absolute; TOP: 100px" text="A" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True">
</asp:button>


<asp:button id=button2 style="LEFT: 200px; POSITION: absolute; TOP: 100px" text="B" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30"
font-bold="True">
</asp:button>

<asp:button id=button3 style="LEFT: 300px; POSITION: absolute; TOP: 100px" text="C" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True">
</asp:button>

<asp:button id=button5 style="LEFT: 200px; POSITION: absolute; TOP: 200px" text="E" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True">
</asp:button>

<asp:button id=button6 style="LEFT: 300px; POSITION: absolute; TOP: 200px" text="F" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True">
</asp:button>

<asp:button id=button7 style="LEFT: 100px; POSITION: absolute; TOP: 300px" text="G" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True">
</asp:button>

<asp:button id=button4 style="LEFT: 100px; POSITION: absolute; TOP: 200px" text="D" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True">
</asp:button>

<asp:button id=button8 style="LEFT: 200px; POSITION: absolute; TOP: 300px" text="H" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True">
</asp:button>

<asp:button id=button9 style="LEFT: 300px; POSITION: absolute; TOP: 300px" text="#" runat="server" width="100px" height="100px" backcolor="#FFE0C0" forecolor="Red" font-size="30pt" font-bold="True" visible="False">
</asp:button>

<asp:button id=button10 style="LEFT: 310px; POSITION: absolute; TOP: 62px" text="Initilaiser" runat="server" forecolor="#C00000" font-bold="True" font-italic="True">
</asp:button>

<asp:label id=label1 style="LEFT: 104px; POSITION: absolute; TOP: 36px" runat="server" forecolor="Red" font-size="Medium" font-bold="True"> Etat : </asp:label>
<asp:textbox id=textBox1 style="LEFT: 123px; POSITION: absolute; TOP: 62px" runat="server" backcolor="#FFE0C0" forecolor="#0000C0" font-bold="True" wrap="False" readonly="True">
</asp:textbox>
Verifiez l'apparence du projet dans l'onglet conception. Le composant doit avoir cette apparence :

Voilà nous avons fini de paramétrer l’aspect de notre composant, nous pouvons maintenant nous consacrer au code qui sera exécuté en arrière plan sur le serveur.

La logique est une fois de plus la même que lors de la création d’une page ASP.NET. Pour cela retournons sur le code behind.

Tout d’abord nous allons faire un gestionnaire d’événement centralisé pour les boutons du jeu.

Affichez le code généré automatiquement par le concepteur et modifier la méthode « InitializeComponent ». 

private void InitializeComponent()
{
	this.button2.Click += new System.EventHandler(this.button_Click);
	this.button1.Click += new System.EventHandler(this.button_Click);
	this.button3.Click += new System.EventHandler(this.button_Click);
	this.button5.Click += new System.EventHandler(this.button_Click);
	this.button6.Click += new System.EventHandler(this.button_Click);
	this.button7.Click += new System.EventHandler(this.button_Click);
	this.button4.Click += new System.EventHandler(this.button_Click);
	this.button8.Click += new System.EventHandler(this.button_Click);
	this.button9.Click += new System.EventHandler(this.button_Click);

	this.button10.Click += new System.EventHandler(this.button10_Click);

	this.Load += new System.EventHandler(this.Page_Load);
}
Créez ensuite une méthode « button _Click »

private void button_Click(object sender, System.EventArgs e)
{
	this.TestDeplacement((Button)sender);
}
Cette méthode exécutera la méthode « TestDeplacement » qui teste si la pièce sur laquelle un clique est détecté a une pièce dont la propriétée visible est à false autour d’elle. Si tel est le cas cette propriété visible de la pièce est mise à false et l’autre pièce devient visible. De la même manière il y a un échange de la propriété text.

Il est également nécessaire de modifier la méthode « Page_Load » qui est déclenchée à chaque fois que le composant est chargé.

En fait à chaque événement sur un objet du composant l’ensemble du composant est redessiné. Il faut donc un moyen de savoir s’il s’agit du premier chargement de la page ou s’il s’agit d’un rafraîchissement. La méthode « IsPostBack » permet de savoir si tel est le cas. Elle renvoie la valeur true si la page a déjà été chargée et false s’il s’agit de la première fois. Dans l’exemple nous voulons qu’il y ai un tirage au sort lors du premier chargement, non pas à chaque fois qu’un bouton est cliqué. 

private void Page_Load(object sender, System.EventArgs e)
{
	// Placer ici le code utilisateur pour initialiser la page
	textBox1.Text = LectureChaine();
	if (!Page.IsPostBack)
	initialise();
}
Nous pouvons également lui ajouter des propiétés. Nous avons ainsi ajouté des propriètès qui sont en lecture uniquement et qui nous indiquent d'une part si la partie est finie et d'autre part la chaine représentant la partie en cours.

Voici le code de ces deux propriétés : 

public bool fini{
	get{
		return Ffini;
	}
}
	
public string Chaine{
	get{
		return LectureChaine();
	}
}
Voici résumé l’ensemble des méthodes du composant :

Méthode Action
private void Page_Load(object sender, System.EventArgs e) Evénement de chargement de la fenêtre
public void initialise() Initialise le jeu en attribuant au hazard les lettres aux boutons
private void button_Click(object sender, System.EventArgs e) Evénement déclenché par un clique sur un bouton du jeu
public void TestDeplacement(Button sender) Teste si le bouton peut etre déplacé
private void button10_Click(object sender, System.EventArgs e) événement de clique sur le bouton de réinitialisation
private string LectureChaine() lit les valeurs des boutons et les transforment en chaine
Voici le code complet : 

using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI;

namespace ControleUtilisateur
{
/// <summary>
/// Description Résumé de WebUserControl1.
/// </summary>

public abstract class Taquin : System.Web.UI.UserControl
{
	private bool Ffini; // variable locale indiquant si la partie est finie
	protected System.Web.UI.WebControls.Button button2; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button1; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button3; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button5; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button6; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button7; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button4; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button8; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button9; //Bouton du jeu
	protected System.Web.UI.WebControls.Button button10; //Bouton de réinitialisation
	protected System.Web.UI.WebControls.Label label1; //Label affichant un commentaire
	protected System.Web.UI.WebControls.TextBox textBox1; //Affiche la chaine retranscrivant l'état de la partie

	public bool fini{ // propriètè indiquant si la partie est finie
		get{
			return Ffini; //retourne la variable privée Ffini
		}
	}

	public string Chaine{ //propriètè retournant la chaine qui correspond à l'étét de la partie
		get{
			return LectureChaine(); // Retourne le résultat de la fonction LectureChaine()
		}
	}

	public string Titre{ // propriété mofifiant qui modifie ou qui retourne le texte cpntenu dans le label1
		get {
			return label1.Text; //
		}
		set {
			label1.Text = value; //
		}
	}

	private void Page_Load(object sender, System.EventArgs e) //méthode de l'événement de chargement du composant
	{
		// Placer ici le code utilisateur pour initialiser la page
		textBox1.Text = LectureChaine(); // affiche la valeur de la partie dans le textBox
		if (!Page.IsPostBack) // test si le chargement est le premier ou s'il s'agit d'un rafraichissement (PostBack)
		initialise(); // s'il s'agit d'un premier chargement le jeu est initialisé
	}

	public void initialise(){ //permet d'initialisé le jeu en attribuant au hazard les lettres aux boutons
		String Phrase = "ABCDEFGH#"; //string comportant les lettres à attribuer
		String[] TabLettre = new String[9]; //Stocke les lettres qui sont déja attribuées
		Random Rand = new Random(); // objet générant des nombre aléatoire
		int Alea ;
		int i;
		bool sortie;
		Ffini = false;
		//Remplissage du tableau "TabLettre" avec les élément de "Phrase"
		for (i=0 ; i<9;i++){ //parcour de tout les élément de la string Phrase
			sortie = false;
			while (!sortie ){
				Alea = Rand.Next(0,9); //affectation d'un nombre aléatoire à Alea
				if ( TabLettre[Alea]== null){ //test si la case du tableau correspondant à aléa est vide
					TabLettre[Alea] = Convert.ToString(Phrase[i]); //affectation du caractère à la caxe du tableau
					sortie = true; //avance d'une lettre dans la phrase
				}
			}
		}
		//Affecte les valeurs contenu dans "TabLettre" aux boutons et masque le bouton ayant la valeur "#"
		Button locbutton ;
		for (i=1 ; i<10;i++){
			locbutton = ((Button)this.FindControl("button"+(i))); //trouve le bouton ayant cet identifiant
			locbutton.Text = TabLettre[i-1]; //affecte la valeur contenue dans "TabLettre" au bouton correspondant
			if (TabLettre[i-1].Equals("#")) //test si le bouton comporte le caractère "#"
				locbutton.Visible = false; //masque le bouton
			else
				locbutton.Visible = true;
		}
		textBox1.Text = LectureChaine(); // met à jour le texte contenu dans textBox1
	}


#region Code généré par le concepteur Web Form

	override protected void OnInit(EventArgs e)
	{
		//
		// CODEGEN: cet appel est requis par le concepteur services Web ASP.NET.
		//
		InitializeComponent();
		base.OnInit(e);
	}

	/// <summary>
	/// Méthode requise pour la gestion du concepteur - ne pas modifier
	/// le contenu de cette méthode avec l'éditeur de code..
	/// </summary>
	
	private void InitializeComponent()
	{
		//gestionnaire d'événement centralisé
		this.button2.Click += new System.EventHandler(this.button_Click);
		this.button1.Click += new System.EventHandler(this.button_Click);
		this.button3.Click += new System.EventHandler(this.button_Click);
		this.button5.Click += new System.EventHandler(this.button_Click);
		this.button6.Click += new System.EventHandler(this.button_Click);
		this.button7.Click += new System.EventHandler(this.button_Click);
		this.button4.Click += new System.EventHandler(this.button_Click);
		this.button8.Click += new System.EventHandler(this.button_Click);
		this.button9.Click += new System.EventHandler(this.button_Click);
		
		this.button10.Click += new System.EventHandler(this.button10_Click);
		this.Load += new System.EventHandler(this.Page_Load);
	}
#endregion

	private void button_Click(object sender, System.EventArgs e) // événement déclenché par un clique sur un bouton du jeu
	{
		this.TestDeplacement((Button)sender);
	}


	public void TestDeplacement(Button sender){ //teste si le bouton peut etre déplacé
		int i;
		string num = "";
		string message = sender.ID; // récupère l'ID du composant
		num += message[6]; //récupère la dernière lettre de l'ID du composant (correspond au numéro du composant
		i= Convert.ToInt32(num); // converti num en int 32
		Button locbutton ;
		bool flag = false;
		if ( i+1<=9 && !flag && i!= 3 && i!=6){ //test le bouton en dessous
			locbutton = ((Button)this.FindControl("button"+(i+1)));
			if ( locbutton.Visible == false){ // test si ce bouton est visible
				sender.Visible = false;
				locbutton.Visible = true;
				locbutton.Text = sender.Text;
				sender.Text="#";
				flag= true;
			}
		}
		if ( i-1>=1 && !flag && i!= 4 && i!=7){ //test le bouton au dessus
			locbutton = ((Button)this.FindControl("button"+(i-1)));
			if ( locbutton.Visible == false){
				sender.Visible = false;
				locbutton.Visible = true;
				locbutton.Text = sender.Text;
				sender.Text="#";
				flag= true;
			}
		}
		if ( i+3<=9 && !flag){ // test le bouton à droite
			locbutton = ((Button)this.FindControl("button"+(i+3)));
			if ( locbutton.Visible == false){
				sender.Visible = false;
				locbutton.Visible = true;
				locbutton.Text = sender.Text;
				sender.Text="#";
				flag= true;
			}
		}
		if ( i-3>= 1 && !flag ){ // test le bouton à gauche
			locbutton = ((Button)this.FindControl("button"+(i-3)));
			if ( locbutton.Visible == false){
				sender.Visible = false;
				locbutton.Visible = true;
				locbutton.Text = sender.Text;
				sender.Text="#";
				flag= true;
			}
		}
		textBox1.Text = LectureChaine(); // actualise la valeur du textebox	
		if (textBox1.Text.Equals("ABCDEFGH#")&& flag ){ // test si la partie est finie
			Response.Write("<body><script>alert(\" BRAVO ! Vous avez Gagner !\");</script></body>"); // affiche une boite de dialogue
			Ffini = true; // indique que la partie est finie
		}
	}

	private void button10_Click(object sender, System.EventArgs e) // événement de clique sur le bouton de réinitialisation
	{
		this.initialise();
	}

	private string LectureChaine(){ // lie les valeurs des boutons et les transforment en chaine
		string ligne = button1.Text ;
		ligne += button2.Text ;
		ligne += button3.Text ;
		ligne += button4.Text ;
		ligne += button5.Text;
		ligne += button6.Text ;
		ligne += button7.Text ;
		ligne += button8.Text ;
		ligne += button9.Text ;
		return ligne;
	}

}
}
Voilà notre composant est terminé.

Il ne nous reste plus qu’à l’ajouter à une page de notre projet ASP.NET.


4.2. Installation


Dans le gestionnaire de projet double cliquez sur la page principale nommée « WebForm1.aspx » et affichez l'onglet conception.

Dans le menu « Insérer » cliquez sur « Insérer un Control Utilisateur… ». Une boite de dialogue s’ouvre.

Dans la boite déroulante sélectionnez le composant à ajouter ou s’il n’apparaît pas cliquez sur « Parcourir ».

Le composant à ajouter a une extension « ascx » et il doit être contenu dans le répertoire du projet. Si vous souhaitez insérer un composant contenu dans un autre projet il faut copier les fichiers dont l'extension est .ascx, .ascx.resx et .ascx.cs dans le répertoire du projet.

Cliquez ensuite sur « OK ». Le composant est alors ajouté sur la feuille ASP.NET.

Vous remarquerez qu’il n’a pas la structure du composant que vous avez construit. D’autre part l’utilisation de ce composant n’a pas nécessité la compilation de celui-ci. En effet le code est compilé en même temps que celui de la page ASP.NET et il n'existe pas de "designer" de controle utilisateur.

Il est possible de créer une biliothèque de controle Utilisateur. Pour cela reportez vous aux articles intitulés "Une librairie de UserControl ? C’est possible !" et "Une librairie de UserControl ? Sans code (ou presque) C’est aussi possible ! ;)".

Voyons maintenant dans le code HTML et le code Behind comment est géré ce nouveau composant.

Dans le code HTML vous devez voir apparaître deux sections

La première comporte : 

<%@ Register TagPrefix="uc1" TagName="Taquin" Src="Taquin.ascx" %>
Elle est située en haut de page et indique au constructeur une entrée dans le registre

La seconde est une entrée ASP : 

<uc1:taquin id=userControl1 runat="server">
</uc1:taquin>
Il s’agit d’une référence au composant que l’on vient d’ajouter.
Vous pouvez modifier cette entrée afin de changer la position « left » et « top » comme réalisé précédemment.

Le code behind qu’en à lui ne fait pas référence au composant
Il vous apparteint de créer la référence vers ce nouveau composant. Ainsi vous pouvez utiliser ces méthodes et propriétés publiques dans un code qui sera exécuté par le serveur. Il est toutefois nécessaire de déclarée la classe du Controle Utilisateur Web non abstraite. 

public class WebForm1 : System.Web.UI.Page
{
protected Taquin Taquin1;
Compilez le programme et éxécutez le. Le Taquin doit s’afficher sur votre page et vous pouvez jouer.

Remarquez qu’a chaque clique sur un bouton, la page se recharge sur le serveur. Le serveur exécute le code Behind afin de générer une nouvelle page. Nous aprofondirons ce mécanisme dans le chapitre consacré aux Controles Web Personnaliés

Voilà vous venez de créer votre premier composant.

A travers cet exemple nous avons mis en évidence les 5 caractéristiques des Contrôle utilisateur que nous avons énoncé au cours de l’introduction. Je vous invite à les relire afin de prendre pleinnement la porté de leur valeur et de poursuivre ce tutoriel en découvrant les controles web personnalisès.