Ontwikkelen op iPhone (5): onze eerste applicatie (III)

En ons vorige artikel We hadden een Label, een TextField en een Button in de interface van onze applicatie opgenomen. We wilden dat de inhoud van het label werd bijgewerkt met wat er in het tekstveld was ingevoerd bij het klikken op de knop. We hadden (stap 1) het project gemaakt en (stap 2) gebruikten InterfaceBuilder om het scherm te definiëren. Nu gaan we door met de rest van de stappen om de applicatie te laten werken.

Stap 3. Maak variabelen in de ViewController.

We hebben onze interface correct. Als we Build & Go zouden doen, zouden we zelfs kunnen zien hoe het met ons gaat:

Maar er gebeurt natuurlijk niets bij het indrukken van de knop, want we hebben niet de minimaal noodzakelijke ontwikkelingen gemaakt. In deze stap 3 gaan we de variabelen en methoden introduceren in de HelloWorldViewController, zowel in de interface (.h-bestand) als in de implementatie (.m-bestand). Om dit te doen, zoals we aan het einde van het vorige bericht hebben aangegeven, moeten we weten dat het TextField overeenkomt met een UITextField-klasse en het Label met een UILabel-klasse. Deze 2 klassen vallen binnen het UIKit-raamwerk.

Als we Interface Builder niet hebben gesloten en opgeslagen, doen we het en openen we in XCode het bestand HelloWorldViewController.h. De code heeft nu zoiets als dit:

We kijken al naar een aantal Objective-C. In deze code zien we een importverklaring van de UIKit-bibliotheek, waar de klassen UILabel en UITextField zijn. We zien hoe de interface wordt gedeclareerd en dat deze zich uitstrekt van de generieke UIViewController van UIKit.

Binnen de interfacecode nemen we de volgende code op:

We kunnen nu uitleggen wat we hebben gedaan:

• We hebben binnen het @interface blok 2 attributen van het type UILabel en UITextField gedeclareerd, met respectievelijk 2 variabelenamen * label en * textField. Verderop verschijnt IBOutlet. Wat is dit allemaal? We leggen onszelf uit. IBOutlet is geen type variabele; is een richtlijn die Interface Builder helpt om het bestaan ​​van deze variabelen van het type UILabel en UITextField te kennen. Onthoud trouwens dat we je in het vorige artikel een trucje hadden gegeven om de variabeletypen van de besturingsobjecten (knoppen, label, tekstveld, enz.) In Interface Builder te kennen. Aan de andere kant kan het probleem van * voor de variabelenaam Java-programmeurs verrassen, niet zozeer die van C ... maar leer dat je op deze manier instantievariabelen in Objective-C gaat schrijven.
• De eigenschappen UILabel en UITextField worden gedeclareerd. niet-atomair en behouden zullen we voorlopig niet zien, het is gerelateerd aan geheugenbeheer.
• We zien dat we een methode declareren, updateText. Er staat een - teken voor, wat aangeeft dat het een instantiemethode is en geen klassemethode (een + -teken wordt voor hen uitgelegd). We kunnen dit niet uitleggen omdat dit elementaire objectgeoriënteerde programmering is ... Die methode retourneert niets (dat wil zeggen, void) en ontvangt een parameter van het type id. In feite verwijst het naar de identifier van het object dat de aanroep naar onze updateTexto-methode zal veroorzaken, die de waarde van het label zal updaten. We kunnen het raden, want dat besturingselement is de knop zelf ...

Zodra dit is gebeurd, zijn we klaar met stap 3.

Stap 4. Bind weergavebesturingen aan controllervariabelen.

Als we herzien, hebben we enerzijds onze interface ontwikkeld met Interface Builder, en anderzijds hebben we de variabelen die verband houden met die bedieningselementen in de HelloWorldViewController.h (interface van de HelloWorldViewController.m-controllerklasse). Er is echter nog steeds geen relatie tussen de weergave en de controller, dat wil zeggen dat we geen instructies hebben gegeven om bijvoorbeeld het tekstveld dat we ontwerpen in Interface Builder te relateren aan de variabele van het type UITextField die we in de klas. Nu gaan we deze taak uitvoeren. We openen Interface Builder opnieuw door op HelloWorldViewController.xib te klikken, op het tekstvak te klikken en in het Inspector-palet gaan we naar het tweede tabblad (Text Field Connections). We zien dat er een sectie is genaamd Referencing Outlets, zonder dat er iets is gemarkeerd. Dat betekent dat Interface Builder op dit moment geen relatie kent tussen dit tekstveld en een IBOutlet (Interface Builder Outlet) van een klasse ... maar we hebben een UITextField IBOutlet in onze HelloWorldViewController, dus laten we deze koppelen.

Om dit te doen, zoals we in de figuur zien, door op de kleine cirkel naast «New Referencing Outlet» te klikken, slepen we naar de File's Owner van het venster met de naam HelloWorldViewController.xib. Het laat ons 2 opties kiezen, view (de volledige weergave) en textField (onze variabele). Uiteraard kiezen we voor textField, en dus relateren we ons tekstvak aan de variabele van het type UITextField. Trouwens, de eigenaar of eigenaar van het bestand is niet meer of minder dan onze controllerklasse ...

We herhalen de bewerking met het label en relateren het aan het label van onze controller-variabele. En met de knop is het iets anders. In dit geval gaan we het relateren aan onze updateTexto-bewerking, maar voor een specifieke gebeurtenis. Doe dit met het 'Touch Up Inside'-evenement en kies onze updateTexto-methode:

En op deze manier hebben we al de besturingselementen die we hadden gedefinieerd met Interface Builder en de variabelen die we in de controller hebben gezet, met elkaar in verband gebracht. We sluiten Interface Builder en slaan alles op en gaan naar de laatste stap om terug te keren naar XCode.

Stap 5. Laatste ontwikkelingen.

In XCode openen we de HelloWorldViewController.my en plaatsen we de volgende code zodat onze klasse er als volgt uitziet:

Als we goed kijken, hebben we simpelweg het blok @synthesize geplaatst en de implementatie van de methode gedeclareerd in de interface .h, updateTexto. Onder die code zul je veel becommentarieerde code hebben.

De @synthesize-regel doet iets dat lijkt op het genereren van de typische getter / setter (accessors / mutators) die typisch zijn voor OO-talen (inkapseling). We hebben ze nodig zodat de controller de inhoud van bijvoorbeeld het tekstvak bereikt.

De updateTexto-methode werkt, zoals u kunt zien, eenvoudig de tekst van ons label bij met de inhoud van het tekstveld. We zijn klaar.

Nu doen we gewoon Build & Go, en u zult zien dat wanneer u een tekstreeks invoert en op de knop klikt, de inhoud van het label wordt bijgewerkt. In het volgende artikel zullen we verbeteringen aan onze applicatie introduceren.