====== O4W for HTML Users Guide (Web) ======

======   ======

==== Created at 21 FEB 2012 03:34PM ====




O4W API calls generate HTML in addition to javascript, and occasionally it is useful to know which O4W call generates which HTML.  For example, when searching the internet for a particular solution to a problem, the results will usually be displayed as  regular  HTML; to convert that information into useable O4W calls, it is important to know which O4W calls will return the desired HTML.  The following is a non-exhaustive list of the HTML generated by O4W.

 

|<div>                          |O4WSECTIONSTART                                                     |
|<span>                         |O4WSECTIONSTART<sup>1</sup>, O4WSPACE, O4WHEADER, O4WFOOTER, O4WTEXT|
|<fieldset>                     |O4WSECTIONSTART<sup>1</sup>                                         |
|<form>                         |O4WSECTIONSTART<sup>1</sup>                                         |
|<canvas>                       |O4WSECTIONSTART<sup>1</sup>                                         |
|</div>                         |O4WSECTIONEND                                                       |
|</span>                        |O4WSECTIONEND                                                       |
|</fieldset>                    |O4WSECTIONEND                                                       |
|</form>                        |O4WSECTIONEND                                                       |
|</canvas>                      |O4WSECTIONEND                                                       |
|<h1>,<h2>,..                   |O4WHEADER, O4WFOOTER                                                |
|<table>                        |O4WTABLESTART<sup>2</sup>                                           |
|</table>                       |O4WTABLEEND                                                         |
|<th>                           |O4WTABLEHEADER<sup>2</sup>                                          |
|<textarea>                     |O4WTEXTAREA                                                         |
|<title>                        |O4WTITLE                                                            |
|<input type="text">            |O4WTEXTBOX<sup>3</sup>                                              |
|<input type="hidden">          |O4WSTORE                                                            |
|<input type="checkbox">        |O4WCHECKBOX                                                         |
|<input type="radio">           |O4WRADIOBUTTON                                                      |
|<input type="number">          |O4WNUMBERBOX                                                        |
|<input type="button">          |O4WBUTTON                                                           |
|<input type="submit">          |O4WBUTTON                                                           |
|<input type="password">        |O4WPWDBOX                                                           |
|<input type="file">            |O4WUPLOADBOX                                                        |
|<input type="image">           |O4WIMAGEBUTTON                                                      |
|<ol>                           |O4WLISTSTART                                                        |
|<ul>                           |O4WLISTSTART                                                        |
|</ol>                          |O4WLISTEND                                                          |
|</ul>                          |O4WLISTEND                                                          |
|<li>                           |O4WLISTITEM                                                         |
|<a>                            |O4WLINK, O4WIMAGE                                                   |
|<select>                       |O4WLISTBOX<sup>4</sup>, O4WLISTBOXSTART                             |
|</select>                      |O4WLISTBOX<sup>4</sup>, O4WLISTBOXEND                               |
|<option>                       |O4WLISTBOX                                                          |
|<optgroup>                     |O4WLISTBOX                                                          |
|<br />                         |O4WBREAK                                                            |
|<span class='ui-icon'>         |O4WICONBUTTON                                                       |
|<hr>                           |O4WDIVIDER                                                          |
|&nbsp;                         |O4WSPACE                                                            |
|<p>                            |O4WTEXT                                                             |
|<img>                          |O4WIMAGE                                                            |
|<pre>                          |O4WFIXEDTEXT                                                        |
|<meta>                         |O4WMETATAG                                                          |
|<script type="text/javascript">|O4WSCRIPT                                                           |
|<link rel="stylesheet">        |O4WSTYLESHEET                                                       |
|raw html                       |O4WRAW                                                              |

 

Notes:

1. Although these API calls are conceptually generated by these calls, they are actually instantiated during the O4WSECTIONEND call

2. Although these API calls are conceptually generated by these calls, they are actually instantiated during the O4WTABLEEND call

3. The particular input type generated can be altered by applying the O4WINPUTBOXOPTIONS or O4WTEXTBOXOPTIONS APIs

4. If not explicitly created via the O4WLISTBOXSTART, or ended with the O4WLISTBOXEND, API calls, O4WLISTBOX will automatically create and end the list box

 

O4W also generates attributes and styles that can be applied to the HTML.  The following is a non-exhaustive list of the attributes and styles that are generated:

|color                                             |O4WCOLORS, O4WCOLORSTYLE                      |
|background-color                                  |O4WCOLORS, O4WCOLORSTYLE                      |
|background-image                                  |O4WCOLORS, O4WCOLORSTYLE                      |
|left                                              |O4WPOSITIONSTYLE                              |
|top                                               |O4WPOSITIONSTYLE                              |
|position                                          |O4WPOSITIONSTYLE                              |
|float                                             |O4WPOSITIONSTYLE                              |
|clear                                             |O4WPOSITIONSTYLE                              |
|width                                             |O4WSIZESTYLE                                  |
|height                                            |O4WSIZESTYLE                                  |
|min-width                                         |O4WSIZESTYLE                                  |
|min-height                                        |O4WSIZESTYLE                                  |
|max-width                                         |O4WSIZESTYLE                                  |
|max-height                                        |O4WSIZESTYLE                                  |
|text-align                                        |O4WALIGNSTYLE, O4WTABLECELLSTYLE, O4WTEXTSTYLE|
|vertical-align                                    |O4WALIGNSTYLE, O4WTABLECELLSTYLE              |
|colspan                                           |O4WTABLECELLOPTIONS                           |
|rowspan                                           |O4WTABLECELLOPTIONS                           |
|border-style                                      |O4WTABLESTYLE                                 |
|border-width                                      |O4WTABLESTYLE                                 |
|color a:link                                      |O4WLINKSTYLE                                  |
|color a:visited                                   |O4WLINKSTYLE                                  |
|disabled                                          |O4WINPUTOPTIONS                               |
|readOnly                                          |O4WINPUTOPTIONS                               |
|autocomplete                                      |O4WINPUTOPTIONS                               |
|font-family                                       |O4WTEXTSTYLE                                  |
|font-weight                                       |O4WTEXTSTYLE                                  |
|font-style                                        |O4WTEXTSTYLE                                  |
|font-size                                         |O4WTEXTSTYLE                                  |
|list box attributes (multiple select, #rows, etc.)|O4WLISTBOXSTYLE, O4WLISTBOXOPTIONS            |
|any attribute                                     |O4WATTRIBUTESTYLE                             |
|any style                                         |O4WRAWSTYLE                                   |

 

Note: Any user-defined CSS class can be applied by explicitly providing a CSS class name as the (or one of the) values to the  style  parameter available to most O4W calls.  These user-defined styles can be created via the O4W style API calls, included in a stylesheetvia the O4WSTYLESHEET call, or manually included in the template used by O4W.

 

To support both mobile devices and newer (HTML5) browsers, O4W now includes a variety of HTML5 compliant APIs, including:

|input type     |O4WINPUTBOXOPTIONS, O4WTEXTBOXOPTIONS|
|minimum value  |O4WINPUTBOXOPTIONS                   |
|maximum value  |O4WINPUTBOXOPTIONS                   |
|step value     |O4WINPUTBOXOPTIONS                   |
|placeholder    |O4WINPUTBOXOPTIONS                   |
|required flag  |O4WINPUTBOXOPTIONS                   |
|auto focus     |O4WINPUTBOXOPTIONS                   |
|label for      |O4WTEXTOPTIONS                       |
|label type     |O4WTEXTOPTIONS                       |
|paragraph class|O4WTEXTOPTIONS                       |
|legend         |O4WFIELDSETOPTIONS                   |
|title attribute|O4WHELPSTYLE                         |

 

|data-role         |O4WMOBILEOPTIONS                                              |
|data-theme        |O4WMOBILEOPTIONS, O4WMOBILEBUTTONOPTIONS, O4WMOBILEPAGEOPTIONS|
|data-icon         |O4WMOBILEBUTTONOPTIONS                                        |
|data-transition   |O4WMOBILEBUTTONOPTIONS                                        |
|data-role="button"|O4WMOBILEBUTTONOPTIONS                                        |
|data-role="page"  |O4WMOBILEPAGEOPTIONS                                          |
|any data attribute|O4WMOBILESTYLE                                                |