1. Web Parts

1.1. Introduction aux WebParts

On voit apparaître de plus en plus souvent sur des sites, des portails, un système de zone de fenêtrage tel que sur MyMSN, sur Google et Yahoo : ce sont les WebParts.
Les WebParts représentent une nouvelle organisation et conception d’un site WEB dont le principe se base sur un regroupement de contrôle dans des zones modifiables dont on peut contrôler l’aspect en reduisant la zone, en fermant la zone, en échangeant des contrôles d’une zone à un autre dynamiquement. Cette fonctionnalité se base ainsi sur des zones composés de WebPart (contrôle). Les utilisateurs peuvent contrôler l’affichage d’une page, en choisissant les contrôles à afficher, la position des contrôles, de changer l’apparence de ces contrôles, tout cela dynamiquement.
L’utilisation des WebParts est associée aux memberships et la personnalisation qui permet à l’utilisateur de contrôler tous les aspects des WebParts selon les autorisations appliquées.

Fig 3.1 MyMSN

1.2. Les différentes zones de WebParts

Propriétés	Description
WebPartZone	Zone par défault et visible permettant l’insertion de WebPart, déplacer et déposer possible entre deux WebPartZone.
EditorZone	Zone d’édition pour interagir avec les WebPartZone, composé de WebParts Editor. Zone invisible par défault
CatalogZone	Zone contenant les WebParts invisible par défault, des WebPart que l’utilisateur à fermer Zone invisible par défault
ConnectionsZone	Zone permettant d’éditer les liens entre les WebParts. Zone invisible par défault

Toutes ces zones sont contrôlés par un WebPartManager, unique par page.

1.3. Création des WebParts

Les WebPart et WebPartZone sont contrôlés par le WebPartManager, il faut donc le déposer sur la page pour pouvoir utiliser les WebParts. Ensuite, il faudra placer des WebPartZones qui en général sont placés dans des tableaux HTML (ou div).

Fig 3.2 Exemple création des WebPartZone (mode design)

Il faut maintenant remplir les WebPartZone par des contrôles, par exemple déposer un Label, une TextBox, … .

Voici un exemple qui servira tout au long de l’article :

<title>Untitled Page</title>

</head>

<body>

<asp:WebPartManager ID="WebPartManager1" runat="server">

</asp:WebPartManager>

<table style="width:400px; border: solid 1px black; vertical-align: middle; text-align:center"

border="1" cellpadding="0" cellspacing="0">

<tr>

<asp:WebPartZone ID="Zone_3" runat="server">

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</ZoneTemplate>

</asp:WebPartZone>

</td>

<asp:WebPartZone ID="Zone_3" runat="server">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</ZoneTemplate>

</asp:WebPartZone>

</td>

</tr>

<tr>

<asp:WebPartZone ID="Zone_3" runat="server">

<asp:Button ID="Button1" runat="server" Text="Button" />

</ZoneTemplate>

</asp:WebPartZone>

</td>

<asp:WebPartZone ID="Zone_4" runat="server">

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ZoneTemplate>

</asp:WebPartZone>

</td>

</tr>

</table>

<br />

</form>

</body>

</html>

Fig 3.3 Exemple de création de WebParts (mode design)

Fig 3.4 Exemple de création de WebParts (mode Browser)

Attention, vous devez obligatoirement être connectés (avec l’utilisation des Membership) pour voir les WebParts. Par défault, vous êtes dans le mode « Design » permettant seulement de réduire ou fermer les WebParts.

1.4. Formatter des WebParts

Par défault, les WebParts n’ont aucun style d’où l’apparence pauvre. Pour cela, vous avez la possibilité d’appliquer des styles pré-définies :

Fig 3.5 Formats proposés par défaut

L’autre manière consiste à appliquer un style définie par l’utilisateur même, grâce aux éléments de style d’une WebPartZone.

Propriétés	Description
PartChromeStyle	Style de la zone vide dans une WebPartZone
MenuLabelHoverStyle	Style du Label lorsque la souris survole le Label
EmptyZoneTextStyle	Style de la zone de texte vide
HeaderStyle	Style de l’en-tête
MenuVerbStyle	Style du menu d’un WebParts
PartStyle	Style des WebParts dans la zone
MenuLabelStyle	Style des Labels dans le menu
MenuPopupStyle	Style du menu en haut à droite
PartTitleStyle	Style de titre du WebParts

Voici un exemple de style pour les WebPartZone :

<asp:WebPartZone ID="Zone_2" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana"

Padding="6">

<MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"

BorderWidth="1px" ForeColor="#333333" />

<MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"

Font-Size="0.6em" />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</ZoneTemplate>

</asp:WebPartZone>

1.5. Changement de mode

Dans le mode par défaut « Browse Mode », vous avez seulement la possibilité de minimier la zone ou la fermer. Pour pouvoir éditer les WebParts, changer certaines propriétés, récuperer des WebParts, il faut changer de mode. Pour cela, il faudra implémenter des fonctions permettant le changement de mode. Nous allons prendre un exemple avec une DropDownList composé des 5 différents mode (Browse Mode, Design, Catalog Mode, Edit Mode, Connect Mode).

<asp:DropDownList ID="DisplayModeDropdown"

runat="server"

AutoPostBack="true"

EnableViewState="false"

OnSelectedIndexChanged=

"DisplayModeDropdown_SelectedIndexChanged" />

WebPartManager _webmanager; // on crée un objet WebPartManager

void Page_Init(object sender, EventArgs e)

{

Page.InitComplete += new EventHandler(InitComplete);

}

protected void InitComplete(object sender, System.EventArgs e)

{

_webmanager = WebPartManager.GetCurrentWebPartManager(Page);

String browseModeName = WebPartManager.BrowseDisplayMode.Name;

// remplit la dropdownlist avec les modes disponibles

foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes)

{

String modeName = mode.Name;

// vérification de la validité d’un mode

if (mode.IsEnabled(_webmanager))

{

ListItem item = new ListItem(modeName + " Mode", modeName);

DisplayModeDropdown.Items.Add(item);

}

// Changement de page selon le mode sélectionné

protected void DisplayModeDropdown_SelectedIndexChanged(object sender,

EventArgs e)

{

String selectedMode = DisplayModeDropdown.SelectedValue;

WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode];

if (mode != null)

_webmanager.DisplayMode = mode;

}

protected void Page_PreRender(object sender, EventArgs e)

{

DisplayModeDropdown.SelectedValue = _webmanager.DisplayMode.Name;

}

- La fonction Page_Init permet d’initialiser les contrôles pendant le chargement de la page et fait appel à la fonction InitComplete.

- La fonction InitComplete récupère le WebPartManager de la page concernée, étant donné qu’il est unique il existe un et un seul WebPartManager. Il stock le WebPartManager dans l’objet _webmanager. Ensuite, une boucle permet de remplir la DropDownList des modes d’affichage selon leur disponibilité. Par exemple si un Catalog Zone est disponible, on affichera le mode « Catalog Mode » dans la DropDownList, dans le cas contraire il ne sera pas affiché.

- La fonction DisplayModeDropdown est appelée suite au changement d’index de la DropDownList et permet le changement de page selon le mode sélectionné.

- La fonction Page_PreRender permet tout simplement de mettre à jour l’objet _webmanager en fonction du mode sélectionné dans la DropDownList.

Etant donné que ces différents modes ne sont pas visibles par défaut, et nécessitent une connection, il faudra rajouté le contrôle de Login pour permettre à l’utilisateur de se connecter et d’accéder ensuite aux différents modes.

Voici l’apparence des WebParts et mode disponible par défaut :

Fig 3.6 Mode par défaut avant connection

Apparence des WebParts et mode disponible après connexion :

Fig 3.7 Mode disponible après connexion

1.6. CatalogZone

Un catalogue contient les WebParts qui ne sont pas utilisés ou qui ne doivent pas apparaître par défaut. Il contient aussi les WebParts que l’utilisateur à fermer. L’utilisateur connecté pourra ainsi construire sa page de WebParts grâce à un catalogue que l’administrateur aura remplit de WebPart auparavant. Qui dit catalogue, dit possibilité de choisir à plusieurs reprise le même WebPart et l’insérer dans une zone, par exemple si vous choisissez un Label du catalogue, vous aurez la possibilité de l’insérer autant de fois que vous le souhaitez, étant donné qu’il n’est pas unique. Un catalogue est donc essentiellement une collection de WebParts disponible, d’où le nom de « Catalog ».
Pour construire son catalogue, il faut tout d’abord insérer une zone catalogue dans lequel on pourra ajouter trois type d’éléments. Un catalogue de page (« Page Catalog ») qui sera composé des WebParts fermés par l’utilisateur, une déclaration de catalogue (« DeclarativeCatalogPart ») qui permet à l’administrateur de l’application WEB de remplir le catalogue de WebParts, et enfin un importateur de WebPart (« Import Catalog Part ») permettant à l’utilisateur d’importer des WebParts depuis sa machine.

Voici le code source d’un CatalogZone sans aucun style :

<asp:CatalogZone ID="CatalogZone1" runat="server">

<asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<br />

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

</WebPartsTemplate>

</asp:DeclarativeCatalogPart>

<asp:ImportCatalogPart ID="ImportCatalogPart1" runat="server" />

</ZoneTemplate>

</asp:CatalogZone>

Le PageCatalogPart et ImportCatalogPart ne sont pas éditables, il suffit tout simplement de les déposer dans le CatalogZone. Pour ce qui est de la DeclarativeCatalogPart, il faut éditer le template pour pouvoir insérer des WebParts pour construire le catalogue.

Fig 3.8 CatalogZone

Le PageCatalog ci-dessous contient quatre WebParts fermés par l’utilisateur. Pour récupérer ces WebParts, il suffit de cocher les WebPart à récupérer puis choisir la zone puis cliquez sur le bouton « Add ».

Fig 3.9 Page Catalog

La DeclarativeCatalog comme ci-dessous contient deux WebParts. Pour les ajouter dans une nouvelle zone il suffit de cocher les WebParts concernées et la zone.

Fig 3.10 Declarative Catalog

L’Import Catalog Part comme ci-dessous permet d’importer des WebPart, pour cela il faut spécifier le chemin et la zone.

Fig 3.11 Import WebParts

1.7. EditorZone

Les WebParts sont modifiables dans la zone d’édition « Editor Zone » par l’intermédiaire de quatre types d’élément de modification :
- ApparenceEditorPart
- BehaviorEditorPart
- LayoutEditorPart
- PropertyGridEditorPart

Voici les sources d’un EditorZone sans style appliqué :

<asp:EditorZone ID="EditorZone1" runat="server">

<asp:AppearanceEditorPart runat="server"

ID="Appearance1">

</asp:AppearanceEditorPart>

<asp:LayoutEditorPart runat="server" ID="Layout1">

</asp:LayoutEditorPart>

<asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" />

<asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" />

</ZoneTemplate>

</asp:EditorZone>

Pour accéder aux différents menus de modification, il faut être connecté, être dans le mode « Edit Mode » et choisir le WebPart à modifier en accédant à son menu (en haut à droit de chaque WebPart) puis choisir Edit.

ApparenceEditorPart va vous permettre de modifier l’apparence des WebParts notamment le titre, la taille, la visiblité.

Le LayoutEditorPart permet principalement de modifier la zone conteneur.

Le BehaviorEditorPart permet de contrôler le comportement des WebParts, de pouvoir fermer, diminuer, modifier, cacher les WebParts, de modifier leur description, les liens.

Le PropertyGridEditorPart permet d’éditer des propriétés dans le code source ayant comme attribut « WebBrowsable ».

1.8. Conclusion

Les WebParts permettent ainsi de créer des portails dynamique et facilement personnalisable. Cette nouvelle fonctionnalité, de plus en plus répandue sur de grand site tel que Google et Yahoo, permet à l’utilisateur de construire sa page, d’ajouter ou d’enlever des fenêtres selon son choix, de définir l’apparence et la disposition de ses fenêtre. L’utilisateur a un contrôle quasi-total de la page Web. Il est cependant dommage que les WebParts intégrés par défaut à l’ASP.NET 2.0 ne soit pas un contrôle coté client, plus exactement avec l’intégration d’un CallBack sans aucun rafraîchissement de la page. Il est aujourd’hui possible de résoudre ce problème en implémentant la version AJAX de Microsoft pour l’ASP.NET, ATLAS.

2. Conclusion

Les nouveautés du langage ASP.NET 2.0 de Microsoft apportent non seulement une simplicité au développeur dans son travail, mais aussi des nouvelles interfaces WEB, des nouvelles fonctionnalités pour les utilisateurs et clients. Ce langage innovant apporte une nouvelle conception des sites Internet de « nouvelle génération », de plus les applications WEB développées en ASP.NET 2.0 seront combinées avec la version AJAX de Microsoft, ATLAS pour rendre la navigation fluide et sans aucun rafraîchissement. D’autres nouveautés n’ont pas été traitées dans cette article sont aussi important, comme les nouveaux contrôles de Login et de données (GridView, DetailsView, …), et la sécurité des applications.

Posted in:

6/19/11

WEB PARTS ASP.net 2.00

1. Web Parts

1.1. Introduction aux WebParts

1.2. Les différentes zones de WebParts

1.3. Création des WebParts

1.4. Formatter des WebParts

1.5. Changement de mode

1.6. CatalogZone

1.7. EditorZone

1.8. Conclusion

2. Conclusion

0 التعليقات:

Post a Comment

LIKE US

Popular Posts