Interface Builder, Header and Implementation Files
.xibÂ â€“ For files with .xib extension, theyâ€™re Interface Builder files that store the applicationâ€™s user interface (UI). As you click on the .xib file, Xcode automatically switches to the Interface Builder for you to edit the UI of the app via drag-and-drop.
.h and .mÂ â€“ Files with .h extension refers to the header files while those with .m extension are the implementation files. Like most of the programming languages, the source code of Objective-C is divided into two parts:Â interfaceÂ andimplementation.
Well, to put in analogy that you can better understand both terms, letâ€™s consider a TV remote. Itâ€™s convenient to control the volume of a TV set wirelessly with a remote. To increase the speaker volume, you press the â€śVolume +â€ť button. To switch channel, you simply key in the channel number. Let me ask you. Do you know what happens behind the scene when pressing the â€śVolumeâ€ť button? Probably not. WeÂ believe most of us donâ€™t know how the remote communicates with the TV set and controls the speaker volume. What we just know is, that button is used for changing the volume. In this example, the button that interacts with you is the â€śinterfaceâ€ť and the inner detail which is hidden behind the button is referred as the â€śimplementationâ€ť.
Now you should have a better idea about interface and implementation. Letâ€™s go back to the code. In Objective-C, interfaces of a class are organized in â€ś.hâ€ť file. We use the syntax â€ś@interfaceâ€ť to declare the interface of a class. Take a look at the HelloWorldViewController.h, which is the header file:
@interfaceÂ HelloWorldViewControllerÂ :Â UIViewController-(IBAction)showMessage;@end
It starts with â€ś@interfaceâ€ť followed by HelloWorldViewController, which is the class name. Inside, it declares a â€śshowMessageâ€ť action, which is known as a method call.
Like the â€śVolumeâ€ť button, apparently we do not know how the â€śshowMessageâ€ť action works. You just know itâ€™s used to display a message on screen. The actual implementation is put in the HelloWorldViewController.m, the implementation file:
@implementationÂ HelloWorldViewController// I’ve removed other methods for better reading. Focus on the showMessage method first.-Â (IBAction)showMessage
UIAlertViewÂ *helloWorldAlertÂ =Â [[UIAlertView alloc]
initWithTitle:@”My First App”Â message:@”Hello, World!”Â delegate:nilÂ cancelButtonTitle:@”OK”Â otherButtonTitles:nil];// Display the Hello World Message
As you can see from the above, you use the declaration â€ś@implementationâ€ť to declare an implementation. Inside the â€śshowMessageâ€ť, itâ€™s the actual code defined to display the alert message on screen. You may not understand every single line of code inside the â€śshowMessageâ€ť method. In brief, it creates an UIAlertView with â€śMy First Appâ€ť as the title and â€śHello, Worldâ€ť as the message. It then calls up the â€śshowâ€ť method and request iOS to display the pop-up message on screen.
Itâ€™s vital for you to understand the concept of interface and implementation.
Behind the Touch and Tap
What actually happened after tapping the â€śHello Worldâ€ť button? How does the â€śHello Worldâ€ť button invoke the â€śshowMessageâ€ť method to display the â€śHello Worldâ€ť message?
Recalled that you established a connection between the â€śHello Worldâ€ť button and the â€śsendMessageâ€ť action in Interface Builder. Try opening up the â€śHelloWorldViewController.xibâ€ť again and select the â€śHello Worldâ€ť button. Click the â€śSent Eventsâ€ť button in the Utility area to open the Sent Events.
The Sent Events section shows you all connections between events and actions. As you can see in the above figure, the â€śTouch Up Insideâ€ť event is connected to the â€śshowMessageâ€ť action. In iOS, apps are event-driven. The control/object (e.g. UIButton) listens for certain events (e.g. touches and taps). When the event is triggered, the object calls up the preset action that associates with the event.
In our Hello World app, when users lift up the finger inside the button, the â€śTouch Up Insideâ€ť event is triggered. Consequently, it calls up the â€śshowMessageâ€ť action to display the â€śHello Worldâ€ť message.
The below illustration sums up the event flow and what weÂ have just described.
Behind the Scene of the â€śRunâ€ť Button
When you click the â€śRunâ€ť button, Xcode automatically launches the Simulator and runs your app. But what happens behind the scene? As a programmer, you have to look into the entire process.
The entire process can be broken into three phases: compile, package and run.
CompileÂ â€“ You probably think iOS understands Objective-C code. In reality, iOS only reads machine code. The Objective-C code is only for you, the programmer to write and read. To make iOS understand the source code of the app, we have to go through a translation process to translate the Objective-C code into machine code. This process is referred as â€ścompileâ€ť. Xcode already comes with a built-in compiler to compile the source code.
PackageÂ â€“ Other than source code, an app usually contains resource files such as images, text files, xib files, etc. All these resources are packaged to make up the final app.
We used to refer these two processes as the â€śbuildâ€ť process.
RunÂ â€“ This actually launches the Simulator and loads your app.