Using screen controls

A control is a user interface element that the user can interact with. Controls are used in PC applications, on web pages, and in mobile device applications. In widgets, you can use HTML form and control elements or create JavaScript objects.

HTML controls

You can use the following standard HTML controls:

  • Push buttons—Perform functions as specified by scripts that you associate with the button event attribute.

  • 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 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.

Handling HTML 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

Create controls within a form element. In the following example, user input is collected in a text field and sent to the service when users select a button. The response from the server is displayed on the screen.

<body>
<form name="htmlForm" method="POST" action="javascript:formSend();">
Enter Stock Symbol:<br />
<input type="text" name="sendField" value="" /><br />
<input type="submit" value="Send" /><br />
<br />
Stock Details:<br />
<p><b>Name: </b><span id="name"></span><br />
<b>Current: </b><span id="current"></span><br />
<b>Change: </b><span id="change"></span><br />
</body>

Figure: Stock widget

For more information on the above example, see How to Create a Stock Widget using Webservices.

Using JavaScript controls

You can create JavaScript objects that contain the state and implement the behavior of a control. The controls take care of drawing themselves, including changing their appearance as a result of various state changes.

To use JavaScript controls

Create JavaScript to add screen controls. The following example adds a text box and a button.

var helloButton;
var nameField;

...
    // Add a text box to the view
    nameField = new TextField(null, "Enter your name");
    mainView.addControl(nameField);
    
    // Add a button to the view
    helloButton = new FormButton(null, "Say Hello!");
    helloButton.addEventListener("ActionPerformed", helloButtonClicked);
    mainView.addControl(helloButton);

Figure: Hello World! widget

© Nokia 2008.