What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Mac Application Development by Example: Beginner's Guide

Chapter 1. Our First Program – SimpleCalc

This chapter will walk us through the steps needed to set up Xcode as well as the development of the SimpleCalc App. SimpleCalc will allow us to take two numbers and perform addition, subtraction, multiplication, and division. This App is intentionally kept simple because we have many things to learn about how to develop Apps in this chapter.

In this chapter, we shall learn the following:

Installing the Xcode App
Creating a new Xcode project
Configuring an Xcode project
Creating an App Icon
Configuring an Xcode target
Creating a user interface
Implementing a Mac OS X App behavior
Building and running a Mac OS X program

Time for action - creating the SimpleCalc Xcode project

Now that we have installed Xcode, we can start using it to write our own Mac OS X App. Let's get started:

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:

Option

Value

Description

Product Name

SimpleCalc

The product name will be the name of your App program file that shows up in the Mac OS X Finder.

Company Identifier

com.yourdomain

com.yourdomain The company identifier needs to be unique and typically uses the reverse domain notation. It can be anything but you should use a company identifier that will not conflict with an existing company. If you don't have an Internet domain name you can acquire one new or you can use com.yourlastname.first name.

Class Prefix

Your Initials

(For consistency, throughout this book we will use BTS but when you develop your own code you should use your own initials)

The class prefix is used to make sure any program classes that you create do not have the same name as any program classes that someone else may create.

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:
Tip
Xcode automatically creates project subfolders
We do not need to create a subfolder in the projects folder because Xcode will do that automatically using our product name. If we look for our project folder in the Finder, after Xcode has created it, we will find it in projects/SimpleCalc.

What just happened?

When we clicked on the Create button, Xcode created the new project from the template that we chose and displayed its main interface window.

Tip

Don't Panic

The main Xcode window can be quite overwhelming. The following screenshot shows the entire interface simply to give us an idea of its scope. We don't need to understand all of the sections or be intimidated by Xcode's main window. As we get deeper into programming, we will learn more about each part of the window.

As we progress in our App development and become more familiar with Xcode, we will become comfortable with the contents of this interface. Xcode's interface is very similar to iTunes. It contains the following:

A control area along the top where we can build and run ("play") or stop our App
A navigation area on the left where we can select different components of our project to inspect
An editing area in the center where we can modify different components that were selected in the navigation area
A utilities area on the right where we can inspect and change attributes of selected items

It is a good idea to take some time now to become familiar with the meaning of each of the little icons for the navigator section of the Xcode view, which appear across the top of the navigation area on the left-hand side of the window. The following table gives descriptions of these icons:

Icon	Description
	Shows the project navigator, which lists all of the files in this project
	Shows the symbol navigator, which lists all of the symbols (method names, property names, and so on) in this project
	Shows the search navigator, which lists all of the search results for anything that we want to search for in the project
	Shows the issue navigator, which lists all of the issues (typically error or warning)
	Shows the debug navigator, which lists all of the App threads and symbols if a debug session is active
	Shows the breakpoint navigator, which lists all of the places we want the App to stop at so that we can inspect its state during an active debug session
	Shows the log navigator, which lists a log of the different activities that we have performed

Xcode will sometimes change the selected navigator based on actions that we perform or events that occur. It is useful to know that we can always switch back to the navigator that we want to see by clicking on the appropriate icon.

Time for action – examine the items in the project navigator

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).

What just happened?

We examined the contents of the Xcode project template and gained a better understanding of the different types of files that are needed to create a Mac OS X App. While it is not important, yet, to understand each of the different file types in detail, it is important to have an overview of all of the different components that are needed to create a Mac OS X App. As we develop our own Apps, we will acquire a much better understanding of these files and their contents.

Each file type is explained in the following table:

Extension	Description
`.h`	A program header file is used to separate the interface from the implementation. It defines what can be done but not how it is done.
`.m`	A program implementation file. It defines how things are done..
`.xib`	An Interface Builder file. It defines what the program interface, including windows, buttons, text fields, and so on will look like.
`.plist`	A property list. It contains a list of keys and corresponding values. The `Info.plist` includes important App information (like App name, App version, App copyright, and so on.)
`.strings`	A list of strings that are localizable ( translated into other languages). The `InfoPlist.strings` file contains localized versions of some of the strings found in the `Info.plist` file.
`.pch`	A precompiled header file. When we build our program the files are compiled into a single runnable file. Because compiling takes time, the compiler will precompile the `.h` files and save them in the `.pch` file. This is used to make building the App faster.
`.rtf`	A rich text formatted file. Rich text, differs from standard text, in that it can contain things like bold, italics, and embedded images. The `Credits.rtf` file is automatically displayed by the standard About window for our App.
`.framework`	A framework is a bundle (and a bundle is just a folder that looks like a file) that contains .h, .xib, and library files. Frameworks are provided by Apple to perform common functions (like displaying windows) so that we don't need to write that program code ourselves.
`.app`	An app is a bundle that contains everything our App needs to run.

Time for action - configuring the SimpleCalc Xcode project

To change the Mac OS X deployment target for our project we need to do the following:

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:
Note
Apple recommends we create App Icon images in a variety of different sizes ranging from 16 x 16 to 1024 x 1024. If we were building an App to deploy in the App Store, we would create more than a single 512 x 512 icon but for our SimpleCalc App a single icon is all we need.
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.
Note
The filename must be exact. If you name it anything other than icon_512x512.png the icon will not be correctly updated and you will see a generic icon instead of your App Icon.
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:

What just happened?

When we set up the Deployment Target and App Icon, we made changes to our Xcode project. Xcode will use those changes and apply them to the App when we build it so that the App is ready to run on the versions of Mac OS X that we need and the Finder will display our unique icon to identify our App on the desktop.

Have a go hero – make your own icon

Create your own 512 x 512 bitmapped image, save it in .png format, and put it in the iconset folder for the SimpleCalc App. You can use any image editing software that you like. You may want to create all of the required image sizes so that you don't get warnings from Xcode. The following screenshot shows the images of all required sizes present in the SimpleCals.iconset folder:

If you need a free bitmap editor take a look at Gimp for Mac OS X:

http://www.gimp.org/downloads/

Time for action – creating the SimpleCalc interface

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.
Tip
To enter the ÷ character, hold down the option key while pressing / on the keyboard.
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.

What just happened?

We created the interface for our SimpleCalc App and connected the interface to the program code for our App. We also connected the App Delegate object to the Text Fields in the interface. Now when we run SimpleCalc we see the new interface and when we click any of the buttons we hear a system beep.

Time for action – implement the SimpleCalc behavior

The following steps will help us implement the SimpleCalc behavior:

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];
    
}

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com . If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

What just happened?

We created and implemented the behavior for our SimpleCalc App (including removing the beep). Now when we run SimpleCalc we can enter two numbers and press one of the operation buttons to see the result as shown in the following screenshot:

Key benefits

Start developing applications for Mac OS X

Learn how to take advantage of Mac features such as the iSight camera and the multi-touch trackpad

Use Xcode to its full potential to make tasks simpler

Description

It's never been more important to have the ability to develop an App for Mac OS X. Whether it's a System Preference, a business app that accesses information in the Cloud, or an application that uses multi-touch or uses a camera, you will have a solid foundation in app development to get the job done.Mac Application Development by Example takes you through all the aspects of using the Xcode development tool to produce complete working apps that cover a broad range of topics. This comprehensive book on developing applications covers everything a beginner needs to know and demonstrates the concepts using examples that take advantage of some of the most interesting hardware and software features available.You will discover the fundamental aspects of OS X development while investigating innovative platform features to create a final product which take advantage of the unique aspects of OS X.Learn how to use Xcode tools to create and share Mac OS X apps. Explore numerous OS X features including iCloud, multi-touch trackpad, and the iSight camera.This book provides you with an illustrated and annotated guide to bring your idea to life using fundamental concepts that work on Mac.

What you will learn

The basic concepts and tools and how to use them to create an OS X application

Access information from the Internet from within a business app to enhance its functionality

Store and retrieve information from Apple s iCloud server farm

Use the debugger to find and fix problems that cause an app to crash

Create a new System Preference that can change the fundamental way the Mac OS system behaves

Capture video from the iSight camera and save it as a Quicktime movie file

Implement a custom view and draw directly into it using the 2D drawing interfaces

Share your app with others in a Gatekeeper-aware and friendly manner

What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

Mac Application Development by Example: Beginner's Guide

$48.99

iOS and OS X Network Programming Cookbook

$54.99

Total $ 103.98

Aaron Feb 28, 2013

I'm not sure if the same thing is true for the print version of this book but when I went to my PacktPub.com account to download this book to put on my iPad, I found that they had the examples bundled up in a .zip file that I could download, why can't more books do this?! I often find that you end up copying out of the book and it either doesn't work or that you have not properly digested how it works. The advantage of having these demos ready to download is that you can straight away get working code which you can tear apart, change, modify and really get your hands on. I often find this the best learning approach, but it is not for everyone. The book does not cater either way (in a good way) if you want to learn step-by-step then you can, the book guides you though exactly how to do things and more importantly it explains to you what you are writing, why you need it and what it does for the application.Now I was testing out the ePub format on my iPad and did find a few formatting errors with the way the text and tables flow from page to page but it did not effect how the book read at all.I am fairly unfamiliar with the Xcode interface and I only know the basic locations of the popular buttons, I think the interface can be a little bit daunting to some. This book starts right at the beginning and does not expect you to know anything about the interface beforehand, it walks you through all of the things that you need to know and some of the others you will pickup along the way.One thing I did find really useful about the book is the fact that it is laid out in almost three simple steps for each part, it first walks through a little bit about what you are about to do and what it will do for the application, it then has a `Time for action' step which guides you through the actual process, and then the part that I like the most is the `What just happened?' part. That last part is something that I have found lacking in some of the other books I have read (not all though) is that they don't take the time to step back and pause for a second and explain exactly what you just did.

Amazon Verified review

Ted Nov 01, 2013

OK for beginners, but be aware of a couple of issues:Apple has changed a few things in Xcode 5.0 (latest version for Mavericks), which are not represented correctly in the book. One tricky item in particular is how outlets are assigned in IB for items in the view. The method in the book is no longer supported, so you will have to do some googling.Also, there are a lot of typo's, and missing lines of code in the book examples. If you want to compile and run the code as listed, you will have to add a few things. Not good for a beginner.I will admit, I have not downloaded the .zip file that is supposed to be available to see if that has the correct source code. So far I am on chapter 5 and have been able to figure out how to fix all the issues, as they are minor if you have some experience with XCode. If you are a true beginner, you may struggle with this.Other than those issues, I like the layout of actually creating working applications for each chapter, rather than theoretical ideas.

Mac Application Development by Example: Beginner's Guide: A comprehensive and practical guide, for absolute beginners, to developing your own App for Mac OS X book and ebook.

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access