Dans les coulisses des modèles de Kendo UI Builder

Nous verrons dans les coulisses pour mieux comprendre les modèles Kendo UI Builder, qui vous aident à créer de belles expériences web OpenEdge dans Angular.

Dans mon premier post sur UI Kendo Builder modèles, nous avons appris sur les éléments distincts nécessaires pour composer une vue personnalisée au moment du design et au moment de l'exécution. Dans ce blog, nous allons explorer ce qui se passe dans les coulisses afin d'améliorer notre compréhension; De plus, nous apprendrons à utiliser le HTML dans les propriétés de vue et à soutenir l'internationalisation.

Rappel: Si vous ne l'avez pas fait en lisant le premier post vous pouvez télécharger l'exemple custom-hello-world-v1 de ce dépôt github à suivre. 19659004] Fichier de métadonnées de module

Lorsque nous ajoutons la vue personnalisée au module, une entrée est créée dans le fichier de métadonnées du module.

Vous pouvez vérifier cela en ouvrant le fichier du module dans meta modules. Par exemple, pour un module appelé "HelloWorld", nous ouvrons meta modules HelloWorld.json.

Dans la propriété children nous trouvons des salutations et titleX. Notez également comment viewType est affecté à custom-hello-world-v1

Voici un extrait:

Processus de conception

Voici les étapes qui a lieu au moment de la conception (lors de la sélection de la vue dans Kendo UI Builder):

1. Le fichier de définition (templates views custom-hello-world-v1 custom-hello-world-v1.json) est validé en utilisant JSON Schema et lecture dans une représentation en mémoire du modèle
2. Un modèle en mémoire est créé en utilisant les valeurs de meta modules HelloWorld.json.
3. Le modèle est augmenté en appelant augmentModel depuis custom-hello- world-v1 design-time generator index.js (dans notre cas, nous n'avons pas augmenté le modèle avec une propriété).
4. design-time options.json.ejs est résolu en utilisant un modèle de mémoire fusionné et un scope est créé pour résoudre les expressions ({{myVariable}}) dans design template.html.
5. Le modèle de conception (design-time template.html.ejs) est compilé à l'aide de ce modèle de mémoire fusionné c a été ajouté à la troisième étape en tant que paramètre d'entrée et la portée créée à l'étape quatre pour résoudre {{variables}} .Cela produit une chaîne contenant le code HTML pour la vue au moment du design.
6. La chaîne HTML est insérée dans la conception panneau dans Kendo UI Builder

Voici une représentation graphique (opérations en italique à gauche et résultats à droite):

Diagramme de processus de conception

Rappel: Kendo UI Builder ne transmet pas les événements de souris ou de clavier à la vue de conception. Ainsi, lors de la conception de votre vue, vous n'avez pas à vous soucier des interactions de l'utilisateur.

Génération du processus d'exécution

Lorsque nous cliquons sur le bouton générer, un processus similaire est suivi. La différence principale est que la sortie n'est pas rendue en HTML dans Kendo UI Builder mais est sauvegardée sur le système de fichiers dans le sous-répertoire app / src, et bien sûr, la sortie dépend du framework cible.

Diagramme de processus d'exécution

Utilisation de HTML dans Propriétés de vue

Dans le précédent article de blog nous utilisions des chaînes simples mais que se passe-t-il si nous voulons utiliser une chaîne HTML qui contient des balises HTML, des entités HTML ainsi que des guillemets simples et doubles, par exemple: & nbsp; Bonjour moi

Ceci est réalisé comme suit:

1. Nous ne voulons pas que les balises HTML soient rendues explicitement mais plutôt que nous voulions qu'elles soient interprétées comme du HTML.
   Dans le temple du design (template.html.ejs), nous utilisons une syntaxe EJS différente pour la sortie salutation contre titre:
   1. <%- greeting %>: Cela n'échappera pas HTML. pour définir cette propriété avec des balises HTML.
   2. <%= titleX %> va échapper HTML.

       

2. Comme la chaîne de salutation sera insérée dans le code généré, nous devons nous assurer que les guillemets, par exemple dans class = "fa fa-thumbs-up" ne ferment pas le Javascript ou chaîne typographique trop tôt.
   Dans les deux custom-hello-world-v1 angularjs options.json.ejs et custom-hello-monde-v1 angular __ nom __. Base .component.ts.ejs nous devons échapper les guillemets avec ".

   Voir ces lignes de code:
       

   1. Dans options.json.ejs: "salutation": "<%- greeting.replace(/"/g, '\"') %>"
   2. Dans __name __. Base.component.ts.ejs:
      public salutation: string = "<%- view.greeting.replace(/"/g, '\"'); %>";

       

Note sur le traitement EJS : <%- greeting %> affiche la valeur de salutation. <%- greeting.replace(/"/g, '\"') %> appelle la fonction JavaScript replace sur la valeur de chaîne de salutation avant de la sortir. Dans EJS, nous pouvons utiliser les expressions JavaScript là où nous en avons besoin.

Pour essayer, dans KUIB, entrez: <i class = "fa fa-thumbs-up "> & nbsp; Bonjour pour la propriété d'accueil.

Vous devriez voir:

Note: L'icône du pouce vers le haut est rendue en utilisant police awesome, que Kendo UI Builder regroupe automatiquement. font awesome gallery .

La nécessité d'échapper les guillemets doubles ne se limite pas à l'utilisation de chaînes HTML.Toute propriété de chaîne peut potentiellement les contenir.Donc, il est recommandé d'échapper les guillemets doubles pour toutes les propriétés de la chaîne. ce que nous faisons avec la propriété title

Traduction

generator / index.js a un point d'entrée getTranslation, ce qui nous permet de spécifier les propriétés à ajouter au fichier de traduction.

Lorsque nous spécifions:

const traduction = {

label: view.label || view.name,

titre: view.titleX,

message d'accueil: view.greeting

};

Lorsque nous utilisons le Générer la fonction, Kendo UI Builder crée trois entrées dans le fichier de traduction par défaut (app src translations translations.default.json).

Remarquez comment nous spécifions titleX pour obtenir la valeur de propriété pour title. En effet, la valeur est résolue à partir du nom de la propriété dans le fichier de définition.

Toutes les paires clé / valeur retournées sont créées, dans le fichier de traduction par défaut, sous la clé de vue spécifique illustrée dans l'image ci-dessous:

Conclusion

Ce blog a pris connaissance de ce qui se passe dans les coulisses, ce qui devrait aider à résoudre les problèmes. les diagrammes d'exécution ou de conception pour isoler à quelle étape du processus le problème peut se trouver.

Dans un prochain post (qui couvrira un prochain échantillon custom-hello-world-v3) nous mettrons cette connaissance en pratique en augmentant le modèle utilisé au moment de la conception et au moment de l'exécution.

Mais avant d'atteindre ce point, la prochaine étape (couvrant l'exemple custom-hello-world-v2) est de se pencher sur la façon de gérer les événements. Restez à l'écoute.