This week’s tutorial was requested by a user on our support site (http://mobilenationhq.zendesk.com). It shows how you can use MobileNation’s javascript widget to create a simple countdown timer that decrements from 100 to 0. We make use of the following components:

• Label
• Button
• Timer
• Javascript

Essentially, we create a custom javascript that declares a global variable, window.theCount. When the following javascript is executed, we update our label’s text to reflect this variable’s current value.

The code is as follows:


{
"decrementCount": function() {
if (window.theCount == null) window.theCount = 100;

if (window.theCount >= 0) {
MN.find('Default View/label').text = window.theCount;
window.theCount--;
}
}
}


Now to make this countdown occur every second, we execute this the decrementCount javascript function by wiring it to a timer widget’s Interval reached action. You could just wire it to a button to make the number decrement every time someone clicks on a button, for instance, but we want to make this happen every second.

Finally, we create a button to start the timer. We wire from the button’s touch down action to the timer’s “start timer” responder.

Got a problem you can’t solve? We make a weekly youtube tutorial for the best questions. Drop us a line at http://mobilenationhq.zendesk.com

HTML5 has powerful features for making data persistent in web applications.
In this week’s video tutorial, we show you how to use the MobileNation component API and javascript widget to tie your form field values into HTML5′s local storage functionality, which enables you to save data over successive runs of your application.

We construct the following block of code in this video to save values from text fields, and restore them when your app starts:


{
"saveValues": function(name, age) {
window.localStorage.setItem('name', name);
window.localStorage.setItem('age', age);
},
"restoreValues": function() {
if (window.localStorage.getItem('name') != null) {
MN.find('Default View/name').text = window.localStorage.getItem('name');
MN.find('Default View/age').text = window.localStorage.getItem('age');
}
}
}


You’ll want to wire your saveValues function to your button’s touch down event, wiring in Default View>name>text as the name argument, and Default View>age>text as the age argument.

To restore values, wire Default View’s Loaded event to execute restoreValues.