I. Introduction

Le succès d'une application informatique est fortement lié à la qualité de son interface utilisateur. Elle est la partie visible d'un logiciel, et représente le canal de communication entre l'utilisateur final et les différentes fonctionnalités de l'application. De ce fait, elle doit être particulièrement réussie, ergonomique et à la fois simple, attrayante, cohérente et intuitive pour l'utilisateur final.

C'est pour cela que l'interface utilisateur fait l'objet de toute l'attention des développeurs d'applications.

Les problématiques liées à la qualité et à l'optimisation de l'interface utilisateur deviennent donc de véritables challenges à relever par les développeurs, les graphistes et les concepteurs d'applications.

C'est pour cela que l'interface utilisateur fait l'objet de toute l'attention des développeurs d'applications.

Les problématiques liées à la qualité et à l'optimisation de l'interface utilisateur deviennent donc de véritables challenges à relever par les développeurs, les graphistes et les concepteurs d'applications.

Au vu de l'impact et de l'importance de l'ergonomie d'une application sur la réussite de celle-ci, des éditeurs tiers proposent des contrôles commerciaux ou gratuits riches permettant de créer rapidement des applications conviviales.

Parmi ces éditeurs, figure en bonne place la société Infragistics, qui est l'un des leaders dans la conception des packs de contrôles d'interface utilisateur pour les solutions .NET.

Quelle que soit la plateforme ou la technologie que vous utilisez (Winforms, ASP.NET, WPF, Silverlight..), Infragistics dans son pack de composants pour professionnels NetAdvantages, vous offre des outils et contrôles permettant de rendre les applications plus conviviales et surtout plus fonctionnelles. Ces packs constituent donc la base d'un développement rapide en offrant la possibilité au développeur de se concentrer uniquement sur la partie métier de son application.

Au travers de ce tutoriel, vous allez découvrir quelques outils et contrôles du Pack NetAdvantage que nous avons testés.

Nous nous attarderons principalement sur les composants du pack NetAdvantage for Winforms et NetAdvantage for ASP.NET.

II. Description des différents produits de la suite NetAdvantage

La suite NetAdvantge regroupe un ensemble de produits supportant les récentes technologies et outils .NET. Ces produits peuvent être acquis indépendamment ou dans la suite NetAdantages Ultimate.

Ces produits offrent toute une panoplie de contrôles d'interface utilisateur et de nombreux outils aux développeurs leur permettant de rendre leurs applications beaucoup plus ergonomiques et fonctionnelles.

Les bibliothèques d'Infragistics sont regroupées dans les packs suivants, ciblant chacune des plateformes de développement particulières :

  • NetAdvantages for Windows Forms pour les développeurs Winforms ;
  • NetAdvantages for ASP.NET pour les adeptes d'ASP.NET ;
  • NetAdvantages for WPF pour la plateforme WPF ;
  • NetAdvantages for Silverlight pour les applications silverlight.

Sans oublier ses deux récents produits :

  • NetAdvantage Reporting qui est un gestionnaire d'état pour WPF et Silverlight;
  • NetAdvantges For Web Developers qui cible en gros les développeurs Web.

II-A. NetAdvantage for Windows Forms

Le pack NetAdvantage For Windows Forms regroupe des contrôles utilisateur, outils et utilitaires puissants permettant le développement rapide des applications Windows forms conviviales avec un minimum d'efforts lors de la conception de l'interface utilisateur.

Actuellement disponible en version 2010 v3, il est pris en charge dans Visual Studio 2010 et supporte le Framework .NET 4. Cette version met également à la disposition des utilisateurs des outils leur permettant par exemple de construire des applications ayant des apparences semblables à celles de Microsoft Office 2010, Windows 7, Visual Studio 2010 ou encore Windows Vista , grâce aux différents thèmes existants dans le pack.

II-B. NetAdvantage for ASP.NET

Le pack NetAdvantage for ASP.NET met à la disposition des développeurs Web ASP.NET, des contrôles riches dont ils ont besoin pour développer des applications Web d'affaires et professionnelles avec des interfaces très réussies.

Le pack dans sa dernière version, prend en charge les dernières technologies .NET et outils ASP.NET disponibles (Visual Studio 2010, ASP.NET MVC3…). Cette version apporte de nouveaux contrôles permettant de créer des applications Web ayant l'apparence d'Office 2010, d'exporter rapidement et facilement ses données dans un tableur Excel, ou sous un format PDF...

On va aussi noter la présence dans ce pack, de plusieurs contrôles ASP.NET Ajax , comme des grilles Ajax, des calendriers, un éditeur HTML supportant le mode WYSIWYG avec la vérification orthographique automatique intégrée et bien plus.

II-C. NetAdvantage for WPF

NetAdvantage for WPF regroupe un ensemble de composants et contrôles utilisateur riches, permettant la construction des applications WPF (Windows Presentation Foundation) riches et ergonomiques.

Construit sur une API unifiée XAML (API très rapide partagée entre WPF et Silverlight) qui offre la possibilité aux développeurs d'utiliser à la fois l'API sur les plates-formes WPF et Silverlight, NetAdvantage for WPF met à la disposition des programmeurs, des contrôles dont la vitesse de chargement et le rendu sont assez impressionnants.

Parmi les composants WPF mis à votre disposition, on peut citer entre autres : les contrôles grilles, des panels, des calendriers, des composants de reporting et bien plus.

Le Pack NetAdvantage for WPF 2010 volume 3 apporte un nouveau contrôle pouvant être lié à de grandes sources de données hiérarchiques, des outils permettant de mettre sur pied des applications ayant le même style qu'Office 2010.

NetAdvantage for WPF supporte Visual Studio 2010, WPF 4 et le Framework .NET 4.0. Il peut être téléchargé séparément ou inclus dans l'offre Ultimate.

II-D. NetAdvantage for Silverlight

La plateforme Silverlight met par défaut à la disposition des développeurs un environnement permettant la création d'applications interactives riches, pouvant profiter d'une génération évoluée d'expériences multimédias.

La société Infragistics a su exploiter la puissance de cette plateforme pour mettre à la disposition des développeurs Silverlight, un pack contenant des outils offrant une expérience de développement riche, et permettant le renforcement des applications Silverlight 4.

La version actuelle apporte un ensemble de contrôles puissants qui ne sont pas encore inclus dans le toolbox Silverlight. La construction des applications Silverlight ayant l'apparence d'Office 2010 ou Windows 7 est également possible, et l'ajout des contrôles utilisateur comme les grilles, calendriers et autres se fait assez aisément, permettant ainsi d'accroitre le rendement du développeur.

Le pack supporte Visual Studio 2010, et l'outil de conception d'interfaces utilisateur Microsoft Expression Blend.

II-E. NetAdvantage for Web Developers.

NetAdvtange for Web Developers est un pack de contrôles et outils introduit récemment dans la suite NetAdvantage Utilmate, principalement à destination des développeurs Web.

Disponible encore en version CTP, NetAdvantage for Web Developers permet la construction rapide d'applications Web riches, et assure la portabilité entre les systèmes d'exploitation, navigateurs et devices (tablettes, ordinateurs de bureau).

Le pack est constitué de contrôles d'interface utilisateur puissants pour professionnels, supportant les dernières technologies et standards du Web comme HTML5 ou encore CSS3.

NetAdvantage for Web developers intègre également des contrôles ASP.NET MVC, et des contrôles JQuery. Parmi les composants que l'outil embarque, on peut citer entre autres :

  • les contrôles de grille ;
  • les contrôles de calendrier ;
  • des éditeurs de texte et de notes ;
  • et même un lecteur vidéo.

NetAdvantage For Web Developers prend également en charge la bibliothèque WebKit permettant l'intégration des moteurs de rendu des pages Web sans nécessiter de plug-ins additionnels.

II-F. NetAdvantage Reporting

Il existe plusieurs solutions de gestion et de création d'états pour les développeurs d'applications Winforms ou ASP.NET. Cependant, pour les plateformes WPF et Silverlight, les outils permettant la création des états ou la génération des graphiques sont très peu nombreux ou ne permettent pas au développeur d'avoir le retour d'expérience souhaité.

C'est pourquoi, Infrasgistics offre désormais aux développeurs WPF et Silverlight une solution de reporting pour applications Silverllight et WPF.

NetAdvantage Reporting permet la création et la génération des états et des graphiques WPF ou Silverlight avec le minimum d'efforts. Il offre à l'utilisateur un concepteur de rapports et un moteur API avec des accès assez simples aux données SQL et de reporting de base.

La solution inclut également d'autres fonctionnalités telles que le support des sources de données supplémentaires, l'exportation vers les classeurs Excel ou la cartographie intégrée.

NetAdvatange reporting est actuellement disponible en version CTP. Il peut être téléchargé seul ou inclus dans l'offre NetAdvantage Ultimate.

III. Présentation de quelques contrôles du pack NetAdvantages for ASP.NET

Le pack NetAdvantage for ASP.NET contient une multitude de composants ASP.NET et AJAX, allant des contrôles les plus usuels (calendrier, zone de saisie) aux contrôles assez sophistiqués (WebChart). Les fonctions JavaScript peuvent être facilement combinées à ces composants pour en tirer le meilleur possible de l'expérience utilisateur.

L'image ci-dessous vous présente l'ensemble de composants qui sont contenus dans le pack NetAdvantage for ASP.NET.

Image non disponible

Comme vous pouvez le constater, la liste est assez étoffée. Dans le cadre de ce tutoriel, nous nous limiterons à présenter juste quelques-uns des composants les plus usuels ou qui nous ont le plus impressionné.

III-A. Les composants de navigation

La facilité de navigation dans une application est cruciale, l'utilisateur doit avoir un accès rapide et facile à l'ensemble des fonctionnalités de l'application. Le pack NetAdvantage for ASP.NET contient un ensemble de composants de navigation permettant d'accroitre considérablement la navigation dans votre site et offrir une meilleure visibilité des fonctionnalités du site à l'utilisateur.

III-A-1. La barre de menus

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 :

Image non disponible

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

Image non disponible

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.

Image non disponible

III-A-2. La barre d'exploration

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.

Image non disponible

III-A-3. Le composant WebDataTree

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.

Image non disponible

III-A-4. Le composant WebTab

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.

Image non disponible

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.

III-B. Affichage et exportation des données

III-B-1. Le composant WebDataGrid

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.

Image non disponible

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.

Image non disponible

III-B-2. Les composants WebExcelExporter et WebDocumentExporter

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.

Image non disponible

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.

III-B-3. Le composant WebChart

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.

Image non disponible

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.

III-C. Les contrôles calendrier

Le pack NetAdvantage contient plusieurs composants permettant la gestion des dates, des plannings avec des tâches et des événements à une date donnée. Je ne vais pas m'attarder sur la présentation de ces composants, car ils sont très bien présentés dans l'article sur le pack NetAdvantage 2005 Volume 3. Je tiens quand même à signaler que ces composants sont complètement personnalisables et assez facilement.

Image non disponible

Il est à noter qu'un DateTimePicker est également disponible.

Image non disponible

III-D. Les autres contrôles ASP.NET

III-D-1. Le contrôle WebCaptcha

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

Image non disponible

III-D-2. Le contrôle WebRating

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.

Image non disponible

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.

III-E. Prise en charge des autres plateformes (Mono, SharePoint, Azure)

Un autre facteur qui permet de démarquer NetAdvantage des autres produits, est la prise en charge du Framework Mono, qui est une implémentation open source du Framework .NET. Avec cette version de NetAdvantage, vous pouvez désormais créer des applications ASP.NET riches qui pourront être exécutées sur d'autres plateformes (Linux, UNIX ou Mac OS X) en dehors de Windows.

Une bonne nouvelle donc pour tous ceux qui souhaitaient utiliser ce pack, mais qui étaient bloqués par ce problème de portabilité de l'application. La version de Mono qui est prise en charge est la 2.6.5 et postérieures. Le pack NetAdvantage peut être rapidement interfacé avec l'outil Mono Tools pour Visual Studio.

La prise en charge de SharePoint est également assurée, et les outils s'intègrent facilement avec le Toolbox Windows Azure pour Visual Studio. Ce qui permet donc l'utilisation de NetAdvantage pour le développement des applications Cloud qui pourront être hébergées sur la plateforme Windows Azure de Microsoft.

IV. Présentation de quelques contrôles du Pack NetAdvantages for Windows Forms

Le pack NetAdvantages for Windows Forms regroupe tous les contrôles dont les développeurs ont besoin pour la création des applications Windows comme vous pouvez le constater avec la capture ci-dessous.

Image non disponible

IV-A. Les composants de navigation

IV-A-1. Le composant UltraToolbarsManager

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.

Image non disponible

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

Image non disponible

IV-A-2. Le contrôle UltraExplorerBar

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 :

Image non disponible

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.

IV-B. Affichage des données

L'affichage et la manipulation (filtre, tri…) des informations provenant d'une source de données (base de données, fichiers…) sont des scénarios assez fréquents dans la conception des applications. Le pack NetAvantage for Windows Forms met à la disposition du développeur un ensemble d'outils permettant d'afficher rapidement, simplement et de manipuler les données.

IV-B-1. Le composant UltraCombo

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.

Image non disponible

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.

IV-B-2. Le contrôle UltraGrid

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.

Image non disponible

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.

IV-C. Les autres composants WinForms

IV-C-1. Le composant GanttView

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.

Image non disponible

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

Image non disponible

IV-C-2. Le contrôle UltraSplitter

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.

Image non disponible

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.

V. Cas pratique : création et définition dynamique de styles d'une application

Dans la section sur les composants WebFoms, nous avons évoqué cette possibilité d'appliquer à un composant un style existant qui est mis à la disposition du développeur (Office 2010, Visual Studio 2010…). Infragistics donne également la possibilité à l'utilisateur de créer ses propres styles à partir d'un utilitaire qui accompagne chaque pack de composants.

Dans cette partie, nous verrons comment créer notre propre style, et comment le développeur peut donner la possibilité à l'utilisateur final, à travers une option de configuration de l'application, de choisir le style qui lui convient qui sera dynamiquement appliqué à tous les composants de l'application.

L'utilitaire AppStylist qui accompagne le pack NetAdvantage, permet l'introduction d'un nouveau concept dans le développement des applications WinFoms. Cette technologie est semblable à l'utilisation des feuilles de styles (CSS) comme pour les applications Web. Le développeur peut ainsi se concentrer sur la logique métier de son application sans toutefois se soucier de l'aspect visuel de celle-ci, tandis que, le graphiste se charge de la création des styles qui seront utilises dans l'application.

Le style graphique créé par le graphiste peut ensuite être chargé dans l'application par le développeur en une seule ligne de code et appliqué à tous les composants de l'application.

V-A. Création du style

L'outil AppStylist for Windows Forms (il en existe également pour ASP.NET, WPF et Silverlight) sera utilisé ici pour la création des styles pour une application Windows Forms.

Les styles créés sont des fichiers XML avec l'extension .idsl.

Image non disponible
  1. Cette zone vous présente les différents contrôles Infragistics dont vous pouvez modifier les propriétés graphiques. Sélectionnez dans cette liste le contrôle que vous souhaitez styler.
  2. Ce compartiment vous permet d'avoir un aperçu de l'affichage final des différents contrôles lorsque le style leur sera appliqué.
  3. Quant à cette zone, elle affiche les propriétés que vous pouvez modifier du contrôle que vous avez sélectionné.

Avec cette application vous pouvez donc créer vos styles en partant de zéro, ou utiliser les templates déjà disponibles ou encore modifier un style parmi ceux existants.

V-B. Intégration à l'application

Maintenant, voyons comment actionner automatiquement les styles à une application WinForms.

Pour cela, nous allons créer un nouveau projet avec Visual Studio 2008 ou 2010. Pour cet exemple, notre projet aura pour nom AppStyleTest. Le lien de téléchargement du code source de cette application est fourni en fin d'article.

Dans la boite d'outils de Visual Studio, nous allons ajouter les contrôles UltraFormManager, UltraComboEditor, UltraExplorerBar, UltraGrid, UltraTextEditor, UltraDateTimeEditor, UltraGroupBox et UltraButton. Vous devez les disposer de telle sorte que vous puissiez avoir quelque chose de semblable au résultat final affiché plus bas.

Dans le code du formulaire et dans le fichier contenant le Main, nous allons ajouter une référence à l'assembly AppStyling

 
Sélectionnez
 Using Infragistics.Win.AppStyling 

Dans un premier temps, nous allons définir une propriété de configuration qui sera utilisée pour la sauvegarde et la restitution dynamique du style défini par l'utilisateur.

Pour cela, dans l'explorateur de solution de Visual Studio, faites un clic droit sur le projet et cliquez sur propriétés. Dans le panel de définition des propriétés de l'application, cliquez sur l'onglet Settings et créez la propriété AppStyle.

Image non disponible

ans le gestionnaire d'événements du chargement du formulaire, nous allons appeler la méthode LoadStyl qui sera utilisée pour charger la liste des styles dans le combo.

 
Sélectionnez

private void FrMain_Load(object sender, EventArgs e)
        {
           LoadStyl();

        }

Le corps de la méthode LoadStyl est le suivant :

 
Sélectionnez


private void LoadStyl()
{
                    CbsStylList.Items.Clear();
            string[] TheFiles = 
                Directory.GetFiles(Path.Combine(Application.StartupPath, "Styles"), "*.isl");
            foreach (string TheFile in TheFiles)
            {
                CbsStylList.Items.Add(TheFile, Path.GetFileNameWithoutExtension(TheFile));
            }
            //On affiche le nom du style qui est utilisé par défaut
            string DefaultStyle = AppStyleTest.Properties.Settings.Default.AppStyle.Trim();
            if (DefaultStyle.Length > 0)
            {
                CbsStylList.Value = DefaultStyle;
            } 
}

Cette méthode charge les fichiers de styles .isl qui sont dans un dossier Styles se trouvant dans le dossier d'exécution de l'application.

Dans l'événement Clic de l'UltraButton, nous allons récupérer le nom du style choisi par l'utilisateur et, faire appel a la méthode StyleManager.Load(), qui va modifier automatiquement l'aspect visuel de tous les contrôles de l'application en fonction de ce qui est défini dans le fichier de style.

 
Sélectionnez
private void btnAp_Click(object sender, EventArgs e)
        {
            
            if (CbsStylList.SelectedIndex != -1)
            {
                //On applique le style choisi par l'utilisateur
                string theStyleFile = CbsStylList.SelectedItem.DataValue.ToString();
                StyleManager.Load(theStyleFile);
                //On affecte le nouveau style dans la variable AppStyle
                AppStyleTest.Properties.Settings.Default.AppStyle = CbsStylList.SelectedItem.DisplayText;
                //On sauvegarde le nouveau style
                AppStyleTest.Properties.Settings.Default.Save();
            } 
        }

Et enfin, dans la procédure Main() de l'application, nous allons ajouter le code permettant de charger le style qui est défini dans la propriété AppStyle de l'application.

 
Sélectionnez
//On charge le style qui est défini par défaut
            string DefaultStyle = AppStyleTest.Properties.Settings.Default.AppStyle.Trim();
            if (DefaultStyle.Length > 0)
            {
                StyleManager.Load(Path.Combine(Application.StartupPath, "Styles/" + DefaultStyle + ".isl"));
            }

C'est tout, facile n'est pas ? :) À l'exécution, nous obtenons le résultat suivant :

Image non disponible
Image non disponible
Image non disponible

VI. Avis des développeurs

VI-A. Hinault Romaric (NetAdvantage 2010 Volume 3)

Ayant eu l'occasion de travailler à la fois avec le pack NetAdvantages for .Winforms et NetAdvantages for ASP.NET, je suis assez satisfait du résultat obtenu avec ces outils.

Les packs NetAdvantage d'Infragistics regroupent quasiment tous les composants dont le développeur a besoin pour la mise sur pied des applications professionnelles. Chaque composant est doté d'un nombre assez impressionnant de fonctionnalités, et pour aider les développeurs dans la manipulation, le SmartTag dans Visual Studio est mis à leur disposition avec les options les plus importantes pour chaque composant.

Il faut également dire que l'équipe de développement de NetAdvantage est assez réactive quant à l'évolution de l'environnement .NET. Au test des composants, on ressent une franche collaboration avec Microsoft pour une prise en charge rapide des améliorations de la plateforme .NET et de l'environnement de développement Visual Studio, et une intégration quasi parfaite avec ces outils.

NetAdvantage est fourni avec un outil, qui marche parfaitement, permettant de créer automatiquement les boîtes à outils dans Visual Studio 2008 ou 2010 contenant les contrôles NetAdvantage. Un aspect intéressant de cet outil, est qu'il permet de créer les boites à outils en ciblant la version du Framework .Net de votre choix (important pour assurer la rétrocompatibilité).

Comme toute œuvre humaine, il y a bien évidemment quelques ratés et bogues que j'ai trouvés mineurs. Par exemple, lors de la liaison de l'UltraGridView à une source de données en utilisant le wizard, j'ai constaté une consommation anormale de la mémoire.

Néanmoins, je dois avouer que la prise en main des outils NetAdvantages est relativement simple, même pour le développeur ayant très peu d'expérience. L'utilisateur bénéficie d'une documentation bien fournie et assez explicite, s'intégrant à l'aide de Visual Studio, des exemples de codes, un forum et un support technique assez réactif.

En me basant sur mon expérience et des offres disponibles actuellement sur le marché, je dois dire que les solutions d'Infragistics sont assez complètes et réussies.

VI-B. Olivier Delmotte (NetAdvantage 2005 Volume 3)

J'ai principalement testé la partie WinForm avec Visual Studio 2005 et le .Net Framework v2.

NetAdvantage n'est pas une mauvaise librairie loin de là.

Elle offre de très nombreuses possibilités, bien au-delà de la demande du développeur classique. C'est peut-être ce que je lui reprocherais le plus. L'API développée par Infragistics, surtout au niveau de la gestion de l'apparence, est vraiment bien pensée, mais offre trop d'options. J'avoue m'être un peu perdu la première fois. Heureusement, l'utilisation intelligente du SmartTag, apparu avec Visual Studio 2005, et des assistants dont disposent certains contrôles vient réduire un peu cette impression.

Cependant, la version que nous avons testée comporte encore de nombreux bogues, certes pour la plupart peu gênants, mais qui gâchent un peu le plaisir de travailler avec NetAdvantage.

On pourrait également lui reprocher une certaine lourdeur. En effet, le nombre d'options proposées, surtout au niveau visuel est, selon moi, un petit handicap.

J'ai testé quelques contrôles WebForm également. L'UltraWebTab, l'équivalent du TabControl en WinForm par exemple, est magnifique, mais, chose gênante, la gestion du copier / coller de contrôles d'un TabPage est à porter aux abonnés absents, on se retrouve avec plusieurs contrôles ayant le même ID. Toujours avec ce contrôle par exemple, la gestion du style MSN est loupée, et c'est bien dommage, tous les autres sont réussis.

Mais dans l'ensemble mon avis reste positif vis-à-vis de NetAdvantage. C'est une bonne librairie.

VI-C. Louis-Guillaume Morand ( NetAdvantage 2005 Volume 3 )

Mon avis est clairement mitigé quant aux composants Infragistics.

Il se veut objectif et les composants Web que j'ai testés m'ont clairement laissé une impression modérée. S'il n'est pas possible de critiquer la qualité même des composants, tant par leurs fonctionnalités que par leurs assistants (wizards clairs et complets), s'il est très appréciable de voir que les composants profitent au maximum des SmartTags de Visual Studio, et si l'aide fournie est vraiment mais vraiment plus que parfaite, on ne peut fermer les yeux sur des petits bogues restants. Je n'ai évidemment pas lu l'aide en entier, mais mes collègues ont rencontré les mêmes problèmes que moi à savoir des composants qui, une fois en exécution, refusaient de charger les images désirées, principalement à cause d'un path par défaut qui n'est pas toujours géré correctement.

D'autres problèmes ont été rencontrés en mode Design de Visual Studio où, à l'aide d'un SmartTag, il est possible de définir le thème d'un composant. Lors du choix d'un template (thème prédéfini) pour le composant, il arrive qu'une fois la compilation lancée, le thème ne soit pas sauvegardé. Un autre petit bogue, fut la cohabitation entre Cassini et IIS. Les composants Web d'Infragistics utilisant différentes images qui sont copiées dans le répertoire de l'application et ne sont parfois pas pris en compte selon que ce soit lancé avec Cassini ou IIS. Il faut alors parfois modifier le code, normalement généré automatiquement, pour obtenir le résultat souhaité.

Ce sont deux petits points qui m'ont fait perdre vraiment beaucoup de temps au cours des tests d'Infragistics.

D'un autre côté, j'ai rarement, voire jamais vu des contrôles dont la personnalisation pour le développeur, ait été aussi poussée tout en restant extrêmement simple. En effet, les smarttags ne proposent que les propriétés les plus intéressantes et les assistants (wizards) de certains composants, sont du plus bel effet. J'ajouterai à cela que l'aide et les exemples fournis dans le package NetAdvantage sont très poussés et très complets. On se rend compte des pleines capacités des composants fournis par le pack ; mieux encore, des fonctionnalités JavaScript ou autres, spécifiques au site Web peuvent être ajoutées et de nombreux exemples se trouvent alors proposés. Je pense donc pour conclure que le pack NetAdvantage est clairement un très bon pack de composants .Net dont la partie Webforms possède d'agréables surprises et que les composants Winforms possèdent parfois des fonctionnalités "exotiques" mais qui pourront sûrement se révéler intéressantes pour nombre d'entre vous.

VII. Conclusion

Nous vous avons juste présenté une infime partie des possibilités qu'offrent les packs d'Infragistics. Pour tout développement, sur la plateforme .NET, vous trouverez en ces outils un moyen à la fois simple et efficace pour la création des applications professionnelles riches en termes de fonctionnalités et d'affichage.

VIII. Téléchargement sources

IX. Liens

X. Remerciements

Je tiens à remercier ClaudeLELOUP pour sa relecture et correction orthographique.