FLTK (pronounced "fulltick") is a cross-platform C++ GUI toolkit for UNIX®/Linux® (X11), Microsoft® Windows®, and MacOS® X. FLTK provides modern GUI functionality without the bloat and supports 3D graphics via OpenGL® and its built-in GLUT emulation. FLTK is designed to be small and modular enough to be statically linked, but works fine as a shared library. FLTK also includes an excellent UI builder called FLUID that can be used to create applications in minutes. FLTK is provided under the terms of the GNU Library Public License, Version 2 with exceptions that allow for static linking. More informations in http://www.fltk.org.

1. 1 de 30INTRODUÇÃO AO FAST LIGHT TOOLKIT - FLTK
The Fast Light ToolKit
Curso de Verão – Instituto de Computação & CA Computação
Michel Alves dos Santos - UFAL
Bolsista do Centro de Pesquisa em Matemática Computacional
2º Impacto

2. 2 de 30CARACTERÍSTICAS DO FAST LIGHT TOOLKIT
Características do FLTK
• Kit para desenvolvimento de interfaces gráficas em C++
• Disponível para X11 (Unix/LInux), Windows, MAC OS
• Possui uma ferramenta para construção de interfaces [FLUID]
• Suporta OpenGL®
e provê emulação a biblioteca GLUT
• Distribuído sob a licença LGPL
[Exemplo de alguns widgets pertencentes ao pacote fltk]

3. 3 de 30FLTK – BIBLIOTECAS E CABEÇALHOS
Bibliotecas e Cabeçalhos
FLTK provê bibliotecas e cabeçalhos que contêm :
[Bibliotecas fltk compiladas para Microsoft Visual C++ e MinGW]
• Janelas e Classes de widget (botões, caixas, sliders, etc)
• Métodos básicos para criação, exibição e desenho
• Um conjunto de constantes para tipos, eventos, etc ...
• Um conjunto de funções auxiliares [trechos de programação não-visual]
• Nomenclatura associativa através do prefixo Fl_ ou fl_

4. 4 de 30
Hierarquia de objetos do pacote FLTK
HIERARQUIA DAS CLASSES DO PACOTE FLTK
[Ilustração da hierarquia de classes do pacote fltk]

5. 5 de 30MODELO DE PROCESSAMENTO DE EVENTOS
Processamento de Eventos
Aplicações FLTK são baseadas em um modelo simples de
processamento de eventos.
Ações de usuário (keystrokes, mouse clicks, etc) causam eventos que
são enviados a janela ativa
Idle, timer e file events são disparados internamente
Aplicações FLTK devem “escutar” ativamente eventos de
processamento oriundos da fila de eventos
Fl::check() - checa se existem eventos na fila
Fl::wait() - espera pelo aparecimento de um evento
Fl::run() - estabelece o processamento de um evento

6. 6 de 30
Passos Básicos
PASSOS BÁSICOS PARA CRIAÇÃO DE UMA APLICAÇÃO FLTK
Crie a janela principal do programa [Fl_Window window(W,H,LABEL)]
Crie os widgets necessários [ Ex: Fl_Button botao(X,Y,W,H,LABEL)]
Estabeleça as propriedades de posicionamento e comportamento de
cada widget da sua aplicação
Feche a árvore de associação dos widgets com a janela principal
Exiba a janela principal da sua aplicação [window.show(argc,argv)]
Inicie o laço de processamento de eventos [return Fl::run()]
[Passos básicos para criação de uma simples janela]

7. 7 de 30
Exemplo de Janela em FLTK
#include <FL/Fl.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Window.H>
int main(int argc, char* argv[])
{
Fl_Window *window = new Fl_Window(300,180);
Fl_Box *box = new Fl_Box(20,40,260,100,“Alô, Mundo!");
box->box(FL_UP_BOX);
box->labelsize(36);
box->labelfont(FL_BOLD+FL_ITALIC);
box->labeltype(FL_SHADOW_LABEL);
window->end();
window->show(argc, argv);
return Fl::run();
}
O CLÁSSICO EXEMPLO HELLO WORLD !

8. 8 de 30
Widgets do FLTK
TIPOS DE WIDGET DO PACOTE FLTK
[Estilos de caixa, borda e schema do FLTK]

9. 9 de 30
Widgets do FLTK
TIPOS DE WIDGET DO PACOTE FLTK
[Valuators e Caixas de Mensagem]

10. 10 de 30
Widgets do FLTK
TIPOS DE WIDGET DO PACOTE FLTK
[Charts, Buttons, Clock, ComboBoxes, Positioner]

11. 11 de 30
Widgets do FLTK
TIPOS DE WIDGET DO PACOTE FLTK
[MenuBars, MenuButtons, SubMenus, TextBoxes, Tabs, InputChoices, Symbols]

12. 12 de 30
Widgets do FLTK
TIPOS DE WIDGET DO PACOTE FLTK
[Colormap, Help_Dialog, Color_Chooser, Tile, Scroll ]

13. 13 de 30
Widget Methods
MÉTODOS COMUNS A MAIORIA DOS WIDGETS DO FLTK
Cada classe de widget dentro do FLTK provê um conjunto
de métodos que manipula o estado/valor das propriedades
dos objetos derivados dessas classes.
– widget->position(x, y)
– widget->resize(x, y, width, height)
– widget->size(width, height)
– widget->color(color) (ex: FL_BLUE)
– widget->labelcolor(color)
– widget->when(event)
– widget->callback(static_function, data)

14. 14 de 30
FLTK Callbacks
COMO RESPONDER A EVENTOS DENTRO DO FLTK – USO DE CALLBACKS
Callbacks ligam funções a eventos.
widget->when(event): determina para qual evento uma
função callback será executada. Exemplos:
• widget->when(FL_WHEN_ENTER_KEY)
• widget->when(FL_WHEN_RELEASE)
widget->callback(mycallback,data): estabelece que
função será chamada e que dados serão passados no
momento em que ocorrer um determinado evento.
• Funções callback devem ser estáticas [ static ]
• Funções callback fornecem um ponteiro Fl_Widget [que
aponta para o widget que foi modificado] e um ponteiro do tipo void

15. 15 de 30
FLTK Callbacks - Exemplo
COMO RESPONDER A EVENTOS DENTRO DO FLTK – USO DE CALLBACKS - EXEMPLO
#include <cstdlib>
#include <FL/Fl.H>
#include <FL/Fl_ask.H>
#include <FL/Fl_Window.H>
void MyCallback(Fl_Widget* mywidget, void* userdata)
{
fl_message(“Saindo …"); exit(0);
}
int main(int argc, char* argv[])
{
Fl_Window *window = new Fl_Window(300,180);
window->callback(MyCallback,0);
window->show(argc, argv);
return Fl::run();
}

16. 16 de 30
FLTK Callbacks e Classes
COMO RESPONDER A EVENTOS DENTRO DO FLTK – USO DE CALLBACKS E CLASSES
Defina um método estático em sua classe que aceite um
ponteiro para a mesma :
class Foo
{
void MyCallback(Fl_Widget* mywidget, void* userdata);
static void MyStaticCallback(Fl_Widget* w, void* userdata)
{
((Foo*)(w->parent()))->MyCallback(w,userdata);
};
};
Faça com que o widget receba um ponteiro para o método
estático :
widget->callback((Fl_Callback*)MyStaticCallback);

17. 17 de 30
Eventos
TIPOS DE EVENTO DO FLTK
Eventos são passados como argumento para o método
virtual Fl_Widget::handle(int). Exemplos :
• Eventos de Mouse : FL_PUSH, FL_RELEASE, FL_MOVE, …
• Eventos de Foco : FL_FOCUS, FL_LEAVE, ...
• Eventos de Teclado : FL_KEYDOWN, FL_KEYUP, ...
Tipos de evento e conteúdo são avaliados via métodos
Fl::event_*(). Exemplos:
• Fl::event_button()
• Fl::event_x()
• Fl::event_key()

18. 18 de 30
FLUID
The Fast Light User
Interface Designer
FLUID

19. 19 de 30FLUID - FLTK USER INTERFACE DESIGNER/FAST LIGHT USER INTERFACE DESIGNER
FLUID
O FLUID (sigla de FLTK User Interface Designer) é um editor visual de
interfaces gráficas, uma ferramenta integrante do pacote FLTK,
responsável pela geração automática do código fonte (na linguagem
C++) da interface gráfica construída.

20. 20 de 30
FLUID – Arquivos Fonte [.fl ou .fld]
[Estrutura de trabalho da ferramenta FLUID]
FLUID – ARQUIVOS FONTE E FORMA DE TRABALHO

21. 21 de 30
FLUID - Criando uma classe de Janela
FLUID – EXERCÍCIO – PASSO 1
Crie uma sub-classe da
classe Fl_Window que
possua um Fl_Group com
bordas alteradas e um botão
que faça a troca de rótulos
entre o Fl_Group e o botão.
O botão que receberá o
callback de troca de rótulos
deve ser do tipo Toggle ou
ser um LightButton.

22. 22 de 30
FLUID - Criando uma classe de Janela
FLUID – EXERCÍCIO – PASSO 2
Crie a classe MyWindow [do tipo Fl_Window].
new→code→Widget Class

23. 23 de 30
FLUID - Criando uma classe de Janela
FLUID – EXERCÍCIO – PASSO 3
Insira na janela vigente um Fl_Group e um botão da sua
escolha.
new→Group→Group e new→Buttons→[Um botão]

24. 24 de 30
FLUID - Criando uma classe de Janela
FLUID – EXERCÍCIO – PASSO 4
Escreva uma função
callback para o botão.
Olhe atentamente o código
ao lado e não esqueça de
nenhum detalhe. Depois
de terminada essa etapa
visualize o código gerado
automaticamente em
Edit→Show Source Code

25. 25 de 30
FLUID - Criando uma classe de Janela
FLUID – EXERCÍCIO – PASSO 5
Crie a função main.
new→code→Method/Function

26. 26 de 30
FLUID - Criando uma classe de Janela
FLUID – EXERCÍCIO – PASSO 6
Escreva o código para criação e exibição da janela .
new→code→code

27. 27 de 30
FLUID - Criando uma classe de Janela
FLUID – EXERCÍCIO – PASSO 7
Salve o arquivo de especificações do fluid.
File→Save
Gere o código C++ para o seu programa.
File→Write Code
Compile a aplicação e divirta-se !!!

28. 28 de 30DÚVIDAS ?
Dúvidas ?

29. 29 de 30PENSAMENTO DO DIA !
Provérbio chinês
“Pensar não é captar idéias, mas permitir que elas dancem diante
de nós ...”

30. 30 de 30FIM !!!