O Editor de views do Cronapp é responsável por modelar o layout das páginas web e das telas dos aplicativos mobile. Através da técnica drag and drop (arrasta e solta) é possível construir páginas e telas utilizando os diversos componentes visuais, sem a necessidade de edição do código HTML ou CSS gerado (o resultado da edição é uma página HTML 5 crua sem scripts server-side). Ainda assim, caso queira, é possível alterar ou criar o conteúdo de uma página em modo high-code, trabalhando diretamente com o código, inclusive das páginas CRUD's geradas via templates no diagrama de dados. Além disso, os sistemas gerados pelo Cronapp são responsivos e seguem padrões de acessibilidade baseado no WCAG do W3C.
O nosso editor visual é do tipo WYSIWYG (What You See Is What You Get ou “o que você vê é o que você obtém”, em português), ou seja, a página em modo de edição será semelhante ao modo em execução, facilitando muito o desenvolvimento. O menu lateral (item 6 da figura 1) possui quatro abas superiores: Controle (que contém os componentes visuais), Propriedades (responsável por personalizar os componentes), responsividade e estilização (CSS).
Figura 1 - Área de trabalho da view
A área de design pode ser redimensionada, facilitando a visualização da página em diferentes tamanhos de tela.
Figura 2 - Itens do redimensionamento
A acessibilidade é uma das características presentes no Cronapp, já que a IDE utiliza os padrões da WCAG (Web Content Accessibility Guidelines) na construção de suas aplicações. Além disso, o Cronapp também utiliza o Wave Web Accessibility, ferramenta de avaliação de acessibilidade e também utiliza os padrões WCAG para garantir que as aplicações geradas sigam os padrões.
Figura 3 - Plugin wave rodando numa aplicação Cronapp
As competências referentes a acessibilidade presentes no Cronapp são:
Modais são pequenas janelas que ficam sobrepostas sobre a tela principal, usadas para chamar a atenção do usuário, exibir um conteúdo ou adicionar uma funcionalidade extra na tela. A janela modal é constituída de três áreas: header, body e footer; e para adicionar componentes nessa área, basta selecionar os componentes e arrastar sobre a área do modal.
Figura 4.1 - Modal
Para renomear a modal é preciso selecioná-la, clicando fora da área da modal e alterar o campo identificador na aba Propriedades (Figura 3.2).
Figura 4.2 - Campo para renomear modal
Menu lateral possui quatro abas que contém os componentes que são adicionados na área de design, onde mostra a configuração e a estilização desses componentes.
Figura 5.1 - Abas do menu lateral
Contém os componentes, como fonte de dados, grade, botão e outros, que são adicionados na área de design ou no modal. É possível pesquisar pelos componentes usando o tempo em português ou inglês.
Figura 5.2 - Aba de controle
As propriedades são exibidas sempre que um componente é selecionado na área de design. Essa aba possui três subabas com funcionalidades bem distintas entre elas e específica para cada componente selecionado.
Figura 5.3 - Aba de propriedades do componente botão
Selecionando um componente na área de edição, somente as principais propriedades serão exibidas, clique no link "+ Exibir mais" para expandir as outras propriedades.
Ainda é possível adicionar uma nova propriedade ou evento através do campo "Nova Propriedade" (Figura 5.6).
Figura 5.4 - Campo para adicionar nova propriedade e link para listar as propriedades ocultas
Os campos dessa subaba alteram as características dos componentes selecionados, posicionando o cursor do mouse sobre o rótulo de um campo exibirá um tooltip com nome e, entre parênteses, seu respectivo atributo ou diretiva AngularJS. Os ícones ao lado do nome (Figura 5.5) significam respectivamente: internacionalização, editor de expressões (permite adicionar um texto, expressão, selecionar um campo da tela ou chamar um bloco de programação), limpar campo e excluir propriedade (só ocorre em alguns atributos).
Figura 5.5 - Propriedades do componente selecionado
Algumas Propriedades:
Nome | Propriedade | Função |
---|---|---|
Conteúdo | Content | Define o rótulo ou conteúdo do componente |
Valor | ng-model | Diretiva AngularJS que associa o valor dos controles aos dados do aplicativo |
Tipo | Type | Define o tipo do componente (money, data, String, password) |
Requerido | ng-required | Diretiva AngularJS que define se o componente é de preenchimento obrigatório |
Repetir | crn-repeat | Propriedade do Cronapp que vincula o componente com uma fonte de dados e o repete de acordo com o numero de registros existentes dessa fonte |
Identificador | id | Identificador HTML do componente |
Exibir | ng-show | Diretiva AngularJS que exibe ou oculta o componente |
Segurança | cronapp-security | Define quais grupos de acesso tem permissão para ver e editar o componente |
Assim como ocorre na subaba propriedades, ao posicionar o cursor do mouse sobre o rótulo de um campo de Eventos, será exibido um tooltip com o nome e sua respectiva diretiva AngularJS ou HTML. Ao clicar no botão "…" ao lado do campo, uma janela abrirá permitindo inserir uma expressão, chamar um bloco de programação, um relatório ou formulário. (Figura 5.6)
Figura 5.6 - Eventos do componente selecionado
Alguns Eventos:
Nome | Eventos | Função |
---|---|---|
Ao Iniciar | ng-init | Diretiva AngularJS que executa uma ação ao renderizar o componente na tela |
Ao Clicar | ng-click | Diretiva AngularJS que executa uma ação ao clicar no componente |
Ao Focar | ng-focus | Diretiva AngularJS que executa uma ação ao selecionar o componente |
Essa subaba é responsável por definir o CSS do componente selecionado, inclusive em momentos específicos, como passar o mouse sobre o componente. Os campos exibidos variam de acordo ao componente selecionado. Ao clicar no botão "..." ao lado do campo, o menu é alterado para o modo de edição do CSS. Ver mais detalhes em Estilização de componentes - CSS.
Figura 5.7 - Edição do CSS do componente selecionado
Configuração da responsividade de um componente para diferentes tamanhos de tela.
Figura 5.8 - Aba de Responsividade
Nessa aba é feita toda a configuração de estilos do componente.
Figura 5.9 - Aba de Estilos
Caso deseje saber mais sobre estilos, visite Estilização de componentes - CSS |
Elas exibem a tela em modo WYSIWYG ou código fonte. Por padrão, ao abrir um formulário HTML sempre será exibido no modo visualização, mas basta selecionar as abas Visualização e Código para alterar entre as formas de exibição.
É possível visualizar o respectivo trecho do código de um componente, basta selecioná-lo na área de design e alterar para a aba Código que o trecho HTML do componente estará selecionado. (Figura 6.1)
Figura 6.1 - Abas inferiores: Visualização e Código
Além disso, ao clicar duas vezes sobre o componente fará com que seja aberta a janela de edição do HTML com o trecho de código do componente.
Figura 6.2 - Editor HTML do componente
Para inserir um componente, basta arrastá-lo até à área do formulário e soltá-lo. O local que esse componente será inserido varia, podendo ser dentro de um elemento ou ao redor dele.
Ao inserir um componente dentro de um elemento, podendo ser a div principal do formulário ou outro componente que permita inserção - como o layout horizontal e layout vertical, as bordas desse elemento fica em um tom azulado e sua borda tracejada - conforme mostrado na Figura 7.1.
Figura 7.1 - Inserindo um componente dentro de um elemento
Ao inserir um componente ao redor de um elemento, podendo ser a div principal do formulário ou qualquer outro componente, as bordas desse elemento ficam em um tom azulado e sua borda sólida com uma seta, indicando assim em qual lado ele será inserido - conforme mostrado na Figura 7.2.
Figura 7.2 - Inserindo um componente abaixo de um elemento
Nessa página
Conteúdo complementar