Here are instructions how to run Firefox Mobile on Ubuntu Linux (tested on 32-bit Ubuntu 10.10)

wget http://releases.mozilla.org/pub/mozilla.org/mobile/releases/latest/linux-i686/fennec-5.0.en-US.linux-i686.tar.bz2
tar -xjf fennec-5.0.en-US.linux-i686.tar.bz2
cd fennec
./fennec

.. and thats all you need. It works out of the box! 400x times faster than using Android emulator browser.

There are also OSX and Windows builds available.

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

If you get stuck in a point please ask questions on the gomobile-dev discussion forum.

Prerequisites

• Basic Plone development skills
• Basic ZopeSkel knowledge
• Basic five.grok knowledge (Grok framework integration for Plone)

This tutorial is little rough on details, but links to authoritative sources for more in-depth information. I hope to further polish this tutorial based on the user comments.

Note: currently the installation process does not work from China, as the local access to code.google.com and appspot.com servers is limited.

Installation

Install Web and Mobile to your buildout.

Possibly fight with lxml to get it running.

Create a Plone site (if you don’t already have an existing site).

Then install following add-ons, in this order in the site control panel

• Go Mobile
• Go Mobile Default Theme

Now your website should have a basic mobile experience with a default Web and Mobile theme.

Test mobile site

You can visit the mobile version of your site by putting a m.localhost domain in your /etc/hosts file. You don’t need a mobile browser, as the mobile site is detected by a domain name by default. Your mobile site should be available from http://m.localhost:8080/Plone

If you access the website with a mobile browser you will be automatically redirected to a mobile site.

Creating a mobile theme

Install the ZopeSkel based mobile theme template to your buildout.cfg.

parts =
   ...
   paster

[paster]
recipe = zc.recipe.egg
eggs =
  PasteScript
  gomobile.templates
  ${instance:eggs}

Rerun buildout to enable bin/paster command:

bin/buildout

Create a theme skeleton using paster. We use a Python package named gomobiletheme.yourcompanyname here as an example name for the theme package. If it asks for “override files” answer yes:

cd src
 ../bin/paster create -t gomobile_theme gomobiletheme.yourcompanyname

List your new theme egg in buildout in develop-eggs. (Alternatively: use mr.developer  if you indent to put it directly under version control.)

eggs =
    gomobiletheme.yourcompany
develop =
   src/gomobiletheme.yourcompan

Rerun buildout.

Test theme skeleton

Test the theme installs and works. Restart Plone and install your theme add-on in the add-on installer.

Navigate to m.localhost again and see that the mobile site still opens.

Theme theory

The generated mobile theme includes five.grok based viewlets.py and view.py files where you are to place

• Mobile theme viewlets (note: mobile theme does not use viewlet managers)
• Mobile specific view overrides
• Mobile specific page template overrides

All visual code registered against gomobiletheme.yourcompany.interfaces.IThemeLayer is available and used when your site is browser in mobile mode.

Changing logo

Change the generated gomobile.yourcompany.viewlets.Logo class.  In the example below we set it to use logo image file from our web theme.

class Logo(base.Logo):

 # Change logo URI here
 def getLogoPath(self):
 return "++resource++plonetheme.yourwebtheme.images/logo.png"

If you are using logo from the web theme resource directory, make sure <resourceDirectory> in theme browser/configure.zcml does not have <resourceDirectory layer=”"> set. If it’s set the resource directory is not activate for the mobile theme and the mobile theme cannot access the logo file.

The logo image is resized automatically by gomobiletheme.basic.viewlets.Logo base class for different mobile screen resolutions.

Changing footer text

In viewlets.py add:

class FooterText(base.FooterText):
 """ Free-form HTML text at the end of the page """

 # the presence of this viewlet includes a new page template
 # and overrides default footertext

Then include the page template itself. Add new file to the your theme package templates/footertext.pt:

<div id="footer-text" i18n:domain="isleofback.app">
 Your text goes here.
</div>

Change the default colours and CSS

Mobile theme static CSS and Javascript resources are provided by five.grok static folder mechanism. Transformations document provides some in-sight for different CSS files used by different handsets: common.css is served to all mobile phones, highend.css for Webkit and Firefox based browsers, lowend.css for limited browsers.

The default gomobiletheme.basic CSS resources are included by default with the theme skeleton. You need override only the CSS rules you specifically want to change for your own  theme. This can be done by adding rules to common.css, lowend.css and highend.css files which you can find from the generated theme package.

Further info

• Read theming manual in Web and Mobile documentation section.
• See Web and Mobile presentation in Plone Conference 2010
• See plonecommunity.app package for an open source example
• SVN trunk version of the theming manual for the latest instructions
• Subscribe to Web and Mobile discussion group for further questions

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

To tackle the lack of console.log() problem there are several approaches.

Use dummy placeholder if console is missing

This snippet wraps console.log (need to repeat for console.error etc.):

// Ignore console on platforms where it is not available
if (typeof(window["console"]) == "undefined") { console = {}; console.log = function(a) {}; }

Pros

• Easy

Cons

• Need to add to every Javascript file
• Messes with global namespace

Use module specific log function

This makes your code little bit ugly, more Java like. Each Javascript module declares their own log() function which checks the existence of console.log() and outputs there if it’s present.

mfabrik.log =function(x) {
 if(console.log) {
 console.log(x);
 }
}

mfabrik.log("My log messages")

Pros

• Easy to hook other logg
• You can disable all logging output with one if

Cons

• Not as natural to write as console.log()
• Need to add to every Javascript module

Preprocess Javascript files

Plone (Kukit / KSS) uses this approach. All debug Javascript is hidden behind conditional comments and it is filtered out when JS files are bundled for the production deployment. (The preprocessing code is here in Python for those who are interested in it).

if (_USE_BASE2) {
 // Base2 legacy version: matchAll has to be used
 // Base2 recent version: querySelectorAll has to be used
 var _USE_BASE2_LEGACY = (typeof(base2.DOM.Document.querySelectorAll) == 'undefined');
 if (! _USE_BASE2_LEGACY) {
 ;;;     kukit.log('Using cssQuery from base2.');

Pros

• Makes production Javascript files lighter
• Make production Javascript files more professional – you do not deliver logging statements indented for internal purposes for your site visitors

Cons

• Complex – preprocessing is required

Commit hooks

You can use Subversion and Git commit hooks to check that committed JS files do not contain console.log. For example, Plone repositories do this for the Python statement  import pdb ; pdb.set_trace() (enforce pdb breakpoint).

Pros

• Very robust approach – you cannot create code with console.log()

Cons

• Prevents also legitimate use of console.log()
• Github, for example, lacks possibility to push client-side commit hooks to the repository cloners. This means that every developer must manually install commit hooks themselves. Everything manual you need to do makes the process error prone.

Other approaches?

Please tell us!

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

Here are instructions how to achieve it.

Firefox

Follow instructions by Steve Novoselac.

Opera

Here are instructions for Opera 10:

• You have file webmailproviders.ini where web mail backends are lsited
• This file is located in Applications/Opera (you need to right click and choose Show package contents) and Resources/defaults/webmailproviders.ini (on OSX, for Windows Linux follow the instruction links below)
• Add the email provider description as below. Note that you need to change Google Apps domain name to your link. After saving the file you need to restart opera. You don’t need icon if you don’t have one.
• Then restart Opera, choose Preferences -> Advanced -> Programs -> mailto -> your email account.

[DOMAIN_NAME]
ID=8
URL=https://mail.google.com/hosted/DOMAIN_NAME?extsrc=mailto&url=%s
ICON=https://mail.google.com/favicon.ico

Web mailto in OperaWiki

More HTTP links to trigger email send for various email providers

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

I just learnt that Firefox web page screen capture tools (any of them) can’t take web page screenshots higher than short 16-bit interger (32768) pixels. Crash crash crash. But I hope I am alone with my problem.

So, thanks for being so supportive… and it’s not fully rendered (over 250 of them), since after 3200 the image was cut. Excuse me if I am not willing to support your cause.