Symbian developer community

 
wiki

How to customise Web Runtime WRTKit View class

From Symbian Developer Community

Jump to: navigation, search

Overview

The WRTKit view class is an abstract container class derived by the ubiqutous ListView. View is fairly simple and easy to use class. While this is invariably an advantage while learning WRT, any developer of a more complex WRT application with multiple screens may find that there are some important features missing.

  • No support for view navigation - e.g. no direct way to go back to previous view
  • No direct way to automatically update soft keys on a per-view basis
  • No direct way to automatically kick-off View update when view is shown.

Clearly all these are easy enough to achieve in code. However, lack of these features means that every developer needs to solve the challenge for themselves and can cause proliferation of code and untidy solutions. This is however extremely easy to fix by adding these features to the WRTKit View class. The choice was made to add the functions to View in order to offer the benefit to any subclasses other than ListView.

After the View is modified as below, the only change to widget should be to use
theview.show()
instead of uiManager.setView(theview).

Features

With this change, we can:

  • Set the previous view on any view to have the Back button shown (theview.previousView=anotherView)
  • Adjust menu for each view by overriding the setupSoftKeys function
  • Refresh the view by implementing the update function. If you add a refresh option to a view (e.g. reload rss feed), the update function comes in handy as well
  • If the previousView is set:
    • The right softkey will automatically have a "Back" label and associated event handler
    • You have a neat way to programmatically navigate to previous View

Note that no existing code is modified. Also, this is a fully compatible change - nothing will stop working or be affected in any way by adding these functions.

Code

Here is the summary of added code:

  • Added the previousView field to maintain the view we want to be shown if a user selects "Back"
  • Added update() function that is called before view is shown. By default this function does nothing.
  • Added setupSoftKeys() function that is called before view is shown.
    • This function can be used to build and show View-specific soft-key menus.
    • By default, this function controls the right soft-key label and action as follows:
      • If the previousView is set, right soft-key is set to "Back" and associated event is handled by calling goBack()
      • If the previousView is not set, no change to the right soft-key label or action is made
  • Added goBack() function that can be called to switch to previous view at any time.
    • If previousView is not set, this function does nothing.
  • Added show() function that should be used to switch to this view


 
 
// Maintains the previous view to support Back function
View.prototype.previousView = null;
 
 
// ////////////////////////////////////////////////////////////////////
// Added functions
 
// set up soft keys. Default implementation sets right soft
// key to Back if the previous view is set
View.prototype.setupSoftKeys = function() {
if (window.widget) {
if (this.previousView != null) {
var self = this;
menu.setRightSoftkeyLabel("Back", function(){self.goBack();});
}
}
}
 
// show the view - sets up soft keys
View.prototype.show = function () {
this.setupSoftKeys();
this.update(false);
uiManager.setView(this);
}
 
 
// Default back button handler takes us to previous view
// if one is set
View.prototype.goBack = function() {
if ( this.previousView != null ) {
// transition looks funky
if (window.widget) {
widget.prepareForTransition("fade");
}
this.previousView.show();
if (window.widget) {
widget.performTransition();
}
}
}
 
// abstract function for updating page content
View.prototype.update = function(forceUpdate){
}
 
 

Comments

Sign in to comment…