datastructuren college 13

datastructuren college 13 GUI deel 2 1 events for the GUI een event is iedere voor het programma van buiten komende gebeurtenis muis knop in, nog steeds in, los, bewogen... het GUI-systeem doet veel werk voor je er is een klasse GUI die het basiswerk doet maak zelf een subklasse van de klasse GUI jij moet handlers (functies/methoden) schrijven die de events afhandelen het GUI-systeem zorgt voor koppeling events aan handlers programma hoeft zich dus nooit af te vragen of er n event is en welke handler dan gebruikt moet worden 2 de GUI_kernel waarom een GUI_Kernel er zijn heelveel details te regelen in een GUI de ervaren programmeur wil dit kunnen er is daarom een ingewikkeld interface als beginner wil je niet alle details de GUI_kernel biedt een simpel interface lang niet alles kan, maar wat kan gaat simpel(er) ontwerp GUI_kernel de class GUI regelt het gedrag van de GUI de event handlers zijn methoden binnen deze class een specifieke GUI is een subclass van GUI definieert handlers (opnieuw) dynamic binding van methoden beperkingen er is maar een window 3 4 1

de GUI klasse class GUI GUI ( GSIZE, char *title ); void Run ( WINARGS winargs ); void Run ( Menu& menu, WINARGS winargs ); virtual void Window ( const RECT& area ) virtual void Mouse ( const MOUSEINFO& mouse_info) virtual void Keyboard ( const KEYINFO& key_info virtual void Timer ( const int dt ) friend class Canvas;... private:... de handlers 5 het canvas al het tekenen binnen het window op het canvas class Canvas zorg dat er maar friend class GUI; één cavas is Canvas ( GUI &gui ); void setpencolour ( RGBCOLOUR ); void setpenpos ( GPOINT ); void togglexormode ( ); void drawpoint ( ); void drawlineto ( GPOINT ); void drawrectangle ( GPOINT, GPOINT ); void drawtext ( const char *s ); void drawoval ( GPOINT, GPOINT ); void drawpolygon ( GPOINT points [], int size ); void fillrectangle ( GPOINT, GPOINT ); void filloval ( GPOINT, GPOINT ); void fillpolygon ( GPOINT points [], int size ); private: 6 my first GUI program my first GUI program 2 #include "gui_kernel.h" const int SreenWidth = 300; const int ScreenHight = 200; class mygui : public GUI mygui () : GUI(GSIZE(SreenWidth,ScreenHight),"my first GUI") void Window ( const RECT& area ); ; void mygui :: Window ( const RECT& area ) Canvas canvas ( *this ); canvas. setpencolour ( RedRGB ); canvas. setpenpos ( GPOINT ( 30, 30 )); canvas. drawtext ( "Hallo Nijmegen" ); de subklasse van GUI stuk wat je moet tekenen de windowevent handler 7 hoe maken we een GUI object maak gui-object binnen de try om fouten te vangen dus geen globaal object gebruik functie met static lokaal object schrijf bij gebruik thegui( ) i.p.v. thegui mygui& thegui() static mygui mg; return mg; zo gedraagt dit zich als globale, maar wordt pas binnen try gemaakt 8 2

my first GUI program slot gebruik exceptions om fouten af te handelen try en catch zorgen hiervoor gebruik copy/paste programming int WINAPI WinMain (HINSTANCE hi, HINSTANCE hpi, PSTR cmdline, int cmdshow) try thegui(). Run (WINARGS(hi, hpi, cmdline, cmdshow)); catch ( const GUIException& ge ) ge.report (); return 0; WinMain i.p.v. main alleen gebruikt als er binnen de try een exception komt 9 exceptions gooien bedoeld om op een nette manier fouten af te vangen als je fout opmerkt gooi je een exception char deelfout [] = "Delen door 0!"; int deel ( int t, int n ) if ( n==0 ) throw deelfout; else return t/n; je kunt dingen van ieder type gooien vaak maak je een nieuwe class voor de fouten 10 exceptions vangen als exception gegooid wordt binnen een try, wordt die gevangen door de binnenste try met het goede type int main ( int argc, char *argv[] ) try cout << deel (2,0) << endl; catch ( int n ) vangt niets, verkeerde type cout << n << " gevangen\n"; catch ( char *s ) vangt onze fout cout << s << endl; catch (...) vangt alles cout << "Onbekende exception gevangen!\n"; een simpele key handler void mygui :: Keyboard ( const KEYINFO& key ) if ( key. isascii ) switch ( key. keycode ) case 'q': thegui ( ). starttimer ( ticks ) ; return; case 's': thegui ( ). Stop ( ) ; return; default: return; system ( "PAUSE" ); return EXIT_SUCCESS; geeft dus: Delen door 0! 11 12 3

muis handler meestal lang hier willen we lijnen tekenen mouse down begint lijn still down wis oude lijn; teken nieuwe up wis oude lijn; teken definitieve lijn moet dus ook lijn tekenen gebruik XOR trucje 13 timer handler void mygui :: Timer ( const int dt ) int tpm = 60 * ticks ; // aantal tikken per minuut tikken = ( tikken + dt ) % tpm; GPOINT eind ( mx + r * sin ( pi * 2 * tikken / tpm ), my r * cos ( pi * 2 * tikken / tpm )); Canvas canvas ( *this ); canvas. setpencolour ( RedRGB ); canvas. filloval ( lo, rb ); canvas. setpencolour ( WhiteRGB ); drawline ( centrum, eind, canvas ); 14 de GUI valkuil met een GUI zijn er 2 waarheden: wat de gebruiker ziet op het scherm de inwendige toestand van het programma het is de taak van de programmeur om dit te laten sporen bij de voorbeelden wordt alleen de eerste tekst getekend by een window event! voor een echt programma moet je alle getekende lijnen onthouden je wil ook lijnen kunnen selecteren en weggooien 15 slepen met objecten we willen verschillende objecten binnen window die objecten zijn te verplaatsen maak één (abstracte) klasse Object: class Object GPOINT pos; // de positie van het object // public, iedereen kan object verplaatsen constructors Object ( GPOINT p ) : pos ( p ) ; Object ( ) : pos ( GPOINT ( 100, 100 )) ; nieuwe basis klasse, géén subklasse GUI virtual bool inside ( GPOINT p ) return false; ; virtual void draw ( Canvas& canvas ) ; virtual void drag ( Canvas& canvas) ; ; herdefinieerbare slepen methoden 16 4

class Circle : public Object protected: int r; subklasse cirkel // de straal, object bevat middelpunt speciaal object, nieuwe subklasse RGBCOLOUR color; methoden worden bool inside ( GPOINT p ); geherdefinieerd void draw ( Canvas& canvas ); void drag ( Canvas& canvas ); Circle ( GPOINT p, int d, RGBCOLOUR c ) : Object ( p ), r ( d ), color ( c ) ; 17 cirkel methoden bool Circle :: inside ( GPOINT p ) return pow ( p.x-pos.x, 2 ) + pow ( p.y-pos.y, 2 ) <= r*r; r pos void Circle :: draw ( Canvas& canvas ) p canvas. setpencolour ( color ); canvas. filloval ( GPOINT ( pos.x-r, pos.y+r ), GPOINT ( pos.x+r, pos.y-r )); void Circle :: drag ( Canvas& canvas ) // slepen canvas. setpencolour ( color ); canvas. togglexormode ( ); // teken in XOR-mode canvas. drawoval ( GPOINT ( pos.x-r, pos.y+r ), GPOINT ( pos.x+r, pos.y-r )); canvas. togglexormode ( ); // XOR-mode weer uit 18 object-subklasse vierkant class Square : public Object protected: int s; // de afmetingen, object bevat links-boven-hoek RGBCOLOUR color; bool inside( GPOINT p ); void draw ( Canvas& canvas ); void drag ( Canvas& canvas ); Square ( GPOINT p, int d, RGBCOLOUR c ) : Object ( p ), s ( d ), color ( c ) ; implementatie methoden als bij cirkel 19 de GUI bevat een rij van objecten class mygui : public GUI Object *objects [ MaxObjects ];// de objecten van achter naar voor int nobjects; // het aantal objecten in de rij GPOINT mousepos; // de laatst bekende muis-positie mygui ( ) : GUI(GSIZE(SreenWidth,ScreenHight),"Slepen"), nobjects(0) objects[nobjects++]= new Circle(GPOINT(10,10),5,RedRGB); objects[nobjects++]= new... vaste set objecten void Window ( const RECT& area ); void Keyboard ( const KEYINFO& key ); void Mouse ( const MOUSEINFO& mouse ); void nieuwobject ( Object *obj ); void deleteobject ( ); void drawall ( int n, Canvas& canvas ); void drawal ( Canvas& canvas ); ; 20 5

GUI methoden: tekenen void mygui :: drawall ( int n, Canvas& canvas ) oudste n objecten canvas.setpencolour ( WhiteRGB ); // poets alles weg: canvas.fillrectangle ( GPOINT(0,0), GPOINT ( SreenWidth, ScreenHight )); for ( int i = 0; i < n; i += 1 ) // teken alle objecten objects [ i ] -> draw ( ); void mygui :: drawall ( Canvas& canvas ) drawall ( nobjects, canvas ); GUI methoden: toevoegen void mygui :: nieuwobject ( Object *obj ) Canvas canvas( *this ); if ( nobjects < MaxObjects ) objects [ nobjects++ ] = obj; obj -> draw ( canvas ); else Beep ( 10 ); actieve object: achteraan in rij void mygui :: Window ( const RECT& area ) Canvas canvas( *this ); drawall ( canvas ); 21 22 GUI methoden: weggooien keyboard handler void mygui :: deleteobject ( ) if ( nobjects > 0 ) Canvas canvas( *this ); delete objects [ nobjects ]; nobjects -= 1; drawall ( canvas ); else actieve object: Beep ( 10 ); achteraan in rij 23 void mygui :: Keyboard ( const KEYINFO& key ) if ( key. isascii ) switch ( key. keycode ) case 'q': stop ( ); return; case 'n': nieuw ( ); return; default: return; else switch ( key. keycode ) case WinBackSpKey: case WinDelKey: deleteobject ( ); return; default: return; 24 6

mouse handler Gewenst gedrag muis: button down: als boven object: object wordt bovenste (achteraan in rij), gepoetst, en getekend met drag mouse track: als oude binnen object: poets oude uit en teken nieuwe (met drag) button up: als oude binnen object: poets oude uit en teken nieuwe (met draw) button down Canvas canvas ( *this ); GPOINT p = mouse.mousepos; switch ( mouse. mousestate ) case MouseDown: Object *touched = NULL; int i = nobjects-1; // begin bij laatste object for ( ; i >= 0 ; i-=1 ) if (objects [ i ] -> inside ( p )) // muis binnen object? touched = objects [ i ]; break; if ( touched!= NULL) // object gevonden? for ( ; i < nobjects-1; i+=1) objects [ i ] = objects[ i+1 ]; // rest een naar voren objects [ i ] = touched; // touched boven aan drawall ( nobjects-1, canvas ); // herteken rest objects [ nobjects-1 ] -> drag ( canvas ); // drag actieve object mousepos = p; // bewaar muis positie break; 25 26 tracking (drag) case MouseTrack: if ( ( p!= mousepos ) && // muis bewogen? objects [ nobjects - 1 ] -> inside ( mousepos )) // object geselecteerd is inside ( p ) ook goed? Object *o = objects [ nobjects 1 ]; o->drag ( canvas ); // wis oude tekening // bereken nieuwe plek o->pos = GPOINT( o -> pos.x + p.x - mousepos.x, o -> pos.y + p.y - mousepos.y); o->drag ( canvas ); // teken op nieuwe plek mousepos = p; // bewaar muis positie break; button up case MouseUp: if ( objects[ nobjects-1 ] -> inside ( mousepos )) static was handig geweest Object *o = objects [ nobjects-1 ]; o->drag ( canvas ); // wis oude tekening o->pos = GPOINT( o -> pos.x + p.x - mousepos.x, o -> pos.y + p.y - mousepos.y ); o->draw ( canvas ); // teken definitief mousepos = p; break; 27 28 7

dialogen twee mogelijke aanpakken programmeer waar alle knopjes, velden etc moeten komen teken met een speciale editor de dialoog, plak de bijbehorende code er in je programma aan voor statische dialogen is tweede methode handiger we doen een simpel voorbeeldje pas op: je hebt een nieuwe versie van de gui_kernel nodig!! dialogen twee aparte delen 1. layout: maken met resource editor (MS VC++) 2. methoden: als ander methoden beetje code nodig om koppeling te maken als voorbeeld een simpele dialoog om nieuwe objecten te maken 29 30 interface van class Dialog class Dialog friend class GUI; Dialog ( DialogId, GUI& ); Dialog& addbuttoncallback ( ControlId, ButtonCallBack ); Dialog& addcheckcallback ( ControlId, CheckCallBack ); Dialog& addradiobuttoncallback ( ControlId, RadioButtonCallBack ); void closedialog ( ); void geteditvalue ( ControlId, char *, int ); bool getradiovalue ( ControlId ); bool getcheckvalue ( ControlId); void seteditvalue ( ControlId, const char * ); void setradiovalue ( ControlId ); void setcheckvalue ( ControlId, bool ); void setstaticvalue ( ControlId, const char * ); private:.. 31 call-back functies worden aangeroepen als dialog item gekozen is krijgen altijd hun nummertje en de diakog mee typedef void ( *ButtonCallBack ) ( ControlId, Dialog& ); typedef void ( *CheckCallBack ) ( ControlId, bool, Dialog& ); typedef void ( *RadioButtonCallBack )( ControlId, Dialog& ); in C++ is iedere functie die je meegeeft een pointer b.v. de cancel call-back functie: void cancelcb ( ControlId button, Dialog& d ) d. closedialog ( ); 32 8

koppelen van call-backs aan dialoog #include "resource.h" // voor namen van dialoog en buttons void nieuw ( ) Dialog d ( IDD_DIALOG1, thegui ( ) ); // dialoog met vaste vorm // default waarden invullen en call-back functies eraan hangen d. setradiovalue ( RADIOBLAUW ); // set default d. seteditvalue ( EDITGROOTTE, "10" ); // set default d. addbuttoncallback ( IDNIETS, nietscb ); // handler d. addbuttoncallback ( IDCIRKEL, cirkelcb ); d. addbuttoncallback ( IDVIERKANT, vierkantcb ); maken van dialog, b.v. via menu item, toets,.. int WINAPI WinMain (... Menu menu ( "File" ); menu.add ( "New...", nieuw ) button call-back functies handler voor niets-knop (cancel) void nietscb ( ControlId button, Dialog& d ) d. closedialog ( ); vertaling van string naar int bool stringtoint ( char string [], int size, int& n ) n = 0; for ( int i=0; i<size && isdigit(string[i]); i+=1 ) n = n*10+(string[i]-'0'); return n>0;... 33 34 cirkel call-back functie void cirkelcb ( ControlId button, Dialog& d ) const int size = 40; int r; char string [ size ]; RGBCOLOUR color = BlackRGB; d. geteditvalue( EDITGROOTTE, string, size ); if ( stringtoint ( string, size, r ) && r>0 && r<1000) if ( d.getradiovalue ( RADIOROOD )) color = RedRGB; else if ( d.getradiovalue ( RADIOBLAUW )) color = BlueRGB; else if ( d.getradiovalue ( RADIOGROEN )) color = GreenRGB; else if ( d.getradiovalue ( RADIOGEEL )) color = YellowRGB; thegui ( ). nieuwobject ( new Circle ( GPOINT ( 100, 100 ), r, color )); d.closedialog ( ); vierkant call-back functie op één regel na gelijk aan die voor cirkel dat moet beter kunnen! gebruik één object-call-back functie void nieuw ( ) Dialog d ( IDD_DIALOG1, thegui ( )); d.setradiovalue ( RADIOBLAUW ); d.seteditvalue ( EDITGROOTTE, "10" ); d.addbuttoncallback ( IDNIETS, nietscb ); d.addbuttoncallback ( IDCIRKEL, objectcb ); d.addbuttoncallback ( IDVIERKANT, objectcb ); één handler: abstractie 35 36 9

object call-back functie void objectcb ( ControlId button, Dialog& d ) const int size = 10; int r; char string [ size ]; RGBCOLOUR color = BlackRGB; d. geteditvalue( EDITGROOTTE, string, size ); if ( stringtoint ( string, size, r ) && r>0 && r<1000) if ( d.getradiovalue ( RADIOROOD )) color = RedRGB; else... if (button == IDCIRKEL) thegui().nieuwobject(new Circle(GPOINT(100,100),r,color)); else thegui().nieuwobject(new Square(GPOINT(100,100),r,color)); d.closedialog(); 37 GUI-functies handlers voor events, horen bij één window methoden van class GUI liggen vast in subtype van GUI handlers voor: window, keyboard, muis, timer call-back-functies voor geen methoden van GUI! menu functies vast leggen bij opstarten GUI dialog items dialogen worden dynamisch gemaakt als dat nodig is definitie ligt meestal vast eenvoudig te maken met resource editor zorg steeds dat toestand en scherm spoort!! 38 het vervolg extra opgave over lijsten/bomen op jullie verzoek inleveren optioneel, slechtste beoordeling telt niet mee toetsresultaten komen zo snel mogelijk volgende week pinksteren geen college, wel practicum week daarna: overzichtscollege/samenvatting vragenuur? je kunt altijd langskomen/mailen met vragen wat kan er beter aan dit vak? wat moet zo blijven? 'verplicht' aanwezig? Wat hebben we gedaan dictaat: H 15, bekijk voorbeelden abstractie: laat details weg één klasse object als basis voor cirkels en vierkanten extra figuur toevoegen is nu heel eenvoudig één callback voor cirkels en vierkanten is altijd een goed idee GUI is gebaseerd op objecten programmeur schrijft handlers voor events systeem zorgt voor aanroepen handlers systeem zorgt voor standaard dingen menus tekenen, window resizen, buttons, filteren events zorg dat er steeds maar één canvas per handler is! tentamen 3 juli, 10:30, HG00 307 39 40 10