Introdução

A área de trabalho varia conforme o arquivo que será aberto nela e conjuntamente todos os componentes correspondentes a esse arquivo. Nessa parte será explicada mais sobre os arquivos html pois eles possuem mais abas e menus para configuração.

Figura 1 - Área de trabalho do arquivo HTML

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/oculta elementos que serão renderizados mas somente são mostrados após uma ação feita pelo usuário, como os itens de um menu dropdown - que são exibidos após clicar no menu;
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: onde todo o trabalho para a constituição da página será feita.
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 redimesionamento

1. Resetar: reajusta a área de design do formulário;
2. Área de redimensionamento: redimensiona a área de design para mostrar como é seu comportamento conforme o ícone selecionado:
3. Dispositivos:
   
   • pequenos, telefones;
   • médios, tablets;
   • Desktops;
   • grandes, Tv's.

Modal

Modal não é nada mais que uma caixa de diálogo que fica sobreposta na view para chamar atenção do usuário. Na IDE, a janela modal é constituída de três áreas: header, body e footer; e para adicionar componentes nessa área, basta somente selecioná-lo e arrastá-lo até a área desejada.

Figura 3.1 - Modal

1. Adicionar janela: cria uma janela 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 modal.

Renomear a modal

Para renomear uma modal é preciso que ela seja selecionada completamente (clicando fora da área da modal) e no menu lateral, na aba de propriedade, renomeie o nome do campo identificador.

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 estilizaaçã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, 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.

Responsividade

Configuração da responsividade de um componente para o tipo de redimensionamento selecionado.

Figura 4.4 - Aba de Responsividade

1. Informa o tipo de redimensionamento selecionado no momento;
2. Á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

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

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