Desenho de componentes

Seria possível colocar elementos no espaço vazio da tela de forma simples, mas é melhor tentar tornar tudo limpo e ordenado imediatamente. Por conseguinte, para começar, vamos desenhar o espaço de trabalho. Vamos acrescentar um componente (Container) para a tela onde iremos colocar todos os outros elementos. Após adicionar, deverá clicar no ícone da engrenagem e proceder à configuração deste contentor.

Configurações do contentor

Vamos percorrer as configurações disponíveis.

• Name - o nome sob o qual podemos referir-nos a este contentor nos processos de negócio da aplicação. Por exemplo, se quisermos criar um processo de negócio para alterar algumas definições deste contentor.
• Direction - a direcção em que os elementos dentro do contentor em questão serão dispostos. Horizontalmente, se desejar organizá-los em fila, um após o outro, ou vice-versa, verticalmente, quando os elementos vão por baixo uns dos outros.
• Wrap - Fixar a saída dos elementos. Se estiverem na mesma linha (agora embrulho), ou podem ser embrulhados (embrulho).
• Alignment - como os elementos do contentor devem ser alinhados (ajuste separado para alinhamento horizontal e vertical).
• Size - tamanho do contentor. Pode ser definido como uma percentagem do espaço disponível ou ter um tamanho estritamente fixo em pixels.
• Max Width -a largura máxima permitida (no caso de não estar rigorosamente definido e variar dependendo do conteúdo).
• Margin/Padding - travessão a partir das bordas do contentor. Externo ou interno, respectivamente.
• Image, Gradient or Overlay (Background color) - a capacidade de definir o fundo desejado. Pode escolher uma cor específica (ou uma combinação de cores diferentes com um gradiente) ou seleccionar uma imagem de fundo.
• Border - selecção da moldura e da sua aparência (cor, espessura, raio de arredondamento).
• Visible - visibilidade do elemento (bem como de todos os elementos aninhados).

As definições seleccionadas podem ser vistas na imagem do ecrã. Claro, pode experimentá-las e alterá-las, escolhendo o seu desenho único.

Vamos adicionar outra ao contentor criado. Vamos adicionar-lhe os campos de entrada necessários. Coloque-o na vertical, alinhado ao centro, 40% de largura, e à esquerda, com almofada-esquerda (almofada-esquerda 20px).

Componentes de aplicação

A seguir, adicionar os próprios componentes ao contentor. O nosso processo comercial aceita dois números do tipo float. Para os introduzir, é necessário adicionar dois Input componentes (float), um botão (Button), que iniciará o processo de cálculo, e fará um pequeno ajuste visual para assinar os seus Label.

Vamos acrescentar mais um bloco onde assinaremos o que pretendemos calcular em geral (soma, subtracção, etc.). Vamos definir a largura para 30% com os elementos dispostos verticalmente, centrados, e alinhados à direita (end/center). Vamos adicionar 5 Label componentes ao próprio recipiente e alterar imediatamente o seu texto para o desejado.

O último passo no desenho visual é adicionar outro contentor para exibir o resultado do cálculo. Adicionámo-lo por analogia com o recipiente anterior, mas definimos o alinhamento à direita com um pequeno acolchoamento à esquerda. A característica deste contentor é que inicialmente será invisível (o interruptor Visible está desligado). Vamos ligá-lo no momento em que tivermos o resultado dos cálculos. Vamos adicionar-lhe 5 componentes Label, e não precisamos sequer de alterar o seu texto porque o bloco ainda é invisível (o principal é definir o seu Name para que se possa identificar o elemento necessário ao criar processos empresariais).

Se tudo foi feito correctamente, veremos o seguinte resultado no web designer:

E isto na aplicação publicada: