MikeTeo.net

A Software Technologist's Blog (Wanna Email Me?)

Simple iPhone Tutorial (Part 1)

August 31, 2008 By miketeo

The iPhone developer center provides a great library of information of developing applications on iPhone. However, it assumes that the developer has some relative experience in developing applications on Cocoa. For developers like me who have decided to give iPhone development a try for the first time, there is undoubtedly a great hurdle to leap across.

I have put together this simple howto tutorial to illustrate some of the key features which I have picked from books (books on IPhone SDK development are seriously lacking at this point in time) and online materials that exist in bits and pieces all over the Internet. The illustrated features may not be the best solutions for the problems, but I believe they are rather straightforward and easier to align with my thought process (having come from a few years of development in MFC/Visual C++).

The tutorial will show you how to:

  • Create an iPhone application from an empty application template.
  • Add a 2-tabs tab control view for your main window on your iPhone screen.
  • Create a child view for the first tab which contains a Navigation bar (I use it for the title because it looks good), and a Table view.
  • Create another child view for the second tab which is basically a form-based view designed through the Interface Builder.
  • Load these two child views dynamically from their xib files.
  • Generate table cells which contain a label, and a on/off switch or a slider control through coding
  • Adding action handlers to the on/off switch controls and slider controls in the dynamically-generated table cells.
  • Capturing the changes in the states of the on/off switches and slider controls on the first tab view and display the states on the second tab view (form-based view).

1. What You Need

  • XCode 3.1
  • iPhone SDK
  • A machine to run OS X so that it will run XCode and the iPhone emulator
  • A nice cup of coffee to de-stress yourself 🙂

2. Project Setup

Start XCode. Create a new project called MikeTeoTutorial using the Window-based Application template.

Your minimal iPhone application will be created. It should look something similar to the screenshot below.

3. Main Window

If you build your iPhone application now, it will show an empty white screen.

Double-click on your MainWindow.xib. The Interface Builder will start and load the xib file. In the Interface Builder, open up the Library (it’s on the Window > Library). Find the Tab Bar Controller (it’s under Library > Cocoa Touch Plugin > Controllers). Drag the Tab Bar Controller to your MainWindow.xib window in the Interface Builder.

Now, go back to your XCode and add a UITabBarController object to your MikeTeoTutorialDelegate class.

MikeTeoTutorialAppDelegate.h

MikeTeoTutorialAppDelegate.m

We call window:addSubView to add the tabBarController to the main window. You can use this call to add other views as child views not only to windows but to other views as well. (UIWindow is a subclass of UIView).

Notice that the window and tabBarController variables are both declared with an IBOutlet prefix. This will indicate to the Interface Builder that it can connect to these variables.

Go back to your Interface Builder. Right-click on the Tab Bar Controller object in MainWindow.xib window. You will see a black popup window showing a list of Outlets. Left-click and drag on the circle beside the New Referencing Outlet row. A blue line will appear as you drag. Now drag this line to the Mike Teo Tutorial Application Delegate object and release the mouse button. Another black window will popup. Click on the tabBarController variable. You will see some form of association has been formed between the tabBarController variable and the Tab Bar Controller object in the xib.

After the connection is setup, the black window will look like the following:

That’s how the IBOutlet mechanism works. It allows you to link objects (having the same class, of course) in the nib to the variables declared in the classes in your source codes. If you check the Window object in the Interface Builder, you will notice that it has been already connected to the Mike Teo Tutorial App Delegate. This connection has already been done for you by default when you create this project.

Build your application now and run it. You will see a 2-tab control at the bottom of your iPhone screen, and the tabs works! 🙂

4. Adding Child View For First Tab

We shall now begin adding a new view for the first tab. In XCode, add a new file (File > New File) called FirstTabViewController. Choose the UIViewController template.

The view for the first tab will contain a UITableView as one of its child views. We will add a new UITableView variable to allow the Interface Builder to connect to this variable later. We will also subclass UITableViewDataSource and UITableViewDelegate so that this class can act as a data provider for the Table View that we are going to add later in this view. We will return 2 sections: first section has 2 rows while the second section will have 1 row. We will use a default UITableViewCell to show a simple label for each row.

FirstTabViewController.h

FirstTabViewController.m

Now, we will create a new xib file for the first tab. In XCode, add a new file called FirstTabView. Choose the View XIB template.

Open this FirstTabView.xib file through Interface Builder.

  1. Now drag a Navigation Bar from the Library to your View window in Interface Builder. Place it at the top of the view. The Navigation Bar is under Library > Cocoa Touch Plugin > Windows, Views & Bars.
  2. Now drag a Table View from the Library to your View window. The Table View should stretch to fill the remaining space on the window. The Table View is under Library  > Cocoa Touch Plugin > Data Views.
  3. Open the Identity Inspector (Tools > Identity Inspector). Click on the File’s Owner in FirstTabView.xib window. You should see the value of NSObject being shown in the Class field. Change this to FirstTabViewController using the drop-down list.
  4. Connect the New Referencing Outlet in View to the File’s Owner. You should see a view variable. Connect to this variable.
  5. Connect the New Referencing Outlet in Table View to the File’s Owner. You should see the myTableView variable. Connect to this variable.
  6. For the Outlets in Table View, connect both the delegate and dataSource to File’s Owner. We can do this because we have set the File’s Owner to FirstTabViewController class and the FirstTabViewController class calls conforms both UITableViewDataSource and UITableViewDelgate protocols.

After these steps, you will see a layout similar to the screenshot below (click screenshot to enlarge).

Now, we are ready to add this first tab view to the MikeTeoTutorialAppDelegate files. This will initialize the FirstTabViewController with the FirstTabView xib file.

MikeTeoTutorialAppDelegate.h

MikeTeoTutorialAppDelegate.m

app2

Build and run. You will see your table for the first tab like this:

In Part 2, we shall add in the second tab view and to create more sophisticated table view cells for the first tab view through coding.

  1. johnnynine Said,

    Using the IDE, how do you know which properties/methods need to be implemented when creating a subclass?

    And is there anyway to automatically create stubs for those properties/methods like VisualStudio does?

    Thanks

  2. miketeo Said,

    @Johnnynine:
    I usually check the API docs for the specific class which will highlight the optional methods. There might be a way to do this within XCode but I have yet to discover this “feature”.

    Automatic stubs: not sure if that’s available, but it will be cool if XCode has something like this.

  3. JongAm Park Said,

    Hello. Thanks for the good introductory information!
    Let me introduce me briefly. I am a C/C++ programmer usually at work and a Objective-C/Cocoa programmer at home. However I also write programs in Objective-C/Cocoa at work.

    While I was reading your good post, I noticed some of this :
    “Connect the New Referencing Outlet in Table View to the File?s Owner. You should see the myTableView variable. Connect to this variable.”

    As far as I know, the “New Referencing Outlet” was added from the Xcode 3.x. It is like a backward-referencing outlet. What I mean is.. if you want that the File’s Owner, i.e. FirstTabViewController, to point to the interested view, you connect an outlet, “view” in this case, to the table view. The you will be able to see that it is connected as such if you control click the “File’s owner” which contains the pointer to the view. But if you control-click the “view”, then you will see that the view is connected to the “File’s Owner” under its Referencing outlets.
    As far as I know, Apple enabled to connect elements in both direction from the Xcode 3.x because people were confused with which direction was correct way to interconnect them. However, if you once understand the “right” direction to connect, it is easier to read explanation written in such a way.

    So, can you share why you explained things the way you did? There can be some reason.

    Also, if you make class name or instance name in bold or bold-italic, it would be much easier to read.

    Thank you for your great post!

    Best regards,

  4. JongAm Park Said,

    Oh.. one more thing. UITableViewDataSource and UITableViewDelegate are protocols.

    So, it is not OK to say “FirstTabViewController class is a subclass of both UITableViewDataSource and UITableViewDelegate.”

    It would be better if it is revised as :

    “FirstTabViewController calls conforms both UITableViewDataSource and UITableViewDelgate protocols”

  5. Tutorial for iPhone programming « JongAm’s blog Said,

    […] http://miketeo.net/wp/index.php/2008/08/31/simple-iphone-tutorial-part-1.html […]

  6. miketeo Said,

    @JongAm:
    The concept of IBOutlet is similar to a wall socket plug. It allows other “appliances” to plug into it. By this analogy, it is easier to explain that the actual objects should “plug” into the IBOutlet, instead of having explain it in the other direction.

    I have modified my post to adopt your suggested correction on the “protocol” terminology.

    Thank you for your feedback.

  7. Elia Said,

    Hi. Thanks for the tutorial. I noticed that FirstTabViewController.h and SecondTabViewController.h were not imported at the top of your AppDelegate.m file. Without them, I get a compiler warning but it works because of the @class at the top of the AppDelegate.h file. Was that an oversight or is there a reason to leave those out?

  8. miketeo Said,

    @Ella:
    I believe you are following the screenshot for AppDelegate.h at the top of the page; at that point, FirstTabViewController class has not been created. Similar issue for SecondTabViewController, it will be created in the next part of this tutorial. 🙂

  9. Changing the Title of a Button (Newbie Question) - Page 2 - iPhone Dev SDK Forum Said,

    […] Originally Posted by mwt If you have a recommendation, I’m all ears. MikeTeo.net

  10. MVC, Controller-ы и мозг после Delphi/.net Said,

    […] – который показывает как руками собрать TabBarController – http://miketeo.net/wp/index.php/2008/08/31/simple-iphone-tutorial-part-1.htmlНо вот руками собрать в дочернем НИБ-е NavigatorController не […]

  11. SebCarss Said,

    Great tutorial, every other site I found before this tried to do too much at once confusing the tab bar controller process even the Apple website goes too far with it’s TheElements app so thanks for this, you’ve been a big help.

    Is there a reason why you haven’t released the FirstTabViewController, tabBarController and myTableView objects? Should these be released in the dealloc method of the implementation file as the properties are set up as ‘retain’?

    Thanks again ;o)

  12. miketeo Said,

    @sebcarss: I have overlooked the missing releases. The sources have already been updated. Thanks for pointing these out.

  13. Ashish Said,

    Hello, it is a very nice tutorial. Can someone give me a hint on how can I use the navigation bar if I want to create navigation like the drilldown application. I saw the examples, but everywhere they use navigationcontoller which is connected to the appdelegate. But for the FirstTabView.xib we don’t have either of them.
    Thanx in advance.
    Ashish

  14. mikeJ Said,

    Awesome tutorial! Thank you so much!

  15. James Andrews Said,

    The file

    http://miketeo.net/wp/wp-content/uploads/2008/08/app2.jpg

    is missing 🙁

  16. miketeo Said,

    @James: I have recovered the lost image. It’s probably “misplaced” when I edited the post recently.

  17. Alakapalienny Said,

    Very nice collection of information on that question. Thanks to the author. I have been looking for such an article since January! Thank you again!

  18. Resource untuk belajar Objective-C « Heru B’loGs Said,

    […] MikeTeo.net […]

  19. Joe Said,

    Bit late to the party, but I just wanted to say thanks. I found myself in the exact same situation as you describe at the beginning of this post, and your tutorial seems to indicate that basically encountered the exact same set of problems I have. Needless to say it also addressed them all – fantastic!

  20. jaishah Said,

    Hi I have a problem with the newest xcode. I have been going on a lot of websites finding about all this. Before, when I tried other tutorials before I found this one whenever I tried opening up mainwindow.XIB it kept on saying about ‘ensuring I have the right cocoa touch XIB document type from the corresponding SDK’ I do no understand what it means. And if it is possible where do I get the Plugin from?
    – Good tutorial though!

Add A Comment