Learn to program games for iOS: getting to know Xcode (II)

After the last installment, titled learn to program games for iOS: Knowing Xcode, and before we dive into Cocos2d, let's dive a little deeper into Xcode. On this occasion, we will interact with the created elements, instead of limiting ourselves to a simple "Hello world".

With this, you will gain skill in handling Xcode, and you will be able to make your first "useful" applications quickly; by learning the basic use of buttons and text labels. As this class is somewhat more complex than the previous one, you will have the practical example available for download at the end of the post, so that you can run it and check that it works correctly!

First, we open Xcode and create a new project by choosing the "single view application" template, just like in the previous class; This will create a workspace based on a single window, with its «graphical assistant». Once open, we select the file viewcontroller.xib (Recall that it is the "graphic face" of our first view or scene, called viewcontroller, and whose part of "code" is in the files viewcontroller.m y viewcontroller.h), and we go to the objects box, located at the bottom right, to start dragging components to our scene: labels, buttons ... it will have everything!

As we see in the image, this time we have dragged the following:

• An object "label«, By way of title. It will not interact with anything.
• Another object «label«, Which will hold numeric values.
• A "stepper«, In charge of increasing or decreasing the numerical value of the previous« label ».
• Un button to check that the numeric "label" matches a value that we have previously chosen.

Do you already know what this exercise is about? Very easy; We will have to choose our age (year by year with the «stepper»), and then, using the check button, find out if we are of legal age. As absurd as it is educational, with this exercise you will learn from a stroke of the pen several things.

As you can see in the image above, the size and color of the «label» can be customize. Each object has a multitude of parameters that you can find out if you investigate a little. Once you have left each object with the characteristics that you like the most, it is time to take stock: for now we have «drawn»Our application; nothing interacts with nothing ... we need to give it unity.

To do this, we are going to mess with some bar code (very basic, and rudimentary explained); specifically with the file viewcontroller.h, which houses the basic definitions of the viewcontroller class (our main window!). It does not execute code or actions, it only establishes the bases and the necessary functions, so that viewcontroller.m can use them and do the hard work ... that we will see reflected in viewcontroller.xib! All three sides of the same coin.

With this explained, we can begin to define in the "code" all the objects that we have defined visually. We go to the archive viewcontroller.h, and we add the following:

There are several ways to define variables or elements, but in this case, as we need an element to access them (our window, the graphic part), we assign them in this way (starting with @property). It is a topic that we will address in future classes, for now it is worth knowing what each one refers to or identifying: a «label»(Only one, since the title we create will not interact with anything, and we do not need to define it in the code), an integer variable called«Age Majority»(This is new, we did not put it in the graphic section .. it will only store the age of majority to make comparisons), a«stepper»(Called stepper1).

In addition to the above, there are also two functions (the two that start with a hyphen are functions); one of them will be in charge of doing something when we press the stepper (For example, make the "label" change our age? exact), and another in charge of comparing the current age of the label with the one we have set.

So far we have the graphic part defined, and also the code part. However, how do we teach our application what each variable or element of the code corresponds to, with its equivalent in the graphic part? Well, very easy. We click on viewcontroller.xib, and we click on the round gray button with the shape of «play» and the text «show document outline», which we find at the bottom left of the grid sheet. With this, a panel with the elements of our window will be displayed.

We look at «Placeholders» above, which contains two cubes: a yellow one (File's owner), which is where we will associate the objects with the code (labels, buttons, etc); and another reddish one (First Responder), where we will associate the functions that we have defined to various actions (for example, that when pressing a button a function is executed).

We start with the objects. Right click on the «Files Owner» cube, and a black menu will be displayed. We display the "Outlets" section, and we will see all the elements that we have defined in the code (there are only two, label and stepper1); we have to drag them to their corresponding graphic element: label with the numeric label that we have created, and stepper1 with the stepper.

When we drag it, we will see how a "blue tentacle" is created that follows our mouse to the object we want to associate. (Note: to start the dragging process, you have to click on the empty circles next to the name of each object, as in the photo)

Now you have to do the same with the functions; a right click on «First Reply», and we do the following:

1. We click on «checkAge», and without releasing, we drag to the button of our graphic window, the one to check age. A new drop-down menu opens and we choose «Touch down».
2. We do the same with "stepperValueChanged", but this time we drag it to our graphic "stepper", and in the drop-down menu we choose "Value Changed".

Right now all that remains is to add the "real code" to viewcontroller.m; we have to tell you what to do with each action that occurs. We start by telling you to be aware of the variables defined in viewcontroller.h (the legal age variable, the stepper variable, and the label variable; both associated with their graphic counterpart) using «@synthesize variable_name_u_element«, Just as we see in the image:

Without leaving viewcontroller.m, we headed to the function viewDidLoad (at the end of the file), and just below what is already written, but before the «}«, We define what the age of majority should be in our country. In this case, 18:

Finally, we are going to create and program the features that we have defined in viewcontroller.h (there are only two). One will be executed every time we press the stepper, and it must show the age that is changing, in our «label».

The other will be executed when we press the button check age, and it will check (worth the redundancy) if the age that we have entered is equal to or greater than the age of majority: If the answer is affirmative, the background of the App will change to green; if it is not, it will turn red. Both must be placed in the file viewcontroller.m; for example, immediately before the function - (void) viewDidLoad.

Now comes the best. You have to try it! Go to the play button above, checking that the "iPhone Simulator" is selected, and hit it. Your window will open, and you can interact with it!

The exercise could be made more complex, but with this you have the bases to investigate on your own, and try new options. To make it easier to follow the tutorial, out of curiosity, or just in case you can't make it work, here is the project in a archive compressed! I hope it has served you ... until next time!

More information - Learn to program: getting to know Xcode (I)

Download - Second programming class for Xcode