Creating the widget HTML file

To create the main HTML file of a widget:

  1. Create a standard HTML document for defining the structure of the widget.

    It is recommended that the HTML document follow the HTML 4.01 specifications and the strict DTD.

    To ease the use and implementation of the HTML file and other widget component files, it is recommended that you use external style sheets and JavaScript code files for controlling the layout of your widget and for implementing the operations and logic. These files are referenced through the <style> and <script> elements defined in the head of the HTML document. For more information, see sections Creating a CSS file and Creating a JavaScript file.

    The body of the HTML document defines the structure of the widget's UI. The following sample code illustrates an HTML file of a widget that has two views and that uses external style sheets and JavaScript files. The views are defined using the <div> tag and id attribute.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <style type="text/css">
			@import "horoscope.css";
  </style>
  <script type="text/javascript" src="horoscope.js" />
 </head>
 <body id="body">
    <div id="mainView">
			<h2>Chinese Horoscope</h2>
			<label for="byear">Enter your birth year:</label>
			<input type="text" id="byear" size="4" style='-wap-input-format: "4N"' />
			<input type="button" name="calc" value="Tell me"
                               onClick="showResult();">
			</input>
    </div>
    <div id="resultView">
			<p id="output" class="output"></>P
			<img id="character" src="" />
			<img id="sign" src="" />
    </div>
 </body>
</html>

    For more information on HTML, see the World Wide Web Consortium (W3C) pages.

  2. Save the HTML file under the widget project root folder with the name <Widget name>.html.

  3. Remember to define the HTML file as the value of the MainHTML property in the widget's info.plist file.

During the runtime of a widget, the main HTML document must not be replaced by any other HTML document. In other words, after the main HTML document of a widget is loaded, widget contents can only be displayed within the main HTML context. If a widget needs to load an extra HTML page, it must do this using the Web Browser for S60 application in a stand-alone mode. For more information on loading HTML pages, see the openURL() method in the Web Runtime API reference.

© Nokia 2009.