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

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:

 

Preparation

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:

[DesignSettings]
SiteDesign=mobile
AdditionalSiteDesignList[]
AdditionalSiteDesignList[]=ezwebin
AdditionalSiteDesignList[]=base
 

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:

[StylesheetSettings]
FrontendCSSFileList[]=pagelayout-mobile.css
 

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:

mobile
│
├── 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:

 

pagelayout.tpl

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)]>
<!-->
<body><!--<![endif]-->

to

<!--[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:

</div>

 

 

page_header.tpl

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>
            </div>
        {/if}
        {undef $current_node}
        </div>
        <div class="unit-3-4">
            {include uri='design:page_header_logo.tpl'}
        </div>
    </div>
 

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>
    </div>
 

page_head.tpl

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" />
 

search.tpl

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>
    {/let}
 

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>
         </div>
     {/if}
 

article.tpl

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}

to

{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">

to

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

folder.tpl

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())}
 

frontpage.tpl

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>
            <h2>{'Recipes'|i18n('design/mobile/frontpage')}</h2>
        </div>
    </div>
    <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>
    </div>
</div>
 
<div class="grid">
    <div class="unit-1-2">
        <div class="category">
            <a href="{'/Menus'|ezurl( 'no' )}"><img src="{'menus.png'|ezimage( 'no' )}" /></a>
            <h2>{'Menus'|i18n('design/mobile/frontpage')}</h2>
        </div>
    </div>
    <div class="unit-1-2">
        <div class="category">
            <a href="{'/content/search'|ezurl( 'no' )}"><img src="{'search.png'|ezimage( 'no' )}" /></a>
            <h2>{'Search'|i18n('design/mobile/frontpage')}</h2>
        </div>
    </div>
</div>
 
36 542 Users on board!

Tutorial menu

Printable

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

Author(s)

Proudly Developed with from