Documentation

TweetView: Android, Packaging, and Review

In the previous two posts, Getting Started with TweetView: Tweets and Mentions and TweetView: Creating the Settings View, we created the HTML, CSS, and JavaScript code required to power the TweetView mobile application. This tutorial will focus on implementing an Android theme, leveraging the Dojo build system to keep the application compact for production, and a basic review of the entire dojox/mobile-powered application.

• Difficulty: Intermediate
• Dojo Version: 1.7
• Series: TweetView

Tweet

Implementing the Android Theme

Throughout the course of creating the CSS that powers our application, we've assumed the iPhone theme, even though we're using deviceTheme within our page. That allowed us to speed up development and worry about Android theming once the application was fully functional. The time for catering our application to Android is now!

The only remaining task in catering our application for Android is implementing a small snippet of code that will detect the device type and modify a few custom image paths (our refresh icon and TabBar icons) so that the Android images display:

require(["dojox/mobile/parser", "dojox/mobile/TabBar", "tweetview/TweetView", "tweetview/SettingsView", "dojox/mobile/deviceTheme", "dojo/dom-attr", "dojo/_base/array", "dojox/mobile", "dojo/domReady!"], 
	function(mobileParser, TabBar, TweetView, SettingsView, dm, domAttr, baseArray) {
		
		// If Android....
		if(dm.currentTheme == "android") {
			var imagePath = "js/tweetview/resources/images/";
			// Update image path on bottom tabbar
			TweetView.prototype.iconLoading = imagePath + "androidLoading.gif";
			// Add a new "iconLoading" attribute to the TweetView instances
			domAttr.set(document.getElementById("tabBar"), "iconBase", imagePath + "iconStripAndroid.png");
		}
		// Parse the page!
		mobileParser.parse();
});

A similar if statement would be used to implement images for any alternate theme.

Now your application will load the Android imagery if the device is a mobile Android-based device!

Great! Our simple application handles images for both Android and iOS devices.

Remove Cache-Preventing Meta Tags

Remember the the META tags we added to prevent caching during development of the widget?

<!-- prevent cache -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

Remove those to allow the application to be cached on the device.

dojox/mobile and Builds

Creating a build for dojox/mobile applications is extremely important because we want our mobile applications to be a small as possible. Let's walk through the steps to create a compact build of our dojox/mobile application: TweetView.

dojox/mobile's Build Files

Typical build scripts are found within the Dojo Toolkit's util/build directory. dojox/mobile, however, features its own build scripts within the dojox/mobile/build directory. Use this special build script to optimally build your application.

Remember how we used a custom method, _ViewMixin.getElements, instead of dojo/query? There's no need to add dojo/query as a dependency if all we need is getElementByClassName element collection. This will save our application in build size.

dojox/mobile Build Options

A special build syntax is also laid out within the build.sh and build.bat files:

#!/bin/sh

if [ $# -eq 0 ]; then
  echo 'Usage: build separate|single [webkit]'
  echo '  separate  Create mobile.js that includes only dojox.mobile'
  echo '  single    Create a single dojo.js layer that includes dojox.mobile'
  echo '  webkit    Enable webkitMobile=true option (Loses PC browser support)'
  exit 1
fi

#optimize=shrinksafe
optimize=closure
profile=mobile
dir=release-mobile-separate
webkit=
#standalone=standaloneScrollable=true
if [ "$1" == "single" ]; then
  profile=mobile-all
fi
if [ "$1" == "single" ]; then
  dir=release-mobile-single
fi
shift 1
if [ "$1" == "webkit" ]; then
  webkit=webkitMobile=true
  shift 1
fi

cd ../../../util/buildscripts

./build.sh profile=$profile action=release optimize=$optimize layerOptimize=$optimize cssOptimize=comments releaseDir=../../$dir/ $webkit $standalone $*

cd ../../dojox/mobile/build

Before 1.7, the webkitMobile pragma was used to create webkit specific builds for mobile devices that were smaller. We can still use this flag, however in 1.7, a more advanced feature detection system has been implemented, and we now create browser and device specific builds by indicating a set of features that exist in the targeted browser.

We'll choose to use the separate designation. Unfortunately the build file has a few hardcoded values we don't want, so let's copy this and create a build-tweetview.sh file:

optimize=shrinksafe
profile=tweetview
dir=tweetview-release
webkit=
if [ "$2" == "webkit" ]; then
webkit=webkitMobile=true
fi

cd ../../../util/buildscripts

./build.sh profile=$profile action=release customDijitBase=true optimize=$optimize layerOptimize=$optimize cssOptimize=comments releaseDir=../../$dir/ $webkit

cd ../../dojox/mobile/build

We've updated the profile and dir settings to be more tweetview-centric.

TweetView Build Profile

Let's create a build profile for TweetView, based on the mobile-all.profile build file. We will add the necessary modules that we depend on in our application. Dojo 1.7 has transitioned to a feature detection based system, and we can leverage this system to make mobile specific builds that are much smaller by eliminating sections of code that are not needed in modern browsers. We do this by listing known browser features. The profile below includes the key features that are known to exist (and deficiencies that are known not to exist) in mobile browsers (that Dojo uses) that will minimize the size of our app:

dependencies = {
	stripConsole: "normal",
	staticHasFeatures: {
		"dom-addeventlistener": true,
		"dom-qsa": true,
		"json-stringify": true,
		"json-parse": true,
		"bug-for-in-skips-shadowed": false,
		"dom-matches-selector": true,
		"native-xhr": true,
		"array-extensible": true,
		"ie": false,
		"quirks": false
	},	
	layers: [
		{
			name: "dojo.js",
			customBase: true,
			dependencies: [
				"dojo._base.declare",
				"dojo._base.lang",
				"dojo._base.array",
				"dojo._base.window",
				"dojo._base.event",
				"dojo._base.connect",
				"dojo._base.html",
				"dijit._WidgetBase",
				"dijit._base.manager",
				"dojox.mobile.parser",
				"dojox.mobile"
			]
		},
		{
			name: "../dojox/mobile/compat.js",
			dependencies: [
				"dijit._base.sniff",
				"dojo._base.fx",
				"dojox.mobile.compat"
			]
		},
		{
			name: "../tweetview/tweetview-app.js",
			dependencies: [
				"tweetview.TweetView",
				"tweetview.SettingsView",
				"dojox.mobile.TabBar"
			]
		}
	],
	
	plugins: {
		"dojo/text":"build/plugins/text",
		"dojo/i18n":"build/plugins/i18n",
		"dojo/has":"build/plugins/has"
	},

	prefixes: [
		[ "dijit", "../dijit" ],
		[ "dojox", "../dojox" ],
		[ "tweetview", "../tweetview" ]
	]
};

We specifically indicated a set of assumed browser features, so this particular build won't run on older versions of IE. You can create an IE specific build, remove the assumed features (non-mobile specific build), or you might have different entry altogether for desktop users.

The mobile profile provided by the Dojo Toolkit includes the dojox/mobile/app classes that we don't need for our simple TweetView application, so I have removed them. I've added a tweetview.js designation for the build, which includes TweetView, SettingsView, and dojox/mobile/TabBar (a class which isn't included within dojox/mobile by default). The tweetview namespace is then added to the prefixes array.

Running the Build

Let's switch to the command line and build our widget based on the build profile above:

./build-tweetview.sh single webkit

After the build is completed, navigate to the js/tweetview-release/dojo/tweetview/ directory to view the result:

The resulting release folder and its contents pertaining to TweetView.

Implementing the Build

To implement our newly created build files, open app.html, update the path to Dojo, and create a new SCRIPT node to retrieve the minified TweetView application:

<script src="js/tweetview-release/dojo/dojo/dojo.js"></script>
<script src="js/tweetview-release/dojo/tweetview/tweetview-app.js"></script>

We could use require to pull in the tweetview application, but there are some mobile operating systems that do not allow synchronous XHR, which can break require, and so it's more reliable to source in the file directly in this one very specific case. The requires within our application will be fine, since we're using a build and loading all of our requirements in one file.

TweetView Review

TweetView is complete! Our simple mobile application has been templated (HTML), styled (CSS), coded (JavaScript), and built for production! Let's review what we learned in the process of create TweetView:

• The basic widgets included within dojox/mobile
• How to theme a dojox/mobile application to look like iOS and Android devices
• The format which to declaratively code dojox/mobile widgets with HTML and programmatically create widgets with JavaScript
• How to use dojo/io/script and dojo/DeferredList to retrieve JSON-formatted data from Twitter
• How to extend dojox/mobile base widgets
• Strategies behind following good JavaScript practices but also keeping code compact and minimized in dependencies
• The special build process needed for dojox/mobile applications

I'm hoping you ended this project with the same feelings about dojox/mobile that I have: dojox/mobile is an outstanding mobile application framework complete with themes and widgets to match mobile device controls. dojox/mobile is also easy to learn, extend, and dynamically populate with content. TweetView, a basic three-view application, was very easy to create, thanks to dojox/mobile!

dojox/mobile Will Only Get Better!

dojox/mobile is growing at a considerable rate due to the push by the Dojo team to provide the best mobile solutions. Look forward to more widgets, more code-efficient and processing-efficient widget controls, and more device-specific functionality. I encourage you to take the time to experiment with dojox/mobile and share your experiences with the rest of the Dojo community!

Click here to see the completed application in action!

Download The Source

The TweetView Series