×
Namespaces

Variants
Actions
Revision as of 08:04, 7 May 2012 by hamishwillee (Talk | contribs)

Use Mobile Web Templates in Joomla

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: microsoft2 (29 Oct 2009)
Last edited: hamishwillee (07 May 2012)

Contents

Introduction

This article will describe how to mobilize your web site using Joomla and Nokia's Mobile Web Templates. All you need to do is install our Mobiletag plugin and our Mobileweb template and then check and customize your site. If you are familiar with Joomla! and WURFL you can go directly to #Before you start.

What is Joomla!

Joomla! is a free, open source content management system used to create websites. It is written using PHP and uses MySQL as a database provider. For more information visit http://www.joomla.org/about-joomla.html.

Joomla! template

A Joomla! template controls the overall look and layout of your site. It provides the framework that brings together common elements, modules and components as well as providing the cascading style sheet for the site. Basically we need two templates - a version for desktop computers and for mobile devices.
Our Nokia Developer Mobile template was designed to support top menu, latest news, breadcrumbs and footer modules plus article and category views. You will most probably need to modify our template in order to fit your design goals. If you are not familiar with creating and modifying templates, please continue to http://docs.joomla.org/Tutorial:Introduction_to_Joomla!_templates

Joomla! plugin

Joomla plugins allows you to add extra functionality to your Joomla! site. We have created a 'Mobiletag' plugin that will install WURFL php api to your site and add a 'mobile' html tag to your articles in order to help you mobilize your content.

What is WURLF

WURFL is a free open source project that provides a comprehensive resource of device information and contains more than 10 000 device variants. WURFL provides the device database in XML format and interface for parsing it in several languages (PHP, Perl, Ruby, Java, Python, C++, dotNET).
We will use wurfl only to detect if a mobile device is hitting our site. But the wurfl API allows you to greatly customize your content and show only the appropriate sis files, screen-shots and description based on the device information. You can easily get the Symbian version of the device for example.
For more information visit http://wurfl.sourceforge.net/
You may also be interested in How to serve different web templates and resources using WURFL

Before you start

The mobiletag plugin and the Nokia Developer Mobile template are still in experimental stage, they are only recommended for web developers!
You can install only the plugin or only the template - there is no dependency between them.
Please update your Joomla! installation to the latest version. The recommended minimum is 1.5.14.
Make sure your memory limit in php.ini is at least 32M.

Mobiletag plugin

Description

With this plugin you will be able to choose a template which will be active only if a mobile browser is detected. This way you will have one template for desktop computers and one template that is specially optimized for mobile devives.
As a bonus you will also be able to add a special 'mobile' tag in your articles. If you have content that you don't want to show in mobile devices you would add code like this:

<mtag device="desktop">
<img src="mybigpicture.jpeg"/>
Other text that you will show only on desktop browsers.
</mtag>

To specify a mobile only html section. Use the following code:

<mtag device="mobile">
<img src="mysmallpicture.jpeg"/>
Special content and formatting visible only to mobile browsers.
</mtag>

Installation

You can download and install the plugin from here: http://mobifunsoft.com/mobiletag_v100.zip
After the installation

  • Set the permissions of /plugins/system/wurfphp/cache to 777 or change the WURFL cache folder to some other place from /plugins/system/wurfphp/resources/wurfl-config.xml
  • Enable the plugin from the plugins list.
  • Reload your site and wait for a few minutes. During this time WURFL will creates its cache. This will happen only once.

Source code and future work

The plugin source is hosted at http://code.google.com/p/mobiletag/source/browse/#svn/trunk. If you feel excited please contribute to the project. For example it would be very convenient if you could type something like this

<mtag device="symbian 9.1" images="scale">
special download link for symbian 9.1 devices
</mtag>
<mtag device="low-range" images="hide" >
do not use slideshow.
</mtag>

Nokia Developer Mobile template

This template came as a result of our effort to mobilize our site (www.mobifunsoft.com) which is a typical store site. We choose to use High-End Mobile Web Templates since most of our traffic comes from such devices. Future work will include combining the three different templates from Nokia into one using the technique described in How to serve different web templates and resources using WURFL
Lets start and look what's in the template:

Overview

This is the main layout of the theme. We will discuss the different sections of the template below. This template use the original Nokia Web Template for High End devices. The few customization we made are in /templates/forumnokiamobile/css/high_end_devices_v1_2_en/resources/styles/modifications.css
Joomla template overview2.png

Nothing new here, after installing the template you just need to modify the img-logo.png file.

		<div id="header">
<div class="branding">
<a href="">
<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/high_end_devices_v1_2_en/resources/images/img-logo.png" alt="Logo" />
</a>
<p>Company name</p>
<p>Company tagline</p>
</div>
</div>

Top menu

To use the four buttons top menu we use the following code

	<jdoc:include type="modules" name="top" style="4buttons" />

notice the style="4buttons" part - this custom style is called Custom module chrome and the real work is done in the function called modChrome_4buttons found in mymodules.php

function modChrome_4buttons( $module, &$params, &$attribs )
{
preg_match_all( "/\<a[^\<]+\<span\>.[^\<]+\<\/span\><\/a\>/", "$module->content", $array);
 
/*
foreach ($array as $val) {
echo "matched: " . $val[0] . "\n";
echo "part 1: " . $val[1] . "\n";
echo "part 2: " . $val[2] . "\n";
echo "part 3: " . $val[3] . "\n";
echo "part 4: " . $val[4] . "\n\n";
}
*/
echo "<ul class=\"nav-horizontal-flat stack\">";
 
$ind = 0;
foreach ($array[0] as $item)
{
if( $ind == 0 )
$class = "first four-piece";
else if( $ind == sizeof( $array[0] ) )
$class = "last four-piece";
else
$class = "four-piece";
echo "<li class=\"$class\">" . $item . "</li>\n";
$ind++;
}
echo "</ul>";
}

We basically take the spans from the menu module output and replace them will styled ul element in order to get the top 4 buttons. You will need to change the code in order to get the three buttons version. Also make sure that the menu module parameter is set to List - see screenshot

Breadcrumbs

To use Nokia'a styled breadcrumbs we need to override the breadcrumbs module output. This is generally discussed in How to override the output from the Joomla! core. Basically we need to have file name forum_nokia_mobile/html/mod_breadcrumbs/default.php in our template folder.

<?php // no direct access
defined('_JEXEC') or die('Restricted access');
?>
<ul class="breadcrumbs">
<?php
for ($i = 0; $i < $count; $i ++) :
 
// If not the last item in the breadcrumbs add the separator
if ($i < $count -1)
{
echo "<li>";
if(!empty($list[$i]->link))
{
echo '<a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a>';
}
else
{
echo '$list[$i]->name';
}
echo ' '.$separator.' </li>';
}
else if ($params->get('showLast', 1) )
{ // when $i == $count -1 and 'showLast' is true and we don't want to add a link
echo "<li>".$list[$i]->name."</li>";
}
endfor;
?>
</ul>

Article

Once you have installed the theme you will be able to add different UI components in your article. For a full list visit with the UI components download the Mobile Web Templates for Smartphones and associated examples.

Accordion

To use this cool UI component all you need to do is add similar code to your article.

<mtag device="mobile">
<dl id="accordion" class="list-accordion">
<dt class="expanded"><span></span>Remind Me</dt>
<dd>
{include_content_item 1 readmore=1 br=1}
</dd>
<dt class="expanded"><span></span>Smart Settings</dt>
<dd>
{include_content_item 2 readmore=1}
</dd>
<dt class="expanded"><span></span>AgendaSaver</dt>
<dd>
{include_content_item 3 readmore=1}
</dd>
</mtag>
Category

In Joomla a category is a list of articles. In our case the category News will contain all the news articles. What we want here is use the table with alternative row colors. To override the category layout, we need to add several files in forumnokiamobile/html/com_content/category/. This code is more complex than we want to, so what we did is copy the layout from the built-in beez template and modify default_items.php. All we need to do is add class="odd" for the rows with odd numbering.

...
<?php foreach ($this->items as $item) : ?>
<tr class="<?php if( $item->odd % 2 ) echo "odd " ; echo $this->escape($this->params->get('pageclass_sfx')); ?>">
...

Joomla template category list.png
Everything looks great, so lets continue with the

Slideshow

The slideshow component is very easy to use, just add to your article similar code

<div id="slideshow" class="slideshow">
<a class="preview">
<img src="images/remindme/mainscreen.png" alt="loading" />
<span></span>
</a>
<ul class="controls nav-horizontal-rounded stack">
<li class="first two-piece"><a class="previous">previous</a></li>
<li class="last two-piece"><a class="next">next</a></li>
</ul>
<ol class="data">
<li>
<a href="images/remindme/mainscreen.png">
<img src="images/remindme/mainscreen.png" alt="Main screen" />
</a>
</li>
<li>
<a href="images/remindme/settings1.png">
<img src="images/remindme/settings1.png" alt="Alarm settings 1" />
</a>
</li>
<li>
<a href="images/remindme/settings3.png">
<img src="images/remindme/settings3.png" alt="Alarm settings 2" />
</a>
</li>
</ol>
</div>
Contacts form

There are a lot of 'Contact us' forms extensions for Joomla, what we used is a free plugin called ALFcontact. We needed to modify it and remove the tables from their design.
The final result looks like this:
Joomla template contactus.png

Latest news

We will use the same technique to override the latestnews module output in order to get the styled list for the latest news.

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<ul class="list-graphical-inline stack latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php foreach ($list as $item) :  ?>
<li class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php echo $item->text; ?></a>
</li>
<?php endforeach; ?>
</ul>

Footer

Warning.pngWarning: Link provided for footer below was broken. This section is therefore untested. Please update if an alternative extension is found to replace this

If you want to add html code in your footer you may consider the Custom Footer Module for Joomla!. It is a free extension and very useful in my opinion. You can also modify the template index.php file and add your footer html code there. This is how you insert the footer module in index.php.

<jdoc:include type="modules" name="footer" />

And this is a typical footer html code, that will be shown only to mobile devices, if you have installed Mobiletag plugin.

<mtag device="mobile">
<div id="footer">
<ul class="nav-footer">
<li>
<a href="">Home</a>
</li>
<li>
<a href="products">Products</a>
</li>
<li>
<a href="services">Services</a>
</li>
<li>
<a href="news">News</a>
</li>
<li>
<a href="contactus">Contact</a>
</li>
</ul>
<p>My Company</p>
<div class="stack"></div>
</mtag>

Installation

You can download and install the theme from here

Conclusion

I encourage you to use the template and improve it. Nokia templates saved us a lot of work, mobilizing our web site. I hope that this Joomla! template will save a few days of your development time.

If you feel that you added some useful code, update this article and the zip file.

Testing

To see the Nokia Developer Mobile template and Mobiletag plugin in action you can visit our site from your mobile.

You can also install User Agent switcher. With this add-on for Firefox you can easily change the UA string of your browser and test if your site shows the proper content.

139 page views in the last 30 days.
×