Utilisation et connexion de WebParts

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é.

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

				<?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"

				<?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>
						....

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▲

<asp:WebPartManager ID="WebPartManager1" runat="server">
	<StaticConnections>
		<asp:WebPartConnection ID="DeptToEmployees"
			ProviderID="ProviderControl1"
			ProviderConnectionPointID="DepartmentProvider"
			ConsumerID="ConsumerControl1"
			ConsumerConnectionPointID="DepartmentConsumer">
		</asp:WebPartConnection>
	</StaticConnections>
</asp:WebPartManager>

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"

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

Etape 3 : une zone de connexion s'affiche

Etape 4 : choisir le WebPart consommateur

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

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.

				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.

				[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()"

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.

				[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.

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...).

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é impressionnante 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 galerie de WebParts de MOSS. L'opération est somme toute assez facile. Cela fera peut-être l'objet d'un prochain article.

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

Projet au format zip