segunda-feira, 4 de maio de 2009

Layout Managers: FXHorizontalFrame

Neste tópico, falarei sobre o gerenciador de layout FXHorizontalFrame. Aproveito também para mostrar algumas dicas de layout.


Descrição
O gerenciador de layout HorizontalFrame é utilizado para posicionar automaticamente as janelas filhas horizontalmente, da esquerda para a direita, ou da direita para a esquerda, dependendo das dicas de layout da janela.

Obs.: "janela" aqui refere-se a qualquer derivado de FXWindow.


Exemplo

Neste exemplo, temos um HorizontalFrame e dentro dele seis botões:
22   FXHorizontalFrame *frame = new FXHorizontalFrame(this,
23 LAYOUT_FILL_X|PACK_UNIFORM_WIDTH|PACK_UNIFORM_HEIGHT|FRAME_RAISED);

Aqui, é criado o frame. Ele se expandirá por todo o eixo X da janela (LAYOUT_FILL_X) e todos os seus filhos terão a mesma dimensão (PACK_UNIFORM_WIDTH | PACK_UNIFORM_HEIGHT). Também possui uma borda "levantada", que eu coloquei aqui apenas para destacar.

Em seguida, são criados os botões:
25   new FXButton(frame, "Botão 1");
26 new FXButton(frame, "Botão 2");
27 new FXButton(frame, "Botão com texto grande");
28 new FXButton(frame, "Botão em\nduas linhas");
29
30 new FXButton(frame, "Centro", NULL, NULL, 0,
31 BUTTON_NORMAL|LAYOUT_CENTER_X);
32
33 new FXButton(frame, "Botão à direita", NULL, NULL, 0,
34 BUTTON_NORMAL|LAYOUT_RIGHT);

Os dois primeiros não têm nada de peculiar. O terceiro possui o texto mais longo de todos e o quarto tem o texto quebrado em duas linhas. Isso vai influir no layout dos botões, conforme veremos mais adiante.

O quinto botão é posicionado no centro (LAYOUT_CENTER_X). Isso não fará que ele fique no centro da janela, mas no centro da área restante. O BUTTON_NORMAL serve para preservar as características originais de borda e texto do botão. O sexto botão fica alinhado à direita (LAYOUT_RIGHT).

Não há muito o que discutir além disso, só mostrar o resultado.


Resultado


Percebe-se que os botões estão todos juntos. Isso se deve ao fato de eu não ter especificado nenhum tamanho para a janela principal (na verdade, não especifiquei tamanho de ninguém...). Assim, ela assume o tamanho mínimo para que caibam todos os seus filhos. E assim cada filho dela também o fez.

Por isso o "Botão com texto grande" ficou mais longo e o "Botão em duas linhas" ficou com altura maior. Como o frame foi instruído a deixar todo mundo nas mesmas dimensões, todo mundo recebeu a largura do terceiro botão e a altura do quarto.

Aliás, esse é o principal motivo pelo qual eu não especifiquei um tamanho para a janela principal, como vinha fazendo nos tutoriais anteriores (nos quais eu criava uma janela 200x200). Especificar um tamanho corre o risco de não caber todo mundo, ou de ficar grande demais. Na verdade, é bem difícil acertar. É muito melhor deixar o próprio FOX tratar esses detalhes.

E quanto ao posicionamento dos dois últimos botões? Um centralizado e o outro à direita?

Pois bem, esse é o tamanho mínimo, que coube todo mundo, então fica todo mundo juntinho. Se eu aumentar a janela, eles assumem a posição correspondente:


Desta vez fica claro: o botão "Centro" ficou no meio do espaço disponível, e o "Botão à direita" ficou no canto onde realmente deveria estar.


Conclusão

Este tópico mostrou um dos gerenciadores de layout mais simples que o FOX Toolkit fornece. Mostrou também como agem algumas dicas de layout, bem como as dicas de empacotamento discutidas aqui e aqui.

Com o tempo, ficará bem mais claro o poder que os gerenciadores de layout oferecem.

Só como presente de despedida desse tópico, uma pergunta que não quer calar:
Se eu não definisse aquelas opções de empacotamento?

Apenas veja:


Eu poderia ainda instruir os botões a ficarem centralizados no eixo Y (LAYOUT_CENTER_Y), mas isso não ajudaria muito em termos estéticos. Vou deixar isso a cargo da curiosidade do leitor.

---
Código-fonte para este tutorial.

Nenhum comentário: