Using the ReactiveCocoa 4 Style

Cecil Costa

January 2016

In this article by Cecil Costa, author of Reactive Programming with Swift, we will cover the following topics:

  • Setting up a project
  • Developing a currency class

(For more resources related to this topic, see here.)

The first version of ReactiveCocoa for Swift was 3.0; however, it worked like the Objective-C way of programming, except for some operators and some other stuff. For this reason, the ReactiveCocoa team decided to create another version, quickly taking the advantages of the new features of Swift 2.

Setting up the project

Open Xcode and create a new project called Chapter 6 Shop Cart; ensure that Swift is the main programming language. Install the ReactiveCocoa using your favorite method; just ensure that version 4 is installed. For example, if you use CocoaPods, make sure that you have specified version 4.

Once you have set up the project, go to the storyboard. Here, we will start by adding a layout where the user can see the whole supermarket catalog on a table view, the Total label in the bottom-left corner, and a Checkout button in the bottom-right corner. Of course, a label with a screen title would be fine to make it more visible to the user. In short, you can have a simple layout, as shown in the following screenshot:

Now we have to think about how to display the products. Here, we have to display a picture, its price, description, a label with the quantity that was added to the shopping cart, button to add one unit of the product, and a button to remove it.

To do it, just add a Table View cell on the only table we have on the screen. Place an image view on the cell, three labels (one for the product name, the other for its price, and the third for the quantity in the basket), and two buttons. Set the buttons' image to minus and plus images. The final cell layout will look similar to what is shown in the following screenshot. Feel free to change this layout if you are a creative person.

Using the Assistant Editor, connect the table view, the Total label, and the Checkout button with their corresponding property in the ViewController class:

   @IBOutlet weak var catalogTableView: UITableView!

    @IBOutlet weak var totalLabel: UILabel!

    @IBOutlet weak var checkoutButton: UIButton!

Finally, let's create a class for the table view cell that we have created. Add a new file to your project called ProductCell.swift. Import UIKit, and create an empty class that inherits from UITableViewCell using the following code:

import UIKit

class ProductCell:UITableViewCell {

}

Return to the storyboard, select Table View Cell, go to its Identity Inspector with command+option+3, and change its class to ProductCell, as is demonstrated in this screenshot:

Now, with command+option+4, we can go to Attribute Inspector, and change the cell identifier to productcell:

Open the Assistant Editor, and connect the UI cell components with their corresponding attributes:

 @IBOutlet weak var nameLabel:UILabel!

    @IBOutlet weak var priceLabel:UILabel!

    @IBOutlet weak var productImage:UIImageView!

    @IBOutlet weak var addButton:UIButton!

    @IBOutlet weak var removeButton:UIButton!

    @IBOutlet weak var numberOfItemsLabel:UILabel!

Great, the basic setup for the first screen is done. Now, let's start implementing our shopping cart.

Developing the Currency class

In this app, a currency is an important class. The output on the screen will change according to the user's currency. The only stored properties we will need is the name, which is a three letter code, such as USD for US Dollar and GBP for Great Britain Pounds, and its rate according to the base currency.

As mentioned in the beginning of this article, the base currency will be GBP; however, you can easily change it if you like by changing the setting of the static attribute, called baseCurrency. The final code for this class is as simple as this one:

class Currency:NSObject{

    var name:String

    var rate:Double

   

    static var baseCurrency:Currency = {

        return Currency(name:"GBP", rate: 1.0)

    }()

   

    init(name: String, rate:Double){

        self.name = name

        self.rate = rate

    }

}

Why does this class inherit from NSObject? The reason for this is that objects of the Currency type can only be marked as dynamic if they are Object-C ready; to do it, you just need to inherit from NSObject.

Summary

To summarize this article, we covered the basic steps to set up our project. We installed ReactiveCocoa and added a layout to our project. We also developed our dynamic Currency class, which inherits from NSObject.

Resources for Article:

 


Further resources on this subject:


You've been reading an excerpt of:

Reactive Programming with Swift

Explore Title