Utilisation et connexion de WebParts

Le but de ce tutoriel est de démontrer comment connecter deux WebParts.

N'hésitez pas à commenter cet article ! Commentez Donner une note à l'article (5)

Article lu   fois.

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

1. Introduction

Le but de ce tutoriel est d'expliquer de manière simple voire simpliste comment connecter deux WebParts. Pour savoir ce qu'est un WebPart et à quoi cela sert, veuillez consulter ce tutoriel http://humann.developpez.com/webpart/ Les WebParts seront créés en utilisant les contrôles WebParts disponibles dans Visual Studio 2005. Une introduction aux WebParts créés "à la main" est faite dans la section "Champ d'application des WebParts"

L'article se base sur un exercice car un bon exemple vaut toujours mieux qu'un long discours.

Cet exercice utilise deux WebParts, le premier contient une liste de départements affichés dans une DropDownList. Le deuxième contient un GridView affichant les employés appartenant au département sélectionné.

2. Sources de données

Deux fichiers XML basiques sont utilisés comme sources de données, ces fichiers sont stockés dans le répertoire App_Data et leur contenu est le suivant :

Le fichier Departments.xml

 
Sélectionnez

				<?xml version="1.0" encoding="utf-8" ?>
				<Departments>
					<Department>
						<Name>Vente</Name>
					</Department>
					<Department>
						<Name>Comptabilite</Name>
					</Department>
					<Department>
						<Name>IT</Name>
					</Department>
					<Department>
						<Name>Marketing</Name>
					</Department>
				</Departments>
			

C'est ce fichier qui sera contenu dans la DropDownList

Le fichier "EmployesParDepartement.xml"

 
Sélectionnez

				<?xml version="1.0" encoding="utf-8" ?>
				<EmployeesDepartements>
					<Employees dept="IT">
						<Employee>
							<LastName>Eyskens</LastName>
							<FirstName>Stephane</FirstName>
							<Age>31</Age>
							<Title>Rédacteur :)</Title>
						</Employee>
						....
					<Employees dept="Comptabilite">
						<Employee>
							<LastName>Autre Employé 1</LastName>
							<FirstName>Stephane</FirstName>
							<Age>31</Age>
							<Title>Chef comptable :)</Title>
						</Employee>
						<Employee>
							<LastName>Autre Employee 2</LastName>
							<FirstName>Jean</FirstName>
							<Age>51</Age>
							<Title>Comptable</Title>
						</Employee>
						....
			

3. Etablissement d'une connexion

L'établissement d'une connexion entre deux WebParts permet à ceux-ci d'échanger des données et de ce fait, d'adapter leur comportement en fonction de ce celles-ci. Il existe deux types de connexion. Les connexions statiques et dynamiques. Quel que soit le mode choisi, il faut impérativement définir des points de connexion entre l'émetteur et le récepteur des données. Ces points de connexion peuvent être définis à l'aide des attributs « ConnectionProvider » et « ConnectionConsumer » qui doivent préfixer les méthodes de classe chargées d'établir le dialogue. La communication entre les WebParts se base sur un contrat. Ce contrat est matérialisé par une interface.

3.1. Connexions statiques

Les connexions statiques sont définies manuellement dans le code HTML d'une page ASPX dans une section réservée à cet effet dans la définition du contrôle WebPartManager. Il faut y définir le fournisseur et le récepteur des données. Voici un exemple de connexion statique

 
Sélectionnez

<asp:WebPartManager ID="WebPartManager1" runat="server">
	<StaticConnections>
		<asp:WebPartConnection ID="DeptToEmployees"
			ProviderID="ProviderControl1"
			ProviderConnectionPointID="DepartmentProvider"
			ConsumerID="ConsumerControl1"
			ConsumerConnectionPointID="DepartmentConsumer">
		</asp:WebPartConnection>
	</StaticConnections>
</asp:WebPartManager>
  • ProviderID : représente le nom du contrôle fournissant les données et au sein duquel une méthode de type « fournisseur de données » est définie.
  • ProviderConnectionPointID : représente le nom de la méthode fournissant une instance de l'interface renvoyée au consommateur (voir section contrat).
  • ConsumerID représente le nom du contrôle recevant les données et au sein duquel une méthode de type « réception de données » est définie
  • ConsumerConnectionPointID représente le nom de la méthode chargée d'exploiter les données de l'émetteur.

3.2. Connexions dynamiques

Dans le cadre d'une connexion dynamique, toutes les informations reprises ci-dessus sont automatiquement définies par le système selon les choix de l'utilisateur. En effet, lors d'une connexion dynamique, c'est l'utilisateur qui définit les WebParts émetteur et récepteur. Vous devez utiliser le contrôle "ConnectionsZone" qui gère automatiquement ce qui est illustré par les étapes 2,3,4 et 5. Vous devez aussi permettre le basculement en mode "ConnectDisplayMode", pour cela, créer un LinkButton ou un Bouton avec le code ci-dessous :

 
Sélectionnez
 
				if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)
					WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;
				else
					WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
				

BrowseDisplayMode est le mode par défaut des WebParts. ConnectDisplayMode est le mode permettant à l'utilisateur d'établir une connexion via le contrôle ConnectionsZone Voici, de manière illustrée, les différentes étapes qui permettent à l'utilisateur d'élaborer ce type de connexion.

Etape 1 : clic sur le lien "Créer une connexion"

Image non disponible

Etape 2 : clic sur "Connect" du menu du WebPart fournisseur

Image non disponible

Etape 3 : une zone de connexion s'affiche

Image non disponible

Etape 4 : choisir le WebPart consommateur

Image non disponible

Le système détecte tous les WebParts qui sont susceptibles de partager la connexion avec ce fournisseur et vous les propose dans une liste.

Etape 5 : rendre la connexion effective

Image non disponible

La connexion est à présent établie. Désormais, une sélection d'un département dans la liste du WebPart fournisseur provoquera le rafraîchissement du WebPart consommateur. La communication s'établit automatiquement dès que la page est envoyée vers le serveur. Vous ne devez donc pas définir d'Event Handler sur la DropDownList. Notez que la connexion a été établie en partant du fournisseur vers le récepteur. Vous auriez pu procéder en sens inverse auquel cas, le système aurait automatiquement détecté que vous désiriez vous connecter à un fournisseur et non à un récepteur.

4. Définition du contrat

 
Sélectionnez

				public interface IEmployeeDepartementContract
				{
					string GetDepartement();
				}
			

Le contrat de communication entre les WebParts consommateur et fournisseur se matérialise sous la forme d'une interface. Celle-ci décrit la/les méthode(s) que le fournisseur doit implémenter. A fortiori, celle(s) que le consommateur utilisera pour recevoir ses données. Dans notre exemple, le fournisseur doit fournir le nom du département sélectionné au consommateur, ceci peut se faire par le biais d'une simple méthode retournant un type string.

5. Prototype de la méthode du fournisseur

 
Sélectionnez

				[ConnectionProvider("Department","DepartmentProvider")]
				public IEmployeeDepartementContract GetDepartementInterface()
				{
					return (IEmployeeDepartementContract)this;
				}
				public string GetDepartement()
				{
					return DepartementList.Items[DepartementList.SelectedIndex].Value;
				}

			

Le fournisseur doit implémenter la/les méthode(s) définie(s) par notre contrat. En l'occurrence, notre contrat est l'interface IEmployeeDepartementContract implémentée par notre classe public partial class ProviderControl : System.Web.UI.UserControl, IEmployeeDepartementContract

On notera que l'attribut "ConnectionProvider" préfixe la méthode. C'est lui qui spécifie le comportement de cette méthode. C'est dans la déclaration de cet attribut que l'on définit le ProviderConnectionPointID que l'on doit manuellement spécifier dans le cadre de connexions statiques. Cette méthode a pour but de fournir au consommateur une instance de notre interface qui permettra au consommateur d'appeler la/les méthode(s) fournissant les données, dans notre cas, il s'agit de la méthode "GetDepartement()"

6. Prototype de la méthode du consommateur

Le consommateur ne doit pas implémenter notre contrat, il doit seulement connaître toutes les méthodes que le contrat met à sa disposition pour recevoir les données.

 
Sélectionnez

				[ConnectionConsumer("Departement", "DepartmentConsumer")]
				public void GetDepartmentInterface(IEmployeeDepartementContract provider)
				{
					string Dept = provider.GetDepartement();
					...
				}

			

L'attribut "ConnectionConsumer" spécifie que c'est cette méthode qu'il faut utiliser comme point de connexion. Elle reçoit une instance de l'interface (notre contrat) en paramètre. C'est cette instance qui permet au consommateur d'appeler la/les méthode(s) implémentée(s) par notre fournisseur.

7. Remarque sur les signatures de classe

Dans notre exemple, les classes dans lesquelles on retrouve les méthodes de type "ConnectionConsumer" et "ConnectionProvider" dérivent de UserControl. On pourrait légitimement se demander pourquoi elles ne dérivent pas de "WebPart", c'est tout simplement parce que nous utilisons les contrôles de l'onglet WebPart mis à notre disposition. Le fait de placer les contrôles utilisateurs dans des WebPartZone spécifie leur comportement de WebPart et ce sont ces contrôles qui nous permettent d'éviter d'hériter directement de WebPart et de devoir implémenter toutes les méthodes obligatoires qu'un WebPart doit implémenter (RenderControl, CreateChildControl etc...).

8. Champ d'application des WebParts

Les WebParts décrits dans cet article sont utilisables dans une application ASP.NET 2 classique et à des fins de personnalisation/persistence d'information liées à une page web. Ils sont très utilisés dans MOSS (Microsoft Office Sharepoint Server) et permettent de construire des sites riches en fonctionnalité très rapidement. Leur capacité d'interconnexion en font des composants incontournables du web de demain. MOSS vient avec une quantité impressionante de WebParts prédéfinis (Calendrier, Recherche, Accès aux données, flux RSS, Contenu etc...) que l'on peut considérer comme une boîte à outils. Il est en outre tout à fait possible de créer nos propres WebParts et d'enrichir la "WebPart Gallery" de Sharepoint. Cependant, même si les mécanismes (Fournisseur/Consommateur/Interface) sont les mêmes que pour les WebParts ASP 2, les WebParts Sharepoint s'assimilent d'un point de vue programmatique à un "Custom Web Server Control" d'ASP 2 pour lesquels il faut "manuellement" rendre le HTML. En outre, leur déploiement dans MOSS nécessite de les déployer d'abord dans la GAC et ensuite d'éditer le Web.config de MOSS, puis d'ajouter le WebPart fraîchement déployé dans la gallerie de WebParts de MOSS. L'opération est somme toute assez facile. Cela fera peut-être l'objet d'un prochain article.

9. Téléchargement d'un exemple

Le projet a été développé avec Visual Studio 2005.

Projet au format zip

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2007 Developpez. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.