×
Namespaces

Variants
Actions
Revision as of 08:47, 4 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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
Compatibility
Platform(s): S60 5th Edition, S60 3rd Edition FP2
S60 5th Edition
S60 3rd Edition FP2
Article
Keywords: widget.prepareForTransition(), widget.performTransition()
Created: dekuykin (26 Feb 2009)
Last edited: hamishwillee (04 Oct 2012)

Contents

Overview

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">
<tr>
<td id="green">
<input type="button" id="buttongreen" size="20"
value="GREEN" onclick="switchColor('green');" />
</td>
<td class="tdText">
<textarea id="greentext" name="colorText" rows="1" cols="30"
readonly="readonly">
</textarea>
</td>
</tr>
<tr>
<td id="blue">
<input type="button" id="buttonblue" size="20"
value="BLUE" onclick="switchColor('blue');" />
</td>
<td class="tdText">
<textarea id="bluetext" name="colorText" rows="1" cols="30"
readonly="readonly">
</textarea>
</td>
</tr>
<tr>
<td id="red">
<input type="button" id="buttonred" size="20"
value="RED" onclick="switchColor('red');" />
</td>
<td class="tdText">
<textarea id="redtext" name="colorText" rows="1" cols="30"
readonly="readonly">
</textarea>
</td>
</tr>
</table>
<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() {
setDefaultSettings();
}
 
/**
* 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
window.menu.showSoftkeys();
}
 
/**
* 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
window.widget.prepareForTransition("fade");
}
 
// 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
window.widget.performTransition();
}
 
// Update current color variable
currentColor = newColor;
}

Postconditions

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 08:47.
111 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.

×