Archives for June 2013

Simple Calculator iOS Application

The First assignment that I did when following the Stanford iPhone / iPad Development course was the Simple Calculator iOS Application. In this post, I am going to share every step in making this mobile application.

Create a New Project

First of all, launch the Xcode and create a new project using “Single View Application“.
null

Under Product Name, you may put “Calculator”. Put your name or your company’s name under organization name.

As for Company Identifier, it is usually the reverse characters of a web domain that you own. For example, if you own “abc.com” then you put it as “com.abc”. If you do not own any web domain, you can just put any domain such as “com.example”. It is not important for now if you just want to run the application on simulator. But, when you want to run the application on your mobile device, you should get your own domain. You will also need to do some provisioning settings on the Apple Developer Portal, attach the provisioning certificates on your Xcode before you can run it on your device and also submit the application to Apple. I will do tutorial on that in a later post)

Under the Class prefix, you can put it as “Calculator”. Choose “Universal” under Devices as we will build both iPhone and iPad app. Tick “Use Storyboards” and “Use Automatic Reference Counting (ARC)“. We want to use Storyboard as it is an important technology that simplifies the implementation of MVC in iOS. Before iOS 5, the developers have to take care of every object creation and destruction to manage the memory. But, Apple has released a new technology calls ARC which simplifies the memory management in Xcode.

After you click “Next”, you will be asking to choose a place that you want to create this project. I normally put it under a “Developer” folder just to keep everything organized. After you click “Create”, you will see a screen like the below screen shot:-

Your project will have 2 AppDelegate files (.h, .m), 2 storyboards (for iPhone and iPad) and 2 ViewController files (.h, .m). .H is a header file which can be accessed by public while .M is a implementation file which can only be accessed by the class itself (private).

The storyboards will contain all the views for our controllers. So, the initial project creation has given us both the view and also controller. We will create our own model later.

Creating Our Views

We will leave iPad storyboard for now until the end of the tutorial. So, let’s start with the iPhone storyboard. From the storyboard, you will see an iPhone size view controller object on the screen. When you click the “view” inside the view controller object, you may see the height for the view is 548. It is actually the iPhone 5 size. We can click a small screen toggle button on the bottom of the page to toggle it to normal iPhone height which is 460. We will optimize for iPhone 5 later. But for now, we just want to keep it simple and start with normal iPhone size.

How to Implement MVC in iOS Using Xcode

If you have just started to learn iOS Application programming, Some of the questions that come to your mind could be: “What is the best way to program in Xcode IDE?”, “Should I use purely coding? Code + Interface Builder? or Code + Storyboard?”

From my own experience working with some iOS apps developers, I learned that some of them are still using pure coding with some Interface Builder. It means that they haven’t adopt the latest technologies in Xcode provided by Apple. I can not totally blame them, it is because they are developing iOS projects that have been there for a few years and to change everything to the latest technologies is not an easy task to do.

For a fresh new iOS project, it is the best to adopt the latest technologies provided by Apple. It means that we have to use both Code + Storyboard to make the iOS applications.

MVC in Objective-C and Xcode

How do we implement MVC Using Xcode? Here is the quick summary:-

Model: Model is always in coding. It can be in its own class (with .h and .m). But sometimes, we can code a simple Model inside a view controller.
Controller: It always has its own class (with .h and .m). However, Apple has done a great job by making us to be able to see the view Controller in Storyboard. So, we can create a dummy (without function) view controller object on Storyboard. Then, we link this view controller UI Object with our own custom class file (.h and .m). We can code the functions inside the .h and .m files.
View: You can display a view using coding but it is not recommended since the release of storyboard. So, we always create view objects on Storyboard. We just drag and drop the GUI Objects into the View Controller. If we need to have special customization of object, we can subclass that object and manipulate it using code. But most of the time, we do not have to do that as the existing customization properties on the Xcode is already good enough. When a certain objects want to communication with View controller using (Target-Action), we just need to CONTROL drag that element into the .m file. As for Delegate and DataSource, we will implement it on the View Controller files.

Here is the detail explanation on Model, View and Controller with some visual explanations.

If you take a quick look at the Xcode, you will find out that there are many ready to use GUI (Graphic User Interface) Objects such as Button, Text Field, View and even View Controller. You can easily drag and drop the GUI elements into the storyboard. So, Views are mostly available on the storyboard.
View Controller Objects

There are a lot of customization properties inside the view object as well. For Example, you can change the shape of a button, change the title, color, font, image, background image, shadow and more.
UIButton Properties

If you remember the previous post on: Programming in iOS with Objective-C Using MVC, A view can only communicate with view controller using 3 different methods and Target-Action is one of them.

The below are the steps for creating Target-Action for Button to inform the View Controller when the user has clicked the button.

Step 1: Control + Drag the button into the .m implementation file.
Target-Action 1
Step 2: Enter a function Name and also type of sender.
Target-Action 2
Step 3: A function is created and you can start to code the body of the function.
Target-Action 3

For View controller, the below shows the .h and .m files.
dot H and dot M files for view controller

We can always link the custom class (.h and .m) with the view controller object on the storyboard. We can implement various functions using coding.
Custom class in Xcode

Programming in iOS with Objective-C Using MVC

One of the early concepts that I learn from CS193P iPhone Development Course by Stanford University is MVC (Model, View, Controller). MVC is not a programming language. MVC is not a platform. It is a Software Architecture Design Pattern.

When you want to build a house, you will need to hire a construction architect to plan and design the blueprint of the house. The proper planning and designing is very important to make sure that the house will not collapse, to make sure that the resources are used properly and to make sure that the cost is within the budget.

It is the same with any software application development. If you want to build a great software that will not crash frequently, small in size, user friendly and good response time, lesser lines of codes, easy to debug, easy for other programmers to understand, then you will have to develop the software by following a good programming architecture pattern. So, MVC is the Blueprint of a software development project.

Objective-C is built upon Model, View, Controller (MVC) Design pattern. Apple expects all the iOS programmers to follow this programming architecture pattern. If you want to build a simple mobile application, you can easily get away with it without following the exact MVC patterns. But, when you are building a complex app with many features that needs frequent updates, you will run into a lot of trouble. At the end, you will be wasting a lot of time when trying to convert Non-MVC code to MVC code.

So, before starting a new mobile application development project in iOS, you will have to plan properly using MVC.

What is MVC (Model View Controller)?

Like Professor Professor Paul Hegarty mentioned in the lecture. We can consider MVC as 3 different camps.

Model – What your application is about? (Data, Logics, Rules)
Controller – How you present your application (model) to the end users?
View – The interface which the end users see

What is MVC (Model View Controller)?

A Short Explanation on MVC

Controller always sits in between the Model and View. View does not own the data that it displays. View and Model can not have direct interaction with each other. View gets the data from Controller when the Controller implements itself the datasource of the View. The controller normally will get the data from Model before passing it to View. Only Controller have the freedom to initiate the direct communications to View or to Model. View and Model can communicate with Controller using some indirect methods explain below.

View can inform Controller for a certain events in 3 ways:-
a. Target-Action (eG: buttons)
b. Delegate (Will, Did, Should)
c. Data Source (data at, count)

Model can communicate with Controller only through:-
a. Notifications
b. KVO (Key-Value Observing)

MVC Real Application Examples

Example 1: Creating a Simple Calculator App.
a. The logics of calculating the equations is the Model.
b. The number buttons, arithmetic buttons, the result displaying text are the Views.
c. The View Controller sits in the middle of Model and View.

The Simple Flow: The View Controller gets the inputs (via buttons) from the users and send the inputs to the model. The Model will calculate and send the result back to Controller. Lastly, the controller will present the result on screen via a Display view.

Example 2: Building a University Final Exam Result Application.
a. The Model is the database of the results
b. The View is the Table View/List View that shows the name of students, student ID, Grade, CGPA, total marks, Credit hours.
c. The Controller gets the data from database and shows it on the Views.

For this Exam Result Application, we do not need input from the users, we only need to present the data to the users. So, the model is slightly different comparing with the Calculator App. For View and Controller, they are always the same. View handles the interfaces for the end users and Controller handles the interaction between Model and View.

You might ask, why can’t we just show the data directly from Model to View? Why do we have to go through the hassle to create Controller? Answer: It is to make the programming in a simple and manageable way. When we want to troubleshoot a simple bug, we will know exactly where the bug is (either Model, View or Controller). From there, we can easily find the appropriate classes and find the bug from there.

Here is the example MVC Design vs Non-MVC Design:-
As you can see from the following graph,

When MVCs are Working Together:-
Model View Controller Working Together
The above diagram show how the MVCs working together. You can see that the MVCs have simple and manageable flows. Each of the pointers are obeying the MVC rules.

When MVCs are Not Working Together/ Non-MVC:-
Non-Model View Controller
MVCs are not working properly on the above diagram. I just simply call it as Non-MVC. From the diagram, the flows of the pointers are everywhere. It is not a good design. When there is a bug, you do not know where to start the debugging.

For more details on Model, View and Controller, you can read from wikipedia: MVC (Model View Controller).

Understand the 4 Layers of iOS

4 Layers of iOS - Core OS, Core Services, Media, Cocoa TouchAs per the course in Standford, Professor Paul divides the iOS into 4 different layers. Core OS layer is the closest to the hardware while Cocoa Touch Layer is the closet to the user Interface. In most simple iOS projects, we probably will spend 90% of the time on Cocoa Touch layer. But, if you are building some specific location based mobile apps, then you probably will spend more time on the Core service Layer.

The following are parts of the frameworks/features for each of the layers:-

Core OS
– Power Management
– Keychain Access
– File System
– OSX Kernel
– Sockets
– Security

Core Services
– Collections
– Address Book
– File Access
– SQLite
– Core Location
– Threading
– URl Utilities
– Networking

Media
– Core Audio
– Core Animation
– Audio Recording
– Quartz (2D)
– PDF
– JPEG, PNG, TIFF
– OpenGL ES

Cocoa Touch
– Multi-Touch (Gesture)
– View Hierarchy
– Localization
– Alerts
– Web View
– Map view
– Image Picker
– Camera
– Buttons

Most of above information and source of images are taken from Stanford University iPhone Application Development course.