|
1 |
|
2 <!DOCTYPE html |
|
3 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Creating HTML controls"/><meta name="DC.Relation" scheme="URI" content="GUID-1666F263-F1CB-4928-B2A7-E518B43983BA"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-6DD2B3D2-BA3B-4936-BBC9-F61B6757B6F8"/><meta name="DC.Relation" scheme="URI" content="GUID-13E2DE63-47E5-4E2A-85FF-C8B0CAB9D4DE"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-C4B403C9-FA4D-47E2-821B-53FE7ACC33E3"/><meta name="DC.Language" content="en"/><title>Creating HTML controls </title><script type="text/javascript"> |
|
5 function initPage() {} |
|
6 </script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-C4B403C9-FA4D-47E2-821B-53FE7ACC33E3">Creating HTML controls</h1><div> |
|
7 <p>You can use the following standard HTML controls:</p> |
|
8 <ul> |
|
9 <li><p>Push buttons—Perform functions as specified by JavaScript that you associate with the button <code>onclick</code> event.</p></li> |
|
10 <li><p>Check boxes—Allow users to select options by turning them on and off.</p></li> |
|
11 <li><p>Radio buttons—Allow users to select options by turning them on and off. Only one radio button can be turned on at a time.</p></li> |
|
12 <li><p>Menus—Offer users options to choose from.</p></li> |
|
13 <li><p>Text fields—Allow users to input text. For more information, see <a href="GUID-1666F263-F1CB-4928-B2A7-E518B43983BA.html#GUID-1666F263-F1CB-4928-B2A7-E518B43983BA">Handling text input</a>.</p></li> |
|
14 <li><p>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.</p></li> |
|
15 <li><p>Object controls—Allow you to submit associated values with other controls.</p></li> |
|
16 </ul> |
|
17 <p>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. </p> |
|
18 <div><h3>To use HTML controls</h3><ol> |
|
19 <li id="GUID-E6243D93-E862-481F-9E8F-4C9506A45502"><a name="GUID-E6243D93-E862-481F-9E8F-4C9506A45502"><!----></a><p>Use the HTML <code>input</code> element to create screen controls, such as text fields, check boxes, and buttons.</p><pre class="codeblock"><div class="login_container"> |
|
20 <table cellspacing="0"> |
|
21 <tr> |
|
22 <th>Login</th> |
|
23 </tr> |
|
24 <tr> |
|
25 <td>Please login using you Twitter credentials...</td> |
|
26 </tr> |
|
27 <tr> |
|
28 <td class="table_subtitle">Username</td> |
|
29 </tr> |
|
30 <tr> |
|
31 <td class="input_container"> |
|
32 <input id="login_username" type="text"> |
|
33 </td> |
|
34 </tr> |
|
35 <tr> |
|
36 <td class="table_subtitle">Password</td> |
|
37 </tr> |
|
38 <tr> |
|
39 <td class="input_container"> |
|
40 <input id="login_password" type="password"> |
|
41 </td> |
|
42 </tr> |
|
43 <tr> |
|
44 <td> |
|
45 <input id="login_remember_me" type="checkbox"><label for="login_remember_me">Remember Me</label> |
|
46 </td> |
|
47 </tr> |
|
48 <tr> |
|
49 <td class="button_container"><a id="login_button" href="#" class="button">Login</a></td> |
|
50 </tr> |
|
51 </table> |
|
52 </div></pre><div class="figure" id="GUID-5BC7985B-2F1C-47B9-9E74-B1B7A825454D"><img src="GUID-38EF5741-0A6A-4A55-BDE5-4DB3F686D21E_d0e3492_href.jpg"/><p class="figure-title"><strong>Figure: </strong>STEW Login view</p></div></li> |
|
53 <li id="GUID-FD577FEC-1850-4AB9-A713-0B012223710C"><a name="GUID-FD577FEC-1850-4AB9-A713-0B012223710C"><!----></a><p>Create JavaScript to implement the functionality of the controls:</p><pre class="codeblock">function LoginScreen() { |
|
54 // Get the login button element and assign an 'onclick' event to it. |
|
55 var self = this; |
|
56 var loginButton = document.getElementById( "login_button" ); |
|
57 loginButton.onclick = function() { |
|
58 self.onLoginClicked(); |
|
59 }; |
|
60 |
|
61 // Get all the UI elements that we can interact with. |
|
62 this.tbUsername = document.getElementById( "login_username" ); |
|
63 this.tbPassword = document.getElementById( "login_password" ); |
|
64 this.cbRememberMe = document.getElementById( "login_remember_me" ); |
|
65 } |
|
66 |
|
67 LoginScreen.prototype.onLoginClicked = function() { |
|
68 var username = this.tbUsername.value; |
|
69 var password = this.tbPassword.value; |
|
70 var rememberMe = this.cbRememberMe.checked; |
|
71 |
|
72 // Save the data to the storage if the user checked "Remember Me". |
|
73 widget.setPreferenceForKey( rememberMe.toString(), LoginScreen.KEY_REMEMBER_ME ); |
|
74 // If "Remember Me" is unchecked, the username and password are cleared because |
|
75 // default values for username and password values are null. |
|
76 widget.setPreferenceForKey( rememberMe ? username : null, LoginScreen.KEY_USERNAME ); |
|
77 // REMEMBER: Never store passwords uncoded. See encryption algorithms on |
|
78 // how to encode the password before saving it. |
|
79 widget.setPreferenceForKey( rememberMe ? password : null, LoginScreen.KEY_PASSWORD ); |
|
80 |
|
81 // Remember the username and password. |
|
82 twitterService.setCredentials( username, password ); |
|
83 |
|
84 // Check which page is the startup page. |
|
85 var startupPage = widget.preferenceForKey( SettingsScreen.KEY_STARTUP_PAGE ); |
|
86 if ( startupPage == SettingsScreen.SEARCH_PAGE ) { |
|
87 widgetMenu.activate( Menu.SEARCH_SCREEN ); |
|
88 } else { |
|
89 widgetMenu.activate( Menu.UPDATE_STATUS_SCREEN ); |
|
90 } |
|
91 }</pre></li> |
|
92 </ol></div> |
|
93 </div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html> |