Vorige week beschreef ik hoe een GUI werkt. Achteraf was ik bang dat het iets te abstract was (er stonden niet eens plaatjes bij) en daarom wil ik proberen het nu wat tastbaarder te maken. Met een plaatje, om te beginnen, en met wat (pseudo-)code.

Het gaat over objecten en over hoe ze samenwerken. De objecten staan in onderstaand organisatieschema, waarin ook hun relaties zichtbaar worden gemaakt (oftewel de referenties die ze naar elkaar hebben).

guiHet schema laat zien wat er in het vorige verhaal werd beschreven: als een knop wordt aangeraakt door een gebruiker, moet hij (behalve een visuele terugkoppeling geven aan de gebruiker) een opdracht geven aan een gedelegeerde om een actie uit te voeren. De gedelegeerde op zijn beurt luistert naar de knop en wordt daarom de luisteraar genoemd. Wat er is toegevoegd sinds vorige keer is het gebeurtenis-object, dat alleen tot taak heeft om informatie door te geven van de knop naar de luisteraar. Het doet zelf niets, het bewaart alleen wat informatie. Het wordt met de actie-opdracht meegegeven, als een parameter. Je ziet dat objecten soms iets doen (de luisteraar) en soms informatie bewaren (de gebeurtenis). Of beide (de knop, zoals we zo zullen zien).

Alle objecten moeten eerst worden geprogrammeerd. Of eigenlijk: je programmeert geen object maar een object-type (een class). Daarna maak je van dat type één of meer objecten. Zoals je van een bouwtekening één of meer huizen bouwt. Hier volgt de code die beschrijft wat knoppen doen. Het is niet geschreven in een echte programmeertaal, het is pseudo-code. Ik hanteer de conventie dat object-types met een hoofdletter beginnen, en individuele (referenties naar) objecten met een kleine letter. Samengestelde namen krijgen een hoofdletter op de woordgrens.

KnopWat zegt dit? Het beschrijft een type “Knop”, waarvan later objecten gemaakt kunnen worden. Het zegt dat al die objecten informatie (data) kunnen bewaren, namelijk een referentie naar hun luisteraar. Het zegt ook dat al die knop-objecten twee functies kunnen uitvoeren: “registreerLuisteraar” en “aangeraakt”. Andere objecten kunnen van deze functies gebruikmaken. Ze doen dat door een opdracht van dezelfde naam naar het object te sturen; wanneer ze dat doen is hun zaak.

Vervolgens de pseudo-code voor luisteraars:

LuisteraarGebeurtenissen bevatten geen functies, maar alleen data:

GebeurtenisEn dan, als klap op de vuurpijl, gaan we de objecten maken en de relaties leggen:

gui-pseudoHierna staan de knop en de luisteraar klaar om hun werk te doen. Ze doen dat zodra de knop wordt aangeraakt en iemand de opdracht “aangeraakt” naar de knop stuurt. Die “iemand”, dat is de grote onbekende. Een GUI draait op een computer en die computer heeft een besturingssysteem. Ergens in dat besturingssyteem wordt er geluisterd naar de hardware, bijvoorbeeld naar de muis of het scherm. Het is het besturingssysteem dat een muisklik of een aanraking van het scherm moet vertalen naar een opdracht naar de juiste GUI-component. Hoe dat werkt, dat is een verhaal apart en in feite niet onze zorg.

Wat wij hier hebben gedaan, da’s programmeren. Een plan maken en stap voor stap uitvoeren. Als het fout gaat pas je het plan aan en voer je het opnieuw uit. Zonder de vervelende consequenties die dat in het echte leven zou hebben. Lekker makkelijk, toch?

Advertenties