Mobile event viewer: User Interface

This is the second post of a series of tutorials for creating an event viewer for iOS. You can find the first post, which deals with basic architecture an network connections, here.

There’s also an accompanying Github project.

This post will be about the user interface. Since no built-in control exist for mimicking the calendar day view in iOS (neither in Android) and I’m not very great drawing controls, I started checking for open source implementations. There’s a very easy to use project on Github by muhku, called calendar-ui.

What we need from it is the MADayView class, along with MAEvent. MADayView, as the name suggests provides a view which renders the calendar day view. It has a delegate and a datasource property. In my example, I rigged both, but only used the datasource. Here’s how I set up the view.

EventListViewController.h changed a little:

As you can see, I imported MADayView.h, and added its datasource and delegate protocols to the header. I also added an IBOutlet for MADayView, and connected it to its counterpart in EventListViewController.xib. Basically the UITableView implementation was replaced to an MADayView implementation. In EventListViewController.m there are some changes too:

The main change here is that instead of UITableView I use MADayView. Its datasource protocol is very easy to satisfy, only a method with the signature: (NSArray*)dayView:(MADayView*)dayView eventsForDate:(NSDate*)startDate needs to be implemented.

This method unfortunately needs to return an array of MAEvent objects. I like to separate third party code from my, so I created a mapper which maps my own Event class to an MAEvent (a variant of the Adapter pattern). This way, if the very unlikely day would come when I want to change the UI in this tutorial, I could do with minimal changes. There are also two callback methods from MADayView which I put in there for paging: nextDate and previousDate. These should be the part of the delegate protocol, but I was sloppy and just use two selectors for the effect.

What may be interesting in these methods are the [actualDate yesterday] and [actualDate tomorrow] calls. These are implemented in a category on NSDate. The code looks like the following:

It simply uses NSDateComponents to increment or decrement the date on which it’s called (thus working with daylight saving times, leap years, etc.).

In the following post, I’ll show how to scroll between days to implement a truly native experience.



„Convert the interface of a class into another interface clients expect. Adapter lets classes work together that couldn’t otherwise because of incompatible interfaces.”

Design Patterns: Elements of Reusable Object-Oriented Software

As you may have noticed, with Singleton, we reached the end of the creational patterns. From now on, we’ll consider the benefits of each so-called structural pattern. You don’t have to be a genius to find out what structural patterns are involved in: defining the composition of larger structures, built from objects.

The first one in the list is called Adapter (you may (and I have) known it as Wrapper). It comes handy when you are dealing with incompatible types (to be strict, interfaces). There are four players in the adapter pattern:

  • Target: that is, what the client can use, the shape we need to from the adaptee.
  • Client: our code which works with the Target.
  • Adaptee: an existing interface, that the client needs to use
  • Adapter: the class which acts as a wrapper, and adapts Adaptee to Target.

Maybe I haven’t described the problem in the best available way, so let’s see a code sample for this one:
Continue reading