Componente personalizado de Kendo UI Builder para Angular y AngularJS

Kendo UI Builder viene con muchos componentes, pero puedes crear tus propias personalizaciones. Sigue leyendo para aprender a hacer esto en Angular y AngularJS.

En Kendo UI Builder un componente es un widget que puedes colocar en una vista vacía. Kendo UI Builder ya viene con muchos componentes listos para usar, lo que lo convierte en un entorno de desarrollo muy rico (por ejemplo, gráficos, calendarios, etc.). Sin embargo, puede haber ocasiones en las que quieras crear componentes personalizados para reutilizarlos en tus proyectos y aplicaciones de Angular o AngularJS, o incluso en toda tu organización.

Como hicimos para aprender los fundamentos de las vistas personalizadas vamos a explorar el componente más sencillo posible en forma de componente personalizado «Hola Mundo».

Para seguir, descarga el zip del proyecto custom-hello-world-comp desde github o clona este repositorio

Copia la carpeta «custom-hello-world-comp «a la carpeta «template / components «de tu aplicación de destino y reinicia Kendo UI Builder. Haga clic en «Añadir vista», seleccione una vista vacía y ahora debería ver el componente personalizado como en esta captura de pantalla (desplácese hasta la parte inferior del panel de componentes o busque personalizado):

Título de la selección de componentes = Selección de componentes / /pp Cuando se construye un componente personalizado, hay tres elementos principales a construir: /polli Archivo de definición del componente personalizado: Un archivo JSON que describe el componente personalizado a Kendo UI Builder /lili en Kendo UI Builder.br / /polli El icono que se muestra en la paleta de selección de componentes /lili La interfaz de usuario del componente tal y como se muestra durante el diseño /lip /ol/lili Cómo se comporta el componente y cómo se comporta cuando se ejecuta el marco de trabajo de destino específico (por ejemplo, AngularJS o Angular 5); las tareas de las que normalmente nos ocupamos incluyen:br / /polli Presentación de la UI /lili Respuesta a los eventos /lili Interacción con el modelo de datos /li/ol/li/olp Aquí hay una captura de pantalla que ilustra dónde aparecen algunos de estos elementos en el diseñador: /pp img src='un composant personnalisé, trois éléments principaux sont à construire: </p><ol><li> Fichier de définition de composant personnalisé: Un fichier JSON décrivant le composant personnalisé à Kendo UI Builder </li><li> dans Kendo UI Builder.<br /> </p><ol><li> L'icône affichée dans la palette de sélection des composants </li><li> L'interface utilisateur du composant telle qu'elle s'affiche lors de la conception </li><p> </ol></li><li> 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:<br /> </p><ol><li> Présentation de l'interface utilisateur </li><li> Réaction aux événements </li><li> Interaction avec le modèle de données </li></ol></li></ol><p> Voici une capture d'écran illustrant où certains de ces éléments apparaissent dans le concepteur: </p><p> <img src= este blog para más detalles sobre el aumento de la plantilla

  • Plantilla.html.ejs: aquí es donde programamos el renderizado de la definición de HTML de nuestro componente personalizado en el panel principal de Kendo UI Builder, que se configura con propiedades de metadatos.
  • Los archivos .ejs son archivos de plantilla. Son ejecutadas por Kendo UI Builder para reemplazar las etiquetas de la plantilla con sus valores reales. Consulte http://ejs.co/ para obtener más información.

    Cuando se programa un componente personalizado, simplemente se proporciona una representación del widget que se aproxima a la vista en tiempo de ejecución. Sin embargo, no necesitas implementar ninguna interacción con el usuario porque Kendo UI Builder no pasa eventos de ratón o teclado a la vista en tiempo de diseño.

    El objetivo del diseño es permitirle centrar su tiempo y energía en la renderización del componente de tiempo de ejecución

    Elementos de tiempo de ejecución

    El contenido de los archivos de tiempo de ejecución depende del marco de trabajo de destino. utilizado. En la versión 2.x de Kendo UI Builder, soportamos el framework AngularJS. A partir de la versión 3, soportaremos los frameworks AngularJS y Angular 5.

    Nota: la versión 3 de Kendo UI Builder estará disponible a finales de mayo

    AngularJS

    Los archivos están en el subdirectorio «angularjs»:

    Options.json.ejs: Aquí es donde definimos qué propiedades del componente se añadirán al modelo en el controlador de vista vacío al que se adjunta el componente

    Las propiedades se añaden al array $ components indexado por el identificador único del componente. Ahora vemos la importancia de la propiedad id en el archivo de definición del componente. Por ejemplo, para dos instancias de un componente hola mundo en la misma vista vacía mi controlador.js contiene:

    this . $ Components = { "salutation" : "Hi1"

    };

    cette

    . $ Composants = { "salutation" : "Hi2"

    };

    Directiva.html.ejs: Este archivo contiene el código HTML que se renderizará en tiempo de ejecución. Los elementos definidos en options.json.ejs están disponibles desde la plantilla del componente

    En esta plantilla EJS, utilizamos la propiedad id para acceder a la plantilla de instancia específica y desde ahí accedemos a la propiedad del mensaje de saludo. Por ejemplo:

    < span >

    {{vm. $ Components. .greeting}} Monde

    </ trav >

    Una propiedad va del archivo de definición a las opciones.json, luego al controlador de vista vacío y finalmente al componente de ejecución.

    Angular

    Los archivos están en el subdirectorio «angular»:

    config.json.ejs: Aquí es donde definimos las propiedades de visualización se añadirán a los elementos del componente en la variable $ config

    Las propiedades se añaden a la matriz de componentes indexados por el ID único del componente. De nuevo, vemos la importancia de la propiedad id en el archivo de definición del componente. Por ejemplo, para dos instancias de un componente hola mundo en la misma vista vacía, mi base.components.contiene:

    public $ config: any = {

    composantes: {

    "message d'accueil ": " Salutations 1 "

    },

    customhelloworldcomp1: {

    "salutation" : "Salutations 2"

    }

    }

    .

    Este archivo lo encontrarás en tu código generado bajo el subver carpeta. Por ejemplo, mi vista se llama hw-comp en el módulo de componentes personalizados. Aquí se encuentra el archivo: app src app modules custom-components hw-comp hw-comp.view.base.component.ts

    template.html.ejs: Este archivo contiene el código HTML que se renderizará en tiempo de ejecución. Los elementos definidos en config.json.ejs están disponibles en la plantilla del componente.

    En esta plantilla EJS, utilizamos la propiedad id para acceder a la plantilla de instancia específica y desde ahí accedemos a la propiedad greeting . Por ejemplo:

    < span >

    {{$ config.components. .greeting}} Monde

    </ span >

    Conclusión

    Como puedes ver, La creación de un componente personalizado tiene algunas similitudes con una vista personalizada. Hay que tener en cuenta que pueden existir múltiples instancias del componente en la misma vista. Esta es la principal razón para tener una propiedad id en el archivo de definición.

    Además, un componente puede interactuar con otros componentes utilizando la propiedad del modelo. Por ejemplo, un componente métrico que muestre la temperatura de la pieza seleccionada en un componente desplegable en la misma página. En la próxima entrada del blog, veremos cómo crear dichos componentes. No se pierda la oportunidad. 1945

    Si te has metido en esta serie a la mitad y quieres empezar desde el principio, puedes encontrar los artículos anteriores:

    1. Introducción a las plantillas de Kendo UI Builder Entre bastidores de las plantillas de Kendo UI Builder
    2. Manejando eventos en las plantillas de Kendo UI Builder
    3. Mejorando las plantillas en las plantillas de Kendo UI Builder
      1. .

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *