<td style="border:none;"></td>
<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:application></span> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
</tr>
- <tr>
- <td style="border:none;"></td>
- <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:app-widget></span> (in <a href="#mw_appwidget">mobile</a> or <a href="#ww_appwidget">wearable</a>)</td>
- </tr>
- <tr>
- <td style="border:none;"></td>
- <td style="border:none;"></td>
- <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:box-label></span> (in <a href="#mw_box-label">mobile</a> or <a href="#ww_box-label">wearable</a>)</td>
- </tr>
- <tr>
- <td style="border:none;"></td>
- <td style="border:none;"></td>
- <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:box-icon></span> (in <a href="#mw_box-icon">mobile</a> or <a href="#ww_box-icon">wearable</a>)</td>
- </tr>
- <tr>
- <td style="border:none;"></td>
- <td style="border:none;"></td>
- <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:box-content></span> (in <a href="#mw_box-content">mobile</a> or <a href="#ww_box-content">wearable</a>)</td>
- </tr>
- <tr>
- <td style="border:none;"></td>
- <td style="border:none;"></td>
- <td style="border:none;"></td>
- <td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:box-size></span> (in <a href="#mw_box-size">mobile</a> or <a href="#ww_box-size">wearable</a>)</td>
- </tr>
- <tr>
- <td style="border:none;"></td>
- <td style="border:none;"></td>
- <td style="border:none;"></td>
- <td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:pd></span> (in <a href="#mw_pd">mobile</a> or <a href="#ww_pd">wearable</a>)</td>
- </tr>
-
<tr>
<td style="border:none;"></td>
<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:content></span> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>
</tr>
<tr>
<td> <p>Represents the root element of a configuration document.</p> <p><strong>Expected children:</strong> </p>
- <p><span style="font-family: Courier New,Courier,monospace"><name></span>, <span style="font-family: Courier New,Courier,monospace"><description></span>, <span style="font-family: Courier New,Courier,monospace"><author></span>, <span style="font-family: Courier New,Courier,monospace"><license></span>, <span style="font-family: Courier New,Courier,monospace"><icon></span>, <span style="font-family: Courier New,Courier,monospace"><content></span>, <span style="font-family: Courier New,Courier,monospace"><feature></span>, <span style="font-family: Courier New,Courier,monospace"><preference></span>, <span style="font-family: Courier New,Courier,monospace"><access></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:account></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:app-control></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:application></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:
app-widget></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:content></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:privilege></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:setting></span>, and <span style="font-family: Courier New,Courier,monospace"><tizen:profile></span></p> <p><strong>Attributes:</strong></p>
+ <p><span style="font-family: Courier New,Courier,monospace"><name></span>, <span style="font-family: Courier New,Courier,monospace"><description></span>, <span style="font-family: Courier New,Courier,monospace"><author></span>, <span style="font-family: Courier New,Courier,monospace"><license></span>, <span style="font-family: Courier New,Courier,monospace"><icon></span>, <span style="font-family: Courier New,Courier,monospace"><content></span>, <span style="font-family: Courier New,Courier,monospace"><feature></span>, <span style="font-family: Courier New,Courier,monospace"><preference></span>, <span style="font-family: Courier New,Courier,monospace"><access></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:account></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:app-control></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:application></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:content></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:privilege></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:setting></span>, and <span style="font-family: Courier New,Courier,monospace"><tizen:profile></span></p> <p><strong>Attributes:</strong></p>
<ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">id</span></li>
</tr>
</tbody>
</table>
-
- <h3 id="mw_appwidget" name="mw_appwidget">Dynamic Box</h3>
- <table border="1">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:app-widget /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define basic information about a Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>0 or more</li>
- </ul>
- <p><strong>Expected children:</strong> </p>
- <ul class="ul">
- <li><a href="#mw_box-label"><tizen:box-label /></a></li>
- <li><a href="#mw_box-icon"><tizen:box-icon /></a></li>
- <li><a href="#mw_box-content"><tizen:box-content /></a></li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; unique ID of the Dynamic Box in the <span style="font-family: Courier New,Courier,monospace;"><TIZEN_APPLICATION_ID>.<STRING></span> format, where <span style="font-family: Courier New,Courier,monospace;"><STRING></span> comprises 1 or more characters (0~9, a~z, A~Z).</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">primary</span> <p>Optional; indicates a primary Dynamic Box (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>)</p>
- <p>If one <span style="font-family: Courier New,Courier,monospace;"><tizen:app-widget></span> element has already set this attribute to <span style="font-family: Courier New,Courier,monospace;">true</span>, then all other <span style="font-family: Courier New,Courier,monospace;"><tizen:app-widget></span> elements must set this attribute to <span style="font-family: Courier New,Courier,monospace;">false</span>.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If 2 or more <span style="font-family: Courier New,Courier,monospace;"><tizen:app-widget></span> elements have the <span style="font-family: Courier New,Courier,monospace;">primary</span> attribute set to <span style="font-family: Courier New,Courier,monospace;">true</span>, the default icon and title of the parent Web application is used.</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace;">update-period</span> <p>Optional; <span style="font-family: Courier New,Courier,monospace;">float</span> update interval in seconds. The default value is <span style="font-family: Courier New,Courier,monospace;">no update</span>. The minimum value is <span style="font-family: Courier New,Courier,monospace;">1800.0</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">auto-launch</span><p>Optional; indicates whether the Web application is launched at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default)). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p></li>
- </ul>
-
- <p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:app-widget id="1234abcDEF.DynamicBox.default" primary="true">
- <tizen:box-label>Web Dynamic Box Sample</tizen:box-label>
- <tizen:box-icon src="icon.png"/>
- <tizen:box-content src="app-widget/index.html" mouse-event="true" touch-effect="false">
- <tizen:box-size preview="app-widget/preview-lb1-11.png">1x1</tizen:box-size>
- <tizen:box-size>2x2</tizen:box-size>
- <tizen:pd src="pd/index.html" width="720" height="200"/>
- </tizen:box-content>
-</tizen:app-widget>
-</pre><p></p> </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="mw_box-label" name="mw_box-label">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-label /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the name of the Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>1 or more (if duplicates, the first occurrence is considered and all others ignored)</li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the box label (available values: <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>) </p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="mw_box-icon" name="mw_box-icon">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-icon /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the icon of the Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>0 or 1
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If no box icon is declared, the platform can select a default icon (such as the application icon or a platform-defined icon).
-</td>
- </tr>
- </tbody>
- </table>
-
- </li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box icon. The path is relative to the source Web application directory.</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="mw_box-content" name="mw_box-content">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-content /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the start page of the Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>1</li>
- </ul>
- <p><strong>Expected children:</strong> </p>
- <ul class="ul">
- <li><a href="#mw_box-size"><tizen:box-size /></a></li>
- <li><a href="#mw_pd"><tizen:pd /></a></li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box start page. The path is relative to the source Web application directory or a remote URL.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">mouse-event</span> <p>Optional; indicates whether the Dynamic Box receives mouse up and down events (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default)). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">touch-effect</span> <p>Optional; indicates whether UX effects are applied at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="mw_box-size" name="mw_box-size">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-size /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the size of the Dynamic Box.</p> <p>The available values are <span style="font-family: Courier New,Courier,monospace">1 x 1</span> (mandatory), <span style="font-family: Courier New,Courier,monospace">2 x 1</span> and <span style="font-family: Courier New,Courier,monospace">2 x 2</span>.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>1 or more</li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">preview</span> <p>Optional; image file path of the box content displayed in the Dynamic Box viewer. The path is relative to the source Web application directory.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">use-decoration</span> <p>Optional; specifies whether the Dynamic Box Viewer applies frame decoration to the size (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p><p>If a Dynamic Box Viewer does not support frame decoration for the Box, the frame decoration is not applied. Validation of this attribute depends on the Dynamic Box Viewer used.</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="mw_pd" name="mw_pd">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:pd /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the Drop View of the Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>0 or 1</li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Drop View's start page. The path is relative to the source Web application directory or a remote URL.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">width</span> <p>Optional; Drop View width in pixels. The width is fixed to the device width but a value greater than 0 must be set.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">height</span> <p>Mandatory; Drop View height in pixels. The maximum value is 380 pixels.</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
<h3 id="mw_webapp" name="mw_webapp">Tizen-hosted Web Application</h3>
<table border="1">
</tbody>
</table>
-
- <h3 id="ww_appwidget" name="ww_appwidget">Dynamic Box</h3>
- <table border="1">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:app-widget /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define basic information about a Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>0 or more</li>
- </ul>
- <p><strong>Expected children:</strong> </p>
- <ul class="ul">
- <li><a href="#ww_box-label"><tizen:box-label /></a></li>
- <li><a href="#ww_box-icon"><tizen:box-icon /></a></li>
- <li><a href="#ww_box-content"><tizen:box-content /></a></li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; unique ID of the Dynamic Box in the <span style="font-family: Courier New,Courier,monospace;"><TIZEN_APPLICATION_ID>.<STRING></span> format, where <span style="font-family: Courier New,Courier,monospace;"><STRING></span> comprises 1 or more characters (0~9, a~z, A~Z).</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">primary</span> <p>Mandatory; indicates a primary Dynamic Box (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>)</p>
- <p>If one <span style="font-family: Courier New,Courier,monospace;"><tizen:app-widget></span> element has already set this attribute to <span style="font-family: Courier New,Courier,monospace;">true</span>, then all other <span style="font-family: Courier New,Courier,monospace;"><tizen:app-widget></span> elements must set this attribute to <span style="font-family: Courier New,Courier,monospace;">false</span>.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If 2 or more <span style="font-family: Courier New,Courier,monospace;"><tizen:app-widget></span> elements have the <span style="font-family: Courier New,Courier,monospace;">primary</span> attribute set to <span style="font-family: Courier New,Courier,monospace;">true</span>, the default icon and title of the parent Web application is used.</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace;">update-period</span> <p>Optional; <span style="font-family: Courier New,Courier,monospace;">float</span> update interval in seconds. The default value is <span style="font-family: Courier New,Courier,monospace;">no update</span>. The minimum value is <span style="font-family: Courier New,Courier,monospace;">1800.0</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">auto-launch</span><p>Optional; indicates whether the Web application is launched at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li>
- </ul>
-
- <p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:app-widget id="1234abcDEF.DynamicBox.default" primary="true">
- <tizen:box-label>Web Dynamic Box Sample</tizen:box-label>
- <tizen:box-icon src="icon.png"/>
- <tizen:box-content src="app-widget/index.html" mouse-event="true" touch-effect="false">
- <tizen:box-size preview="app-widget/preview-lb1-11.png">1x1</tizen:box-size>
- <tizen:box-size>2x2</tizen:box-size>
- <tizen:pd src="pd/index.html" width="720" height="200"/>
- </tizen:box-content>
-</tizen:app-widget>
-</pre><p></p> </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="ww_box-label" name="ww_box-label">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-label /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the name of the Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>1 or more</li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the box label (available values: <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>) </p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="ww_box-icon" name="ww_box-icon">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-icon /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the icon of the Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>0 or 1</li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box icon. The path is relative to the source Web application directory.</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="ww_box-content" name="ww_box-content">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-content /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the start page of the Dynamic Box.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>1</li>
- </ul>
- <p><strong>Expected children:</strong> </p>
- <ul class="ul">
- <li><a href="#ww_box-size"><tizen:box-size /></a></li>
- <li><a href="#ww_pd"><tizen:pd /></a></li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box start page. The path is relative to the source Web application directory or a remote URL.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">mouse-event</span> <p>Optional; indicates whether the Dynamic Box receives mouse up and down events (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">touch-effect</span> <p>Optional; indicates whether UX effects are applied at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>)</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="ww_box-size" name="ww_box-size">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:box-size /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the size of the Dynamic Box.</p> <p>The available values are <span style="font-family: Courier New,Courier,monospace">1 x 1</span> (mandatory), <span style="font-family: Courier New,Courier,monospace">2 x 1</span> and <span style="font-family: Courier New,Courier,monospace">2 x 2</span>.</p>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>1 or more</li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">preview</span> <p>Optional; image file path of the box content displayed in the Dynamic Box viewer. The path is relative to the source Web application directory.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">use-decoration</span> <p>Optional; specifies whether the Dynamic Box Viewer applies frame decoration to the size (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>).</p><p>If a Dynamic Box Viewer does not support frame decoration for the Box, the frame decoration is not applied. Validation of this attribute depends on the Dynamic Box Viewer used.</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table border="1" id="ww_pd" name="ww_pd">
- <tbody>
- <tr>
- <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:pd /></span> element</p></th>
- </tr>
- <tr>
- <td> <p>Used to define the drop view information of the Dynamic Box.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The platform implementation can decide the actual width according to the device resolution. The height range of the Drop View is 1 to 380 pixels and the width is fixed to the device width.</td>
- </tr>
- </tbody>
- </table>
- <p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>0 or 1</li>
- </ul>
- <p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; start page file path of drop view. The path is relative to the source Web application directory.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">width</span> <p>Mandatory; drop view width pixels in integer</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">height</span> <p>Mandatory; drop view height pixels in integer</p></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
<h3 id="ww_service" name="ww_service">Tizen Service</h3>
<table border="1">
<tbody>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
</tbody>
</table>
-<table border="1" id="features">
-<caption>Table: Available requirements for mobile Web Dynamic Box APIs</caption>
- <tbody>
-<tr>
- <th>Feature key</th>
- <th>Description</th>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
- <td>Specify this key, if the application requires the Web Dynamic Box feature.</td>
- </tr>
-</tbody>
-</table>
-
-
<table border="1" id="features">
<caption>Table: Available requirements for wearable Web Device APIs</caption>
<tbody>
</tizen:app-control></pre> </td>
</tr>
<tr>
- <td colspan="2"><strong>app-widget</strong></td>
- </tr>
- <tr>
- <td>id</td>
- <td> <p>Unique Dynamic Box ID.</p> <p>The ID format is <span style="font-family: Courier New,Courier,monospace">[<tizen:application> id].[any string]</span>.</p> </td>
- </tr>
- <tr>
- <td>primary</td>
- <td> <p>When you click the Web application icon to add a Dynamic Box. using the <strong>Add from app tray</strong> option, the primary Dynamic Box is displayed on the home screen. Secondary Dynamic Box can be added using the <strong>Add more app-widget</strong> option.</p><p>Only 1 Dynamic Box can have the value <span style="font-family: Courier New,Courier,monospace">true</span> for this attribute.</p> </td>
- </tr>
- <tr>
- <td>auto-launch</td>
- <td> <p>To launch the application when the Dynamic Box is clicked, set auto-launch as <strong>true</strong>.</p></td>
- </tr>
- <tr>
- <td>update-period</td>
- <td> <p>Used to determine how often the Dynamic Box is reloaded. The minimum value is 1800.0 and the unit is second. The default behavior is <strong>no-update</strong>.</p></td>
- </tr>
- <tr>
- <td>box-label</td>
- <td> <p>Used to define the name of the Dynamic Box.</p></td>
- </tr>
- <tr>
- <td>box-icon</td>
- <td> <p>This icon is displayed on the list when you select the <strong>Add more app-widget</strong> option.</p></td>
- </tr>
- <tr>
- <td>box-content</td>
- <td>The <strong>src</strong> attribute specifies the start page relative path based on the application root directory.
- <p>The <strong>mouse-event</strong> attribute specifies the flag that indicates that the Dynamic Box content receives mouse down and up events.</p>
- <p>The <strong>touch-effect</strong> attribute specifies the flag that indicates that special UX effect must be applied to the Dynamic Box when the user clicks the Dynamic Box.</p>
-</td>
- </tr>
- <tr>
- <td>box-size</td>
- <td><p>The <strong>preview</strong> attribute specifies path of the image file displayed on the Dynamic Box.</p>
- <p>The <strong>use-decoration</strong> attribute specifies whether the Dynamic Box Viewer applies a frame decoration to the box size.</p></td>
- </tr>
- <tr>
- <td>pd</td>
- <td><p>The <strong>src</strong> attribute specifies the start page relative path based on the application root directory, and is used to display Drop View. You can also define the Drop View height; the Drop View width is always fixed to the device width.</p></td>
- </tr>
-
- <tr>
<td colspan="2"><strong>account</strong></td>
</tr>
<tr>
</script>
<!--end-->
</body>
-</html>
\ No newline at end of file
+</html>
<li><a href="web/tizen/social/data_sync_w.htm">Data Synchronization</a></li>
</ul>
</li>
- <li><a href="web/tizen/dynamic/dynamic_w.htm">Dynamic Box</a></li>
<li><a href="web/tizen/localization/localization_w.htm">Localization</a></li>
<li><a href="web/tizen/uifw/uifw_guide_w.htm">Web UIFW</a></li>
<li><a href="web/tizen/service/service_w.htm">Service Application</a></li>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
- <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
- <title>Dynamic Box</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="navigation">
- <div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm">Dynamic Box Tutorial</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Dynamic Box</h1>
- <p>You can add a Dynamic Box to your Web application. The Dynamic Box uses Web technology, such as HTML5, JavaScript, and CSS. Tizen manages the Dynamic Box's life-cycle: installation, creation, updating, termination, and uninstallation.</p>
-
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Dynamic Box feature is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.</td>
- </tr>
- </tbody>
- </table>
-
- <p>To provide a Dynamic Box, <a href="../../../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#set_widget">define the Dynamic Box basic information</a> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of its Web application using the <span style="font-family: Courier New,Courier,monospace"><tizen:app-widget></span> tag. If the Web application has the <span style="font-family: Courier New,Courier,monospace"><access></span> configuration in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, its settings are also applied to the Dynamic Box.</p>
-
- <p>The Dynamic Box information management includes:</p>
-
- <ul>
- <li>Resource management
- <p>Dynamic Box resources are included in its Web application package. Tizen installs the Dynamic Box when its Web application is installed, and uninstalls the Dynamic Box when its Web application is uninstalled. The Dynamic Box resources are all removed with its Web application.</p>
- </li>
- <li>Life-cycle management
-<p>You can create Dynamic Box instances through the Dynamic Box Viewer application (for example, launcher or home application).</p>
-<p>If the creation request is accepted, Tizen starts to render the Dynamic Box content. The <span style="font-family: Courier New,Courier,monospace">onload</span> event is fired, and the box content is alive for 10 seconds. After this all content operations, including painting, are stopped.</p>
-<p>The Dynamic Box can be reloaded and updated at specific situations. The user can request Dynamic Box instances to be terminated through the Dynamic Box Viewer application.</p></li></ul>
-
-
- <p>The following main features must be considered during Dynamic Box development:</p>
-
- <ul>
- <li>The user can resize the Dynamic Box instance, which results in the Dynamic Box being reloaded.
- You can define the box content of your Dynamic Box to be fitted to the window size
- through the <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#define">viewport setting</a>.
- </li>
- <li>The Dynamic Box instance can be <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#load">reloaded at specific situations</a>.
- You can define the box content of your Dynamic Box to be proper to such situations by <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#parse">parsing the box URL query string</a>.
- </li>
- <li>A Web application can request to <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#reload">reload its Dynamic Box directly or periodically</a>.
- </li>
- <li>By default, the box backgrounds are transparent.
- Therefore, if a body element background color is not set, you can see a part of the Dynamic Box Viewer application behind your Dynamic Box.
- </li>
-<li>Some CSS features, such as CSS 2D/3D transforms, CSS transition, CSS animation, CSS opacity, CSS mask, the <span style="font-family: Courier New,Courier,monospace">position: fixed</span> and <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling: touch</span> attributes, WebGL, and the <span style="font-family: Courier New,Courier,monospace">video</span> element are not supported on the Dynamic Box.</li>
-
- <li>Tizen Web device APIs are not supported on the Dynamic Box.</li>
- <li>By default, the Dynamic Box cannot receive touch events from a user. To receive down and up touch events, the <span style="font-family: Courier New,Courier,monospace">mouse-event</span> attribute in the <span style="font-family: Courier New,Courier,monospace"><tizen:box-content></span> element must be <span style="font-family: Courier New,Courier,monospace">true</span>.
- <p>Even if the <span style="font-family: Courier New,Courier,monospace">mouse-event</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the mouse move event, including vertical and horizontal swipe, is not supported on the Dynamic Box to guarantee the home screen behavior.</p></li>
- </ul>
-
- <p>The following feature must be specified in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file if you want your Web application to be visible only on devices that support the Web Dynamic Box:</p>
-<pre>
-http://tizen.org/feature/shell.appwidget
-</pre>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
<p>In addition to the Tizen Web Device API guides above, you can study the following features:</p>
<ul>
- <li><a href="dynamic/dynamic_w.htm">Dynamic Box</a>
- <p>Enables you to add a Dynamic Box to your Web application.</p></li>
-
<li><a href="localization/localization_w.htm">Localization</a> <p>Enables you to internationalize your application.</p></li>
<li><a href="uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a>
<p>Enables you to create and manage various kinds of UI components.</p></li>
<topic href="html/web/tizen/social/contact_w.htm" label="Contact"></topic>
<topic href="html/web/tizen/social/data_sync_w.htm" label="Data Synchronization"></topic>
</topic>
- <topic href="html/web/tizen/dynamic/dynamic_w.htm" label="Dynamic Box"></topic>
<topic href="html/web/tizen/localization/localization_w.htm" label="Localization"></topic>
<topic href="html/web/tizen/uifw/uifw_guide_w.htm" label="Web UIFW"></topic>
<topic href="html/web/tizen/service/service_w.htm" label= "Service Application"></topic>
<li><a href="web/tizen/social/data_sync_tutorial_w.htm">Data Synchronization</a></li>
</ul>
</li>
- <li><a href="web/tizen/dynamic/dynamic_tutorial_w.htm">Dynamic Box</a></li>
<li><a href="web/tizen/uifw/uifw_tutorial_w.htm">Web UIFW</a></li>
<li><a href="web/tizen/service/service_tutorial_w.htm">Service Application</a></li>
</ul>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
- <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
- <title>Dynamic Box: Taking Advantage of the Dynamic Box</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
- </div>
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#load">Loading the Dynamic Box</a></li>
- <li><a href="#define">Defining Viewport Settings</a></li>
- <li><a href="#parse">Parsing the URL Query</a></li>
- <li><a href="#reload">Using a Web Application to Reload the Dynamic Box</a></li>
- <li><a href="#send">Sending Messages between Dynamic Box and Drop View</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.guides/html/web/tizen/dynamic/dynamic_w.htm">Dynamic Box Guide</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Dynamic Box: Taking Advantage of the Dynamic Box</h1>
-<div class="cont"><div class="static-cont">
-
-<p>This tutorial demonstrates how you can create a Dynamic Box and implement specific features within the Dynamic Box.</p>
-
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Dynamic Box feature is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.</td>
- </tr>
- </tbody>
- </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Dynamic Box basics by learning about:</p>
-<ul>
- <li><a class="opensection" href="#load">Loading the Dynamic Box</a> <p>Load the Dynamic Box when required.</p></li>
- <li><a class="opensection" href="#define">Defining Viewport Settings</a> <p>Define the correct size viewport for the box window.</p></li>
- <li><a class="opensection" href="#parse">Parsing the URL Query</a> <p>Parse the query string of the box URL and use it in loading the box.</p></li>
- <li><a class="opensection" href="#reload">Using a Web Application to Reload the Dynamic Box</a> <p>Reload the Dynamic Box directly or periodically using a Web application.</p></li>
- <li><a class="opensection" href="#send">Sending Messages between Dynamic Box and Drop View</a><p>Communicate between the box and Drop View when the Drop View is opened.</p></li>
-</ul>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
-</div>
-
-<ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="load" name="load" class="items-tit-h2">Loading the Dynamic Box</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-
-<p>Learning when the Dynamic Box is loaded is important to develop the Dynamic Box:</p>
-<ol>
- <li><p>The box page of the Dynamic Box is automatically loaded when the Dynamic Box is created, the box is resized, the box update period expires, or the Drop View is opened.</p>
- <p>Since the onload event of the box content is fired, after 30 seconds, the execution of the box content is stopped. After that, the content execution depends on <span style="font-family: Courier New,Courier,monospace">mouse-event</span> attribute value of the <span style="font-family: Courier New,Courier,monospace"><tizen:app-widget></span> element:</p>
- <pre class="prettyprint">
-<!--Box content cannot interact with users at all,-->
-<!--and no JavaScript code is executed-->
-<tizen:box-content src="…" mouse-event="false">
-
-<!--Box content interacts with users (such as though button clicks),-->
-<!--and JavaScript code can be executed for 5 seconds-->
-<!--If there is no click for 5 seconds from the last click,-->
-<!--the box execution ends until a new click occurs-->
-<tizen:box-content src="…" mouse-event="true">
-</pre></li>
-<li>When the Drop View is opened, its box content is reloaded and continues to be alive by closing the Drop View. If the Drop View is closed, its box content execution is stopped.</li>
- <li>If you indicate the duration (in seconds) for box reloading using the <span style="font-family: Courier New,Courier,monospace">update-period</span> attribute, the box is reloaded accordingly. If the update period has expired and the box is in the background, reloading the box is deferred until the box returns to the foreground.</li>
-</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="define" name="define" class="items-tit-h2">Defining Viewport Settings</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>Learning how to handle viewport settings is a basic Dynamic Box management skill:</p>
-<ol>
- <li><p>The box window size varies between 1 x 1, 2 x 1, and 2 x 2. The real pixels for the width and height of 1 cell can differ between Tizen devices, so the box content must be developed relative to the device width.</p>
- <p>Generally, Web pages use a viewport metatag for readability and consist of relative content. You can also set the viewport to your box for readability regardless of the device resolution.</p>
- <p>If you set the viewport to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the box viewport width is set to box window width automatically.</p>
- <pre class="prettyprint">
-<head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-</head>
-</pre></li>
- <li>Use <span style="font-family: Courier New,Courier,monospace">window.innerWidth</span> in content to get the actual width that applies to viewport metatag mentioned above.</li>
-</ol>
-<p>The Drop View viewport can be set like the box viewport.</p>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="parse" name="parse" class="items-tit-h2">Parsing the URL Query</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p>Tizen provides useful information on URL query for Dynamic Box and Drop View. The use of this information on URL query is optional. Use this information to create a richer Dynamic Box:</p>
-<ol>
- <li><p>When the Dynamic Box is loaded on a viewer, Tizen sets specific information on the URL query of the Dynamic Box:</p>
- <pre class="prettyprint">
-[Box start page].html?type=[string]&width=[int]&height=[int]</pre>
- <p>The <span style="font-family: Courier New,Courier,monospace">type</span> key defines the box loading type, which can be:</p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">create</span>: the Dynamic Box is created on the Dynamic Box Viewer</li>
- <li><span style="font-family: Courier New,Courier,monospace">update</span>: the update period has expired</li>
- <li><span style="font-family: Courier New,Courier,monospace">resize</span>: the Dynamic Box is resized by the user</li>
- <li><span style="font-family: Courier New,Courier,monospace">pdopen</span>: the Drop View is opened</li></ul>
- <p>The <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> keys define the size of the box window. You can also get the box window size using the <span style="font-family: Courier New,Courier,monospace">window.outerWidth</span> and <span style="font-family: Courier New,Courier,monospace">window.outerHeight</span> objects.</p></li>
- <li><p>When the Drop View is loaded through flicking down the Dynamic Box, Tizen sets additional information in the URL query of the Drop View regarding its position. You can use this information to let the Drop View draw an arrow pointing to the Dynamic Box.</p>
- <pre class="prettyprint">[DropView start page].html?type=pdopen&width=[int]&height=[int]&pdopen-direction=[up|down]&pdopen-arrow-xpos=[int]</pre>
- <p>The value of the <span style="font-family: Courier New,Courier,monospace">type</span> key is fixed to <span style="font-family: Courier New,Courier,monospace">pdopen</span> on the URL of the Drop View. The <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> keys have the same meaning as those of the box.</p>
- <p>The <span style="font-family: Courier New,Courier,monospace">pdopen-direction</span> key defines whether the Drop View opens above or below the Dynamic Box:</p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">down</span>: The Drop View opens below the Dynamic Box.</li>
- <li><span style="font-family: Courier New,Courier,monospace">up</span>: The Drop View opens above the Dynamic Box.</li>
- </ul>
- <p>The <span style="font-family: Courier New,Courier,monospace">pdopen-arrow-xpos</span> key defines the X coordinate of the center of the Dynamic Box in pixels, and the range of values is from 0 to the device width.</p></li>
- <li><p>If needed, the Dynamic Box can use this information to handle its content when loaded. The query string is added to all box URLs as default.</p>
- <p>Parse the query string and use it on the box content:</p>
- <pre class="prettyprint">function getParameters()
-{
- var searchString = window.location.search.substring(1), params = searchString.split("&"), info = {};
- for (var i = 0; i < params.length; i++)
- {
- var val = params[i].split("=");
- info[unescape(val[0])] = unescape(val[1]);
- }
-
- return info;
-}
-
-var gInfo = getParameter();
-console.log("load type: " + gInfo.type);
-console.log("width: " + gInfo.width);
-console.log("height: " + gInfo.height);
-</pre></li>
-</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="reload" name="reload" class="items-tit-h2">Using a Web Application to Reload the Dynamic Box</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>Learning how to request reloading of the Dynamic Box directly or periodically from a Web application is a basic Dynamic Box management skill.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">A Web application can only reload its own Dynamic Box.</td>
- </tr>
- </tbody>
-</table>
-
-<ul class="ul">
- <li><p>To request reloading directly:</p>
- <ol>
- <li>
- <p>Modify the application configuration:</p>
- <ol>
- <li>
- <p>Add the following entry to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file to obtain the needed API privilege:</p>
- <pre class="prettyprint"><tizen:privilege name="http://tizen.org/privilege/application.launch" /></pre>
- </li>
- <li>
- <p>Set the <span style="font-family: Courier New,Courier,monospace">operation</span> attribute of the application control:</p>
- <pre>http://tizen.org/appcontrol/operation/dynamicbox/web/update</pre>
- </li>
- <li>
- <p>Set the <span style="font-family: Courier New,Courier,monospace">uri</span> attribute of the application control:</p>
- <pre>'uri' = box-service://<dynamic-box-id></pre>
- <p>The <span style="font-family: Courier New,Courier,monospace">dynamic-box-id</span> is the ID of the <span style="font-family: Courier New,Courier,monospace"><tizen:app-widget></span> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. For example: <span style="font-family: Courier New,Courier,monospace">box-service://syWXgC5ZcI.DynamicBox.default</span>.</p>
- </li>
- <li>
- <p>Set the <span style="font-family: Courier New,Courier,monospace">content-info</span> key to pass a key or value to the reloaded box in the <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span>. This step is optional.</p>
- <p>The value of the key is passed to the Dynamic Box as a query:</p>
- <pre>index.html?type=update&width=<int>&height=<int>&<value passed from Web app></pre>
- <p>Do not use predefined URL keys for the Box and Drop View, like <span style="font-family: Courier New,Courier,monospace">type</span>, <span style="font-family: Courier New,Courier,monospace">width</span>, and <span style="font-family: Courier New,Courier,monospace">height</span>. If the Web application sets <span style="font-family: Courier New,Courier,monospace">content-info</span> to <span style="font-family: Courier New,Courier,monospace">color=red&style=2</span>, the box's URL query is as follows:</p>
- <pre>index.html?type=update&width=354&height=354&color=red&style=2</pre>
- </li>
- </ol>
- </li>
- <li>
- <p>Request the application Dynamic Box to be reloaded using the <span style="font-family: Courier New,Courier,monospace">tizen.application.launchAppControl()</span> method:</p>
- <pre class="prettyprint">var contentInfo = "updateType=direct";
-var appControlData = new tizen.ApplicationControlData("content-info", [contentInfo]);
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/dynamicbox/web/update",
- "box-service://syWXgC5ZcI.DynamicBox.default",
- null, null, [appControlData]);
-tizen.application.launchAppControl(appControl, "dbox.web-provider");</pre>
- <p>The <span style="font-family: Courier New,Courier,monospace">dbox.web-provider</span> argument is an ID for an internal service that manages the life-cycle of the Dynamic Box. This attribute must be specified to update the Dynamic Box.</p>
- </li>
- </ol>
- </li>
- <li>
- <p>To request reloading periodically:</p>
- <ol>
- <li>
- <p>Specify the Dynamic Box update period with the <span style="font-family: Courier New,Courier,monospace">update-period</span> attribute in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
- <pre class="prettyprint"><tizen:app-widget update-period="3600"></pre>
- <p>The minimum value for the attribute is 1800 s. This restriction is used to prevent potential power drain caused by frequent updates. However, you can use the Tizen <span style="font-family: Courier New,Courier,monospace">Alarm</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">Application</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) APIs to update the Dynamic Box more frequently.</p>
- </li>
- <li>
- <p>To call the Alarm API, specify the <span style="font-family: Courier New,Courier,monospace">dbox.web-provider</span> attribute:</p>
- <pre class="prettyprint">var alarm = new tizen.AlarmRelative(1, 10*tizen.alarm.PERIOD_MINUTE);
-tizen.alarm.add(alarm, "dbox.web-provider", appControl);</pre>
- <p>The <span style="font-family: Courier New,Courier,monospace">appControl</span> data required for the Tizen Alarm API can be created by setting the <span style="font-family: Courier New,Courier,monospace">operation</span> and <span style="font-family: Courier New,Courier,monospace">uri</span> attributes as described in the direct reloading request above.</p>
- </li>
- <li>
- <p>To remove a registered alarm, use the <span style="font-family: Courier New,Courier,monospace">tizen.alarm.remove()</span> method.</p>
- </li>
- </ol>
- </li>
-</ul>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If a Web application sends a reloading request while running in the background, the request is deferred until the application returns to the foreground.</td>
- </tr>
- </tbody>
-</table>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="send" name="send" class="items-tit-h2">Sending Messages between Dynamic Box and Drop View</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p>Learning how to send messages between a Dynamic Box and Drop View is a basic Dynamic Box management skill. Through messaging, the Drop View can control the box content and the box can send responses for the Drop View requests.</p>
- <ol>
- <li>To send a message from the Drop View to the Dynamic Box:
- <ol>
- <li><p>Open the Drop View and send a message to its Dynamic Box using the <span style="font-family: Courier New,Courier,monospace;">sendMessageToBox()</span> method. The method takes the message string as parameter:</p>
- <pre class="prettyprint">
-window.appwidget.sendMessageToBox(message)</pre></li>
-<li><p>Add an event listener to register a <span style="font-family: Courier New,Courier,monospace;">pdmessage</span> event for the box content and receive the message:</p>
- <pre class="prettyprint">
-window.addEventListener("pdmessage", function(message)
-{
- console.log("message from Drop View: " + message);
-}, false);
-</pre></li></ol>
-</li>
- <li>To send a message from the Dynamic Box to the Drop View:
- <ol>
- <li><p>After the Drop View is opened, the box can send a message to its Drop View using the <span style="font-family: Courier New,Courier,monospace;">sendMessageToPd()</span> method. The method takes the message string as parameter:</p>
- <pre class="prettyprint">
-window.appwidget.sendMessageToPd(message)</pre></li>
-<li><p>Add an event listener to register a <span style="font-family: Courier New,Courier,monospace;">boxmessage</span> event for the Drop View content and receive the message:</p>
-<pre class="prettyprint">
-window.addEventListener("boxmessage", function(message)
-{
- console.log("message from Box: " + message);
-}, false);
-</pre></li></ol>
-</li>
-<li><p>Before using the Web API for sending messages, register a listener for the <span style="font-family: Courier New,Courier,monospace;">appwidgetready</span> JavaScript event:</p><pre class="prettyprint">window.addEventListener("appwidgetready", callbackFunction, false);</pre>
-<p>When your box content starts to load, some JavaScript objects for the Dynamic Box APIs may not load and you must check whether any such objects have already been loaded. If the objects have not been loaded yet, the <span style="font-family: Courier New,Courier,monospace;">appwidgetready</span> event can be triggered to know when the objects are fully loaded. In this case, you can call Dynamic Box APIs after the <span style="font-family: Courier New,Courier,monospace;">appwidgetready</span> event is triggered.</p>
-<pre class="prettyprint">if (typeofwindow.appwidget != 'undefined')
-{
- /* JavaScript object for Dynamic Box APIs was loaded */
- /* Call Dynamic Box APIs, or register Dynamic Box events, such as 'pdmessage' or 'boxmessage' */
- console.log("javascript object was already loaded");
-}
-else
-{
- /* Register appwidgetready event */
- window.addEventListener("appwidgetready", function(e)
- {
- /* JavaScript object for Dynamic Box APIs was loaded */
- /* Call Dynamic Box APIs, or register Dynamic Box events, such as 'pdmessage' or 'boxmessage' */
- console.log("javascript objects for dynamic box have been fully loaded!");
- }
-}</pre></li>
-</ol>
-<p>You can determine the message format to be a specific string containing keys and their values.</p>
- </div>
- </li>
-</ul>
-
-</div></div>
-
-
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
<p>In addition to the Tizen Web Device API tutorials above, you can implement the following features:</p>
<ul>
- <li><a href="dynamic/dynamic_tutorial_w.htm">Dynamic Box: Taking Advantage of the Dynamic Box</a> <p>Demonstrates how you can create a Dynamic Box of your Web application.</p></li>
<li><a href="uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW): Creating UI Components</a>
<p>Demonstrates how you can create and manage various kinds of UI components.</p></li>
<li><a href="service/service_tutorial_w.htm">Service Application: Creating a Service Application</a> <span style="color: red">in wearable applications only</span> <p>Demonstrates how you can create a wearable Web service application.</p></li>
<topic href="html/web/tizen/social/contact_tutorial_w.htm" label="Contact"></topic>
<topic href="html/web/tizen/social/data_sync_tutorial_w.htm" label="Data Synchronization"></topic>
</topic>
- <topic href="html/web/tizen/dynamic/dynamic_tutorial_w.htm" label="Dynamic Box"></topic>
<topic href="html/web/tizen/uifw/uifw_tutorial_w.htm" label="Web UIFW"></topic>
<topic href="html/web/tizen/service/service_tutorial_w.htm" label="Service Application"></topic>
</topic>
projects / sdk / online-doc.git / commitdiff