O Cronapp nos permite criar componentes visuais adicionando propriedades e eventos a ele, atendendo as necessidades específicas de cada projeto. Os componentes criados e personalizados serão exibidos ao lado dos controles padrões no editor HTML.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.tutorial

Requisitos:

1. IDE habilitada no modo avançado.;
2. Projeto do tipo mobile criado, caso haja dúvidas de como criar esse tipo de projeto acesse o link criar projeto.

Introdução

Nesse tutorial iremos criar será criado um componente h2 e adicionar uma propriedade para alinhar seu texto à esquerda, centro ou direita, utilizando um grupo de botões.

Passos

Pacote META-IN

Um componente visual deve ser criado dentro do pacote META-INF, que se encontra em Códigos Fonte > Principal > Códigos Fonte Servidor (Figura 1) quando a visualização está selecionada por categoria.

Figura 1 - Caminho para o pacote META-INF

Criando componente

Clique com o botão direito sobre a pasta para abrir o menu de contexto e selecione Novo > Novo componente visual para abrir a sua janela (seta da Figura 2.1) e selecione novo componente nessa janela e clique em avançar (destaque em azul da Figura 2.1).

Figura 2.1 - Criando novo componente

Ao avançar, será mostrada uma janela contendo os campos para informar o nome do arquivo e do componente, seu ID, o template HTML (Figura 2.2) e os endereços dos arquivos JavaScript, CSS e controladores Angular. Então, preencha os campos informados com os dados informados na tabela abaixo e clique em finalizar (destaque da Figura 2.2).

<h2 class="lead text-center" xattr-position="tet-center">Subtítulo</h2>

Figura 2.2 - Informações do novo componente

Após essa etapa, o componente já estará disponível na aba controle do editor HTML. Porém, caso o componente tenha sido criado durante a edição da página HTML, será necessário fechar e abrir a aba com o editor HTML para atualizar e exibir o novo componente.

Adicionando propriedades ao componente

Sempre que um componente visual é criado, são gerados os arquivos com extensão template.html e o componets.json no pacote META-INF (Figura 3.1). É a partir do arquivo com a extensão JSON que o editor HTML irá buscar e exibir as propriedades e os tipos de eventos exclusivos para esse componente.

Figura 3.1 - Arquivos gerados para o novo componente

Então, abra o arquivo JSON do componente (o h2Subtitulo.components.json) e insira na chave properties o trecho de código abaixo para criar da propriedade que irá alinhar o texto (Figura 3.2). Salve após a inserção do trecho.

,
			"attributesForPreview": [
				{ "name": "xattr-position",
					"type": "btngroup",
					"target": "class",
					"values": [
						{ "key": "text-left",
							"value": "Esquerda",
							"icon": "mdi mdi-ray-start"
						},
						{ "key": "text-center",
							"value": "Centro",
							"icon": "mdi mdi-ray-vertex"
						},
						{ "key": "text-right",
							"value": "Direita",
							"icon": "mdi mdi-ray-end"
						}
					]
				}
			]

Figura 3.2 - Adicionando propriedades ao componente

Adicionando componente ao formulário

Acesse Códigos Fonte Web > Formulários > Autenticado e abra o formulário home.view.html. Na aba controle (destaque em azul da Figura 4.1), procure pelo componente Subtítulo e arraste-o para o formulário (Figura 4.1).

Figura 4.1 - Inserindo componente no formulário

Selecione o componente criado para abrir a aba propriedades (destaque em azul da Figura 4.2) para visualizar o grupo de botões da propriedade posição e ao clicar, o componente alterna seu alinhamento (Figura 4.2).

Figura 4.2 - Propriedades do componente no formulário