Multimídia e Interface Homem

Máquina

Parte II
Desenvolvimento de Interfaces
Gráficas

Universidades Estácio de Sá -
10/8/2001 Prof. Antonio L. Apolinário Jr. 1

Introdução
„ O que é uma GUI ?
„ Como construir uma GUI ?
„ Uma ferramenta : FLTK

10/8/2001 Universidade Estácio de Sá 2

Interfaces Gráficas 1
 Programação
„ Características desejáveis em uma GUI
„ Elementos de uma GUI
„ Teoria
„ Prática
„ Aplicações Gráficas
„ Introdução a OpenGL

10/8/2001 Universidade Estácio de Sá 3

Visão geral
„ Algumas características de uma boa GUI :
Previsível Fácil Complacente
Atrativa leitura

Personalizável Independente Facilidades OO

de dispositivos

Consistente Não-Distrativa Integrada

10/8/2001 Universidade Estácio de Sá 4

Interfaces Gráficas 2
 Elementos de uma GUI
„ Janela
„ Da aplicação
„ MDI (Multiple Document Interface)
„ Help
„ Caixas de diálogo

10/8/2001 Universidade Estácio de Sá 5

Elementos de uma GUI

„ Ícones
„ Bitmaps
„ Menus
„ Em cascata
„ Destacáveis

10/8/2001 Universidade Estácio de Sá 6

Interfaces Gráficas 3
 Menubar

10/8/2001 Universidade Estácio de Sá 7

Menus Em Cascata e
Destacáveis

10/8/2001 Universidade Estácio de Sá 8

Interfaces Gráficas 4
 Elementos de uma GUI
„ Caixas :
„ de mensagens
„ de diálogos

10/8/2001 Universidade Estácio de Sá 9

Elementos de uma GUI

„ Controles
„ Botões
„ Comando
„ Opção (Radio Buttons)

10/8/2001 Universidade Estácio de Sá 10

Interfaces Gráficas 5
 Elementos de uma GUI
„ Controles (cont.)
„ Caixas de :
„ Verificação (Check Boxes)
„ Lista (List Boxes)

10/8/2001 Universidade Estácio de Sá 11

Elementos de uma GUI

„ Controles (cont.)
„ Caixas de :
„ Lista Drop-Down (Combo Boxes)
„ Texto

10/8/2001 Universidade Estácio de Sá 12

Interfaces Gráficas 6
 Elementos de uma GUI
„ Controles (cont.)
„ Botões deslizantes (Scrool Buttons)
„ Rótulos (Labels)

10/8/2001 Universidade Estácio de Sá 13

Elementos de uma GUI

„ Controles
„ Valuators

10/8/2001 Universidade Estácio de Sá 14

Interfaces Gráficas 7
 Paradigmas de Programação
„ Interface Textual
„ Entrada exclusivamente via teclado
„ Baseado em menus de opções
„ Uso de terminais
„ Programação baseada na entrada de dados
„ Opção do usuário
„ Em geral um número ou uma tecla de função

10/8/2001 Universidade Estácio de Sá 15

Paradigmas de Programação
„ Interface Gráfica
„ Entrada via teclado ou mouse
„ Baseado em componentes diversos
„ Uso de micros com capacidade gráfica
„ Programação baseada em eventos
„ Seleção (clique)
„ Foco
„ Arrastar-Soltar (Drag & Drop)
„ Etc…

10/8/2001 Universidade Estácio de Sá 16

Interfaces Gráficas 8
 Programação Orientada a
Eventos
„ Elementos básicos
„ Fila de eventos
„ Loop de eventos
„ Call Backs

10/8/2001 Universidade Estácio de Sá 17

Introdução
„ FLTK => Fast Light Tool Kit
„ GUI desenvolvida em C++
„ Multiplataforma
„ Win32 (NT, 95, 98)
„ Linux / Unix (Xwindows)
„ OS/2 (com XFree86)
„ Freeware (www.fltk.org)
„ Código aberto

10/8/2001 Universidade Estácio de Sá 18

Interfaces Gráficas 9
 Introdução
„ FLUID
„ Fast Light User Interface Designer
„ Programa gerador de interface
„ Interativo
„ Interface visual
„ Gera código C++ legivel e editável
„ Suporte OpenGL/Mesa
„ Compatibilidade com
„ XForms
„ GLUT

10/8/2001 Universidade Estácio de Sá 19

Conceitos Básicos
„ Nomeclatura
„ Funções
„ Fl::foo()
„ Fl_foo()
„ Classes e tipos
„ Fl_Foo
„ Constantes e enumerações
„ FL_FOO

10/8/2001 Universidade Estácio de Sá 20

Interfaces Gráficas 10
 Conceitos Básicos
„ Nomeclatura (cont.)
„ Arquivos de cabeçalhos (headers)
„ <FL/foo.H>

10/8/2001 Universidade Estácio de Sá 21

Meu Primeiro Programa

„ Hello world

10/8/2001 Universidade Estácio de Sá 22

Interfaces Gráficas 11
 Meu Primeiro Programa
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.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,"Hello, World!");
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();
}

10/8/2001 Universidade Estácio de Sá 23

Análise do Programa
„ Arquivos de cabeçalho (.h) para cada
componente
„ Fl_Window.H
„ Fl_Box.H
„ Criação das widgets
„ Operador new (C++)

10/8/2001 Universidade Estácio de Sá 24

Interfaces Gráficas 12
 Análise do Programa
„ Criação da janela principal
„ Fl_Window::Fl_Window(int w, int h, const char *title = 0)

„ Criação de janelas (widgets) filhas

„ Fl_Window::Fl_Window(int x, int y, int w, int h, const char *title =
0)

„ Mostrar a janela principal

„ void Fl_Window::show(int argc, char **argv)

„ Loop de eventos
„ static Fl::run()

10/8/2001 Universidade Estácio de Sá 25

Makefile
„ Utilitário make
„ Controla o processo de compilação de sistemas
„ Checa dependencias
„ Gera modulos objeto
„ Gerência o processo de linkedição
„ Permite configurar várias formas de compilação
„ Etc…

10/8/2001 Universidade Estácio de Sá 26

Interfaces Gráficas 13
 Makefile – Um exemplo
.SUFFIXES: .cpp .cxx .fl .h
# compiler names:
CXX = g++
#CC = gcc
MAKEDEPEND = $(CXX) -M
MAKEINTERFACE = fluid
# flags for C++ compiler:
CFLAGS = # -O2 -Wall
CXXFLAGS = # -O2 -Wall -Wno-return-type
DEFFLAGS = -DHAVE_GL
# libraries to link with:
MATLIB = -lm
FLTKLIB = -lfltk
MESALIBS = #-lMesaGL -lMesaGLU
X11LIBS = -lX11 -lXext -lXmu -lXi
LIBPATH = -L/usr/X11R6/lib

# ***********************************************************************************
all: hello
hello: hello.cpp
@echo "Compiling hello...."
$(CXX) $(CFLAG) $(CPPFLAGS) $(LIBPATH) hello.cpp $(MATLIB) $(FLTKLIB) $(MESALIBS)
$(X11LIBS) -o $@
clean:
@echo "Clearing ..."
rm -f *.o core *~ hello hellobtn hellobtnOut

10/8/2001 Universidade Estácio de Sá 27

Modificando Hello
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Button.H>

int main(int argc, char **argv) {

Fl_Window *window = new Fl_Window(300,180);
Fl_Box *box = new Fl_Box(FL_UP_BOX,20,40,260,100,"");
Fl_Button *btn = new Fl_Button(40,60,200,60, "Hello");

btn->labelfont(FL_BOLD+FL_ITALIC);
btn->labelsize(24);
btn->labeltype(FL_SHADOW_LABEL);

window->end();
window->show(argc, argv);
return Fl::run();
}

10/8/2001 Universidade Estácio de Sá 28

Interfaces Gráficas 14
 Respondendo a um evento
#include <iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Button.H>

void TrataClique(Fl_Button* o, void* v)

{
cout << "Clique !!" << endl;
}
int main(int argc, char **argv) {
Fl_Window *window = new Fl_Window(300,180);
Fl_Box *box = new Fl_Box(FL_UP_BOX,20,40,260,100,"");
Fl_Button *btn = new Fl_Button(40,60,200,60, "Hello");
btn->labelfont(FL_BOLD+FL_ITALIC);
btn->labelsize(24);
btn->labeltype(FL_SHADOW_LABEL);
btn->callback((Fl_Callback*)TrataClique);
btn->type(FL_TOGGLE_BUTTON);
window->end();
window->show(argc, argv);
return Fl::run();
}
10/8/2001 Universidade Estácio de Sá 29

Interfaces Gráficas 15