Hello World

We can start off by hitting the Run button and see what we did so far. Because we created our project on an Xcode template, much of the basic app environment is automatically set up.
Wait for the project to build and for the Simulator to boot. You should now see our empty project.

To stop the running project on the Simulator, just press the Home button, or go back to Xcode and hit the Stop button.
When the app starts,  MainStoryboard.storyboard is loaded and the initial view controller is instantiated from it. A view controller is an object that manages an area of content; the initial view controller is simply the first view controller that gets loaded when an app starts.
Click on the MainStoryboard.storyboard file in the project. Xcode opens the storyboard in the editor area. A storyboard contains an archive of the objects, transitions, and connections that define an app’s user interface.

The arrow that points to the left side of the scene on the canvas is the initial scene indicator, which identifies the scene that should be loaded first when the app starts.
The scene on the canvas is named View Controller because it is managed by the ViewController object. A scene consists of the first responder (dynamic placeholder that represents the object that should be the first to receive various events while the app is running), the ViewController object and the view (object that draws content in a rectangular area of the screen and handles events caused by the user’s touches).
The white background is what you saw when you ran the app in Simulator. Let’s change it.

In the outline view, click the little triangle next to View Controller and select View. Xcode highlights the view area on the canvas.

If you open the Attributes inspector you’ll see some properties you can modify (for example you can try and change the background color).

To add UI elements, you have do drag them from the object library (the panel on the bottom right). Find a Label and drag it to your View.
Change the text of the label to “Hello world!”. To change the text you can either double-click the label or open it’s properties in the Attributes inspector.
Now add a Text Field and a Round Rect Button.
Open the properties for the Text Field and set the Placeholder property to “Put your message here”. Set the Return Key to “Done”. It should look like this.

In the properties for the Button, set the Title to “Press me!”.

Now if you run you project it would look like this in the Simulator:

But if you press your button nothing happens! Let’s take care of that 🙂

Open the ViewController.h file and make the changes so it looks like this:

@interface ViewController : UIViewController
{
    IBOutlet UIButton *PressMe;
}
@property (nonatomic, retain) UIButton *PressMe;

@end

Now go to ViewController.m and add this line just before the beginning of the viewDidLoad function.

@synthesize PressMe;

What we’ve just done here is added an outlet for our button so we can connect the code to the real button on the storyboard. We connect it by opening the storyboard file, right click on the View Controller and here you’ll see in the Outlets list our PressMe.

If you put your mouse over the little circle on the right of the PressMe you will see a plus sign. Click it and drag it to the real button on your scene. When you let go, you should see that the PressMe box changes and looks like this:

If you put your mouse over the “Button – Press me!” field you will see that the button on the scene turns blue, so you know you’ve done it right.

We have to do the same thing for the Text field and the Label, because we want our label to display the text that is in the field when the button is pressed.

So change the ViewController.h to look like this:

@interface ViewController : UIViewController
{
    IBOutlet UIButton *PressMe;
    IBOutlet UITextField *TextMessage;
    IBOutlet UILabel *LabelMessage;
}
@property (nonatomic, retain) UIButton *PressMe;
@property (nonatomic, retain) UITextField *TextMessage;
@property (nonatomic, retain) UILabel *LabelMessage;

@end

And the ViewController.m should look like this:

@implementation ViewController

@synthesize PressMe;
@synthesize TextMessage;
@synthesize LabelMessage;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

Now connect the outlets to the elements on the scene (same as we did with the button).

Let’s finally add an action to the button! First we will create an empty function and attach that function to the button. So first add a function declaration in ViewController.h

-(IBAction)onButtonPress:(id)sender;

And then the definition in the ViewController.m

-(IBAction)onButtonPress:(id)sender
{
}

Now similar as before, right click on the View Controller in the storyboard and you will see our action onButtonPress listed. Link it to the button, and connect it to the Touch Up Inside event.
Just to quickly check if you did it right, change the onButtonPress to look like this (we just changed the text of our label; also make the label a bit larger so that the text fits)

-(IBAction)onButtonPress:(id)sender 
{
    LabelMessage.text = @"The button is working!";
}

When you run the project now and click the button, it should look like this

If you managed to do it, well done! 🙂

So now let’s finally do what we came here for. We need to take the text from the Text Box and display it on the Label. We will also make sure that the Text Box isn’t empty, and if it is we will make a notice in the Label.

-(IBAction)onButtonPress:(id)sender
{
    if (TextMessage.text.length == 0)
        LabelMessage.text = @"There is no text in there!";
    else
        LabelMessage.text = TextMessage.text;
}

Now just run the fabulous app and test it! 🙂

Leave a Reply