iOS

Back To Basics: Intro to Object Oriented Programming


If you’re our long time follower, you know we’ve gone pretty far. By now, you should be able to build an iPhone app with tab bar, navigation controller and table view using Storyboard. One request on the top of my list, however, is to enhance the detail view of the Recipe app. Many readers mentioned the original detail view is too plain. How can we display more information including an image? That shouldn’t be difficult if you understand the materials and I intentionally left out that part for you at the time I wrote the tutorial. 🙂

Did you manage to create your own detail view for the Recipe app? Anyway, we’ll revisit it and show you how to improve the detail screen. But before that, I have to introduce you the basics of Object Oriented Programming. In the next tutorial, we’ll build on top of what we learn in this tutorial and enhance the detail view screen.

Don’t be scared by the term “Object Oriented Programming” or OOP in short. It’s not a new kind of programming language but a programming concept/technique. I intentionally left out the OOP concept when I first began writing the iOS programming tutorials. I want to keep thing simple and show you (even without any programming background) how to create an app. I don’t want to scare you away with technical term. However, I think it’s time to cover the concept. If you’re still around reading this article, I believe you’re determined to learn iOS programming and you want to take your app to the next level.

Okay, let’s get started.

Object Oriented Programming – Some Theory

Objective-C is known as an Object Oriented Programming (OOP) language. OOP is a way of constructing software application composed of objects. In other words, most of the code you’ve written in the app in some ways deal with objects of some kind. UIViewController, UIButton, UINavigationController and UITableView are some of the objects come with the iOS SDK. Not only you’ve used the built-in objects in your iOS app, you’ve created some objects of your own such as RecipeDetailViewController and SimpleTableCell.

So why OOP? One important reason is that we want to decompose a complex software into smaller pieces (or building block) which are easier to develop and manage. Here, the smaller pieces are the objects. Each object has its own responsibility and objects coordinate with each other in order to make the software work. That’s the basic concept of OOP.

Take the Hello World app as an example. The UIViewController object is responsible for the view of the app and as a placeholder for the Hello World button. The UIButton (i.e. Hello World button) object is responsible to display a standard iOS button on screen and listen to any touch events. The UIAlertView object, on the other hand, is responsible to display the alert message to user. Most importantly, all these objects work together to create the Hello World app.

Sample Objects in Hello World App

Sample Objects in Hello World App

In Object Oriented Programming, an object shares two characteristics: properties and functionalities. Let’s consider a real world object – Car. A car has its own color, model, top speed, manufacturer, etc. These are the properties of a car. In terms of functionalities, a car should provide basic functions such as accelerate, brake, steering, etc.

If we go back to the iOS world, let’s take a look at the properties and functionalities of the UIButton object in Hello World app:

  • Properties – Background, size, color and font are examples of the UIButton properties
  • Functionalities – When the button is tapped, it recognizes the tap event and displays an alert message on screen. So “showMessage” is the function of the button.

In our tutorials, you always come across the term “method”. In Objective-C, we create methods to provide the functionalities of an object. Usually a method corresponds to a particular function of an object.

Class, Object and Instance

Other than method and object, you may come across terms like instance and class in OOP. Let me give a brief explanation.

A class is a blueprint or prototype for creating objects. Basically, a class consists of properties and methods. Let’s say we want to define a Course class. A Course class contains properties such as name, course code and max. number of students. This class represents the blueprint of a Course. We can use it to create different courses like iOS Programming course with course code IPC101, Cooking course with course code CC101, etc. Here, the “iOS Programming course” and “Cooking course” are known as the objects of the Course class. Sometimes, we also refer them as instances of the Course class. To keep it simple, you can consider instance as another word for object.

Revisit the Customize Table Cell Tutorial

So why do we cover OOP today? There is no better way to learn programming than showing you an example. Let’s revisit the “Customize Table Cell” tutorial.

In the viewDidLoad method of Table Cell tutorial, we created three arrays to store different types of data: recipe name, thumbnail of the recipe and the preparation time. If you understand the OOP concept, these data can be characterized as the properties of recipe.

Considered that the name (i.e. tableData), thumbnail (i.e. recipe image) and preparation time (i.e. prepTime) are all related to a recipe, instead of storing these data in separate arrays, it’s better to create a Recipe class to model a recipe.

Recipe Class

Recipe Class

We’ll revisit the “Customize Table Cell” project and convert it to use the new Recipe class. If you haven’t read the tutorial, check it out here. Or you can download the Xcode project to have a quick start.

Creating the Recipe Class

First, we’ll create the Recipe Class. Right click on SimpleTable folder and select “New File…”. Choose the “Objective-C class” template (under Cocoa Touch) and click “Next”. Name the class as “Recipe” and as a subclass of “NSObject”. Click “Next” and save the file in your Xcode project folder.

Create the Recipe Class

Create the Recipe Class with NSObject as subclass

Once completed, Xcode will create the Recipe.h and Recipe.m files. In the header file, add the properties of the Recipe class:

In the implementation file (i.e. Recipe.m), we add the @synthesis directive. The @synthesize directive tells the compiler to generate the setters and getters for accessing the properties we define in the header.

Now we’ve created a Recipe class with three properties. Later we’ll make use of it to instantiate different recipe objects. So how can we convert the arrays into an array of Recipe objects? The three data arrays can be depicted as follows:

Three Arrays to Store Recipe Name, Thumbnail and Preparation Time

Three Arrays to Store Recipe Name, Thumbnail and Preparation Time

With the new Recipe class, we can turn the arrays into a single array of Recipe objects that each object stores the recipe data.

Recipes Array

An Array of Recipe Objects

Initialize the Array of Recipe Objects

Back to the coding part. Instead of declaring three arrays (tableData, thumbnails, prepTime), we’ll declare a single variable for the array of recipe objects.

In the viewDidLoad method of SimpleTableViewController.m, we initialize the Recipe objects (a total of 16 Recipe objects) and put them into the “recipes” array.

In Objective C, we use the “new” method (which is actually a method provided by NSObjects) to instantiate an object. You have two ways to set the value of the property. In the above code, we use the dot-syntax to assign the value. For instance,

Alternatively, you can invoke the setName method using square bracket notation ([]). Here is the equivalent code:

Both syntaxes perform exactly the same thing. But we’ll use the dot syntax throughout our tutorials.

Replacing TableData with Recipes Array

There are a few things we need to change in order to use the recipes array. For the numberOfRowsInSection method, we change “tableData” to “recipes”:

For the “cellForRowAtIndexPath” method, we replace the “tableData”, “thumbnails” and “prepTime” with the Recipe array:

As you can see from the code, by changing the three data arrays into the Recipes array, the code is more readable and understandable. You can now run your app. The look & feel is exactly the same as what we’ve built in the “Custom Table Cell” tutorial. However, internally we beautify our code by creating our own Recipe object.

SimpleTable App with Custom Cell Prep Time

What’s Upcoming Next?

I hope you’re not bored by the tutorial. This is just the basic concept of OOP. It takes lots of practice and study to gain proficiency. Coming up in our next tutorial, I’ll show you how to improve the detail view screen base on what we’ve learnt so far. It’s going to be fun!

Tutorial
Passing Data in iOS: Delegates, Notifications, and Closures
Tutorial
Face Detection in iOS Using Core Image
iOS
Unable to Set Layout Constraint to Zero in Xcode 11.3
  • Dan Annis

    Dan AnnisDan Annis

    Author Reply

    I like it! OOP is super important to understand! Well presented 🙂


  • Halunke

    HalunkeHalunke

    Author Reply

    Excellent!!!!! Don’t know what to say but THANK YOU 😉


  • Cathi

    CathiCathi

    Author Reply

    Wonderful and a useful lessons. I ‘d love to learn thingsin your tutorials and eagerly wait for every posts. indeed I learnt to start programming from app coda. Thanx a lot sir 🙂


  • Cathi

    CathiCathi

    Author Reply

    Please continue this wonderful service sir…..


  • Eddy

    EddyEddy

    Author Reply

    You are a hero!


  • Daragh

    DaraghDaragh

    Author Reply

    Great TUT !!!. I was wondering is it possible to add a search bar to filter the custom array as per this tut. I have tried replacing : searchResults = [recipesName filteredArrayUsingPredicate:resultPredicate];
    WITH
    searchResults.name = [(Recipe *)[recipes objectAtIndex:indexPath.row] name];

    But it dosn’t work 🙁 .
    In short I am trying to combine

    Back To Basics: Intro to Object Oriented Programming with

    How To Add Search Bar in Table View

    I have been trying for a while now, but no luck. I have tried many different things, and getting some weird results, but never the one I want.


  • Huma Wadood

    You really are a hero–you are making a huge difference in the world! thank you a hundred times over


  • Thomas Moore

    Keep them coming please!! Great information. Not boring…..awesomeness!


  • Jeraldo

    JeraldoJeraldo

    Author Reply

    Wonderful. For I have never seen a tutorial teaching about the use of Objects quite this good. Thanks.


  • coder gump

    coder gumpcoder gump

    Author Reply

    Great and helpful。Thanx from china!


  • christi parks

    Hello, sir i would like to ask that what is the scope of c programming, what all topics should be covered and it is kinda bothering me … and has anyone studied from this course http://www.wiziq.com/course/2118-learn-how-to-program-in-c-language of c programming language online ?? or tell me any other guidance…
    would really appreciate help… and Also i would like to thank for all the information you are providing on c programming. and concepts


  • 刘雨辰

    刘雨辰刘雨辰

    Author Reply

    Thank you very much for your wonderful tutorial. I saw “Enhance Your Simple Table App With Property List”,so I want to konw how to use this object oriented method, combine the property list, hope a new tutorial 🙂


  • Nic

    NicNic

    Author Reply

    Thanks for your excellent tutorials. Your website is clean and simple, making ur articles easy to read and helpful. I’m a regular here and really appreciate your hard work and can’t wait for future tutorials!!!


  • CEMSOFT SOFTWARE

    thank you a thousand times over , go on …


  • abraham

    abrahamabraham

    Author Reply

    really great and useful tutorials.
    please keep writing


  • abraham

    abrahamabraham

    Author Reply

    if you are coming this tutorial from tutorial#13, you will probably face with problem on messageAlert because of “tableData”

    you can change your code like this if you want to run your “didSelectRowAtIndexPath” code.

    Recipe *recipe = [recipes objectAtIndex:indexPath.row];
    UIAlertView *messageAlert = [[UIAlertView alloc] initWithTitle:@”Satır Seçildi” message:recipe.name delegate:nil cancelButtonTitle:@”OK” otherButtonTitles:nil];


  • Mạnh Hiền Lành

    thanks for tut,i have a question, i don’t understand what “SimpleTableCell” class is in cellForRowatIndexPath method.


  • Ram Prasad

    Ram PrasadRam Prasad

    Author Reply

    Where can i download source code?????


  • Joshua C

    Joshua CJoshua C

    Author Reply

    Awesome tutorial! Thanks!


  • JM

    JMJM

    Author Reply

    For some reason, this one isn’t working for me. Everything up until now worked well, but this tutorial is struggling for me. The error that I get appears as shown:


    • JM

      JMJM

      Author Reply

      Photo Attached


  • Manfred Von Richtoffen

    where is a good place to get help on my personal iOS/Xcode projects?


  • Naeem

    NaeemNaeem

    Author Reply

    Don’t forget to import “Recipe.h”.


  • sekhar

    sekharsekhar

    Author Reply

    Thanx from India!


  • Cameryn Smith

    I was not Bored. LOL I love OOP. It’s easy to understand for me.


  • Dayley

    DayleyDayley

    Author Reply

    I had major problems with this tutorial and got about 19 errors :S Started again twice before figuring it out. The rest I found pretty easy….
    The problem being you need to import the Recipe.h into the SimpleTableViewController.m incase anyone else runs into this problem.

    go into the SimpleTableViewController.m file and at the top it should look something like this:

    #import “SimpleTableViewController.h”
    #import “SimpleTableCell.h”
    #import “Recipe.h”

    And walah! 🙂


  • MADAN LAL

    MADAN LALMADAN LAL

    Author Reply

    Its amazing post.i have also learnt object oriented programming. I blog often and I truly appreciate your
    content. The article has truly peaked my interest. I’m going to take a note of
    your website and keep checking for new details about once a week. in IB World Academy


  • Mahesh

    MaheshMahesh

    Author Reply

    Thanx bro
    Well done.
    I liked it.


  • Võ Văn Châu

    Thank you! Wonderful!


Leave a Reply to Thomas Moore
Cancel Reply

Shares