Kendo UI Builder componente personalizado para Angular e AngularJS

Kendo UI Builder vem com muitos componentes, mas pode criar as suas próprias personalizações. Continue a ler para saber como fazer isto em Angular e AngularJS.

No Kendo UI Builder um componente é um widget que se pode colocar numa vista vazia. Kendo UI Builder já vem com muitos componentes prontos, tornando-o um ambiente de desenvolvimento muito rico (por exemplo, gráficos, calendários, etc.). Contudo, pode haver alturas em que queira criar componentes personalizados para reutilizar nos seus projectos e aplicações Angular ou AngularJS, ou mesmo em toda a sua organização.

Como fizemos para aprender o básico das vistas personalizadas, exploraremos a componente mais simples possível sob a forma de uma componente personalizada “Olá Mundo”.

Para seguir, descarregue o zip do projecto custom-hello-hello-world-comp do github ou clone este repositório

Copie a pasta “custom-hello-world-comp” para a pasta “template / components” da sua aplicação de destino e reinicie o Kendo UI Builder. Clique em “Adicionar vista”, seleccione uma vista vazia e deverá agora ver o componente personalizado como nesta imagem (desça até ao fundo do painel de componentes ou procure por personalizado):

Título da selecção do componente = Selecção do componente / /pp Ao construir um componente personalizado, há três elementos principais a construir: /polli Ficheiro de definição do componente personalizado: Um ficheiro JSON descrevendo o componente personalizado para Kendo UI Builder /lili em Kendo UI Builder.br / /polli O ícone exibido na paleta de selecção de componentes /lili A IU do componente tal como é exibida durante a concepção /lip /ol/lili Como o componente se comporta e executa ao executar a estrutura-alvo específica (por exemplo, AngularJS ou Angular 5); as tarefas que normalmente cuidamos incluembr / /polli UI presentation /lili Resposta a eventos /lili Interacção modelo de dados /li/ol/li/olp Aqui está uma imagem do ecrã ilustrando onde alguns destes elementos aparecem no designer: /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 mais detalhes sobre o aumento de modelos

  • modelo.html.ejs: é aqui que programamos a renderização do nosso componente personalizado no painel principal do Kendo UI Builder, que é configurado com propriedades de metadados.
  • Os ficheiros .ejs são ficheiros modelo. São executados pelo Kendo UI Builder para substituir as etiquetas de modelo pelos seus valores reais. Ver http://ejs.co/ para mais informações.

    Quando se programa um componente personalizado, basta fornecer uma representação do widget que se aproxima da vista de tempo de execução. No entanto, não é necessário implementar quaisquer interacções de utilizador porque o Kendo UI Builder não passa eventos do rato ou do teclado para a visualização no momento da concepção.

    O objectivo do design é permitir-lhe concentrar o seu tempo e energia na renderização do componente de tempo de execução

    Elementos de tempo de execução

    O conteúdo dos ficheiros de tempo de execução depende da estrutura de destino utilizada. No Kendo UI Builder versão 2.x, apoiamos a estrutura AngularJS. A partir da versão 3, iremos apoiar as estruturas AngularJS e Angular 5.

    Nota: Kendo UI Builder versão 3 estará disponível mais tarde em Maio

    AngularJS

    Os ficheiros estão na subdirectoria “angularjs”:

    Options.json.ejs: É aqui que definimos quais as propriedades do componente que serão adicionadas ao modelo no controlador de vista vazio a que o componente está ligado

    As propriedades são adicionadas ao conjunto de componentes $ indexados pelo identificador único do componente. Vemos agora a importância da propriedade id no ficheiro de definição de componentes. Por exemplo, para dois exemplos de uma componente “olá mundo” na mesma vista vazia o meu controlador.js contém:

    this . $ Components = { ódigo> "salutation" : "Hi1"

    };

    cette . $ Composants = {

    ódigo> "salutation" : "Hi2"

    };

    br>directiva.html.ejs: Este ficheiro contém o código HTML que será entregue em tempo de execução. Os elementos definidos em options.json.ejs estão disponíveis a partir do modelo de componente

    Neste modelo EJS, usamos a propriedade id para aceder ao modelo de instância específica e a partir daí acedemos à propriedade de mensagem de saudação. Por exemplo:

    < span >

    ódigo> {{vm. $ Components. .greeting}} Monde

    trav >

    Uma propriedade passa do ficheiro de definição para as opções.json, depois para o controlador de vista vazio e finalmente para a componente de tempo de execução.

    Angular

    Os ficheiros estão na subdirectoria “angular”:

    config.json.ejs: É aqui que definimos as propriedades de visualização serão adicionadas aos elementos componentes na variável $ config

    As propriedades são adicionadas ao conjunto de componentes indexados pelo ID único do componente. Mais uma vez, vemos a importância da propriedade id no ficheiro de definição de componentes. Por exemplo, para duas instâncias de um componente “olá mundo” na mesma vista vazia, a minha base.componentes.ts contém:

    public $ config: any = {

    ódigo> composantes: {

    ódigo>

    "message d'accueil ": " Salutations 1 "

    ódigo>},

    ódigo> customhelloworldcomp1: {

    ódigo> "salutation" : "Salutations 2"

    ódigo>}

    ódigo>}

    ódigo> .

    Encontrará este ficheiro no seu código gerado sob a subver pasta. Por exemplo, o meu ponto de vista chama-se hw-comp sob o módulo de componentes personalizados . É aqui que se encontra o ficheiro: app src app modules custom-components hw-comp hw-comp.view.base.component.ts

    template.html.ejs: Este ficheiro contém o código HTML que será processado em tempo de execução. Os elementos definidos no config.json.ejs estão disponíveis a partir do modelo de componente.

    Neste modelo EJS, utilizamos a propriedade id para aceder ao modelo de instância específica e a partir daí acedemos à propriedade de saudação . Por exemplo:

    < span >

    ódigo> {{$ config.components. .greeting}} Monde

    span >

    Conclusão

    Como pode ver, A criação de uma componente personalizada tem algumas semelhanças com uma visão personalizada. Temos de ter em conta que podem existir múltiplas instâncias do componente na mesma perspectiva. Esta é a principal razão para ter uma propriedade de identificação no ficheiro de definição.

    Além disso, um componente pode interagir com outros componentes usando a propriedade do modelo. Por exemplo, uma componente métrica mostrando a temperatura da peça seleccionada numa componente dropdown na mesma página. No próximo post do blogue, veremos como criar tais componentes. Fique atento. 1945

    Se saltou para esta série no meio e quer começar do início, pode encontrar os artigos anteriores:

    1. Introdução aos Modelos de Construtores de Kendo UI Nos Bastidores dos Modelos de Construtores de Kendo UI
    2. Manuseamento de Eventos nos Modelos de Construtores de Kendo UI
    3. Melhoria dos Modelos nos Modelos de Construtores de Kendo UI

    Deixe uma resposta

    O seu endereço de email não será publicado. Campos obrigatórios marcados com *