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):

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:

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:

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:

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:

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