Introduction to TweetView

The first article in our series, Getting Started with, detailed the fundamental concepts and usage of the Dojo Toolkit's library. In the remaining posts in this series, we'll embark on creating our own fully functional web application called TweetView. This post will focus on familiarizing you with what TweetView is, what we want it to do, and we'll get started on building the mobile application's HTML and CSS layout.

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

What is TweetView?

TweetView is the name of the application we're going to create using and a few custom Dojo resources of our own. TweetView wont simply be a small exercise in using; TweetView will be a useful, fully-functioning web application. Our goals for TweetView are as follows:

  • Utilize's native widgets to create a cross-device compatible, elegant mobile application
  • Add our own custom elements, controls, and functionality to the web application
  • Connect to Twitter using JSONP to retrieve tweets from multiple accounts
  • Use Dojo's data store API to store tweets
  • Code with minimal dependencies and maximum speed in mind

Spending time planning and brainstorming before jumping into application creation is even more critical when creating mobile applications due to the restrictions on bandwidth.

As with creating any Dojo-based web application, a more general goal is to keep our code flexible, extendable, and well-commented.

TweetView Design

We'll be creating TweetView from the following mockups. Each mockup provides a glimpse into the features we'll be adding in subsequent posts:


Click on any of the images above to enlarge.

You'll note that these mockups show only the iOS theme. Our posts will focus on implementing the iOS theme. Android-themed images and element styles will be sized the same as the iOS resources. Since Android and iOS themes are provided by, we can create the Android resources once the application is complete.

Attacking the markup for all of these mockups is out of scope for this post; instead we'll focus on creating the overall HTML/CSS structure of the web application, most notably the top content display and the bottom control area.

TweetView HTML Structure

The first article provided a solid mobile web application template and the required theme stylesheet and SCRIPT tags from which to start from:

	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link href="" rel="stylesheet" />
		djConfig = {
			isDebug: true,
			baseUrl: './',
			modulePaths: {
				tweetview: 'js/tweetview'
			parseOnLoad: true
	<script type="text/javascript" src="//"></script>
	<script type="text/javascript">
		// Use the lightweight parser
		// Require Dojo mobile
		// Require the compat if the client isn't Webkit-based

	<!-- application will go here -->


With the basic app template in place, let's focus on putting together the three views (Tweets, Mentions, and Settings) as well as the bottom navigation bar for each. Let's start with the views:

<!-- tweets view -->
<div id="tweets" dojoType="" selected="true">
	<h1 dojoType="">
		<!-- the refresh button -->
		<div dojoType="" class="mblDomButton tweetviewRefresh" style="float:right;" icon="images/refresh.png"></div>
	<ul dojoType="">
		<li dojoType="">
		Tweet item here

<!-- mentions view -->
<div id="mentions" dojoType="">
	<h1 dojoType="">
		<!-- the refresh button -->
		<div dojoType="" class="mblDomButton tweetviewRefresh" style="float:right;" icon="images/refresh.png"></div>
	<ul dojoType="">
		<li dojoType="">
		Mention tweet item here

<!-- settings view -->
<div id="settings" dojoType="">
	<h1 dojoType="">Settings</h1>
	<h2 dojoType="">Show</h2>
	<ul dojoType="">
		<li dojoType="">
		Setting item here

Note that I've included a sample list for the content of each view. Final content creation for TweetView's panes will be covered in future posts.

Instead of using's base View class, I've chose to use the ScrollableView. ScrollableView will allow the header to be fixed to the top of the view, while the control bar can be fixed to the bottom. The content within the ScrollableView will scroll. I've also used the ToolBarButton widget for the refresh buttons. Note the mblDomButton CSS class is just one of many button styles available in The refresh buttons don't serve a function at this point -- we're simply putting them into place. Lastly, I've added a custom CSS class to the ToolBarButton instances called tweetviewRefresh. The contents of that CSS class are:

/* vertically center the image */
.tweetviewRefresh img	{

The refresh icon is now vertically centered within my heading button!

With the three views in place, we can focus on creating the bottom menu bar with a widget, containing three widgets:

<!-- the bottom tabbar -->
<ul dojoType="" iconBase="images/iconStrip.png" style="margin-top:-49px;">
	<!-- All iconPos values specify: top left width height -->
	<li dojoType="" iconPos1="0,0,29,30" iconPos2="29,0,29,30" selected="true" moveTo="tweets">Tweets</li>
	<li dojoType="" iconPos1="0,29,29,30" iconPos2="29,29,29,30" moveTo="mentions">Mentions</li>
	<li dojoType="" iconPos1="0,58,29,30" iconPos2="29,58,29,30" moveTo="settings">Settings</li>

The image sprite is separated into 29x30 divisions with the normal state image on top and the active state image below it. Tapping each control button shows its corresponding view. and are new in Dojo 1.6. has two types: tabBar and segementControl. You can view them side by side here. Also note the -49px margin-top added to the TabBar. That will keep the TabBar above the fold at all times.

Now that both pieces are in place, let's review a few pieces of each code snippet:

  • The ID attributes of each view correspond to the moveTo attributes of each TabBarButton widget
  • If we weren't using sprites for the normal state control image path and selected image path, the different image paths would be placed in the TabBarButton's icon1 and icon2 attributes. Since we're using a sprited image, the image path is added to the TabBar's iconBase attribute and each TabBarButton uses iconPos1 and iconPos2 attributes to provide the positions of the sprite.
  • The iconPos1 and iconPos2 format is: top, left, width, height
  • The usage of ScrollableView anchors the header and control bar to the top and bottom, respectively, of the app

It's also important to note we used three widgets that are not bundled into's base: TabBar, TabBarButton, and ScrollableView. Adding the following require statements to the page will provide us those resources:

// Use the lightweight parser
// Require Dojo mobile

// Get additional, non-standard widgets
dojo.require(""); // TabBarButton is included here

// Require the compat if the client isn't Webkit-based

These two additional resources are small in size so our application will stay small. These classes do not require additional stylesheets.

Our application layout is now complete! See the base layout for TweetView!

View Demo

TweetView Has Taken Shape!

Creating the basic layout of TweetView was simple: add a few ScrollingView widgets and the ToolBar. I'd like to point out that every piece of our TweetView application is currently included within headings, toolbars, buttons...they're all there to be quickly implemented!

Looking forward to the next post in our TweetView series, where we will create a new class which will display the Tweets and Mentions views!

Download The Source

Download Introduction to TweetView. The archive will work as soon as you unzip the file!

The TweetView Series