×
Namespaces

Variants
Actions
(Difference between revisions)

Showing date and time in Symbian Web Runtime

From Nokia Developer Wiki
Jump to: navigation, search
seppo_fn (Talk | contribs)
copyeditor (Talk | contribs)
m (language check)
Line 15: Line 15:
 
This code snippet shows how to receive current system date and time using S60 Platform Services for Web Runtime, introduced in S60 5th Edition.
 
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 date object use <tt>Date()</tt> method.
+
To obtain access to the date object use the <tt>Date()</tt> method. After receiving this object, use getFullYear(), getMonth(), and so on, methods to extract the needed information.
 
+
After receiving this object use getFullYear(), getMonth(), etc. methods to
+
extract needed information.
+
  
 
==Source file: clock.html==
 
==Source file: clock.html==
Line 33: Line 30:
 
     <body onload="init()">
 
     <body onload="init()">
 
         <h3> Time </h3>
 
         <h3> Time </h3>
         <!-- Later will use this div for displaying time -->
+
         <!-- This div will be later used for displaying time -->
 
         <div id="txt"></div>
 
         <div id="txt"></div>
 
         <h3> Parameters </h3>
 
         <h3> Parameters </h3>
         <!-- Form for choosing display type -->
+
         <!-- Form for choosing the display type -->
 
         <form id="dysplay_type" action="">
 
         <form id="dysplay_type" action="">
 
         <div>
 
         <div>
Line 45: Line 42:
 
         </div>
 
         </div>
 
         </form>
 
         </form>
         <!-- Form for choosing display information for custom display type -->
+
         <!-- Form for choosing the display information for the custom display type -->
 
         <form id="params" action="">
 
         <form id="params" action="">
 
         <div>
 
         <div>
Line 63: Line 60:
 
<code javascript>
 
<code javascript>
  
// Enum defines how to represent information
+
// Enum defines how to represent the information
 
var timeShowType = { system : 0, custom : 1, other : 2 };
 
var timeShowType = { system : 0, custom : 1, other : 2 };
  
// Array containing weekday names
+
// Array containing the weekday names
 
  var weekDays = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
 
  var weekDays = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
 
     "Thursday", "Friday", "Saturday");
 
     "Thursday", "Friday", "Saturday");
Line 168: Line 165:
 
/**
 
/**
 
  * If time is represented by one digit, add '0' in front of it.
 
  * If time is represented by one digit, add '0' in front of it.
  * @param i string to convert to two digits
+
  * @param string to convert to two digits
 
  * @return string representing number in two or more digits
 
  * @return string representing number in two or more digits
 
  */
 
  */
Line 181: Line 178:
  
 
==Postconditions==
 
==Postconditions==
* Upon loading shows custom layout of clock.
+
* Shows custom layout of clock upon loading.
* You can choose between default (system) and custom (custom) clock view by choosing needed radiobox.
+
* 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.
 
* You can choose what information you want to see in custom view by marking checkboxes.
  
  
 
==Supplementary material==
 
==Supplementary material==
You can see source file and executable application in attached zip archive. Archive is available for download at [[Media:Showing_date_and_time_in_WRT.zip|Showing_date_and_time_in_WRT.zip]]
+
You can view the source file and executable application in the attached zip archive. The archive is available for download at [[Media:Showing_date_and_time_in_WRT.zip|Showing_date_and_time_in_WRT.zip]]
  
 
[[Category:Web Runtime (WRT)]][[Category:Code Examples]][[Category:PIM]][[Category:S60 5th Edition]]
 
[[Category:Web Runtime (WRT)]][[Category:Code Examples]][[Category:PIM]][[Category:S60 5th Edition]]

Revision as of 12:51, 17 December 2008


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: copyeditor (17 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

87 page views in the last 30 days.