Creating HTML controls

You can use the following standard HTML controls:

Push buttons—Perform functions as specified by JavaScript that you associate with the button onclick event.
Check boxes—Allow users to select options by turning them on and off.
Radio buttons—Allow users to select options by turning them on and off. Only one radio button can be turned on at a time.
Menus—Offer users options to choose from.
Text fields—Allow users to input text. For more information, see Handling text input.
Hidden controls—Allow you to submit values with a form and to store information between client/server exchanges that would otherwise be lost because HTTP connections are stateless.
Object controls—Allow you to submit associated values with other controls.

The HTML elements are mapped to standard S60 components on mobile devices. You can use a cascading style sheet (CSS) to define the appearance of the controls.

To use HTML controls

Use the HTML input element to create screen controls, such as text fields, check boxes, and buttons.

<div class="login_container">
+	<table cellspacing="0">
+		<tr>
+			<th>Login</th>
+		</tr>
+		<tr>
+			<td>Please login using you Twitter credentials...</td>
+		</tr>
+		<tr>
+			<td class="table_subtitle">Username</td>
+		</tr>
+		<tr>
+			<td class="input_container">
+				<input id="login_username" type="text">
+			</td>
+		</tr>
+		<tr>
+			<td class="table_subtitle">Password</td>
+		</tr>
+		<tr>
+			<td class="input_container">
+				<input id="login_password" type="password">
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<input id="login_remember_me" type="checkbox"><label for="login_remember_me">Remember Me</label>
+			</td>
+		</tr>
+		<tr>
+			<td class="button_container"><a id="login_button" href="#" class="button">Login</a></td>
+		</tr>
+	</table>
+</div>

Figure: STEW Login view

Create JavaScript to implement the functionality of the controls:

function LoginScreen() {
+	// Get the login button element and assign an 'onclick' event 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" );
+}
+
+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 page is the startup page.
+	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 );
+	} 
+}