My First iOS Application (from C# perspective)

Every year, usually in December, I make a plan as to what I would like to learn next year.  This time my number one goal is to get up to speed on iOS development. So, when I got my Macbook Pro, I started on that task.  As a matter of fact, I spent a good amount of time this weekend learning some basics of iOS development.  As usual, I like to blog about my experiences because the process of writing things down helps me remember things better.

I only needed Macbook with Xcode.  I went to App Store icon on the Mac to download current version of Xcode – 4.5.2.  Once that is done, just open Xcode and create new project

Select Single View Application. On the next screen give it a name (FirstApp) and fill in class prefix to match, also FirstApp.  This seems to be a convention iOS developers follow.  On the next screen select project location – I used Documents.  Voila – your first project is created.

I am aiming low for this first project.  Just a text box to capture user name, a button that will show a dialog, saying Hello with the user name from the text box.

To add visuals you have to use a ViewController.  My main controller is called FirstAppViewController.  There are multiple files with this name and various extensions.  If you remember your C days, you will know what the .h file is all about.  This is a header (interface) file.  .m is the equivalent of .cpp – implementation files.  .xib (seems to be referred to as nib file) is the user interface file.  Click on that (double-click will open it in a new window). Then you will see the outline of an iPhone – this is the app style I chose.  In the right pane you should see a window called objects.  You can drag and drop controls onto the UI from there.  Choose RoundRectButton, Label and Text Field.  You could just double-click on button and label to edit the text shown on them.  Once you are done, your screen should look something like the following

Now it is time to write some code.  Ultimately I need to do three things

  • Wire up button’s click action
  • Be able to read the text field content
  • Popup alert window (MessageBox for people like me coming from C#/.NET)

To wire up a button click action I need to have a handler (in C# terms).  To do that we need to create IBAction method in the controller.  You need to that in .m (implementation) file and .h (declaration) file.

Here is the code from .h file

//
// FirstAppViewController.h
// FirstApp
//
// Created by Sergey Barskiy on 1/6/13.
// Copyright (c) 2013 Sergey Barskiy. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface FirstAppViewController : UIViewController

– (IBAction)sayHello;

@end

Implementation code is a bit more involved

//
// FirstAppViewController.m
// FirstApp
//
// Created by Sergey Barskiy on 1/6/13.
// Copyright (c) 2013 Sergey Barskiy. All rights reserved.
//

#import "FirstAppViewController.h"

@interface FirstAppViewController ()

@end

@implementation FirstAppViewController

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

– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

– (IBAction)sayHello
{
     NSString *message;
     message = @"Hello";
     UIAlertView *alertView = [[UIAlertView alloc]
         initWithTitle:@"First App"
         message: message
         delegate:nil
         cancelButtonTitle:@"OK"
         otherButtonTitles:nil, nil
         ];

[alertView show];

}

@end

What you see above is the following.  I create a variable to hold the message.  Then I create alert view control and initialize its title, message and button title.  Delegate parameter is for the handler, an object that will listen to the events raised by the alert view.

Then to wire up the button, you need to click on interface file to see the UI.  The hold down control key, click on the button and drag and drop it on top of File Owner icon in the middle pane,  It looks like yellow cube.  Once you drop it, you will see context menu with my sayHello method.  Just click on it to wire up the button.  Now click on Run button to test the app so far. You should be able to click on the button and see Hello message with title of First App.

Now we need to teach the controller that it has a text field.  I do that in header (.h) file.  Just click on it and add the following line of code above sayHello (or below if you would like).

@property (nonatomic, strong) IBOutlet UITextField *nameField;

IBAction and IBOutlet are methods and properties (respectively) that Interface builder knows about. 

Now, I need to wire up text field in the UI to nameField property.  To do that in the right pane click on right arrow (connections button).  Then click on text field in the UI.  Then you will see an area called Referencing Outlets.  Under there click on the little circle and drag it over on top of File Owner icon.  Once you drop it, select nameField from context menu.  Now my controller knows about fieldName property.  Now I just need to alter sayHello method as follows.  You can also control-drag from the UI.

– (IBAction)sayHello
{
     NSMutableString *message = [NSMutableString stringWithString:@"Hello, "];
     [message appendString: self.nameField.text];

     UIAlertView *alertView = [[UIAlertView alloc]
         initWithTitle:@"First App"
         message: message
         delegate:nil
         cancelButtonTitle:@"OK"
         otherButtonTitles:nil, nil
     ];
     [alertView show];

}

Should work, right?  If I run the app, I will see that the virutal keyboard does not go away when I click return, hence my app does not work.  Upon some Googleing I found that I need to dismiss the keyboard when the return button is clicked on virutal keyboad.  I took a shortcut, and declared my view controller to be the delegate for text fields.  Orinarily should have created another class.  Now, the controller dclaration in header file looks as follows

#import <UIKit/UIKit.h>

@interface FirstAppViewController : UIViewController<UITextFieldDelegate>

@property (nonatomic, strong) IBOutlet UITextField *nameField;

– (IBAction)sayHello;

@end

Now I need to add some methods to both header and implementation file.

The signature for my method is

– (BOOL) textFieldShouldReturn:(UITextField *)textField;

And the implementation is

– (BOOL) textFieldShouldReturn:(UITextField *)textField
{
     [textField resignFirstResponder];
     return true;
}

Now, the same step – wire up text field to the delegate this time. Hold down control key, click on text field, drag it on top of file owner icon, drop it and select delegate from the context menu.  This is the last step.  Run and test your app.  Mine worked 🙂

Thanks.

4 Comments

  1. Great article, I just bought a mac a few days ago and I am going to start some development this weekend, will be looking to a simple hello world approach for the first iteration of what will hopefully become a somewhat decent application.

  2. @jorge
    I think the environment is different, but I cannot say if it is better or worse. I think XCode is a good tool, maybe not as good as studio, but I would not write a giant enterprise app for iOS either. I definitely do not hate XCode though.

  3. Got a macbook pro last year with the intention of learning iso. I got too involved with wp7/win8 apps that I haven’t had time to get into iso dev. Thanks for the ever so slight nudge in that direction.

Leave a Reply

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