Fermer

septembre 21, 2022

Telerik Reporting conquiert .NET MAUI et .NET MAUI Blazor


Découvrez comment utiliser Telerik Reporting dans les applications .NET MAUI et .NET MAUI Blazor.

.NET MAUI est la dernière technologie fournie par Microsoft pour le développement d’applications multiplateformes. Le framework est l’évolution de Xamarin.Forms et offre quelques bonus en tant que prise en charge des scénarios de bureau.

Comme vous le savez déjà, nous nous efforçons toujours de prendre en charge chaque nouvelle technologie introduite par Microsoft et avoir Telerik Reporting dans les applications .NET MAUI est un autre élément de preuve. Dans cet article de blog, vous verrez comment afficher un rapport Telerik Reporting dans une application .NET MAUI et .NET MAUI Blazor en utilisant la visionneuse de rapports HTML5 et la visionneuse de rapports Blazor.

Avant de commencer

Aperçu de Visual Studio

Si vous développez sous Windows, vous aurez besoin du dernière version de Visual Studio. Vous pouvez effectuer une nouvelle installation de Visual Studio ou modifier votre installation actuelle et installer la charge de travail de développement de l’interface utilisateur de l’application multiplateforme .NET avec ses options d’installation facultatives par défaut.

Si vous développez sur Mac, vous aurez besoin Aperçu de Visual Studio 2022 pour Mac 17.4. Notez que les applications .NET MAUI qui ciblent Windows ne peuvent être lancées et déboguées qu’à l’aide de Visual Studio 2022.

Service REST de rapports Telerik et serveur de rapports Telerik

Nos visualiseurs de rapports HTML nécessitent une instance en cours d’exécution du Service REST de rapport Telerik ou la Serveur de rapports Telerik pour afficher les rapports. N’oubliez pas que le service de rapport doit être hébergé en dehors de l’application mobile.

Service REST de rapport Telerik

Le projet qui héberge le service Telerik Reporting REST peut cibler .NET Framework ou .NET Core. Vous pouvez trouver des démos du service dans le dossier d’installation de Telerik Reporting – Exemples -> CSharp sous-dossier.

Vous n’avez pas encore installé Telerik Reporting ? Pas de soucis, il vous suffit de commencer votre essai gratuit. Vous trouverez ce projet et de nombreux autres exemples dans le dossier d’installation.

Si vous décidez d’opter pour l’option de service Telerik Reporting REST, vous pouvez choisir certaines de nos démos et suivre les étapes ci-dessous.

  1. Copiez le projet de service REST et placez-le dans un emplacement séparé. Dans ce cas, j’utiliserai le .NET6/CSharp.Net6.ReportingRestServiceCorsDemo.
  2. Ouvrez le projet et ajoutez un nouveau dossier appelé « Rapports.”
  3. Copiez vos rapports dans ce dossier ou vous pouvez utiliser nos exemples qui se trouvent dans le dossier d’installation de Telerik Reporting C:\Program Files (x86)\Progress\Telerik Reporting \Concepteur de rapports\Exemples.
  4. Modifiez la valeur de la reportsPath le service recherchera donc le rapport dans le dossier nouvellement créé.
  5. Exécutez le projet. Pour vous assurer que le service fonctionne, exécutez l’application et accédez à {applicationRoot}/api/reports/version, qui renverra la version utilisée de Telerik Reporting.

Serveur de rapports Telerik

Si vous n’êtes pas très familier avec .NET, vous pouvez utiliser le Serveur de rapports Telerik. Il s’agit d’une plate-forme de création de rapports basée sur un serveur qui fournit une gestion complète des rapports, ainsi qu’un stockage centralisé des rapports et diverses façons de les organiser et de les prévisualiser.

Telerik Report Server est un produit commercial. Vous êtes invités à explorer toutes ses fonctionnalités et à obtenir le support technique de l’équipe lorsque vous inscrivez-vous pour un essai gratuit de 30 jours. Pour l’utiliser commercialement, vous devez acheter une licence.

Si vous optez pour cette option, vous devez suivre les étapes suivantes :

  1. Installez le serveur de rapports Telerik.
  2. Créer vos rapports et publiez-les à l’aide du Concepteur de rapports.

Nous sommes maintenant prêts à continuer avec l’ajout de Telerik Reporting à une application .NET MAUI ou .NET MAUI Blazor.

Intégration de Telerik Reporting dans une application .NET MAUI

Tout d’abord, vous devez créer l’application .NET MAUI :

Créer un nouveau projet : application .NET MAUI

Ensuite, vous pouvez directement ajouter le pur Visionneuse de rapports HTML5 via une vue Web. Par exemple:

 <WebView HeightRequest="600" 
          WidthRequest="800"> 
                <WebView.Source> 
                    <HtmlWebViewSource> 
                        <HtmlWebViewSource.Html> 

                            <![CDATA[ 

                <html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Telerik HTML5 Report Viewer Demo</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.common.min.css" rel="stylesheet" id="common-css" /> 
    <link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.blueopal.min.css" rel="stylesheet" id="skin-css" /> 
    <script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script> 

    <style> 
        body { 
            font-family: Verdana, Arial, sans-serif; 
            margin: 5px; 
        } 

        #reportViewer1 { 
         . . . 
        } 
    </style> 
</head> 

<body> 
    <div id="reportViewer1"> 
        loading... 
    </div> 

    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#reportViewer1") 
                .telerik_ReportViewer({ 
                    serviceUrl: "https://demos.telerik.com/reporting/api/reports/", 
                    reportSource: { 
                        //parameters: {} 
                        //parameters: { Year: [2001, 2003, 2004] } 
                    }, 
                    // Report Server connection configuration 
                    // If Report Server is used instead of hosting a REST Service, comment out 'serviceUrl' and 'reportSource' above 
                    // uncomment 'reportServer' and 'reportSource' below 
                    //reportServer: { 
                    //    url: "http://report-server-host:83", 
                    //    username: "admin", 
                    //    password: "adminpass" 
                    //}, 
                    //reportSource: { 
                    //    // For Report Server, use "{Category}/{ReportName}" 
                    //    report: "Samples/Dashboard" 
                    //}, 
                }); 
        }); 

    </script> 

</body> 
</html> 

                ]]> 

                        </HtmlWebViewSource.Html> 
                    </HtmlWebViewSource> 
                </WebView.Source> 
            </WebView>

Vous pouvez également placer la page de la visionneuse dans un fichier HTML séparé et la référencer dans la vue Web.

Vérifions le résultat :

Telerik Reporting dans .NET MAUI

Intégration de Telerik Reporting dans une application .NET MAUI Blazor

Pour cet exemple, nous utiliserons le Visionneuse de rapports Blazor et l’approche de Comment utiliser la visionneuse de rapports Blazor. Vous pouvez également consulter notre Visionneuse de rapport Blazor native publié dans R3 2022. Un exemple peut être trouvé dans le dossier d’installation de Telerik Reporting : C:\Program Files (x86)\Progress\Telerik Reporting Version\Examples\CSharp\CSharp.BlazorNativeExample.VS2022.sln.

Notez que la visionneuse Blazor est construite au-dessus de la visionneuse de rapports HTML5, qui est également la base du reste des visionneuses de rapports des technologies Web.

Continuons avec le développement de l’application .NET MAUI Blazor :

  1. Créez l’application MAUI Blazor :

    2. Créer un nouveau projet : application .NET MAUI Blazor

    Ajouter le Telerik.ReportViewer.Blazor Paquet NuGet.

  2. Dans le wwwroot -> index.html, ajoutez les scripts suivants :
    3. <head>
…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
<script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script>
</head>
<body>
	…
<script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>

</body>
  3. Ajoutez la visionneuse à la page Index.razor :
    4. @page "https://www.telerik.com/"
@using Telerik.ReportViewer.Blazor

<h1>Telerik Reporting Blazor Report Viewer</h1>

<style>
    .trv-report-viewer {
        width: 85%;
        height: 600px;
        padding-right: 50px;
    }
</style>

<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@5.0.1/dist/all.css" />

<ReportViewer @ref="reportViewer1"
              ViewerId="rv1"
              ServiceUrl="https://demos.telerik.com/reporting/api/reports"
              ReportSource="@(new ReportSourceOptions
                              {
                                  Report = "Conference report.trdx",
                                                })"
              Parameters="@(new ParametersOptions { Editors = new EditorsOptions { MultiSelect = EditorType.ComboBox, SingleSelect = EditorType.ComboBox } })"
              ScaleMode="@(ScaleMode.FitPage)"
              Scale="1.0" />

                              @code {
    ReportViewer reportViewer1;

}

    La ServiceUrl doit être l’URL du service Telerik Reporting REST. Une autre option consiste à afficher un rapport hébergé sur le serveur de rapports Telerik. Ensuite, vous ne devez pas définir la propriété ServiceUrl mais la propriété ReportServer.

    Pour les besoins de ce blog, nous utiliserons les informations d’identification de notre instance Report Server, hébergée sur nos serveurs à des fins de démonstration. Si vous êtes curieux d’en savoir plus sur RS, vous pouvez consulter le Serveur de rapports Telerik documents officiels :

    <ReportViewer ViewerId="reportViewer1"
          ReportServer="@(new ReportServerOptions {  Url = "https://demos.telerik.com/report-server/", Username = "demouser", Password = "demopass" })"
          ReportSource="@(new ReportSourceOptions()
                          {
                              Report = "Published/Dashboard"
                          })"/>

    Et nous avons ici le résultat :

    Signaler MAUI Blazor sur un appareil mobile

Code source

Les deux projets peuvent être trouvés dans notre référentiel GitHub :

Interface utilisateur Telerik pour .NET MAUI

Je ne peux pas manquer l’occasion de mentionner le Interface utilisateur Telerik pour la bibliothèque .NET MAUIqui est actuellement la suite d’interface utilisateur la plus complète du marché qui offre des contrôles pour créer des applications mobiles et de bureau modernes et professionnelles pour une implémentation multiplateforme ciblant Android, iOS, macOS et Windows à partir d’une seule base de code partagée.

Cette toute nouvelle bibliothèque d’interface utilisateur est livrée avec exemples d’applications de démonstration qui mettent en valeur le nombre croissant de contrôles. En plus d’élargir la liste des contrôles, les versions régulières garantissent que la suite est à jour avec les dernières versions de Microsoft.

Si vous ne l’avez toujours pas essayé, vous pouvez commencer un essai gratuit pour regarder de plus près. Nous fournissons également un service d’assistance dont nous sommes fiers et des ressources qui vous aideront tout au long du processus.

Vous voulez essayer Telerik Reporting ?

Rapports Telerik est un outil de création de rapports intégré .NET complet, facile à utiliser et puissant pour les applications Web et de bureau qui prend en charge : Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React, Vue , WPF, WinForms et WinUI. Également disponible dans le cadre de notre Telerik DevCraft bundle, Reporting vous permet de créer, de styliser, d’afficher et d’exporter des rapports riches, interactifs et réutilisables pour présenter de manière attrayante des données analytiques et des données commerciales. Ajoutez des rapports à n’importe quelle application métier via les contrôles de la visionneuse de rapports. Exportez les rapports prêts vers plus de 15 formats.

Si vous ne l’avez toujours pas essayé, vous pouvez commencer un essai gratuit pour regarder de plus près. Nous fournissons également un service d’assistance dont nous sommes fiers et des ressources qui vous aideront tout au long du processus.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link

septembre 21, 2022