Augmentation des modèles dans les modèles Kendo UI Builder

Apprenez à augmenter, transformer et ajouter des propriétés à vos modèles Kendo UI Builder dans Angular.

Dans les articles précédents de cette série (vous pouvez trouver le premier article ici ), nous avons défini et utilisé voir propriétés dans Kendo UI Builder . Mais il y a des moments où nous voulons ajouter dynamiquement de nouvelles propriétés pour le rendu au moment de la conception et au moment de l'exécution. Ou, plus communément, nous pouvons avoir besoin de transformer une propriété existante. Par exemple, nous pourrions convertir une propriété conviviale en une valeur plus appropriée pour le codage.

Dans cet article, pour illustrer comment augmenter les modèles utilisés au moment de la conception et de l'exécution, nous allons ajouter deux vues propriétés à l'échantillon de hello world que nous avons développé dans le blog présentant des modèles . Ces propriétés d'affichage ne seront pas visibles dans le panneau des propriétés de la vue. par conséquent, l'utilisateur ne sera pas en mesure de les modifier.

Le premier s'appelle Version et est codé en dur dans la vue personnalisée. Il contiendra le numéro de version de notre vue personnalisée.

Le second est appelé generatedAt et est généré dynamiquement lorsque la vue est rendue dans le concepteur. Il contiendra la date à laquelle le générateur de code a fonctionné.

De plus, nous augmenterons la salutation de la propriété d'affichage existante : nous la préfixerons avec une icône de police de caractères de globe.

Pour suivre, téléchargez le fichier .zip de modèle GitHub ou clonez le référentiel ; ouvrez le dossier custom-hello-world-v3 et suivez les mêmes étapes décrites dans ce post pour installer ce modèle dans votre application cible

Design-Time Model

Le modèle peut être augmenté en deux places:

1. options.json.ejs : pour les propriétés statiques
2. generator / index.js fonction augmentModel : ici, nous pouvons ajouter à la fois les propriétés statiques et les propriétés générées pendant Exécution JavaScript. L'exécution se produit à chaque fois que la vue au moment du design est affichée dans Kendo UI Builder.
   Puisque nous avons accès au modèle en mémoire, nous pouvons également modifier les propriétés existantes ou même supprimer certaines propriétés. , open custom-hello-monde-v3 / design-time / options.json.ejs

   Dans custom-hello-world-v1 nous avions laissé l'objet littéral vide mais dans custom-hello-world-v3, nous définissons une propriété appelée version et lui assigner une valeur String:

   Maintenant, ouvrez custom-hello-monde-v3 / design-time / generator / index.js d Vérifiez la fonction augmentModel. Il y a deux éléments d'intérêt:

   Numéro un, nous ajoutons la nouvelle propriété simplement en créant une propriété dans le littéral d'objet d'entrée inMemoryMetaModel:

   inMemoryMetaModel.generatedAt = new Date (). ToLocaleDateString ( "en-US" )

   Deuxièmement, nous augmentons la propriété d'accueil existante en pré-en attente d'une icône de police impressionnante:

   inMemoryMetaModel.greeting = '' [19659018] + inMemoryMetaModel.greeting;

   Si vous exécutez cet exemple, vérifiez la sortie de la console (la console à partir de laquelle vous avez démarré Kendo UI Builder). J'ai codé plusieurs instructions console.log dans la fonction augmentModel . Cela peut être utile pour déboguer l'état du modèle. Par exemple, nous avons la valeur de la propriété greeting lorsqu'elle est entrée et comme nous l'avons augmentée.

   La principale différence entre les options et l'index est que l'index est exécuté alors que les options sont simplement ajoutées au modèle .

   Si vous suivez une copie du code, vous devriez maintenant voir quelque chose comme ça dans Kendo UI Builder:

   

   Modèle d'exécution

   Au moment de l'exécution, nous avons des capacités très similaires:

   1. Pour les propriétés statiques, nous pouvons augmenter le fichier JSON:
          
      1. Pour AngularJS: le fichier s'appelle options.json.ejs .Les propriétés sont ajoutées au modèle $ dans le contrôleur de vue.
      2. Pour Angular: le fichier s'appelle config.json .ejs .Les propriétés sont ajoutées à la vue des variables EJS que nous pouvons utiliser pour définir les propriétés de TypeScript dans __name __. view.base.component.ts.ejs
   2. Pour le traitement des propriétés dynamiques: nous avons aussi la fonction augmentModel dans generator / index.js pour AngularJS et Angular.

   Indépendamment de la façon dont nous ajoutons des propriétés, nous les utilisons de la même manière que nous l'avons appris dans le premier article et comme si elles étaient ajoutées à la vue personnalisée. fichier de définition (custom-hello-world-v3.json).

   Pour voir comment cela est codé, vérifiez la fonction augmentModel dans ces fichiers:

   • personnalisé-hello-monde-v3 / angulaire /generator/index.js
   • personnalisé-hello-monde-v3 / angularjs /generator/index.js
         

   Et vérifiez les fichiers modèles pour savoir comment nous utilisons ces propriétés:

   • views / custom-hello-world-v3 / angulaire / __ name __. View.component.html.ejs (pour Angulaire)
   • views / custom-hello-monde-v3 / angularjs /template.html.ejs (pour AngularJS)

   Propriété HTML avec éditeur de code

   En bonus dans cet exemple, J'ai ajouté une propriété supplémentaire pour afficher l'éditeur HTML intégré.

   La propriété s'appelle html. La principale différence par rapport aux propriétés précédentes que nous avons vues jusqu'ici est son type d'éditeur. Cochez custom-hello-world-v3 / custom-hello-world-v3.json pour la dernière propriété. Le paramètre editorType est défini sur codeEditor.

   En spécifiant cet éditeur, la propriété s'affiche avec un bouton Edit comme dans cette capture d'écran:

   bouton Kendo UI Builder lancera un éditeur de code, essayez par exemple:

   < ul >

   < li > Article de liste 1 </ li >

   < li > Article de liste 2 </ li >

   </ ul > [19659021Vousdevriezvoircequisuit:

   

   Augmentation, transformation et ajout de propriétés

   Vous devez maintenant comprendre comment augmenter ou transformer des propriétés existantes et comment ajouter de nouvelles propriétés à t Il modèle dans Kendo UI Builder. Ces propriétés sont utilisées pour afficher la vue au moment de la conception et générer le code pour AngularJS et Angular. Les propriétés ajoutées ne sont pas modifiables à partir du panneau des propriétés de la vue. Ces techniques deviendront utiles lorsque nous développerons des vues plus complexes.

   Restez à l'écoute pour le prochain article, où nous explorerons comment créer des composants personnalisés.

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

   1. Introduction aux modèles de Kendo UI Builder
   2. Dans les coulisses des modèles de Kendo UI Builder
   3. Traitement des événements dans les modèles de générateur d'interface utilisateur de Kendo
   Le meilleur outil 2023 pour ta croissance Instagram !
   
   
   
   Source link

   Partager :

   • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
   • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

   Articles similaires