Creating an iPhone Application – Tutorial One

Posted on

Creating an iPhone Application – Tutorial One

This tutorial is designed to guide you through the process of setting up
a basic iPhone application. It will show you how to set up a new
application with a view that appears when the application is launched.
This tutorial assumes that you have already downloaded the iPhone SDK, and are at least slightly familiar with the iPhone SDK tools. It is also helpful if you know a little bit about the basics of Objective C, the language used to program applications for the iPhone.
Step One – Create a New iPhone Project
First we need to prepare a new template to start from. There are
several convenient templates which create pre-built applications that
are already functional, but we will be starting from scratch. Not only
does this allow you to create more personal code, but it is also more
instructive, because it helps you to better understand the process
behind the code, and how it works.

  1. Launch Xcode
  2. Select File -> New Project, or type ⌘ + + N to open the New Project dialog.
  3. This will open a dialog containing the default project templates.
  4. Click on iPhone OS -> Application in the selection box on the left.
  5. Select the "Window-based application" item.
  6. Click Choose and enter a project name in the dialog box that
    appears. For the sake of convenience please type "HelloWorld" as the
    project name.

At this point click "Build and Go" to test your development environment.
The iPhone simulator should launch, and your iPhone application will
open, showing a blank white screen.
Step Two – Create a View for the Application
As you have probably already realized, your application is currently
nothing more than a white screen. It is time to create a view for your
application. A view is like a card containing all the interface
elements that you want displayed. There are two steps involved with
using a view: designing it and implementing it into your application.

  1. Launch Interface Builder
  2. Click File -> New, or type ⌘ + N to open the New File dialog.
  3. Click on Cocoa Touch in the selector on the left hand side.
  4. Select the "View" item and click "Choose".
  5. Interface Builder will open, showing at least three different windows.

Parts of Interface Builder
The View Window is where you design the layout of elements. It also provides a preview of what the interface will look like.
The Document Window shows the document tree. It lists the elements that
are in this document and how they are related to each other.
The Library Window provides a list of elements that can be added to the
view you are working. To add one of them click on it and drag it over
to the View window. If this window is not visible then click Tools
-> Library, or press ⌘ + + L to open it.
The Inspector Window is where you can adjust the parameters of a
selected element within the view. This is also where you create
connections between the elements in the view layout and the code within
your project. If this window is not open then click Tools ->
Inspector, or press ⌘ + + I to open it.

Step Three – Adding Elements to the View
For our first application let's create an extremely simple view which
does nothing more than show some text. This might seem like it is a
little too simple, but the hard part is going to be linking this view to
the application, so let's start simple.

  1. Open the Library window if it isn't already open, and select "Inputs and Views" from the library.
  2. Click on the "Label" item and drag it over to the view window.
  3. Release the mouse button to drop the label somewhere near the center of the view.
  4. To change the attributes of the label we must use the Inspector Window, so open if it isn't already on the screen.
  5. Click on the label item, then click the Attributes tab of the
    Inspector Window, or press ⌘ + 1 to go directly to the attributes tab.
  6. Increase the font size of the label to 20pts so that it easier to read.
  7. Resize the label so that the text inside isn't cut off.
  8. Double click on the text to edit it.
  9. Type "Hello World" and press Enter.
  10. If necessary resize the label again.

Now it is time to save the View that we have created.
Click File -> Save or press ⌘ + S to open the Save dialog.
Browse to the folder of the project that you created in the first step.
It is very important that you save the View file inside this folder,
because this keeps all the files of the project together in one place
and causes Interface Builder to detect that this view is part of the
Save the View with the filename "HelloWorldView". When you click the
save button Interface Builder will open a dialog asking which project
you want the file to be a part of. Click the checkbox next to your
project and and Interface Builder will add the view to your project.
Switch to Xcode and you should see the file "HelloWorldView.xib" in the
project tree on the left side of Xcode. Drag this file up and drop it
in the "Resources" folder.
Now the view is designed and laid out. But you aren't done yet. Before
the view can appear as part of your application you have to write the
code to load it into the application window.
Step Four – Implementing the View in Your Application
Implementing the view involves two aspects. First we need to create an
Objective C interface attached to the view. This will be used for
creating methods for adjusting the view and responding to events that
affect the view. Second we need to add the code to launch the view and
display it on application launch.

  1. Switch to your Xcode project.
  2. Click File -> New file… or press ⌘ + N to open the New File dialog.
  3. In the left hand selection box click iPhone -> Cocoa Touch Class.
  4. Select the "UIViewController subclass" item.
  5. For a filename type "HelloWorldViewController"
  6. Click Finish to create the new file and its header. Make sure that
    you drag the two new files up into the "Classes" folder in the project
    tree on the left side of Xcode. Technically it isn't a requirement but
    it is a good idea to get used to project organization.
  7. Switch back to Interface Builder.
  8. In the Document Window click "File's Owner".
  9. Click to open the Identity tab in the Inspector Window, or press ⌘ + 4 to open it directly.
  10. In the Class Identity textbox that says "NSObject" type "HelloWorldInterfaceController." This assigns a type to the View.
  11. Now we need to associate the view object with the view instance
    variable in the code. Click on the Connections tab of the Inspector
    Window, or press ⌘ + 4 to open it directly.
  12. In the Document Window click "File's Owner."
  13. Under the Outlets section in the Inspector Window you will see the variable "view" appear.
  14. To the right of the view variable is a small round circle. Hover your mouse over the circle so that it turns into a plus sign.
  15. Click on the circle and drag the mouse over the Document Window so
    that the view item is highlighted. A blue line will appear between the
    variable outlet and the highlighted view item.
  16. Release the mouse button and a connection will be made between the variable and the view element.

(Click on the screen image to enlarge the view.)

Now that the connection had been made between the variable and the view
element, we are ready to add the code for displaying the view in the
application window.
Open "HelloWorldAppDelegate.h" and replace it's contents with the following code.

#import <UIKit/UIKit.h>
@class HelloWorldViewController;
@interface HelloWorldAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
HelloWorldViewController *hwvc;
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) HelloWorldViewController *hwvc;

Basically what this does is add the HelloWorldViewController interface
to the main application delegate class. However, all it adds is a
pointer, so we still need to add code to allocate a new instance of
HelloWorldViewController and then display it.
Open "HelloWorldAppDelegate.m" and replace it's contents with the following code:

#import "HelloWorldAppDelegate.h"
#import "HelloWorldViewController.h"
@implementation HelloWorldAppDelegate
@synthesize window, hwvc;
- (void)applicationDidFinishLaunching:(UIApplication *)application
HelloWorldViewController *local_hwvc = [HelloWorldViewController alloc];
[local_hwvc initWithNibName:@"HelloWorldView" bundle:[NSBundle mainBundle]];
self.hwvc = local_hwvc;
[local_hwvc release];
[window addSubview:[self.hwvc view]];
// Override point for customization after application launch
[window makeKeyAndVisible];
- (void)dealloc
[hwvc release];
[window release];
[super dealloc];

When the applicationDidFinishLaunching
event message is sent to the application delegate it allocates a new
instance of HelloWorldViewController, and then adds the view as a
subview of the application window. Then it displays the window.
It is also important that the destructor for the interface deallocate the HelloWorldViewController that it allocated.
Testing and Troubleshooting

The code should be complete. Click "Build and Go" to test it out. The
application should launch, opening a white screen with the words "Hello
World" at the center.
If your application crashes with the message "The application HelloWorld
quit unexpectedly" then that means that you did not set up the link
between the view variable and the view element properly. Return to
Interface Builder and repeat the step where you drag the blue line from
the view variable in the connections inspector to the view element
object in the document window. If the view variable does not appear in
the connections inspector then you may also need to set the class
identity to "HelloWorldViewController" if you missed that step as well.
This is admittedly a very simple application. It's only interaction
with the user is that of launching and closing. However, it
demonstrates the steps and code required to create a view in Interface
Builder and then load it from your view controller in your project code.
Now that the view is set up you can add anything you want to
it—another label, a button, a text box, a navigation bar—anything at
all, and it will be displayed when the application launches.
If you just want to check out the code without following the
instructions, of if you simply can't get it to work on your own machine,
then feel free to download the project file for this tutorial. It
contains the complete project, interface builder view, and everything is
already set up and ready to compile.
Download the Xcode Project for Tutorial One

Creating an iPhone Application – Tutorial Two
Creating an iPhone Application – Tutorial One

Rating: 4.5
Diposkan Oleh:
Nurul Hamdi

Share ke:


Artikel Terkait Creating an iPhone Application – Tutorial One :

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *