- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 08/04/2019
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 12 Próxima »
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
- Recarregar Área de Design;
- Redimensionamento: redimensiona a tela para verificar a responsividade em diferentes equipamentos;
- Modal: Adiciona e/ou seleciona os modais criados;
- 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. - Exibir elementos não visuais: exibe/oculta elementos que não serão renderizados ao executar o projeto, como ícones de fonte de dados;
- Menu lateral: área que abrange as abas de controle, propriedade, responsividade e estilos.
- Área de design: área de confecção das páginas web ou telas mobile.
- 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
- Recarregar área de design: atualiza a área de design;
- Resetar: ajusta a área de design do formulário baseando-se no tamanho da janela do browser;
- Á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
- Adicionar janela: cria uma modal;
- Remover janela: remove uma janela modal. Essa opção somente aparece quando uma janela modal é selecionada;
- Área para seleção da janela modal;
- 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
Controles
Contém os componentes, como fonte de dados, grade, botão, que são adicionados na área de design ou na modal. Dentro dessa aba é possível ainda fazer pesquisa desses componentes caso não seja encontrado visualizando.
Figura 4.2 - Aba de controle
Propriedades
Somente aparece conteúdo na área do menu lateral quando um elemnto na área de design é selecionado. Através dessa aba é possível adicionar segurança a um componente, renomea-lo e entre outros; incluindo a adição/remoção de estilos e eventos desse componente como também de seus elementos internos (caso ele tiver).
Figura 4.3 - Aba de propriedades do componente botão
- Propriedades: contém as informações do componente que podem ser definidas, como segurança, conteúdo, ícone, entre outros;
- Eventos: contém os eventos que podem ser configurados para aquele componente;
- Estilos: contém as especifidades de estilos que o componente pode ter.
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 o tipo de redimensionamento selecionado.
Figura 4.4 - Aba de Responsividade
- Informa o tipo de redimensionamento selecionado no momento;
- Área para definir a responsividade do elemento que informa a quantidade de colunas que foram selecionadas e que é possível desfazer toda a configuração ao selecionar limpar.
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
- Nova Regra CSS: adiciona um novo estilo para o componente;
- 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 trabalho, a view ou seu código fonte. Por padrão, a view é que aparece quando abre um formulário HTML. É possível também visualizar o respectivo trecho do código de um componente, basta somente selecioná-lo na área de design e ir na parte do código que uma sombra será mostrada informando esse código.
Figura 5.1 - 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 do trecho de código do componente.
Figura 5.2 - Editor HTML do componente
- Sem rótulos