I wrote a symfony plugin that allows you to easily optimize your existing symfony application for mobile devices using jQuery Mobile.
And if you want to distribute your application in Android Market or Apple App Store it is possible using e.g. Phonegap.

If you wish to see the plugin in action you can visit the mobile version of my web page http://www.jonasfischer.net/m.

If you are visiting my website using one of the supported operating systems (e.g. iOs or Android) then you will be prompted if you wish to view the mobile-enhanced version or the regular version: http://www.jonasfischer.net/.

Features

• jQuery Mobile integration
• jfPortableDevicePlugin is bundled with a standard template and theme to get your app up and running within minutes
• automatically “hijacks” links and appends some parameters to the URLs so that you can apply special logic in your symfony actions/templates if needed
• flexible and extendable using symfony standards: The templates are organized in a very fine-grained manner so that you can override the parts that don’t fit your needs.
• Comes with a phonegap build-mode option to prepare your app for deployment using phonegap.

Installation instructions

Checkout the Source Code:

$ svn co http://jfportabledevice.googlecode.com/svn/trunk plugins/jfPortableDevicePlugin

Be aware that you are checking out the trunk. As this plugin is still under heavy development (in fact, the jQuery Mobile library itself is still in alpha state) there is no stable tag/branch, yet.

Enable plugin jfPortableDevicePlugin in your ProjectConfiguration.php

As Victor points out in the comments, if you have not enabled all plugins by default, you need to enabled jfPortableDevicePlugin manually:

$this->enablePlugins(’jfPortableDevicePlugin’);

Enable module jfPortableDevice in your settings.yml

enabled_modules: [..., jfPortableDevice]

Publish plugin assets

$ php symfony plugin:publish-assets

Enabled filters in your filters.yml

required: jfPortableDeviceFilter

This filter automatically sets the correct layout for portable device requests.

jfPortableDevice:
class:  jfPortableDeviceFilter
param:
layout: jfPortableDeviceLayout

Additionally, you need to ensure that the specified layout file exists in your app’s layout folder.
To get up and running you can use the bundled jfPortableDeviceLayout.php file. Simply symlink or copy it into your app’s layout folder:

$ ln -s ../../../plugins/jfPortableDevicePlugin/templates/jfPortableDeviceLayout.php apps/frontend/templates/jfPortableDeviceLayout.php

or

$ cp plugins/jfPortableDevicePlugin/templates/jfPortableDeviceLayout.php apps/frontend/templates/

optional: redirectByUserAgentPortableDevice

This filter redirects to the portable device controller if a request was made from one of the specified user agents

redirectByUserAgentPortableDevice:
  class:  redirectByUserAgentPortableDeviceFilter
  param:
    redirectUrl: /m/#%s?jfPD_device=portable
    noHeaderRedirect: true
    javascriptConfirm: true
    stopParameters:
      - noMobileRedirect
    stopModules:
      - jfPortableDevice
    userAgents:
      - iphone #really bad example string because it might easily be miss-matched. Choose whichever regular expressions fit your needs
      - ipod #really bad example string because it might easily be miss-matched. Choose whichever regular expressions fit your needs
      - ipad #really bad example string because it might easily be miss-matched. Choose whichever regular expressions fit your needs
      - android #really bad example string because it might easily be miss-matched. Choose whichever regular expressions fit your needs

Clear the symfony cache

$ php symfony cc

Tags: jQuery Mobile, mobile, Symfony

This entry was posted on Sunday, February 27th, 2011 at 3:57 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.