1. O documento introduz o Fast Light Toolkit (FLTK), uma biblioteca gráfica leve para C++ disponível para vários sistemas operacionais. 2. É descrito o que são widgets, componentes gráficos de interface do usuário agrupados em kits de desenvolvimento. Exemplos incluem botões, caixas de lista e texto. 3. São apresentadas ferramentas para desenvolvimento de interfaces gráficas como IDEs, editores de código e frameworks gráficos como FLTK, GTK+ e Qt.

1. 1 de 55INTRODUÇÃ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
1º Impacto

2. 2 de 55O QUE É GUI ?
O que é GUI ?
Acrônimo para Graphical User Interface, ou seja, um tipo de interface do usuário que
permite a interação com dispositivos digitais através de elementos gráficos como ícones,
botões, caixas de entrada e outros indicadores visuais, em contraste a interface de linha
de comando.
A interação é feita geralmente através de um mouse ou teclado, com os quais o usuário é
capaz de selecionar símbolos e manipulá-los de forma a obter algum resultado prático.
Esses símbolos são designados de widgets e são agrupados em kits.
[A esquerda KDE 4.1 e a direita uma interface modificada do Desktop SUGAR para OLPC ]

3. 3 de 55INTERAÇÕES BÁSICAS – ESTILOS DE INTERAÇÃO
Estilos de Interação
What you see is what you get (WYSIWYG) :
Realimentação visual é igual ao resultado obtido.
Non-WYSIWYG :
Realimentação visual difere do resultado obtido.
Manipulação Direta :
Interação ocorre diretamente sobre a realimentação visual.
[Algumas formas de interação entre usuários e sistemas computacionais]

4. 4 de 55O QUE SÃO WIDGETS ?
O que são WIDGETs ?
São componentes da interface gráfica providos de geometria (look) e comportamento
(feel) próprios. São agrupados em API´s [de baixo ou alto nível] ou Kits.
[Buttons]
[List Box] [Combo Box]
[Dialog Box]
[Scrollbars]
[Menubar + Toolbar] [Textboxes]

5. 5 de 55CLASSIFICAÇÃO DOS WIDGETS
Classificação dos Widgets
Widgets de baixo nível são utilizados na confecção do sistema
operacional e fazem parte do núcleo do sistema [Este núcleo é acessado por
outros widgets de alto nível que por fim montam a GUI]. Alguns exemplos são:
 Windows 32/64 API;
 MAC Carbon;
 Unix X-Windows.
Widgets de alto nível seriam os objetos finais propriamente ditos. Muitas
vezes fazem referências a objetos de baixo nível fornecidos pelo sistema operacional.
Estes objetos são facilmente encontrados em bibliotecas de desenvolvimento (toolkit)
ou em frameworks. Alguns exemplos são:
 WxWidgets (chamada anteriormente de WxWindows);
 Cocoa (MAC OS X);
 MFC (Microsoft Foundation Classes);
 WTL (Windows Template Library - utilizada como substituto para partes do MFC)
 Motif (usado no Common Desktop Enviroment- UNIX CDE)
 Lesstif (uma versão LGPL do Motif) , GTK +, AWT, Swing, SWT/JFace ...

6. 6 de 55
API´s e Sistemas
Operacionais
ESTUDO DE CASO – API´s e SISTEMAS OPERACIONAIS

7. 7 de 55COMO PROGRAMAR PARA WINDOWS [API , MFC E WINDOW FORMS]
Programação GUI para a Família M$ Windows®
WINDOWS API
MFC [MICROSOFT FOUNDATION CLASSES]
WINDOWS FORMS [.NET GUI SYSTEM]
Arquitetura de aplicações usando Windows Forms
Bibliotecas que “empacotam” porções da API do Windows
em classes e dão aos desenvolvedores de programas um
conjunto de componentes reutilizáveis escritos em C++
que encapsulam as funcionalidades necessárias para o
desenvolvimento de aplicações para sistemas
operacionais Windows®.
Nova forma de “janelamento” introduzida com a plataforma
.NET. Esse é o mecanismo base para desenvolvimento de
aplicações que são executadas junto a CLR [Common
Language Runtime]
Construção em baixo nível de todos os componentes
visuais [botões, barras de status, menus] e não-visuais
[gerenciamento de processos, escrita em disco, etc]
pertencentes aos sistemas operacionais MS Windows®.

8. 8 de 55COMO PROGRAMAR PARA MAC OS X [CARBON E COCOA]
Programação GUI para o MAC OS X
[MAC X – Estrutura das API´s - nativamente são suportadas cinco : Carbon, Cocoa, POSIX, Toolbox (antigo Classic Enviroment) e Java ]

9. 9 de 55COMO PROGRAMAR PARA MAC OS X [CARBON E COCOA]
Programação GUI para o MAC OS X
COCOA [Mac OS X]
CARBON [Mac OS 9 e Mac OS X]
É um conjunto procedural de API´s em C para MAC
OS X que é baseado nas “velhas” API´s do MAC
OS 9. Nem todas as API´s carbon foram portadas
pois existem diferenças radicais entre MAC OS X e
MAC OS 9 [uma delas é a não compatibilidade total da API
Carbon com aplicações de 64 bits para MAC OS 10.5]
É uma API orientada a objetos para
desenvolvimento de aplicações escrita em
Objective-C e Java. Cocoa é largamente
baseado nos frameworks do OpenStep e
consiste primariamente em duas partes : A
Foundation (classes fundamentais) e a
Applicatino Kit (classes para elementos GUI).
Core Foundation e outras camadas de software no Mac OS X
Core Foundation e Carbon no Mac OS 9

10. 10 de 55COMO PROGRAMAR PARA MAC OS X [CARBON E COCOA]
[Exemplo de uma aplicação “carbonizada” sendo executada em MAC OS X]

11. 11 de 55COMO PROGRAMAR PARA X WINDOW SYSTEM
Programação GUI para X Window System
X Window System
O X-Window, X11 ou simplesmente X é um protocolo e seu software associado
possibilita o emprego de uma interface gráfica com o conceito de janelas.
Originalmente chamado simplesmente de X, foi desenvolvido no MIT em 1984.
Atualmente está na versão 11 e por isso carrega no nome este número.
X-Window também é o toolkit e protocolo padrão para GUI nos sistemas Unix e
assemelhados, como o Linux, mas existem versões para outros sistemas
operacionais, como o Microsoft Windows e o Mac OS, por exemplo.
O X (como é comumente chamado) funciona
segundo o modelo cliente-servidor. Este modelo
de comunicação permite o uso de janelas de modo
transparente através da rede.
Logotipo do X
Programas desenvolvidos na distribuição do núcleo
do X : xterm, twm, xdm, xconsole, xclock, xeyes,
Xserver, xclipboard entre outros ...
Captura de tela do X em execução com diversos
aplicativos sendo utilizados.

12. 12 de 55COMO PROGRAMAR PARA X WINDOW SYSTEM
[O TWM - Tab Window Manager – também conhecido como Tom´s Window Manager, devido ao seu principal autor]

13. 13 de 55
Widgets de Alto Nível
ESTUDO DE CASO – WIDGETS DE ALTO NÍVEL

14. 14 de 55LISTA DE WIDGET TOOLKITS – API´s DE ALTO NÍVEL
WIDGET TOOLKITS
EWL
E muitos outros ...

15. 15 de 55CAPACIDADES/FUNCIONALIDADES DOS WIDGET TOOLKITS
O que os Widget Toolkits podem fazer ?
DESKTOP EQUINOX – Construído a partir
de um fork do FLTK chamado eFLTK.

16. 16 de 55CAPACIDADES/FUNCIONALIDADES DOS WIDGET TOOLKITS
O que os Widget Toolkits podem fazer ?
DESKTOP GNOME – Construído a
partir do kit GTK+

17. 17 de 55CAPACIDADES/FUNCIONALIDADES DOS WIDGET TOOLKITS
O que os Widget Toolkits podem fazer ?
DESKTOP KDE – Construído a partir das
classes do kit QT da trolltech.

18. 18 de 55CAPACIDADES/FUNCIONALIDADES DOS WIDGET TOOLKITS
O que os Widget Toolkits podem fazer ?
DESKTOP Enlightenment – Construído a
partir do kit EWL.

19. 19 de 55FERRAMENTAS DE PRODUÇÃO – IDE´s E EDITORES AVANÇADOS
Ferramentas de
Produção
FERRAMENTAS UTILIZADAS NA PRODUÇÃO DE APLICATIVOS
GRÁFICOS.

20. 20 de 55IDE´S E EDITORES
IDE´S
Editores
O problema com IDE´s algumas vezes está localizado em seus editores que por sua
vez pecam por falta de funcionalidades específicas. Por isso alguns programadores
preferem usar editores robustos. Abaixo segue uma lista :
VIM [http://vim.sourceforge.net/] – Linux – Unix - Windows
NOTEPAD++ [http://notepad-plus.sourceforge.net/] - Win32 only
Quando programamos em C++ o uso de uma IDE facilita consideravelmente o
trabalho. Abaixo segue uma pequena lista :
GEANY [http://www.geany.org/] – Cross-Plataform
DevC++ [http://www.bloodshed.net/devcpp.html ] – Win32 e Linux
KDevelop [http://www.kdevelop.org/] – Linux/Unix
Anjuta [http://anjuta.sourceforge.net/] – Linux/Unix
Microsoft Visual C++, Borland C++ Builder, Eclipse, CodeBlocks, NetBeans, etc.
Emacs, EditPlus, UltraEdit, Scite, Gedit, Kate, Nedit, etc.

21. 21 de 55
IDE´s
IDE´S

22. 22 de 55
DevC++
DEVC++
Homepage : http://www.bloodshed.net/
Linguagens : C, C++
Características :
- Leve, rápido e sem ostentação, recomendado para iniciantes ...
- Frontend para o “Minimalist GNU for Windows” [MinGW]
- Pode ser usado com Cygwin
- Criação de executáveis Win32 nativos [console, GUI, Dll´s, OpenGL]
- Gerenciador de pacotes integrado
- Repositório on-line em www.devpaks.org

23. 23 de 55DEVC++
[DevC++ - um frontend leve para o MinGW]

24. 24 de 55
KDevelop
KDEVELOP
Homepage : http://www.kdevelop.org/
Linguagens : Python, PHP, JavaScript, Perl, HTML, C, C++, ...
Características [KDevelop] :
- Ferramenta RAD, Frontend para o GCC, GDB, controle de versões
- Editor de códigos fontes (Kate)
Características [QtDesigner] :
- Ferramenta RAD, Integração com o MS Visual Studio, Kdevelop
- Interface amigável

25. 25 de 55KDEVELOP
[KDevelop - visão do code completion da ferramenta em ação]

26. 26 de 55KDEVELOP + QTDESIGNER
[QtDesigner - ferramenta para construção e diagramação de interfaces gráficas baseadas no pacote Qt]

27. 27 de 55
Anjuta
ANJUTA
Homepage : http://anjuta.sourceforge.net
Linguagens : C, C++, C#, Java, Python, ...
Características [Anjuta] :
- Interface amigável, Plugins, Debugger (gdb, valgrid)
- Integração com Glade, Ótima edição de códigos fontes
- Dependência do GNOME e UNIX/Linux
Características [Glade] :
- Ferramenta RAD para desenvolvimento de interfaces gráficas para
GTK+ toolkit e GNOME, Multiplataforma

28. 28 de 55ANJUTA
[Anjuta – editor de código da ferramenta anjuta]

29. 29 de 55ANJUTA + GLADE
[Anjuta – Uso do Glade - ferramenta para construção e diagramação de interfaces gráficas]

30. 30 de 55
Microsoft Visual C++
MICROSOFT VISUAL C++
Homepage : http://go.microsoft.com/fwlink/?LinkId=47810&clcid=409
Linguagens : C, C++
Características :
- Parte integrante do pacote Microsoft Visual Studio
- Ambiente de desenvolvimento de aplicações padrão da Microsoft
- Vasta gama de bibliotecas e pacotes de desenvolvimento
- Desenvolvimento GUI usando a Windows API, a MFC ou Windows Forms
- Arquivos de ajuda densos e bem documentados [MSDN]

31. 31 de 55MICROSOFT VISUAL C++
[MS Visual C++ - editor de código do pacote Microsoft Visual Studio]

32. 32 de 55
Borland C++ Builder
BORLANDO C++ BUILDER
Homepage : http://www.borland.com/
Linguagens : C, C++
Características :
- Ambiente visual para o desenvolvimento de aplicativos.
- Criação de aplicativos C++ para Windows [e Linux a partir da versão 6]
- A construção das interfaces gráficas é feita com a filosofia WYSIWYG
- Paradigma baseado na organização dos componentes de software em objetos
- A VCL é a biblioteca de classes do C++ Builder [componentes visuais e não-visuais]
- CLX para desenvolvimento de aplicações cross-plataform.

33. 33 de 55BORLANDO C++ BUILDER
[Borland C++ Builder – editor de código, paleta de componentes e construtor de interfaces WYSIWYG]

34. 34 de 55
Eclipse
ECLIPSE
Homepage : http://www.eclipse.org/
Linguagens : C, C++, Java, PHP, UML, ...
Características :
- Altamente utlizado pela comunidade
- Investimento inicial de 40 milhões pela IBM
- Controle de versões, plugins disponíveis para diversas linguagens
- Multiplataforma

35. 35 de 55ECLIPSE
[Eclipse Ganymede – editor de código e plugin CDT para desenvolvimento em C/C++]

36. 36 de 55
CodeBlocks
CODEBLOCKS
Homepage : http://www.codeblocks.org
Linguagens : C, C++
Características :
- Open Source
- Suporta vários compiladores [GCC, Visual C++ Toolkit, Borland C++, Intel C/C++, Watcom,etc]
- Construído a partir do toolkit WxWidgets
- Multiplataforma

37. 37 de 55CODEBLOCKS
[CodeBlocks – ferramenta construída com os componentes WxWidgets]

38. 38 de 55
NetBeans
NETBEANS
Homepage : http://www.netbeans.org/
Linguagens : C, C++, Java, Python, UML, Ruby, Linguagens de
script, ....
Características :
- Ferramenta RAD, Plugins, Multiplataforma

39. 39 de 55NETBEANS
[NetBeans – versão para desenvolvimento em C/C++]

40. 40 de 55
Editores
EDITORES

41. 41 de 55VIM
Vi IMproved
[VIM – poderoso editor para manipulação de arquivos em modo texto]

42. 42 de 55NOTEPAD++
Notepad++
[Notepad++ – editor sendo usado no modo C/C++]

43. 43 de 55GEANY
Geany
[Geany – editor cross-plataform feito em GTK]

44. 44 de 55
Finalmente FLTK
UM PASSEIO RÁPIDO PELO FAST LIGHT TOOLKIT

45. 45 de 55O QUE É FLTK ?
The Fast Light ToolKit
O FLTK (sigla de Fast Light ToolKit), pronunciado como "fulltick", é um kit de
desenvolvimento de interfaces gráficas para a linguagem C++, disponível para
diversos sistemas operacionais (GNU/Linux – através do sistema gráfico X11, M$
Windows®
, Mac OS X, OS/2 e Solaris).
Suporta gráficos 3D via OpenGL®, bem como provê emulação à
biblioteca GLUT.
Fornece um rico conjunto de componentes gráficos porém, visando se
manter sempre enxuto e modular, prezando pela eficiência sem
ostentação.
Software Livre distribuído sob a licença LGPL (GNU Library General
Public License).
Possui uma ferramenta chamada FLUID, que permite de maneira fácil e
visual a construção de todo o esqueleto de uma interface gráfica.

46. 46 de 55
Hierarquia de objetos do pacote FLTK
HIERARQUIA DAS CLASSES DO PACOTE FLTK

47. 47 de 55FLUID - 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.

48. 48 de 55SUPORTE A GRÁFICOS 3D VIA OPENGL E A KITS COMO O GLUT
Suporte a OpenGL®

49. 49 de 55UM “HELLO WORLD !” EM FLTK
Um “Hello World !” em FLTK
Observe como é fácil e rápido construir um simples “Hello World !” usando FLTK,
apenas 3 linhas !

50. 50 de 55UM “HELLO WORLD !” USANDO O CONCEITO DE ORIENTAÇÃO A OBJETOS
Um “Hello World !” usando Orientação a Objetos
Usando o conceito de “Programação Orientada a Objetos” tudo se torna ainda mais
fácil pois podemos compor ou estender os nossos próprios objetos a partir das
classes nativas do pacote FLTK.

51. 51 de 55OBTENDO E COMPILANDO OS FONTES DO FLTK
Obtenha os fontes do pacote FLTK através da URL www.fltk.org [escolha a
versão mais estável, atualmente é a série 1.1.x]
Download
Usando Unix/Linux [com o pacote gcc]
Compile e instale o pacote com os seguintes comandos:
#tar –xzvf fltk-1.1.x-source.tar.gz
#cd fltk-1.1.x
#./configure
#make
#make install
Usando a Família M$ Windows®
Podem ser usadas as diversas opções de projeto e makefiles que acompanham o
pacote FLTK [projetos para M$ Visual C++, C++ Builder, DevC++, entre outros], ou
simplesmente o uso do MSys + MinGW.
Observação
Você deve ter
privilégios de
super-usuário ou
as permissões
adequadas para
instalação desse
pacote.

52. 52 de 55COMPILANDO O PRIMEIRO PROGRAMA
Usando a Família M$ Windows®
Usando Unix/Linux [com o pacote gcc]
Se o arquivo hello.cxx depende das bibliotecas FLTK poderemos compilá-lo com o
seguinte comando :
g++ hello.cxx -o hello -I/path/to/fltk/includes
-L/path/to/fltk/libs -lfltk -lXext -lX11 –lm
ou
fltk-config --compile hello.cxx
Com o auxílio de IDE´s como o M$ Visual C++ ou Borland C++ Builder nos
parâmetros de vinculação/“linkagem” acrescente as bibliotecas uuid.lib, ole32.lib,
comctl32.lib, wsock32.lib.
Com o auxílio de IDE´s como o DevC++, Geany, Eclipse, NetBeans (entre outras) [e
o pacote MinGW] devemos executar a vinculação com as seguintes bibliotecas:
-lfltk –luuid -lole32 –lcomctl32 –lwsock32
Observação
Verifique se os
pacotes libxext-
dev e libx11-dev
foram previamente
instalados !

53. 53 de 55DÚVIDAS ?
Dúvidas ?

54. 54 de 55PENSAMENTO DO DIA !
Provérbio japonês
“Não adianta ir para o rio apenas com a intenção de pescar,
deve-se sobretudo carregar consigo a isca e o anzol ...”

55. 55 de 55FIM !!!