Forum Nokia Wiki - Recent changes [en]

JavaScript Performance Best Practices

Isalento — Wed, 25 Nov 2009 11:27:23 GMT

1 JavaScript Performance Best Practices

JavaScript Performance Best Practices

Overview

Source: Efficient JavaScript - ECMAScript

First understand the big picture and the major component of the stack affecting the performance. It is of utmost importance to understand what can and can not be optimized in JavaScript without touching the browser codebase. A good starting point for this study is to first take a look at the JavaScript Performance Stack (depicted in the figure).

Pick your battles. It is generally a good approach to first optimize those parts which give you the biggest improvements.

There are many interrelated components that play an instrumental role in the real-life web application performance such as those responsible for layouting, rendering, parsing HTML, marshaling, DOM, CSS formatting, JavaScript -- as you see, JavaScript is only one part of the performance equation.

The most expensive operations tend to be reflowing the layout and repainting. Although you as a JavaScript developer can not optimize browser layout or painting algorithms you can still implicitly affect the performance of these expensive operations by trying to avoid triggering there expensive operations unnecessarily. A real-life example of IE8 tells us that layout and rendering tasks takes most time on IE8 (see webcast at -20:00 mins)

Below are some examples of common reasons for slow JavaScript performance that you as a JavaScript developer can easily fix and make your web application to perform better instantly:

DOM access	Interaction with the DOM is usually slower than normal JavaScript code. Interaction with the DOM is usually inevitable, but try to minimize it. For instance, dynamically creating HTML with strings and setting the innerHTML is usually faster than creating HTML with DOM methods.
eval	Whenever possible, avoid the eval method because significant overhead is involved in script evaluation.
with	Using with statements creates additional scope objects that slow variable access and create ambiguities.
for-in loops	Traverse arrays use the traditional `for (var i=0; i<array.length; i++)` instead of for-in loops. Unfortunately, most JavaScript environments have a slow implementation of for-in loops.

Core JavaScript pitfalls

Avoid using eval or the Function constructor

Using eval or Function constructor are expensive operations as each time they are called script engine must convert source code to executable code.
Additionally, using eval the context of the string has to be interpreted at runtime.

Slow:

function addMethod(object, property, code) {
    object[property] = new Function(code);
}
addMethod(myObj, 'methodName', 'this.localVar=foo');

Faster:

function addMethod(object, property, func) {
    object[property] = func;
}
addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; });

Avoid using with

Although seen as a convenience, with construct introduces an extra scope to search each time variable is referenced and the contents of that scope is not known at compile time.

Slow:

with (test.object) {
    foo = 'Value of foo property of object';
    bar = 'Value of bar property of object';
}

Faster:

var myObj = test.object;
myObj.foo = 'Value of foo property of object';
myObj.bar = 'Value of bar property of object';

Don't use try-catch-finally inside performance-critical functions

The try-catch-finally construct creates a new variable in the current scope at runtime each time the catch clause is executed where the caught exception object is asigned to a variable.
Exception handling should be done at as high level in the script where it does not occur frequently, for example outside a loop.
Or if possible, avoid try-catch-finally completely

Slow: 
var object = ['foo', 'bar'], i;
for (i = 0; i < object.length; i++) {
   try {
      // do something that throws an exception
   } catch (e) {
      // handle exception
   }
}

Faster:

var object = ['foo', 'bar'], i;
try {
    for (i = 0; i < object.length; i++) {
        // do something
    }
} catch (e) {
    // handle exception
}

Avoid using global variables

If you reference global variables from within function or another scope, scripting engine has to look through the scope to find them.
Variable in the global scope persist though the life time of the script, whereas in local scope they are destroyed when the local scope is lost.

Slow:

var i, str = '';
function globalScope() {
    for (i=0; i < 100; i++) {
        str += i; // here we reference i and str in global scope which is slow
    }
}
globalScope();
<code>
 
Faster: 
<code javascript>
function localScope() {
    var i, str = '';
    for (i=0; i < 100; i++) {
        str += i; // i and str in local scope which is faster
    }
}
localScope();

Avoid for-in in performance-critical functions

The for-in loop requires the script engine to build a list of all the enumerable properties and check for duplicates prior the start.
If your code inside for loop does not modify the array it iterates pre-compute the length of the array into a variable len inside for loop scope.

Slow:

var sum = 0;
for (var i in arr) {
   sum += arr[i];
}

Faster:

var sum = 0;
for (var i = 0, len = arr.length; i < len; i++) {
   sum += arr[i];
}

Use strings accumulator-style

Using + operator a new string is created in memory and the concatenated value is assigned to it. Only after this the result is assigned to a variable.
To avoid the intermediate variable for concatenation result, you can directly assign the result using += operator.

Slow: a += 'x' + 'y';

Faster: a += 'x'; a += 'y';

Primitive operations can be faster than function calls

Consider using alternative primitive operation over function calls in performance critical loops and functions.

Slow:

var min = Math.min(a, b);
arr.push(val);

Faster:

var min = a < b ? a : b;
arr[arr.length] = val;

Pass functions, not strings, to setTimeout() and setInterval()

If you pass a string into setTimeout() or setInterval() the string will be evaluated the same way as with eval which is slow.
Wrap your code into an anonymous function instead so that it can be interpreted and optimized during compilation.

Slow:

setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000);

Faster:

setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);

Store local references to out-of-scope variables

When a function is executed an execution context is created and an activation object containing all local variables is pushed to the front of the context's scope chain.
Further in the chain, the slower the identifier resolution is, which means local variables are fastest.
By storing local references to frequently used out-of-scope variables reading and writing to variables is significantly faster. This is visible especially with global variables and other deep searches for identifier resolution.
Also in-scope variables (var myVar) are faster than object property access (this.myVar).

Slow:

function doSomething(text) {
    var divs = document.getElementsByTagName('div');
    for (var i = 0, l = divs.length; i < l; i++) {
        divs[i].innerHTML = text[i];
    }
}

Faster:

function doSomethingFaster(text) {
    var doc = document;
    var get = document.getElementsByTagName('div');
    for (var i = 0, l = divs.length; i < l; i++) {
        divs[i].innerHTML = text[i];
    }
}

If you need to access an element (e.g. the head) inside a big loop using a localized DOM access ( get in the example) is faster.

Faster:

function doSomethingElseFaster() {
    var get = document.getElementsByTagName;
    for (var i = 0, i < 100000; i++) {
       get('head');
    }
}

Sources: Variable Performance, slides High Performance Kick Ass Web Apps Video at JSCONF 2009

Tips for better loading performance

Load scripts without blocking for faster startup and to show a splash screen

When <script> tags are found in the HTML document the referenced script resources are downloaded and executed before the rendering engine can continue to download other resources which effectively blocks the rendering of the page below the tag. To avoid this blocking behaviour a script tag can be created via a mechanism known as a dynamic script tag injection.
This mechanism allows the rendering engine to immediately render and display the initial view (aka the splash screen) defined in HTML while the JavaScript resources are still being loaded and executed which leads to better user experience.

Slow:

<div id="splash"/>
<script src="my-script-file.js" type="text/javascript"></script>

Faster:

<div id="splash"/>
<code>
 
<code javascript>
// JavaScript
function loadScript(src, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script'),
    done = false;
    script.setAttribute('src', src);
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('charset', 'utf-8');
    script.onload = script.onreadstatechange = function() {
        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
            done = true;
            script.onload = script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
    }
    head.insertBefore(script, head.firstChild);
}
 
// load the my-script-file.js and display an alert dialog once the script has been loaded
loadScript('my-script-file.js', function() { alert('my-script-file.js loaded.'); });

Sources:

Add an Expires or a Cache-Control HTTP header

Using Apache the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses can be configures in .htaccess. The syntax is as follows:

ExpiresDefault "<base> [plus] {<num> <type>}*" ExpiresByType type/encoding "<base> [plus] {<num> <type>}*"

Example: ExpiresActive On ExpiresByType image/png "access plus 1 year"

Source: Apache mod_expires

Gzip JavaScript and CSS resources

Below is a simple configuration to gzip not only JavaScript and CSS but also HTML, XML and JSON. To accomplish this, the following must be set in the Apache .htaccess:

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

Source:

Apache mod_deflate

Use YUI Compressor or JSMin to compress the code

The Best: YUI Compressor provides the best overall performance when you consider it as: Total_Speed = Time_to_Download + Time_to_Evaluate. Depends on Rhino and is not applicable for real-time compression.
Simple: JSMin has implementations in nearly all the languages and is applicable for real-time compression. After gzipping the size comes very close to that of YUI Compressor.
JSMin or YUI Compressor + gzipping is better performer than Dean Edwards' Packer + gzipping. Although Packer provides the smallest (byte-size) code it will evaluate much slower as the scripts are unpacked on the client-side using one pass of a RegExp? which introduces an overhead especially significant on slow mobile devices.

Sources

Minimize the number and size of resources

Concatenate multiple script into one. However, consider that some mobile browsers have limits in how big resources they keep in cache.
Always aim for the smallest code size prior to minification and re-factor to increase re-usable code, consider all resources: HTML, JavaScript, CSS, images, JSON loaded using XHR.
Minimize the number of resources per host to enable more efficient parallel loading of resources
Serve your content from different hosts to overcode HTTP/1.1 limitation of parallel loading of two resources per host.

Load scripts without blocking parallel downloads

Multiple scripts can be loaded in parallel without blocking using techniques such as via normal script src, XHR eval, XHR injection, script in iframe, script DOM element, script defer and document.write script tag.
Depending on your specific constraints (resources in the same/different domain, need to preserve script loading order, need to show browser loading indicator) you can do an informed decision by checking the decision tree in the following presentation (slide 26).

Even Faster Websites - Steve Souders at SXSW ‘09

Couple asynchronous scripts

If you have inline script which depend on the script you have multiple options: hardcoded callback, window.onload, timer, degrading script tags and script onload.
See slide 35 onwards for details:

Even Faster Websites- Steve Souders at SXSW ‘09

Move inline scripts above stylesheets

Browsers download stylesheets in parallel with other resources that follow unless the stylesheet is followed by an inline script.
Workaround is to either avoid inline scripts or move them above stylesheets or below other resources (e.g. images, scripts) and use <link>, not @import.
Live demo

Use iframes sparingly

Parent's onload doesn't fire until iframe and all its components are downloaded.
Workaround for Safari and Chrome is to set iframe src in JavaScript.
Scripts and stylesheets also block iframe from loading.
- In IE and FF stylesheets in the parent block the iframe or its resources
iframe shares connection pool with parent, typically 2 connections per host.

Document Object Model (DOM) obscurities

Source: Efficient JavaScript - DOM

Slow DOM performance can be traced back into the following three main causes:

Extensive DOM manipulation	Extensive use of DOM API is a well-known cause of slowness.
Script triggers too many reflows or repaints	As a consequence of DOM manipulation, reflowing the layout and repainting are very expensive.
Slow approach to locating nodes in the DOM	Locating a desired node(s) in the DOM is potential bottleneck if the DOM is sizable and/or complex.

Minimize the size of the DOM

The size of DOM slows down all the operation related to it such as reflowing, traversal and DOM manipulation.
The most effective way to make programs faster is to make n smaller means that the DOM should be as small as possible at all times.
Minimize n, you can track the number of elements in a page by:
- var n = document.getElementsByTagName('*').length;
- var n = $('*').length;

Use document fragment templates for re-usability

Dynamically inserting and updating elements into the DOM is expensive. An efficient way to tackle this is to use HTML templates which can be cloned and re-used for re-usable parts of the DOM such as dialogs and other UI widgets.
In practice the approach is to modify, clone and append all nodes in JavaScript without touching the live DOM and append the completed document fragment to the DOM at once. One can do this with DOM API or alternatively construct a string representation of the HTML fragment to append based on a string template and push that into the DOM with a one innerHTML assignment. On both cases the rendering engine does not have to reflow and repaint the layout multiple times. Next we introduce some techniques to achieve this behavior.

Minimize the number of reflows and repaints

Repaint

Repainting happens when something is made visible or hidden without altering the layout of the document. For example if an outline is added to an element, its background color is changed of its visiblity is changed. Repainting is an expensive operation (paint events demo).

Reflow

Reflow happens whenever the DOM is manipulated in a way it affects the layout. For example, style is changed to affect the layout, className property is changed or browser window size is changed. Once an element needs to be reflown, its children wil also be reflown and any elements appearing after the element in the DOM. Finally, everything is repainted. Reflows are even more expensive operations, than repainting. In many cases reflowing is comparable to layout out the entire page again (reflow demo videos).

Operation that trigger reflows should be used sparsely.
Reflowing a table element is more expensive that reflowing equivalent element with block display.
Elements that are positioned absolutely or fixed do not affect the main document layout, so their reflowing is cheaper as they do not trigger main document reflowing. This is recommended approach for element that need to be animated.
DOM modifications trigger reflow. This means that operations such as adding new elements, changing the value of text nodes or adding element attributes and their properties cause reflow.
Good strategies to overcome this limitation are elaborated next.

Further reading
- Repaint and reflow at Opera Developer Network
- Notes on HTML Reflow - more detailed information on the reflow process
- Reflows & Repaints: CSS Performance making your JavaScript slow
- Go With The Reflow
Tools
- XUL Profiler
- Mac OS X Quartz Debug (in developer tools part of every OS X) Autoflush drawing setting illustrates how the page is reflown in step-by-step detail. (more)

Use createDocumentFragment()

Make multiple changes in a DOMDocumentFragment and add the fragment into the DOM in a single operation. This triggers only one reflow.

Slow:

var list = ['foo', 'bar', 'baz'];
var elem, contents;
for (var i = 0; i < list.length; i++) {
    elem = document.createElement('div');
    content = document.createTextNode(list[i]);
    elem.appendChild(content);
    document.body.appendChild(elem);
}

Faster:

var fragment = document.createDocumentFragment();
var list = ['foo', 'bar', 'baz'];
var elem, contents;
for (var i = 0; i < list.length; i++) {
    elem = document.createElement('div');
    content = document.createTextNode(list[i]);
    fragment.appendChild(content);
}
document.body.appendChild(fragment);

Use cloneNode()

If you're not working on elements that do not contain form elements or event handlers, you can clone the element to modify and swap it in place after all the changes have been done resulting in a one reflow only.
A faster alternative to above slow approach is presented below.

Faster:

var orig = document.getElementById('container');
var clone = orig.cloneNode(true);
var list = ['foo', 'bar', 'baz'];
clone.setAttribute('width', '50%');
var elem, contents;
for  (var i = 0; i < list.length; i++) {
    elem = document.createElement('div');
    content = document.createTextNode(list[i]);
    elem.appendChild(content);
    clone.appendChild(elem);
}
original.parentNode.replaceChild(clone, original);

Use HTML templates and innerHTML

One way to implement a templating system is to populate template content based on a light-weight JavaScript object acting as a date model. The data model may be persisted as JSON serialization into e.g. setPreferenceForKey() store in S60 WRT, in a HTTP cookie or XHR'd to the server-side.

<nowiki>
var model = { title: 'My Test Page'; };
var template = [];
template.push('<h1>' + model.title + '<h1>');
template.push('<div>Another Test Element<div>');
document.getElementById(containerId).innerHTML = template.join(''); 
// alternatively you can use concat() -- see string concatenation test results
</nowiki>

Modify an invisible element

If the display property of an element is set to none it will not be repainted.
By setting display to none, do the modifications and then set it to block causes only two reflows

Slow:

var subElem = document.createElement('div');
var elem = document.getElementById('animated');
elem.appendChild(subElem);
elem.style.width = '320px';

Faster:

var subElem = document.createElement('div');
var elem = document.getElementById('animated');
elem.style.display = 'none';
elem.appendChild(subElem);
elem.style.width = '320px';
elem.style.display = 'block';

Minimize the use of operations determining the dimensions or location of elements

Determining dimensions or location of elements via getComputedStyle, offsetWidth, scrollWidth and clientWidth properties will force reflow.
If you take the measurements repeatedly, consider taking them only once.
This issue is the main cause of slowness in WebKit according to Dave Hyatt

Slow:

var elem = document.getElementById('animated');
elem.style.fontSize = (elem.offsetWidth / 10) + 'px';
elem.firstChild.style.marginleft = (elem.offsetWidth / 20) + 'px';

Faster:

var elem = document.getElementById('animated');
var elemWidth = elem.offsetWidth;
elem.style.fontSize = (elemWidth / 10) + 'px';
elem.firstChild.style.marginleft = (elemWidth / 20) + 'px';

Make multiple predefined style changes at once using className

As with DOM manipulation, several style changes can be done at the same time.
Instead if you set the styles one by one, multiple reflows and repaints can be triggered.

Slow:

var elem = document.getElementById('styled');
elem.style.background = 'blue';
elem.style.color = 'white';
 
Faster: 
<code html4strict>
<style type="text/css">
div { background: white; color: black; }
div.active { background: blue; color: white; }
</style>
...

var elem = document.getElementById('styled').className = 'active';

Make multiple dynamic style changes at once using setAttribute

For dynamic animation, using predefined styles does not work. In this case setAttribute object can be used (for IE, use style.cssText property)

Faster:

var elem = document.getElementById('styled');
elemStyle = 'background: blue; color: white;';
elem.setAttribute('style', elemStyle);

CSS class name vs. style property changing

Changing the class name of an element is a nice way to use JavaScript to dynamically change elements. Performance varies from browser to browser, but generally it is faster to change an element's visual appearance directly via the Javascript style attribute, rather than to change a class name on that element.

Slow: div.active { border: 1px solid red; }

Faster (for a one element):

var container = document.getElementById('container');
container.style.border = '1px solid red';

The above method appears to be more efficient when changing a specific number of items. Sometimes a single class name change is effective however. If you need to change all elements under a given container for example, it is more efficient to change the class name of a parent container which holds the affected elements and let CSS do what it does best.

Faster (if multiple child elements of a container need to be changed): // by changing the class name of the container, all of its child div elements will be updated #container.active div { border: 1px solid red; }

Depending on the specific case at hand you should use the method which gives you the best performance (without sacrificing too much of the separation of concerns benefits of externally defined CSS).

Source:

A Snapshot of The Yahoo! Photos Beta - Web Development Perspective

Avoid traversing large number of nodes

Always try to use inbuild methods and collections of the DOM to narrow down the search to smallest number of nodes possible.
Try to avoid manually recursively stepping through the DOM as much as possible.

Slow:

var elements = document.getElementsByTagName('*'); // searches every element, slow
for (i = 0; i < elements.length; i++) {
    if (element[i].hasAttribute('selected')) { // continues even through element was found
        ...
    }
}

Faster:

var elements = document.getElementById('parent').childNodes; // we know the element is a child of parent
for (i = 0; i < elements.length; i++) {
    if (element[i].nodeType == 1 && element[i].hasAttribute('selected') { // first test for valid node type
        ...
        break; // break out of the loop if we found what we were looking for
    }
}

Avoid modifications while traversing

childNodes and NodeList returned by getElementsByTagName() are live. This means that these collections may change without waiting for the execution to finish first.
If new elements are added to the collections while they are traversed, an infinite loop may occur.
If new elements are added even outside of collection itself, the collection must look for potential new entries. Due to this it cannot remember its last position or length which need to be recalculated.

Slow:

var elems = document.getElementsByTagName('div');
for (var i = 0; i < elems.length; i++) {
    elems[i].appendChild(document.createTextNode(i));
}

Faster:

var elems = document.getElementsByTagName('div');
var temp = [];
for (var i = 0; i < elems.length; i++) {
    temp[i] = elems[i]; // first a build static list of elements to modify
}
for (var i = 0; i < temp.length; i++) {
    temp[i].appendChild(document.createTextNode(i)); // perform modifications on static list instead of live NodeList
}
temp = null;

Cache DOM values into variables

Cache frequently accessed DOM values into variables.

Slow:

document.getElementById('elem').propertyOne = 'value of first property';
document.getElementById('elem').propertyTwo = 'value of second property';
document.getElementById('elem').propertyThree = 'value of third property';

Faster:

var elem = document.getElementById('elem').propertyOne = 'value of first property';
elem.propertyTwo = 'value of second property';
elem.propertyThree = 'value of third property'

Remove references to documents that have been closed

If a reference to frame, iframe or object is stored in a global variable or a property, clear it by setting it to null or deleting it.
For example, a popup window that is closed and has a reference to global variable, will be kept in memory although the document itself is no longer loaded, if it is not deleted manually.

Slow:

var frame = parent.frames['frameId'].document;
var container = frame.getElementById('contentId');
var content = frame.createElement('div');
content.appendChild(frame.createTextNode('Some content'));
container.appendChild(content);

Faster:

var frame = parent.frames['frameId'].document;
var container = frame.getElementById('contentId');
var content = frame.createElement('div');
content.appendChild(frame.createTextNode('Some content'));
container.appendChild(content);
// nullify references to frame
frame = null;
container = null;
content = null;

Object-Oriented JavaScript

Consider alternative inheritance mechanisms

There exists many ways to mimic Object Orientated style inheritance in JavaScript. However, not all the mechanism to emulate inheritance perform similarly.
Especially if your code calls overridden methods frequently you should take a look at the results of JavaScript Inheritance Performance study.

Client-server communication

Set timeouts to XMLHttpRequests

Browsers will timeout XHR requests after some time, but sometimes it is beneficial to abort the connection under script control. This can be done by adding timeouts to XHR calls using setTimeout().

var xhr = new XMLHttpRequest ();
xhr.open('GET', url, false);
xhr.onreadystatechange = function () {
    if (this.readyState == 4) {                    
        clearTimeout(timeout);
        // do something with response data
    }
}
var timeout = setTimeout( 
    function () {
        xhr.abort();
        // call error callback
    },
    60*1000 // timeout after a minute
);
xhr.send();

Consider using a custom data exchange format for large datasets, as an alternative to XML and JSON

Depending on the browser, its version and OS, the performance difference between XML or JSON parsing and traversing may be very significant. For example, on Nokia 5800 XpressMusic with a very large dataset JSON is approx. 5x faster.
Using a custom string-based data format (think CSV) over XML and JSON is efficient in terms of transferred bytes and parse time with large datasets.
Using JavaScript’s String and RegExp methods one can match the speed of JSON executed natively with as little overhead to the filesize as possible.

JSON: var contacts = JSON.parse(o.responseText);

Equivalent using custom data format and String and RegExp methods:

that.contacts = o.responseText.split("\\c");
 
for (var n = 0, len = that.contacts.length, contactSplit; n < len; n++) {
 
   contactSplit = that.contacts[n].split("\\a");
 
   that.contacts[n] = {};
   that.contacts[n].n = contactSplit[0];
   that.contacts[n].e = contactSplit[1];
   that.contacts[n].u = contactSplit[2];
   that.contacts[n].r = contactSplit[3];
   that.contacts[n].s = contactSplit[4];
   that.contacts[n].f = contactSplit[5];
   that.contacts[n].a = contactSplit[6];
   that.contacts[n].d = contactSplit[7];
   that.contacts[n].y = contactSplit[8];
}

Sources:

Animations

Use animations modestly

Animation without hardware support is slow. Try to avoid excessive use of animations which do not bring any real usability value. At least give users an opportunity to disable animations.

Use scrollTo() to animate scrolling

Using native scrolling via scrollTo() performs significantly better as it does not trigger reflow.

Absolutely or fixed position animated elements

By default elements have style property position: static and animating such elements causes reflowing of the layout and is expensive.
Elements to be animated should be set as position: absolute or position: fixed if reflowing is not mandatory for smoother animation and lesser CPU load. Such elements do not affect other elements layout, so they will only cause a repaint rather than a full reflow with a nice performance boost.
CSS positioning schemes for position property:

Position value	Description
static	Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)
relative	An element with position: relative moves an element relative to its normal position, so left:20 adds 20 pixels to the element's left position
absolute	An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the left, top, right, and bottom properties.
fixed	An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the left, top, right, and bottom properties. The element remains at that position regardless of scrolling.

Source:

w3schools - CSS position Property

Use one timer to animate multiple elements at the same time

setTimeout() and setInterval() timers are two basic methods used to implement animation (i.e. trigger changes to element size, position and/or appearance over time).
If multiple elements are animated at the same time, the best framerate is achieved by iterating across all animated elements inside a single loop. Using multiple timers makes animation less efficient and consistent, presumably due to timer invocation overhead.

Slow:

setInterval(function() {
    animateFirst(arg);
}, 50);
setInterval(function() {
    animateSecond(arg);
}, 50);
function animateFirst(arg) {};
function animateSecond(arg) {};

Faster:

setInterval(function() {
    animateFirst(arg);
    animateSecond(arg);
}, 50);
function animateFirst(arg) {};
function animateSecond(arg) {};

Sources, further reading:

Trade animation smoothness for speed

To trade smoothness for speed means that while you may want to move an animation 1 pixel at a time, the animation and subsequent reflows may in that case use 100% of the CPU and the animation will seem jumpy as the browser is forced to drop frames to update the flow. Moving the animated element by e.g. 5 pixels at a time may seem slightly less smooth on faster machines, but won’t cause CPU thrashing that easily on mobile devices.

Events

Use event delegation

Assigning event handlers to individual objects can add up quickly and is expensive if you create a lots of new elements dynamically to which event handlers need to be bound.
This becomes especially interesting if you assign multiple event listeners (e.g. click and blur to a one element. In case of 100 elements that would mean 200 event handlers.
Using DOM Level 2 event model all events propagate toward the document object which is highest up in the hierarchy. This means that one can bind event listeners to document which invokes a controller and passes the event object to it. The controller is responsible for inspecting the internals of the event and dispatching to appropriate logic.

Slow:

var elems = [first, ..., last]; // an array which holds say 1000 references to element to which assign the event handlers to
for (var i, l = elems.length; i++; i < l) {
    elems[i].onclick = function() {};
    elems[i].onblur = function() {};
}

Faster: //HTML <button id="doSomething">Click me to do something</button> // you can add more of elements without the need to worry about binding event handlers

</code>

// JS
document.addEventListener('click', function(event) { eventController(event); }, false);
document.addEventListener('blue', function(event) { eventController(event); }, false);
 
function eventController(event) {
   // inspect the event object internals and do something wise
   if (event.target.id === 'doSomething') {
      doSomething();   
   }
}
 
function doSomething() {}

Throttle event handlers which fire excessively

If a handler is called many times, the responsiveness of the UI degrade and tops the CPU. This is especially an issue if the event handler triggers reflow as is the case with resize.
On S60 5.0 devices input element's blur handler is called each time the content of the input field changes, e.g. user types in a single letter.
You may want your function to run once after the last event has fired to prevent excessive calls to potentially expensive functions. You must implement throttling mechanism to achieve that kind of a rate limited.

Slow:

window.onresize = resizeHandler; // fires excessively during resize

Faster:

function SomeObject() {
     var self = this;
     this.lastExecThrottle = 500; // limit to one call every "n" msec
     this.lastExec = new Date();
     this.timer = null;
     this.resizeHandler = function() {
         var d = new Date();
         if (d-self.lastExec < self.lastExecThrottle) {
             // This function has been called "too soon," before the allowed "rate" of twice per second
             // Set (or reset) timer so the throttled handler execution happens "n" msec from now instead
             if (self.timer) {
                 window.clearTimeout(self.timer);
             }
             self.timer = window.setTimeout(self.resizeHandler, self.lastExecThrottle);
             return false; // exit
        }
        self.lastExec = d; // update "last exec" time
        // At this point, actual handler code can be called (update positions, resize elements etc.)
        // self.callResizeHandlerFunctions();
    }
}
 
var someObject = new SomeObject();
window.onresize = someObject.resizeHandler;

Source:

A Snapshot of The Yahoo! Photos Beta - Web Development Perspective

Escaping the JavaScript call stack with `setTimeout`

Setting up handlers that run after an event has fired needs some trickery. Because the event doesn’t take effect until the event-handling call stack opens and closes completely, there’s no way to work in a post-event environment via conventional event handlers.
When something is called using setTimeout with a delay of 0 the JavaScript engine notices it is busy (with a task which invoked setTimeout) and queues the setTimeout code for execution immediately after the current call stack closes.
This technique can be used to prioritize certain functionality such as showing and hiding loading indicator prior to executing a compurationally heavy operation such as modifying the DOM.

In a typical scenario this will not turn the loading indicator visible:

showLoadingIndicator();
 doSomethingExpensive();

Workaround is to use setTimeout as follows (please take extra care when using this anti-pattern as what it does is actually delays the execution in order to display the loading indicator in the UI):

function switchViews() {
    setTimeout(function() {
        showLoadingIndicator();
    }, 0);
 
    setTimeout(function() {
        doSomethingExpensive();
    }, 50);
}

Source:

Escaping the JavaScript call stack with setTimeout

Styling

Optimize CSS

Create a component library
Use consistent semantic styles
Design modules to be transparent on the inside
Be flexible
Learn to love grids
Minimize selectors
Separate structure and skin
Separate container and content
Extend objects by applying multiple classes to an element
Use reset and fonts from YUI
Source: Object Oriented CSS

Change CSS classes near the edges of the DOM tree

To limit the scope of the reflow to as few nodes as possible you should avoid changing a class on wrapper (or body) element(s) which affects the display of many child nodes. Additionally, that may result in re-resolving style on the entire document and for a large DOM that could lock up the browser for a while.

Source:

Dave Hyatt on CSS Selectors

Avoid tables for layout or use table-layout: fixed

Avoid tables for layout. As if you needed another reason to avoid them, tables often require multiple passes before the layout is completely established because they are one of the rare cases where elements can affect the display of other elements that came before them on the DOM. Imagine a cell at the end of the table with very wide content that causes the column to be completely resized. This is why tables are not rendered progressively in all browsers and yet another reason why they are a bad idea for layout.

It is recommended to use a fixed layout ( table-layout: fixed) for data tables to allow a more efficient layout algorithm. This will allow the table to render row by row according to the CSS 2.1 specification.

Source:

Reflows & Repaints: CSS Performance making your JavaScript slow

Optimize images

Combine similar colors
Avoid whitespace in sprites, use CSS instead
Horizontal is better than vertical
Limit the number of colors
First optimize individual images, next sprites in it
Reduce anti-aliased pixels via size and alignment
Avoid diagonal gradients due to increased image size
Avoid alpha transparency (IE does not support)
Change gradient color every 2-3 pixels

Source:

Design Fast Websites slides and presentation

S60 specifics

Styling

Remove borders around focusable elements

In WRT 1.x you can remove default blue borders in tab navigation mode with the following CSS. a:hover, a:focus { outline: none; }

Fix focus problems in tabbed navigation mode

In tabbed navigation mode the focus may lost while switching views. A fix to this issue is to place a read-only <input> text element (can be absolutely positioned, zero-sized and transparent) under the element to be focused after switching the view and focus():ing on it after the view changes.

/* CSS */
#top {
    position: absolute;
    top: 0px;
    width: 0px;
    height: 0px;
    border: 0px;
    background: transparent;
}
 
<!-- HTML -->
<input id="top" type="text" readonly="readonly"/>

// JavaScript
widget.setNavigationEnabled(false); // tabbed navigation mode
 
function toggleViews() {
    hideFirstView();
    showSecondView();
    document.getElementById('top').focus();
}

You may need to alter the positioning of the element by modifying the top property to position it underneath the first focusable element depending on your layout.

Prevent elements losing focus in tabbed navigation mode

There is no exhaustive fix to this bug but it seems to help if you set the styles via onblur and onfocus event handlers instead of using CSS pseudo selector :hover.

So instead of :hover in CSS:

<style type="text/css">
#focusable:hover {
    background-color: blue;
}
</style>
<button id="focusable">Foobar</button>

You utilize onfocus and onblur event handlers and set the styles using JavaScript:

document.getElementById('focusable').onfocus = function () {
    this.style.backgroundColor = 'blue';
}
 
document.getElementById('focusable').onblur = function () {
    this.style.backgroundColor = 'inherit';
}

<button id="focusable">Foobar</button>

Allow animated gif images to animate after being hidden

S60 3.x and 5.0 devices do not animated gif images if they have been set as display: none at any point during their lifespan regardless of subsequent display value. A workaround to this bug is to avoid display: none and use position: absolute and alter left property to move the animated gif outside of the visible viewport to hide it ( left: -100%) and bring it back ( left: 0).

Alternatively you can fold the animated gif into another element whose style you set in a similar fashion.

<!-- animation hidden -->
<img style="position: absolute; left: -100%;" src="animated.gif" />

<!-- animation visible -->
<img style="position: absolute; left: 0;" src="animated.gif" />

Home Screen Widgets

Remove unneeded images in mini view
- If images are used exclusively in full view, you can get rid of all of them (or selectively one by one) and save memory.
- Any other unneeded images (e.g. images specific to screen orientation, portrait or landscape) can be also removed using similar technique.
- To remove all images use:
```
for (var i in document.images) {
    document.images[i].src = "#";
}
```

Remove unneeded nodes from the DOM when in mini view
- document.getElementById("fullview").innerHTML = "";

Check and remove unused JavaScript functions and <embed> tags when in mini view
- Removing unused JavaScript functions and <embed> tags will save memory.
Consider using background color in mini view instead of images
Respect onshow and onhide
- When you get an onhide event, call clearInterval() and clearTimeout() for any pending timers and abort any pending XHR calls to keep the CPU usage low.

Use setInterval wisely

Animations on Home Screen
- Avoid animations on home screen unless they are really needed for the sake of good user experience.

Misc

Avoid background-repeat if the background-image is small relative to its containing element

Interaction such as scrolling is extremely slow if background-repeat property is set to repeat-x or repeat-y combined with a background-image of a size which needs to be repeated multiple times to fill in the element's background. A workaround is to avoid using repeating backgrounds, that is use a big enough background-image with background-repeat: no-repeat. For example, a commonly used CSS design pattern -- which degrades the performance and should be avoided -- is to create a continuous vertical gradient background using a background image of width 1px which is repeated horizontally across the whole element width.

This optimization pattern is a trade off between the initial load time and the subsequent interaction smoothness. In a typical scenario using a bigger background-image (longed load time) with background-repeat: no-repeat delivers a far superior overall UX over using a smaller repeating background.

Slow:

<style type="text/css">
.container {
    width: 500px;
    height: 50px;
}
.repeat {
    background-image: url(background1.png); /* background1.png width 1px, height 50px */
    background-repeat: repeat-x;
}
</style>
 
<div class="container repeat">Foobar</div>

Faster:

<style type="text/css">
.container {
    width: 500px;
    height: 50px;
}
.norepeat {
    background-image: url(background2.png); /* background2.png width 500px, height 50px */
    background-repeat: no-repeat;
}
</style>
 
<div class="container norepeat">Foobar</div>

jQuery Issues and Workarounds

plainHtml() plugin - a fix for html()

jQuery-specifics

NB! These optimization patterns are aimed at jQuery 1.2.6. Recent versions and the Sizzle selector engine alleviate some of these bottlenecks.

Sources Advanced jQuery with John Resig JavaScript Function Call Profiling

Minimize the use of slow jQuery methods

remove(), hmtl() and empty() have order of n2 time complexity, that is T(n) = O(n2). Minimizing the use of these methods is recommended in jQuery versions prior to 1.3.3. .

append, prepend, before, after methods are expensive as well as taking a chunk of HTML and serializing it ($("Hello World! ")).

The process behind these manipulations methods is the following: cleaning the input string, converting the string into a DOM fragment and injecting it into the DOM.

Optimize selectors

Pay attention to the selectors you use. E.g. if you want to hide paragraphs which are direct children of div elements there are multiple ways to do it.

Using the selector below will try to find all div elements, loops thought all of them and find all p relative to the div, merge and figure out unique results. Making sure that the returned set is unique is where the most time is spent, and is very slow especially with a large DOM tree.

Slow: $("div p").hide();

A one way to optimize the selector is to match direct children of div (this may require you to re-factor the DOM structure of your app and may not be feasible in every scenario). This alternative flatter selector will try to find all div elements, loops thought all child elements and verifies if element is p.

Faster: $("div > p").hide();

Consider alternatives to jQuery.each()

Depending on the size of the array, looping through it using for (i = 0; i < len; i++) instead of jQuery.each(myArray) may be faster. see jQuery tests in Low Level JavaScript Performance

References

Generic

Y! Best Practices for Speeding Up Your Web Site
Notes on JS Compression
Performance Roundup for 2008
CS193H: High Performance Web Sites at Stanford
Coupling Async Scripts
Google I/O: Even Faster Web Sites
Ajax Experience webcasts
Douglas Crockford
- Ajax Performance
- Advanced JavaScript - Performance
Mobile Web Application Best Practices (W3C Working Draft)
JavaScript Performance Rocks!
Measuring User Experience Performance
Serving JavaScript Fast
JavaScript Performance Tips - generic, and Prototype-specific
JavaScript String Performance Analysis - string concatenation with +=, join() and concat()
IMB developerWorks Ajax Performance Analysis
Opera Developer Network
- Efficient JavaScript - Tips for ECMAScript, DOM and document loading
- Cross Device Development Techniques for Widgets
- JavaScript Best Practices
DOM DocumentFragments
John Resig
- JavaScript Engine Speeds
- Benchmark
- getElementByClassName Speed Comparison
- Performance Improvements in Browsers
- Browser Paint Events
- JavaScript Performance Stack
- Native JSON Support is Required
A Snapshot of The Yahoo! Photos Beta - Web Development Perspective
Building Fast Client-side Searches
Even Faster Websites - Steve Souders at SXSW ‘09
Reflows & Repaints: CSS Performance making your JavaScript slow?
Nicholas Zakas
- JavaScript Variable Performance
- slides
- Speed Up Your JavaScript part 1 part 2, part 3 and part 4
- JavaScript Stack Overflow Error
Stoyan Stefanov
- High Performance Kick Ass Web Apps Video at JSCONF 2009
Compatibility Tests
- Quirksmode.org Mobile Tests
Google Page Speed
Extreme JavaScript Performance by Thomas Fuchs

jQuery-specific

This article is licensed under a Commons Attribution, Non Commercial - Share Alike 2.5 license.

Using JSONP in WRT widget

Isalento — Wed, 25 Nov 2009 10:15:41 GMT

Moderator Note:- the Example link at the bottom does not appear to have had code loaded

JSONP

JSONP comes from the words "JSON with padding". The padding word is there because the loaded JSON formatted data is wrapped inside a javascript function call.

How it works

JSONP utilizes dynamically created script -tags. The benefit of script tag is that their source can point any domain. They are not restricted by same origin policy as AJAX requests.

Web APIs that use JSON data format usually let the end user to define callback function name by passing callback argument as a part of web service query string.

The server generates a JSON formatted response and wraps it into a function call. The callback function is automatically called when JSON data is evaluated.

Example JSONP response:

handleTwitterData ({"results":[..json formatted data..]});

Following example utilizes JSON version of the Twitter search API.

jsonpSearch("http://search.twitter.com/search.json","handleTwitterData",keyword);
 
function jsonpSearch(url, callback, keyword){
    var head = document.getElementsByTagName('head');
    var scriptElement = document.createElement('script');
    scriptElement.type = "text/javascript";
    scriptElement.src =  url+"?callback="+callback+"&q="+keyword;
    scriptElement.id = "jsonp";
    head[0].appendChild(scriptElement);
}
 
function handleTwitterData(data){
    var tweets = data.results;
    .....
}

If you are going to do multiple successive queries, you might end up situation where your widget leaks memory. That's why it is important to delete both the script tag from the DOM and the JavaScript objects as well (1).

function clearOldSearch(){
 
    var script = document.getElementById("jsonp");
 
    if(script) {
        script.parentNode.removeChild(script); //does not really release the memory
 
        for (var property in script) { //so delete all the properties as well
            delete script[property];
        }
    }
}

For minimal test widget see: TwitterIn2Min.zip

Creating a Slider Component for Guarana UI

Jappit — Tue, 24 Nov 2009 14:08:33 GMT

This article shows how to create and use a Slider Component for the Guarana UI Library.

The Slider Component is visible on the Guarana UI online Components Browser: Guarana UI Slider Component.

1 Introduction
2 Building the empty Component
3 Writing the Component
4 Using the Component
5 Finalizing the Component

Introduction

The Guarana UI Library is a jQuery-Based UI Library for Nokia WRT, that provides a full set of Components ready to be used within Web Runtime widgets.

Guarana UI also allows to build new UI Components, and integrate them with the Guarana UI structure. Before proceeding with this article, it is so necessary to view the general process behind the creation of a new Guarana UI Component, described here: How to create a new Component for the Guarana UI Library.

Building the empty Component

First thing to do, is to create the Component skeleton. This process is described in the Setup the Component source files section of the How-to article.

The following steps must be performed:

create an empty slider.js file in the "<GUARANA_BASE_PATH>/src" folder
create an empty slider.css file in the "<GUARANA_BASE_PATH>/themes/nokia/base/" folder
add the dependency declarations to both the "<GUARANA_BASE_PATH>/src/defaults.js" and "<GUARANA_BASE_PATH>/build/build/js/defaults.js" files

/*
 * Slider
 */
 
'slider': {
	getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'slider.js'; },
	requires: ['widget', 'slider-css']
},
 
'slider-css': {
	getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'slider.css'; },
	type: 'css',
	requires: ['base-css']
}

launch the Guarana UI build process

Now, the skeleton files are ready to be used, so it's possible to implement the new component.

Writing the Component

In order to write the component, let's create an empty WRT project. First thing to do, is to move the "<GUARANA_BASE_PATH>/build/Guarana/lib/" and "<GUARANA_BASE_PATH>/build/Guarana/themes/" to the just created empty WRT project.

Define the Component's layout

The Slider component will have the following look-and-feel (actually, the same of the Slider component for Mobile Web Templates):

Since this component uses images, it is necessary to place them in the right folder, in order for Guarana UI to correctly recognize them. Component's images must be placed inside the "themes/nokia/base/images/" folder of the WRT project.

The JavaScript code

This section shows and explains the Slider JavaScript code.

Initialization

The most important part of the component, and the first to be executed, is the initialize() function. It must take care of initializing the Component's properties, by using default options when explicit ones are not used, and then of creating the slider:

initialize: function(options) {
        var instance = this;
 
	var defaults = {
		minValue: 0,
		maxValue: 100,
		increment: 1,
		value: 0,
		readonly: false
        };
 
        instance.options = jQuery.extend(defaults, options);
 
        instance.element = jQuery( instance.options.element );
 
        instance._super.apply(instance, [instance.options]);
 
        instance.registerData("slider");
 
        instance._create();
 
	instance.minValue = instance.options.minValue;
	instance.maxValue = instance.options.maxValue;
	instance.increment = instance.options.increment;
 
        instance.setValue(instance.options.value);
 
	instance.registerVibrationOn([ ]);
 
	instance.fireCallback('create');
}

DOM creation

The _create() function takes care of creating the Slider DOM structure, binding the necessary events to make the Component fully interactive. Before defining the _create function, let's define which CSS styles will be used by the Component, by using the Styles property:

Styles: {
	slider: 'slider',
	sliderItem: 'slider-item',
	sliderValue: 'slider-value'
}

Below, it is possible to see the _create function:

_create: function() {
	var instance = this;
	var options = instance.options;
	var element = instance.element;
	var Styles = instance.Styles;
 
	element.each(function(i, el) {
		Nokia.util.addClass(el, Styles.slider);
	});
 
	instance.slider = Nokia.dom.parseHTML('<div class="' + Styles.sliderItem + '"></div>');
	instance.sliderItem = Nokia.dom.parseHTML('<a href="javascript:void(0)"></a>');
	instance.sliderHandle = Nokia.dom.parseHTML('<span></span>');
	instance.sliderValue = Nokia.dom.parseHTML('<div class="' + Styles.sliderValue + '"></div>');
 
 
 
	if (!options.readonly) {
 
		var clickAction = function(e) {
			instance.handleClicked(e);
			return false;
		};
		var keyAction = function(e) {
			instance.handleKeyDown(e);
			return false;
		};
 
		instance.sliderItem.bind('click.slider', clickAction);
		instance.sliderItem.bind('keypress.slider', keyAction);
 
	}
 
	instance.sliderItem.append(instance.sliderHandle);
	instance.slider.append(instance.sliderItem);
	element.append(instance.slider);
	element.append(instance.sliderValue);
 
},

Setting/Getting Slider's value

Being fully interactive, the Component needs functions that allow setting and getting the Slider's value. The setting function must also take care of updating the Component's appearance, and this operation will be performed by the update() function in the code below:

update: function()
{
	var positionX = 100 * (this.value - this.minValue) / (this.maxValue - this.minValue);
 
	this.sliderHandle.css('background-position', positionX + '% center');
},
setValue: function(_value)
{
	this.sliderValue.text(_value);
 
	this.value = _value;
 
	this.update();
},
 
getValue: function(_value)
{
	return this.value;
}

Handling events

As the Component must be usable with both touch and key-based navigation, it is necessary to define two different event handlers, that will handle a specific event. The handleKeyDown() function will handle the key-based events, while the handleClicked() function will handle the touch-based ones.

handleKeyDown: function(e)
{
	var key = e.keyCode;
 
	var newValue = this.value;
 
	if(key == 37 && this.value > this.minValue)
		newValue = Math.max(this.minValue, this.value - this.increment);
	else if(key == 39 && this.value < this.maxValue)
		newValue = Math.min(this.maxValue, this.value + this.increment);
 
	if(newValue != this.value)
	{
		this.setValue(newValue);
 
		this.fireCallback('change', e, this.value);
	}
},
handleClicked: function(e)
{
	var mouseX = e.clientX;
 
	var relativeX = mouseX - this.sliderHandle.position().left;
 
	var newValue = this.minValue + Math.round((this.maxValue - this.minValue) * relativeX / (this.sliderHandle.width() * this.increment)) * this.increment;
 
	this.setValue(newValue);
 
	this.fireCallback('change', e, this.value);
},

CSS code

The CSS code, contained in the slider.css file, is the following one:

.slider {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slider div.slider-value
{
	display: block;
	clear: both;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}
.slider div.slider-item {
	float: left;
	width: 100%;
	margin-bottom: 2px;
	margin-top: 10px;
	line-height: 40px;
	background: url(images/sprite-button-rounded-right.png) no-repeat right top;
	text-align: center;
}
 
.slider div.slider-item:hover {
	background: url(images/sprite-button-rounded-right.png) no-repeat right bottom;
}
 
.slider div.slider-item a {
	width: 100%;
	display: block;
	padding: 0 0;
	height: 40px;
	background: url(images/sprite-button-rounded-left.png) no-repeat left top;
	text-decoration: none;
	color: #333333;
}
.slider div.slider-item a:hover {
	background: url(images/sprite-button-rounded-left.png) no-repeat left bottom;
	color: #FFF;
	outline: none;
}
.slider div.slider-item a span {
	margin-left: 5px;
	margin-right: 5px;
	display: block;
	height: 40px;
	background-image: url(images/slider-off.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}
.slider div.slider-item a:hover span
{
	background-image: url(images/slider-on.png);
}

Using the Component

The Slider can be used by following these steps:

Include the Guarana UI CSS dependencies (as explained here: GuaranaUI-QuickStart):

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/default-theme/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen">

Include the JavaScript dependencies:

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

define a root element in the widget's HTML code:

<div id="slider01"></div>

define the Guarana UI path variables:

NOKIA_PATH_JAVASCRIPT = 'lib/';
 
NOKIA_PATH_STYLE_ROOT = 'themes/nokia/base/';

use the Nokia Loader to load the slider resources:

Nokia.use('slider', init);

in the init() function, initialize the Slider:

var slider1 = new Nokia.Slider({
    element: '#slider01',
    value: 40,
	minValue: 0,
	maxValue: 100,
	increment: 5,
    create: function() {
        alert('slider created');
    },
    change: function(event, value) {
        alert('slider change');
    }
});

Finalizing the Component

Once finished, some steps have to be performed:

move back the slider.js file to the "<GUARANA_BASE_PATH>/src/" folder
move back the slider.css file to the "<GUARANA_BASE_PATH>/themes/nokia/base/" folder
move the Component images to the "<GUARANA_BASE_PATH>/themes/nokia/base/images/" folder
launch the Guarana UI build process

Done this, the Slider Component is ready to be used in all your WRT widgets.

Customizing a Guarana UI busy indicator

Tapla — Tue, 24 Nov 2009 10:21:15 GMT

ID		Creation date	November 24, 2009
Platform		Tested on devices	Nokia N97
Category	Web Runtime (WRT)	Subcategory	Guarana UI, UI

Keywords (APIs, classes, methods, functions):

Overview

This code snippet demonstrates how to customize a Guarana UI busy indicator. You can download the component library from Forum Nokia. This snippet assumes that you are familiar with adding the busy indicator component on a web page. For more information about this, read the snippet Adding a Guarana UI busy indicator on a web page.

To replace the busy indicator with your own version, first create a GIF animation that you want to use. Free animations can be created and downloaded e.g. from the Ajaxload Web site. After that, replace the themes/nokia/base/images/busyindicator.gif with your own animation. Lastly, customize the width and height of the busy indicator so that they correspond to the width and height of the new animation. For example:

window.busyIndicator = new Nokia.Busy({
    element: "#busyIndicatorContainer",
    width: 126,
    height: 22,
    autoOpen: false
});

Postconditions

The default GIF animation of a busy indicator is replaced with own animation.

Supplementary material

This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.2.

The patched, executable application that can be used to test the features described in this snippet is available for download at Media:customizing_a_guarana_ui_busy.zip.
You can view all the changes that are required to implement the above-mentioned features (compared to the Adding a Guarana UI busy indicator on a web page snippet). The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:customizing_a_guarana_ui_busy.diff.zip.
For general information on applying the patch, see Using Diffs.
For unpatched stub applications, see Example stub.

Installing Java apps and WRT widgets using sis files

Dcrocha — Wed, 25 Nov 2009 18:52:29 GMT

1 Introduction
2 Benefits
3 Prerequisites
4 Testing this package
5 Customizing the installation package
6 Deploying the installation package
7 Questions / feedback

Introduction

This article introduces the Software Installer package. It allows developers to install their Java ME, Web Runtime (WRT), Symbian S60 and Flash Lite (packaged as .sis) applications and dependencies using a single .sis file. A Carbide.c++ project is provided, and developers will customize them for their own installation needs.

Benefits

Multiple applications can be installed at a single shot, along with dependent components such as: image files, music, videos, configuration files, native (C++) components and so on. For example, WRT Widgets can be installed along with the APIBridge_Web_Runtime_API if they depend on it, making the user experience a lot better than when installing multiple components separately.

Prerequisites

Update: If you want to test a ready-made example to see what the user experience looks like, please download this package, unzip it and install the signed .sisx file to your phone:

File:SoftwareInstaller nokia.zip

In order to use this package to customize your installations, you need to have installed:

Some S60 SDK, 3.0 MR or greater. This example was created with S60 5th Edition SDK.
S60 SDK Extensions Plug-in pack.
Carbide.c++ 2.0+ is optional but helps getting the job done more quickly.
Software Installer project in Zip format: File:SoftwareInstaller 24112009.zip

Testing this package

First thing is to do a test build to make sure the environment is set up correctly:

Install the SDKs and the Extensions Plug-in Pack listed above, if you still haven't done so.
Extract the attached SoftwareInstaller.zip package anywhere in your computer. In this example, the folder generated is C:\temp\SoftwareInstaller
Open a Windows Command Prompt, and cd into the project folder.
Cd into group folder and type
```
bldmake bldfiles
```
to create the build files.
Type
```
abld build gcce
```
. This will build the package for the GCCE target, meant to be used in real hardware.
Cd into ..\sis folder.
Type
```
makesis SoftwareInstaller_EKA2.pkg SoftwareInstaller.sis
```
. This will generate an unsigned .sis file. You will now need to sign the file so it works on your phone.

If you do not own a Developer certificate:

Go to Symbian Signed web site and choose the Open Signed Online option. Fill out the IMEI, E-mail and Application fields. You will receive a confirmation on your e-mail.
Check your e-mail for the confirmation message. Click on the link provided.
Refresh your e-mail a couple of minutes later; you will have a link to download the signed SoftwareInstaller.sis file.

If you have a Developer certificate:

Sign the SoftwareInstaller.sis file with your certificate and key.

Now you can install the signed SoftwareInstaller.sis file on your phone. The S60 installer will prompt you about the file being a development-version application, then will install itself. A couple of seconds after the installation of the main package is completed, you will be prompted for the installation of the STEW widget (example from Forum Nokia Developer's Library). After the installation of STEW is finished, the MyTestApp Java MIDlet will be installed.

After these two applications are installed, you can use them from the Application folder and check they work correctly. Both have been installed by a single .sis file. Here is a visual summary of the installation experience on the phone:

Installation of multiple apps with a single .sis file
SoftwareInstaller.sis in the Inbox	Installation of the main package	Signing with a developer certificate prompts the user	Installation of the STEW widget	Installation of the MyTestApp MIDlet
MIDlet installation complete	STEW widget and HelloMIDlet (MyTestApp) installed and ready to be used

Next we'll see how you can customize this package to suit your application installation needs.

Customizing the installation package

The first thing you need to know is that this is not simply a .sis file. There's a small executable ("SoftwareInstaller.exe") that does the job of installing all components whose files are in the data folder and whose names are in the data\WidgetInstFile file. This has implications in what you, the developer, must do to customize this package.

At a first glance, it would be easy to add your component to the data folder and add its name to WidgetInstFile. However, this is not an ordinary .sis file, but an actual Symbian C++ application. In the Symbian environment, all applications must have a valid, unique ID (UID) and a unique executable file name, to avoid collision with other applications installed on the phone. Therefore you need to implement those changes before using this package, in order to install your applications in a production environment. To achieve this, you need to:

Go to the Symbian Signed website, and get a valid UID for your application. It will be in the format 0x12345678. Please notice that the example package comes with a UID of the test range (0xExxxxxxx) which must not be used for production applications. You will need a valid one or you will have problems with application collision and it will be impossible to sign them.
After you have the valid UID, open the SoftwareInstaller.mmp (group folder) file and change the line
```
UID			 0 0xEDC63187
```
to
```
UID			 0 0x2xxxxxxx
```
where 0x2xxxxxxx is the UID you've received from Symbian Signed. Modify the TARGET parameter to something like MyApplicationName_0x2xxxxxxx.exe, again where 0x2xxxxxxx is your UID. This will ensure the file name for your executable is unique in the phone. Save and close the file.
Open the ..\sis\SoftwareInstaller_EKA2.pkg file. Look for the line:
```
#{"SoftwareInstaller EXE"},(0xEDC63187),1,0,0
```
and change it to
```
#{"MyApplicationNAme"},(0x2xxxxxxx),1,0,0
```
where MyApplicationName is, unsurprisingly, your application's name, and 0x2xxxxxxx is the same UID you used in the .mmp file. You can also change the Vendor section to reflect your company's name.
Look for the line
```
"\S60\devices\S60_5th_Edition_SDK_v1.0\Epoc32\release\gcce\urel\SoftwareInstaller.exe" - "!:\sys\bin\SoftwareInstaller.exe", FR, RI
```
and change the name of SoftwareInstaller.exe in both sides to the same name you've defined in step 2 of this section ("MyApplicationName_0x2xxxxxxx.exe").
Copy your applications to the data folder. In this example, our apps are stew.wgz and MyTestApp, which is a Java ME application consisting of the JAD and JAR files. Make sure you copy ALL the installation files to the data folder.
Edit ..\data\WidgetInstFile (Notepad or Wordpad) and add the file names of the applications you want to install. In this example, we are adding stew.wgz and MyTestApp.jad. Please note that, for Java ME apps, you can enter either the JAD or the JAR file name, but not both. If you are using JAD properties, or your MIDlet is signed, you must use the JAD file name, otherwise your MIDlet will not be installed correctly. Also note that WidgetInstFile is not an ASCII file. Therefore you must use either Wordpad or Notepad (on Windows) and save the file as Unicode, not as regular text. Save and close the file.
Now you need to tell the package creator to add your files to the final .sis package. Open ..\sis\SoftwareInstaller_EKA2.pkg file and look for the lines:
```
;Files to be installed	
"..\data\stew.wgz"	- "d:\WidgetInstaller\stew.wgz"
"..\data\MyTestApp.jad"  - "d:\WidgetInstaller\MyTestApp.jad"
"..\data\MyTestApp.jar"  - "d:\WidgetInstaller\MyTestApp.jar"
```
These directives will copy files stew.wgz, MyTestApp.jad and MyTestApp.jar from your HD disk to the .sis file. If you fail to add these lines, nothing will be installed. Add your files here as needed. On the left side of the hyphen ("-") you add the path to the file on your disk; on the right side you add the path on your phone's disk. Note that the latter must always be "d:\WidgetInstaller\", otherwise the installer app won't find it.
Now you are ready to rebuild the package. Change to the group" folder, type
```
abld reallyclean gcce
```
then
```
abld build gcce
```
Create the package using makesis as described in the previous section.
Sign the package using either Symbian Signed Open Signed Online or your developer certificate.
You are then ready to test the package on your phone.
ATTENTION: At this point you may receive an "Update error" when installing your newly-created package on the phone. This happens because you've changed the UID of the package but kept some of the files that the old package (the one installed on the phone) was also using. To solve this error, you can either remove the previous package prior to installing the new one, or remove conflicting files, which will most likely be the ones from the data folder. This will not happen in production since it's very unlikely that you are installing exactly the same file as any other package in the world with a different UID.

Deploying the installation package

In order to deploy the installation package to all your users, you need to sign the application with a real certificate. For that you will need to go to Symbian Signed and sign the application. You can use Express Signed since the app doesn't require any Manufacturer-granted capabilities. For an overview of the Symbian Signed process for production applications Step by Step instructions to Express signing.

Questions / feedback

Questions or feedback can be posted as comments to this page.

Daniel Rocha
Forum Nokia

--dcrocha 23:23, 24 November 2009 (UTC)

TSS001494 - SAX parser comparison in Symbian/S60 and Qt

Forum Nokia KB — Mon, 23 Nov 2009 13:34:44 GMT

Knowledge Base Home

ID	TSS001494	Creation date	November 23, 2009
Platform	S60 3rd Edition, FP1 S60 3rd Edition, FP2 S60 5th Edition	Devices	All (S60)
Category	Symbian C++, Qt	Subcategory	XML

Keywords (APIs, classes, methods, functions): QXmlReader

Overview

This article provides a comparison of XML document handling using Simple API for XML (SAX) parsers between Symbian/S60 and Qt.

Description

SAX is an event-based standard interface for XML parsers. Details on SAX2 can be found at http://www.saxproject.org.

Comparison of SAX (SAX 2.0) parsing in Symbian/S60 and Qt

Operation	Symbian/S60	Qt
Main Class/Interface	`MContentHandler` interface. Also some classes extending the Symbian XML framework are provided by S60, mainly `CSenXmlReader` and `MSenContentHandlerClient`.	`QXmlReader` interface (abstract class). Derived class `QXmlSimpleReader` provides an implementation of a simple XML parser.
Event reporting	`MContentHandler` interface. For extensions; through the `MSenContentHandlerClient` interface (not discussed here).	The reader reports parsing events through special handler classes: `QxmlContentHandler`, `QXmlDTDHandler`, `QXmlErrorHandler`, `QXmlEntityResolver`, `QXmlDeclHandler`, `QXmlLexicalHandler`. The `QXmlDefaultHandler` class provides a default implementation of all the XML handler classes. This class gathers together the features of the above specialised handler classes.
Handling start of document	`MContentHandler::OnStartDocumentL()`	XML reader calls `QXmlContentHandler::startDocument()`. Content handler can be set using `QXmlReader::setContentHandler(QXmlContentHandler * handler)`.
Handling end of document	`MContentHandler::OnEndDocumentL()`	XML reader calls `QXmlContentHandler::endDocument()` after it has finished parsing.
Handling start of element	`MContentHandler::OnStartElementL()`	`QXmlContentHandler::startElement()`
Handling end of element	`MContentHandler::OnEndElementL()`	`QXmlContentHandler::endElement()`
Handling tag contents	`MContentHandler::OnContentL()`	`QXmlContentHandler::characters()`
Prefix-URI namespace mapping	`MContentHandler::OnStartPrefixMappingL()`	`QXmlContentHandler::startPrefixMapping()` and `QXmlContentHandler::endPrefixMapping()`
Error handling	`MContentHandler::OnError()`	`QXmlErrorHandler` class provides an interface to report errors in XML data. The error handler can be set with `QXmlReader::setErrorHandler()`. Errors can be reported using `warning()`, `error()`, and `fatalError()`, with the error text being reported with `errorString()`.
Resolving external entities	`MContentHandler::OnSkippedEntityL()`	The `QXmlEntityResolver` class provides an interface to resolve external entities contained in XML data. Registering custom handlers for external entities is done with `QXmlReader::setEntityResolver()`.

Sample Qt code for SAX parser

The following code creates a QTreeView from an XML document showing all XML tags and contents.

class SAXHandler: public QXmlDefaultHandler
    {      
  public: // Constructor and destructor
    SAXHandler( QTreeView* tree = 0 );
    virtual ~SAXHandler();
 
  public:   // From QXmlDefaultHandler
 
    bool startElement( const QString& namespaceURI, const QString& localName, 
                       const QString& qName, const QXmlAttributes& atts );
 
    bool endElement( const QString& namespaceURI, const QString& localName, 
                     const QString& qName );
 
    bool characters( const QString& ch );
 
    bool endDocument();
 
    bool fatalError( const QXmlParseException& exception );
 
  private:
 
    QStandardItemModel*   m_model;         // Model of the tree to be filled
    QStandardItem*        m_currentItem;   // Tag currently being parsed
    QString               m_currentText;   // Current text of the tag
    QTreeView*            m_tree;          // Tree view to be filled
    };
 
 
 
 
  SAXHandler::SAXHandler( QTreeView* tree )
    {
    m_tree = atree;
    m_model = new QStandardItemModel;
    }
 
 
  bool SAXHandler::startElement( const QString & /* namespaceURI */,
                                 const QString & /* localName */,
                                 const QString &qName,
                                 const QXmlAttributes &attributes )
    {
    // Create a standard item with the qualified name and append it to model
    m_currentItem =  new QStandardItem( qName );
    m_model->appendRow( m_currentItem );
    // List all the attributes
    QStringList attrList;
    for ( int i = 0; i < attributes.count(); i++ ) {
      attrList.append( attributes.value( i ) );
      }
    return true;
    }
 
 
  bool SAXHandler::endElement( const QString & /* namespaceURI */,
                               const QString & /* localName */,
                               const QString &qName )
    {
    // Appending the row with text from current tag
    m_currentItem->appendRow( new QStandardItem( m_currentText ) );
    m_currentText.clear();
    return true;
    }
 
 
  bool SAXHandler::characters( const QString &str )
    {
    m_currentText.append( str );
    return true;
    }
 
 
  bool SAXHandler::endDocument()
    {
    // Model is now fully constructed with tags and content
    m_tree->setModel( m_model );
    }
 
 
  // XML reader uses this function to report a non-recoverable error 
  // Details of the error are stored in QXmlParseException
  bool SAXHandler::fatalError( const QXmlParseException &exception )
    {
    // column number and line where the error ocurred
    int col = exception.columnNumber();
    int line = exception.lineNumber();
    // error message
    QString msg = exception.message();
    return false;
    }
 
 
  SAXHandler::~SAXHandler()
    {
    }

Setting an input source, content and error handlers for the XML reader

QFile file( myXMLFile );
  if ( !file.open( QIODevice::ReadOnly | QIODevice::Text ) ) {
    // Handle file opening error
    }
  QXmlInputSource* xmlInput = new QXmlInputSource( &file );
 
  // Contruct a custom QXmlDefaultHandler-derived handler
  SAXHandler* handler = new SAXHandler( m_tree );
 
  // Use our own class as both content and error handler
  // m_reader is of type QXmlSimpleReader 
  m_reader.setContentHandler( handler );
  m_reader.setErrorHandler( handler );
  m_reader.parse( xmlInput );

TSS001493 - DOM parser comparison in Symbian/S60 and Qt

Forum Nokia KB — Mon, 23 Nov 2009 13:01:14 GMT

Knowledge Base Home

ID	TSS001493	Creation date	November 23, 2009
Platform	S60 3rd Edition FP2, S60 5th Edition	Devices	Nokia N96, Nokia 5800 XpressMusic
Category	Qt	Subcategory	XML

Keywords (APIs, classes, methods, functions): XML, DOM Parser

Overview

This article provides a comparison of Document Object Model (DOM) parser in Symbian/S60 and Qt.

Description

DOM provides an interface to access and change the content and structure of an XML file. It makes a hierarchical (tree) view of the document. Thus, in contrast to the SAX2 interface, an object model of the document is resident in memory after parsing which makes manipulation easy. For more information, visit http://www.w3.org/DOM/

Comparison of DOM parsing in Symbian/S60 and Qt

Operation	Symbian/S60 5th Edition	Qt on Symbian
Library/Module	XmlEngineDom.lib	QtXml Module
DOM Document	`RXmlEngDocument`	`QDomDocument`
Creating (parsing)a DOM tree	`RXmlEngDOMParser::ParseFileL()`	`QDomDocument::setContent()`
Extracting root (document) element	`RXmlEngDocument::DocumentElement()`	`QDomDocument::documentElement()`
DOM elements	`TXmlEngElement`	`QDomElement`
Traversing nodes	`TXmlEngNode::FirstChild()` to get the first child (if any), `TXmlEngNode::NextSibling()` to traverse. Also see `LastChild(), <tt>PreviousSibling()` and `ParentNode()`. To find a node with a particular name, use `Name()`.	`QDomNode::firstChild()` to get the first child (if any), and `QDomNode::nextSibling()` to traverse. Also see `lastChild()`, `previousSibling()` and `parentNode()`. To find a node with a particular name, use `namedItem()`.
Extracting tag name	When `TXmlEngNode::NodeType()` is `EElement`, `TXmlEngNode::Name()` returns the tag name.	`QDomElement::tagName()` returns the tag name for an element.
Extracting attributes	Instance of the `TXmlEngAttr` class represents an XML attribute. `TXmlEngAttr::Value()` returns the attribute value. `TXmlEngElement::AttributeValueL()` returns a value of an attribute with given name and namespace URI.	Element attributes are represented by `QDomAttr` objects, queried using `QDomElement::attribute()` and `QDomElement::attributeNode()`. `QDomAttr::value()` returns the attribute value. `QDomAttr::name()` returns the attribute name.
Extracting text of the element	`TXmlEngElement::Text()` returns the content of the element. `TXmlEngTextNode` interface inherits from `TXmlEngCharacterData` and represents the textual content ("character data" in XML) of an element or attribute. `TXmlEngCharacterData::Contents()` returns the content of the node.	`QDomElement::text()` returns text for the element. To find all text in all of node's children, iterate over the children looking for `QDomText` nodes and get the text using `QDomText::data()`.
XML comments	`TXmlEngComment`	`QDomComment`
XML processing instructions	`TXmlEngProcessingInstruction`	`QDomProcessingInstruction`
CDATA sections	`TXmlEngCDATASection`	`QDomCDATASection`

Sample Qt code for DOM parser

The following code snippet creates a tree view from an XML document with all the tags, content, and attributes.

QDOMSimple::QDOMSimple( QWidget *parent )
  : QWidget( parent )
    {
    // DOM document
    QDomDocument doc( "title" );
    // Opening the XML file to be parsed
    QFile file( XMLFILENAME );
    if ( file.open( QIODevice::ReadOnly | QIODevice::Text ) ) {
      // The tree view to be filled with xml data 
      // (m_tree is a class member variable)
      m_tree = new QTreeWidget( this );
      // Creating the DOM tree
      doc.setContent( &file );
      file.close();
      // Root of the document
      QDomElement root = doc.documentElement();
      // Taking the first child node of the root
      QDomNode child = root.firstChild();
      // Setting the root as the header of the tree
      QTreeWidgetItem* header = new QTreeWidgetItem;
      header->setText( 0, root.nodeName() );
      m_tree->setHeaderItem( header );
      // Parse until the end of document
      while ( !child.isNull() ) {
        //Convert a DOM node to DOM element
        QDomElement element = child.toElement();
        //Parse only if the node is a really an element
        if ( !element.isNull() ) {
          //Parse the element recursively
          parseElement( element );
          //Go to the next sibling
          child = child.nextSiblingElement();
          }
        }
      m_tree->setGeometry( QApplication::desktop()->availableGeometry() );
      setGeometry( QApplication::desktop()->availableGeometry() );
      }
    }
 
 
  void QDOMSimple::parseElement( QDomElement& aElement, QTreeWidgetItem* aParentItem )
    {
    // A map of all attributes of an element
    QDomNamedNodeMap attrMap = aElement.attributes();
    // List all attributes
    QStringList attrList;
    for ( int i = 0; i < attrMap.count(); i++ ) {
      // Attribute name
      QString attr = attrMap.item( i ).nodeName();
      attr.append( "-" );
      // Attribute value
      attr.append( attrMap.item( i ).nodeValue() );
      attrList.append( attr );
      }
 
    QTreeWidgetItem* item;
    // Create a new view item for elements having child nodes
    if ( aParentItem ) {
      item = new QTreeWidgetItem( aParentItem );
      }
    // Create a new view item for elements without child nodes
    else {
      item = new QTreeWidgetItem( m_tree );
      }
 
    //Set tag name and the text
    QString tagNText;
    tagNText.append( aElement.tagName() );
    tagNText.append( "-" );
    tagNText.append( aElement.text() );
    item->setText( 0, tagNText );
 
    // Append attributes to the element node of the tree
    for ( int i = 0; i < attrList.count(); i++ ) {
      QTreeWidgetItem* attrItem = new QTreeWidgetItem( item );
      attrItem->setText( 0, attrList[i] );
      }
 
    // Repeat the process recursively for child elements
    QDomElement child = aElement.firstChildElement();
    while ( !child.isNull() ) {
      parseElement( child, item );
      child = child.nextSiblingElement();
      }
    }

KIS001492 - Accessing the menu bar of dialog-based applications returns a null pointer

Forum Nokia KB — Mon, 23 Nov 2009 10:14:55 GMT

Knowledge Base Home

ID	KIS001492	Creation date	November 23, 2009
Platform	S60 3rd Edition (All Feature Packs) S60 5th Edition	Devices	All (S60)
Category	Symbian C++	Subcategory	UI

Keywords (APIs, classes, methods, functions): MenuBar()

Overview

Accessing the menu bar of dialog-based applications, for example to modify menu contents at runtime, returns a null pointer if no menu bar is defined in resources.

Description

CEikonEnv::Static()->AppUiFactory()->MenuBar() can be used in an S60 UI application to access the menu bar (a pointer to the CEikMenuBar instance), defined in the EIK_APP_INFO resource as follows:

RESOURCE EIK_APP_INFO
   {
   menubar = r_myapp_menu_bar;          /* a link to a MENU_BAR resource */
   cba = R_AVKON_SOFTKEYS_OPTIONS_EXIT;
   }

A dialog-based application that omits the menubar definition will receive a null pointer when trying to access the menu bar using the above function.

Solution

Define a menu bar in the EIK_APP_INFO resource for a dialog-based application, then use the following buttons definition in the DIALOG resource:

RESOURCE DIALOG r_myapp_main_dialog
   {  
   buttons = R_AVKON_SOFTKEYS_OPTIONS_EXIT;
   ...
   }

As a result, the menu bar (Options menu) can be accessed with CEikonEnv::Static()->AppUiFactory()->MenuBar().

Adding a Guarana UI button on a web page

Tapla — Mon, 23 Nov 2009 14:16:07 GMT

ID		Creation date	November 23, 2009
Platform		Tested on devices	Nokia N97
Category	Web Runtime (WRT)	Subcategory	Guarana UI, UI

Keywords (APIs, classes, methods, functions):

Overview

This code snippet demonstrates how to add a button on a web page using Guarana UI components. The button component looks like this:

You can download the component library from Forum Nokia. The button component requires the following files from the library:

lib/jquery/jquery.js
src/core.js
src/defaults.js
src/dom.js
src/util.js
src/widget.js
src/button.js
themes/nokia/base/base.css
themes/nokia/base/button.css
themes/nokia/base/custom.css
themes/nokia/base/images/shadow.png (from base.css)
themes/nokia/base/images/shadow-c.png (from base.css)
themes/nokia/base/images/shadow-lr.png (from base.css)
themes/themeroller/default-theme/ui.accordion.css
themes/themeroller/default-theme/ui.all.css
themes/themeroller/default-theme/ui.base.css
themes/themeroller/default-theme/ui.core.css
themes/themeroller/default-theme/ui.theme.css
themes/themeroller/default-theme/images/ui-bg_diagonals-thick_10_444444_40x40.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-bg_flat_0_000000_40x100.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-bg_glass_20_9f1504_640x400.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-bg_glass_40_8ab61c_640x400.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-bg_glass_55_8ab61c_640x400.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-bg_highlight-hard_80_ededed_640x100.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-bg_highlight-soft_100_ededed_640x100.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-icons_89bf43_256x240.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-icons_97B72B_256x240.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-icons_222222_256x240.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-icons_e3bfb5_256x240.png (from ui.theme.css)
themes/themeroller/default-theme/images/ui-icons_ffffff_256x240.png (from ui.theme.css)

Source: Relevant HTML components

<head>
    <!-- Guarana UI style sheets -->
    <link rel="stylesheet" href="style/themes/nokia/base/base.css"
        type="text/css" media="screen">
    <link rel="stylesheet" href="style/themes/nokia/base/button.css"
        type="text/css" media="screen">
    <link rel="stylesheet"
        href="style/themes/themeroller/default-theme/ui.all.css"
        type="text/css" media="screen">
 
    <!-- Guarana UI scripts -->
    <script type="text/javascript" src="lib/jquery/jquery.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="lib/guarana/core.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="lib/guarana/defaults.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="lib/guarana/dom.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="lib/guarana/util.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="lib/guarana/widget.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="lib/guarana/button.js"
        charset="utf-8"></script>
</head>
<body>
    <div id="bodyContent" class="bodyContent">
        <!-- A regular push button -->
        <span id="btnPush"></span>
        <!-- A toggle button -->
        <span id="btnToggle"></span>
    </div>
</body>

Source: JavaScript

// Initializes the widget
function init() {
    window.btnPush = new Nokia.Button({
        element: "#btnPush",
        label: "Push me!",
        click: function() { printString("Thank You!"); }
    });    
}

To disable the button, call the disable() function:

// Disable the push button
window.btnPush.disable();

To create a toggle button, use the keeppressed attribute:

// Initializes the widget
function init() {
    window.btnToggle = new Nokia.Button({
        element: "#btnToggle",
        keeppressed: true,
        label: "Pressed",
        pressed: true,
        width: 90,
        press: function() {
            this.setLabel("Pressed");
        },
        unpress: function() {
            this.setLabel("Unpressed");
        }
    });
}

The press() and unpress() functions above are called when the button is toggled and untoggled, respectively. The constant width attribute ensures that the width of the button is not changed when its label is changed.

Postconditions

A Guarana UI button is added on the web page.

Supplementary material

The patched, executable application that can be used to test the features described in this snippet is available for download at Media:adding_a_guarana_ui_button.zip.
You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:adding_a_guarana_ui_button.diff.zip.
For general information on applying the patch, see Using Diffs.
For unpatched stub applications, see Example stub.

TSS001491 - Retrieving the list of applications using an active connection

Forum Nokia KB — Mon, 23 Nov 2009 09:17:11 GMT

Knowledge Base Home

ID	TSS001491	Creation date	November 23, 2009
Platform	S60 3rd Edition S60 5th Edition	Devices	S60 (All)
Category	Symbian C++	Subcategory	Networking

Keywords (APIs, classes, methods, functions): RConnectionMonitor, KClientInfo

Description

The RConnectionMonitor class provides methods for resolving the UIDs of applications which are using a specific connection. The list of application UIDs is retrieved by passing a valid connection of an existing connection ID and a KClientInfo attribute for the RConnectionMonitor::GetPckgAttribute() method. The results are obtained through a package from which the UIDs can be read.

Solution

Required Headers & Libraries:

#include <rconnmon.h> // Link against connmon.lib

Code:

RConnectionMonitor monitor;
 TRequestStatus status1, status2;
 TUint connectionCount( 0 );
 TUint subConnectionCount( 0 );
 TUint connectionId( 0 );<br>
 monitor.ConnectL(); // Open RConnectionMonitor object<br>
 // Get connection count
 monitor.GetConnectionCount( connectionCount, status1 );
 User::WaitForRequest( status1 );<br>
 if ( status1.Int() != KErrNone ) 
    {
    // Handle errors
    }
 if ( connectionCount == 0 ) 
    {
    // No connection 
    }
 
 // Get connection info of the 1st connection
 TInt error = monitor.GetConnectionInfo( 1, connectionId, subConnectionCount );
 if ( error != KErrNone ) 
    { 
    // Handle errors
    }
 
 // Get connection client info
 TConnMonClientEnumBuf buf;
 monitor.GetPckgAttribute( connectionId, 0, KClientInfo, buf, status2 );
 User::WaitForRequest( status2 );
 if ( status2.Int() != KErrNone ) 
    {
    // Handle errors 
    }
 TUint clientCount = buf().iCount;  //number of clients
 for ( TInt i = 0; i < clientCount; i++ )
     {
      TUid uid = buf().iUid[i];    //UID of the client
      //...
     }
 
 monitor.Close(); // Close RConnectionMonitor object

Required Capabilities: NetworkControl

Forum Nokia Wiki - Recent changes [en]

JavaScript Performance Best Practices

Contents

JavaScript Performance Best Practices

Overview

Core JavaScript pitfalls

Avoid using eval or the Function constructor

Avoid using with

Don't use try-catch-finally inside performance-critical functions

Avoid using global variables

Avoid for-in in performance-critical functions

Use strings accumulator-style

Primitive operations can be faster than function calls

Pass functions, not strings, to setTimeout() and setInterval()

Store local references to out-of-scope variables

Tips for better loading performance

Load scripts without blocking for faster startup and to show a splash screen

Add an Expires or a Cache-Control HTTP header

Gzip JavaScript and CSS resources

Use YUI Compressor or JSMin to compress the code

Minimize the number and size of resources

Load scripts without blocking parallel downloads

Couple asynchronous scripts

Move inline scripts above stylesheets

Use iframes sparingly

Document Object Model (DOM) obscurities

Minimize the size of the DOM

Use document fragment templates for re-usability

Minimize the number of reflows and repaints

Use createDocumentFragment()

Use cloneNode()

Use HTML templates and innerHTML

Modify an invisible element

Minimize the use of operations determining the dimensions or location of elements

Make multiple predefined style changes at once using className

Make multiple dynamic style changes at once using setAttribute

CSS class name vs. style property changing

Avoid traversing large number of nodes

Avoid modifications while traversing

Cache DOM values into variables

Remove references to documents that have been closed

Object-Oriented JavaScript

Consider alternative inheritance mechanisms

Client-server communication

Set timeouts to XMLHttpRequests

Consider using a custom data exchange format for large datasets, as an alternative to XML and JSON

Animations

Use animations modestly

Use scrollTo() to animate scrolling

Absolutely or fixed position animated elements

Use one timer to animate multiple elements at the same time

Trade animation smoothness for speed

Events

Use event delegation

Throttle event handlers which fire excessively

Escaping the JavaScript call stack with setTimeout

Styling

Optimize CSS

Change CSS classes near the edges of the DOM tree

Avoid tables for layout or use table-layout: fixed

Optimize images

S60 specifics

Styling

Remove borders around focusable elements

Fix focus problems in tabbed navigation mode

Prevent elements losing focus in tabbed navigation mode

Allow animated gif images to animate after being hidden

Home Screen Widgets

Misc

Avoid background-repeat if the background-image is small relative to its containing element

jQuery Issues and Workarounds

jQuery-specifics

Minimize the use of slow jQuery methods

Optimize selectors

Consider alternatives to jQuery.each()

References

Generic

jQuery-specific

Using JSONP in WRT widget

JSONP

Escaping the JavaScript call stack with `setTimeout`