beginners guide for ios development with xcode on os...

Program Development OS X and iOS

Beginners Guidefor iOS

ProgramDevelopment with

XCode on OS X

Part IV:Objective-C language

iOS7 GUI example

Christiaan Rogiers

20140406 of 11


Fourth Example – Objective-C in iOS7 GUI

This is the second of two examples which show text in a graphical user interface (GUI). The first one (also the third in our set of four) works in the Mac OS X GUI. This one will work in the iOS7 GUI. The way we show the result is not on an actual iOS mobile device, but in the iOS simulator provided by XCode.

After we have gone through the usual 'New – Project' sequence, we get our 'Choose a template for your new project' screen.

So we choose 'Application' under 'iOS' and 'Single View Application'. And as the screen says, this will build an application that uses a single view controller, which manages the view, a storyboard and a .nib file containing the view.

'Next'

20140406 of 11


We then get the 'Choose options for your new project' screen. So again we type in a 'Product Name'. 'Organization Name' we can leave as is. For 'Company Identifier'we can come up with something ourselves. The 'com.' with your company name behind it is a suggestion. It is the kind of things which may further along make it easier to distinguish between your own code and adopted code from elsewhere. Along the same lines, the class prefix is something of your own choice. Once we look at the code, you will see examples of your files and code which use it. This is a way of avoiding that you try to overwrite existing classes or methods by using existing names. As 'Device' we select 'iPhone' and 'Create'.

'Next' takes you to the screen which lets you decide where to save your project.

And on that screen 'Create' takes you to the overview screen, as it did in previous examples.

20140406 of 11


And here, as in the previous example, it is also very obvious that a GUI does require a lot of code. If you expand the folder with the name of your project in the left navigation pane, again you see two examples of files where the prefix we have set, is used.

In this example that is also the 'CROAppDelegate.h' header file and its corresponding 'CROAppDelegate.m' source code file. As mentioned in the previousexample, the '.m' clearly shows this is Objective-C.

We also see a 'Main.storyboard' file, which we will use later. It contains the visual elements which make this a GUI application, and to which we will later add visual elements of our own making, such as the text we want to show.

20140406 of 11


Under 'Supporting Files' we see the 'main.m' we also saw in the previous example.

Let's start with a look at the main.m file:

This time the '#import' goes with '<UIKit/UIKit.h>'. But there is also an import of our CROAppDelegate.h header file.

The main function is there as usual, and it returns UIApplicationMain.

As in our second example an '@autoreleasepool' is used for memory managementpurposes.

The CROAppDelegate.h header file looks like this:

20140406 of 11

mailto:'@autorelease


And the CROAppDelegate.m source code file that goes with it looks like this:

Similar to what was said for the third example, what you see here is typical for all Objective-C programs and their OOP (object oriented programming) way of doing things.

In the '.h' header file we see '@interface', where the CROAppDelegate class is nowderived from the UIResponder class, and we see '@property'. The property in this case is a UIWindow which goes by the name of 'window'. The '*' in '*window' mains that we are giving the address (or pointer) to 'window' rather than the window object itself. Note we only have properties here, but no methods. The interface ends with an '@end'. The 'Responder' in the 'UIResponder' indicates that it can respond to all kinds of event. This being iOS and mobile, think 'touch'.

In the '.m' source code file, we import the corresponding header file. We see '@implementation' which gives us several methods that go with our CROAppDelegate. The implementation ends with an '@end'.

20140406 of 11

mailto:'@end

mailto:'@implementation

mailto:'@end

mailto:'@property

mailto:'@interface


What all this means is that we define our classes in header files and say there what properties they have. It is what we call the interface. The nitty gritty of providing the source code to do something (methods) with a class sits in the '.m' files which we refer to as the implementation.

Note that only the first method contains anything which is not a comment, as longas we do not add any code of our own.

And now it is time for some real GUI magic. Therefore we open the 'Main.storyboard' file:

And we see a rectangle representing our iOS device, saying below it that it is a 'View Controller'. From the possible selections in the bottom right corner we drag a label on this rectangular iOS screen.

20140406 of 11


We then change 'Label' to the text we want to show:

Now we can use the little triangular play button, to let XCode do its magic. It will compile and link all necessary code and run our program. This program being an iOS GUI application, it opens an iOS simulator. The iOS simulator looks and acts like an iOS mobile device (an iPhone in this case), minus the 'touch'. That includesthe hardware home button at the bottom, having a first screen with icons to start common programs, and a second screen with an icon allowing us to start the program which we were just working on. When you run this you may get a black screen for a while, but eventually you will get your application. The 'Home' button will take you out of the program and to that second screen with icons for all programs developed so far on this Mac for iOS.

20140406 of 11


Now we could say “That's all folks”, for this example, as we did in the previous example at this stage. But that would probably make you say: “Is that all there is?”.

So we decided to throw in a little demonstration of how easy it is to use the graphical editor to change the look and feel of our application.

So we open the 'Main.storyboard' file again and click somewhere in that 'View Controller' screen (not on the label) to select the whole iOS screen.

20140406 of 11


At the top of the right hand pane you see 'View' and you can select 'Background Color'. From the popup menu you can choose 'Other...' or you can directly select inthat pop up window. With 'Other...' we get another pop up window which allows usto set the colour, with sliders or a colour wheel if you select the little colour wheel in the top left corner. You can do the same by selecting your text element.

20140406 of 11


Running the result in the iOS simulator gives us the desired result, with our red text on a green background.

And now we really say: “That's all folks!”.

20140406 of 11

beginners guide for ios development with xcode on os...

Documents