iOS: Creating The First App

This tutorial is based on Xcode 4.6 running on Mac OSX 10.8 Mountain Lion.

1) Run Xcode. Click Create a new Xcode project.


2) Choose Single View Application. Click Next.




3) Type MyFirstApp at the Product Name field. Fill-in the marked fields. Click Next.



4) Choose your Xcode project folder. Click Create.



5) Once the main window appear, click MainStoryboard.storyboard . Notice the View Layout appear in the center of the screen. Notice that there is an arrow pointing to the View Layout. It denotes that this is the first View that will be shown on the iOS screen. On the right hand side of the screen, notice the Object panel. We are going to add the TextField, Label and Button in the coming steps.



6) Click on either the Layout or the View Controller tab. The border turns blue.





















6a) If the View Controller tab doesn't show the above icons (like below), you may need to magnify the view of the layout.

7) Drag the Text Field, Label and Button components to the View Layout.






8) We are going to register their names in program code sections.
8a) Click the Assistance button and arrange the panel so that the View Layout panel and Code panel are visible. Make sure that the Code panel shows ViewController.h file.



8c) Ctrl-Drag each of the TextField object to the Code panel in between @interface and @end line. Follow the example below and click Connect.


The object now is connected to the program code.


8d) Repeat the same thing to Label object.


The object now is connected to the program code.



8e) For Button object, we will be doing in a slightly different way.
Follow the example below.


8f) Notice that both TextField and Label are treated as Outlet while Button is treated as Action. They have different roles.


9) Switch to ViewController.m
9a) Click the filename at the top of Code Panel and choose ViewController.m



9b) Notice that the corresponding codes to step 8e have been automatically generated. Later on, we will write instructions here to run whenever the Button is tapped.
 

10) Run MyFirstApp.
Notice that the View Layout has been implemented on the iPhone screen.
At the moment, the button is not functional yet.