×
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.
114 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×