Hvordan organiseres et programs grafik-elementer? OOP e uge kursusgang. Advarsel! Component-objekter

Transkript

1 OOP e uge kursusgang Hvordan organiseres et programs grafik-elementer? 1. Teori: class Component og subklasser: Composite pattern layout-managere hændelsesstyret programmering 2. XP-program: Bouncing ball delegering af animering og dobbelt-bufring 3. Tips til øvelser: Et programs grafiske grænseflade består af mange forskellige elementer: knapper tekstfelter valglister billeder tegninger.. De kan organiseres i en træstruktur hver element kan indeholde andre elementer ("børn") Hvordan kan de prædefinerede grafik-klasser understøtte dette? Component-objekter Advarsel! Panel hele appletten knapområdet Button Choice Canvas Javas grafikbibliotek er uhyre svært at forstå til bunds. Javas grundlæggende objekt-orienterede del, f.eks. klassebegrebet, bygger på 30+ års datalogi-tradition. Javas biblioteker til grafik (java.awt, javax.swing, m.fl.) har ændret sig betydeligt indenfor 3-4 år. Det skyldes bl.a. - at i/o i almindelighed er særdeles kompliceret - at der ikke findes en etableret tradition for hvordan et grafikbibliotek designes. I det følgende har jeg prøvet at sammenfatte min forståelse af emnet.... ret til ændringer/misforståelser forbeholdes!!

2 Component-objekter i appletter/applikationer abstract class Component Ethvert Javaprogram som skal vise grafik skal indeholde mindst et Component-objekt (instans af en subklasse til class Component) nærmere bestemt, skal mindst et faktisk være en såkaldt container F.eks. kan et "skræddersyet" Graphics-objekt kun vises via et Component-objekt. Et Component-objekt svarer til et vist rektangulært område på skærmvinduet der skal være et "yderste" Component-objekt som svarer til hele det vindue på skærmen, som Javaprogrammet viser grafik i (evt. flere sådanne vinduer). Component-objekter kan vises fra Java-programmer, der er subklasser af class Applet selvstændige applikationer Udseende, form: har en vis størrelse, som kan ændres, men er altid et rektangel udseendet afhænger af subklassers overskrivning af paint() (evt. update()) Funktion: forberedt til hændelsesstyring o.m.a. (ialt over 100 metoder). Visning: kald af repaint() afstedkommer kald af update()/paint() repaint() i yderste Component-objekt kaldes automatisk (fra kontekst) Simple Component-subklasser Simple komponenter Simple komponenter class Button, Choice, Checkbox, Canvas,.. Funktion: de fleste har en bestemt prædefineret funktion (hændelseshåndtering) men Canvas-objekter er helt "tomme" Output, udseende i grafikvinduet: normalt et bestemt grundtræk i udseendet til at understøtte funktionen Visning: kræver at komponenten er "indeholdt" i en container

3 Containere Containere class Panel (som class Applet nedarver fra) class Window class Frame Funktion kan indeholde andre komponenter (0, 1, 2,..) sammensætte Component-objekter til et hele Udseende ikke givet på forhånd afhænger af indeholdte elementer dog er der mindre forskel på indramning m.m. svarer til et rektangulært område i grafikvinduet men skræddersyet grafik kan vises via overskrivning af update()/paint() Visning indeholdte simple komponenter vises automatisk Hierarkisk ordning vhja. containere og layout-managere Klassediagrammets stærke aggregeringer beskriver hierarkiet af Component-objekter i Bouncing-Ball programmet Hierarki: roden er den "yderste" komponent. De øvrige komponenter er indeholdt i en "forældrer" container (LayoutManageren placerer indeholdte komponenter, i fast antal rækker/kolonner flydende antal do. fast %del af areal per komponent flydende, efter behov.. ) class Container Composite design pattern class Container add(component c) add(component c,object constraint) placerer komponent f.eks. "BorderLayout.NORTH" setlayout(layoutmanager lm) vælger layout manager ellers bruges default LayoutManager fungerer som abstrakt klasse class Panel (næsten) tom klasse "tomt" rektangel class Window "tomt" rektangel, nyt vindue class Frame nyt vindue men med titel og kant Giver næppe Nobel-prisen, men godt at sætte navn på gængse teknikker Kan genfindes i Component-klassehierarkiet Modsat ved lister o.a. datastrukturer, har del/helhed samme type. (ikke blot Object) Princip kan også bruges f.eks. til repræsentation af aritmetriske udtryk. Composite skal indeholde passende metoder vedr. del-komponenter.

4 Brug af layout-managere public class FinalBouncingBall extends Applet { // yderste Component (Panel) objekt BouncingBallCanvas canvas; Panel controlpanel; public FinalBouncingBall() { setlayout(new BorderLayout()); canvas = new BouncingBallCanvas(); add(canvas, BorderLayout.CENTER); // som indeholder en Canvas controlpanel = new Panel(); add(controlpanel, BorderLayout.SOUTH); // og et Panel controlpanel.setlayout(new GridLayout()); Button startbutton = new Button("start/stop"); startbutton.addactionlistener(new ButtonHandler()); controlpanel.add(startbutton); // som igen indeholder en Button OOP e uge kursusgang 1. Teori: class Component og subklasser: Composite pattern layout-managere hændelsesstyret programmering 2. XP-program: Bouncing ball delegering af animering og dobbelt-bufring (udgik pga. stor spørgelyst) 3. Tips til øvelser: Hændelsesstyret programmering hændelse --> handling hændelsestyper direkte input fra programmets omgivelser musetryk på knap museslip og -flyt tastaturtryk et vindue har ændret fokus afledte hændelser Java-eksempel: en container har fået tilføjet et Component-objekt handling er udførelse af programstump Hændelsesstyret programmering implementation i Java Hændelseskilde Hændelse Lytter Hændelser repræsenteres af et hændelsesobjekt (et AWTEvent-objekt, eller tilsv.) indeholder hændelsens kilde (et Component-objekt) getsource() returnerer kilden Handlinger repræsenteres af lyttere (listeners): klasser hvis metoder skal udføres Konteksten lytter til musetryk etc. træden generere hændelse og sender den til en lytter hvis lytteren er registreres hos hændelseskilden

5 Eksempel Hændelsestypen "ActionEvent" Hændelseskilde Hændelse Lytter // Hændelseskilden Button startstopbutton = new Button("start/stop"); // Lytteren class StartStopHandler implements ActionListener { public void actionperformed(actionevent e) { if (animator.running) animator.stop(); else animator.start(); // Registrering startstopbutton.addactionlistener(new StartStopHandler()); ActionEvent er et generelt eller "uspecificeret" event. Andre event-typer: f.eks. MouseEvent. Forskellige Component-subklasser understøtter forskellige hændelsestyper. For hver type hændelse XYZEvent findes et interface XYZListener med en eller flere metoder. Registering af en understøttet hændelsestype bruger addxyzlistener() ActionEvent / Button.addActionListener MouseEvent / Component.addMouseListener Behandling af hændelser Hændelsesstyring: hvilken kilde? 1. Kontekstens tråd "vækkes" når der sker en hændelse. 2. Afgør hvilket Component-objekt der er involveret (som kilde) 3. Afgør hvilke(n) type hændelse(r) der er tale om. 4. Undersøger om objektet har registreret relevant(e) lytter(e). 5. Kalder de(n) relevante metoder i de relevante lyttere. Samme Component-objekt kan have registreret flere lyttere. samme Component-objekt kan reagere på forskellige hændelser, f.eks. musetryk og museflytning (drag) Samme lytter kan være registreret hos flere Component-objekter. så bør lytteren teste hvilket objekt, der er kilden public void actionperformed(actionevent e) { Button button = (Button) e.getsource(); String buttonstring = button.getlabel(); if ("speed up".equals(buttonstring)) animator.speedup(); else if ("speed down".equals(buttonstring)) animator.speeddown();

6 OOP e uge kursusgang 1. Teori: class Component og subklasser: Composite pattern layout-managere hændelsesstyret programmering 2. XP-program: Bouncing ball delegering af animering og dobbelt-bufring 3. Tips til øvelser: class Ball class Ball { Point position, hastighed; int radius; Ball(Point position,..) { this.position = position;.. move() {.. paint(graphics g) {.. class Point { int x, y; Kollision Næsten gang: class Scribble (Tegnebrættet) class Ball { static boolean Collide(Ball b1, Ball b2) { if (Ball.position.x...) return true; else return false; Kollision hvis afstand mellem centrum er mindre end 2*radius Afstand regnes ud med Pythagoras' formel for siderne i en retvinklet trekant: a 2 + b 2 = c 2 (x,y) (x-radius,y-radius)