Skip to end of metadata
Go to start of metadata

 

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

  1. Recarregar Área de Design;
  2. Redimensionamento: redimensiona a tela para verificar a responsividade em diferentes equipamentos;
  3. Modal: Adiciona e/ou seleciona os modais criados;
  4. Exibir elementos ocultos: exibe todos elementos que serão renderizados em algum momento, após uma ação feita pelo usuário.
    Como 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. Abas visualização e código: exibe o conteúdo de forma visual ou o código-fonte HTML.

Redimensionamento

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

  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 do browser;
  3. Área de redimensionamento: redimensiona a área de design para mostrar como é seu comportamento conforme o ícone selecionado:
    • Dispositivos pequenos, telefones;
    • Dispositivos médios, tablets;
    • Dispositivos Desktops;
    • Dispositivos grandes, Tv's.

Modal

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

  1. Adicionar janela: cria uma modal;
  2. Remover janela: remove uma janela modal. Essa opção somente aparece quando uma janela modal é selecionada;
  3. Área para seleção da janela modal;
  4. Janela do modal: área de design do modal.

Renomear o 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

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

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

Controles

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

 

Propriedades

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


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

Informação

Caso deseje saber mais sobre estilos visite esse tópico: Estilização de componentes - CSS

Responsividade

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

Figura 4.4 - 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.
  • 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 4.5 - Aba de Estilos

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

Informação

Caso deseje saber mais sobre estilos visite esse tópico: Estilização de componentes - CSS

Abas visualização e código

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


  • No labels