Monday, July 30, 2012

First Application for iPhone

Hi,

This is my first blog post and it will be all about opening and running a project on Xcode.

First of all, you have to have an iMac or Macbook, and Xcode. You can download Xcode Mac App Store: https://developer.apple.com/xcode/ .


When you open Xcode you will have a screen like seen below except there will be no project under the Recents tab. Press "Create a new Xcode project".

Figure 1

Following screen will ask you what kind of project you would like to create. As you can see in the Figure 2, there are plenty of options you can choose. For the first time we will go with "Empty Application Selection". (Note: make sure that in the left side bar, Applications options under iOS tab is selected.)

Figure 2
After you select "Empty Application", Xcode will ask you to give a name and select options about your project as seen in Figure 3.

Figure 3

Product Name is the name of your project that will appear in App Store after you deploy your app. You can skip Company Identifier and Bundle Identifier for now. Class prefix is a string that is replaced in the beginning of all your class names, but you don't have to place a class prefix in all your class names so not importantly, enter something you like. Device family lets you select the devices that the application will run on. The options for Device family are: iPhone/iPad or Universal (which runs on both iPad and iPhone) . "Use Core Data" and "Use Automatic Reference Counting (ARC)" should be chosen. Core Data provides you a list of objects, visualities and many things. ARC is about complier which means do you want to manage your memory by yourself or do you want the compiler do the job for you.  After Providing necessary information about our app we can click Next button.

You can enter the fields as in the Figure 4

Figure 4


After clicking next button in the previous figure, you will have a screen where Xcode asks you to select a folder where your app files should be stored, so select a folder as you like.

You have your application created right now:
Figure 5

In the left-most menu, right click on FirstApp Folder and select New File:

Figure 6

In the appearing screen select Objective-C class  (Make sure that in the left-most menu of the appearing screen, Cocoa Touch under iOS tab is selected):

Figure 7

Subclass of field should be "NSObject" and give FirstViewController to your class name:

Figure 8

In the subsequent screen just press Create button:

Figure 9

Now you will see that there are two files named FirstViewController.h and FirstViewController.m are created:

Figure 10

".m" files are implementation files just like ".c" files in C programming language whereas ".h" files are header files giving information about your class just like ".h" files in C programming language. Click on FirstViewController.m file and then click the button in the upper right corner of Xcode :

Figure 11

Now you will be able to see your ".m" and ".h" files at the same time. Since we are implementing a viewController here, we should change our super class in "FirstViewController.h" to UIViewController as seen in Figure 12: (Don't forget to save the file after you change)

Figure 12

What about our view that will appear on the iPhone screen after we launch the app? Select New File by right clicking on FirstApp folder as we did before for our view controller. In the left-most menu select User Interface under iOS tab and select Empty template as seen in figure 13:

Figure 13

Select iPhone as Device Family and click next in the appearing screen, Then name your file as "FirstViewController" and save it.

You will then have screen where you understand probably nothing about:

Figure 14

We created a view object but we didn't let the Xcode know which Controller will use this view. File's Owner represents the Controller that uses this particular view. Therefore, we have add a File's Owner to this view. Select File's Owner section under Placeholders tab. Then you will see a menu in the right-most screen, if you don't see the menu click on the button as seen in the figure 15: 

Figure 15

The menu will have contents as seen in Figure 16:

Figure 16

Name the Custom Class from NSObject to "FirstViewController" 

Figure 17

Now, we selected FirstViewController as the File's Owner for this view, what we have to do now is to draw something. In Figure 16, you see another menu in the bottom, there are many options to draw in Objects tab of this menu. Since we are creating a view we should have a master view containing all others. Therefore, select View, drag and drop it to the empty area in the middle of Xcode which is drawn by many squares:

Figure 18

Figure 19

We have our view screen as seen in Figure 19. Let's add a label and a button inside this view:

Figure 20

Okay, we now have a button and a label, but does our controller know about the existence of those components? do they have a name that the controller can reach? Not yet. We know let our controller know about those components and access them.This part is important. hold on pressing the control - (kntrl) button in the keyboard and drag and drop the label("Some Label") to inside of FirstViewController.h file:

Figure 21

After releasing the mouse and keyboard you will see a little popup:


Figure 22

Name it to textLabel and press Connect button. Now our controller will be able to access the textLabel defined in this view. How about letting the controller know when the "Show Time" button pressed and doing an action about it? by holding pressing the control button and dragging and dropping the button ("Show Time") to inside of FirstViewController.h file as we previously did for textLabel, we will have the same little popup just like in figure 22, but now we will select Action instead of Outlet for the Connection and name it to buttonPressed and select "Touch Up Inside" as the Event, see Figure 23:

Figure 23

Now, we have a property textLabel and an action named buttonPressed. IBOutlet in front of UILabel lets the compiler know that this property is retrieved from the view,  (weak, nonatomic) fields are out of discussion at this moment.

We have one more step to do in FirstViewController.xib view file. Select the File's Owner in Placeholders tab and click on the button in the rightmost menu:

Figure 24

Now, drag the little circle next to "view" under Outlets tab. and drop it to the View Under Objects tab as seen in Figure 25:

Figure 25

You can save the .xib file and click on FirstViewController.m file in the navigator. We're done with the view part, now it's time to implement something! Your current controller should look something like this:

Figure 26

Change your FirstViewController.m to this:

//
//  FirstViewController.m
//  FirstApp
//
//  Created by Rıfat Ordulu on 7/30/12.
//  Copyright (c) 2012 __MyCompanyName__. All rights reserved.
//

#import "FirstViewController.h"

@implementation FirstViewController
@synthesize textLabel;

- (void)viewDidUnload {
    [self setTextLabel:nil];
    [super viewDidUnload];
}
- (IBAction)buttonPressed:(id)sender {
    NSDate *now = [NSDate date];
    // Static here means "only once." The *variable* formatter
    // is created when the program is first loaded into memory.
    // The first time this method runs, formatter will
    // be nil and the if-block will execute, creating
    // an NSDateFormatter object that formatter will point to.
    // Subsequent entry into this method will reuse the same
    // NSDateFormatter object.
    static NSDateFormatter *formatter = nil;
    if (!formatter) {
        formatter = [[NSDateFormatter alloc] init];
        [formatter setTimeStyle:NSDateFormatterShortStyle];
    }
    [textLabel setText:[formatter stringFromDate:now]];
}
@end

We have last thing to do, letting the app know that this view controller we implemented is the main screen of the app. Click On FirstAppAppDelegate.m file in the navigator bar.

Change FirstAppAppDelegate.m to :


//
//  FirstAppAppDelegate.m
//  FirstApp
//
//  Created by Rıfat Ordulu on 7/30/12.
//  Copyright (c) 2012 __MyCompanyName__. All rights reserved.
//

#import "FirstAppAppDelegate.h"
#import "FirstViewController.h"

@implementation FirstAppAppDelegate

@synthesize window = _window;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    FirstViewController *firstViewController = [[FirstViewController alloc] init];
    // Set the root to our custom controller:
    [[self window] setRootViewController:firstViewController];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

@end

And change your FirstAppAppDelegate.h to:

//
//  FirstAppAppDelegate.h
//  FirstApp
//
//  Created by Rıfat Ordulu on 7/30/12.
//  Copyright (c) 2012 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface FirstAppAppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end



Your app is ready now. Click on the play button in the left-most position of Xcode and see your app in iPhone simulator:

Figure 27

After Clicking "Show Time" button:

Figure 28

If you have any questions, don't hesitate to ask. You probably asked a lot of questions about the scary syntax of Objective-C but this is not the topic in this post. You should learn Objective-C in a book or a good tutorial. I'll have a new post about the basic concepts of Objective-C in a few weeks. You can keep checking my blog. 

Best Regards