Création de composants Kendo UI Builder à partir de composants angulaires

Apprenez à créer des composants personnalisés à partir de composants angulaires dans Kendo UI Builder, ce qui vous permet de tirer parti des outils UI riches tout en développant votre propre code.

Dans mon précédent nous avons vu comment créer un composant personnalisé Kendo UI Builder en utilisant du code HTML brut pour le rendu. Parfois, vous voudrez créer un composant personnalisé qui réutilise un composant Angular, probablement parce que vous avez du code existant que vous voulez utiliser ou que vous voulez utiliser un composant tiers.

Après cela, le composant peut participer aux phases de conception et de génération de code de Kendo UI Builder. Les avantages sont:

• Vous pouvez concevoir, avec pointer et cliquer, des vues qui incluent votre composant
• Le composant peut participer aux vues sensibles
• Il peut interagir avec la source de données et le modèle de données définis pour la vue

En outre, vous pouvez définir des propriétés pour faire de la configuration du composant une solution complète sans code.

Dans cet article, nous verrons comment intégrer un composant angulaire "Hello World" très simple dans un éditeur d'interface utilisateur Kendo. composant personnalisé. Le composant angulaire acceptera une entrée appelée "salutation" et le rendra comme préfixe à la chaîne World. Ensuite, nous allons créer un composant personnalisé Kendo UI Builder qui encapsule le composant Angular. Le composant personnalisé a une propriété d'heure de conception, "greeting", qui sera transmise automatiquement au composant Angular.

Pour suivre, téléchargez l'exemple de fichier zip de github ou clone ce dépôt ; ouvrez le dossier composants / custom-hello-world-ang-comp et suivez les mêmes étapes décrites dans ce post pour installer ce modèle dans votre application cible. L'exemple est spécifique au cadre angulaire (il ne s'applique pas à AngularJS).

Le composant angulaire Hello World

Le composant angulaire se trouve dans le dossier Github : components / custom -hello-monde-ang-comp / customcomp / hello-world.component .

Il a été généré avec l'outil CLI Angular en utilisant la commande:

Voir le site d'Angular pour en savoir plus sur l'installation de la CLI, pour la commande generate pour en savoir plus sur ce sujet

Les composants angulaires sont les blocs de construction fondamentaux de toute application angulaire. Ils sont composés de:

• Un décorateur de composants
• Un contrôleur
• Un modèle

Le décorateur et le contrôleur spécifient, entre autres choses, comment le composant sera appelé. Le contrôleur est défini dans le fichier composants / custom-hello-mond-comp-customcomp / hello-world.component / hello-world.component.ts

Le sélecteur spécifie le nom de tag que nous utiliserons dans notre code HTML pour créer une instance du composant.

Ceci spécifie que notre composant accepte une entrée nommée greeting. Vous pouvez lire ceci pour plus de détails sur les interactions de composants .

Par conséquent, le composant peut être appelé comme ceci:

< custom-hello-world greeting = "hello "> </ custom-hello-world >

Le contrôleur spécifie également ce qui est rendu via l'attribut templateUrl. Le modèle est défini dans composants custom-hello-mond-comp customcomp hello-world.component hello-world.component.html

Nous créons simplement un monde span et prefix avec le contenu de l'entrée de salutation à l'exécution.

Ceci sort simplement: [19659054] hello world

Pour plus de détails sur les composants angulaires, consultez la documentation .

Maintenant que nous savons ce que fait notre composant Angular, il est temps de voir comment l'intégrer dans un composant personnalisé Kendo UI Builder

Fichier de définition de vue personnalisée

Ouvrir le fichier: components / custom- hello-world-ang-comp / custom-hello-monde-ang-comp.json

Vous reconnaîtrez le contenu de ce fichier car il est presque exactement le même que celui que nous avons défini dans notre introduction aux composants personnalisés de Kendo UI Builder .

Les seules différences sont l'identifiant et le nom du composant. Ainsi, du point de vue de Kendo UI Builder, ces types de composants sont définis de la même manière que tous les autres composants.

Design-Time

De même, lorsque vous ouvrez le dossier de conception vous remarquerez que le contenu du fichier est identique.

Cela n'est pas surprenant. Après tout, le point principal du concepteur de Kendo UI Builder est de concevoir des applications, des vues et des composants dans un mode agnostique de la cible.

Dans l'ensemble, c'est une bonne nouvelle: vous n'avez pas besoin d'apprendre quelque chose de nouveau et spécifique pour définir le composant et le rendu au moment du design.

Run-Time

Maintenant, nous entrons dans le cœur de ce blog: comment notre composant personnalisé enveloppe le composant Angular et lui transmet des données.

Tout d'abord, nous devons transmettre la propriété de salutation que l'utilisateur entre dans le panneau de propriétés au contrôleur de composant angulaire.

Ceci est réalisé avec le fichier config.json.ejs.

Ceci définit efficacement les propriétés des composants ajouter des éléments aux composants de la variable $ config dans le code généré

En tant que rappel de l'article précédent ces propriétés sont indexées par le composant ID unique pour garantir que nous pouvons utiliser plusieurs instances par vue vide.

Voici un exemple de mon code généré lorsque j'utilise deux instances du composant dans la même vue vide:

Ce fichier se trouve dans (pour une vue vide appelée hw-ang-comp) app src app modules custom-components hw-ang-comp hw-ang-comp.view.base.component.ts

Deuxièmement, nous devons définir le modèle. Voir composants / custom-hello-world-ang-comp / angular / template.html.ejs:

Ici, nous invoquons le composant angulaire et transmettons le paramètre d'entrée. Notez comment nous utilisons la propriété id pour accéder à l'instance spécifique de la propriété de message d'accueil.

Étapes à suivre pour utiliser l'exemple

Voici les étapes à suivre:

1. Créer une application avec Kendo UI Builder
2. Quittez Kendo UI Builder, copiez le composant personnalisé dans le répertoire templates components Et redémarrez
3. Ajoutez une vue vide – vous devriez voir le composant personnalisé au bas de la palette de composants, ou tapez bonjour dans la boîte de recherche

   

4. Ajoutez quelques instances de ce composant et modifiez la propriété d'accueil pour chaque
5. Générer l'application

Si vous utilisiez l'exemple tel quel, vous obtiendriez une erreur indiquant que vous êtes manque le composant angulaire A la console vous obtenez:

ng: ///HWCompViewModule/HWCompViewBaseComponent.html@19: 20

'custom-hello-world' n'est pas un élément connu

Donc, la dernière étape consiste à rendre disponible le composant angulaire à l'application:

1. Copiez le dossier customcomp dans app src app shared
2. Enregistrez le composant Angular dans le système Angular Module. Kendo UI Builder a prévu pour cela un fichier appelé shared.module.ts. Ce contenu de fichier est conservé chaque fois que l'application est générée.
       
   1. Pour enregistrer notre composant, nous ajoutons le code suivant à app src app shared shared.module.ts:
              

      import {HelloWorldComponent} à partir de './ customcomp / hello-world.component / hello-world.component' ;

      config.declarations.push (HelloWorldComponent);

      config.exports .push (HelloWorldComponent);

              

              

       

Maintenant, à partir de Kendo UI Builder, cliquez sur «Démarrer le serveur» et «Ouvrir dans le navigateur». Vous devriez voir la vue avec chaque instance configurée du composant

Conclusion

Comme vous pouvez le voir, l'encapsulation d'un composant Angular dans un composant Kendo UI Builder est facile et offre de nombreux avantages: [19659138] Pointage et clic / glisser-déposer des vues incluant des composants

Vous pouvez maintenant fournir un outil de conception à vos équipes de développement qui est non seulement livré avec une très grande suite de composants et de vues prédéfinies, mais aussi votre code interne ainsi que des composants tiers

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

1. Introduction au Kendo UI Builder T
2. Dans les coulisses de Kendo UI Builder Templates
3. Traitement des événements dans les modèles de Kendo UI Builder
4. Augmentation des modèles dans les modèles de Kendo UI Builder
5.     

   Introduction aux composants personnalisés pour le constructeur d'UI Kendo