Avoiding screen flickering in Symbian Web Runtime

From Nokia Developer Wiki
Jump to: navigation, search

This code snippet demonstrates how to avoid screen flickering while changing several HTML elements at once and one by one.

Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic, Nokia 6220 Classic
Platform(s): S60 5th Edition, S60 3rd Edition FP2
S60 5th Edition
S60 3rd Edition FP2
Keywords: widget.prepareForTransition(), widget.performTransition()
Created: dekuykin (26 Feb 2009)
Last edited: hamishwillee (04 Oct 2012)



The method widget.prepareForTransition(String transitionMode) is used to prepare a widget for a transition state before modifying the widget view by disabling updates to the widget UI.

transitionMode is a text string that defines the desired transition mode. Here, transitionMode = "fade" is used to achieve a fading effect.

The method widget.performTransition() is used to update the widget screen. It performs the animation while the widget's view is being changed.

Source file: Relevant HTML components

<table id="mainTable" class="mainTable">
<td id="green">
<input type="button" id="buttongreen" size="20"
value="GREEN" onclick="switchColor('green');" />
<td class="tdText">
<textarea id="greentext" name="colorText" rows="1" cols="30"
<td id="blue">
<input type="button" id="buttonblue" size="20"
value="BLUE" onclick="switchColor('blue');" />
<td class="tdText">
<textarea id="bluetext" name="colorText" rows="1" cols="30"
<td id="red">
<input type="button" id="buttonred" size="20"
value="RED" onclick="switchColor('red');" />
<td class="tdText">
<textarea id="redtext" name="colorText" rows="1" cols="30"
<input type="checkbox" id="mode" /><strong>Non-flickering mode</strong>

Source file: JavaScript file

// Current main color
var currentColor = 'green';
window.onload = init;
// Initializes the widget
function init() {
* Sets default application view settings.

function setDefaultSettings() {
// Set default main color to 'green'
currentColor = 'green';
// Hide the button corresponding to 'green' color
document.getElementById('buttongreen').style.display = 'none';
// Set other buttons visible
document.getElementById('buttonblue').style.display = 'block';
document.getElementById('buttonred').style.display = 'block';
// Set default background color
document.getElementById('green').style.backgroundColor = 'green';
document.getElementById('blue').style.backgroundColor = 'white';
document.getElementById('red').style.backgroundColor = 'white';
// Set default text captions
document.getElementById('greentext').innerHTML = 'GREEN COLOR IS SWITCHED ON';
document.getElementById('bluetext').innerHTML = 'SWITCHED OFF';
document.getElementById('redtext').innerHTML = 'SWITCHED OFF';
// Show the softkeys
* Changes the main color of application view.
* @param newColor a new color to be applied as main color.

function switchColor(newColor) {
// Construct id of button which was clicked before
var lastClickedButtonId = "button" + currentColor;
// Check if non-flickering mode is enabled
if (document.getElementById('mode').checked) {
// Set non-flickering mode
// Show the button which was clicked before
document.getElementById(lastClickedButtonId).style.display = 'block';
// Reset the main color
document.getElementById(currentColor).style.backgroundColor = 'white';
// Construct id of new clicked button
var newClickedButtonId = "button" + newColor;
// Hide the clicked button
document.getElementById(newClickedButtonId).style.display = 'none';
// Set the new main color
document.getElementById(newColor).style.backgroundColor = newColor;
// Set new text captions
// Get access to text areas
var textareasArray = document.getElementsByName('colorText');
// Change text captions
for (var i = 0; i < textareasArray.length; i++) {
if (textareasArray[i].id == (newColor + 'text')) {
// Caption for color which is switched on
var newMainColorCaption = newColor + ' COLOR IS SWITCHED ON';
textareasArray[i].innerHTML = newMainColorCaption.toUpperCase();
} else {
// Set caption for color which is switched off
textareasArray[i].innerHTML = 'SWITCHED OFF';
// If non-flickering mode is enabled update screen
if (document.getElementById('mode').checked) {
// Update screen
// Update current color variable
currentColor = newColor;


When the widget is launched, a view with three buttons is shown.

At each moment only two buttons are visible. A "Non-flickering mode" checkbox is also available.

When one of the buttons is clicked, the view state is changed. If the "Non-flickering mode" checkbox is checked, the screen is updated with a fading effect, which prevents possible flickering.

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 to developers. The version of the WRT stub application used as a template in this snippet is v1.1.

This page was last modified on 4 October 2012, at 05:47.
79 page views in the last 30 days.

Was this page helpful?

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


Thank you!

We appreciate your feedback.