Criando componente visual
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 tutorial
Requisitos:
IDE habilitada no Modo Avançado.
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 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 diretório servidor META-INF (Endereço: src/main/java/META-INF/ ) (Figura 1).
Criando componente
Clique com o botão direito sobre a pasta META-INF (Endereço: src/main/java/META-INF/ ) e selecione Novo > Novo componente visual para abrir a sua janela (seta da Figura 2). Selecione Novo Componente nessa janela e clique em Avançar (destaque em azul da Figura 2).
A opção Novo > Novo Componente Visual só será exibida ao selecionar o menu de contexto do diretório META-INF.
Ao avançar, será mostrado uma janela contendo os campos necessários para o componente visual (Figura 2.1). Então, preencha os campos com os dados informados na tabela abaixo da figura e clique em Finalizar (destaque da Figura 2.1).
Campo | Descrição |
|---|---|
Nome do Arquivo | h2Subtitulo |
Id do Componente | h2Subtitulo |
Nome do Componente | Subtítulo |
Template HTML | Template HTML<h2 class="lead text-center" xattr-position="tet-center">
Subtítulo
</h2> |
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.
Finalizado essa etapa, o Cronapp irá inserir o prefixo "crn-" antes do Id do Componente. Confira na figura 4.1
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). É 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.
Então, abra o arquivo JSON (h2Subtitulo.components.json) e insira na chave properties o trecho de código abaixo da figura para criar a propriedade que irá alinhar o texto à esquerda, centro ou direita (Figura 3.1). Salve após a inserção do trecho.
Saiba mais
Para mais informações sobre o arquivo components.json, acesse sua documentação.
Propriedade a ser adicionada
,"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"
}
]
}
]Adicionando componente ao formulário
Acesse a página home (Endereço: src/main/webapp/views/logged/home.view.html ) e na aba controle (destaque em azul da Figura 4), procure pelo componente Subtítulo e arraste-o para o formulário (Figura 4).
A propriedade Identificador está diferente do que foi informado na etapa da figura 2.1, sendo dividido em 3 elementos:
Prefixo: o "crn-" é utilizado no início de todos os componentes visuais criados.
Identificador base: nome base informado no momento da criação do componente.
Sufixo: o valor "-60629" é um número aleatório utilizado para evitar que 2 componentes possuam o mesmo id na mesma página.
Com o componente selecionado, é possível acessar a propriedade Posição que incluímos no arquivo h2Subtitulo.components.json do componente (figura 4.1).
Esquerda: alinha o conteúdo do componente à esquerda,
Centro: alinha o conteúdo do componente ao centro.
Direita: alinha o conteúdo do componente à direita.
Nesta página