Elementos estruturais

Entendendo a estrutura da tela

A tela é composta por uma estrutura de elementos encadeados que possuem funções, dependências e características próprias. Basicamente, em relação a estrutura, a tela é composta por um elemento Tela, um elemento Documento, elementos Seções, Blocos, Linhas e Colunas. Dentro das colunas são dispostos os elementos de diagramação (títulos, parágrafos, imagens, tabelas etc).

Ao passar o mouse sobre os elementos da tela, os elementos com o foco do mouse são destacados. Ao clicar, o elemento ficará selecionado. Ao selecionar qualquer elemento (estrutural ou de diagramação) o menu lateral à esquerda exibe as opções de edição disponíveis para o elemento selecionado. O breadcrumb exibirá a sequência do aninhamento até o elemento selecionado.

A escolha do template é uma opção para adiantar a configuração inicial da tela que será produzida, porém não é uma obrigatoriedade a atualização tal qual é disposta. A disposição inicial dos elementos da tela pode ser alterada durante a edição.

Na parte superior da tela de edição está localizado um breadcrumb, que permite a visualização do aninhamento dos componentes, assim com a navegação e seleção dos mesmos.

Para excluir um elemento, selecione-o e clique no botão , localizado no topo da barra lateral esquerda da tela.

A construção dos elementos estruturais do Editor foi pensada levando em consideração o design responsivo e a sua compatibilidade com diferentes dispositivos. Por conta disso, os elementos disponíveis são estruturados de forma simples e aninhada, evitando assim erros na construção e, consequentemente, problema na sua visualização final.

Tela

Elemento básico dentro da estrutura de uma tela. É o único desse tipo e não pode ser deletado.

Documento

Elemento básico dentro da estrutura da tela. Localizado dentro do elemento Tela, também é o único desse tipo e não pode ser deletado. Permite a adição de elementos Seção dentro dele.

Seção

Localizado dentro do elemento Documento. Permite a adição de Blocos e Linhas dentro dele. Tem como propriedade um campo Id(#), que é útil para referenciar algumas programações e componentes. Uma seção é utilizada para separar assuntos dentro de uma mesma tela.

Bloco

Localizado dentro do elemento Seção. Permite a adição de Linhas dentro dele. Possui como propriedade estilos de box e permite a seleção de diversos estilos.

Os blocos são utilizados para definir o tipo de conteúdo que está inserido nele. A diferença de visualização está diretamente ligada ao Render escolhido para a disciplina, sendo visível apenas na pré-visualização.

Para definir o tipo de conteúdo de um bloco, é necessário escolher o estilo do bloco na barra lateral à esquerda. Abaixo do "estilo do bloco" é possível definir se o bloco será apresentado na sua versão negativa ou complementar.

Linha

Localizado dentro dos elementos Seção ou Bloco. Permite a adição de Colunas dentro dele. Possui como propriedade o alinhamento. Esse alinhamento refletirá no posicionamento do elemento Coluna que estiver dentro da Linha, desde que a coluna tenha um tamanho inferior a 100%.

A opção "marcar divisão de colunas", na barra lateral à esquerda, cria uma linha vertical separando as colunas que estiverem dentro da linha (só é visível quando o elemento linha possuir duas colunas ou mais).

Coluna

Localizado dentro do elemento Linha. Possui como propriedade a largura, que define o percentual de ocupação do elemento dentro da linha. Caso a soma das colunas ultrapasse 100%, o percentual será distribuído proporcionalmente entre as colunas que estiverem compartilhando o elemento.

Só é possível colocar os elementos de diagramação dentro de colunas. Além disso, não é possível colocar colunas sem estar dentro de linhas.

Também não é permitido colocar diretamente colunas dentro de colunas. Para inserir uma Coluna dentro de uma Coluna é necessário colocar um elemento Linha dentro de elemento Coluna.

A Coluna tem como propriedade avançada a possibilidade de classificar um elemento a fim de endereçar uma formatação pela folha de estilo.