| author | Eugene Ostroukhov <eugeneo@symbian.org> |
| Thu, 15 Jul 2010 10:08:51 -0700 | |
| changeset 450 | ed815e0eef9a |
| parent 229 | 716254ccbcc0 |
| permissions | -rw-r--r-- |
|
229
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
1 |
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
2 |
<!DOCTYPE html |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
3 |
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
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 the widget HTML file"/><meta name="abstract" content="Separate the structure, content, layout, and functionality of a widget into different files. The HTML file defines the structure of the widget UI. Use external style sheets and JavaScript code files for controlling the layout of your widget and for implementing the operations and logic."/><meta name="description" content="Separate the structure, content, layout, and functionality of a widget into different files. The HTML file defines the structure of the widget UI. Use external style sheets and JavaScript code files for controlling the layout of your widget and for implementing the operations and logic."/><meta name="DC.Relation" scheme="URI" content="GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4"/><meta name="DC.Relation" scheme="URI" content="GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B"/><meta name="DC.Relation" scheme="URI" content="GUID-1EFD7043-E9B8-4B4E-9EA6-A20B3EECC14A"/><meta name="DC.Relation" scheme="URI" content="GUID-85179E6B-E915-4D96-A5D1-D17D7C7180C7"/><meta name="DC.Relation" scheme="URI" content="GUID-0E3095DB-03FF-4240-83F2-6D876AD2083A"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA"/><title>Creating the widget HTML file </title><script type="text/javascript"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
5 |
function initPage() {}
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
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-C294F32D-CAC7-499C-AD4B-701B9AB57ACA">Creating the widget HTML file</h1><div><p>Separate the structure, content, layout, and functionality of a widget into different files. The HTML file defines the structure of the widget UI. Use external style sheets and JavaScript code files for controlling the layout of your widget and for implementing the operations and logic.</p> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
7 |
<p>To create the main HTML file of a widget:</p> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
8 |
<ol> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
9 |
<li id="GUID-92AF675C-619B-4A61-AA2E-E94EA61CFAC7"><a name="GUID-92AF675C-619B-4A61-AA2E-E94EA61CFAC7"><!----></a><p>Create a standard HTML document for defining the structure of the widget.</p><p>It is recommended that the HTML document follow the HTML 4.01 specifications and the strict DTD.</p><p>Add references to the external style sheets and JavaScript code files that controlling the layout of the widget and implement the operations and logic through the <code><style></code> and <code><script></code> elements in the head of the HTML document. For more information on creating these files, see sections <a href="GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4.html#GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4">Creating a CSS file</a> and <a href="GUID-A942935B-ACF6-451C-8383-874BEEC52F1A.html#GUID-A942935B-ACF6-451C-8383-874BEEC52F1A">Creating a JavaScript file</a>.</p><p>The body of the HTML document defines the structure of the widget 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 <code><div></code> tag and <code>id</code> attribute.</p><pre class="codeblock" id="GUID-3A790195-104C-45B3-AE0D-78F160540390"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
10 |
<html> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
11 |
<head> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
12 |
<style type="text/css"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
13 |
@import "horoscope.css"; |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
14 |
</style> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
15 |
<script type="text/javascript" src="horoscope.js" /> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
16 |
</head> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
17 |
<body id="body"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
18 |
<div id="mainView"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
19 |
<h2>Chinese Horoscope</h2> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
20 |
<label for="byear">Enter your birth year:</label> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
21 |
<input type="text" id="byear" size="4" style='-wap-input-format: "4N"' /> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
22 |
<input type="button" name="calc" value="Tell me" |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
23 |
onClick="showResult();"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
24 |
</input> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
25 |
</div> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
26 |
<div id="resultView"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
27 |
<p id="output" class="output"></>P |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
28 |
<img id="character" src="" /> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
29 |
<img id="sign" src="" /> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
30 |
</div> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
31 |
</body> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
32 |
</html></pre><p>For more information on HTML, see the <a href="http://www.w3.org/html/" target="_blank">World Wide Web Consortium (W3C)</a> pages.</p></li> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
33 |
<li id="GUID-822E3E07-8A0F-46F0-98BE-5A70198F7385"><a name="GUID-822E3E07-8A0F-46F0-98BE-5A70198F7385"><!----></a><p>Save the HTML file under the widget project root folder with the name <code><Widget name>.html</code>.</p></li> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
34 |
<li id="GUID-FB505074-544B-4DE6-BBCB-BF382F605651"><a name="GUID-FB505074-544B-4DE6-BBCB-BF382F605651"><!----></a><p>Remember to define the HTML file as the value of the <code>MainHTML</code> property in the widget <a href="GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B.html#GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B"><code>info.plist</code></a> file.</p></li> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
35 |
</ol> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
36 |
<p>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 <a href="GUID-EFCCE3CA-A1D2-4CD0-8D10-BD6320B19E5A.html#GUID-EFCCE3CA-A1D2-4CD0-8D10-BD6320B19E5A"><code>openURL()</code></a> method in the Web Runtime API reference.</p> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
37 |
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html> |