Objective-C basic interface

iOS, Mac, Objective-C, ,

In this tutorial, we will see how to create a basic interface in Objective-C with code only. It will be one TextField and one Button. Yeah, just that and we will need 6 files! And maybe we will use some inheritance.

ActionScript 3 is really a smart language, it is very quick to create what we will do. Something like 10 lines of code… Anyway, in this tutorial I will not make comparisons between ActionScript 3 and Objective-C like the previous one unless it is really useful.

Open Xcode and create a new iOS empty application, disable everything. Many files are created, but we will use only AppDelegate.h and AppDelegate.m In the AppDelegate we will init our applications.

Objective-C is based on the MVC design pattern, so we need to implement it :
Create a new UIViewController subclass file and name it MyViewController, don’t select XIB option, and create a folder “controllers”. Your files are created in the folder but you don’t see that in Xcode. Select the files, right click and select “New Group from Selection”. Rename it in “controllers”.
Objective-C doesn’t support package!

Import your ViewController class in AppDelegate.h :

1
2
3
4
5
6
7
8
9
10
11
12
13

#import <UIKit/UIKit.h>
#import "MyViewController.h"
 
@interface AppDelegate : UIResponder <UIApplicationDelegate> {
 
    MyViewController *myViewController;
}
 
@property (nonatomic, retain) MyViewController *myViewController;
 
@property (strong, nonatomic) UIWindow *window;
 
@end

Then open its implementation file (.m) :
Synthesize the property :

@synthesize window = _window, myViewController;

Release the object in the dealloc method :

- (void)dealloc
{
    [_window release];
 
    [myViewController release];
 
    [super dealloc];
}

Now we need to add our ViewController, go inside the application:didFinishLaunchingWithOptions: method and add two lines like that :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
 
    // Override point for customization after application launch.
 
    self.window.backgroundColor = [UIColor whiteColor];
 
    myViewController = [[MyViewController alloc] init];
 
    [_window addSubview:myViewController.view];
 
    [self.window makeKeyAndVisible];
    return YES;
}

Now we create an UIView class, I called it MyView. Create a folder “views” and “Group” your two new files. In the header file, we create 3 properties and a new constructor :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#import <UIKit/UIKit.h>
 
@interface MyView : UIView {
 
    NSString *myText;
    UIColor *colorText;
    UIButton *myButton;
}
 
@property (nonatomic, retain) NSString *myText;
@property (nonatomic, retain) UIColor *colorText;
@property (nonatomic, retain) UIButton *myButton;
 
- (id) initWithFrame:(CGRect)frame withText:(NSString *)text andColor:(UIColor *)color;
 
@end

Then implement your file :

@synthesize myText, colorText, myButton;

In the new constructor we create our button, and we add the textfield in an other method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

- (id) initWithFrame:(CGRect)frame withText:(NSString *)text andColor:(UIColor *)color {
 
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
 
        myText = [[NSString alloc] initWithString:text];
 
        colorText = color;
 
        myButton = [UIButton buttonWithType:UIButtonTypeInfoLight];
        [myButton setFrame:CGRectMake(10, 80, 30, 30)];
    }
 
    return self;
}
 
- (void) dealloc {
 
    [myText release];
    [colorText release];
    [myButton release];
 
    [super dealloc];
}

And finally uncomment the drawRect: method which is called when a new object is created :

1
2
3
4
5
6

- (void)drawRect:(CGRect)rect
{
    // the background becomes black, don't know why...
    [colorText setFill];
    [myText drawAtPoint:CGPointMake(100, 100) withFont:[UIFont systemFontOfSize:24]];
}

Note that coordinates (0, 0) are top left on iOS app, but bottom left on mac!

So at the moment we have just set up our view with some params. Now we add our view to the view controller :

1
2
3
4
5
6
7
8
9
10
11
12
13

#import <UIKit/UIKit.h>
#import "MyView.h"
 
@interface MyViewController : UIViewController {
 
    MyView *myView;
}
 
@property (nonatomic, retain) MyView *myView;
 
- (void) wasTapped;
 
@end

We have created a method wasTapped to inform the user that the button is pressed.

@synthesize myView;

And add these methods :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

- (void) loadView {
 
    CGRect rect = [UIScreen mainScreen].applicationFrame;
    self.view = [[UIView alloc]initWithFrame:rect];
 
    myView = [[MyView alloc] initWithFrame:rect withText:@"MyText" andColor:[UIColor greenColor]];
 
    [self.view addSubview:myView];
 
    [self.view addSubview:myView.myButton];
    [myView.myButton addTarget:self action:@selector(wasTapped) forControlEvents:UIControlEventTouchUpInside];
}
 
- (void) wasTapped {
 
    NSLog(@"Button clicked");
}
 
- (void) dealloc {
 
    [myView release];
 
    [super dealloc];
}

Now compile, you should have already your green textfield and a button which send “Button Clicked” in the console!

I think it’s time for some explanation :
In the AppDelegate file, we can’t add a view directly, we need to add its view controller thanks to these methods :

myViewController = [[MyViewController alloc] init];
[_window addSubview:myViewController.view];

Then we have added the view to our view controller thanks to the loadView method. It comes from UIViewController! Afterwards we have initialized our MyView class, giving some params, and finally added it and its button :

1
2
3
4

myView = [[MyView alloc] initWithFrame:rect withText:@"MyText" andColor:[UIColor greenColor]];
 
[self.view addSubview:myView];
[self.view addSubview:myView.myButton];

We didn’t need to add the textfield like we did with the button, because we use its method drawAtPoint which doesn’t exist on a UIButton.

And the last line of loadView method, add an event to our button :

[myView.myButton addTarget:self action:@selector(wasTapped) forControlEvents:UIControlEventTouchUpInside];

The action parameter need to be explained : Xcode is waiting for a SEL object. A SEL is simply a pointer reference to a function, we already used something like that in AS3 with listeners :

addEventListener(MouseEvent.CLICK, myFunction);
function myFunction(mEvt:MouseEvent):void { trace('ok');}

In Objective-C we used the keyword @selector(functionName).

Now it’s time to create our first object. Create a new file, MyParentObject, which extend NSObject, and group it in objects folder.

1
2
3
4
5
6
7
8
9
10

#import <Foundation/Foundation.h>
 
@interface MyParentObject : NSObject {
 
        NSString *myText;
}
 
@property (nonatomic, retain) NSString *myText;
 
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#import "MyParentObject.h"
 
@implementation MyParentObject
 
@synthesize myText;
 
- (id) init {
 
    self = [super init];
 
    if (self)  {
 
        myText = [[NSString alloc] initWithString:@"My Parent Text"];
    }
 
    return self;
}
 
- (void) dealloc {
 
    [myText release];
 
    [super dealloc];
}
 
@end

Then create a new NSObject class, MyObject which extends MyParentObject.

1
2
3
4
5
6
7
8
9
10
11

#import <Foundation/Foundation.h>
#import "MyParentObject.h"
 
@interface MyObject : MyParentObject {
 
    UIColor *myColor;
}
 
@property (nonatomic, retain) UIColor *myColor;
 
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#import "MyObject.h"
 
@implementation MyObject
 
@synthesize myColor;
 
- (id) init {
 
    self = [super init];
 
    if (self)  {
 
        myColor = [UIColor greenColor];
 
        myText = @"My overrided text";
    }
 
    return self;
}
 
- (void) dealloc {
 
    [myColor release];
 
    [super dealloc];
}
 
@end

Then we just need to init MyObject in the ViewController and added its properties to the View Constructor :

myView = [[MyView alloc] initWithFrame:rect withText:myObject.myText andColor:myObject.myColor];

You’ve to think to synthesize it, init it, and release it!

Then compile, that’s it!

MyZip.

In this tutorial we saw the 3 primary objects (NSObject, UIView and UIViewController) and how to assemble them. If you are creating an app for the iPhone & iPad, you will use Xcode’s Interface Builder with xib file. It is really smart, you just have to drag & drop interfaces and “draw line” to make connection between them and code.

On the internet, some people use NSRect NSColor objects for their view and design. I couldn’t use most of the NS object in my example… maybe there is a difference between an app on Mac and iOS. If someone could explain it, that would be great!
Finally it’s not learning a new language which is hard, it’s learning its API 😉

I don’t think that I will made basic tutorials on creating iPhone apps, there are already lots of resources on the internet. I will focus on game engine, Cocos2D and Sparrow!

Leave a Reply

Your email address will not be published. Required fields are marked *