STEW: adding JavaScript to drive the widget logic
In the STEW example, JavaScript files are used to implement widget functionality.
+Implementing the button menu
Figure: STEW button menu
The logic for the button menu is implemented in the Menu.js file. A click event handler is assigned to each button by calling the document.getElementById function to retrieve the DOM element of each button. An activate function is assigned to the onclick event handler and executed when the handler is triggered. The function takes the ID of the button as a parameter. It is important to call the function in the correct context.
function Menu() {
+ var self = this;
+
+ // Handle clicks from menu buttons to activate the relevant views.
+ var updateButton = document.getElementById( "button_update" );
+ updateButton.onclick = function() {
+ self.activate( Menu.UPDATE_STATUS_SCREEN );
+ };
+ var searchButton = document.getElementById( "button_search" );
+ searchButton.onclick = function() {
+ self.activate( Menu.SEARCH_SCREEN );
+ };
+ var settingsButton = document.getElementById( "button_settings" );
+ settingsButton.onclick = function() {
+ self.activate( Menu.SETTINGS_SCREEN );
+ };
+}
+Implementing title bar buttons
The STEW title bar displays the widget title as well as Logout and Exit buttons.
Figure: STEW title bar
The logic for the title bar buttons is also implemented in the Menu() function:
var logoutButton = document.getElementById( "button_logout" );
+logoutButton.onclick = function() { widgetMenu.activate( Menu.LOGIN_SCREEN ); };
+var exitButton = document.getElementById( "button_exit" );
+exitButton.onclick = function() { window.close(); };
+Changing views
The activate function shows and hides views according to the view ID that it receives as a parameter. Switching from one view to another requires a major screen update, and therefore the WRT widget.prepareForTransition and widget.performTransition methods are used. This prevents screen flicker and adds a fade effect when the views change.
Menu.prototype.activate = function( screenId ) {
+ widget.prepareForTransition( "fade" );
+
+ Helper.show( "menu_strip", screenId != Menu.LOGIN_SCREEN );
+
+ // Show the desired screen.
+ Helper.show( Menu.LOGIN_SCREEN, screenId == Menu.LOGIN_SCREEN );
+ Helper.show( Menu.UPDATE_STATUS_SCREEN, screenId == Menu.UPDATE_STATUS_SCREEN );
+ Helper.show( Menu.SEARCH_SCREEN, screenId == Menu.SEARCH_SCREEN );
+ Helper.show( Menu.SETTINGS_SCREEN, screenId == Menu.SETTINGS_SCREEN );
+
+ // Update the menu strip manually.
+ // Activate the selected button.
+ this._activateButton( screenId );
+ }
+
+ // Known issue: Below line doesn't work if the activation comes from widget's submenu.
+ //widget.performTransition();
+ setTimeout ( "widget.performTransition();", 0 );
+}
+The code above uses a helper function called show to show and hide views. The function is located in the Helper.js file. The function retrieves the DOM element of the ID it accepts as a parameter and assigns or deletes a hidden style to or from it by using the className property.
Activating views
The logic behind each view needs to be informed that the view is being activated, so that the functions assigned to views can be performed when the view is shown. For example, reload data from the storage in the Settings view, refresh data in the Update Status view, and so on. Each view implements an onActivated function to receive notification when it is activated.
if ( screenId == Menu.LOGIN_SCREEN ) {
+ loginScreen.onActivated();
+} else if ( screenId == Menu.UPDATE_STATUS_SCREEN ) {
+ updateScreen.onActivated();
+} else if ( screenId == Menu.SEARCH_SCREEN ) {
+ searchScreen.onActivated();
+} else if ( screenId == Menu.SETTINGS_SCREEN ) {
+ settingsScreen.onActivated();
+}
+