We proberen eens zelf een oefeningske te maken. Het zal wel al ergens gepubliceerd zijn, omdat het zo’n klassieker is. Desniettemin willen we het zelf eens proberen en vooral de “stap voor stap” bespreking maken.
- Start XCode en maak een nieuw project aan. Kies “Windows-based application” van de iPhone en noem het WalkThrough.
- we verwijderen de classes die in de map “class” zitten en herschrijven de main.m als//
- // main.m
// WalkThrough
//
// Created by Johan Calu on 2/11/09.
// Copyright KHBO 2009. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface MyView : UIView
{
IBOutlet UITextField *infield;
IBOutlet UITextField *outfield;
}
@end@implementation MyView- (IBAction) convert: (id) sender
{
float invalue = [[infield text] floatValue];
float outvalue = (invalue – 32.0f) * 5.0f /9.0f;
[outfield setText: [NSString stringWithFormat:@"%3.2f", outvalue]];
}
@end
// View controller die autoroteert
@interface MyViewController : UIViewController
@end@implementation MyViewController
- (void) loadView
{
[super loadView];
self.view.autoresizesSubviews =YES;
self.view.autoresizingMask = ( UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
}- (BOOL) shouldAutorotateTointerfaceOrientation : (UIInterfaceOrientation) interfaceOrientation
{
return YES;
}
@end// Application delegate that uses NIB objects
@interface WalkThroughAppDelegate: NSObject
{
IBOutlet UIWindow *window;
IBOutlet MyView *contentView;
}
@end
@implementation WalkThroughAppDelegate- (void) applicationDidFinishLaunching:(UIApplication *) application{
[window addSubview:contentView];
[window makeKeyAndVisible];
}- (void) dealloc{
[contentView release];
[window release];
[super dealloc];
}@end
int main(int argc, char *argv[]) {
NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
int retVal = UIApplicationMain(argc, argv, nil, nil);
[pool release];
return retVal;
} - Nu starten we de interface builder door op de “MainWindow.xib” te dubbelklikken. Je zal merken dat er 4 objecten in de Mainwindow nib zitten : File’s owner, First Responder, Window en ook nog een met de naam dat je aan deze toepassing hebt gegeven (WalkThroughAppDelegate). .Er zijn nu 2 tools die interessant zijn om mee te werken als je met de interface builder bezig bent: de Library en de Inspector (beide open je door in de menubalk van de interface builder het item “Tools” te kiezen en daarna de desbetreffende tool.
- We zullen nu de WalkThroughAppDelegate aanvullen met 2 outlets : window en contentView. Klik in Library op de drukknop “Classes”. Je krijgt een overzicht van heel wat (systeem) classes, maar ook de eigen class WalkThrough. Selecteer deze. Onderaan verschijnt nu een deelvenster met daarin opnieuw enkele drukknoppen. Klik nu op de drukknop “outlets” en vervolgens op het “+” knopje (onderaan links). Tik nu in : “window” en in het rechterdeel (waar er ‘id’ staat) verander je in “UIWindow”. Druk nu nogmaals op het “+” knopje en tik in “contentView” en verander het rechterdeel (i.p.v. id) naar MyView.
- In de Library klik je nu bovenaan op de drukknop “Objects” en zoek naar de UIViewController (Zie figuur hieronder). Sleep dit icoon in het MainWindow.xib venster
ViewController
- Herhaal nu dezelfde bewerking met een View object (Figuur hieronder).
View Object
- Het resultaat ziet er dan uit als in Figuur 3
Figuur 3 : Mainwindow.xib
- Nu veranderen we de naam van de View Controller. Dubbelklik op de View Controller en het scherm van de Inspector moet verschijnen. Klik op de rechterknop (
) in het Inspector scherm. De Class name is nu “ViewController”; Wijzig dit in “MyViewController”. - We doen nu bijna dezelfde bewerking met het View icoon. Dubbelklik op het View Icoon en in de inspector (rechterknop klikken) verander je de class name van “UIView” naar “MyView”. Nu moeten we nog een action en 2 outlets toevoegen aan dit object. Ga dus naar de Library en klik op het “Class” knopje. Zoek naar de class MyView en selecteer het (door erop te klikken). Onderaan in het venster kan je nu op het knopje “action” klikken. Klik op het “+” knopje (links onder) en voeg de action “convert:” toe (let wel : het dubbele punt niet vergeten). Nu klik je op het “outlets” knopje. We zullen de outlets infield en outfield toevoegen. Druk op het “+” knopje en tik in “infield”.
- Nu gaan we MyView opvullen met visuele objecten. Dubbelklik daarop op het MyView icoon – er opent een blanko venster met de titel “MyView”.
Uit de Library (klik op Objects) kies je 2 labels, 1 drukknop en 2 tekstvelden die je sleept naar het MyView venster. Het resultaat wordt weergegeven in figuur 4.
Figuur 4
- Herschik nu de UI zodat het eruit ziet zoals in figuur 5.
Figuur 5
- Klik nu op het linker tekstveld. In Inspector kies je het linkse tabje (
) en nu kan je daar in “Text Input Traits” het keyboard instellen als “Numbers & Punctuation”. Op die manier worden enkel cijfers en komma’s (of punten) aanvaard. Er rest natuurlijk nog alles met elkaar te verbinden, zodat de juiste bewerking wordt uitgevoerd als je op de drukknop (convert) drukt. - Ga naar het “MainWindow.xib” venster. Terwijl je de ctrl-knop ingedrukt houdt sleep je nu van het icoon van het “application delegate object” (Hier WalkThroughAppDelegate) naar het icoon “window”. Een blauwe lijn moet hierbij zichtbaar worden en als je uiteindelijk de muis loslaat in het Window object komt er een pop-up venster met outlets. Kies hier voor “window” (trouwens de enige keuze).
- Nu herhaal je de bewerking, maar ctrl-sleep (ctrl ingedrukt houden terwijl je sleept) van de WalkThroughAppDelegate naar het MyView object. In het pop-up venster selecteer je “contentView”. Wat je in puntje 13 en 14 gedaan hebt is eigenlijk het declareren van de IBOutlet instanties.
- Open nu het MyView venster (door te dubbelklikken op het MyView icoon). ctrl-sleep nu tussen het MyView object (in xib) naar het linker tekstveld. Het popupvenster verschijnt waarin je nu “infield” selecteert. Herhaal nu hetzelfde voor het rechter tekstveld, maar kies nu “outfield”. (Opnieuw ken je objecten toe aan de instantievariabelen).
- Rechtsklik nu op de Convert knop (in het MyView objectvenster). Er verschijnt een pop-up venster waarin je gans onderaan de tekst “TouchUpInside” vindt met ernaast een cirkel (Figuur 5). Sleep nu van het cirkeltje naar het MyView object in het .xib venster. Als je daar de muis loslaat verschijnt een pop-up venster waarin je ‘convert:’ selecteert. Je hebt hiermee het verband gelegd tussen het klikken op de drukknop en het uitvoeren van de functie convert.
Figuur 5
- In xib dubbelklik je nu op de View Controller. Er opent een venster. Sleep nu de “MyView” icoon in het open venster. Je zal merken dat het geheel direct “snapt” in het View Controller venster. Bovenaan rechts bemerk je een pijltje. Dit doent om te simuleren wat er gebeurt in horizontale en vertikale stand…. probeer het eens.
- Ga nu naar XCode en “build” het project. Voer het ook uit in de simulator…. HET WERKT!
