Dans le deuxième article de cette série, nous passons en revue le nouveau Concepteur de rapports Web et comment l'utiliser dans ASP.NET. Consultez le premier message ici .
Présentation de la série
Telerik Reporting est un puissant moteur de reporting basé sur .NET avec de nombreux avantages. L'un de ces avantages est le Report Designers . Des développeurs aux concepteurs de rapports et aux parties prenantes, Telerik Reporting est l'outil de choix pour créer et concevoir de beaux rapports. En conséquence, j'ai créé cette série pour illustrer cela.
Cette série couvre un peu du passé, un peu du présent et, surtout, des opportunités futures. Les derniers articles seront plus techniques, vous pouvez donc passer à l'avance en utilisant les liens ci-dessous ou lire à votre guise.
-
Concepteurs de rapports Web et de bureau pour tous – Telerik Reporting .
-
Premiers pas avec le concepteur de rapports Web dans .NET. (Cet article)
-
Concepteurs de rapports de bureau dans .NET – Prise en main. (Prochainement!)
Introduction
Des rapports bien conçus sont comme n'importe quel autre média. Il y a un art abstrait pour les créer et les lire. Pensez-y, les rapports répondent aux questions, communiquent les objectifs et évoquent les bons et les mauvais sentiments.
Je veux dire, ce n'est pas un Picasso ou un Rembrandt. Cependant, la ou les personnes qui ont réfléchi à la complexité des données et les ont organisées de manière à communiquer les bonnes et les mauvaises informations ont suivi un processus similaire à celui de ces artistes renommés.
La conception de rapports fait partie intégrante de la transmission des rapports aux parties prenantes. On pourrait soutenir que les capacités du concepteur sont les aspects les plus importants d'un cadre de reporting. Cette idée vaut également pour Telerik Reporting.
Les concepteurs de rapports s'attendent à ce qu'un cadre de rapport soit facile à utiliser et à comprendre. Ils s'attendent à ce qu'il soit suffisamment puissant pour présenter leurs idées comme prévu. Des entrées de données à l'activité de l'utilisateur final, une solution de reporting doit être capable de fonctionner dans le cadre de l'intention de conception.
Cependant, pour concevoir correctement un rapport dans Telerik Reporting, il est essentiel de comprendre le cycle de vie des rapports . Cette compréhension habilitera le concepteur en lui fournissant un cadre de travail. Permettez-moi de passer brièvement en revue le cycle de vie du rapport.
Comprendre le cycle de vie du rapport
Le cycle de vie du rapport dans Telerik Reporting se compose de trois étapes. Celles-ci définissent le rapport, traitent le rapport, puis rendent le rapport. Les étapes sont séquentielles et se construisent les unes après les autres. Pour apporter des modifications à l'une ou l'autre étape, vous devez redémarrer le cycle de vie. Permettez-moi de vous donner un aperçu des étapes ci-dessous.
- Définition du rapport sont les définitions déclaratives créées avec l'une des Les outils de conception de Telerik Reporting.
- Processing the Report Definition effectue des calculs de regroupement, de tri et de filtrage. Il évalue les expressions, lie les sources de données et déclenche des événements de liaison.
- Rendering the Processed Report prend le traitement rapport et le transmet à l'une des nombreuses extensions de rendu disponibles.
Une considération importante lors de l'étape de rendu est que chaque moteur de rendu a ses propres capacités. Par exemple, la pagination se produit pendant l'étape de rendu car c'est le seul endroit que nous pouvons connaître si la pagination est nécessaire. Pour élaborer, un rendu PDF nécessite un format paginé, contrairement aux rendus CSV ou XLSX.
En fin de compte, la conception d'un rapport est la première étape du processus. Chacun des Telerik Re Les concepteurs de port s'inscrivent dans la première étape du cycle de vie. Comprendre ce cycle de vie fournit une base solide pour la conception de rapports dans Telerik Reporting.
Conception de rapports
Le concepteur de rapports Web étant une application Web, il existe de légères différences lors de son utilisation par rapport aux concepteurs de bureau. Cependant, les éléments et les méthodologies du concepteur sont très similaires. En outre, les composants les plus utilisés sont disponibles, mais comme le concepteur Web est en cours de développement, certains sont toujours manquants.
Méthodologies utilisées
Les éléments conceptuels des outils Telerik Report Designers permettent une conception simple et visuelle. Pour ce faire, les concepteurs de rapports peuvent utiliser les concepts de glisser-déposer, de commentaires contextuels, d'assistants et de ce que vous voyez est ce que vous obtenez.
Le glisser-déposer est un concept courant dans la conception qui est utilisé dans de nombreux outils de conception. Il permet au concepteur de sélectionner l'outil ou l'élément de conception, de le faire glisser sur l'aire de conception et de modifier l'outil. Ceci est également omniprésent avec d'autres concepts tels que l'alignement sur la grille.
Pour des commentaires contextuels, l'interface utilisateur sera mise à jour lors de la sélection d'un élément spécifique dans le concepteur. Par exemple, un TextBox a des propriétés différentes d'un DataSource et la fenêtre de propriétés se mettra à jour pour tenir compte de ces différences.
Pour faciliter la création de rapports complexes, les outils de conception incluent des assistants. Les éléments de rapport les plus complexes tels que le graphique, les différentes sources de données et les tableaux / tableaux croisés peuvent être créés beaucoup plus simplement à l'aide des assistants. Les assistants sont couramment utilisés pour les tâches complexes.
Les concepts ci-dessus complètent le flux de travail du concepteur en affichant à quoi ressemblera exactement le composant dans le rapport. Ceci est connu comme ce que vous voyez est ce que vous obtenez. Dans Telerik Reporting, il fournit un aperçu en direct des éléments basés sur des images tels que le graphique, la carte, le code-barres et la PictureBox. C'est très courant avec les concepteurs complexes.
Éléments de l'interface utilisateur du concepteur de rapports Web
Les éléments du concepteur de rapports Web sont presque identiques au concepteur de bureau, sauf que certains sont nommés différemment. Il s'agit notamment de la surface de conception, des composants de rapport, de l'explorateur de rapports et de la zone de propriétés.
Interface utilisateur de la surface de conception
L'élément central de tout concepteur est la surface de conception. C'est là que les composants sont placés et le What-You-See-Is-What-You-Get apparaît. Ceci est mis en évidence dans la capture d'écran ci-dessous.
Interface utilisateur des composants de rapport
Les composants de rapport sont trouvés dans l'onglet Composants à gauche de l'aire de conception, comme indiqué dans l'illustration suivante. C'est ici qu'un concepteur sélectionne un élément à ajouter au rapport. Il peut être affiché sous forme de liste ou de grille.
Interface utilisateur de l'explorateur
L'explorateur répertorie tout ce qui a été ajouté à la surface de conception de rapport. C'est également le cas de l'Explorateur de rapports dans les autres concepteurs. Cependant, contrairement aux autres concepteurs, l'explorateur combine ici l'Explorateur de rapports et l'Explorateur de données pour éviter d'afficher trop de fenêtres.
La zone des propriétés est l'élément qui fournit le retour d'information le plus contextuel. Il sera mis à jour au fur et à mesure que les éléments seront sélectionnés dans le rapport. Cela est dû aux nombreuses variations de propriété dans les composants du rapport. La capture d'écran suivante illustre la zone de propriétés avec une zone de texte sélectionnée.
Interface utilisateur du menu Fichier
Comme la plupart des logiciels, il doit y avoir un moyen de gérer les fichiers. Le menu Fichier est utilisé pour créer et enregistrer des fichiers de définition. De plus, les préférences de l'espace de travail peuvent être définies. Cela ressemble au menu Fichier du Concepteur de rapports autonome.
Composants du concepteur de rapports Web [19659057] Il est bien connu que les applications de bureau offrent une expérience utilisateur différente de celle d'une application Web. Il en va de même pour Web Report Designer. Ceux qui connaissent nos concepteurs de bureau remarqueront certaines subtilités entre les concepteurs.
The Web Report Designer comprend les composants les plus largement utilisés. Il s'agit notamment des éléments de rapport, des éléments de données, des composants de rapport (sous-rapport), des cartes, ainsi que des graphiques et des sources de données. Malheureusement, il y en a tellement que seul un échantillon fonctionnel avec des démos peut suffisamment illustrer cela. [19659059] Notre démo publique comprend un large éventail de démos qui illustrent les nombreuses fonctionnalités et composants de Web Report Designer. Ci-dessous, une matrice côte à côte comparant les fonctionnalités des Desktop designers et du Web Report Designe r.
Maintenant que les méthodologies, les éléments de l'interface utilisateur et les fonctionnalités disponibles sont connus, il est important de savoir comment implémenter Web Report Designer dans une application.
Architecture du Web Report Designer
Le Web Report Designer est un pur widget jQuery HTML5 / CSS3 / JS. Il utilise un service REST dédié comme backend. Au moment d'écrire ces lignes, il fonctionne avec les saveurs ASP.NET Core et WebApi 2. Dans cette section, nous examinerons les exigences et la mise en œuvre pour les deux.
Pour suivre, un échantillon gratuit est disponible pour ce billet de blog sur GitHub . Il inclut nos démos publiques qui sont utilisées pour illustrer la configuration de Web Report Designer dans une application.
Configuration requise
- Le concepteur de rapports Web peut être utilisé avec .NET Framework 4.5.1+ ou .NET Core 2.1+
- Il nécessite les références d'assembly suivantes:
- Telerik.Reporting
- Telerik.WebReportDesigner.Services
- Les frameworks Web requis sont les suivants:
- jQuery 3.3.1+
- Kendo UI 2020.1.114+
- Le navigateur doit prendre en charge JavaScript / EcmaScript 6. Il s'agit de Google Chrome 77.0+, Mozilla FireFox 69.0+ et Microsoft Edge 79+.
- Un sous-ensemble de la bibliothèque jQuery 1.12.1 et des thèmes et styles de base seront être livré via le service.
Facultatif
- Le Telerik NuGet Feed configuré dans Visual Studio.
- Visual Studio Code ou Visual Studio 2017+ peuvent être utilisés.
Architecture
Le widget Web Designer fonctionne dans un client- l'architecture du serveur. Comme d'habitude, le widget est le client et le service REST est le serveur. Ceux qui ont utilisé nos visualiseurs de rapports basés sur HTML5 seront familiarisés avec cette architecture.
Dans les sections suivantes, nous passerons en revue les implémentations client et ensuite les implémentations serveur. Avant cela, je vais fournir quelques prérequis importants lorsque je crée un exemple.
En général, je crée une application ASP.NET Core ou ASP.NET MVC vide avec quelques petites modifications aux étapes de notre documentation. Permettez-moi de les passer en revue ci-dessous.
- Pour chaque échantillon, j'utilise le Telerik NuGet Feed car il est plus facile de gérer les dépendances. J'ajoute les assemblys requis en les recherchant simplement dans Visual Studio ou en utilisant le cli dotnet.
- J'utilise la composition fournie par le framework.
- Core et MVC incluent @RenderSections
- Pour les scripts et styles de rapports, ceux-ci sont ajoutés à la page Visualiseur de rapports dans les sections scripts et styles.
- Core et MVC incluent @RenderSections
- J'utilise également CDN dans la mesure du possible. Je ne débogue pas les frameworks tiers.
- Par exemple, jQuery, Bootstrap et Kendo sont fournis via CDN.
ASP.NET Core Client
Le processus de configuration du concepteur dans une application ASP.NET Core est décrit dans notre How-To article . Voici un exemple de base de ce à quoi cela ressemblerait.
La page de mise en page
@ {
ViewData ["AppName"] = "MSWA.AspNetCore.Web";
}
@ ViewData ["Title"] - @ViewData ["AppName"]
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
intégrité = " sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXm "
crossorigin =" anonyme ">
[19659097rc]
styles @RenderSection requis [19451290] [19451290] [scriptRenderSection requis] [19451290] //code.jquery.com/jquery-3.3.1.min.js"
intégrité = "sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8 ="
crossorigin = "anonyme">
<script src = "anonyme">
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
intégrité = "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQorigskAP7hUibXfa" 194512Q crossbus " anonyme "> [1 9659098] <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
intégrité = "sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQorigGiRRSQ1" CrossVLEHfe / JQorigGiRRSQ1 "crossVinFWpi = 1945VLEHfe / JQorigiRRSQQxSf125125125 "anonyme">
@RenderSection ("scripts", obligatoire: faux)
@RenderBody ()
[19659106]
La page Report Designer
@page
@ { [19659007] ViewData ["Title"] = "Web Report Designer";
}
@section styles {
}
@section scripts {
< script src = "api / reportdesigner / resources / js / telerikReportViewer" > </ script >
< script src = "api / reportdesigner / designerresources / js / webReportDesigner "> </ script >
< script type = "text / javascript" >
$ (document) .ready (function () {
$ ("# webReportDesigner"). telerik_WebReportDesigner ({ [19659007] persistSession: false, [19659007] toolboxSurface: {
layout: "list" [19659007] },
serviceUrl: "api / reportdesigner /",
rapport: "Product Catalog.trdp"
}). Data ("telerik_WebDesigner ");
});
</ script >
}
< div id [19659125] = "webReportDesigner" >
chargement ...
</ div >
Client ASP.NET MVC
Il est important de noter que ci-dessus, le client de conception de rapports ASP.NET Core pourrait également utiliser une page HTML / CSS / JS simple qui est illustré dans l'article de documentation. Cependant, les extraits de code précédents peuvent également être utilisés dans l'implémentation ASP.NET MVC.
Pour plus de détails sur l'utilisation d'ASP.NET MVC, consultez Comment configurer WebReportDesigner dans l'application ASP.NET MVC qui montre également une approche légèrement différente de celle des extraits de code ci-dessous.
La vue Mise en page
@ {
ViewBag.AppName = "AspNetMvc.Web";
}
< html >
<[19659123] head >
< meta charset = "utf-8" / >
< m eta name = "viewport" content = "width = device-width, initial-scale = 1.0" >
< title > @ ViewBag.Title - @ ViewBag.AppName </ title >
@ Scripts.Render ("~ / bundles / modernizr")
<[19659123] lien rel = "feuille de style" href = "// maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
intégrité = "sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvSAiH0EJ [194500W6] [194500W6] [194500W6] [194500W6] crossorigin = "anonyme" >
[1 9459106] < link rel = "stylesheet" href = "~ / Content / Site.css" />
@RenderSection ("styles", obligatoire: faux)
< script src = "// code.jquery.com/jquery-3.3.1.min.js"
intégrité = "sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8] [1945006] [1945006] [1945006] [1945006] [1945006] [1945906] crossorigin = "anonyme" > </ script >
< script src = "// cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
intégrité = "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUib039j7fakFP4 [194500skv6] [194500skv6] [194500skv6] [194500skv6] [194500skv6] [194500skv6] [194500skv6] crossorigin = "anonyme" > </ script >
[19659113] < script src = "// maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" [19659007] intégrité = "sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyorigUar5 + 76PVCmYl = "anonyme" > </ script >
< script src = "// kendo.cdn.tele rik.com/2020.1.114/js/kendo.all.min.js"> </ script >
@RenderSection ("scripts", obligatoire: faux)
</ head > [19659007] < body >
< div class = "Contenu du corps du conteneur" >
@RenderBody ()
</ div >
</ body >
</ html >
La vue du concepteur de rapports
@ {
ViewBag .Title = "Web Repor t Designer ";
}
@section styles {
< link href = "// fonts.googleapis.com/css?family=Roboto: 400 500 & display = swap " rel = " styleheet ">
} [19659007]
@section scripts {
< script src = "~ / api / reportdesigner / resources / js / telerikReportViewer" > </ script >
[19659113] < script src = "~ / api / reportdesigner / designerresources / js / webReportDesigner" > </ script >
< script type = "text / javascript ">
$ (document) .ready (function () {
$ ("# webReportDesigner"). Telerik_WebReportDesigner ({
persistentSession: [1945900699] ]
toolboxZone: {
layout: "list" ]
},
serviceUrl: "api / reportdesigner /",
[1 9459107] rapport: "Product Catalog.trdp"
}). Data ("telerik_WebDesigner");
});
</ script >
}
[1965109007] ] < div id = "webReportDesigner" >
loading ...
</ div >
Service REST du concepteur de rapports Web
De la même manière que nos visionneuses de rapports, le concepteur de rapports Web utilise un backend REST . En fait, l'API ReportDesignerControllerBase hérite de l'API ReportControllerBase utilisée dans l'implémentation du service REST de rapport.
La principale différence entre les implémentations ASP.NET Core et ASP.NET MVC réside dans les capacités du framework. Principalement, ASP.NET Core inclut l'injection de dépendances et MVC ne le fait pas. À part cela, la configuration sera presque identique.
Service de concepteur de rapports Web ASP.NET Core
ASP.NET Core utilise une classe de démarrage pour configurer ses applications. Le Concepteur de rapports Web dans ASP.NET Core est également configuré ici également. La configuration comprendra une section pour ReportingService et WebReportDesignerService, comme indiqué dans l'extrait de code suivant.
public class Startup
{
public Démarrage (configuration IConfiguration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get ; }
public void ConfigureServices (services IServiceCollection)
{
// Add CORS (Ceci est ouvert à des fins d'illustration)
services.AddCors (opts =>
{
opts.AddDefaultPolicy (p =>
{
p.AllowAnyOrigin ();
p. (); [19659007] p.AllowAnyHeader ();
});
});
// Add WebAPI for ASP.NET Core
services.AddControllers ();
[19659007] // Ajouter des pages de rasoir
services.AddRazorPages ()
.AddNewtonsoftJson ();
// Ajoutez l'E / S synchrone IIS
services.Configure (options =>
{ [19659007] options.AllowSynchronousIO = true ;
});
// Configurer les dépendances pour ReportServiceConfiguration.
services.TryAddSingleton (sp =>
new ReportServiceConfiguration ] {
ReportingEngineConfiguration = sp.GetRequiredService (),
(),
HostAppId = "DotNetCoreApp"
Storage 19659123] nouveau FileStorage (),
ReportSourceResolver = new TypeReportSourceResolver () [19450090699] [1945990699] [1945990699]
.AddFallbackResolver(new UriReportSourceResolver(
Path.Combine(sp.GetService().ContentRootPath, "Reports")))
});
// Configure dependencies for ReportDesignerServiceConfiguration.
services.TryAddSingleton(sp => new ReportDesignerServiceConfiguration {
DefinitionStorage = new FileDefinitionStorage(Path.Combine(sp.GetService().ContentRootPath, "Reports")),
SettingsStorage = new FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting")),
ResourceStorage = new ResourceStorage(Path.Combine(sp.GetService().ContentRootPath, "Reports""Resources")),
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
// Uses CORS
app.UseCors();[19659007]
// Uses Static Files
app.UseStaticFiles();
// Uses Routing
app.UseRouting();
// Maps Web API and Razor Pages
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapRazorPages();
});
}
}
ASP.NET Core's Dependency Injection makes the controller implementation simple as shown in the below code snippet.
[Route("api/[controller]")]
public class ReportDesignerController : ReportDesignerControllerBase
{
public ReportDesignerController(IReportDesignerServiceConfiguration reportDesignerServiceConfiguration,
IReportServiceConfiguration reportServiceConfiguration)
: base(reportDesignerServiceConfiguration, reportServic eConfiguration)
{ }
}
ASP.NET MVC Web Report Designer Service
ASP.NET MVC configuration will need to be in the constructor of the controller. This is also exactly like the MVC Report Viewer implementations as well. Furthermore, it will also include both the ReportService and ReportDesignerService configurations.
public class ReportDesignerController : ReportDesignerControllerBase
{
static readonly ReportServiceConfiguration ConfigurationInstance;
static readonly ReportDesignerServiceConfiguration DesignerConfigurationInstance;
static ReportDesignerController()
{
//This is the folder that contains the report definitions
//In this case this is the Reports folder
string reportsPath = Path.Combine(HttpContext.Current.Server.MapPath("~/"), "Reports");
//Setup the ReportServiceConfiguration
ConfigurationInstance = new ReportServiceConfiguration
{
HostAppId = "AspNetMvcApp",
Storage = new FileStorage(),
ReportSourceResolver = CreateResolver(reportsPath),
//ReportSharingTimeout = 1000,
//ClientSessionTimeout = 20,
};
DesignerConfigurationInstance = new ReportDesignerServiceConfiguration
{
DefinitionStorage = new FileDefinitionStorage(reportsPath),
SettingsStorage = new FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting"))
};
}
public ReportDesignerController()
{
//Initialize the service configuration
ReportServiceConfiguration = ConfigurationInstance;
ReportDesignerServiceConfiguration = DesignerConfigurationInstance;
}
static IReportSourceResolver CreateResolver(string reportsPath)
{
return new UriRep ortSourceResolver(reportsPath)
.AddFallbackResolver(new TypeReportSourceResolver());
}
}
That covers the specifics of setting up the Web Report Designer Client and the Web Report Designer Service in either an ASP.NET Core or ASP.NET MVC application. Additionally, it provides additional information for requirements and recommended steps. However, there are some additional complexities that should be addressed as well.
Complexities with the Web Report Designer
The Web Report Designer delivers powerful report design capabilities at near feature parity to our desktop designers. However, since this is delivered over the web some features will be more complex. These include handling databases and report file management.
Handling Databases
Connection strings for databases are made available through the SqlDataSource Wizard using the application configuration file through the ISettingsStorage interface. The end-user can save connection strings to the local Web Report Designer settings file using the default FileSettingsStorage implementation.
Report File Management
Out-of-the-box the Web Report Designer uses the FileDefinitionStorage implementation which enables managing files using the file system. A bonus is that all the Storage API methods are virtual and can be overridden and modified. These virtual methods enable implementing Custom Report Definition Storage.
Conclusion
This concludes part two of the Report Designer series. We reviewed some important design concepts for all of our designers, feature parity between the desktop designer and the web designer along with the Web Report Designer Architecture across both ASP.NET Core and MVC. Lastly, we reviewed important complexities of the Web Report designer.
I hope that you enjoyed a more detailed review of the Web Report Designer. I intended for this post to be more technical in nature. In the next post, I will include more technical information for the desktop designers and walk through building a report. I imagine there will be some overlap.
Want to Try Telerik Reporting?
Telerik Reporting is a complete, easy-to-use, and powerful .NET embedded reporting tool for web and desktop applications that support: ASP.NET Core, Blazor, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React,Vue, WPF, WinForms. Also available as a part of our Telerik DevCraft Complete bundleReporting allows you to create, style, view, and export rich, interactive, and reusable reports to attractively present analytical and any business data. Add reports to any business application through report viewer controls. Export the ready reports in more than 15 formats. Download a FREE trial today.
Source link