1

At dotCMS Boot Camp 2011, I was invited to come and talk about mobile implementation techniques using dotCMS. Luckily, this isn’t as much as issue with trying to pull off clever dotCMS tricks as it is just knowing good mobile techniques. Below are a number of links and examples from my talk. This isn’t so much about a full blown tutorial, as much as it is just a quick reference for those that attended my session.  A more complete tutorial will come at a later date.

Mobile Detection Using the Clickstream

By accessing the user’s clickstream data, and pulling out the isMobile() flag, we can create a conditional environment to do redirects, apply different stylesheets, change layout, etc.

## GET CLICKSTREAM SO WE CAN CHECK OUT THE DEVICE
#set($clickstream  = $session.getAttribute('clickstream'))
## IS THIS A MOBILE DEVICE?
#if($clickstream.mobileDevice && $clickstream.mobileDevice == 'true')
  ## GET THE REDIRECT COOKIE
  #set($goToMobile = $cookietool.get('goToMobile').value)
  #if($goToMobile == 'true')
    ## SEND THE USER TO THE MOBILE SITE, THIS MUST BE DONE BEFORE
    ## ANY DATA IS SENT TO THE BROWSER
    #$response.sendRedirect('http://m.yoursite.com/')
  #else
    ## IF IT'S MOBILE, BUT THEY WANT THE NORMAL SITE, SEE IF IT
    ## SHOULD BE DISPLAYED LIKE MOBILE OR LIKE NORMAL
    #set($displayMobile = $cookietool.get('displayMobile').value)
  #end
#end

By setting a cookie at the same time as the check, you can prevent users from having to go through the selection each time if they prefer the normal site over the mobile site. You could set the cookie with some simple JavaScript.

Creating a Mobile Template

Creating a mobile template is no different from any other template. If you’re using a framework like jQuery Mobile, you can build all the necessary parts right into the template.

## Container: General Template Includes
#parseContainer('e97bda22-33e8-4b9d-9508-0aefb4c899d6')
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

  <title>$!{pageTitle}</title>

  <link rel="apple-touch-icon" href="/global/images/app-icon.png" />
  <link rel="apple-touch-startup-image"href="/global/images/app-splash.png" />
  <link rel="stylesheet"href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
  <link rel="stylesheet" href="/global/css/custom.css" />

  <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>

<body>
<div data-role="page">
  <div data-role="header">
    <h1>$!{pageTitle}</h1>
  </div><!-- /header -->

  <div data-role="content">
    ##Body Container 1
    #parseContainer('93cf710e-fbbb-4d32-a5fb-974dcac38c96')
  </div><!-- /content -->

  <div data-role="footer">
    <h4>Copyright &copy;2011</h4>
  </div><!-- /footer -->

</div><!-- /page -->
</body>
</html>

jQuery Mobile and the #navigation() Macro

If you want to use the #navigation() macro and take advantage of jQuery Mobile tooling, you just need to add a little extra JavaScript into the mix to ensure the list is picked up and styled correctly. A single line of JavaScript will get you rolling.

<div id="navList">
  #navigation(1 1)
</div>  <!-- ${esc.h}navList -->
<script>
 $('${esc.h}navList>ul').attr('data-role','listview');
</script>

By using the .attr() method, we can add in any of the data-roles or other attributes that can be used to control how the list navigation looks and behaves as a result of jQuery Mobile. (Note: as seen in the above example, when writing code inline on the page and referencing ID’s, I replace all #s with ${esc.h}. This is the Velocity tool for printing out a hash, and is good for preventing accidental collisions in normal velocity code.)

Building a News Page

In this example, I pull in a list of recent news headlines and spit them out readily formatted for my jQuery Mobile stylesheet (Note: My code uses 1.7 syntax. However the principle remains unchanged for 1.9.)

#set($lastArticleDate = '0')
#set($today = $date.format('MM/dd/yyyy HH:mm:ss',$date.getDate()))
## FILTER DOWN TO A SPECIFIC SET OF NEWS CATEGORIES
#set($newsCatList = $categories.getChildrenCategoriesByKey('sections'))
#set($newsCats = "+(")
#foreach($cat in $newsCatList)
  #set($newsCats = "${newsCats}c${cat.inode}c:on ")
#end
#set($newsCats = "${newsCats})")
#set($query = "+structureInode:5 ${newsCats} +date1:[1/1/2010 00:00:00 TO ${today}] +languageId:1* +deleted:false +live:true")
#pullContent("${query}" '10' "date1 desc")

<div class="info">
  The latest campus news from public relations.
</div>

<ul data-role="listview">
#foreach($article in $list)
  ## SET DATE FOR COMPARISON
  #set($thisArticleDate = $date.format('EEEE, MMMM d, yyyy',$article.NewsPublishDate))
  ## IF CURRENT DATE IS DIFFERENT THAN THE LAST ARTICLE, PRINT OUT A DATE DIVIDER
  #if($thisArticleDate != $lastArticleDate)
	<li data-role="list-divider">${thisArticleDate}</li>
  #end
	<li><a href="/news/detail.dot?id=${article.identifier}">${article.NewsHeadline}</a></li>
  #set($lastArticleDate = $date.format('EEEE, MMMM d, yyyy',$article.NewsPublishDate))
#end
</ul>

Links, Tools, and Resources

I mentioned several sites and tools when talking about mobile, here are many of them:

  • jQuery Mobile – A JavaScript framework that extends jQuery and helps add a number of mobile features to your site.
  • PhoneGap – Utility for compiling a web app into a wrapper so that you can deploy it as a native app for a number of mobile platforms.
  • Android SDK – Free SDK for Android that comes with a mobile phone simulator, useful for testing.
  • CSS Media Queries & Using Available Space – Guide to how to implement CSS media queries for changing CSS rules based on display conditions reported by the browser.
  • jQuery Mobile Google Maps Examples – Nice list of ways to build on jQuery Mobile with Google Maps (i.e. pulling content from a buildings structure to populate a map)

One Response to “dotCMS and Mobile Techniques: Notes from Boot Camp 2011”

  1. Han says:

    Thanks for posting this, Mike!

Leave a Reply