O editor de views modela o layout das páginas web e das telas dos aplicativos mobile, adicionando funcionalidades através dos diversos componentes. O seu menu lateral possui quatro abas que contém os componentes que irão gerar a tela (através do arrastar e soltar), propriedades que são adicionadas a esses componentes, além responsividade e estilização.
Figura 1 - Área de trabalho da view
A view do formulário pode ser redimensionada conforme os ícones abaixo, além de poder resetar e recarregar a área.
Figura 2 - Itens do redimensionamento
Modais são pequenas telas 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 3.1 - Modal
Para renomear o modal é preciso selecioná-lo, clicando fora da área do modal e alterar o campo identificador na na aba Propriedades (Figura 3.2).
Figura 3.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 4 - 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 4.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.
Figura 4.3 - Aba de propriedades do componente botão
Ao selecionar um componente na área de edição, serão exibidos as propriedades, eventos e estilos com as configurações específicas desse componente.
Posicionando o cursor do mouse sobre o rótulo de um campo na subaba propriedade, será exibido um tooltip com nome e, entre parênteses, seu respectivo atributo ou diretiva AngularJS. Os ícones ao lado do nome (Figura 4.4) 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 4.4 - 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 |
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 |
Ao posicionar o cursor do mouse sobre o rótulo de um campo da subaba Eventos, será exibido um tooltip com o nome e sua respectiva diretiva AngularJS. 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 4.5)
Figura 4.5 - 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 |
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 4.6).
Figura 4.6 - Campo para adicionar nova propriedade e link para listar as propriedades ocultas
Configuração da responsividade de um componente para diferentes tamanhos de tela.
Figura 4.7 - Aba de Responsividade
Nessa aba é feita toda a configuração de estilos do componente.
Figura 4.8 - Aba de Estilos
Caso deseje saber mais sobre estilos visite esse tópico: Estilização de componentes - CSS |
Ela define o que será exibido na área de design, os componentes ou seu 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 5.1)
Figura 5.1 - Abas 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 5.2 - Editor HTML do componente
Próximas atualizações desta página