This site has been archived. To learn more about our current products Ibexa Content, Ibexa Experience, Ibexa Commerce head over to the Ibexa Developer Portal

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

Creating a sample Hybrid Mobile Application

Now that we’ve configured the web server for a mobile-specific subdomain, and configured eZ Publish to support a mobile siteaccess and mobile design, we can start to build the design, the mobile site as a whole, and subsequently the hybrid mobile application -- one for the iOS / iPhone and one for Android phones -- as a shell for the mobile site!

Here is a screenshot of the eventual iOS application:



The first thing we will need is a working eZ Publish instance with the Website Interface enabled. We won’t cover the steps for how to install eZ Publish, as this process is well documented in the official documentation. Refer to the "Normal installation" section of the "Installation" chapter for more information. We also assume that you have already created a siteaccess and design extension dedicated to the mobile site, as covered earlier in this article.


Adjusting INI settings

We will be using the Website Interface design as the foundation for our mobile web channel, so we need to set the “ezwebin” design as a fallback site design in order to use its templates, styles, and so on. Verify that the configuration file settings/siteaccess/mobile/site.ini.append.php has the following settings:


A bit later in this article, we will add a pagelayout-mobile.css file, which contains CSS styles for the main template pagelayout.tpl. In preparation for that, we will add a reference to that file in extension/mobile/settings/design.ini.append.php:


To complete our work with INI settings, we also need to copy over the Website Interface image size settings, as well as template override rules so that our mobile site can make use of much of the Website Interface foundation. Copy the following files from settings/siteaccess/ezwebin_site/ to settings/siteaccess/mobile/

  1. override.ini.append.php
  2. image.ini.append.php

Preparing templates

Next, copy the following templates from the extension/ezwebin/design/ezwebin/ folder to extension/mobile/design/mobile/. We will be modifying these templates instead of simply using them as fallback templates.

  1. templates/pagelayout.tpl
  2. templates/page_header.tpl
  3. templates/page_header_logo.tpl
  4. templates/page_head.tpl
  5. templates/content/search.tpl
  6. override/templates/full/article.tpl
  7. override/templates/full/folder.tpl
  8. override/templates/full/frontpage.tpl

Once you are done copying the files, your mobile extension’s design folder structure should look like this:

├── design
│   └── mobile
│       ├── images
│       ├── javascript
│       ├── override
│       │   └── templates
│       │       └── full
│       │           ├── article.tpl
│       │           ├── folder.tpl
│       │           └── frontpage.tpl
│       ├── stylesheets
│       └── templates
│           ├── content
│           │   └── search.tpl
│           ├── page_head.tpl
│           ├── page_header.tpl
│           ├── page_header_logo.tpl
│           └── pagelayout.tpl
└── settings

Here are the changes to make to the newly copied templates:



Make the following changes to extension/mobile/design/mobile/templates/pagelayout.tpl:

The following code change will scroll up to the device’s viewport and hide the browser navigation toolbar. Change line 29 from :

<!--[if (gt IE 8)|!(IE)]>


<!--[if (gt IE 8)|!(IE)]>
<body onload="{literal}setTimeout(function() { window.scrollTo(0, 1) }, 100);{/literal}"><!--<![endif]-->"

Line 33 should already read:

<div id="page" class="{$pagestyle}">

Add to the following line ( line 34 ), which is a “div” element to which we will add a background image style later:

<div id="page-wrapper">

Line 100 should already read:

{include uri='design:page_footer.tpl'}

Add to the following line ( line 101 ) to close the element added above:





Make the following changes to extension/mobile/design/mobile/templates/page_header.tpl:

Replace line 9 with the following code, for styling purposes and to add a link on all sub-pages, pointing back to the home page:

    <div class="grid">
        <div class="unit-1-4">
        {def $current_node = fetch( 'content', 'node', hash( node_id, $current_node_id ))}
        {if and( ne( $current_node_id, ezini( 'NodeSettings', 'RootNode', 'content.ini' ) ), $current_node)}
            <div id="backbutton">
                <a href="{$current_node.parent.url_alias|ezurl( 'no' ))}"><img src="{'back.png'|ezimage( 'no' )}" /></a>
        {undef $current_node}
        <div class="unit-3-4">
            {include uri='design:page_header_logo.tpl'}


Make the following changes to extension/mobile/design/mobile/templates/page_header_logo.tpl:

Replace the contents of the entire file with the following, to simplify the code displaying the logo:

  <div id="logo">
        <a href={"/"|ezurl} title="{ezini('SiteSettings','SiteName')|wash}"><img src="{'logo.png'|ezimage( 'no' )}" alt="{ezini('SiteSettings','SiteName')|wash}" /></a>


Make the following changes to extension/mobile/design/mobile/templates/page_head.tpl:

Add the following to line 52, in order to force the webpage into the device’s visible area:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=yes" />


Make the following changes to extension/mobile/design/mobile/templates/content/search.tpl:

Remove the following code from lines 34 - 37 (referencing the advanced search functionality, which we won’t use for the mobile site):

    {let adv_url=concat('/content/advancedsearch/',$search_text|count_chars()|gt(0)|choose('',concat('?SearchText=',$search_text|urlencode)))|ezurl}
    <label>{"For more options try the %1Advanced search%2"|i18n("design/ezwebin/content/search","The parameters are link start and end tags.",array(concat("<a href=",$adv_url,">"),"</a>"))}</label>

Wrap the code on lines 47 - 49 with the following “if” statement, which suppresses a simple message if the user hasn’t yet searched for anything:

     {if ne( $search_text, '')}
         <div class="warning">
             <h2>{'No results were found when searching for "%1".'|i18n("design/ezwebin/content/search",,array($search_text|wash))}</h2>


Make the following changes to extension/mobile/design/mobile/override/templates/full/article.tpl:

Add the following code to line 3, to disable extra navigational and design elements from appearing in the pagelayout:

{set scope=global persistent_variable=hash('left_menu', false(),
                                                'extra_menu', false(),
                                                'show_path', false(),
                                                'top_menu', false())}

To have article images display in a more mobile-friendly size, change line 32 from:

{attribute_view_gui attribute=$node.data_map.image image_class=medium}


{attribute_view_gui attribute=$node.data_map.image image_class=articleimage}

Related to the reason above, change line 35 from:

<div class="caption" style="width: {$node.data_map.image.content.medium.width}px">


<div class="caption" style="width: {$node.data_map.image.content.articleimage.width}px">


Make the following changes to extension/mobile/design/mobile/override/templates/full/folder.tpl:

Add the following code to line 3, to disable extra navigational and design elements from appearing in the pagelayout:

{set scope=global persistent_variable=hash('left_menu', false(),
                                                'extra_menu', false(),
                                                'show_path', false(),
                                                'top_menu', false())}


Make the following changes to extension/mobile/design/mobile/override/templates/full/frontpage.tpl:

Replace the entire content of the file with the following, which disables extra navigational and design elements from appearing in the pagelayout, and sets up the basic design for the home page:

{set scope=global persistent_variable=hash('left_menu', false(),
                                           'extra_menu', false(),
                                           'show_path', false(),
                                           'top_menu', false())}
<div class="grid">
    <div class="unit-1-2">
        <div class="category">
            <a href="{'/Recipes'|ezurl( 'no' )}"><img src="{'recipes.png'|ezimage( 'no' )}" /></a>
    <div class="unit-1-2">
        <div class="category">
            <a href="{'/Food-reviews'|ezurl( 'no' )}"><img src="{'food-reviews.png'|ezimage( 'no' )}" /></a>
            <h2>{'Food reviews'|i18n('design/mobile/frontpage')}</h2>
<div class="grid">
    <div class="unit-1-2">
        <div class="category">
            <a href="{'/Menus'|ezurl( 'no' )}"><img src="{'menus.png'|ezimage( 'no' )}" /></a>
    <div class="unit-1-2">
        <div class="category">
            <a href="{'/content/search'|ezurl( 'no' )}"><img src="{'search.png'|ezimage( 'no' )}" /></a>
36 542 Users on board!

Tutorial menu


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


Proudly Developed with from