Avoiding screen flickering in Symbian Web Runtime
This code snippet demonstrates how to avoid screen flickering while changing several HTML elements at once and one by one.
Article Metadata
Code Example
Tested with
Compatibility
Article
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.
- The patched, executable application that can be used to test the features described in this snippet is available for download at Media:Avoiding flickering in WRT.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:AvoidingScreenFlickering.diff.zip.
- For general information on applying the patch, see Using Diffs.
- For unpatched stub applications, see Example app stubs with logging framework.
(no comments yet)