Fermer

avril 27, 2018

Traitement des événements dans les modèles Kendo UI Builder2 minutes de lecture

Event Processing in Kendo UI Builder Templates_870x450


Apprenez à implémenter facilement la gestion des événements sur les vues personnalisées dans Kendo UI Builder ou Kendo UI et à traiter les événements de clic.

Dans cet article, nous allons apprendre à implémenter la gestion des événements sur les vues personnalisées. Nous allons augmenter la vue personnalisée de hello world à partir du premier article de blog . Nous traiterons les événements click sur n'importe quelle partie du conteneur salutation hello world (a

).

Comme dans le premier blog, nous allons examiner les trois éléments principaux que nous devons programmer:

  1. Le fichier de définition d'affichage personnalisé
  2. Les éléments au moment de la conception
  3. Les éléments de l'exécution

Pour continuer, téléchargez le fichier .zip des exemples de modèles à partir de GitHub ou clonez le dépôt ; ouvrez le dossier custom-hello-world-v2 et suivez les mêmes étapes décrites dans ce post pour installer ce modèle dans votre application cible

Custom View Definition File

Nous spécifions au concepteur que nous voulons un gestionnaire d'événements unique pour le panneau des propriétés de la vue. Cela permet à l'utilisateur de spécifier le nom de la fonction qui sera appelée lors du clic.

Voici l'extrait pertinent du fichier custom-hello-world-v2.json:

01. "événements" : {

02. [19659015] "type" : "objet"

03. "titre" : "Evénement" [19659013]

04. "description" : "Spécifie tous les événements disponibles pour le hello world div"

05. "ordre" : 3,

06. "propriétés" : {

07. "onClick" : {

08. "type" : "chaîne de caractères"

09. "titre" : "Cliqué"

10. "description" : "Cet événement res quand bonjour le monde clique sur "

11. " par défaut ": " onClick "

12. "ordre" : 1

13. }

14. }

15. }

Et voici comment il rend dans le concepteur:

 Propriétés de l'événement "title = "Propriétés de l'événement" data-openoriginalimageonclick = "true" /> </a data-recalc-dims=

Comme expliqué dans le premier article, un objet avec sous-structure est représenté avec des panneaux extensibles / pliables, et nous en voyons un exemple ici.

Pour rappel, l'utilisateur doit implémenter la fonction spécifiée dans le panneau de propriétés de la vue dans le fichier de contrôleur public (pour AngularJS) ou dans le fichier de composant public (pour Angular 5.)

KUIB ne transmet pas les événements de souris ou de clavier à la vue de conception. Donc, nous n'avons pas besoin d'implémenter quoi que ce soit pour l'événement onClick pour la vue design

Run-Time Elements

Les choses ici sont relativement simples:

Dans template.html.ejs:

l'utilisateur a défini un gestionnaire de clic dans la propriété view, nous ajoutons le gestionnaire à div. Notez comment nous utilisons les expressions JavaScript dans EJS pour tester la présence du gestionnaire d'événements.

Pour AngularJS, nous utilisons la syntaxe ng-click = "appel de fonction".

Pour Angular 5, nous use (event) = syntaxe "appel de fonction". Plus précisément, pour un événement click, nous utilisons (click) = "appel de fonction"

A ce stade et en pratique, vous n'avez rien d'autre à faire car il est de la responsabilité de l'utilisateur d'ajouter la fonction implémentation dans la classe publique pour le contrôleur (AngularJS) ou pour le composant (Angular 5). Cependant, pour rendre l'échantillon autonome et travailler hors de la boîte, nous avons ajouté une implémentation par défaut pour onClick .

Ouvrez soit custom-hello-world-v2 / angularjs / controller.js. ejs ou custom-hello-monde-v2 / angular / __ name __. component.html.ejs et notez comment, avec la syntaxe EJS, nous définissons la fonction en utilisant le nom du gestionnaire d'événements tel que défini par l'utilisateur dans la propriété view: [19659081] <% si (events.onClick) {%>

2. <%- events.onClick %> (e) {

3. alert (`Dans par défaut implémentation pour <%- events.onClick %>

4. - Vous devriez remplacer cette fonction dans la classe de contrôleur public. »)

5. }

6. <% } %>

Et voici ce que vous devriez voir en cliquant sur la div:

 Durée d'exécution "title =" Durée d'exécution "data-openoriginalimageonclick =" true "/> </a data-recalc-dims= [19659003] Maintenant, si vous avez cloné le dépôt (ou obtenu un .zip), vous devez créer une application contenant une vue personnalisée hello world 2. Une fois l'application générée, vous pouvez créer la fonction d'événement on click dans le fichier public js (pour AngularJS) ou angulaire composant le fichier ts (pour Angular 5).

L'emplacement du fichier dépend des noms de module et de vue Par exemple, dans mon application de test, j'ai un module appelé custom-views et la vue contenant le La vue personnalisée de hello world 2 s'appelle hw2 Etant donné ces noms, l'emplacement et le nom des fichiers sont:

En conclusion, comme vous l'avez vu dans cet article, définir une vue personnalisée wi La gestion des événements ne pose pas de difficultés particulières.

Dans le prochain article (restez à l'écoute), nous verrons comment nous pouvons augmenter les modèles utilisés au moment du design et au moment de l'exécution.



Source link

0 Partages