Dit is hoe het eindproduct van deze tutorial eruit kan komen te zien:

iPhone HelloWorld applicatie

(afhankelijk van eigen invulling)

Deze tutorial gaat uigebreid in op hoe Xcode 4.3 in elkaar zit en hoe de interface builder werkt en bevat een hoop theorie over Xcode. Wil je enkel weten hoe je een label in een applicatie kan slepen met daarop een tekst, scroll dan naar het laatste hoofdstuk: HelloWorld label toevoegen.

Een applicatie maken via Xcode interface builder

Bij elke programmeertaal is het gebruikelijk om een Hello World! op het scherm tevoorschijn te toveren. Dat gaan we dus ook hier doen. Om te beginnen heb je daarvoor een Mac nodig met de laatste versie van het software developer kit (SDK) Xcode. Deze kan je downloaden op: https://developer.apple.com/. Je moet hier inloggen met je Apple ID, als je deze niet hebt, kan je deze gratis aanmaken.

Eenmaal Xcode geinstalleerd, start je een nieuw project. Dit doe je door   N te drukken of File > New > Project… Je ziet het volgende scherm voor je:

Xcode 4.3 nieuw project
Klik hier op de Create a new Xcode project knop links in beeld.

Je krijgt het volgende scherm te zien:


Links in het beeld zie je het besturingssysteem waar je voor wilt ontwikkelen. In dit geval iOS of Mac OS X. Als je onder het iOS tabblad Application aanklikt, zie je 7 opties. Deze knoppen staan voor de verschillende templates die apple mee geeft. Voor onze applicatie kiezen we voor de Single View Application. Dit is de meest eenvoudige template.

Voer in het scherm dat je nu ziet de Product name: HelloWorld in en als Class Prefix: HelloWorld. Bij Company Identifier voer je je eigen bedrijf in. Zorg dat de Device Family op iPhone staat en dat alleen Use Automatic Reference Counting aangevinkt is.

Korte uitleg van de velden
Product Name is de naam van je product en wordt in combinatie met de Company Identifier gebruikt om een unieke Bundle Identifier te maken voor jouw applicatie. Deze Bundle Identifier zorgt ervoor dat je applicatie straks niet dezelfde naam krijgt als bestaande applicaties in de App Store.

Class Prefix is een woord dat voor elke Class in je project gezet wordt. De classes die Xcode voor ons project aanmaakt heten standaard ViewController.h en ViewController.m. Als je als Class Prefix HelloWorld invult, veranderen deze namen naar HelloWorldViewController.h en HelloWorldViewController.m.

In oudere versies van Xcode werd automatisch je Product Name als Class Prefix gedaan. Dus als je oudere boeken of tutorials bekijkt over iPhone ontwikkeling, dan zal je zien dat ze het over “Naam”ViewController hebben in plaats van los ViewController.

Bij Device Family wil Xcode weten voor welk apparaat je gaat ontwikkelen. Dit kan de iPhone familie zijn, daaronder behoren de iPod touch en de iPhone. Je kan ook ontwikkelen voor de iPad en zelfs voor beide apparaten binnen 1 applicatie.

Onderaan zien we 3 checkboxes. Use Storyboards staat voor het gebruik van storyboards. Hiermee kan je het schermverloop visueel regelen in Xcode Interface Builder. Voor de HelloWorld applicatie is dit niet nodig.

Use Automatic Reference Counting of ARC is een nieuwe feature geïntroduceerd in iOS 5. ARC is een geheugen management tool die een hoop werk uit handen neemt. Waar je eerst al het geheugen management zelf moest doen, regelt Xcode dit nu voor je.

Met Include Unit Tests wordt je project anders opgebouwd, waardoor je speciale programmeer code aan je project kan toevoegen. Zogenaamde Unit tests. Met Unit tests kan je problemen identificeren als een verandering in je code voor vastlopen zorgt.

Klikt Next om je project op te slaan. Kies een locatie en klik Create.

Xcode interface uitgelegd
Onderstaande afbeelding is het project beginscherm van Xcode 4.3. Hieronder een uitleg van alle knoppen en elementen binnen Xcode.

Xcode 4.3 interface

De toolbar
Het scherm dat je nu voor je ziet is het beginscherm van Xcode. Bovenin dit scherm staat de toolbar.

Links op de toolbar zie je een Run en Stop knop. Hiermee kan je jouw project naar een apparaat naar keuze sturen. In het venster daarnaast kun je dat apparaat kiezen. In dit geval wordt bij het indrukken van de Run knop het project geladen in de iPhone 5.1 Simulator. Maar het is ook mogelijk om je iPhone daar te gebruiken. Hiervoor moet je wel een Developer License aanschaffen.

In het midden van de toolbar heb je een blauw display. Dit display heet de activity view. Hier zal je activiteiten en processen zien die op dat moment gebeuren. Als je bijvoorbeeld je project bouwt, zie je hier staan of het starten succesvol verloopt.

Rechts bovenin op de toolbar zie je 7 knoppen verdeelt over 3 venstertjes. Het linker venster is Editor genaamd. Hier kan je wisselen tussen 3 verschillende Editor configuraties:
• De Standard view is een enkele venster om een bestand aan te passen.
• De Assistant view splitst het venster in tweeën, een venster links en rechts. Het venster rechts is meestal een venster dat met het linker venster te maken heeft of in contact staat met het linker venster. Als voorbeeld: op het moment dat je een implementation bestand, ook wel .m bestand, bewerkt, staat het header bestand, ook wel .h bestand, in het rechter venster.
• De Version editor is een soort tijdmachine waar je je huidige bestand kan vergelijken met eerder opgeslagen bestanden.

De knoppen rechts van het editor venster zijn om het Navigator, Debug en Utility venster te laten zien of te verstoppen.

De meest rechter knop laadt het Organizer venster in beeld. Het organizer venster is voor dingen die niet specifiek iets met het project te maken hebben. Bijvoorbeeld apparaten waarop je je applicatie kan testen.

De navigator view
Onder de toolbar, helemaal links in het venster, staat de navigator view.


De navigator view heeft 7 knoppen die verschillende vensters laden. De vensters achter de knoppen van links naar rechts:

Project navigator: Dit is het venster waar de bestanden staan van je project. Op bovenstaande afbeelding is dit afgebeeld.

Symbol navigator: In dit venster staan symbols die in de bestanden gedefinieerd zijn. Symbols zijn bestanden en items die Xcode herkend. Bijvoorbeeld Objective-C classes.

Search navigator: In de search navigator kan je in bestanden in je project zoeken. In plaats van zoeken kan je ook Replace selecteren en daarmee het gezochte woord vervangen.

Issues navigator: Als je een project bouwt, zullen waarschuwingen en foutmeldingen in dit venster weergegeven worden.

Debug navigator: In deze navigator kan je foutmeldingen opsporen en repareren, wat ook wel debuggen genoemd.

Breakpoint navigator: Als je op een bepaald punt in je code vastloopt, kan je dat punt markeren als breakpoint. Hier in de breakpoint navigator zie je deze punten staan.

Log navigator: In de log navigator zie je de geschiedenis van bouwresultaten en bouwlogboeken.

De Jump Bar
Direct rechts van de navigator view staat de Jump Bar.


Met de Jump Bar kan je snel naar een specifiek element in je code ‘springen’. In bovenstaande afbeelding kan je bijvoorbeeld in 1 klik naar het window gedeelte, of in 1 klik naar het -applicationWillResignActive: gedeelte. Dit bespaard je een hoop zoek en scrollwerk.

Het Utility paneel
Het utility paneel is een context gerelateerd venster.

De inhoud van dit venster past zich aan als je iets geselecteerd hebt. In onderstaande afbeelding heb ik een UIViewController geselecteerd:
Je ziet dat er dan 6 knoppen bijgekomen zijn.

Later hier meer over.

 

Interface Builder
De Interface Builder (IB) is een nieuwe functie in Xcode 4 waarmee je het scherm op kan bouwen zonder code te typen. De Interface Builder ziet er als volgt uit:

Later in deze post een uitgebreidere kijk op de Interface Builder.

De bestanden in ons project
In het HelloWorld project komen we de volgende bestanden tegen:
HelloWorld is het eerste bestand. Eigenlijk een map met al je project-bestanden. Je kan hieronder submappen maken en deze mappen rangschikken.
HelloWorldViewController.xib is het interface builder bestand. Met de interface kan je elementen in de interface laden zonder code te typen.
Supporting Files is een map met ondersteunende bestanden voor je project. Deze bestanden zijn geen Objective-C bestanden, maar toch noodzakelijk om je project te draaien. Voor eenvoudige applicaties hoef je niets met deze map te doen. In de Supporting files map staan onder andere:

HelloWorld-Info.plist. Dit is een property list bestand dat informatie en instellingen van
de applicatie bevat.
InfoPlist.strings is een tekstbestand met door mensen leesbare voorwaarden voor de
applicatie. Bijvoorbeeld de verschillende talen staan hierin.
main.m bevat de applicaties main() method. Een bestand noodzakelijk om de rest van je code te laden, maar over het algemeen hoef je nooit iets met dit bestand te doen.
HelloWorld-Prefix.pch is een lijst met header files van externe frameworks.

Frameworks: Deze map bevat frameworks. Frameworks zijn door Xcode geleverde pakketten met code die basisfunctionaliteiten van de applicatie bevatten.
Products: De producten map bevat de applicatie wanneer deze gebouwd is. Omdat de applicatie nog niet gebouwd is, is HelloWorld.app in het rood weergegeven.

De Interface Builder

Als je onder de project navigator het HelloWorldViewController.xib bestand selecteert, krijg je de Interface Builder te zien.

De interface builder werkt voor 2 typen bestanden. Het oudere .nib bestand en het moderne .xib bestand. Op internet en in veel boeken wordt er nog steeds vaak gesproken over een nib bestand als het eigenlijk over xib bestanden gaat. Dit komt omdat nib bestanden 20 jaar lang de standaard zijn geweest.

De het grijze venster naast het navigation view wordt ook wel het Dock genoemd. Je kan het dock uit- en inklappen met het -driehoekje in de grijze cirkel knop- in het midden van het vester.

De bovenste 2 iconen zijn File’s Owner en First Responder genoemd. De file’s owner en First Responder bestanden zijn belangrijk voor je interface.
File’s owner is degene die het object in de Interface Builder bezit. Een voorbeeld: Je maakt 2 knoppen. Met 1 knop navigeer je naar het blauwe scherm, met de andere 1 knop naar het roder scherm. Via de File’s owner bepaal je welke knop naar welk scherm navigeert.
First Responder is het object dat als eerste reageert op de gebruiker. Als de gebruiker een tekstveld aan het invullen is, dan is dat de first responder. Drukt de gebruiker daarna op de opslaan knop, dan is de opslaan knop de first responder. Scrollt de gebruiker naar beneden, dan is het scroll venster de first responder.

De andere icoontjes, in bovenstaande afbeelding alleen het View icoon, staan voor Objective-C classes die middels de Interface Builder zijn toegevoegd. Het View icoon staat voor de UIView class.

De Library
Rechtsonderin vind je de Library. De library is een bibliotheek met standaard objecten uit het UIKit framework. De libary is opgedeeld in 4 segmenten:

File template library bevat een collectie van templates die je aan je project kan toevoegen. Bijvoorbeeld een .h en .m bestand. Maar ook .storyboard is een mogelijkheid om toe te voegen.
Code snippet library bevat veel gebruikte code die je toe kan voegen aan het code venster. Hier kan je ook eigen geschreven code toevoegen als je deze bijvoorbeeld vaker in een bestand wilt gebruiken.
Objects library bevat veel gebruikte objecten zoals labels, text fields, buttons en sliders. Deze kan je vanuit de library op je interface slepen om ze te gebruiken.
Media library bevat alle media: afbeeldingen, geluid en videobestanden.

HelloWorld – Label toevoegen

Na al deze theorie gaan we de interface builder gebruiken. We gaan we een label aan het venster toevoegen.


Selecteer HelloWorldViewController.xib en sleep een label uit de objects library naar het grijze venster. Dit label is nu een subview van de view. Objecten in de interface hebben een hiërarchie. De meeste viewcontrollers kunnen een subview bevatten, maar sommige niet. Een voorbeeld van een viewcontroller die geen subviews kan bevatten is een button. De Interface Builder weet dit en als je probeert een label als subview aan een button toe te voegen, zal dit niet werken.

Bewerk het label door erop te dubbelklikken. Verander de tekst in ‘Hello World!’.


Sleep het label nu om het te centreren. Sla je wijzigingen op door S te drukken. Bouw je applicatie door R te drukken. De iPhone simulator zal opstarten en je applicatie weergeven.


Dit was allemaal mogelijk zonder code te schrijven. Alleen ziet het er nog niet zo spannend uit. Je kan in de Interface Builder nog veel meer vormgeving doen.

Attibute inspector
Daarmee zijn we aangekomen bij het laatste element van het Xcode venster: De attribute inspector. Selecteer je net gecreëerde label om deze weer te geven.

In de attribute inspector kan je het lettertype en kleuren aanpassen. Bij de size inspector, de knop naast de attribute expector kan je coördinaten invullen. Hiermee kan je afbeeldingen in je venster plaatsen. Hoewel het beeldscherm van de iPhone 4 960 bij 640 pixels groot is, gebruikt de size inspector 480 bij 320 pixels. Dit is het beeldformaat van de oudere iPhones. De enige manier hoe je gebruik kan maken van de maximale hoeveelheid pixels in afbeeldingen bij de iPhone 4 is om naast de afbeelding die je gebruikt in de interface builder, ook een afbeelding toe te voegen die 2x zo groot is. Dus als je afbeelding op de interface builder 30×30 pixels groot is, maak je dezelfde afbeelding ook 2x zo groot, in dit geval 60×60 pixels. Het enige dat je moet doen om dit toe te passen is achter de naam van de grote afbeelding @2x te zetten. Dus afbeelding.jpg voor de 30×30 pixel afbeelding en afbeelding@2x.jpg voor de 60×60 afbeelding.

Hello World!

Met wat aanpassingen in de attribute inspector ziet mijn applicatie er als volgt uit:

iPhone HelloWorld applicatie

Reageer: