×
Namespaces

Variants
Actions
Revision as of 13:38, 18 December 2008 by Forum Nokia KB (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: Forum Nokia KB (18 Dec 2008)


Overview

This code snippet shows how to receive current system date and time using S60 Platform Services for Web Runtime, introduced in S60 5th Edition.

To obtain access to the date object use the Date() method. After receiving this object, use getFullYear(), getMonth(), and so on, methods to extract the 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>
<!-- This div will be later used for displaying time -->
<div id="txt"></div>
<h3> Parameters </h3>
<!-- Form for choosing the 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 the display information for the 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 the information
var timeShowType = { system : 0, custom : 1, other : 2 };
 
// Array containing the 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 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

  • Shows custom layout of clock upon loading.
  • You can choose between default (system) and custom (custom) clock view by selecting the respective radiobox.
  • You can choose what information you want to see in custom view by marking checkboxes.


Supplementary material

You can view the source file and executable application in the attached zip archive. The archive is available for download at Showing_date_and_time_in_WRT.zip

141 page views in the last 30 days.
×