Title says it all, this will be a beginner tutorial on how to create a Hello World app for the iPhone using the iPhone SDK. Why did I make this? Mainly because it's fairly easy to learn a programming language and program for a pc, but as I found out, programming for the iPhone is a little different and would have been a lot easier for me if I had read a comprehensive guide.
There are a few things to take into consideration on the iPhone:
1. The resources that are available to you (CPU power, RAM, etc...) are very limited on the iPhone compared to a modern pc (thankfully the hello world example will not need to take these things into consideration).
2. Writing a simple hello world app will take a lot more code than you think. But the good thing is all of this code is not really "logical programming". Most of it is code that is there because you need it for the stuff you want to display to acutally display on the screen. But here is an explanation for this:If you didn't already know, the iPhone has a certain way of displaying things (in our case, the "Hello World" text) to the screen. First you must initialize the window, in which the everything will be placed. Since you can't place things directly onto the window, you must create a view to put things on. After that, you need to create a frame (most of the time this will be in the form of a rectangle). Inside of the frame you will put a label that contains all of the text you will be outputting, along with all of the properties the text will contain (ex: font/size, text color, background color, etc...). This process may seem long and boring, but you get really used to it after a while...and it is really easy to memorize.
So, lets get started:
Open Xcode and go to File --> New Project. A window like this will pop up:
There is only one choice under "iPhone OS", so that's taken care for you. Then you need to choose "Cocoa Touch Application". Click the "Choose" button and then you will be asked to name the project and choose a folder to put it in...
When done with that you will see the Xcode project window:
I guess I should explain what these files do:
-CoreGraphics.framework, Foundation.framework, and UIKit.framework
: These are all frameworks that Apple has provided. CoreGraphics and UIKit are both visual things, they are what you see on you iPhone. Foundation is what you don't see, all of the stuff that goes on behind the scenes.
-Your_project.App (in my case Hello World.App): Think of it as the .exe on Windows.
-Your_project_nameAppDeleg ate.m/.h(in my case HelloWorldAppDelegate): Again, remember what I said about .m/.h files. The AppDelegate.m file is somewhat considered as your main (even though there already is a main). It is where your window and your main view are set up. The .h file simply has all of the instances you will use, and properties for those instances.
In reality this is actually your main, but in most cases it is good not to mess around with this file, as Apple has already written it for you.
-MainWindow.xib: If you open this up, you will see that Interface Builder will open up. MainWindow.xib is the user interface for your application.
Now, in previous versions of the beta sdk (like beta 1 and 2 i think), a source file called MyView.m (accompanied by MyView.h) was automatically added to the project. MyView is basically where you code for the frame, and the label, as I mentioned earlier. Here's why: Again, in previous versions of the beta, Interface Builder (another tool provided with the sdk), was not available. Interface Builder is where you create your iPhone app's GUI. In Interface Builder creating a label is a lot easier than doing it by code, so that's why MyView.m & .h were removed in later versions of the beta. However, I think it's more beneficial to learn how to create the frame and label by code, so that's why I do it that way in this tutorial.
So, you guessed it, we need to create MyView.m & MyView.h. Here's how:[/B] [B]On the left side in the Xcode project window you will see a bunch of folders, one of them being "Classes". Right click on the "Classes" folder, and then click "Add", "New file". Here is how it should look:
Then this window should pop up:
(If you haven't guessed already, MyView will be a subclass of UIView)
Under where it says iPhone OS, choose "Cocoa Touch Classes", and choose "UIView subclass. Another window should pop up, just leave the settings to default, but make sure that "Add MyView.h" is added. You should now see MyView.m and MyView.h added as part of the classes folder.
Now we can start writing some code. The first file we will work in is MyView.h, so open that up. MyView.h is where we will be creating instances of the class CGRect (a rectangle for our frame) and UILabel (our label). So inside of the "@interface MyView : UIView" part, add in the following:
CGRect rect; //ALWAYS REMEMBER THE SEMICOLON!!!
UILabel *label; //ALWAYS REMEMBER THE SEMICOLON!!!
As you can see, we have created an instance (or basically created an object) of the CGRect class named frame, and an instance (again, an object of) the UILabel class named label. And that is it for the MyView.h file, save it (File > Save) and now we are ready to move on to MyView.m. Btw, here is what MyView.h should look like (i cropped it or else it would have been really big):
Now let's move on to making use of the frame (rect) and the label (label). Open the MyView.m file. We will first be working in the "initWithFrame" method (the one with this name: -(id)initWithFrame: (CGRect)frame).
So, now that we have our frame (rect) created, we need to actually put it somewhere. But to do that, we need to give it coordinates to place itself on the screen. So first we declare four int (integer) variables. They are x(the x coordinate), y(the y coordinate), w(the width), and h(the height).
Since I want the "Hello World" text to not come off of the x axis, I will set the x
variable to 0. I will set the y
variable to 240...Why? Because I want our text to display in the middle of the iPhone screen, and since the iPhone screen's length is 480...well you get the point... The w
variables are pretty self explanatory. So, this is what should be added to the initWithFrame method:
int x = 00;
int y = 240;
int w = 320;
int h = 50;
Now we need to initialize the rect frame with the constructers we just initialized, the x, y, w, and h variables. So here's how you do this:
Ok, so our frame is set, now we need to put our label onto to frame. Here is how it's done:
rect = CGRectMake(x, y, w, h);
label = [[UILabel alloc] initWithFrame: rect]; //Allocate the label within memory, then initialize it inside of the frame we created earlier (rect)
The comment pretty much says it all, the [UILabel alloc] allocates the label into ram, and the rest puts it into the frame we created earlier (rect).
Now comes the actual "Hello World" part. We will now assign some properties to this label, one of them being the text. The properties we will add are the text alignment, the actual text, the font of the text, the text color, and the background color. Here is the code to do this:
label.textAlignment = UITextAlignmentCenter //Center the text.
label.text = @"Hello World!" //Set the text to "Hello World!"
label.font = [UIFont systemFontOfSize: 60.00 //Set font size to 60
label.textColor = [UIColor redColor] // Sets the text color to red
label.backgroundColor = [UIColor clearColor] //Sets the background to a clear color
Now that the label has been created and given some properties, we need to add it as a subview to our frame. Add this code:
Sorry if this view stuff is getting confusing, I was totally confused at the beginning but I started to understand it after a few days.
[self addSubview: label];
And that is it for the initWithFrame method, now we just need to add one small thing to the "dealloc" (deallocate) method (it should be the last method inside of the MyView.m file):
If you don't add that to the dealloc method, you won't get an error or a warning while compiling but at runtime the program will not function properly. And there! Most of the program is done, and now all we have to do is create the window and an instance of MyView to display everything. Here is what the MyView.m file should look like:
So now we move on to the AppDelegate files. Yours should be named like this: name_of_projAppDelegate.m (and there will also be a .h file).
So open up the AppDelegate.h file first. First put this in right after the "#import (etc...)" stuff:
This will tell the compiler that in the rest of this file we are referring to the MyView files.
Next we will create an instance of the UIWindow class named window...you guessed it, this is what our window will be. We also create an instance of the MyView class named contentView. contentView will be placed onto the window, and then the magical hello world text will be displayed.
Inside of the "@interface name_of_projAppDelegate NSObject: (etc...) part, you can see that an instance of UIWindow has already been created. Go ahead and delete the "IBOutlet" part before UIWindow, this is because we are not using Interface Builder. After that create an instance of MyView, I called it contentView. Here is what it should look like inside of the @interface name_of_projAppDelegate NSObject: (etc...) part:
Now outside of the "@interface name_of_projAppDelegate NSObject: (etc...) part (but before the @end) you should see a line like this:
I won't go into detail about what this is, but all you need to do is copy & paste this line, and put it right below. Now replace "UIWindow *window" with "MyView *contentView". And that is all for the AppDelegate.h file. Here is how it should look:
@property (nonatomic, retain) UIWindow *window;
Now open the AppDelegate.m file. This is our last file to edit. Under where it says @synthesize window
type @synthesize contentView
(or whatever you named your instance of MyView).
Now inside of the applicationDidFinishLaunc hing method, we need to allocate contentView and window into memory, and give them frames. Add this code to your file:
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
//NOTE: If you are using earlier versions of the beta SDK, go ahead and put in the above code, however if you are using beta 5 and above, you don't need it and it can cause some problems such as the screen turning white while running your app.
contentView = [[MyView alloc] initWithFrame:[window bounds]];
This stuff should look familiar, if not, revisit step 4. Now, since we aren't using Interface Builder, we need to make the window visible by adding this:
We also need to make contentView a subview of our window:
[window addSubview: contentView];
We are done with this method, now let's move on to the dealloc method down at the bottom. Add the following:
And now you are done with the AppDelegate files, here is what the .m should look like:
Congratulations, you have written your first iPhone app! Before you compile I recommend that you check over all of the files that you worked in and check for silly mistakes, like capital letters, forgotten semicolons, etc...When done with that, click the "Build and Go" button to compile and run your app on the iPhone Simulator:
The iPhone Simulator should look like this:
That's pretty much it...The great thing about the iPhone SDK is that Apple has included an enormous collection of classes and methods to work with. Creating apps that actually do things becomes very easy once you know the basics.
If anyone finds an error in what I posted please let me know and I will fix it, I'm not here to mislead anyone.