Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Web Development.

Minecraft has a day/night cycle that is twenty minutes long. Day lasts for ten minutes, then there is a ninety second dusk, followed by night for seven minutes, and then a ninety-second dawn before the next day. Unless you’re playing on Peaceful mode or in Creative mode, nighttime can be a pretty dangerous time. For this reason, it’s very important to know what time it is – especially if you can’t see the sky.

Our app is a clock, but not one set to our 24-hour day. It’s set to Minecraft’s 20-minute day instead. It’ll tell us what time it is in the world, whether or not it is day or not, and correspondingly, whether or not it is safe to be out and about. Even better, we can’t lose it when we die in-game.

Note: This application assumes that you will be building on your own IDE, not through PhoneGap Build. Minor changes would need to be made in order to make it work correctly with PhoneGap Build.

Here are some screenshots from the app:



Windows Phone 7.5 (Mango)

Following Along

In this blog, we’ll be referencing portions of the code that are available on Github at You might want to browse the code along with this post as we cover some of the methods used to create the app and keep a single codebase. The app is under an MIT license, so feel free to play with it and even build on it for your own apps.

Using Multiple Index Files

If you recall from an earlier tip, we used multiple index files to handle the fact that each platform requires (at minimum) its own cordova.js file. If you take a look at, you should notice three index files. The main index.html file is for iOS (since this is where I develop first), and the remainder indicate their platform. They all look virtually identical except for the script line:

There’s one other really important detail: we have a rootView DIV element defined in each file as well – this is the only piece of content in the file. (One could create this dynamically if preferred.) The only purpose for this DIV is to serve as a container for all the content that we’ll have to load in dynamically.

Digging Deeper: Our Scripts

With the index files out of the way, let’s look out our scripts directory ( You can see the three Cordova libraries that are specific to each platform. The other two scripts are our own. The app.js script deals with bootstrapping our application, while framework.js provides some utility functions for us.


This script ( is intended to serve as a utility library. We define various functions for handling XHR (XMLHttpRequest) and also deal with orientation, form-factor, and the platform.

Some high-level items to note:

  • addEventListenerTo()
    • Remember back in Tip #1 when we indicated that Windows Phone 7 didn’t support touch events? This function will take the incoming event and check to see if we’re on WP7. If we are, we’ll use the equivalent mouse event. At the end of the method, we’ll use the regular addEventListener() to add the event handler.
  • updateOrientation()
    • Next, we have a method that handles the orientation of the device. This is obtainable from window.orientation, but we use this to convert it to “portrait” or “landscape”. Once the orientation is determined, we add three classes to the BODY tag: the platform, the form-factor, and the orientation. This enables us to target the platform and form-factor (and the orientation) using CSS.
  • load(
    • Our next method is our XHR convenience method. We can pass it the name of a local file and it will call an onSuccess() method with the results. If it fails, it will call onFailure(). Note that near the end of the method we deal with WP7’s special handling where the local files need to be referenced absolutely.
  • init()
    • In init(), we detect the platform using device.platform just like we did in Tip #1. We will also detect the various values returned for the iOS platform and coalesce them to “ios”. Then we detect the form-factor and calculate the orientation by calling updateOrientation() so that the classes on our BODY tag are present before the app starts. We also subscribe to the orientationChange event so that we can update the orientation as required.


Next up is the code that bootstraps our app ( There’s not a lot in here – the main work is to load the rest of our content.

If you look at the start() method, you’ll notice that we load mainView.html first, and if the result is successful, we add the result to the DOM. Then we also load mainView.js. If it is successful, we create a new script element and add it to the DOM. This is critically important. If you added the script via innerHTML, the script itself will exist in the DOM, but it will not execute.

The other reason I’m pointing out how we are loading our code is that WP7 is painfully nuts about how it handles XHR. It doesn’t like synchronous XHR and it doesn’t like more than one XHR going on at once. This is why we chain the two loads – we only attempt the second if the first is finished. Neither iOS nor Android care about this – we can load them independently, but WP7 does. It’s not so hard to do the chaining ourselves in this app, but for larger apps where you might be loading a lot of content, I highly suggest implementing a queue system for WP7.

The rest of the script is largely boilerplate. The only other interesting facet is how we deal with debugging on a desktop environment – I want the app to run, so I set a two-second delay that calls onDeviceReady(). This ensures it is called whether PhoneGap is around or not. Note: Of course, the PhoneGap API itself is also not available in this situation, but debugging the regular web things like CSS, HTML, and JS are simply easier in a desktop browser.

What the User Sees

If you look in the views directory ( you’ll see two files named mainView.html and mainView.js. The first is the HTML representation of our view while the second is the script that makes it work.

Remember, mainView.html is loaded by app.js when our application starts, and as such, the contents will be added to the DOM under the rootView element. There’s nothing fancy here – just a lot of DIVs, a SPAN, and a few BUTTONs. Something important to note, however, is that each one has a unique ID. I like to use the format viewName_elementName so that I can be assured no other view will have an ID that collides with one in the current view.

mainView.js ( is the main driver – it handles events from our Start/Reset buttons and deals with animating the various elements, like the Sun and Moon.

Some interesting methods here are:

    • init()
      • I like to give all my views an init() method to set everything up. In this case, we go through and grab all the various elements and store them in convenient properties. We also attach all the events to the buttons.
    • startTime()
      • Here we record the time that we were told to start the timer and create our animation timers.
    • resetTime()
      • Upon a request to reset, we’ll stop the animation timers and reset everything.
    • updateTime()
      • We use the current time from the Date object and do a bit of math on it to figure out the time in the Minecraft world.
    • updateClock()

This method updates the clock display on the screen. Its duty is to take the in-game time and convert it to something approaching our 24-hour time. That way 08:00 corresponds to morning, 12:00 is noon, etc. The math is a bit painful, but work through it – it’ll make sense.

  • updateDisplay()
    • This method is responsible for the animation of all the various elements. It will calculate the color for the sky and ground (based on the time), and it will also compute the position of the sun or moon in the sky. Again, I’ll challenge you to work through the math on your own.

Styling it up

All the hard work is done – all that’s left is to style our elements so that we have a nice look and feel – and alter the navigation bar and buttons to look like they should on whatever platform we’re on. You can take a look at the styles by looking at base.css ( Technically we could have split this into several files – one for each platform, but for this example, it was easiest to keep it one file.

I won’t go through the styling itself – but I do want you to notice how we change our styles based on the platform – just like we did in the second tip. Sprinkled throughout the code are lines like these:

Since I usually style my app for iOS first, that’s typically the base style. I then override the styles as appropriate for the other platforms. There are also lines that handle orientation:

If you remember our updateOrientation() method in framework.js, you should be able to see how this works.

Almost There…

Our app is nearly complete. There’s just a couple of things you need to do for iOS:

  • In XCode, navigate to the Cordova.plist file and change the following:
    • Set UIWebViewBounce to NO
    • Set ShowSplashScreenSpinner to NO


Whew! Even a simple app takes a lot of work to build, but hopefully you can use the various techniques employed here to build larger and more complicated apps that target multiple platforms with the same codebase and also update their look and feel based upon the platform.

Safari Books Online has the content you need

Check out these Phonegap books available from Safari Books Online:

20 Recipes for Programming PhoneGap explores many common features of mobile development and how they are accomplished with PhoneGap. This will include GPS location, maps, media, accelerometer, and much more. PhoneGap is a library that allows developers to interface directly with a mobile device through the use of its Javascript libraries. With the multitude of mobile platforms it is very difficult and expensive to create multiple applications in Java, Objective-C, or other native languages. Through the PhoneGap library, most web developers can convert their existing knowledge of HTML, CSS, and Javascript into mobile phone applications with very little effort.
PhoneGap Beginner’s Guide shows you how to use the PhoneGap mobile development framework to target multiple mobile platforms: iOS, Android, BlackBerry, and more with a single application. With PhoneGap, you can use existing web development skills, instead of learning a new environment for every platform on the market.
Using HTML, CSS, and Javascript, PhoneGap allows you to jump into the mobile world and develop apps for iPhone, Android, and the BlackBerry, and Beginning PhoneGap will help show you how to best take advantage of PhoneGap.
Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5 is a definitive, one-of-a-kind book that teaches the fundamentals and strategies behind cross-platform mobile application development. Instead of learning languages like Objective-C, focus on building apps from day one for Android, iOS, Blackberry, WebOS and Symbian—without the complexities of these platforms.
Head First Mobile Web shows how to use the web tech- nology you’re already familiar with to make sites and apps that work on any device of any size. Put your JavaScript, CSS media query, and HTML5 skills to work, and then optimize your site to perform its best in the demanding mobile market.
Build Mobile Websites and Apps for Smart Devices provides practical, up to date information on all aspects of Mobile Web Development, using an easy to follow, tutorial style, with step-by-step instructions and clear examples.

About this author

Kerri Shotts has been programming since she learned BASIC on her Commodore 64. She earned her degree in Computer Science and has worked as a Test Engineer and Database Administrator. Now a Technology Consultant, she helps her clients with custom websites, apps (desktop and mobile), and more. When not at the computer, she enjoys photography and taking care of her aquariums.

Tags: android, CSS, html, iOS, Javascript, PhoneGap, windows phone 7,

Comments are closed.