Publicado em: 08/Jan/2020
Atualizado em: 09/Jan/2020
C++

C++ - Gerenciando layout em FLTK

Introdução

O FLTK utiliza um sistema simples, porém versátil para redimensionar interfaces.

Aplicação inicial

  • Para demonstrar o gerenciamento do layout criei uma aplicação composta de 9 botões com labels de 1 até 9.
  • Note que eu criei os botões totalmente fora de ordem: 5, 2, 4, 8, 6, 1, 3, 7 e 9. Isto não importa para o layout.
  • Todos os botões são filhos da janela principal.

Arquivo 01.fl

 1# data file for the Fltk User Interface Designer (fluid)
 2version 1.0304
 3header_name {.h}
 4code_name {.cxx}
 5Function {} {open
 6} {
 7  Fl_Window {} {
 8    label 01 open selected
 9    xywh {122 262 420 180} type Double visible
10  } {
11    Fl_Button {} {
12      label 5
13      xywh {140 60 140 60}
14    }
15    Fl_Button {} {
16      label 2
17      xywh {140 0 140 60}
18    }
19    Fl_Button {} {
20      label 4
21      xywh {0 60 140 60}
22    }
23    Fl_Button {} {
24      label 8
25      xywh {140 120 140 60}
26    }
27    Fl_Button {} {
28      label 6
29      xywh {280 60 140 60}
30    }
31    Fl_Button {} {
32      label 1
33      xywh {0 0 140 60}
34    }
35    Fl_Button {} {
36      label 3
37      xywh {280 0 140 60}
38    }
39    Fl_Button {} {
40      label 7
41      xywh {0 120 140 60}
42    }
43    Fl_Button {} {
44      label 9
45      xywh {280 120 140 60}
46    }
47  }
48}

Arquivo Makefile

Para realizar a compilação dos programas crie o seguinte Makefile:

 1# ----------------------------------------------------------------------
 2# Copyright (C) 2020 Geraldo Ribeiro <geraldo@intmain.io>
 3# ----------------------------------------------------------------------
 4
 5PROGRAMS=01 02 03 04
 6GENERATED=$(addsuffix .h, $(PROGRAMS)) $(addsuffix .cxx, $(PROGRAMS))
 7
 8CXXFLAGS+=-std=c++17
 9CXXFLAGS+=`fltk-config --cxxflags`
10LDFLAGS+=`fltk-config --ldflags`
11
12# Geração de código
13%.cxx: %.fl
14	fluid -c $^
15
16# Opção de compilação 1
17%: %.cxx
18	fltk-config --compile $^
19
20# Opção de compilação 2
21#%: %.cxx
22#	$(CXX) $(LDFLAGS) $^ -o $@ $(LDFLAGS)
23
24
25all: $(PROGRAMS)
26
27clean:
28	rm -f $(PROGRAMS) $(GENERATED)

Geração de código

Para gerar o código C++ (.cxx) a partir do Fluid (.fl) basta digitar make que o código é gerado e compilado:

1make
2fluid -c 01.fl
3fltk-config --compile 01.cxx

Arquivo gerado 01.cxx

 1// generated by Fast Light User Interface Designer (fluid) version 1.0304
 2
 3#include "01.h"
 4
 5int main(int argc, char **argv) {
 6  Fl_Double_Window* w;
 7  { Fl_Double_Window* o = new Fl_Double_Window(420, 180, "01");
 8    w = o; if (w) {/* empty */}
 9    { new Fl_Button(140, 60, 140, 60, "5");
10    } // Fl_Button* o
11    { new Fl_Button(140, 0, 140, 60, "2");
12    } // Fl_Button* o
13    { new Fl_Button(0, 60, 140, 60, "4");
14    } // Fl_Button* o
15    { new Fl_Button(140, 120, 140, 60, "8");
16    } // Fl_Button* o
17    { new Fl_Button(280, 60, 140, 60, "6");
18    } // Fl_Button* o
19    { new Fl_Button(0, 0, 140, 60, "1");
20    } // Fl_Button* o
21    { new Fl_Button(280, 0, 140, 60, "3");
22    } // Fl_Button* o
23    { new Fl_Button(0, 120, 140, 60, "7");
24    } // Fl_Button* o
25    { new Fl_Button(280, 120, 140, 60, "9");
26    } // Fl_Button* o
27    o->end();
28  } // Fl_Double_Window* o
29  w->show(argc, argv);
30  return Fl::run();
31}

Executando a aplicação 01

Ao ser executada a aplicação ./01 notamos que o redimensionamento está desabilitado, pois temos na janela principal somente os botões de enrolar, minimizar e fechar habilitados.

Aplicação 01 sem possibilidade de redimensionamento.
Aplicação 01 sem possibilidade de redimensionamento.

Aplicação 02

A aplicação 02 é uma cópia da 01 com redimensionamento (resizable) habilitado na janela principal.

Ativando redimensionamento na aplicação 02.
Ativando redimensionamento na aplicação 02.

Podemos ver pelo diff abaixo que apenas o flag resizable foi adicionado e o título da janela foi alterado para 02.

1diff 01.fl 02.fl
28,9c8,9
3<     label 01 open selected
4<     xywh {122 262 420 180} type Double visible
5---
6>     label 02 open selected
7>     xywh {122 262 420 180} type Double resizable visible

Note que agora o botão de maximizar é adicionado:

Aplicação 02 em tamanho inicial.
Aplicação 02 em tamanho inicial.

E podemos redimensionar a janela horizontalmente e verticalmente:

Aplicação 02 redimensionada horizontalmente.
Aplicação 02 redimensionada horizontalmente.
Aplicação 02 redimensionada verticalmente.
Aplicação 02 redimensionada verticalmente.

Note que todos os 9 botões são redimensionados da mesma forma.

Aplicação 03

A aplicação 03 é uma cópia da 02 com redimensionamento habilitado no botão 5.

Ativando o redimensionamento para o botão 05 na aplicação 03.
Ativando o redimensionamento para o botão 05 na aplicação 03.
18c8
2<     label 02 open selected
3---
4>     label 03 open selected
513c13
6<       xywh {140 60 140 60}
7---
8>       xywh {140 60 140 60} resizable
9
Aplicação 03 em tamanho inicial.
Aplicação 03 em tamanho inicial.

Ao redimensionar a janela podemos notar alguns comportamentos:

  • os botões 1, 3, 7 e 9 (diagonais de 5) permanecem com suas dimensões originais

  • os botões 2 e 8 (acima e abaixo de 5) são redimensionados horizontalmente acompanhando o tamanho 5.

  • os botões 4 e 6 (à direita e à esquerda de 5) são redimensionados verticalmente acompanhando o tamanho 5.

  • comportamento válido quando se tem somente um widget marcado como resizable.

    Aplicação 03 redimensionada.
    Aplicação 03 redimensionada.

Aplicação 04

A aplicação 04 é uma cópia da 02 com redimensionamento habilitado no botão 9.

Aplicação 04 redimensionada.
Aplicação 04 redimensionada.

Observe que o mesmo comportamento geral é aplicado:

  • diagonais são mantidas
  • acima (e abaixo se houvesse) redimensionados acompanhando a largura de 9
  • à esquerda (e à direita se houvesse) redimensionados acompanhando a altura de 9

Referências

comments powered by Disqus