STEW: managing user interaction

This section contains an example of how users interact with a view and how you save and load persistent data.

Figure: STEW Login view

The LoginScreen.js file implements the functionality of the STEW Login view. For more information on how to implement the functionality of the other STEW views, see UpdateScreen.js, SearchScreen.js, and SettingsScreen.js.

In the LoginScreen function, the onclick event handler is assigned to the Login button and the values of the screen controls that collect user input (Username, Password, and Remember Me ) are remembered.

function LoginScreen() {
	// Get the login button element and assign an event handler to it.
	var self = this;
	var loginButton = document.getElementById( "login_button" );
	loginButton.onclick = function() {
		 self.onLoginClicked();
	};
	
	// Get all the UI elements that we can interact with.
	this.tbUsername = document.getElementById( "login_username" );
	this.tbPassword = document.getElementById( "login_password" );
	this.cbRememberMe = document.getElementById( "login_remember_me" );	
}

Saving persistent data

The onclick event handler triggers the activation of the next view. Users can specify settings to determine which view appears after the Login view, so the logic needs to find out which view is the default view.

If the user checks the Remember Me check box, the credentials are stored. This is done by calling the WRT widget.setPreferenceForKey and widget.preferenceForKey API methods after reading the input for Username, Password, and the Remember Me check box.

LoginScreen.prototype.onLoginClicked = function() {
	var username = this.tbUsername.value;
	var password = this.tbPassword.value;
	var rememberMe = this.cbRememberMe.checked;
			
	// Save the data to the storage if the user checked "Remember Me".
	widget.setPreferenceForKey( rememberMe.toString(), LoginScreen.KEY_REMEMBER_ME );
	// If "Remember Me" is unchecked, the username and password are cleared because
	// default values for username and password values are null.
	widget.setPreferenceForKey( rememberMe ? username : null, LoginScreen.KEY_USERNAME );
	// REMEMBER: Never store passwords uncoded. See encryption algorithms on
	// how to encode the password before saving it.
	widget.setPreferenceForKey( rememberMe ? password : null, LoginScreen.KEY_PASSWORD );
	
	// Remember the username and password.
	twitterService.setCredentials( username, password );
	
	// Check which view is the startup view.
	var startupPage = widget.preferenceForKey( SettingsScreen.KEY_STARTUP_PAGE );
	if ( startupPage == SettingsScreen.SEARCH_PAGE ) {
		widgetMenu.activate( Menu.SEARCH_SCREEN );
	} else {
		widgetMenu.activate( Menu.UPDATE_STATUS_SCREEN );
	} 
}

The startup view is stored into the startupPage variable by calling the widget.preferenceForKey API method. The code checks whether the Search view is the startup view. If not, the Update status view is displayed.

Loading persistent data

The button menu calls the onActivated function to inform views that they are being activated. In the Login view, this function is implemented and credentials are read if they were saved when users previously used the application. If the value of the key for Remember Me check box is set to true, the function loads the username and password from the widget store using the predefined key constants LoginScreen.KEY_USERNAME and LoginScreen.KEY_PASSWORD.

LoginScreen.prototype.onActivated = function() {
	// Check if any credentials were stored - if they were, load them
	// up and prefill the screen.
	var rememberMe = widget.preferenceForKey( LoginScreen.KEY_REMEMBER_ME );	
	if ( rememberMe == "true" ) {
		// Load up the rest; username and password.
		var username = widget.preferenceForKey( LoginScreen.KEY_USERNAME );
		var password = widget.preferenceForKey( LoginScreen.KEY_PASSWORD );

		// Assign to UI controls. Also check if username and passwords are not null;
		// the reason for this is that the user can also check the Remember Me checkbox
		// on the settings view.
		if ( username != null ) {
			this.tbUsername.value = username;	
		}
		if ( password != null ) {
			this.tbPassword.value = password;
		}		
		this.cbRememberMe.checked = true;
	} else {
		this.tbUsername.value = "";	
		this.tbPassword.value = "";
		this.cbRememberMe.checked = false;		
	}
}

Logging users in automatically

If users save their credentials in STEW, they are logged into Twitter automatically when they start STEW. The following code checks that users stored valid credentials and calls the onLoginClicked function, which is also called when users select the Login button.

LoginScreen.prototype.loginIfPossible = function(){
	var username = this.tbUsername.value;
	var password = this.tbPassword.value;
	var rememberMe = this.cbRememberMe.checked;

	// If username and password are provided then login automatically.
	if ( rememberMe && username && username.length && password && password.length ) {
		this.onLoginClicked();
	}	
}

Providing users with tactile feedback

Tactile feedback is only triggered when a user interacts with a link element. To provide tactile feedback for screen controls specified as div elements, for example, call the WrtHelper tactileFeedback function.

For more information, see Providing tactile feedback for user actions.

© Nokia 2009.