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
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:
- Introdução aos Modelos de Construtores de Kendo UI Nos Bastidores dos Modelos de Construtores de Kendo UI
- Manuseamento de Eventos nos Modelos de Construtores de Kendo UI
- Melhoria dos Modelos nos Modelos de Construtores de Kendo UI