Mac Application Development by Example: Beginner's Guide

Access the Mac App store by clicking on the Apple menu and selecting App Store.

Search the App Store to locate the Xcode App.

Install the Xcode App from the App store.

To create a new Xcode project, launch the Xcode App and click the button titled Create a new Xcode project on the Welcome to Xcode window as shown in the following screenshot:

When Xcode asks us to select a template, select Application under Mac OS X and Cocoa Application as the template. Then, click on the Next button.

When we click the Next button, Xcode will ask us to select options for our new project. The options that we need to select are as follows:

Finally, there are some checkboxes at the bottom of the options screen. The only one that needs to be checked is the option titled Use Automatic Reference Counting. This setting permits Xcode to automatically manage the memory that our program uses and helps keep programing simple because we do not need to think about destroying objects that our program creates. This checkbox, along with the rest of our settings, is shown in the following screenshot:

Click on the Next button and Xcode will ask us where we want to save the new project that we are creating. While we can save projects anywhere that we like, a good place may be a new folder called projects in our Documents folder. Whatever we decide, when we have navigated to that folder, we need to click on the Create button as shown in the following screenshot:

In Xcode, open the SimpleCalc project.

Click on the disclosure triangles beside each folder icon in the project navigator to reveal all of the items that Xcode created as shown in the following screenshot:

We don't, yet, need to understand everything that the Xcode template has done for us, but it is important to understand each of the main types of files in these folders. The file type is determined by the file extension (.h, .m, .app, and so on).

In the project navigator, click the folder icon to show the project navigator.

In the project navigator, click on the very top item, just under the icons, named SimpleCalc.

Under PROJECT, click on SimpleCalc.

Under Deployment Target, click on the drop-down menu beside Mac OS X Deployment Target and select the oldest version of Mac OS X on which we want our App to run as shown in the following screenshot:

Change TARGETS setting for the Organization of the Project Document to our name or the name of our company as shown in the following screenshot:

Before we continue to configure our Xcode target, we need to take a small detour and create an App Icon. We are going to need our App Icon as part of the process of configuring an Xcode target.

The first thing we need to do is create the icon. We can do this in any image editing program, from Illustrator, to Photoshop, to Gimp. The program that we use does not matter. What matters is that the image has a transparent background and that the image size is 512 x 512 pixels. We need to export our image in PNG format and it may look like the following image, which has been created in Photoshop Elements:

Once we have the image that we want to use as our icon, we need to save it in a folder named SimpleCalc.iconset with the name icon_512x512.png.

Once we have our PNG image saved in the iconset folder, we simply drag that folder to the App Icon section of our project target and Xcode will automatically convert it to a suitable .icns file as shown in the following screenshot:

Because we have not provided all the required image sizes, Xcode will warn us that some image sizes are missing. For the purposes of our SimpleCalc App we can ignore these warnings but if we planned to deploy our App to the Mac OS X App Store we would create a PNG file for each required icon size and place it in our iconset folder prior to dragging the folder in to the App Icon section of the Target as shown in the following screenshot:

In the main Xcode window, click on the Run button as shown in the following screenshot:

If we watch the Xcode status panel after clicking the Run button, we will (very briefly) see some messages that indicate Xcode is building our App as shown in the following screenshot:

After the building of the App is complete, the SimpleCalc App will display its menu bar and main window. When the SimpleCalc App is running we can drag its main window around, click on its menus, display the About window, and quit the App by selecting Quit SimpleCalc from the App's menu as shown in the following screenshot:

Open the SimpleCalc project in Xcode.

Click on the item named BTSAppDelegate.h and add the highlighted new interface @property definitions and the button action interface definition for the SimpleCalc App. Notice they are placed in the template code after the window property and before the @end statement as shown in the following code snippet:

@interface BTSAppDelegate : NSObject <NSApplicationDelegate>

@property (assign) IBOutlet NSWindow *window;

/*
    Create the user interface elements
 */

// Buttons
@property (assign) IBOutlet NSButton *mAdd;
@property (assign) IBOutlet NSButton *mSubtract;
@property (assign) IBOutlet NSButton *mMutliply;
@property (assign) IBOutlet NSButton *mDivide;

// Text Fields
@property (assign) IBOutlet NSTextField *mValue1;
@property (assign) IBOutlet NSTextField *mValue2;
@property (assign) IBOutlet NSTextField *mResult;
/*
 Create the App interface for the buttons
 */

- (IBAction)myButtonAction:(id)sender;

@end

Click on the item named BTSAppDelegate.m and add the highlighted new interface @synthesize definitions and the button action implementation for the SimpleCalc App.

Again notice the position of the code after the @implementation keyword and before the @end keyword as shown in the following code snippet:

@implementation BTSAppDelegate

/*
 Create the user interface setter and getter functions
 */

// Buttons
@synthesize mAdd;
@synthesize mSubtract;
@synthesize mMutliply;
@synthesize mDivide;

// Text Fields
@synthesize mValue1;
@synthesize mValue2;
@synthesize mResult;

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    // Insert code here to initialize your application
}

/*
 Create the App implementation for the buttons
 */

- (IBAction)myButtonAction:(id)sender;
{
    // For now, just beep
    NSBeep();
}

@end

Click on the item named MainMenu.xib.

Click the Show Document Outline button as shown in the following screenshot:

Click on the Window - SimpleCalc tab in Objects to display the App window as shown in the following screenshot:

Locate the Object Library option and scroll to find the Square Button shape as shown in the following screenshot:

Click and drag a Square Button shape from the Object Library to the SimpleCalc window. Then drag three more buttons and place them beside the first button to form a row of buttons. Finally, resize the window so that it fits the four buttons as shown in the following screenshot:

Double-click on the buttons one at a time and type the labels +, -, ÷, x respectively.

You will end up with something that looks like the following screenshot:

Locate the Object Library and scroll to find the Text Field option.

Drag two Text Field objects into the SimpleCalc window, and place them one below the other.

Locate the Object Library and scroll to find the Horizontal Line option.

Drag a Horizontal Line into the SimpleCalc window and position it below the two Text Field objects.

Locate the Text Field object in the Object Library and drag a third Text Field into the SimpleCalc window.

Click and drag to select all the Square Button objects and drag them up below the third Text Field.

Resize the SimpleCalc window to fit the Text Field and Square Button objects. After you are done, you will have something like the following screenshot:

Because we don't want our calculator window to change size, we need to set constraints. Click on the SimpleCalc window to select it, select Show the size inspector in the inspector pane, and under Constraints, enable both the Minimum Size and Maximum Size options as shown in the following screenshot:

Right-click (or if you don't have a three-button mouse, hold down the Ctrl key and left click) on the + button and drag it to the App Delegate object as shown in the following screenshot:

When the App Delegate object highlights, release the mouse button and select myButtonAction from the Received Actions selection pane as shown in the following screenshot:

Repeat the process to connect the remaining three buttons to the – myButtonAction method.

Right-click (or if you don't have a three-button mouse, hold down the Ctrl key and left click) on the App Delegate object and drag until the first Text Field is highlighted as shown in the following screenshot:

Release the mouse button and select mValue1 from the Outlets selection pane as shown in the following screenshot:

Repeat these steps to connect mValue2 to the second Text Field and mResult to the third Text Field.

Open the SimpleCalc project in Xcode.

Click on the item named BTSAppDelegate.m and add an implementation for the myButtonAction: method. The code that we need to add is as follows:

/*
 Create the App implementation for the buttons
 */

- (IBAction)myButtonAction:(id)a_sender;
{
    // For now, just beep
    // Comment out the beep, we don't need it
    // NSBeep();
    
    // Get the button title (+, -, x, or ÷) to
    // determine which operation the App will
    // preform
    NSString *l_operation = [a_sender title];
    
    // Get a double precision number from the
    // first text field
    double l_value1 = [mValue1 doubleValue];
    
    // Get a double precision number from the 
    // second text field
    double l_value2 = [mValue2 doubleValue];
    
    // Create a double precision variable to
    // hold the result of l_value1 <op> l_value2
    double l_result;
    
    // If the operation was addition, then
    // add the two values
    if ([@"+" isEqual: l_operation])
    {
        l_result = l_value1 + l_value2;
    }
    // If the operation was subtraction, then
    // subtract the two values
    else if ([@"-" isEqual: l_operation])
    {
        l_result = l_value1 - l_value2;        
    }
    // If the operation was multiplication, then
    // multiply the two values
    else if ([@"x" isEqual: l_operation])
    {
        l_result = l_value1 * l_value2;        
    }
    // The operation must have been division, so
    // divide the first value by the second value
    else
    {
        l_result = l_value1 / l_value2;        
    }

    // Set the result text field to the result
    [mResult setDoubleValue:l_result];
    
}

Open the SimpleCalc project in Xcode.

Under the Product menu, select Clean.

Under the Product menu, select Edit Scheme.

In the scheme editing panel, select Run SimpleCalc.app, click on the pop-up menu for Build Configuration and select Release. Then click on the OK button as shown in the following screenshot:

From the Product menu, select Build For and select Running as seen in the following screenshot:

In the Project Navigator, right-click (or hold down the Ctrl key on the keyboard and left click if you don't have a three button mouse) on SimpleCalc.app and select Show in Finder as shown in the following screenshot: