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 HTML5 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 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 Estilos (CSS).

Figura 1 - Área de trabalho da view

1. Recarregar Área de Design;
2. Redimensionamento: redimensiona a tela para verificar a responsividade em diferentes equipamentos;
3. Modal: botão para criar modal e caixa de seleção dos modais;
4. Exibir elementos ocultos: exibe todos os elementos que serão renderizados em algum momento, após uma ação feita pelo usuário - por exemplo, podemos citar o botão sanduíche dos dispositivos moveis que ficará visível na tela de edição, mesmo que o redimensionamento esteja configurado para grandes dispositivos;
5. Exibir elementos não visuais: exibe/oculta elementos que não serão renderizados ao executar o projeto, como ícones de fonte de dados;
6. Menu lateral: área que abrange as abas de controle, propriedade, responsividade e estilos;
7. Área de design: área de confecção das páginas web ou telas mobile;
8. Árvore DOM: exibe a árvore DOM (Document Object Model) do componente selecionado na área de edição;

9. Abas visualização e código: exibe o conteúdo de forma visual ou o código-fonte HTML.
   

   A subaba código só é exibida quando a IDE está no modo Avançado.

Redimensionamento

No menu superior da área da edição se encontra as ferramentas para redimensionamento da página, facilitando a visualização da página em diferentes tamanhos de tela. 

Figura 2 - Itens do redimensionamento

1. Recarregar área de design: atualiza a área de design;
2. Resetar: ajusta a área de design do formulário baseando-se no tamanho da janela no browser;
3. Área de redimensionamento: redimensiona a área de design para mostrar como é seu comportamento conforme o dispositivo selecionado:
   
   • Dispositivos pequenos, telefones;
   • Dispositivos médios, tablets;
   • Dispositivos desktops;
   • Dispositivos grandes, TVs.

Acessibilidade

A acessibilidade é uma das características presentes no Cronapp, já que a IDE utiliza os padrões da W3C e WCAG (Web Content Accessibility Guidelines) 2.0 e 2.1 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).

Figura 3 - Plugin Wave rodando numa aplicação Cronapp

 As competências referentes a acessibilidade presentes no Cronapp são:

• Estrutura do documento: possui um HTML bem definido que respeita as regras de uso, como por exemplo, possuir um DOCTYPE apropriado, subordinação obrigatória entre as tags é respeitada e tags são corretamente aninhadas e fechadas;
• Divisão de áreas de informação: tem como objetivo organizar a estrutura da aplicação de forma a garantir a consistência entre as páginas definindo bem as divisões topo, conteúdo, menu, rodapé e possui como algumas regras de uso ter a seção do conteúdo principal marcada com a regra main, seção que tem um formulário de busca marcado com a regra search e rodapé contendo as informações versão, sobre, contato, etc. e marcada com a regra contentinfo;
• Semântica das tags: visa manter a lógica, semântica, ordem dos elementos e tem como algumas regras de uso blocos marcados com p, table não é usado para posicionar elementos na tela e cabeçalhos marcados com h1, h2, ... h6; 
• Leitura da tela: permitindo aos usuários cegos ou com baixa visão compreensão e acesso total às funcionalidades do sistema, desde manipulação de arquivos e fotos, cadastros, criação e edição de documentos de texto rico, navegação, entre outras funcionalidades.
• Fluxo de leitura e tabulação: consiste em manter a ordem lógica das apresentações para facilitar leituras, navegação entre links e possui as regras de uso conteúdo apresentados na sequência em que se espera que o usuário leia, paradas de tabulação aparecem na sequência em que se espera que o usuário acesse;
• Uso de cabeçalhos: possui regras de uso, como h1 usado apenas uma vez na página, níveis não são saltados da hierarquia, ou seja, depois de h1 se usa h2 e assim por diante, o h1 não precisa ser necessário o primeiro cabeçalho na ordem de leitura;
• Atalhos para conteúdo e navegação: tem como algumas regras de uso link para ir direto ao conteúdo principal da página, link que leva ao conteúdo é o primeiro elemento a receber foco com o pressionamento da tecla TAB, link para ir direto à navegação da página;
• Totalmente acessível por teclado: obtém como regras de uso a possibilidade de realizar toda e qualquer ação em uma página usando somente o teclado, controle de foco e visualização devem permitir uma experiência usável quando se navega por teclado; 
• Visual: visa garantir que o texto possua contraste suficiente para a leitura, e tem regras de uso, como por exemplo, texto regular com contraste mínimo de 4.5:1 entre cor de fonte e de fundo, indicação visual evidencia o elemento que possui foco e texto grande (a partir de 18 pontos, ou 14 pontos com negrito) com contraste mínimo de 3:1 entre cor de fonte e de fundo;
• Links: possui algumas regras de uso como texto do link indica com clareza seu destino, links que levam ao mesmo destino possuem o mesmo texto e links que levam a destinos diferentes possuem textos diferentes;
• Imagens: contém regras de uso como imagens possuem o atributo alt que possui conteúdo variável que depende de como a imagem é usada na página, imagem decorativa inserida por CSS (preferencialmente) não necessita do atributo alt e imagem que faz parte do conteúdo inserida por HTML e não por CSS;
• Tabelas: tem regras de uso, como por exemplo, título da tabela (quando houver) informado por meio da tag caption, cabeçalhos contidos em tags th e dados contidos em tags td; 
• Formulários: obtém algumas regras de uso como ao navegar por teclado o controle deve receber o foco, controle operável por teclado e controle associado a seu rótulo (label) de ao menos uma dessas formas (atributo id do controle possui o mesmo valor do atributo for do rótulo correspondente, tag do controle posicionada dentro da tag label correspondente) e controles que guardam forte relação entre si agrupados com uso de fieldset;
• Multimídias: dispõe algumas regras de uso, conteúdo multimídia não inicia automaticamente sua reprodução, controle de execução operável por teclado e legenda em vídeo que contém áudio falado. 

Modal

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 arrastá-los sobre a área do modal (Figura 4.1).

Figura 4.1 - Modal

1. Adicionar janela: cria uma modal;
2. Remover janela: remove a janela modal selecionada na caixa de seleção lateral;
3. Caixa de seleção das janelas modais;
4. Janela do modal: área de design do modal.

Seleção do modal

Para selecionar o modal e realizar algumas ações, como renomear, basta clicar em algum componente dentro do modal (Figura 4.2) e, na árvore DOM, clicar na div referente ao modal (1 da Figura 4.2), dessa forma o menu lateral irá exibir as propriedades do modal (2 da Figura 4.2).

Figura 4.2 - Campo para renomear modal

Menu lateral

O 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

1. Controles;
2. Propriedades;
3. Responsividade;
   
4. Estilo.

Controles

Contém os componentes visuais que são utilizados para o design das páginas e telas (Figura 5.2), esses componentes variam conforme a view aberta - ou seja, se ela é web ou mobile. É possível pesquisar pelos componentes usando o termo em português ou inglês.

Figura 5.2 - Aba de controle

Propriedades dos componentes

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

Subabas:

• Propriedades: permite adicionar ou editar as propriedades HTML, AngularJS, permissão de acesso e outras;
• Eventos: permite adicionar eventos ao componente selecionado, como abrir um novo formulário ou relatório, executar um bloco de programação ou ainda uma expressão;
• Estilos: permite adicionar ou editar o CSS do componente.

Selecionando um componente na área de edição, somente as principais propriedades serão exibidas, clique em + Exibir mais para expandir as outras propriedades. Ainda é possível adicionar uma nova propriedade ou evento através do campo Nova Propriedade (Figura 5.4).

Figura 5.4 - Campo para adicionar nova propriedade e link para listar as propriedades ocultas

Subaba Propriedade

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:

Subaba Eventos

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 (Figura 5.6). O ícone ao lado limpa o conteúdo no campo do evento. 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 - Eventos do componente selecionado

Alguns Eventos:

Subaba Estilo

Essa subaba é responsável por definir o CSS do componente selecionado (Figura 5.7), inclusive em momentos específicos, como passar o mouse sobre o componente. Os campos exibidos variam de acordo com o componente selecionado. Ao clicar no botão "..." ao lado do campo, o menu é alterado para o modo de edição do CSS.

Figura 5.7 - Edição do CSS do componente selecionado

Responsividade

Configuração da responsividade de um componente para diferentes tamanhos de tela.

Figura 6.1 - Aba de Responsividade

1. Dispositivo: Informa o tipo de redimensionamento selecionado no momento;
2. Tamanho: define o tamanho do componente baseado no sistema de grid do Bootstrap;
3. Exibir todos dispositivos: mostra os outros tipos de redimensionamentos e suas respectivas áreas para definir a responsividade.

Estilos

Nessa aba é feita toda a configuração de estilos do componente.

Figura 6.2 - Aba de Estilos

1. Nova Regra CSS: adiciona um novo estilo para o componente;
2. Remover regra: elimina o estilo correspondente.

Adicionar Elemento

Ao clicar em qualquer componente, são exibidos os botões bola, entre eles há o botão Adicionar Elemento (ícone +) (1 da figura 7.1), também localizado na parte inferior da janela de edição (2 da figura 7.1), com ele você poderá adicionar um componente onde desejar com base no componente selecionado, como mostrado na figura 7.2.

Figura 7.1 - Botões para adicionar elemento

Após clicarmos no símbolo de adicionar elementos (+) da figura 7.1, uma janela de seleção do novo componente é aberta, nela devemos escolher primeiro a posição do novo componente e em seguida, o novo componente. No exemplo da figura 7.2, selecionamos a opção Esquerda (destaque 1) e em seguida, o componente de Título. 

Figura 7.2 - Componentes adicionados na esquerda e na direita

Assim, como mostrado na figura 7.3, o novo componente de Título foi adicionado à esquerda do componente que já existia. Nesse exemplo utilizamos a Responsividade para exibir os dois componentes lado a lado.

Figura 7.3 - Componentes adicionadas

Na figura 7.4 vemos um 2 botões adicionados através da funcionalidade "Adicionar elemento", o primeiro com a opção Depois e o segundo com a opção Direita, note que a única diferença é que um possui uma margem e outro não possui. A mesma situação acontece com as opções Esquerda e Antes.

Figura 7.4 - Margem dos componentes

• Antes: O componente é adicionado antes do componente selecionado;
• Esquerda: O componente é adicionado antes do componente selecionado com uma margem;
• No meio: O componente é adicionado dentro da div do componente selecionado;
• Direita: O componente é adicionado depois do componente selecionado;
• Depois:  O componente é adicionado depois do componente selecionado com uma margem.

Árvore DOM

O Modelo de Objeto de Documento (DOM) é uma interface de programação para documentos HTML, XML e SVG. Ele fornece uma representação estruturada do documento como em uma árvore. Imagine que o elemento <HTML> é a raiz dessa árvore e ele possui filhos, como o <Head> e o <Body>, que por sua vez também possuem outros elementos filhos e assim sucessivamente. Cada elemento da árvore DOM pode possuir atributos e eventos (exemplo <input type="text">), no Cronapp chamamos respectivamente de Propriedades e Eventos. Para mais detalhes sobre a árvore DOM, clique aqui. 

A parte inferior do Editor de views possui uma estrutura que exibe a hierarquia da árvore DOM. Ela exibe a estrutura do elemento mais externo da página (na página home é a div#starter ) até o elemento mais externo do componente selecionado na tela (destaque 1 da figura 8.1). Na prática, quando selecionamentos um componente visual na área de edição, estamos selecionando todo o código do seu elemento HTML mais externo juntamente com todos os seus sub elementos.

Na figura 8.1 temos o componente Entrada de texto com botão selecionado e logo abaixo, na estrutura DOM, vemos que o último elemento exibido é a div principal desse componente. Os campos das abas Propriedades e Eventos exibidos no menu lateral (2 da figura 8.1) referencia os atributos e eventos do elemento HTML selecionado e também os principais atributos e eventos de seus sub elementos. Mesmo o componente Entrada de texto com botão possuindo um subcomponente botão, as propriedades do botão não são exibidas no menu lateral, sendo necessário selecionar este sub componente para ter acesso a propriedade ícone do botão, por exemplo.

Figura 8.1 - Ferramenta que exibe a estrutura DOM do componente selecionado

Agora com o botão selecionado, podemos ver as propriedades específicas do botão e de seus sub elementos, exemplo das propriedades ícone e Conteúdo (destaque 3 da figura 8.2), A estrutura da árvore DOM também está maior, exibindo como último elemento o button (1 da figura 8.2) e deixando claro que ele está dentro da div do componente Entrada de texto com botão (2). Clicando nesse elemento da estrutura DOM (2), o foco da seleção passará do Botão para a Entrada de texto com botão. Dessa forma, para selecionar um subcomponente, é necessário utilizar o botão bola cadeado, enquanto que para selecionar um componente mais externo, podemos usar a estrutura DOM na parte inferior.

Figura 8.2 - Subcomponente DOM

Propriedades da página

A div starter envolve toda a página e possui algumas propriedades próprias, para acessá-las clique com o botão de contexto sobre a área de edição e exibir o menu, selecione a opção Propriedades da página (Figura 9.1) ou Eventos da página (Figura 9.2). Após isso, é possível verificar que o componente destacado na sequência da árvore DOM é a div starter (destaque da Figura 9.1), a página passará a se comportar como os componentes internos, exibindo os botões bolas.

Figura 9.1 - Acesso as Propriedades da página

Principais Propriedades:

Figura 9.2 - Acesso aos Eventos da página

Principais Eventos:

Abas visualização e código

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 10.1).

Figura 10.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 10.2).

Figura 10.2 - Editor HTML do componente