fltk summer course - part ii - second impact

30
1 de 30 INTRODUÇÃ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

Upload: michel-alves

Post on 17-Jul-2015

138 views

Category:

Education


7 download

TRANSCRIPT

  • 1 de 30INTRODUO AO FAST LIGHT TOOLKIT - FLTK

    The Fast Light ToolKit

    Curso de Vero Instituto de Computao & CA ComputaoMichel Alves dos Santos - UFALBolsista do Centro de Pesquisa em Matemtica Computacional

    2 Impacto

  • 2 de 30CARACTERSTICAS DO FAST LIGHT TOOLKIT

    Caractersticas do FLTK

    Kit para desenvolvimento de interfaces grficas em C++ Disponvel para X11 (Unix/LInux), Windows, MAC OS Possui uma ferramenta para construo de interfaces [FLUID] Suporta OpenGL e prov emulao a biblioteca GLUT Distribudo sob a licena LGPL

    [Exemplo de alguns widgets pertencentes ao pacote fltk]

  • 3 de 30FLTK BIBLIOTECAS E CABEALHOS

    Bibliotecas e Cabealhos

    FLTK prov bibliotecas e cabealhos que contm :

    [Bibliotecas fltk compiladas para Microsoft Visual C++ e MinGW]

    Janelas e Classes de widget (botes, caixas, sliders, etc) Mtodos bsicos para criao, exibio e desenho Um conjunto de constantes para tipos, eventos, etc ... Um conjunto de funes auxiliares [trechos de programao no-visual] Nomenclatura associativa atravs do prefixo Fl_ ou fl_

  • 4 de 30

    Hierarquia de objetos do pacote FLTK

    HIERARQUIA DAS CLASSES DO PACOTE FLTK

    [Ilustrao da hierarquia de classes do pacote fltk]

  • 5 de 30MODELO DE PROCESSAMENTO DE EVENTOS

    Processamento de Eventos

    Aplicaes FLTK so baseadas em um modelo simples de processamento de eventos.

    Aes de usurio (keystrokes, mouse clicks, etc) causam eventos que so enviados a janela ativa

    Idle, timer e file events so disparados internamente

    Aplicaes 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 de 30

    Passos Bsicos

    PASSOS BSICOS PARA CRIAO DE UMA APLICAO FLTK

    Crie a janela principal do programa [Fl_Window window(W,H,LABEL)] Crie os widgets necessrios [ Ex: Fl_Button botao(X,Y,W,H,LABEL)] Estabelea as propriedades de posicionamento e comportamento de

    cada widget da sua aplicao Feche a rvore de associao dos widgets com a janela principal Exiba a janela principal da sua aplicao [window.show(argc,argv)] Inicie o lao de processamento de eventos [return Fl::run()]

    [Passos bsicos para criao de uma simples janela]

  • 7 de 30

    Exemplo de Janela em FLTK#include #include #include 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 CLSSICO EXEMPLO HELLO WORLD !

  • 8 de 30

    Widgets do FLTK

    TIPOS DE WIDGET DO PACOTE FLTK

    [Estilos de caixa, borda e schema do FLTK]

  • 9 de 30

    Widgets do FLTK

    TIPOS DE WIDGET DO PACOTE FLTK

    [Valuators e Caixas de Mensagem]

  • 10 de 30

    Widgets do FLTK

    TIPOS DE WIDGET DO PACOTE FLTK

    [Charts, Buttons, Clock, ComboBoxes, Positioner]

  • 11 de 30

    Widgets do FLTK

    TIPOS DE WIDGET DO PACOTE FLTK

    [MenuBars, MenuButtons, SubMenus, TextBoxes, Tabs, InputChoices, Symbols]

  • 12 de 30

    Widgets do FLTK

    TIPOS DE WIDGET DO PACOTE FLTK

    [Colormap, Help_Dialog, Color_Chooser, Tile, Scroll ]

  • 13 de 30

    Widget Methods

    MTODOS COMUNS A MAIORIA DOS WIDGETS DO FLTK

    Cada classe de widget dentro do FLTK prov um conjunto de mtodos 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 de 30

    FLTK Callbacks

    COMO RESPONDER A EVENTOS DENTRO DO FLTK USO DE CALLBACKS

    Callbacks ligam funes a eventos.widget->when(event): determina para qual evento uma funo callback ser executada. Exemplos: widget->when(FL_WHEN_ENTER_KEY) widget->when(FL_WHEN_RELEASE)widget->callback(mycallback,data): estabelece que funo ser chamada e que dados sero passados no momento em que ocorrer um determinado evento.

    Funes callback devem ser estticas [ static ] Funes callback fornecem um ponteiro Fl_Widget [que aponta para o widget que foi modificado] e um ponteiro do tipo void

  • 15 de 30

    FLTK Callbacks - Exemplo

    COMO RESPONDER A EVENTOS DENTRO DO FLTK USO DE CALLBACKS - EXEMPLO

    #include #include #include #include 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 de 30

    FLTK Callbacks e Classes

    COMO RESPONDER A EVENTOS DENTRO DO FLTK USO DE CALLBACKS E CLASSES

    Defina um mtodo esttico 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); };}; Faa com que o widget receba um ponteiro para o mtodo esttico :widget->callback((Fl_Callback*)MyStaticCallback);

  • 17 de 30

    Eventos

    TIPOS DE EVENTO DO FLTK

    Eventos so passados como argumento para o mtodo 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 contedo so avaliados via mtodos Fl::event_*(). Exemplos:

    Fl::event_button() Fl::event_x() Fl::event_key()

  • 18 de 30

    FLUIDThe Fast Light User Interface Designer

    FLUID

  • 19 de 30FLUID - FLTK USER INTERFACE DESIGNER/FAST LIGHT USER INTERFACE DESIGNER

    FLUIDO FLUID (sigla de FLTK User Interface Designer) um editor visual de interfaces grficas, uma ferramenta integrante do pacote FLTK, responsvel pela gerao automtica do cdigo fonte (na linguagem C++) da interface grfica construda.

  • 20 de 30

    FLUID Arquivos Fonte [.fl ou .fld]

    [Estrutura de trabalho da ferramenta FLUID]

    FLUID ARQUIVOS FONTE E FORMA DE TRABALHO

  • 21 de 30

    FLUID - Criando uma classe de Janela

    FLUID EXERCCIO PASSO 1

    Crie uma sub-classe da classe Fl_Window que possua um Fl_Group com bordas alteradas e um boto que faa a troca de rtulos entre o Fl_Group e o boto. O boto que receber o callback de troca de rtulos deve ser do tipo Toggle ou ser um LightButton.

  • 22 de 30

    FLUID - Criando uma classe de Janela

    FLUID EXERCCIO PASSO 2

    Crie a classe MyWindow [do tipo Fl_Window].newcodeWidget Class

  • 23 de 30

    FLUID - Criando uma classe de Janela

    FLUID EXERCCIO PASSO 3

    Insira na janela vigente um Fl_Group e um boto da sua escolha. newGroupGroup e newButtons[Um boto]

  • 24 de 30

    FLUID - Criando uma classe de Janela

    FLUID EXERCCIO PASSO 4

    Escreva uma funo callback para o boto. Olhe atentamente o cdigo ao lado e no esquea de nenhum detalhe. Depois de terminada essa etapa visualize o cdigo gerado automaticamente em EditShow Source Code

  • 25 de 30

    FLUID - Criando uma classe de Janela

    FLUID EXERCCIO PASSO 5

    Crie a funo main. newcodeMethod/Function

  • 26 de 30

    FLUID - Criando uma classe de Janela

    FLUID EXERCCIO PASSO 6

    Escreva o cdigo para criao e exibio da janela . newcodecode

  • 27 de 30

    FLUID - Criando uma classe de Janela

    FLUID EXERCCIO PASSO 7

    Salve o arquivo de especificaes do fluid. FileSave

    Gere o cdigo C++ para o seu programa. FileWrite Code

    Compile a aplicao e divirta-se !!!

  • 28 de 30DVIDAS ?

    Dvidas ?

  • 29 de 30PENSAMENTO DO DIA !

    Provrbio chins

    Pensar no captar idias, mas permitir que elas dancem diante de ns ...

  • 30 de 30FIM !!!

    Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30