Building native mobile applications with the eZ Publish REST API

Mobile applications

In this section we are going to build two simple mobile applications: one for iOS and one for the Android platform. These applications will perform like news readers, listing the content available and then showing the relevant full content when an item is selected. The applications will poll the eZ Publish REST web service and process the JSON response.

We assume that you already have a development environment for at least one platform ready; refer to the “iOS Developer Tools” or “Android SDK Installation Guide” for more information on setting up the appropriate development environment.

The sample applications built in this article are available for download on GitHub.

iOS sample application

Open Xcode, and on the first screen, select “Create a New Xcode project”. Or, select “New Project...” from the “File” menu.

A window will appear giving you several application templates to choose from. Create a barebones Cocoa Touch application by selecting the “Window-Based Application” icon.

Click the “Next” button. On the next screen, enter “Reader” as the product name, “com.ez” as the company identifier, and select “iPhone” as the device family. Unmark the “Include Unit Tests” checkbox (as we are not going to write unit tests this time).

Click the “Next” button and select the location at which you want to save the project. Once the project is created, the project window will appear on your screen. Take a look at the contents of the “Project” table on the left side of the project window. In general, there are two types of files used to create an application: code and resources. Code is written in Objective-C, C, or C++. Resources are things like images and sounds that are used by the application at runtime. The groups in the project window are purely for organizing files. You can rename them to whatever you want.

Setting up the main view

In the next step, we are going to create a new view controller that will be responsible for loading our views with content served by eZ Publish. Select the “Reader” group on the left side and select “New -> New File...” from the “File” menu.

Then, select the “UIViewController” subclass from the “Cocoa Touch” group and click the “Next” button.

On the next screen, verify that the “Subclass of” field contains the “UIViewController” class, and that the checkbox titled “With XIB for user interface” is unmarked. (XIB stands for XML Interface Builder, which we used to build a hybrid application in part 1 of this article series.) Then, click the “Next” button and name the file “JSONTableViewController”.

Our application will present multiple screens of information: the main screen is a list view, and the other screens are details views. We will use a “UINavigationController” object, which will maintain a stack of those screens. The stack is an array of view controllers, and each screen is a view instance controller using the “UIViewController” class. When a “UIViewController” screen is on top of the stack, its view is visible. The “UINavigationController” object will be initialized with “JSONTableViewController” as its root view controller. Select the “ReaderAppDelegate.h” file and insert the following code:

#import "JSONTableViewController.h"

Next, in the “DemoAppAppDelegate.m” file, create the “UINavigationController” with “JSONTableViewController” and set it as the root view controller of the window:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Create the JSONTableViewController
    JSONTableViewController *jsonTableViewCtrl = [[JSONTableViewController alloc] initWithStyle:UITableViewStylePlain];

    // Create an instance of a UINavigationController
    // Its stack contains only jsonTableViewCtrl
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:jsonTableViewCtrl];
    [jsonTableViewCtrl release];

    // Place navigation controller’s view in the window hierarchy
    [self.window setRootViewController:navigationController];
    [navigationController release];
    
    [self.window makeKeyAndVisible];
    return YES;
}

Build and run the application to verify that everything works. At this point, you should see only empty table rows with a blue navigation toolbar at the top. Next, we are going to load data from the eZ Publish REST web service and display it within the table view. In order to do so, we will need to include an open source JSON parser written in Objective-C, freely downloadable from GitHub. When this article was published, JSON framework 2.3.2 was the latest stable version available.

Select the “Reader” group in the project pane, then select “New Group” from the “File” menu. Xcode will create an empty group, which you should name “JSON”.

Next, drag all of the files from the “classes” folder from the downloaded JSON framework into the JSON group in Xcode:

A window should appear, presenting some options for the new files. Mark the “Copy items into the destination group’s folder (if needed)” checkbox, then click the “Finish” button.