Tech, Games, Fun: December 2013

Happy Holidays

December 23, 2013 Pratik 0 Comments

Games, iOS, iPad, iPhone

Original Tomb Raider Released for iOS Devices

December 18, 2013 Pratik 0 Comments

Mavericks, OS X

Apple Outs Mac OS X 10.9.1 Update For Late 2013 Retina Macs

December 18, 2013 Pratik 0 Comments

Apple, OS X, OS X Mavericks, Software

Apple Outs Mac OS X 10.9.1 Update

December 17, 2013 Pratik 0 Comments

OS X, Programming, Xcode

Today we will write a simple Mac app with Xcode 5. The Xcode 5 has new design and different coding style that its predecessors. I will be using the version 5.0.2, but you can code with version 5 or higher. The code will be slight different in Xcode 4+. So, let's get started. I expect you to know a little bit about Objective-C.

If you are coming from any object oriented language like Java, C# or C++, then please keep in mind that Objective-C is different that those languages. This application accepts your input in a text box and shows in a label when you click a button.

Create a new project

First open Xcode and make a new project called "HelloWorld". But we are not doing a simple hello world app here. We will do something different. Save it any a location suitable to you. Leave the App Store category to None and leave the Core Data unchecked.

You will be greeted with a screen with project details. On the left side, you can see the Navigator area where all the files of this project are listed in various folders. If you are new to Xcode, then first check the interface of Xcode. I have marked them to understand the layout easily.

Click the 'MainMenu.xib' to get into Editor area. You can see a vertical dock with seven icons. And you also can see the menu bar of your application. To start developing your app, click the 5th icon in the dock. It's a Window Object. You will see a typical Mac app window.

The next step is to add some elements into our app. The panel in the right hand side bottom is called library where you can select various elements or objects to add. Click the 3rd icon which is highlighted in blue the the above image. In the search bar below, search for Text Field and when you get that drag it to the window. Then search for Push Button and Label objects and drag them to the window too. Then rearrange them as shown in the above image.

Double click the push button and replace the text with Click Me or Show Name or anything you like. Similarly, you can double click the label and remove the text and make it blank so that it will show the text which we will enter in the text box. After completing the above task, now we will link the text field, the button and label so that when we will enter any text in the text box, it will be shown in the label.

To code and connect more easily we we will switch to split mode which is achieved by clicking the 5th icon from right in the toolbar. It's called Assistant Editor. It looks like a butler with tuxedo and bow neck tie. Now you can see the window object in the left hand pane and the file AppDelegate.h in the right hand side pane. If it is not selected, then you can select it from the navigation bar on top of it.

Now click the text field and hold the control button and drag it to the right hand side file under the property declaration. A line will be connected from the text field to the right hand side file. And you will be presented with a pop up as shown in the above image. You are defining a property. Give it a name as txtField. Make sure it is an outlet. When you click Connect, a property line will be entered in the code file. If you are coming from Java or other OO languages, you can think of this property as declaring variables. Similarly connect the label also. Name it as showLabel. Now time to connect the button. As we know a button causes something happen. So drag it and you can see in the popup that it is set to Connection type Outlet. Change it to Action. Name it as showBtn. A button is a NSButton type object.

Now after connecting you will see the AppDelegate.h file as below.

//

//  AppDelegate.h

//  HelloWorld

//  Created by Pratika Kumar Rana on 19/11/13.

//  Copyright (c) 2013 Pratika Kumar Rana. All rights reserved.

//

#import <Cocoa/Cocoa.h>

@interface AppDelegate : NSObject <NSApplicationDelegate>

@property (assign) IBOutlet NSWindow *window;

@property (weak) IBOutlet NSTextField *txtField;

@property (weak) IBOutlet NSTextField *showLabel;

- (IBAction)showBtn:(id)sender;

@end

Now we are done with split view. We can to normal single file view by pressing Command (⌘)+ Return(⏎) key. Select AppDelegate.m, which is the implementation of the .h file. We declared the properties in the .h file and now we will implement them in the .m file. Java users may think this about the declaration of variables in the .h file and creating getters and setters in the .m file. Thankfully, Xcode does the creation of getters and setters internally which is called Synthesize. If you are using older version of Xcode, you may see the Synthesize code as below.

@implementation AppDelegate;
@synthesize txtField;

It's time to write the code to connect the pieces together. Refer to the image above. We will write the code for the button above the @end. We will change the content of showBtn method. We will save the content of the text field in an String object named message. We will initiate the object with alloc and initWithFormat. What the alloc will do is that, it will create an object and initWithFormat will use a suffix (which we will provide) with our text field content. We use @"" for string. We are getting the value of the text field by [_textField stringValue].

NSString *message = [[NSString alloc]initWithFormat:@"Hello, %@",[_txtField stringValue]];

We will show the message in the label by assigning it to the label.

_showLabel.stringValue = message;

The complete code for AppDelegate.m file.

//

//  AppDelegate.m

//  HelloWorld

//

//  Created by Pratika Kumar Rana on 19/11/13.

//  Copyright (c) 2013 Pratika Kumar Rana. All rights reserved.

//

#import "AppDelegate.h"

@implementation AppDelegate

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification

{

    // Insert code here to initialize your application

}

- (IBAction)showBtn:(id)sender {

    NSString *message = [[NSString alloc]initWithFormat:@"Hello, %@",[_txtField stringValue]];

    _showLabel.stringValue = message;

}

@end

Go ahead and run it. You can use Command+R. Enter any text in the text field and click to see the result below.

The Xcode does handle all the memory allocation and deallocation by ARC (Automatic Reference Counting). In older version of Xcode, you had to write code to release the memory.

You can find the code and the application in the link below. Feel free to ask any question. Follow me on Twitter to more updates on Xcode.

Download on Dropbox
https://www.dropbox.com/sh/i02mbpkchg73xrq/GJ2w9Tf4mK

iTunes