Développement .NET, Top DevExpress DashBoard: création et modification dynamiques
photo-DashBoard-707x500

Développement .NET, Top

DevExpress DashBoard: création et modification dynamiques

Cet article s’adresse plus particulièrement aux programmeurs ASP .NET qui utilisent la librairie de contrôles Devexpress, afin d’implémenter dans les projets, la composante DashBoard pour la visualisation des graphiques.

Motivation

Parmi les contrôles disponibles dans le pack DevExpress, il y a AspxDashboardViewer (Application Web) et DashboardViewer (Application Windows), un contrôle qui charge un XML avec toutes les propriétés des contrôles souhaités dans un Dashboard.
Conformément au standard DevExpress, XML, la source du Viewer, est généré par le contrôle DashboardDesigner:

https://www.youtube.com/watch?v=Oe9T_AAkIw8.

Une fois réalisé, le XML peut être chargé soit dans Windows Application, soit dans Web Application.
Le Dashboard obtenu est visible une fois que l’application incorporant le DashboardViewer est réalisée et que la source est déterminée. Le seul désavantage, dans le Dashboard créé avec source XML, les variables sont écrites directement dans le code source. Il serait possible de configurer le Query du Dashboard Paramètres mais cette méthode reste limitée.

Pour charger le DashBoard dans Windows Application, nous avons la possibilité d’apporter une modification dynamique à la source XML (runtime) et de faire la sauvegarde de la nouvelle version.
Pour charger le DashBoard dans Web Application il faut personnaliser le DashBoard dynamique sans faire la sauvegarde de la nouvelle version dans XML.

La source XML

Pour des modifications dynamiques, les tags importants d’un fichier XML source sont :

– DataConnection – la configuration dynamique de la connexion est nécessaire pour la reprise des paramètres de configuration d’un fichier de configuration ou pour une connexion à la base de données via un identifiant et un mot de passe ;
– DataSources – la configuration du Query de connexion à la base de données est nécessaire si des paramètres supplémentaires au Query sont demandés pour ajouter / effacer un contrôle dans le DashBoard ;
– Items – les contrôles nécessaires vont s’ajouter / s’effacer ici ;
– LayoutTree – tous les contrôles ajoutés dans le tag Items doivent être référencés dans la Disposition (Layout) sinon, ils n’apparaitront pas dans le Dashboard.

Une version générale d’un fichier source XML:

01

La modification du fichier à l’aide d’une application qui intègre DashboardDesigner permet d’obtenir des informations concernant les paramètres à utiliser en vue du rangement des contrôles dans Dashboard. Il est possible ainsi de travailler sur le fichier XML source pour obtenir une vision sur le positionnement des composants et sur les propriétés à modifier pour parvenir au résultat souhaité.

Ajouter des contrôles

Pour modifier les propriétés des composants qui seront chargées dans DashBoard, il faut accéder aux propriétés de l’objet Dashboard qui sera chargé dans l’application. Si c’est une application Windows (Desktop) qui sera générée, l’accès vers l’objet est libre dans l’application :

DevExpress.DashboardCommon.Dashboard d = dashboardViewer1.Dashboard;

Pour une application Web, l’accès à l’objet DashBoard se fait par le traitement de l’événement DashBoard à l’aide d’un argument de type DashboardLoadedWebEventArgs:
protected void ASPxDashboardViewer1_DashboardLoaded(object sender, DevExpress.DashboardWeb.DashboardLoadedWebEventArgs e)
{
Dashboard dashboard = e.Dashboard;
}
Si les paramètres de connexion à la base apparaissent dans le fichier de configuration ou s’il est souhaité de modifier la base de données pour reprendre et afficher des données d’une autre base de données, l’objet DataSources peut-être paramétré.
//Modification de la chaîne de connexion pour accéder à la base de données
dashboard.DataSources[« dataSource1″].SqlDataProvider.DataConnection.ConnectionString = « Data Source=localhost;Initial Catalog=Norwind;Integrated Security=SSPI »;

Si les utilisateurs, qui accèdent à la page Web avec le DashBoard ont des droits de visualisation dans DashBoard différents ou si le DashBoard est configuré avec un support multi-langue, une modification du Query SQL est nécessaire en accédant aux propriétés de l’objet DataSources :

//Modification de la requête pour accéder à la base de données
dashboard.DataSources[« dataSource1″].SqlDataProvider.SqlQuery = « Select CustomerID, Freight, (FirstName + ‘ ‘ + LastName) AS FullName, Title, Country, ShipCountry, ShipCity from Orders left join Employees on Orders.EmployeeID = Employees.EmployeeID »;

Il est possible de modifier les propriétés des composants existants dans DashBoard si l’on souhaite modifier le titre, par exemple, ou l’argument d’un graphique (modification nécessaire pour la configuration d’un support multi-langue).

//La manipulation des propriétés de composants
((PieDashboardItem)dashboard.Items[« pieDashboardItem1″]).Name = « Titre tarte »;
((PieDashboardItem)dashboard.Items[« pieDashboardItem1″]).Arguments[0].DataMember = « Title »;

Pour ajouter un composant nouveau de type graphique, la création d’un objet avec les propriétés correspondantes est nécessaire :

//Ajouter une nouvelle tarte
PieDashboardItem pie = new PieDashboardItem();
pie.Name = « Pies 2″;
pie.ComponentName = « pieDashboardItem2″;
pie.DataSource = dashboard.DataSources[« dataSource1″];

pie.Arguments.Add(new Dimension(« FullName »));
pie.Values.Add(new Measure(« Freight »));

dashboard.Items.Add(pie);

Pour une meilleure personnalisation des contrôles il faut ajouter ces propriétés au composant nouvellement créé. Par exemple, des textes qui apparaissent automatiquement sur les axes d’un module de visualisation de données, des nombres avec ou sans virgule.

Exemple :

pie.LabelContentType = PieValueType.ValueAndPercent;
pie.TooltipContentType = PieValueType.Argument;
pie.ShowPieCaptions = false;
pie.PieType = PieType.Donut;

Une fois le composant ajouté dans le Dashboard, il faut l’ajouter aussi dans le LayoutRoot. Cette propriété du DashBoard est configurée pour un bon positionnement dans le DashBoard.

DashboardLayoutItem layout = new DashboardLayoutItem(pie, 51.3545347467609);
((DashboardLayoutGroup)dashboard.LayoutRoot.ChildNodes[1]).ChildNodes.Add(layout);

Le positionnement dans le DashBoard de chaque élément est réalisé à l’aide d’un centre de poids « weight ». Ce centre peut se calculer, mais pour un positionnement ciblé il est préférable de modifier un fichier source WML, sauvegarder les nouvelles positions des composants et faire le suivi des valeurs que doivent avoir les centres de poids.

Exemple (utilise la base de données Norwind disponible Codeplex):
http://northwinddatabase.codeplex.com/

J’espère que cet article aura reçu un bon accueil et qu’il permettra aux programmeurs d’être plus confortables avec DevExpress DashBoard.
Les remontées d’information sont les bienvenues pour pouvoir être partagées et améliorer les compétences collectives.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Facebook
Google+
http://blog.beleringenierie.com/2014/07/19/devexpress-dashboard-creation-et-modification-dynamiques/?rel=author">
Twitter