Programutvikling for Mac OS X, del 2 - Interface Builder

Forrige gang installerte vi XCode, og kikket på litt enkel C-kode, i dette avsnittet, skal vi se på Interface Builder, og lage et enkelt GUI-program. Her er del 2 av utviklingsguiden.

(Har du ikke lest Del 1 ennå, anbefales det på det sterkeste før du starter på del 2)

Så, hvordan lager man et enkelt program som er mer enn teksten vi lærte oss å jobbe med sist? Hvordan får vi vinduer på skjermen? Vel, i god mac-ånd, skal vi dra dem på plass, og skrive ca 8 linjer kode denne gangen.

Vi kommer til å hoppe glatt over den inngående forklaringen av en del underliggende konsepter denne gangen, for å komme tilbake til dette senere, jeg HÅPER at det fortsatt er mulig å forstå grunnleggende Interface Builder-bruk.

Det vi skal lage, er et HELT enkelt program som lar deg kopiere tekst fra et tekstfelt til et annet, ved hjelp av noen knapper. I løpet av dette, får vi sett hvordan man kobler knapper til handlinger (actions), og tekstfelt til datakilder (outlets). Helt til slutt kommer jeg tilbake til nettopp hva som har skjedd i klikkeløypa vår.
Vi setter i gang:
Først av alt, åpne XCode, start et nytt prosjekt, og velg: "Cocoa Application":

Gi prosjektet et navn, trykk Save, og få opp prosjektvinduet. Her skal du finne MainMenu.xib, og dobbeltklikke på denne for å få opp Interface Builder:

Interface Builder, er verktøyet du kommer til å designe brukergrensesnittet ditt i, akkurat nå sitter vi med et blankt vindu:

La oss legge til et tekstfelt. Se til venstre på skjermen, der skal du finne "Library"-vinduet, nederst i dette kan du skrive "TextF"

Velg TextField, og dra 2 slike til vinduet vårt:

Legg merke til de blå hjelpelinjene som dukker opp når du prøver å plassere tekstfeltet, disse hjelper deg å plassere ting på lik høyde, og akseptabel avstand, og forsøker å gjøre det lettere å følge Apples retningslinjer for brukergrensesnitt, ikke kjemp mot dem, la dem hjelpe deg. (Dessverre visste det seg vanskelig å ta bilder av dem)

Så, trenger vi 2 knapper, søk etter Button, og dra inn 2 Push Buttons i vinduet vårt.

Så skal vinduet vårt se noe sånt ut:

Gi knappene en annen tekst ved å dobbeltklikke på dem:

Så, skal vi gjøre den litt tricky biten, nemlig få disse tingene til å kunne gjøre noe. Gå tilbake til Library, velg Classes

Søk opp "Object", velg NSObject, høyreklikk, og velg "New Subclass"

Gi kontroll-klassen vår et navn:

Den skal nå være valgt i listen, i motsatt fal søk den opp ved navnet du ga den, og klikk på den.

I Bildet over står muspekeren over en boks merket "Inheritance", denne skal du velge "outlets" i, og så bruke +-knappen under til å legge til to "outlets" som vist: (Her er det verdt å nevne at jeg burde ha kalt mine outlets for textLeft, og textRight, for å gjøre koden klarere, men men). Sørg for å endre "id" til NSTextField også.

Tilsvarende skal vi velge "Actions" i menyen, og legge til to actions som vist:

Så, drar du objektet fra ruten RETT over Actions-boksen (Der det står IntroController i bildet over), og over i "prosjekt"-vinduet til IB:

Det vi har gjort nå, er å definere noen knagger vi kan hente data og sende handlinger til og fra elementene i vinduet vårt med, objektet vi har laget skal være "limet" mellom vinduet, og koden vår, så før vi får gjort noe fornuftig her, må vi koble sammen objektet med vinduselementene. Høyreklikk på en knapp i vinduet, og dra en linje til objektet vi lagde i sted.

Velg den passende handlingen, og repeter for den andre knappen.

Vinduet forer altså objektet vårt med informasjon FRA knappene (dvs vi får beskjed når de trykkes på), men vinduet må også fores med informasjon FRA objektet, til tekstfeltene våre (denne koblingen er forsåvidt toveis). Men, høyreklikk på objektet, og dra til tekstfeltet:

og velg riktig "knagg".

Da er det på tide å jobbe oss tilbake til XCode, gå til Library-vinduet, finn kontroller-klassen, høyreklikk og velg "Generate Class Files"

Behold standardverdiene her.

Og sett kryss for å legge til filen her. Trykk så Eple-S for å lagre vinduet vi har jobbet med i Interface Builder

I XCode får vi da to nye filer, en header (.h-fil), hvor du kanskje kjenner igjen noen outlets og actions?

og en .m-fil som skal inneholde koden som er koblet til actions-ene våre, som igjen er koblet til knappene i vinduet.

Vi vil at knappene skal kopiere teksten fra venstre til høyre og motsatt, så vi skriver noe simpel Objective-C-kode til formålet, nøyaktig hvordan Objective-C fungerer kommer vi tilbake til i en senere del, men kort fortalt, så leser vi av tekstverdien til "right"-tekstfeltet, i første linje, og setter "str" lik denne. Så setter vi det andre feltets tekstverdi til å bli det "str" er.

Prøver du å kjøre programmet med denne koden, så fungerer det som tenkt, tekst kopieres fra boks til boks.

Men, vi har kanskje lyst til å leke litt med det vi gjorde forrige gang med tall også? Vel, da går vi tilbake til Interface Builder, og gjør vinduet vårt slik:

Så finner vi igjen IntroController-klassen (viktig, å velge Classes i Library) vårt, og legger til noen ekstra actions:

og outlet:

Som du kanskje så tidligere, skal disse matche tekst i .h-fila vår, noe som ikke skjer helt automatisk når vi gjør dette fra Interface Builder (men, andre veien fungerer ganske bra, endringer i .h-fila synes i IB rimelig fort), du må derfor DRA outleten og actions-ene til .h-fila i XCode, på riktig sted:

Lagrer du .h-fila di nå, skal du kunne se at action/outlet-listen i IB, nå lister alt under .h-fila, istedenfor fordelt på .xib/.h, som 2 bilder over.

Gå tilbake til Interface-Builder, og dra koblinger til knapper og tekstfelt, gå så tilbake til XCode, så skal vi få på plass den siste kodebiten her:
Vi vil at knappene våre teller opp og ned, så vi må derfor finne "tall-verdien" av tekstfeltet vårt", og så endre denne, her er koden for minus-knappen: (Den skal før @end)

denne skal inn i .m-fila vår, hvordan pluss-koden skal se ut, er en utfordring til dere.

Oppgave
Nå har vi laget et vindu, som gjør helt enkle ting med knapper og tekstfelt, vi har også sett hvordan vi får tekst til og fra tekstfelt, og kanskje mest interessant, sett hvordan vi kan få, og endre int-verdier i tekstfelt, dette burde åpne for muligheten til å lage forrige dels "gjetteprogram" med et vindu, gjerne med et tekstfelt som forteller deg om gjetningen din er større, mindre, eller korrekt. Jeg anbefaler også å leke litt med Interface-Builder, og se på hva "inspectoren" på høyre side av skjermen, kan gjøre med de forskjellige elementene i vinduet, o.l. Vi kommer til å ta en grundigere titt på denne senere.

Teori
I denne gjennomgangen har vi sett outlets, actions, objekter, og klasser, samt xib-filer, .m-filer, og .h-filer, det er kanskje greit å få en LITEN forklaring på hva alt dette egentlig er. Ikke tenkt så alt for nøye på det, jeg tar det mest med som en oppvarming til objekt-teorien som kommer.

Klasser
En klasse, er et "konsept", eller en "oppskrift", på samme måte som "Bil", "Porsche 911 Turbo" eller "Airbus A400", altså ikke spesifikke "instanser" av de forskjellige "klassene", men mer "definisjonen" av de, et spesifikt "Airbus A400"-fly, ville vært et objekt. Det er kanskje litt utydelig i klikkeløypa vår i dag, men det var KLASSEN "IntroController" vi endret på, men Objektet vi koblet ting til.

Objekter
Er tilfeller, instanser, eller utgaver av en klasse, der "Audi A3" er en klasse, er "Audi A3 med skiltnr AA 12345" et objekt av den klassen, det vi dro ting til og fra i Interface Builder var et slikt objekt, av klassen IntroController.

Outlets/Actions
Når vi skriver kode, som skal forholde seg til et GUI, trenger koden å kunne fore data til GUIet, få data fra GUIet, og også hendelser, GUIet på sin side, trenger å kunne si ifra at ting har skjedd, og få dataene sine fra et sted, derfor foretrekker GUIet å ha elementene sine tilkoblet outlets, og at de har et sted å fyre actions-ene sine, og der slutter egentlig ansvaret til GUIet. Vi må derfor koble GUIet vårt til koden vår gjennom outlets/actions, og behandle det gjennom disse i koden vår.

NIB/XIB
.xib-fila (også kjent som NIB-fila) definerer ett eller flere vinduer for programmet ditt, objektene som hører til de, samt koblingene mellom disse og hva som skal lages av instillinger ved programstart.

.h/.m
Matcher C-verdenens ".C/.H"-filer, og C++'s ".CPP/.H"-filer, .h-fila definerer klassens struktur, mens .m-fila definerer metodene/funksjonenes faktiske innhold. Detajene her kommer vi tilbake til.

Videre, og viktig lesning:
Apples retningslinjer for brukergrensesnitt

Neste gang
Jeg er klar over at dette kan ha vært litt uklart, derfor jobber jeg med å lage en videoversjon av akkurat denne guiden, men av tekniske årsaker så har dette ikke gått helt i mål ennå. Siden vi nå har kikket på verktøyene vi har å jobbe med, er neste steg å å lære oss litt mer C, samt kanskje noe Objektorienterings-teori. Følg med i neste del av guiden.

Oppdatert:Del 3 er nå ute