Présentation des composants WebForms et WinForms d'Infragistics NetAdvantage 2010 Volume 3

Toute application, qu'elle soit Windows ou Web, a couramment une barre de menus qui permet d'accéder à la plupart des fonctionnalités disponibles. Plusieurs composants ASP.NET gratuits ou payants permettent d'intégrer de simples barres de menus à des applications, notamment le WebDataMenu d'Infragistics. Qu'a donc de particulier ce composant pour que vous puissiez vous orienter vers lui au lieu des autres ?

En effet, le WebDataMenu d'Infragistics intègre des outils de conception visuelle, qui vous permettent de créer rapidement et facilement de simples menus, ou des menus assez sophistiqués, dont l'aspect graphique peut hériter directement des différents thèmes présents dans l'offre d'Infragistics ou d'un style propre à votre site que vous avez défini dans une feuille de style.

Vous pouvez définir les menus et sous-menus du WebDataMenu manuellement, ou les lier à une source de données (DataSet, DataTable, fichiers XML). Des styles différents peuvent être définis pour un menu ou sous-menu en fonction de ses différents états (Actif, Inactif, MouseOn…). Avec ce composant, la navigation peut être faite à partir de la souris ou du clavier.

L'affichage peut être horizontal :

Ou vertical comme l'illustre l'image ci-dessous :

Ce qui permet sans aucun doute de faire la différence avec les composants des autres éditeurs, c'est le défilement automatique et intelligent entre les menus cachés. Comme vous pouvez le constater avec la capture ci-dessous, vous avez désormais la possibilité d'ajouter à votre menu des puces permettant de naviguer entre les différents menus, ceci, en modifiant juste une propriété du composant.

Cette fonctionnalité s'avère très pratique lorsque les éléments du menu sont nombreux, ou n'entrent pas dans l'emplacement qui leur est réservé. Le scrolling peut être effectué du haut vers le bas ou de la gauche vers la droite et vice-versa. Le défilement se fait automatiquement à une vitesse variée, à partir de la souris ou du clavier.

Passons à un composant qui doit être très familier aux développeurs. Ces derniers essaient chacun, au prix d'efforts de programmation ou de composants tiers, d'en fournir un aux utilisateurs de leur application. Il s'agit de la barre d'exploration.

Les barres de type " Volet d'exploration " sont très utilisées par les développeurs, car elles permettent de faciliter la navigation dans une application en mettant à la disposition de l'utilisateur l'ensemble des fonctionnalités de l'application.

Dans le pack NetAdvantage for ASP.NET d'Infragistics, le composant qui permet d'obtenir ce résultat est le WebBarExplorer. Ce composant regroupe à lui seul un ensemble important de fonctionnalités qui vous permettront avec le minimum d'efforts et rapidement, de créer une barre d'exploration pour votre application et la personnaliser à souhait pour avoir une barre similaire à celle de l'explorateur Windows, Outlook ou encore Visual Studio.

Les objets du WebBarExplorer peuvent être définis manuellement, ou ils peuvent tout simplement être générés à partir d'une source contenant des données hiérarchiques. Il est intéressant de constater qu'il contient également un nombre assez riche de fonctionnalités Ajax, et dispose aussi de la fonction de chargement à la demande qui permet de ne charger que les informations qui sont nécessaires à l'utilisateur final et le restent en fonction de ses actions.

Passons à un composant qui doit être très familier aux développeurs. Ces derniers essaient chacun, au prix d'efforts de programmation ou de composants tiers, d'en fournir un aux utilisateurs de leur application. Il s'agit de la barre d'exploration.

Les barres de type " Volet d'exploration " sont très utilisées par les développeurs, car elles permettent de faciliter la navigation dans une application en mettant à la disposition de l'utilisateur l'ensemble des fonctionnalités de l'application.

Dans le pack NetAdvantage for ASP.NET d'Infragistics, le composant qui permet d'obtenir ce résultat est le WebBarExplorer. Ce composant regroupe à lui seul un ensemble important de fonctionnalités qui vous permettront avec le minimum d'efforts et rapidement, de créer une barre d'exploration pour votre application et la personnaliser à souhait pour avoir une barre similaire à celle de l'explorateur Windows, Outlook ou encore Visual Studio.

Les objets du WebBarExplorer peuvent être définis manuellement, ou ils peuvent tout simplement être générés à partir d'une source contenant des données hiérarchiques. Il est intéressant de constater qu'il contient également un nombre assez riche de fonctionnalités Ajax, et dispose aussi de la fonction de chargement à la demande qui permet de ne charger que les informations qui sont nécessaires à l'utilisateur final et le restent en fonction de ses actions.

Un autre composant de navigation également contenu dans le pack NetAdvanatage et qui est certainement connu de tous les développeurs Winforms est le WebTab qui est assez similaire au composant Winforms Tabcontrol.

Le WebTab d'Infragistics est un composant assez riche en termes de fonctionnalités et très pratique pour des applications Web qui ont l'obligation de créer un grand nombre de pages. Avec ce contrôle, vous pouvez disposer plusieurs contrôles dans les différents Tabpages et changer l'affichage sans avoir à recharger la page.

Vous pouvez utiliser les thèmes disponibles par défaut dans la bibliothèque pour personnaliser comme vous le souhaitez le WebTab, ou vous pouvez grâce à l'une de ses propriétés, exploiter vos propres feuilles de style déjà conçues.

Le mode d'affichage du contrôle peut être modifié de telle sorte que les onglets soient affichés horizontalement ou verticalement. Vous pouvez également afficher les onglets sur une seule ligne ou les ranger sur plusieurs, afficher un bouton de défilement entre les onglets, afficher un bouton de suppression sur chaque onglet et un bouton pour permettre à l'utilisateur final d'ajouter de nouveaux TabPages (fonctionnalité très utile qui donne à l'utilisateur final la possibilité d'ajouter dynamiquement de nouveaux contenus à l'application Web).

Bref c'est tout un ensemble de puissantes fonctionnalités y compris des fonctionnalités Ajax qui sont mises à la disposition des développeurs. Nous tenons à noter que le Webtab peut être automatiquement redimensionné pour être adapté au contenu d'un Tabpage.

Avant d'aborder un autre composant, un aspect du WebTab que je trouve - personnellement - assez intéressant, est la possibilité de spécifier une URL dont la page sera affichée dans un Tabpage.

WebDatGrid offre aux développeurs un contrôle de grille efficace et évolué, intégrant en natif des fonctionnalités Ajax. Grâce au Smartag, vous pouvez facilement et rapidement personnaliser votre WebDataGrid.

Le composant WebDatGrid met à votre disposition des fonctionnalités permettant de redimensionner les colonnes dynamiquement, d'éditer une cellule, d'ajouter ou supprimer une ligne, de paginer les données, y effectuer des tris, filtres et bien plus.

Une fonctionnalité de ce composant que j'ai trouvée assez intéressante et qui s'avère très utile dans l'analyse des données, est la possibilité d'offrir à l'utilisateur des options lui permettant d'effectuer plusieurs opérations mathématiques sur les colonnes.

L'utilisateur peut donc en un simple clic sur l'entête d'une colonne avoir la somme, le produit, le minimum, le maximum et le nombre de lignes de cette colonne. Personnellement, je trouve cette fonctionnalité assez pratique.

Il est parfois nécessaire de permettre aux utilisateurs d'une application d'importer ou d'exporter des données en masse. Les moyens offerts pour une saisie facile de ces données ne sont pas très nombreux. Il en existe un qui s'offre comme un moyen évident et qui est assez utilisé : Excel.

Un problème récurrent en développement Web est celui de la génération des documents Excel à partir d'une application Web (il n'y a qu'à voir le nombre de questions sur le sujet dans les forums .NET de Developpez). Le WebExcelExporter est un composant qui permet avec une seule ligne de code, d'exporter des données en masse dans un tableur Excel, que le poste du client dispose ou non du logiciel Excel. Les formats d'Excel 97-2003, 2007 et 2010 sont supportés et plusieurs datagrid peuvent être exportés dans plusieurs feuilles d'un seul classeur Excel.

Un composant est également prévu pour l'exportation des données au format PDF et XPS le WebDocumentExporter. Tout comme le composant WebExcelExporter, il permet d'exporter automatiquement les données d'un WebDataGrid ou d'un WebHierachicalDataGrid dans un fichier PDF ou XPS.

Vous disposez de plusieurs modes d'exportation vous donnant la possibilité de définir, si vous le souhaitez, que l'export soit effectué dans un fichier ou dans une fenêtre du navigateur. Le document peut être exporté en gardant le style de l'application, ou vous pouvez personnaliser la mise en page.

Lors de la conception d'une application, qu'elle soit informative ou décisionnelle, on a ce besoin de pouvoir présenter des données à l'utilisateur de façon qu'elles puissent être facilement interprétées par celui-ci. De ce fait, les développeurs ont le plus souvent recours à des graphiques pour gérer des scénarios pareils.

Le composant WebChart d'Infragistics est un contrôle de génération de graphiques assez poussé et complet, je dirais même que c'est l'un des meilleurs du moment. Il permet de concevoir, d'explorer et de visualiser dans une application Web des graphiques. L'élaboration s'effectue à partir d'un assistant (Wizard) convivial et ergonomique permettant de créer rapidement et facilement les graphiques.

Vous avez également le choix entre plusieurs sources de données (DataSet, DataTable, Fichier XML…), permettant de générer plus d'une vingtaine de types de graphiques différents (histogramme, camembert, en bulles, linéaires, etc.) et l'affichage peut être effectué en 2D ou en 3D.

L'utilisateur peut également générer des graphiques très poussés comme les histogrammes empilés, les diagrammes empilés, des cartes 2D et 3D. Ces graphiques sont facilement personnalisables à partir de l'assistant et ce composant permet surtout toutes les interactions possibles avec les différents éléments du graphique. Ainsi, au passage de la souris de l'utilisateur, il sera possible d'afficher un simple tooltip informatif ou encore récupérer les données affichées sous la souris pour piloter un second composant.

Un composant qui s'avère donc très pratique pour la présentation des informations qui seraient difficile à décrire verbalement ou par écrit, permettant ainsi de rendre l'application plus professionnelle et attirer l'attention de l'utilisateur final.

Les développeurs ont de plus en plus recours au Catpcha pour éviter les enregistrements automatiques des robots ou des spammeurs. Les contrôles Captcha ASP.NET disponibles actuellement (gratuits ou payants) sont assez difficile à utiliser, et certains n'implémentent pas tous les scénarios possibles (inclusion par exemple du signal sonore pour les malvoyants).

Le contrôle WebCaptcha d'Infragistics offre un moyen simple de placer un Captcha sur un formulaire ASP.NET permettant d'éviter les saisies automatiques des robots et des spams.

Il peut être personnalisé de telle sorte que le texte de l'image affichée soit généré de façon aléatoire, en utilisant le dictionnaire de données fourni par défaut par Infragistics, ou en utilisant comme dictionnaire de données un fichier txt que vous avez passé en paramètre. La possibilité vous est également donnée de définir le nombre de caractères à afficher à l'utilisateur (cinq caractères par défaut).

Dans les sites, on utilise couramment un système de notation pour évaluer la qualité d'un article, d'un livre, d'un billet de blog, d'un produit... Le contrôle WebRating d'Infragistics met à la disposition du développeur, un système de notation riche, pouvant être personnalisé à souhait. Pour chaque note des utilisateurs, la valeur moyenne et le nombre de clics sont enregistrés dans des propriétés du composant.

La notation se fait de façon classique sous forme d'étoiles cliquables à l'apparence et au nombre paramétrables (jusqu'à dix).

Avec ce composant, vous pouvez par exemple ajouter votre propre évaluation d'un article (livre lu par exemple), personnaliser l'image qui sera affichée à l'utilisateur comme le montrent les différentes captures ci-dessous que j'ai faites - faut le dire - en modifiant juste quelques propriétés du WebRating.

Un des aspects qui peut permettre de démarquer ce composant de ceux déjà existants, est la possibilité de l'utiliser comme un éditeur de données (confer la deuxième et dernière capture sur le WebGrid). Vous pouvez donc l'utiliser comme éditeur pouvant être embarqué dans une grille.

Comme vous pouvez le constater avec la capture plus haut, la suite NetAdvantage for ASP.NET est assez étoffée, nous ne pouvons malheureusement pas vous présenter tous les composants disponibles, mais sachez que vous trouverez dans ce pack, quasiment tous les outils dont vous aurez besoin pour gérer des scénarios particuliers et/ou complexes et faire ainsi de votre site Web, un outil professionnel, adapté aux besoins des utilisateurs finals.

Dans cette version des composants NetAdvantage, Infragistics a particulièrement mis l'accent sur le contrôle de navigation l'UltraToolBarManager.

Ce contrôle offre à l'utilisateur une multitude de fonctionnalités, permettant la création de menus, de barres d'outils pouvant être personnalisées facilement grâce à un assistant WYSIWYG.

L'aperçu des menus et barres d'outils créés est directement visible dans l'interface de Visual Studio. La puissance de cet outil réside dans le fait qu'il peut être utilisé dans n'importe quel conteneur en dehors du formulaire.

Lors de son utilisation dans un formulaire MDI et un formulaire enfant MDI, lorsque le formulaire enfant est activé, les menus et les outils contenus dans le formulaire parent sont directement fusionnés avec celui du formulaire enfant. Ceci sans l'écriture de la moindre ligne de code.

L'innovation dans l'UltraToolbarsManager est l'introduction du Ruban de Microsoft Office.

Le ruban a fait son apparition dans Microsoft Office 2007 en remplacement de la barre de menus et la barre d'outils, et dont l'utilité et le succès avaient entrainé également son intégration dans d'autres produits par Microsoft comme Windows Live Essentials ou encore WordPad.

Infragistics donne la possibilité de remplacer dans l'UltraToolbarsManager, les menus et la barre d'outils par un ruban façon Office qui permettra une meilleure organisation des fonctionnalités en onglets qui seront plus visibles. Ainsi, vous pouvez faire de votre application une solution innovante intégrant les formalismes les plus récents.

Au vu de l'adoption du ruban, son intégration dans une application peut être une garantie non négligeable de la réussite de celle-ci.

Vous pouvez également avec ce composant définir une barre d'accès rapide comme l'illustre la capture ci-dessous.

Vous avez certainement au moins une fois rêvé d'avoir dans votre application l'explorateur Windows, ou encore la barre latérale d'outils de Visual Studio, permettant de proposer facilement et rapidement à l'utilisateur un grand nombre de menus mettant à sa disposition les fonctionnalités de l'application dont il a besoin.

Eh bien vous pouvez atteindre ce résultat grâce au contrôle UltraExplorerBar du pack NetAdvantage qui permet avec le minimum d'efforts de créer une barre d'exploration latérale.

À titre d'exemple, en quelques minutes j'ai créé cette barre d'exploration, et en modifiant juste une ou deux propriétés, j'ai pu obtenir le résultat suivant :

Vous pouvez choisir le type d'affichage (à la "Explorer", à la "Outlook", à la "barre d'outils Visual Studio"), ou également choisir les couleurs des différents types d'affichages. Plus encore, vous pouvez définir la façon dont les menus (items) seront affichés : texte ou images ou les deux, grosses ou petites images. Affichage en tant que bouton, label ou autre, etc. Tout est faisable et ce plus ou moins facilement.

Le composant UltraCombo à la différence des combobox traditionnelles, peut être lié à une source de données et afficher les données de la table dans une mini grille.

Ce composant intègre l'autocomplétion lorsqu'il est en mode dropdown, et réduit le nombre d'items dans la grille en affichant uniquement ceux qui commencent par les caractères saisis dans la zone de texte ou à défaut, vous positionne sur la ligne de l'élément que vous avez saisi.

Un autre avantage de ce composant est qu'il vous permet d'associer à chaque item, une paire DisplayMember/ValueMember, ce qui signifie que pour chaque élément, vous pouvez associer la colonne contenant le texte (exemple celui d'un client) et la colonne contenant son code.

L'UltraCombo soutient également la sélection multiple. Cette fonctionnalité permet l'ajout d'une colonne dans la mini grille qui sera affichée par l'UltraCombo, et permettra à l'utilisateur de sélectionner plusieurs valeurs comme l'illustre l'image ci-dessus.

Les grilles sont couramment utilisées pour afficher les données dans les applications. En plus de cet aspect elles doivent également mettre à la disposition de l'utilisateur plusieurs fonctionnalités (éditions, filtres…) lui permettant d'interagir avec ces données. Le contrôle UltraGrid du pack NetAdvantage est un gestionnaire de grille puissant, hiérarchique et simple d'utilisation, qui offre aux développeurs une multitude de fonctionnalités pratiques visant à rendre leurs applications plus productives.

L'UltraGrid supporte le mode édition, le tri sur n'importe quelle colonne par un simple clic sur l'entête de la colonne, le filtrage des données. Le redimensionnement des lignes et colonnes est également possible. L'UltraGrid est facilement personnalisable, et un style peut lui être appliqué.

L'une des fonctionnalités que j'ai trouvée assez pratique, est la possibilité de grouper plusieurs lignes à partir des valeurs équivalentes, tout comme on le fait dans Office Outlook.

Des composants additionnels sont également mis à la disposition des développeurs pour la gestion des scénarios particuliers. Par exemple, vous pouvez coupler à l'UltraGrid le contrôle UltraGridExcelExporter pour exporter directement et rapidement vos données dans un tableur Excel, ou encore utiliser le contrôle UltraGridPrintDocument pour facilement imprimer uniquement les données contenues dans la grille.

Qui ne souhaiterait pas dans une application avoir à sa disposition un outil lui permettant de planifier ses activités (tâches), et pouvoir présenter visuellement l'état d'avancement de celles-ci dans le cadre d'un projet, qu'il soit informatique ou non ?

Infragistics a inclus dans le pack NetAdvantage un contrôle UltraGantView, basé sur le diagramme de GANTT pour fournir à l'utilisateur un outil puissant, permettant de créer rapidement un diagramme de GANTT et se faire une idée précise autant du travail accompli que des tâches encore en attente de réalisation.

L'intérêt d'un diagramme de GANTT est qu'il permet de représenter les liens de dépendance entre les tâches, le degré d'accomplissement de chaque tâche à tout moment, les ressources impliquées et ainsi de suite. L'UltraGantView regroupe donc au sein d'un seul composant toutes ces fonctionnalités dont vous avez besoin pour la planification, la gestion efficiente et efficace d'un projet. Vous pouvez par exemple :

• créer, mettre à jour, désactiver, synchroniser ou supprimer des tâches ;
• créer des sous-taches ;
• définir les heures et jours de travail et ceux fériés ;
• définir un Toolstip qui permet l'affichage des détails sur chaque tâche ;
• personnaliser votre GanttView comme vous le souhaitez…

Ce qui a le plus attiré mon attention lors du test de ce composant, c'est la possibilité de lier le composant à une source de données. Grâce à cette fonctionnalité, les tâches, heures, ressources peuvent être définies par exemple dans un DataSet suivant un format particulier, qui sera ensuite lié à l'UltraGantView qui l'utilisera pour la création du diagramme, ou les données d'un diagramme peuvent directement être enregistrées dans cette source de données.

En faisant un clic droit sur une tâche et en cliquant sur le bouton Task Information, on accède à une fenêtre permettant de définir/modifier les informations de tâches (Ressources, Notes…).

Il arrive parfois que vous souhaitiez dans votre application, disposer de plusieurs composants dans divers compartiments d'un formulaire, tout en donnant la possibilité à un utilisateur de modifier les dimensions de ces composants/compartiments pour avoir beaucoup plus d'espace et avoir une meilleure expérience utilisateur en fonction de différents scénarios. Dans ce cas le contrôle UltraSplitter est fait pour vous.

Le contrôle UltraSplitter permet aux utilisateurs finals de modifier les dimensions des contrôles, de les cacher ou de les afficher. Lorsque l'utilisateur approche la souris de l'UltraGrid, le curseur change de couleur.

Dans l'exemple ci-dessous, nous avons inséré deux contrôles UltraSplitter dans notre formulaire, l'un qui présente une barre verticale permettant d'afficher ou cacher l'UltraExplorerBar, et l'autre présenté horizontalement, permettant de cacher ou afficher l'UtraGrid.

J'ai fait exprès de disposer des composants à ma guise sur ce formulaire, c'était l'occasion, compte tenu du nombre important de composants qui sont disponibles dans ce pack, de donner un aperçu de quelques autres contrôles sans tous les présenter.