A year ago, when I needed to make my first iPhone application, Interface Builder looked for me very complicated. I came from the Microsoft Windows Mobile world where we created all GUI created programmatically (the standard controls are very poor, MFC worked too slow, etc.). My task has nothing to do with the GUI. I needed a test-wrapper for my code that was supposed to test a 3rd party framework. Google helped me to find few tutorials but all of then proposed to work with Interface Builder. It is really nice and simple to choose a control and put it on my application window in the Interface Builder. But how to connect this control with my code? In the beginning it was a kind of a rebus I had to solve. It was not very obvious for me to catch all these outlets, actions and bindings, Command- and Control-clicks, six different Inspectors,...
I hope this article will help to someone who likes me a year ago is looking for a way to make his first program without Interface Builder.
Let's assume that we know nothing about Xcode, Objective-C and Cocoa Touch - these are my conditions a year ago.
The following steps will help us to create a simple iPhone program with a label and a button:
1. Create Window-based iPhone application.Launch Xcode. In menu File choose item "New Project...". In the project wizard that comes next, in the left panel select "Application" item in the "iPhone OS" section. Select "Windows-based Application" icon on the right and press "Choose". Next window asks to set a name for the project. Type "First" and press "Save" button. By default the project is created in the "My Document" folder.
2. Add UIView programatically.In the project window, on the left panel that looks like the Finder sidebar you need to find FirstAppDelegate.m file. This sidebar represents as a tree all files of the project. The root of that tree is the project file. You can open this item and all others in the same was as you do with the folder in the Finder. If you have found the FirstAppDelegate.m file, click on it and its content will be shown in the right panel. There is a lot of code but we need only one function application didFinishLaunchingWithOptions. Make it look so:
/- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions
{
// Window bounds.
CGRect bounds = window.bounds;
// Create a view and add it to the window.
UIView* view = [[UIView alloc] initWithFrame: bounds];
[view setBackgroundColor: [UIColor yellowColor]];
[window addSubview: view];
[window makeKeyAndVisible];
[view release];
return YES;
}
3. Build and Run.In Xcode, in project window, in the left-up corner you can a toolbar that now, probably, contains text "Device - 4.0. Debug. First". It is a popup button. You need to click on it and select Simulator. Now press on "Build and Run" button. If you see the simulator ruuning, if you see an ugly yellow window on it - you did everything perfect. Close the simulator and go back to Xcode - there is "Quit" item in the main menu of the simulator.
4. Add a label.Here is the code that should be added to the same function after the line [window addSubview: view};:
CGRect labelFrame = CGRectMake( 10, 40, 100, 30 );
UILabel* label = [[UILabel alloc] initWithFrame: labelFrame];
[label setText: @"My Label"];
[label setTextColor: [UIColor orangeColor]];
[view addSubview: label];
You can Build and Run the program again to check the label is on the application screen.
5. Create new button.After the label code in the same function we need to add the following:
CGRect buttonFrame = CGRectMake( 10, 80, 100, 30 );
UIButton *button = [[UIButton alloc] initWithFrame: buttonFrame];
[button setTitle: @"My Button" forState: UIControlStateNormal];
[button setTitleColor: [UIColor redColor] forState: UIControlStateNormal];
[view addSubview: button];
Build and Run the program. These orange label and white button with the red title is our art.
If something goes wrong, verify our working function:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
// Window bounds.
CGRect bounds = window.bounds;
// Create a view and add it to the window.
UIView* view = [[UIView alloc] initWithFrame: bounds];
[view setBackgroundColor: [UIColor yellowColor]];
[window addSubview: view];
// Create a label and add it to the view.
CGRect labelFrame = CGRectMake( 10, 40, 100, 30 );
UILabel* label = [[UILabel alloc] initWithFrame: labelFrame];
[label setText: @"My Label"];
[label setTextColor: [UIColor orangeColor]];
[view addSubview: label];
// Create a button and add it to the window.
CGRect buttonFrame = CGRectMake( 10, 80, 100, 30 );
UIButton *button = [[UIButton alloc] initWithFrame: buttonFrame];
[button setTitle: @"My Button" forState: UIControlStateNormal];
[button setTitleColor: [UIColor redColor] forState: UIControlStateNormal];
[view addSubview: button];
[window makeKeyAndVisible];
[button release];
[label release];
[view release];
return YES;
}
6. Add an action.In our program the button does nothing. Let's add an action. In the header file (FirstAppDelegate.h) you need to add one line:
- (void)buttonClicked: (id)sender;
In Xcode, Alt-Cmd-Up keyboard shortcut will switch the editor to the header file from the m-file. If you have added this line, use the same keyboard shortcut to switch back to the m-file. and implement the action:
- (void) buttonClicked: (id)sender
{
NSLog( @"Button clicked." );
}
Now modify the code creating the button and add the following code:
[button addTarget: self
action: @selector(buttonClicked:)
forControlEvents: UIControlEventTouchDown];
Now if you will build and run the program in the Xcode console you will see "Button clicked" text.
