• fullslide1

Exercise - 1


Storyboard

Storyboards are introduced in iOS 5. The storyboard contains the designs for all of your app’s screens, and shows how the app goes from one screen to another with big pointy arrows. This initial scene is represented by a square in the middle of the Interface Builder canvas. You may find this odd, considering that iPhones are not actually square. This is a new feature of iOS 8 called “size classes” or “universal storyboards” that lets you design a single storyboard that caters to the different screen sizes of the various iPhone models.

Common terminology:

IBOutlet

In XCode, we design UI elements and the information is kept in a nib file. The corresponding ViewController class is a typical “swift” file or an Objective-C’s .h/.m file combination. With this disconnected system in place, a mechanism is required to connect the two ends. IBOutlet is one part of such a mechanism.

An outlet is a property of an object that references another object.An application typically sets outlet connections between its custom controller objects and objects on the user interface. The type qualifier IBOutlet is a tag applied to an property declaration so that the Interface Builder application can recognise the property as an outlet and synchronise the display and connection of it with Xcode.

Note: You create an IBOutlet connection, if you want to access the properties of a UI element, such as if you want to read the text property of a textfield.

IBAction

As discussed, IBOutlet is used to access the properties of UI controls. What if we want to tap the actions associated with them? IBAction completes the full picture. An action is the message a control sends to the target or, from the perspective of the target, the method the target implements to respond to the action message. IBAction does not designate a data type for a return value; no value is returned. IBAction is a type qualifier that Interface Builder notices during application development to synchronise actions added programmatically with its internal list of action methods defined for a project.

Note: You create an IBAction connection, if you want to respond to a user action / interaction, such as tap on a button.

Objective

In the following exercise, we will create an application using Storyboard feature of Xcode and exhibit and master the following techniques:

  1. Designing a basic user interface.
  2. Show / hide various panels of Xcode.
  3. Creating an IBOutlet connection.
  4. Creating an IBAction connection.
  5. Reading values from UI controls.
  6. Manipulating values of UI controls.
  7. Show / Hide keyboard when the TextField gains or looses focus respectively.

Besides, you will also learn about some of the Foundation Framework classes that are used to manipulate numeric & string values.

Let’s start with creating our app and call it : Multiply.

Step 1:- Creating the app and getting familiar with Xcode

1. Launch Xcode and create a new project. On the Choose a template screen, choose Single View Application.

2. Click Next and on the “Choose options for your new project” enter the following information :

Product name
: Multiply
Organization name
: iKompass
Organization identifier
: iKom
Language
: Objective-C
Devices
: iPhone

Leave the Use Core Data option, unchecked.

3. Click “Next” and “Save” your project. Xcode will automatically open your project. Xcode is a very rich IDE and comes loaded with plethora of options and choices. These options and choices are grouped logically and placed in different panel.

Throughout the life of your application development, you will be dealing with one or more of these panels and show-hide them as and when required. Thus it is in best of our interest, that, we get familiar with the important panels before we proceed further.

1. Navigator panel:- This panel along with its multiple tabs, allow the user to access various resources contained in the project.

2. Utilities panel:- This panel gives access to various settings and properties that can be altered or set for various UI controls. Besides, this panel also contains the control libraries that can be dragged and dropped on the scene (View controller). Once again, there are multiple tabs available (exposing different set of controls and options), which we will explore as and when required.

3. Debug area:- This panel contains Console and debug controls such as “Step Over”, “Step Into”, “Toggle Breakpoints”, etc. Besides, it also shows the values of local variables at the time of execution. The information contained in this panel are very helpful during a debug session.

The central piece or the client area which is surrounded by the above three panels is where you will design your view or see the code editor. At times, you may find the client area cramped as the real estate available on the screen is not much. You can toggle the visibility of one or more of these panels as and when required by clicking the respective Show/Hide buttons available on the menu bar.

For the time being, lets have all the panel visible.

Copyright 2015 iKompass. All rights reserved.