Modèles personnalisés de Kendo UI Builder

Apprenez à moderniser vos applications Web avec Kendo UI Builder. Nous explorons des modèles, des vues et des composants personnalisés pour AngularJS et Angular

Kendo UI Builder 2.0 notre dernier outil pour vous aider à concevoir des expériences Web élégantes et réactives (pour OpenEdge et le web autonome apps), introduit le concept de modèles, ou en d'autres termes, la possibilité de créer vos propres vues personnalisées et des composants personnalisés. L'installation regroupe plusieurs exemples que vous pouvez personnaliser. Cependant, ceux-ci sont assez complexes et ne sont pas propices à apprendre à les créer à partir de zéro.

Ce blog est le premier d'une série où nous allons explorer comment créer des vues personnalisées et des composants personnalisés. 19659005] Nous allons commencer avec des vues personnalisées. Comme il y a quelques éléments à comprendre, nous allons explorer la vue la plus simple possible sous la forme d'une vue personnalisée "Hello World". Cela nous aidera à comprendre la mécanique globale de tous les éléments en place avec des dépendances minimales et sans complications supplémentaires. De plus, cela constituera un modèle de travail à partir duquel commencer à écrire les futurs modèles

Pour continuer, téléchargez le fichier zip de github ou clonez le dépôt .

Copiez le dossier " custom-hello-world-v1 "dans le dossier" template / views "de votre application cible et redémarrez Kendo UI Builder. Cliquez sur "Ajouter une vue" et vous devriez maintenant voir la vue personnalisée Hello World V1 comme dans cette capture d'écran:

http://json-schema.org/specification.html

La liste des propriétés peut être un arbre. Kendo UI Builder rendra la même structure hiérarchique que celle implémentée dans le champ " properties ."

Un objet avec sous-structure sera représenté avec des panneaux extensibles / pliables.

Le tableau requis est laissé vide car nous n'imposons aucune propriété.

Eléments au moment du design

Ceux-ci se trouvent dans le sous-répertoire " design-time ." Dans ce répertoire nous avons: [19659011] Deux icônes: une grande, utilisée dans la boîte de dialogue de création de vue et une petite, utilisée dans le panneau latéral gauche répertoriant toutes les vues du module sélectionné.

options.json.ejs: elle est utilisée pour augmenter le modèle avec des propriétés supplémentaires non définies dans le fichier de définition. Ce sont des propriétés que l'utilisateur ne modifie pas dans le panneau des propriétés. Dans notre cas, il s'agit d'un littéral d'objet vide car nous n'avons pas de propriétés supplémentaires à fournir (plus tard, dans custom-hello-world-v3, nous explorerons cette fonctionnalité.)

template.html.ejs: c'est là que nous programmons HTML définissant le rendu de notre vue personnalisée dans le panneau principal de Kendo UI Builder.Il est paramétré avec des propriétés de métadonnées.

Les fichiers EJS sont des fichiers modèles. Ils sont exécutés par Kendo UI Builder pour remplacer les balises de gabarit par leur valeur réelle. Voir http://ejs.co/ pour plus d'informations.

Lorsque vous programmez une vue personnalisée, vous fournissez simplement une représentation du widget proche de la vue d'exécution, mais vous n'avez pas à implémenter d'interactions utilisateur car Kendo UI Builder ne transmet pas les événements de souris ou de clavier la vue au moment du design.

L'objectif est de vous permettre de concentrer votre temps et votre énergie sur la vue d'exécution.

Le sous-répertoire " generator " contient un fichier appelé index.js. Ce fichier sera exécuté avec le noeud. Il contient un point d'entrée appelé augmentModel . Dans un prochain article, nous étudierons un exemple où nous étendons le modèle, mais pour l'instant nous n'avons pas besoin de programmer quoi que ce soit dans cette fonction

Runtime Elements

Le contenu des fichiers d'exécution dépend du framework cible. est utilisé. Dans Kendo UI Builder 2.x, nous supportons le framework AngularJS. À partir de la version 3, nous prendrons en charge les frameworks AngularJS et Angular 5.

Note: Kendo UI Builder 3.0 devrait être disponible vers la fin du mois de mai 2018.

Pour AngularJS: Les fichiers sont dans le sous-répertoire " angularjs ":

Options.json.ejs: C'est ici que nous définissons les propriétés d'affichage qui seront ajoutées au modèle dans le contrôleur.

Le modèle est ajouté à la variable vm. $ model (le modèle de vue) dans le contrôleur (voir controller.js.ejs).

template.html.ejs: Il s'agit du fichier contenant le code HTML qui sera rendu lors de l'exécution. Les éléments définis dans options.json.ejs sont disponibles dans le modèle.

Dans ce modèle, nous pouvons utiliser des expressions AngularJS, par exemple, {{vm. $ Model.greeting}} pour accéder à la propriété "greeting"

Une propriété passe du fichier de définition au fichier options.json, puis au contrôleur et enfin à la vue d'exécution. Pour aider à comprendre et suivre comment il se déplace de chaque fichier, j'ai nommé la propriété de titre:

• "titleX": dans le fichier de définition d'affichage personnalisé (custom-hello-monde-v1 / custom-hello-world-v1.json)
• "titleY": dans custom-hello-world-v1 / angularjs / options.json.ejs

Note: ne pas confondre avec "title", qui est l'étiquette du champ dans le panneau de propriétés view.

Generator / index.js: ce fichier est invoqué lors de la génération du code source de la vue. Comme au moment de la conception, c'est là que nous pouvons augmenter le modèle. Mais nous pouvons également fournir des traductions pour des objets distincts en utilisant la fonction getTranslation. Dans cette fonction, nous retournons juste un objet littéral avec l'ensemble d'éléments à inclure dans le fichier de traduction.

Pour Angular: Les fichiers sont dans le sous-répertoire " angular "

• Config.json.ejs: C'est ici que nous définissons les propriétés de la vue qui seront ajoutées au modèle.
• __ name__view.base.component.ts.ejs: Ceci est le fichier Angular 5 (modèle avec ejs)
• __ name__ .component.html.ejs: Ceci est le fichier de vue Angular 5.

À ce stade, vous devriez être en mesure d'ajouter votre propre propriété. Dans le prochain billet de blog nous allons explorer ce qui se passe dans les coulisses pour compléter notre compréhension.

Lire la suite