Introduction à l’API Kendo UI pour ASP .Net MVC (Partie 1)

Kendo ui

 

La société Telerik est spécialisée dans la conception d'interfaces utilisateurs dynamiques pour Microsoft .Net.

Rappelons que Microsoft .Net est un ensemble de technologies et de produits destinés au développement des applications Web et mobiles.

Au sein de cette plateforme, la technologie ASP (Active Server Pages) est destinée à la création des sites Web Dynamiques grâce à ces objets : Request, Response, Server, ObjectContext, Application, Session et Error.

Le MVC (Model -View - Controller) est pour sa part un Framework qui aide à dissocier les différentes couches d'un projet.

Le croisement de ces deux technologies a donné un nouvel outil aux développeurs Web, tout naturellement baptisé ASP.NET MVC.

Aujourd’hui, je vais vous présenter le Framework Kendo UI Core de Telerik, une version libre et open source distribuée sous licence Apache version 2.0. Une autre version complète et payante existe sous le nom de Kendo UI Professionnel.

Kendo UI est un Framework complet basé sur HTML5/ JavaScript conçu pour faciliter le développement des applications Web et mobiles modernes. Il contient un grand ensemble de widgets pour le web et le mobile, un Framework Core et de nombreuses fonctionnalités basées sur HTML5, JQuery et JavaScript.

Le code source est disponible sur le référentiel GitHub, ce qui permet à la communauté des développeurs de contribuer en corrigeant des bugs ou en demandant de nouvelles fonctionnalités à travers le portail de feedback Kendo UI.

Comme à chaque nouvelle version de Kendo UI, tous les nouveaux widgets et fonctionnalités Kendo UI sont disponibles immédiatement dans les plateformes ASP.NET MVC, Java Server Pages (JSP) et PHP. Les widgets tels que  l’AutoComplete, les listes Drop-down, les Panels-bars ou encore les Calendriers. Et les fonctionnalités telles que DataSource et la validation de données.

Voici la liste complète de widgets et de fonctionnalités qu’offre Kendo UI Core :

Widgets Kendo UI

Widgets Kendo UI

 

Certains widgets (Grid, Map, Editor, BarCode, QRCode, Scheduler, StockChart, Treeview, Upload, Charts, Editor, Gauges), sont tellement riches en fonctionnalités qu’ils sont plutôt considérés comme des solutions que de simples widgets. Ils ne sont donc disponibles que dans la version payante Kendo UI Professionnel.

Fonctionnement:

Tous les widgets Kendo UI sont enregistrés comme plugins jQuery, ce qui leur permet d'être instanciés sur une instance d'objet jQuery. La méthode de plugin jQuery est formée par le nom du widget, avec le préfixe kendo (par exemple : kendoDropDownList, kendoGrid, kendoDatePicker). Les méthodes des widgets mobiles sont préfixées par mobile pour éviter toute confusion avec les autres (kendoMobileTabStrip, kendoMobileButton, kendoMobileListView).

Lorsque vous utilisez Kendo UI dans vos pages Web, il suffit d'appeler le widget Kendo correspondant. Par exemple, la création d'un widget « DatePicker » dans la syntaxe Razor MVC ressemble à ceci:

@(Html.Kendo().DatePickerFor(m => m.DateNaissance).Deferred())

Je tiens également à préciser que, même si la vue (View) génère la page web finale envoyée au navigateur de l'utilisateur, elle est traitée en première sur le serveur. La syntaxe Razor (tout ce qui commence par @) n’apparaît jamais dans le balisage de la page, elle est traitée côté serveur afin de générer le code JavaScript final. Cela signifie que les méthodes d'extension Kendo sont vraiment un raccourci côté serveur.

@Html.Kendo().DeferredScripts()

L’appel des widgets Kendo UI peut être différé après le chargement de toutes les balises <script> de la page avec la méthode Deferred().

En effet, le flux de travail normal est l'insertion automatique d'une balise <script>, qui contient le code JavaScript nécessaire pour configurer l'élément comme un widget Kendo, juste après le code html du widget Kendo.

Le report de la génération du JavaScript des widgets kendo est fortement recommandé pour éviter l'erreur "jQuery est indisponible ou indéfini" en chargeant d'abord les fonctions jQuery des widgets kendo avant les scripts correspondants. Pour cela, vous devez appeler la fonction DeferredScripts(). La convention standard pour les balises <script> est de les ajouter à la fin de la balise <body >, donc c'est l'endroit recommandé pour appeler la fonction DeferredScripts.

Nous allons voir dans la partie 2 un exemple d’utilisation complet afin de présenter la validation de données, et montrer la notion des scripts différés des widgets Kendo.

Laisser un commentaire

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

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.