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):
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:
this
. $ Components [
'customhelloworldcomp1'
] = {
[19659002]
"salutation"
:
"Hi1"
};
[19659002] cette
. $ Composants [
'customhelloworldcomp2'
] = {
"salutation"
:
"Hi2"
};
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:
<
span
>
{{vm. $ Components. .greeting}} Monde
</
trav
>
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:
public $ config: any = {
composantes: {
"message d'accueil "
:
" Salutations 1 "
},
customhelloworldcomp1: {
"salutation"
:
"Salutations 2"
}
}
.
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:
<
span
>
{{$ config.components. .greeting}} Monde
</
span
>
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:
Source link