Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
O Cronapp nos permite criar
componentesComponentes 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 pacote META-INF, que se encontra em Códigos Fonte > Principal > Códigos Fonte Servidor criado dentro do diretório servidor META-INF (Endereço: src/main/java/META-INF/
) (Figura 1) quando a visualização está selecionada por categoria.
Image RemovedImage Added
Figura 1 - Caminho para o pacote diretório META-INF
Criando componente
Clique com o botão direito sobre a pasta para abrir o menu de contexto e selecione 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). 1) e selecione Selecione Novo Componente nessa janela e clique em Avançar (destaque em azul da Figura 2.1).).
Informações |
---|
A opção Novo > Novo Componente Visual só será exibida ao selecionar o menu de contexto do diretório |
Image AddedImage Removed
Figura 2 .1 - Criando novo componente
Ao avançar, será mostrada mostrado uma janela contendo os campos necessários para informar o nome do arquivo e do componente, seu ID, o template HTML componente visual (Figura 2.2) e os endereços dos arquivos JavaScript, CSS e controladores Angular1). Então, preencha os campos informados com os dados informados na tabela abaixo da figura e clique em em Finalizar (destaque da Figura 2.21).
Image RemovedImage Added
Figura 2.2 1 - Informações do novo componente
Campo | Descrição | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
Nome do Arquivo | h2Subtitulo | |||||||||
Id do Componente | cm-h2Subtitulo | |||||||||
Nome do Componente | Subtítulo | |||||||||
Template HTML |
|
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.
Informações |
---|
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 no pacote META-INF (Figura 3.1). É É a partir do arquivo do arquivo com a extensão JSON que JSON que o editor HTML irá buscar e exibir as propriedades e os tipos de eventos exclusivos para esse componente.
Image RemovedImage Added
Figura 3 .1 - Arquivos gerados para o novo componente
Então, abra o arquivo JSON do componente JSON (o h2Subtitulo.components.json
) e insira na chave chave properties o trecho de código abaixo para criar da figura para criar a propriedade que irá alinhar o texto à esquerda, centro ou direita (Figura 3.21). Salve após a inserção do trecho.
Informações | ||
---|---|---|
| ||
Para mais informações sobre o arquivo |
Image RemovedImage Added
Figura 3.2 1 - Adicionando propriedades ao componente
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
, "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 Códigos Fonte Web > Formulários > Autenticado e abra o formulário a página home (Endereço: src/main/webapp/views/logged/home.view.html
. Na ) e 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).
Image RemovedImage Added
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).Image Removed
Figura 4.2 - Propriedades do componente no formulário
Âncora | ||||
---|---|---|---|---|
|
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.
Image Added
Figura 4.1 - Propriedades do componente no formulário
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 Nessa página
Índice