Dezvoltare .NET, Top DevExpress DashBoard: configurari / modificari dinamice
photo-DashBoard-707x500

Dezvoltare .NET, Top

DevExpress DashBoard: configurari / modificari dinamice

Articolul se adreseaza programatorilor ASP .NET ce utilizeaza libraria de controale Devexpress si implementeaza in proiecte componenta DashBoard pentru a vizualiza grafice.

Motivație

Printre controalele disponibile în pachetul DevExpress puteți regăsi și AspxDashboardViewer (Web Application) sau DashboardViewer (Windows Application), un control care încarcă un XML cu toate proprietățile controalelor pe care le doriți într-un Dashboard. Xml-ul ce reprezintă sursa Viewer-ului este generat de controlul DashboardDesigner conform proceduri propuse de cei de la DevExpress:

Odata realizat Xml-ul acesta poate fi încărcat fie în Windows Application fie in Web Application.
După realizarea aplicației ce încorporează DashboardViewer-ul și stabilirea sursei putem vedea Dashboardul realizat. Dezavantajul este că Dashboardul realizat cu sursă xml este hard codat în xml. Este posibilă parametrizarea query-ului din Dashboard Parameters dar și această metodă este limitată.

Dacă dorim incărcarea DashBoardului în Windows Application avem posibilitatea de a modifica dinamic sursa xml-ului (la runtime), salvând apoi noua versiune. Dacă dorim încărcarea DashBoardului în Web Application va trebui să costumizăm DashBoardul dinamic fără a salva noua versiune în xml.

Fișierul XML sursă

Tagurile unui fișier xml sursă ce sunt importante în cazul modificărilor dinamice sunt:
– DataConnection – parametrizarea conexiunii dinamic este necesară în cazul reținerii și preluării parametrilor de conexiune dintr-un fișier de configurare sau în cazul conectării la baza de date pe baza unui nume de utilizator și parolă;
– DataSources – parametrizarea query-ului de conectare la baza de date este necesar în cazul care adăugarea sau ștergerea unui control în DashBoard necesită parametrii suplimentari la query;
– Items – aici se vor adăuga sau șterge controalele necesare;
– LayoutTree – toate controalele adăugate în tagul Items vor trebui referențiate în layout sau nu vor apărea în Dashboard.

O versiune generală a unui fișier sursă XML:

01

Modificarea fișierului cu ajutorul unei aplicații ce încorporează DashboardDesigner oferă informații referitoare la parametrii ce trebuie specificați pentru a avea o anumită așezare a controalelor în Dashboard. Astfel se poate manipula fișierul xml sursă pentru a dobândi o viziune asupra așezării componentelor și proprietățile ce trebuie modificate pentru obținerea acestui rezultat.

Adaugarea controalelor

Pentru modificarea proprietăților componentelelor ce se vor încărca în DashBoard este nevoie de a accesa proprietățiele obiectului Dashboard ce se va încărca în Aplicație.
În cazul în care se va genera o aplicație Windows (Desktop) accesul la acest obiect se poate face de oriunde din aplicație:

DevExpress.DashboardCommon.Dashboard d = dashboardViewer1.Dashboard;

În cazul unei aplicații Web accesul la obiectul DashBoard se face numai prin tratarea evenimentului DashboardLoaded cu ajutorul argumentului de tip DashboardLoadedWebEventArgs:
protected void ASPxDashboardViewer1_DashboardLoaded(object sender, DevExpress.DashboardWeb.DashboardLoadedWebEventArgs e)
{
Dashboard dashboard = e.Dashboard;
}
În cazul în care parametrii de conectare la baza de date sunt specificați în fișierul de configurare sau se dorește schimbarea bazei de date pentru a prelua și afișa date din altă bază de date decât cea specificată în dur se poate parametriza obiectul DataSources:

//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”;

Dacă utilizatorii ce accesează pagina Web cu DashBoard-ul au drepturi diferite asupra datelor vizualizate în DashBoard, dar mai ales în cazul în care Dashboard-ul va fi implementat cu suport multi-language este necesară modificarea query-ului sql accesând proprietățile obiectului 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”;

Se pot modifica proprietățile componentelor existente în Dashboard în cazul în care dorim să schimbăm titlul de exemplu (schimbare necesară în special în cazul implementării suportului multi-language) sau argumentului unui grafic:

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

Pentru adăugarea unei noi componente de tip grafic trebuie creat un obiect cu proprietățile corespunzătoare:

//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);

Pentru o mai bună costumizare a controalelor, de exemplu a textelor ce apar în mod automat pe axe, sau a modului de vizualizare a datelor, de exemplu a numerelor cu virgulă sau fără virgulă trebuie adăgate și aceste proprietăți la componta creată.

Exemplu:

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

După adăugarea componentei în Dashboard trebuie adăugată și în LayoutRoot, acestă proprietate a Dashbordului fiind configurată pentru poziționarea corectă în Dashboard.

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

Poziționarea în Dashboard a fiecărui element este realizată pe baza unui centru de greutate ”weight” acesta se poate calcula dar pentru o mai exactă poziționare se poate modifica un fișier sursă xml, salva noile poziții ale componentelor și urmării ce valori ar trebui să aibă centrele de greutate.

Exemplul realizat utilizează baza de date Norwind disponibilă le Codeplex:
http://northwinddatabase.codeplex.com/

Am dorit ca acest articol sa ii ajute pe programatori sa se familiarizeze cu DevExpress DashBoard. Sper ca am reusit.
Asteptam comentariile voastre, un schimb de informatii ne va permite sa ne amelioram competentele colective.

DashBoard Int photo-707x500

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *

Poți folosi aceste etichete și atribute 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/ro/2014/07/19/devexpress-dashboard-creation-et-modification-dynamiques/">
Twitter