O CronApp nos permite criar novos 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.

Requisitos:

1. Projeto do tipo mobile criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar projeto );

Visão geral: exemplo

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

Passos 

1-"Novo Componente Visual"

Primeiramente vamos criar um “Novo Componente Visual” dentro do pacote META-INF, que encontra-se em “Códigos Fontes” → Principal → “Códigos Fontes Servidor”, clicamos com o botão direito em META-IN > Novo > “Novo Componente Visual”, como visto na Figura 1. Na janela de escolha de modelo de componente JSON, escolhemos a opção “Novo Componente” e avançamos (Figura 2).

Figura 1 - Criando novo componente visual

Figura 2 - Selecionando novo modelo JSON

Na Próxima etapa vamos informar o nome do arquivo, do componente, seu id e template HTML (Figura 3). Nesse momento já podemos inserir o endereço dos arquivos JavaScript, CSS e controladores Angular, porém para esse tutorial não serão necessários. Após o preenchimento dos campos (Tabela 1), clicamos em Finalizar.

Figura 3 - Preenchendo campos do novo componente

<h2 class="lead text-center" xattr-position="tet-center">
		h2 Visual
</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.

2-Adicionando Propriedades ao controle

Sempre que criamos um novo componente visual, além do arquivo *.template.html é gerado também o arquivo *.componets.json (Figura 4). É a partir desse arquivo que o editor HTML irá buscar e exibir as propriedades e tipos de eventos exclusivos para esse controle visuais, ambos arquivos ficam no diretório META-INF.

Figura 5 - Arquivos gerados durante a criação do novo componente visual

Finalizada a criação do componente, iremos inserir suas propriedades através do arquivo h2Visual.componets.json no pacote META-INF. A Figura 6 nos mostra onde o trecho de código json (Tabela 2) deve ser inserido (dentro da propriedade “properties”) para a criação da propriedade que irá alinhar o texto.

 
Figura 6 - Adicionando propriedade para alinhamento do texto

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

3-Testando nosso componente

Para testarmos o componente recém criado, vamos abrir a página home.view.html, que encontramos em “Códigos Fontes Cliente” → views  → logged. Na aba controle, vamos procurar pelo componente H2 Visual e arrastá-lo para o centro da nossa tela (Figura 7).

Figura 7 - Arrastando controle

 Selecione o controle que acabamos de arrastar para o centro da tela e clique na aba propriedades para visualizarmos o grupo de botões Posição. Clicamos nos botões da propriedade Posição para verificar que o texto “h2 Visual” alternará seu alinhamento (Figura 6).

Figura 8 - Utilizando propriedade