This is a simple tutorial that will allow you to understand the basic concepts behind creating an application using Xcode.
Creating a new project
The first thing that we need to do is to start Xcode.
On the welcome window we select "Create a new Xcode project"
This will bring the new project window. Here we select "Application" under the Mac OS X list of templates, then we select "Cocoa Application" and press the "Choose..." button.
We are prompt to save our project. For this example we will call our project Hello. Usually I create a folder for each project in order to keep the files organized.
After choosing the folder where we want our project to be saved and naming it, we press the button "Save". This will bring us the project window.
After choosing the folder where we want our project to be saved and naming it, we press the button "Save". This will bring us the project window.
The project window provide us with a list of our project files as well as a editor that we will use to modify these files.
Xcode takes care of creating the basic files we will need to create our application. If you are used to program in C, you will recognize the ".h" extension for the header files but will notice that there are no files with ".c" extension, Objective-C uses ".m" instead.
Designing the interface
On the files list we will focus in one in particular, the one with the ".xib" extension. This file is the the one that defines the interface of our application. Now we need to open this file, this will bring the Interface Bulder. Here we have a few windows that we need to know about before starting to design our App:
- The "Library" window (usually appears on the left) lists the available objects for our interface.
- The "Inspector" windows (usually appears on the right) allow us to view and modify the appearance and behavior of the objects that make up the interface.
- The "Project Window" (usually appears on the bottom center) shows the objects that are part of the interface.
- The "Application Window" (usually appears above the Project Window) is the window that will represent the appearance of our app.
For our Hello app we want a text box and a button, goal is to show a text on the text box when we press the button, this will allow us to learn how to respond to the user actions and how to modify attributes of the objects of our interface.
First we will add a NSTextField and a NSButton from the Library window to the Application Window. To do this we locate the objects on the Library window (we can use the search box on the bottom of the window) and the drag them to the Application Window.
You can resize the Application Window and the controls anyway you like.
Now we will customize the text on the button, we have two ways of doing this, the simplest one is to double-click the button, the other way is using the Inspector Window. We are going to use the Inspector Window this time just to get familiar with it.
The Inspector Window is divided in six tabs, the one we are going to use is the Attributes tab (the first one). This tab allow us to change the appearance of the control and as well as giving us very useful information about it.
Make sure you have the button selected on the Interface Window. On the Attributes tab of the Inspector Window you can view some properties of the button divided in three groups, Button, Control and View. These groups represent the hierarchy of the NSButton object. You can see that the "Button" object derives from "Control" wich in turn derives from "View".
In order to change the button text, we select the Title atribute and replace the default text with "Click Me".
Connecting the interface with your code
Now we have our interface ready, but in order to interact with the interface we need to create a class that will link the code with the interface.
We do this by adding an object (NSObject from the Library) to the Project Window. Then we need to specify that this object is our Application Controller. With the object we just added to the project selected, we select the Identity tab on the Inspector Window and change the class name to "AppController".
Next we are going to create the code for this class. With the AppController still selected, we go to Menu→File→Write Class Files...
We save with it the default name "AppController.m" and when prompted if we want to add the files to our project we select "Hello" and then click "Add".
For now we are done with Interface Builder, we will get back to it in a moment.
Returning to the Xcode window we can see two new file on the file list: AppController.h and AppController.m.
Next we modify the AppController.h so we have this code:
#import <Cocoa/Cocoa.h>
@interface AppController : NSObject
{
IBOutlet NSTextField *MessageBox;
}
-(IBAction) ButtonPressed:(id)sender;
@end
Here we are creating the references for the objects and behaviors we want to connect from our interface. "MesageBox" is the name we gave to the NSTextField object that we created on InterfaceBuilder.
"ButtonPressed" is a method that we will link to the button. We are only declaring it here, the method implementation will be made on the AppController.m.
On the AppController.m we will add the following code just bellow the "@implementation" keyword.
-(IBAction) ButtonPressed:(id)sender
{
[MessageBox setStringValue:@"Hello World"];
}
After saving both files, we go back to the Interface Builder where we are going to connect the interface objects with the code we just wrote.
On the Project Window, we Ctrl + click the AppController and drag to the NSTextField object and select the MessageBox, this will connect the IBOutlet MessageBox defined on the AppController.h to the NSTextField created before.
To connect the button we do the same, but now we drag from the button to the AppController and select the ButtonPressed method.
This is easy if you remember that the outlets are object that allow your application to display something on the interface, so you drag from the AppController to the interface, and actions are generated by the interface and received by your application, so you drag from the interface to the application.
After doing this you can save and quit the Interface Builder.
Running and understanding our application.
Now that we have defined the interface, the code and the relation between the interface and the code, we can now rum the application. To do this simply press the Build and Run Button on the Xcode toolbar.
Xcode will build you application and if there are no errors you should see the application window.
When you press the "Click Me" button the text field shows the message we defined on our code.
Now lets have a look at our code.
For those who are programming in Objective-C for the first time, the syntax will seem really strange. In fact it is fairly easy to understand.
The code that interacts with the TextField is defined in the following line:
[MessageBox setStringValue:@"Hello World"];
What this code does is to call the setStringValue: method from the NSTextField object. This method takes one parameter that is the string to show on the TextField.
In C we would have something like this:
setString("Hello World");
When we want to call a object's method in Objective-C, we enclose the object name followed by the method call in square brackets.
This was just a simple application to show the basics of writing a application for Mac.
I will try as soon as possible to post a video for this tutorial.
Your comments and suggestions are appreciated.
