Composant personnalisé de Kendo UI Builder pour Angular et AngularJS

Kendo UI Builder est livré avec de nombreux composants, mais vous pouvez créer vos propres personnalisations. Lisez la suite pour apprendre comment faire cela dans Angular et AngularJS.

Dans Kendo UI Builder un composant est un widget que vous pouvez placer sur une vue vide. Kendo UI Builder est déjà livré avec de nombreux composants prêts à l'emploi, ce qui en fait un environnement de développement très riche (par exemple, graphiques, calendriers, etc.). Cependant, il peut arriver que vous souhaitiez créer des composants personnalisés pour les réutiliser dans vos projets et applications Angular ou AngularJS, ou même dans toute votre organisation.

Comme nous l'avons fait pour apprendre les bases des vues personnalisées nous explorerons le composant le plus simple possible sous la forme d'un composant personnalisé "Hello World".

Pour suivre, téléchargez le projet custom-hello-world-comp projet zip depuis github ou clonez ce repository

Copiez le dossier " custom-hello- world-comp "dans le dossier" template / components "de votre application cible et redémarrez Kendo UI Builder. Cliquez sur "Ajouter une vue", sélectionnez une vue vide et vous devriez maintenant voir le composant personnalisé comme dans cette capture d'écran (faites défiler vers le bas du panneau de composant ou recherchez custom):

Lors de la construction d'un composant personnalisé, trois éléments principaux sont à construire:

1. Fichier de définition de composant personnalisé: Un fichier JSON décrivant le composant personnalisé à Kendo UI Builder
2. dans Kendo UI Builder.
       
   1. L'icône affichée dans la palette de sélection des composants
   2. L'interface utilisateur du composant telle qu'elle s'affiche lors de la conception

       

3. Comment le composant se comporte et se comporte lors de l'exécution de la structure cible spécifique (par exemple, AngularJS ou Angular 5); les tâches dont nous prenons généralement soin comprennent:
       
   1. Présentation de l'interface utilisateur
   2. Réaction aux événements
   3. Interaction avec le modèle de données

Voici une capture d'écran illustrant où certains de ces éléments apparaissent dans le concepteur:

Fichier de définition de composant personnalisé

Ouvrir le fichier custom-hello-world-comp .json.

Ce fichier contient un ensemble de champs. sont:

1. Le nom tel qu'il apparaît dans le panneau des composants ainsi que dans le panneau de propriétés
2. La liste des propriétés à afficher dans le panneau de droite du concepteur – dans notre cas, nous avons défini deux propriétés: id et salutation

La propriété id est requise et permet de garantir que plusieurs instances du composant peuvent exister sur la même page.

Kendo UI Builder s'assurera que pas deux composants sur la même vue ont le même id. Voici ce que vous obtiendriez si vous aviez des ID en double:

Lorsque nous arrivons à la partie exécution, nous verrons comment l'identifiant unique est également utilisé pour définir, dans le modèle, des propriétés spécifiques à

Éléments de conception

Ils se trouvent dans le sous-répertoire " design-time." Dans ce dossier nous avons:

1. Une icône, utilisée dans la palette des composants (panneau de gauche)
2. options.json.ejs: il est utilisé pour augmenter le modèle avec des propriétés supplémentaires non définies dans le fichier de définition, il s'agit de propriétés que l'utilisateur ne modifie pas dans le panneau des propriétés. cas, il s'agit d'un littéral d'objet vide car nous n'avons pas de propriétés supplémentaires à fournir.Voir ce blog pour plus de détails sur l'augmentation des modèles
3. template.html.ejs: c'est là que nous programmons le HTML définir le rendu de notre composant personnalisé dans le panneau principal de Kendo UI Builder, qui est paramétré avec des propriétés de métadonnées.

Les fichiers .ejs sont fichiers de modèle. 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 un composant personnalisé, vous fournissez simplement une représentation du widget qui se rapproche de la vue d'exécution. Cependant, vous n'avez pas besoin d'implémenter des 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 de conception est de vous permettre de concentrer votre temps et votre énergie sur le rendu du composant d'exécution

Eléments d'exécution

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

Note: Kendo UI Builder version 3 sera disponible plus tard en mai

AngularJS

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

Options.json.ejs : C'est ici que nous définissons quelles propriétés du composant seront ajoutées au modèle dans le contrôleur de la vue vide auquel le composant est attaché

Les propriétés sont ajoutées au tableau $ components indexé par l'identifiant unique du composant. Nous voyons maintenant l'importance de la propriété id dans le fichier de définition du composant. Par exemple, pour deux instances d'un composant hello world dans la même vue vide mon controller.js contient:

directive.html.ejs : Ce fichier contient le code HTML qui sera rendu à l'exécution. Les éléments définis dans options.json.ejs sont disponibles à partir du modèle de composant

Dans ce modèle EJS, nous utilisons la propriété id pour accéder au modèle d'instance spécifique et à partir de là nous accédons à la propriété de message d'accueil. Par exemple:

Une propriété passe du fichier de définition au fichier options.json, puis au contrôleur de vue vide et finalement au composant d'exécution.

Angulaire

Les fichiers se trouvent dans le sous-répertoire " angulaire ":

config.json.ejs : C'est ici que nous définissons les propriétés d'affichage seront ajoutées aux éléments composants de la variable $ config

Les propriétés sont ajoutées au tableau components indexées par l'identifiant unique du composant. Là encore, nous voyons l'importance de la propriété id dans le fichier de définition du composant. Par exemple, pour deux instances d'un composant hello world dans la même vue vide, mon fichier base.components.ts contient:

Vous trouvera ce fichier dans votre code généré sous le sous-dossier view. Par exemple, ma vue est appelée hw-comp sous le module custom-components . C'est là que se trouve le fichier: app src app modules composants-personnalisés hw-comp hw-comp.view.base.component.ts

template.html.ejs : Ce fichier contient le code HTML qui sera rendu lors de l'exécution. Les éléments définis dans config.json.ejs sont disponibles à partir du modèle de composant.

Dans ce modèle EJS, nous utilisons la propriété id pour accéder au modèle d'instance spécifique et, à partir de là, nous accédons à la propriété greeting . Par exemple:


Conclusion

Comme vous pouvez le constater, la création d'un composant personnalisé présente des similitudes avec une vue personnalisée. Nous devons prendre en compte le fait que plusieurs instances du composant peuvent exister dans la même vue. C'est la raison principale pour avoir une propriété id dans le fichier de définition.

En outre, un composant peut interagir avec d'autres composants en utilisant la propriété model. Par exemple, un composant métrique indiquant la température de la pièce sélectionnée dans un composant de zone de liste déroulante sur la même page. Dans le prochain article de blog, nous verrons comment créer de tels composants. Restez à l'écoute. 1945

Si vous avez sauté dans cette série au milieu et que vous voulez commencer depuis le début, vous pouvez trouver les articles précédents:

1. Introduction aux modèles de Kendo UI Builder [19659009] Dans les coulisses des modèles Kendo UI Builder
2. Traitement des événements dans les modèles Kendo UI Builder
3. Amélioration des modèles dans les modèles Kendo UI Builder