×
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)
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Abstract. Tidy wiki text)
 
(15 intermediate revisions by 6 users not shown)
Line 1: Line 1:
__NOTOC__
+
[[Category:Symbian Web Runtime]][[Category:General Programming]][[Category:Base/System]][[Category:Code Examples]][[Category:JavaScript]]
__NOEDITSECTION__
+
{{Abstract|This code example shows how to receive the current system date and time using JavaScript's own methods.}}
{{CodeSnippet
+
 
|id= 
+
{{ArticleMetaData <!-- v1.2 -->
|platform=S60 5th Edition
+
|sourcecode= [[Media:Showing date and time in WRT.zip]]
|devices=Nokia 5800 XpressMusic
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|category=Web Runtime (WRT)
+
|devices= Nokia 5800 XpressMusic
|subcategory=Base/system
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|creationdate=November 28, 2008
+
|platform= S60 5th Edition
|keywords=Date, getFullYear, getMonth
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Date, Date.getFullYear(), Date.getMonth(), Date.getDate(), Date.getHours(), Date.getMinutes(), Date.getSeconds()
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20081210
 +
|author= [[User:MiGryz]]
 +
<!-- The following are not in current metadata -->
 +
|id= CS001229
 
}}
 
}}
  
 +
==Source==
  
==Overview==
+
Add the components where the time will be printed on the HTML page:
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.
+
 
+
After receiving this object use getFullYear(), getMonth(), etc. methods to
+
extract needed information.
+
 
+
==Source file: clock.html==
+
  
 
<code xml>
 
<code xml>
<?xml version="1.0" encoding="UTF-8"?>
+
<p id="standardTime"></p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+
<p id="customTime"></p>
                            "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>
+
 
+
 
</code>
 
</code>
  
==Source file: clock.js==
+
The following functions handle displaying the time:
  
 
<code javascript>
 
<code javascript>
 
// 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
+
  * Displays the time in both standard (received from the system) and custom
 +
* (manually built) formats.
 
  */
 
  */
function init() {
+
function displayTime() {
     // Setting information layout to custom
+
     // Get current date info
    viewType = timeShowType.custom;
+
     var today = new Date();
    // 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
+
     // Standard format
     standardData.onSelect = setStandard;
+
     document.getElementById("standardTime").innerHTML = today;
    custom.onSelect = setCustom;
+
  
     // Adding items to menu
+
     // Custom format
     menu.append(standardData);
+
     var y = today.getFullYear();
     menu.append(custom);
+
     var m = today.getMonth() + 1; // Starts from 0
 
+
    var d = today.getDate();
     // Start displaying menu
+
     var hh = today.getHours();
     menu.showSoftkeys();
+
    var mm = today.getMinutes();
 +
     var ss = today.getSeconds();
 
      
 
      
     // Start timer for time displaying
+
     // Add a zero in front of numbers < 10
     setInterval( 'startTime()', clockRefreshInterval );
+
     m = padTime(m);
     startTime();
+
    d = padTime(d);
}
+
     mm = padTime(mm);
 +
    ss = padTime(ss);
  
/**
+
     var result = y + "-" + m + "-" + d + " " +
* Set data display type to system
+
                weekDays[today.getDay()] + " " +
*/
+
                hh + ":" + mm + ":" + ss;
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;
+
}
+
  
/**
+
     document.getElementById("customTime").innerHTML = result;
* 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.
 
  * If time is represented by one digit, add '0' in front of it.
  * @param i string to convert to two digits
+
  * @param i the number to convert to two digits
  * @return string representing number in two or more digits
+
  * @return a string representing the number in two or more digits
 
  */
 
  */
function checkTime(i) {
+
function padTime(i) {
     if(i < 10) {
+
     if (i < 10) {
 
         i = "0" + i;
 
         i = "0" + i;
 
     }
 
     }
Line 179: Line 84:
 
</code>
 
</code>
  
 +
Also add the call to {{Icode|setInterval}} which in this case updates the time every 0.5 seconds.
 +
 +
<code javascript>
 +
setInterval("displayTime()", 500);
 +
displayTime();
 +
</code>
  
 
==Postconditions==
 
==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.
 
  
 +
Time is displayed on the HTML page in both standard (received from the system) and custom (manually built) formats.
  
 
==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]]
 
  
[[Category:Web Runtime (WRT)]][[Category:Code Examples]][[Category:PIM]][[Category:S60 5th Edition]]
+
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]].

Latest revision as of 09:31, 5 October 2012

This code example shows how to receive the current system date and time using JavaScript's own methods.

Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic
Compatibility
Platform(s): S60 5th Edition
Article
Keywords: Date, Date.getFullYear(), Date.getMonth(), Date.getDate(), Date.getHours(), Date.getMinutes(), Date.getSeconds()
Created: MiGryz (10 Dec 2008)
Last edited: hamishwillee (05 Oct 2012)

[edit] Source

Add the components where the time will be printed on the HTML page:

<p id="standardTime"></p>
<p id="customTime"></p>

The following functions handle displaying the time:

/**
* Displays the time in both standard (received from the system) and custom
* (manually built) formats.
*/

function displayTime() {
// Get current date info
var today = new Date();
 
// Standard format
document.getElementById("standardTime").innerHTML = today;
 
// Custom format
var y = today.getFullYear();
var m = today.getMonth() + 1; // Starts from 0
var d = today.getDate();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
 
// Add a zero in front of numbers < 10
m = padTime(m);
d = padTime(d);
mm = padTime(mm);
ss = padTime(ss);
 
var result = y + "-" + m + "-" + d + " " +
weekDays[today.getDay()] + " " +
hh + ":" + mm + ":" + ss;
 
document.getElementById("customTime").innerHTML = result;
}
 
/**
* If time is represented by one digit, add '0' in front of it.
* @param i the number to convert to two digits
* @return a string representing the number in two or more digits
*/

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

Also add the call to setInterval which in this case updates the time every 0.5 seconds.

setInterval("displayTime()", 500);
displayTime();

[edit] Postconditions

Time is displayed on the HTML page in both standard (received from the system) and custom (manually built) formats.

[edit] Supplementary material

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.

This page was last modified on 5 October 2012, at 09:31.
126 page views in the last 30 days.
×