This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit

eZ Community » Learn » eZ Publish » Building mobile browser and hybrid...

Building mobile browser and hybrid applications with eZ Publish

Thursday 07 July 2011 3:29:13 pm

  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Mobile applications

In this section, we are going to build two simple mobile applications, one for iOS / iPhone and one for the Android platform. These applications will simply be native shells for our mobile web channel. We will not cover the steps for how to set up iOS and Android development environments, as those are well documented in the official guides. Refer to the “iOS Developer Tools” or “Android SDK Installation Guide” for more information. We assume that you already have a development environment for at least one platform.


iOS application

Open Xcode, and on the very 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, type “DemoApp” for the product name, and “com.ez” for the company identifier. Select “iPhone” from the “Device Family” dropdown list and 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. In the next step, we are going to create a new view controller that will be responsible for loading our web view with content served by eZ Publish. Select the “DemoApp” 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 marked. (XIB stands for XML Interface Builder, which is covered shortly.) Then, click the “Next” button and name the file “MainController”.


Next, we need to load “MainController”, which at this point does nothing. However we will add a “UIWebView” control later, which is responsible for loading our web content. Select “DemoAppAppDelegate.h” and insert the following code:

#import "MainController.h"

Next, in “DemoAppAppDelegate.m”, create the main view controller and set it as the “rootViewController” of the window:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    // Create the mainController
    MainController *mainController = [[MainController alloc] init];
    // Set mainController as rootViewController of window
    [self.window setRootViewController:mainController];
    // The window retains mainController, we can release our reference
    [mainController release];
    // Show the window
    [self.window makeKeyAndVisible];

    return YES;

Build and run the application to verify that everything works fine. At this point, you should see only a blank white window. Next, we are going to add the web view responsible for loading the content served by eZ Publish. Because we will need to access that web subview during runtime, “MainController” needs an outlet for that subview. Add the following instance variable to “MainController.h”:

@interface MainController : UIViewController {
    IBOutlet UIWebView *webView;

The “IBOutlet” reference in front of the instance variable indicates that you are going to use the Interface Builder to lay out the interface for MainController’s view. When we created MainController, an XIB (XML Interface Builder) file of the same name was created and added to the project. Open MainController.xib now.

In the right pane, find the “UIWebView” control in the “Object” library and drag it into the view.


Next, make a connection from “File’s Owner” to that object, as shown below:


After a “UIViewController” loads its view, it is immediately sent the message “viewDidLoad”. Whether that view is loaded from an XIB file or using the method “loadView”, this message gets sent to the view controller. We need to do an extra initialization to a “UIViewController” -- which requires its view to already exist -- by overriding “viewDidLoad” in “MainController.m”.

- (void)viewDidLoad {

    //Create a URL object
    NSURL *url = [NSURL URLWithString:@""];

    //Request the URL
    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    [webView loadRequest:request];


Notice that “NSURL URLWithString” takes a URL, which points to our mobile web channel available at

When “MainController’s” view gets unloaded, its subviews will still be retained by “MainController”. They need to be released and set to “nil” in “viewDidUnload”. Let’s override this method in “MainController.m”:

- (void)viewDidUnload {
    [super viewDidUnload];

    [webView release];
    webView = nil;

Finally, we need a “dealloc” method, which frees up the object’s memory and disposes of any resources it holds, including ownership of any object instance variables:

- (void)dealloc {
    [webView release];
    [super dealloc];

That’s all! Build and run the application to verify that everything works fine.

36 542 Users on board!

Tutorial menu


Printer Friendly version of the full article on one page with plain styles


Proudly Developed with from