×
Namespaces

Variants
Actions
Revision as of 08:34, 17 December 2008 by seppo_fn (Talk | contribs)

Showing date and time in Symbian Web Runtime

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s): Nokia 5800 XpressMusic
Compatibility
Platform(s): S60 5th Edition
Article
Keywords: Date, getFullYear, getMonth
Created: (28 Nov 2008)
Last edited: seppo_fn (17 Dec 2008)


Overview

This code snippet shows how to use method Date() to receive current system date and time.

To obtain access to date object use Date() method.

After receiving this object use getFullYear(), getMonth(), etc. methods to extract needed information.

Source file: clock.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src="Clock.js"/>
<title></title>
</head>
<body onload="init()">
<h3> Time </h3>
<!-- Later will use this div for displaying time -->
<div id="txt"></div>
<h3> Parameters </h3>
<!-- Form for choosing display type -->
<form id="dysplay_type" action="">
<div>
<input name="system_output" type="radio" onClick="setStandard( )"/>
System output
<input name="custom_output" type="radio" onClick="setCustom( )"/>
Custom output
</div>
</form>
<!-- Form for choosing display information for custom display type -->
<form id="params" action="">
<div>
<input name="Date" type="checkbox"/>Date
<input name="Weekday" type="checkbox"/>Weekday
<input name="Time" type="checkbox"/>Time
<input name="MSeconds" type="checkbox"/>MSeconds
</div>
</form>
</body>
</html>

Source file: clock.js

// Enum defines how to represent information
var timeShowType = { system : 0, custom : 1, other : 2 };
 
// Array containing weekday names
var weekDays = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");
 
// Current data representation type
var viewType;
 
var clockRefreshInterval = 207;
 
/**
* Setting default data on application load
*/

function init() {
// Setting information layout to custom
viewType = timeShowType.custom;
// Setting checkboxes marks
document.getElementById('dysplay_type').custom_output.checked = true;
document.getElementById('params').Date.checked = true;
document.getElementById('params').Time.checked = true;
 
// Create main menu items
var standardData = new MenuItem("System", 11);
var custom = new MenuItem("Custom", 12);
 
// Setting handlers for main menu items
standardData.onSelect = setStandard;
custom.onSelect = setCustom;
 
// Adding items to menu
menu.append(standardData);
menu.append(custom);
 
// Start displaying menu
menu.showSoftkeys();
 
// Start timer for time displaying
setInterval( 'startTime()', clockRefreshInterval );
startTime();
}
 
/**
* Set data display type to system
*/

function setStandard() {
document.getElementById('dysplay_type').system_output.checked = true;
document.getElementById('dysplay_type').custom_output.checked = false;
document.getElementById('params').style.display = "none";
viewType = timeShowType.system;
}
 
/**
* Set data display type to custom
*/

function setCustom() {
document.getElementById('dysplay_type').system_output.checked = false;
document.getElementById('dysplay_type').custom_output.checked = true;
document.getElementById('params').style.display = "block";
viewType = timeShowType.custom;
}
 
/**
* Function repeatedly called for updating current time info
*/

function startTime() {
// Get current date info
var today = new Date();
// Laying out data
if(viewType == timeShowType.system) {
// Default layout of data
document.getElementById('txt').innerHTML = Date();
} else if (viewType == timeShowType.custom) {
var result = "";
// Add date to result string
if( document.getElementById('params').Date.checked == true ) {
result += today.getFullYear() + "/" + today.getMonth() + "/" +
today.getDate() + " ";
}
// Add week day to result string
if(document.getElementById('params').Weekday.checked == true) {
result += weekDays[today.getDay()] + " ";
}
// Add time to result string
if(document.getElementById('params').Time.checked == true) {
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// Add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
result += h + ":" + m + ":" + s + ".";
}
// Add milliseconds to result string
if(document.getElementById('params').MSeconds.checked == true) {
result += today.getMilliseconds();
}
// receive element 'txt' in DOM and set its html text
document.getElementById('txt').innerHTML = result;
}
}
 
/**
* If time is represented by one digit, add '0' in front of it.
* @param i string to convert to two digits
* @return string representing number in two or more digits
*/

function checkTime(i) {
if(i < 10) {
i = "0" + i;
}
return i;
}


Postconditions

  • Upon loading shows custom layout of clock.
  • You can choose between default (system) and custom (custom) clock view by choosing needed radiobox.
  • You can choose what information you want to see in custom view by marking checkboxes.


Supplementary material

You can see source file and executable application in attached zip archive. Archive is available for download at Showing_date_and_time_in_WRT.zip

72 page views in the last 30 days.
×