iOS Programming Basics: How does the Hello World App work?

Translator’s Note:

1. Since this is a technical article, some words and sentences use the original text for more accurate expression.

2. Due to my limited level, some parts of the translation may not be accurate enough. If there are any inappropriate parts, please criticize and correct me.

I hope you have enjoyed your first iOS programming tutorial and have created your first App. Before moving on to the next tutorial and making a more complex App, it is necessary to go back and analyze this Hello World App. It will be very helpful for you to understand some Objective-C language syntax and the inner workings of the App.

So far, you must have completed your first Hello World App according to the tutorial. However, after completing this tutorial, you must have more questions in your mind:

• What are the xib, .h, and .m files used for?
• What is the code inside showMessage? What does it do?
• What happens when you press the Hello World button? How does the button trigger the action of displaying the message?
• How does the Run button in Xcode work?

I hope you are already familiar with the Xcode IDE development environment, so I don't need to explain the above content again. It is necessary for every developer to understand the internal details of the code and grasp the basic concepts for iOS programming. For some technical concepts, it is difficult to understand if you have no programming background. But don't worry, this is just a beginning. If you continue to study the subsequent tutorials and write more code, you will have a better understanding of iOS programming. Try your best to learn more knowledge!

Interface Builder, Header and Implementation Files

First of all, what are .xib, .h, and .m files? This is a very good question from a reader. In the project navigator, you should find 3 main file types: .xib, .h, and .m. (If you open the "Supporting Files" folder, you can find other file types, such as plist and framework. But for now, let's forget about them. We will discuss them in future courses.)

.xib

• If a file also has a .xib extension, they are Interface Builder files that store the app's UI. When you click on a .xib file, Xcode will automatically open the Interface Builder interface, where you can edit the app's UI by dragging and dropping. As shown below:

Interface Builder in Xcode

.h and .m

• The .h extension indicates that this is a header file, and the .m extension indicates that it is a specific implementation. Like most other programming languages, the source code of Objective-C is also divided into two parts: interface and implementation.

To help you better understand the relationship between the two, let's use a TV remote control as an example. We can easily adjust the volume of the TV using a wireless remote control. You press the volume + button to increase the volume of the speaker. To switch channels, you just press the channel number. Then let me ask you, do you know what happens when you press the volume button? I guess you don't know. I believe most people don't know how the remote control and the speaker communicate. We only know that the button is used to adjust the volume. Here, the button is the interface, and the specific details behind the button are called implementation.

Now you should have a deeper understanding of interfaces and implementations. Let's go back to the code. In Objective-C, the interface of a class is placed in a .h file. We use the syntax identifier @interface to declare a class interface. Take a look at the specific implementation of HelloWorldViewController.h:

 @interface HelloWorldViewController : UIViewController 
 
 -(IBAction)showMessage; 
 
 @end

The class name HelloWorldViewController starts with "@interface". Inside it declares an implementation of "showMessage", which can also be called a method.

Just like the volume button, obviously we don't know how the showMessage method works. You just know that it is used to display a message on the screen. The specific implementation is placed in the HelloWorldViewController.m file, as shown below:

 @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  
 [helloWorldAlert show];
 } 
 
 @end

As you can see above, you use "@implementation" to declare an implementation. In "showMessage", the code is used to define a pop-up alert on the screen. You don't need to understand the specific meaning of each line of code in the "showMessage" method. In short, a UIAlertView is created with "My First App" as the title and "Hello, World" as the message. Then call the "show" method to request iOS to display a pop-up message on the screen. As shown below:

Hello World App

I guess you have figured out the interface and implementation, right?

Behind the Touch and Tap

What actually happens when you press the “Hello World” button? How does the “Hello World” button call the “showMessage” method to display the “Hello World” message?

Recall how you established the association between the "Hello World" button and the "sendMessage" action in Interface Builder. Open "HelloWorldViewController.xib" again, select the "Hello World" button, and click the "Sent Events" button in the Utility area to open the event.

The Send section shows all the connections between events and actions. For example, as shown in the above picture, the "Touch Up Inside" event is associated with the "showMessage" action. In iOS, apps are event-driven. The controller/target listens for specific actions, such as touches and presses. When the event is triggered, the target will call the preset action associated with the event.

In our Hello World App, when the user lifts his finger on the button, the "Touch Up Inside" event is triggered. As a result, it calls the "showMessage" action to display the "Hello World" message.

The following diagram clearly shows the flow of events just described:

Event and Message Flow of Hello World App

Behind the Scene of the “Run” Button

When you click the "Run" button, Xcode will load the simulator and run your app. But what happens after this scene? As a programmer, you need to understand its whole process.

The whole process can be divided into three parts: compilation, packaging and running .

Compile

• You may think that iOS can understand Objective-C code. This is totally wrong. In fact, iOS can only understand machine code. Objective-C code is just for programmers to read and write code. We need to translate the Objective-C source code into machine code so that iOS can understand your App's source code. This process is called programming. Xcode already comes with a compiler for compiling source code.

Pack

• Unlike other source codes, an App usually contains a large number of resource files, such as pictures, texts, xlib files, etc. All these resources must be packaged into the final App.

We call the above two processes build .

Run

• After pressing, start the simulator and load your app.

TranslatedBy Long Luo

Original link: iOS Programming Basic: How Does the Hello World App Work?