[LB] New CSS for Training and Studio 67/101067/1
authorEditor Lionbridge <TizenEditor.SEL@lionbridge.com>
Wed, 30 Nov 2016 07:58:37 +0000 (09:58 +0200)
committerEditor Lionbridge <TizenEditor.SEL@lionbridge.com>
Wed, 30 Nov 2016 07:58:37 +0000 (09:58 +0200)
- New CSS file and related tagging changes implemented for training and
  studio content
- Some minor fixes included related to typos, terminological consistency,
  and Tizen Studio

Change-Id: Ic80933b5234cfebbec2fd8932d07ab839c81e8e6

133 files changed:
org.tizen.studio/html/common_tools/certificate_registration.htm
org.tizen.studio/html/common_tools/command_line_interface.htm
org.tizen.studio/html/common_tools/connection_explorer_view.htm
org.tizen.studio/html/common_tools/da_advanced.htm
org.tizen.studio/html/common_tools/da_common.htm
org.tizen.studio/html/common_tools/da_file.htm
org.tizen.studio/html/common_tools/da_memory.htm
org.tizen.studio/html/common_tools/da_network.htm
org.tizen.studio/html/common_tools/da_opengl.htm
org.tizen.studio/html/common_tools/da_overview.htm
org.tizen.studio/html/common_tools/da_thread.htm
org.tizen.studio/html/common_tools/da_ui_hierarchy_n.htm
org.tizen.studio/html/common_tools/emulator.htm
org.tizen.studio/html/common_tools/emulator_control_panel.htm
org.tizen.studio/html/common_tools/emulator_features.htm
org.tizen.studio/html/common_tools/emulator_manager.htm
org.tizen.studio/html/common_tools/keyboard_shortcuts.htm
org.tizen.studio/html/common_tools/log_view.htm
org.tizen.studio/html/common_tools/smart_development_bridge.htm
org.tizen.studio/html/cover_page.htm
org.tizen.studio/html/css/styles.css
org.tizen.studio/html/download/1_0_1_release_notes.htm
org.tizen.studio/html/download/1_0_release_notes.htm
org.tizen.studio/html/download/advanced_configuration.htm
org.tizen.studio/html/download/download.htm
org.tizen.studio/html/download/hardware_accelerated_execution_manager.htm
org.tizen.studio/html/download/installing_sdk.htm
org.tizen.studio/html/download/prerequisites.htm
org.tizen.studio/html/download/tizen_studio_migration_guide.htm
org.tizen.studio/html/download/uninstalling_sdk.htm
org.tizen.studio/html/download/updating_sdk.htm
org.tizen.studio/html/native_tools/api_checker_n.htm
org.tizen.studio/html/native_tools/call_stack_view_n.htm
org.tizen.studio/html/native_tools/component_attributes_n.htm
org.tizen.studio/html/native_tools/component_designer_n.htm
org.tizen.studio/html/native_tools/content_assist_n.htm
org.tizen.studio/html/native_tools/cover_configure_n.htm
org.tizen.studio/html/native_tools/edc_editor_n.htm
org.tizen.studio/html/native_tools/manifest_elements_n.htm
org.tizen.studio/html/native_tools/manifest_text_editor_n.htm
org.tizen.studio/html/native_tools/multiple_screen_n.htm
org.tizen.studio/html/native_tools/po_file_editor_n.htm
org.tizen.studio/html/native_tools/project_conversion_n.htm
org.tizen.studio/html/native_tools/project_explorer_view_n.htm
org.tizen.studio/html/native_tools/project_wizard_n.htm
org.tizen.studio/html/native_tools/resource_manager_n.htm
org.tizen.studio/html/native_tools/static_analyzer_n.htm
org.tizen.studio/html/native_tools/storyboard_n.htm
org.tizen.studio/html/native_tools/t_trace_n.htm
org.tizen.studio/html/native_tools/ui_builder_n.htm
org.tizen.studio/html/native_tools/unit_test_n.htm
org.tizen.studio/html/platform_tools/cover_platform.htm
org.tizen.studio/html/platform_tools/platform_tools.htm
org.tizen.studio/html/web_tools/IDE_preferences_w.htm
org.tizen.studio/html/web_tools/code_productivity_w.htm
org.tizen.studio/html/web_tools/config_editor_w.htm
org.tizen.studio/html/web_tools/content_assist_w.htm
org.tizen.studio/html/web_tools/js_analyzer_w.htm
org.tizen.studio/html/web_tools/live_editing_w.htm
org.tizen.studio/html/web_tools/previewer_w.htm
org.tizen.studio/html/web_tools/privilege_checker_w.htm
org.tizen.studio/html/web_tools/project_explorer_view_w.htm
org.tizen.studio/html/web_tools/project_wizard_w.htm
org.tizen.studio/html/web_tools/rest_viewer_w.htm
org.tizen.studio/html/web_tools/web_editor_w.htm
org.tizen.studio/html/web_tools/web_inspector_w.htm
org.tizen.studio/html/web_tools/web_localization_w.htm
org.tizen.studio/html/web_tools/web_simulator_features_w.htm
org.tizen.studio/html/web_tools/web_simulator_w.htm
org.tizen.studio/html/web_tools/web_unit_test_tool_w.htm
org.tizen.training/html/cover_page.htm
org.tizen.training/html/css/styles.css
org.tizen.training/html/images/graphics_project_create.png
org.tizen.training/html/native/app_model/application_model_n.htm
org.tizen.training/html/native/details/app_filtering_n.htm
org.tizen.training/html/native/details/deprecation_policy_n.htm
org.tizen.training/html/native/details/error_handling_n.htm
org.tizen.training/html/native/details/event_handling_n.htm
org.tizen.training/html/native/details/io_overview_n.htm
org.tizen.training/html/native/details/sec_privileges_n.htm
org.tizen.training/html/native/details/sign_certificate_n.htm
org.tizen.training/html/native/details/tizen_apis_n.htm
org.tizen.training/html/native/feature/app_battery_lifecycle_n.htm
org.tizen.training/html/native/feature/app_battery_location_n.htm
org.tizen.training/html/native/feature/app_battery_power_n.htm
org.tizen.training/html/native/feature/app_connectivity_operation_n.htm
org.tizen.training/html/native/feature/app_connectivity_p2p_n.htm
org.tizen.training/html/native/feature/app_connectivity_usage_n.htm
org.tizen.training/html/native/feature/app_contacts_basic_n.htm
org.tizen.training/html/native/feature/app_contacts_group_n.htm
org.tizen.training/html/native/feature/app_contacts_management_n.htm
org.tizen.training/html/native/feature/app_contentshare_n.htm
org.tizen.training/html/native/feature/app_contentshare_nfc_n.htm
org.tizen.training/html/native/feature/app_contentshare_receive_n.htm
org.tizen.training/html/native/feature/app_contentshare_send_n.htm
org.tizen.training/html/native/feature/app_graphics_animation_n.htm
org.tizen.training/html/native/feature/app_graphics_polygon_n.htm
org.tizen.training/html/native/feature/app_graphics_square_n.htm
org.tizen.training/html/native/feature/app_multimedia_audio_n.htm
org.tizen.training/html/native/feature/app_multimedia_camera_n.htm
org.tizen.training/html/native/feature/app_multimedia_video_n.htm
org.tizen.training/html/native/feature/app_sensor_accelerator_n.htm
org.tizen.training/html/native/feature/app_sensor_proximity_n.htm
org.tizen.training/html/native/feature/ui_builder_app_design_mn.htm
org.tizen.training/html/native/feature/ui_builder_overview_mn.htm
org.tizen.training/html/native/mobile/first_app_mn.htm
org.tizen.training/html/native/process/app_dev_process_n.htm
org.tizen.training/html/native/process/building_app_n.htm
org.tizen.training/html/native/process/creating_app_project_n.htm
org.tizen.training/html/native/process/debugging_app_n.htm
org.tizen.training/html/native/process/performance_n.htm
org.tizen.training/html/native/process/running_app_n.htm
org.tizen.training/html/native/process/setting_properties_n.htm
org.tizen.training/html/native/wearable/first_app_wn.htm
org.tizen.training/html/native/wearable_watch/first_app_watch_wn.htm
org.tizen.training/html/native/wearable_widget/first_app_widget_wn.htm
org.tizen.training/html/web/app_model/application_model_w.htm
org.tizen.training/html/web/details/app_filtering_w.htm
org.tizen.training/html/web/details/deprecation_policy_w.htm
org.tizen.training/html/web/details/event_handling_w.htm
org.tizen.training/html/web/details/sec_privileges_w.htm
org.tizen.training/html/web/details/sign_certificate_w.htm
org.tizen.training/html/web/details/tizen_apis_w.htm
org.tizen.training/html/web/details/web_runtime_w.htm
org.tizen.training/html/web/mobile/first_app_mw.htm
org.tizen.training/html/web/process/app_dev_process_w.htm
org.tizen.training/html/web/process/coding_app_w.htm
org.tizen.training/html/web/process/creating_app_project_w.htm
org.tizen.training/html/web/process/run_debug_app_w.htm
org.tizen.training/html/web/process/setting_properties_w.htm
org.tizen.training/html/web/wearable/first_app_ww.htm
org.tizen.training/html/web/wearable_watch/first_app_watch_ww.htm
org.tizen.training/html/web/wearable_widget/first_app_widget_ww.htm

index 64b3ebe..41fa972 100644 (file)
 <h2 id="creating_certificate">Creating the Certificate Profile</h2>
 <p>You can create a new certificate profile with the Certificate Manager. To run the Certificate Manager, in the Tizen Studio menu, select <strong>Tools &gt; Certificate Manager</strong>.</p>
 
-<p class="figure">Figure: Certificate Manager</p> 
+<p align="center"><strong>Figure: Certificate Manager</strong></p> 
 <p align="center"> <img alt="Certificate Manager" src="../images/cert_reg_cert_manager.png" /> </p>
 
 <p>In the Certificate Manager, click the plus icon (<img alt="Plus icon" src="../images/cert_reg_plus.png" />) to create a new profile.</p>
-<p class="figure">Figure: Creating a new certificate profile</p> 
+<p align="center"><strong>Figure: Creating a new certificate profile</strong></p> 
 <p align="center"> <img alt="Creating a new certificate profile" src="../images/cert_reg_create_new.png" /> </p>
 <p>You can create a new certificate profile with the creation wizard.</p>
-<p class="figure">Figure: Creation wizard</p> 
+<p align="center"><strong>Figure: Creation wizard</strong></p> 
 <p align="center"> <img alt="Creation wizard" src="../images/cert_reg_creation_wizard.png" /> </p>
 
 <h2 id="adding_author">Adding the Author and Distributor Certificates</h2>
 
 <h2 id="managing_certificate">Managing the Certificate Profile</h2>
 <p>You can also view, edit, and remove the certificate profiles you have created.</p>
-<p class="figure">Figure: Managing certificate profiles</p> 
+<p align="center"><strong>Figure: Managing certificate profiles</strong></p> 
 <p align="center"> <img alt="Managing certificate profiles" src="../images/cert_reg_manage_cert.png" /> </p>
 <p>To manage a certificate profile:</p>
        <ul>
                <li>Click the info icon (<img alt="Info" src="../images/cert_reg_info.png" />) to see detailed information of the certificate.
-               <p class="figure">Figure: Certificate information</p> 
+               <p align="center"><strong>Figure: Certificate information</strong></p> 
                <p align="center"> <img alt="Certificate information" src="../images/cert_reg_cert_info.png" /> </p>
                </li>
                <li>Click the pencil icon (<img alt="Pencil" src="../images/cert_reg_pencil.png" />) to change the author or distributor certificate of the selected certificate profile.
-               <p class="figure">Figure: Changing the certificate</p> 
+               <p align="center"><strong>Figure: Changing the certificate</strong></p> 
                <p align="center"> <img alt="Changing the certificate" src="../images/cert_reg_change_cert.png" /> </p>
                </li>
                <li>Click the trash icon (<img alt="Trash" src="../images/cert_reg_trash.png" />) to remove the selected certificate profile.
-               <p class="figure">Figure: Removing the certificate profile</p> 
+               <p align="center"><strong>Figure: Removing the certificate profile</strong></p> 
                <p align="center"> <img alt="Removing the certificate profile" src="../images/cert_reg_remove_cert.png" /> </p>
                </li>
                <li>The active profile is used when you package your application. Click the check icon to set the selected certificate profile as active.
index 3388435..ab3a742 100644 (file)
@@ -49,7 +49,7 @@
 <h1>Command Line Interface Commands</h1>
 
 <p>The Command Line Interface (CLI) provides the functionalities for developing Tizen applications without the Tizen Studio. It includes the entire development process from creating the project to running the application.</p>
-<p>The CLI is located in the <span style="font-family: Courier New,Courier,monospace">$&lt;TIZEN_STUDIO&gt;/tools/ide/bin/</span> directory. For developing an application using the CLI, add the CLI directory path to the <span style="font-family: Courier New,Courier,monospace">$PATH</span> environment variable using the following command:</p>
+<p>The CLI is located in the <code>$&lt;TIZEN_STUDIO&gt;/tools/ide/bin/</code> directory. For developing an application using the CLI, add the CLI directory path to the <code>$PATH</code> environment variable using the following command:</p>
 
 <pre class="prettyprint">
 export PATH=$PATH:$&lt;TIZEN_STUDIO&gt;/tools/ide/bin/
@@ -59,10 +59,10 @@ export PATH=$PATH:$&lt;TIZEN_STUDIO&gt;/tools/ide/bin/
 <p>The command displays, sets, replaces, and removes CLI configuration options. The CLI configuration keys are:</p>
        
        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">default.build.architecture=&lt;x86|arm&gt;</span>: Sets the default executable architecture type.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">default.build.compiler=&lt;llvm|gcc&gt;</span>: Sets the default compiler.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">default.build.configuration=&lt;Debug|Release&gt;</span>: Sets the default build configuration.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">default.sdb.timeout=&lt;timeout value&gt;</span>: Sets the default connection timeout value. The default is 60000 milliseconds.</li>
+               <li><code>default.build.architecture=&lt;x86|arm&gt;</code>: Sets the default executable architecture type.</li>
+               <li><code>default.build.compiler=&lt;llvm|gcc&gt;</code>: Sets the default compiler.</li>
+               <li><code>default.build.configuration=&lt;Debug|Release&gt;</code>: Sets the default build configuration.</li>
+               <li><code>default.sdb.timeout=&lt;timeout value&gt;</code>: Sets the default connection timeout value. The default is 60000 milliseconds.</li>
        </ul>
 <p><strong>Syntax:</strong></p>
 <pre class="prettyprint">
@@ -78,19 +78,19 @@ tizen cli-config [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-g</span>, <span style="font-family: Courier New,Courier,monospace">--global</span></td>
+ <td><code>-g</code>, <code>--global</code></td>
  <td>Specifies whether the operation must be done for a global scope (for all installed SDKs or for the current Tizen Studio only).</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">&lt;key&gt;=&lt;value&gt;</span></td>
+ <td><code>&lt;key&gt;=&lt;value&gt;</code></td>
  <td>Sets a value for the CLI configuration key.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-l</span>, <span style="font-family: Courier New,Courier,monospace">--list</span></td>
+ <td><code>-l</code>, <code>--list</code></td>
  <td>Displays the list of all CLI configuration keys and values.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-d</span>, <span style="font-family: Courier New,Courier,monospace">--delete &lt;key&gt;</span></td>
+ <td><code>-d</code>, <code>--delete &lt;key&gt;</code></td>
  <td>Removes the CLI configuration key and value.</td>
  </tr>
  </tbody></table>
@@ -109,7 +109,7 @@ default.build.configuration=Debug
 default.sdb.timeout=60000
 </pre>
 </li>
-<li>Set a <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> path globally.
+<li>Set a <code>profiles.xml</code> path globally.
        <p>Windows&reg;:</p>
 <pre class="prettyprint">
 &gt; tizen cli-config â€“g &quot;default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml&quot;
@@ -140,15 +140,15 @@ tizen list &lt;option&gt;
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">native-project</span></td>
+ <td><code>native-project</code></td>
  <td>Displays the list of project templates for Tizen native applications.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">web-project</span></td>
+ <td><code>web-project</code></td>
  <td>Displays the list of project templates for Tizen Web applications.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">rootstrap</span></td>
+ <td><code>rootstrap</code></td>
  <td>Displays the list of available rootstraps. The rootstrap is a set of build configurations, which consists of the profile, platform version, and target architecture.</td>
  </tr>
  </tbody></table>
@@ -201,14 +201,14 @@ tizen create &lt;sub-command&gt; [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">native-project [options]</span> or <span style="font-family: Courier New,Courier,monospace">web-project [options]</span></td>
+ <td><code>native-project [options]</code> or <code>web-project [options]</code></td>
  <td>Create the Tizen native or Web project.<br /><br />
        Options are:
        <ul> 
-               <li><span style="font-family: Courier New,Courier,monospace">-p</span>, <span style="font-family: Courier New,Courier,monospace">--profile</span>: Specifies the profile name.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-t</span>, <span style="font-family: Courier New,Courier,monospace">--template</span>: Specifies the template name.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-n</span>, <span style="font-family: Courier New,Courier,monospace">--name</span>: Specifies the project name.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">--</span>: Specifies the destination directory where the project is created.</li>
+               <li><code>-p</code>, <code>--profile</code>: Specifies the profile name.</li>
+               <li><code>-t</code>, <code>--template</code>: Specifies the template name.</li>
+               <li><code>-n</code>, <code>--name</code>: Specifies the project name.</li>
+               <li><code>--</code>: Specifies the destination directory where the project is created.</li>
        </ul>
 </td>
 </tr>
@@ -234,7 +234,7 @@ $ cd ~/workspace/basic
 </ul>
 
 <h2 id="Build_proj">Building the Project</h2>
-<p>The command builds the Tizen native or Web project. To build the native project, 3 options are needed: architecture, compiler, and configuration. If you do not set these options, the default values are used. You can check or set the default build options with the <span style="font-family: Courier New,Courier,monospace">cli-config</span> command.</p>
+<p>The command builds the Tizen native or Web project. To build the native project, 3 options are needed: architecture, compiler, and configuration. If you do not set these options, the default values are used. You can check or set the default build options with the <code>cli-config</code> command.</p>
 
 <p><strong>Syntax:</strong></p>
 <pre class="prettyprint">
@@ -250,29 +250,29 @@ tizen &lt;sub-command&gt; [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">build-native [options]</span></td>
+ <td><code>build-native [options]</code></td>
  <td>Build the Tizen native project.<br /><br />
        Options are:
        <ul> 
-               <li><span style="font-family: Courier New,Courier,monospace">-a</span>, <span style="font-family: Courier New,Courier,monospace">--arch</span>: Specifies the architecture type: <span style="font-family: Courier New,Courier,monospace">x86</span> (default) or <span style="font-family: Courier New,Courier,monospace">arm</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">-c</span>, <span style="font-family: Courier New,Courier,monospace">--compiler</span>: Specifies the compiler to build: <span style="font-family: Courier New,Courier,monospace">llvm</span> (default) or <span style="font-family: Courier New,Courier,monospace">gcc</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">-C</span>, <span style="font-family: Courier New,Courier,monospace">--configuration</span>: Specifies the build configuration: <span style="font-family: Courier New,Courier,monospace">Debug</span> (default) or <span style="font-family: Courier New,Courier,monospace">Release</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">-j</span>, <span style="font-family: Courier New,Courier,monospace">--jobs</span>: Specifies the number of parallel builds for the native project.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-r</span>, <span style="font-family: Courier New,Courier,monospace">--rootstrap</span>: Specifies the rootstrap name. The rootstrap contains information of the profile name, platform version, and the target architecture type.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">--</span>: Specifies the project directory.</li>
+               <li><code>-a</code>, <code>--arch</code>: Specifies the architecture type: <code>x86</code> (default) or <code>arm</code></li>
+               <li><code>-c</code>, <code>--compiler</code>: Specifies the compiler to build: <code>llvm</code> (default) or <code>gcc</code></li>
+               <li><code>-C</code>, <code>--configuration</code>: Specifies the build configuration: <code>Debug</code> (default) or <code>Release</code></li>
+               <li><code>-j</code>, <code>--jobs</code>: Specifies the number of parallel builds for the native project.</li>
+               <li><code>-r</code>, <code>--rootstrap</code>: Specifies the rootstrap name. The rootstrap contains information of the profile name, platform version, and the target architecture type.</li>
+               <li><code>--</code>: Specifies the project directory.</li>
        </ul>
 </td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">build-web [options]</span></td>
+ <td><code>build-web [options]</code></td>
  <td>Build the Tizen Web project.<br /><br />
        Options are:
        <ul> 
-               <li><span style="font-family: Courier New,Courier,monospace">-e</span>, <span style="font-family: Courier New,Courier,monospace">--exclude</span>: Specifies a list of exclude files by patterns. By default, the following resources are excluded: <span style="font-family: Courier New,Courier,monospace">.build/*</span>, <span style="font-family: Courier New,Courier,monospace">.build</span>, <span style="font-family: Courier New,Courier,monospace">.sign/*</span>, <span style="font-family: Courier New,Courier,monospace">.sign</span>, <span style="font-family: Courier New,Courier,monospace">webUnitTest/*</span>, <span style="font-family: Courier New,Courier,monospace">webUnitTest</span>, <span style="font-family: Courier New,Courier,monospace">.externalToolBuilders/*</span>, <span style="font-family: Courier New,Courier,monospace">.externalToolBuilders</span>, <span style="font-family: Courier New,Courier,monospace">.buildResult/*</span>, <span style="font-family: Courier New,Courier,monospace">.buildResult</span>, <span style="font-family: Courier New,Courier,monospace">.settings/*</span>, <span style="font-family: Courier New,Courier,monospace">.settings</span>, <span style="font-family: Courier New,Courier,monospace">.package/*</span>, <span style="font-family: Courier New,Courier,monospace">.package</span>, <span style="font-family: Courier New,Courier,monospace">.tproject</span>, <span style="font-family: Courier New,Courier,monospace">.project</span>, <span style="font-family: Courier New,Courier,monospace">.sdk_delta.info</span>, <span style="font-family: Courier New,Courier,monospace">.rds_delta</span>, <span style="font-family: Courier New,Courier,monospace">*.wgt</span>, <span style="font-family: Courier New,Courier,monospace">.tizen-ui-builder-tool.xml</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">-euf</span>, <span style="font-family: Courier New,Courier,monospace">--exclude-uifw</span>: Specifies whether to exclude the Tizen Web UI framework, and use the Tizen UI framework in the target. This option is only used for applications using the Tizen UI framework.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-out</span>, <span style="font-family: Courier New,Courier,monospace">--output</span>: Sets the output directory name. If you omit this option, the <span style="font-family: Courier New,Courier,monospace">.buildResult</span> directory is created under the project directory by default.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-opt</span>, <span style="font-family: Courier New,Courier,monospace">--optimize</span>: Optimizes the application size. The JavaScript and CSS files are minimized and the Tizen Web UI framework source is excluded. The related link address is modified to a platform-dependent location instead.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">--</span>: Specifies the project directory.</li>
+               <li><code>-e</code>, <code>--exclude</code>: Specifies a list of exclude files by patterns. By default, the following resources are excluded: <code>.build/*</code>, <code>.build</code>, <code>.sign/*</code>, <code>.sign</code>, <code>webUnitTest/*</code>, <code>webUnitTest</code>, <code>.externalToolBuilders/*</code>, <code>.externalToolBuilders</code>, <code>.buildResult/*</code>, <code>.buildResult</code>, <code>.settings/*</code>, <code>.settings</code>, <code>.package/*</code>, <code>.package</code>, <code>.tproject</code>, <code>.project</code>, <code>.sdk_delta.info</code>, <code>.rds_delta</code>, <code>*.wgt</code>, <code>.tizen-ui-builder-tool.xml</code></li>
+               <li><code>-euf</code>, <code>--exclude-uifw</code>: Specifies whether to exclude the Tizen Web UI framework, and use the Tizen UI framework in the target. This option is only used for applications using the Tizen UI framework.</li>
+               <li><code>-out</code>, <code>--output</code>: Sets the output directory name. If you omit this option, the <code>.buildResult</code> directory is created under the project directory by default.</li>
+               <li><code>-opt</code>, <code>--optimize</code>: Optimizes the application size. The JavaScript and CSS files are minimized and the Tizen Web UI framework source is excluded. The related link address is modified to a platform-dependent location instead.</li>
+               <li><code>--</code>: Specifies the project directory.</li>
        </ul>
 </td>
 </tr>
@@ -280,7 +280,7 @@ tizen &lt;sub-command&gt; [options]
 
 <p><strong>Examples:</strong></p>
 <ul> 
-   <li>Build the native project with the <span style="font-family: Courier New,Courier,monospace">x86</span>, <span style="font-family: Courier New,Courier,monospace">llvm</span>, and <span style="font-family: Courier New,Courier,monospace">Debug</span> options.
+   <li>Build the native project with the <code>x86</code>, <code>llvm</code>, and <code>Debug</code> options.
    <p>Windows&reg;:</p>
 
 <pre class="prettyprint">
@@ -328,7 +328,7 @@ $ ls ~/workspace/basicWeb/.buildResult
 </ul>
 
 <h2 id="Clean_proj">Cleaning the Project</h2>
-<p>The command cleans the Tizen project. If you clean the project, all build output directories under the project root path are removed (<span style="font-family: Courier New,Courier,monospace">Debug</span>, <span style="font-family: Courier New,Courier,monospace">Release</span>, and <span style="font-family: Courier New,Courier,monospace">.buildResult</span>).</p>
+<p>The command cleans the Tizen project. If you clean the project, all build output directories under the project root path are removed (<code>Debug</code>, <code>Release</code>, and <code>.buildResult</code>).</p>
 
 <p><strong>Syntax:</strong></p>
 <pre class="prettyprint">
@@ -344,7 +344,7 @@ tizen clean [-- &lt;project directory&gt;]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-- &lt;project directory&gt;</span></td>
+ <td><code>-- &lt;project directory&gt;</code></td>
  <td>Specifies the project directory to clean.</td>
 </tr>
 </tbody></table>
@@ -383,50 +383,50 @@ tizen certificate [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-a</span>, <span style="font-family: Courier New,Courier,monospace">--alias &lt;alias name&gt;</span></td>
+ <td><code>-a</code>, <code>--alias &lt;alias name&gt;</code></td>
  <td>Specifies an alias name of the certificate.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-p</span>, <span style="font-family: Courier New,Courier,monospace">--password &lt;password&gt;</span></td>
+ <td><code>-p</code>, <code>--password &lt;password&gt;</code></td>
  <td>Specifies the password of the certificate.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-c</span>, <span style="font-family: Courier New,Courier,monospace">--country &lt;country code&gt;</span></td>
+ <td><code>-c</code>, <code>--country &lt;country code&gt;</code></td>
  <td>Specifies the user&#39;s country code, which consists of 2 letters.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-s</span>, <span style="font-family: Courier New,Courier,monospace">--state &lt;state&gt;</span></td>
+ <td><code>-s</code>, <code>--state &lt;state&gt;</code></td>
  <td>Specifies the user&#39;s state.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-ct</span>, <span style="font-family: Courier New,Courier,monospace">--city &lt;city&gt;</span></td>
+ <td><code>-ct</code>, <code>--city &lt;city&gt;</code></td>
  <td>Specifies the user&#39;s city.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-o</span>, <span style="font-family: Courier New,Courier,monospace">--organization &lt;organization&gt;</span></td>
+ <td><code>-o</code>, <code>--organization &lt;organization&gt;</code></td>
  <td>Specifies the user organization.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-u</span>, <span style="font-family: Courier New,Courier,monospace">--unit &lt;unit&gt;</span></td>
+ <td><code>-u</code>, <code>--unit &lt;unit&gt;</code></td>
  <td>Specifies the user&#39;s organization unit.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-n</span>, <span style="font-family: Courier New,Courier,monospace">--name &lt;name&gt;</span></td>
+ <td><code>-n</code>, <code>--name &lt;name&gt;</code></td>
  <td>Specifies the user name.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-e</span>, <span style="font-family: Courier New,Courier,monospace">--email &lt;email&gt;</span></td>
+ <td><code>-e</code>, <code>--email &lt;email&gt;</code></td>
  <td>Specifies the user email.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-f</span>, <span style="font-family: Courier New,Courier,monospace">--filename &lt;filename&gt;</span></td>
+ <td><code>-f</code>, <code>--filename &lt;filename&gt;</code></td>
  <td>Specifies the file name without a file extension. A certificate file is created with the file name.<br />
- If you skip this option, the default file name, <span style="font-family: Courier New,Courier,monospace">author</span>, is used on creating the certificate file.</td>
+ If you skip this option, the default file name, <code>author</code>, is used on creating the certificate file.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-- &lt;certificate output path&gt;</span></td>
+ <td><code>-- &lt;certificate output path&gt;</code></td>
  <td>Specifies the output directory path to create the certificate.<br />
- If you skip this option, the default output directory path, <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO_DATA&gt;/keystore/author/</span>, is used on saving the certificate file.
+ If you skip this option, the default output directory path, <code>&lt;TIZEN_STUDIO_DATA&gt;/keystore/author/</code>, is used on saving the certificate file.
  </td>
 </tr>
 </tbody></table>
@@ -492,40 +492,40 @@ tizen security-profiles &lt;sub-command&gt; [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">add [options]</span></td>
+ <td><code>add [options]</code></td>
  <td>Adds the specified security profile, which can contain several certificates.<br /><br />
        Options are:
        <ul> 
-               <li><span style="font-family: Courier New,Courier,monospace">-n</span>, <span style="font-family: Courier New,Courier,monospace">--name</span>: Specifies the name of the security profile to add.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-a</span>, <span style="font-family: Courier New,Courier,monospace">--path</span>: Specifies the directory path where the author certificate file is located. The format of the certificate is PKCS#12, and the file extension is <span style="font-family: Courier New,Courier,monospace">.p12</span>.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-p</span>, <span style="font-family: Courier New,Courier,monospace">--password</span>: Specifies the password used to access the author certificate.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-c</span>, <span style="font-family: Courier New,Courier,monospace">--ca</span>: Specifies the directory path where the author CA certificate file is located. The file extension of the CA certificate is <span style="font-family: Courier New,Courier,monospace">.cer</span>.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-r</span>, <span style="font-family: Courier New,Courier,monospace">--rootca</span>: Specifies the directory path where the author root CA certificate file is located. The file extension of the root CA certificate is <span style="font-family: Courier New,Courier,monospace">.cer</span>.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-d</span>, <span style="font-family: Courier New,Courier,monospace">--dist</span>: Specifies the directory path where the distributor certificate file is located. If you skip this option, the default distributor certificate file embedded in the Tizen Studio is used.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-dp</span>, <span style="font-family: Courier New,Courier,monospace">--dist-password</span>: Specifies the password of the distributor certificate.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-dc</span>, <span style="font-family: Courier New,Courier,monospace">--dist-ca</span>: Specifies the directory path where the distributor CA certificate file is located.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">-dr</span>, <span style="font-family: Courier New,Courier,monospace">--dist-rootca</span>: Specifies the directory path where the distributor root CA certificate file is located.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">--</span>: Specifies the directory path where the <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> file is located. If you skip this option, the value of the <span style="font-family: Courier New,Courier,monospace">default.profiles.path</span> key in the CLI configuration is used to find the <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> file, which consists of new security profiles that are generated in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO_DATA&gt;/keystore/</span> directory. The directory path is added to the CLI configuration.</li>
+               <li><code>-n</code>, <code>--name</code>: Specifies the name of the security profile to add.</li>
+               <li><code>-a</code>, <code>--path</code>: Specifies the directory path where the author certificate file is located. The format of the certificate is PKCS#12, and the file extension is <code>.p12</code>.</li>
+               <li><code>-p</code>, <code>--password</code>: Specifies the password used to access the author certificate.</li>
+               <li><code>-c</code>, <code>--ca</code>: Specifies the directory path where the author CA certificate file is located. The file extension of the CA certificate is <code>.cer</code>.</li>
+               <li><code>-r</code>, <code>--rootca</code>: Specifies the directory path where the author root CA certificate file is located. The file extension of the root CA certificate is <code>.cer</code>.</li>
+               <li><code>-d</code>, <code>--dist</code>: Specifies the directory path where the distributor certificate file is located. If you skip this option, the default distributor certificate file embedded in the Tizen Studio is used.</li>
+               <li><code>-dp</code>, <code>--dist-password</code>: Specifies the password of the distributor certificate.</li>
+               <li><code>-dc</code>, <code>--dist-ca</code>: Specifies the directory path where the distributor CA certificate file is located.</li>
+               <li><code>-dr</code>, <code>--dist-rootca</code>: Specifies the directory path where the distributor root CA certificate file is located.</li>
+               <li><code>--</code>: Specifies the directory path where the <code>profiles.xml</code> file is located. If you skip this option, the value of the <code>default.profiles.path</code> key in the CLI configuration is used to find the <code>profiles.xml</code> file, which consists of new security profiles that are generated in the <code>&lt;TIZEN_STUDIO_DATA&gt;/keystore/</code> directory. The directory path is added to the CLI configuration.</li>
        </ul>
 </td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">list [options]</span></td>
+ <td><code>list [options]</code></td>
  <td>Displays security profiles. If you specify the name of the security profile, the detailed information of the specified security profile is displayed.<br /><br />
        Options are:
        <ul> 
-               <li><span style="font-family: Courier New,Courier,monospace">-n</span>, <span style="font-family: Courier New,Courier,monospace">--name</span>: Specifies the name of the security profile to list. If you skip this option, a set of the security profile names in the <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> file is displayed.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">--</span>: Specifies the directory path where the <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> file is located.</li>
+               <li><code>-n</code>, <code>--name</code>: Specifies the name of the security profile to list. If you skip this option, a set of the security profile names in the <code>profiles.xml</code> file is displayed.</li>
+               <li><code>--</code>: Specifies the directory path where the <code>profiles.xml</code> file is located.</li>
        </ul>
 </td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">remove [options]</span></td>
+ <td><code>remove [options]</code></td>
  <td>Removes the specified security profile.<br /><br />
        Options are:
        <ul> 
-               <li><span style="font-family: Courier New,Courier,monospace">-n</span>, <span style="font-family: Courier New,Courier,monospace">--name</span>: Specifies the name of the security profile to remove.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">--</span>: Specifies the directory path where the <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> file is located.</li>
+               <li><code>-n</code>, <code>--name</code>: Specifies the name of the security profile to remove.</li>
+               <li><code>--</code>: Specifies the directory path where the <code>profiles.xml</code> file is located.</li>
        </ul>
 </td>
 </tr>
@@ -644,7 +644,7 @@ Succeed to remove &#39;MyProfile&#39; profile
 </ul>
 
 <h2 id="Pack_tizen_app">Packaging a Tizen Application with Signing</h2>
-<p>The command packages the Tizen application with signing. If there is a package file in the options, the package is re-signed. The Tizen application is signed with a certified profile in the <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> file. You can create the default profile from the Tizen Studio, which generates the file in a hidden directory in your workspace (<span style="font-family: Courier New,Courier,monospace">&lt;Your workspace directory&gt;/.metadata/.plugins/org.tizen.common.sign/profiles.xml</span>). Set the path of the <span style="font-family: Courier New,Courier,monospace">profiles.xml</span> file before packaging the Tizen application (by using the tizen <span style="font-family: Courier New,Courier,monospace">cli-config</span> command).</p>
+<p>The command packages the Tizen application with signing. If there is a package file in the options, the package is re-signed. The Tizen application is signed with a certified profile in the <code>profiles.xml</code> file. You can create the default profile from the Tizen Studio, which generates the file in a hidden directory in your workspace (<code>&lt;Your workspace directory&gt;/.metadata/.plugins/org.tizen.common.sign/profiles.xml</code>). Set the path of the <code>profiles.xml</code> file before packaging the Tizen application (by using the tizen <code>cli-config</code> command).</p>
 
 <p><strong>Syntax:</strong></p>
 <pre class="prettyprint">
@@ -660,19 +660,19 @@ tizen package [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-t</span>, <span style="font-family: Courier New,Courier,monospace">--type {tpk|wgt}</span></td>
- <td>Specifies the package type. You can use <span style="font-family: Courier New,Courier,monospace">tpk</span> for a Tizen native package or <span style="font-family: Courier New,Courier,monospace">wgt</span> for a Tizen Web package.</td>
+ <td><code>-t</code>, <code>--type {tpk|wgt}</code></td>
+ <td>Specifies the package type. You can use <code>tpk</code> for a Tizen native package or <code>wgt</code> for a Tizen Web package.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-s</span>, <span style="font-family: Courier New,Courier,monospace">--sign &lt;security profile&gt;</span></td>
+ <td><code>-s</code>, <code>--sign &lt;security profile&gt;</code></td>
  <td>Specifies the security profile name to use for signing.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-S</span>, <span style="font-family: Courier New,Courier,monospace">--strip {on|off}</span></td>
- <td>Determines whether to strip the native binary. The default value is off. This option only works when the native binary is based on the <span style="font-family: Courier New,Courier,monospace">arm</span> architecture and <span style="font-family: Courier New,Courier,monospace">Release</span> build configuration. This option is only for the native package.</td>
+ <td><code>-S</code>, <code>--strip {on|off}</code></td>
+ <td>Determines whether to strip the native binary. The default value is off. This option only works when the native binary is based on the <code>arm</code> architecture and <code>Release</code> build configuration. This option is only for the native package.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-- &lt;build output path&gt;</span></td>
+ <td><code>-- &lt;build output path&gt;</code></td>
  <td>Specifies the build output path. If this is a package file, the package is re-signed.</td>
 </tr>
 </tbody></table>
@@ -770,22 +770,22 @@ tizen install [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-n</span>, <span style="font-family: Courier New,Courier,monospace">--name &lt;package file name&gt;</span></td>
+ <td><code>-n</code>, <code>--name &lt;package file name&gt;</code></td>
  <td>Specifies the Tizen package file name.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-t</span>, <span style="font-family: Courier New,Courier,monospace">--target &lt;target&gt;</span></td>
+ <td><code>-t</code>, <code>--target &lt;target&gt;</code></td>
  <td>Specifies the target where the Tizen package is installed.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-- &lt;package file path&gt;</span></td>
+ <td><code>-- &lt;package file path&gt;</code></td>
  <td>Specifies the directory path of the package file.</td>
 </tr>
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
 <ul> 
-   <li>Install the basic application, whose package name is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic-1.0.0-i386.tpk</span>, on the emulator-26101.
+   <li>Install the basic application, whose package name is <code>org.tizen.basic-1.0.0-i386.tpk</code>, on the emulator-26101.
    <p>Windows&reg;:</p>
 
 <pre class="prettyprint">
@@ -817,18 +817,18 @@ tizen run [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-p</span>, <span style="font-family: Courier New,Courier,monospace">--pkgid &lt;package id&gt;</span></td>
+ <td><code>-p</code>, <code>--pkgid &lt;package id&gt;</code></td>
  <td>Specifies the Tizen package ID installed on the target.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-t</span>, <span style="font-family: Courier New,Courier,monospace">--target &lt;target name&gt;</span></td>
+ <td><code>-t</code>, <code>--target &lt;target name&gt;</code></td>
  <td>Specifies the target where the Tizen package is run.</td>
 </tr>
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
 <ul> 
-   <li>Run the basic application, whose package ID is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic</span>, on the emulator-26101.
+   <li>Run the basic application, whose package ID is <code>org.tizen.basic</code>, on the emulator-26101.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
 <pre class="prettyprint">
@@ -855,18 +855,18 @@ tizen uninstall [options]
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-p</span>, <span style="font-family: Courier New,Courier,monospace">--pkgid &lt;package id&gt;</span></td>
+ <td><code>-p</code>, <code>--pkgid &lt;package id&gt;</code></td>
  <td>Specifies the Tizen package ID installed on the target.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-t</span>, <span style="font-family: Courier New,Courier,monospace">--target &lt;target name&gt;</span></td>
+ <td><code>-t</code>, <code>--target &lt;target name&gt;</code></td>
  <td>Specifies the target from where the Tizen package is uninstalled.</td>
 </tr>
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
 <ul> 
-   <li>Uninstall the basic application, whose package ID is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic</span>, from the emulator-26101.
+   <li>Uninstall the basic application, whose package ID is <code>org.tizen.basic</code>, from the emulator-26101.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
 <pre class="prettyprint">
@@ -884,7 +884,7 @@ tizen uninstall [options]
 tizen manual [&lt;command&gt;]
 </pre>
 
-<p>You can use all CLI commands to as <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span>:</p>
+<p>You can use all CLI commands to as <code>&lt;command&gt;</code>:</p>
 <pre class="prettyprint">
 cli-config, list, create, build-native, build-web, clean, certificate, security-profiles, package, install, run, uninstall, version
 </pre>
index 2df6aee..4dcf753 100644 (file)
@@ -48,7 +48,7 @@
    <li>Launch the Emulator Manager to handle the multiple instances of the emulator</li>
 </ul>
 
-<p class="figure">Figure: Connection Explorer view</p> 
+<p align="center"><strong>Figure: Connection Explorer view</strong></p> 
 <p align="center"><img alt="Connection Explorer view" src="../images/conn_explorer_connection.png" /></p> 
  
  <h2 id="running">Running and Debugging the Application with Devices</h2>
index 48dff21..7b843a5 100644 (file)
   <li>Right-click between the markers, and select <strong>Range Analysis</strong>. 
   <p>The table data is updated based on the range inspection results.</p></li> 
 </ol>
-<p class="figure">Figure: Range inspection with markers</p>
+<p align="center"><strong>Figure: Range inspection with markers</strong></p>
 <p align="center"><img alt="Range inspection with markers" src="../images/da_advanced_range_inspection.png" /></p>
 <p>You can create as many markers as you want, and can move the marker by dragging and dropping with a mouse. To delete a marker, double-click it.</p>
 <h3>Range Inspection with Drag and Drop</h3>
 <p>If you drag and drop on a chart view, a range is set and the table data is updated based on the range inspection results.</p>
-<p class="figure">Figure: Range inspection with drag and drop</p>
+<p align="center"><strong>Figure: Range inspection with drag and drop</strong></p>
 <p align="center"><img alt="Range inspection with drag and drop" src="../images/da_advanced_range_inspection_drag.png" /></p>
 <p>The drag and drop action creates a temporary range. If you click another area on the chart view, the range selection is removed.</p>
 <h2 id="search">Search Dialog</h2>
@@ -67,7 +67,7 @@
    <li><strong>Case sensitive:</strong> Case-sensitive matching</li>
    <li><strong>Whole word:</strong> Whole word matching</li>
   </ul>
-<p class="figure">Figure: Search dialog</p>
+<p align="center"><strong>Figure: Search dialog</strong></p>
 <p align="center"><img alt="Search dialog" src="../images/da_advanced_search.png" /></p>
 <h2 id="target">Target Dialog</h2>
 <p>You can check the connected target information in the target dialog:</p>
@@ -81,7 +81,7 @@
                <li><strong>RAM</strong></li>
                <li><strong>Binary Information</strong></li>
                </ul>
-<p class="figure">Figure: Target dialog</p> 
+<p align="center"><strong>Figure: Target dialog</strong></p> 
 <p align="center"><img alt="Target dialog" src="../images/da_advanced_target_dialog.png" /></p>
 </li>
 </ul>
 <p>You can save the tracing result into a file and load it later on for analysis:</p>
 <ul>
    <li>You can save the analysis result to a zip file.
-<p class="figure">Figure: Saving data</p>
+<p align="center"><strong>Figure: Saving data</strong></p>
 <p align="center"><img alt="Saving data" src="../images/da_advanced_saving_data.png" /></p>
    </li> 
    <li>You can load the analysis result from the zip file. After loading, the chart and table data are updated from the loaded data.
-<p class="figure">Figure: Loading data</p>
+<p align="center"><strong>Figure: Loading data</strong></p>
 <p align="center"><img alt="Loading data" src="../images/da_advanced_loading_data.png" /></p>
 </li>
 </ul>
                </ul>
    </li>
 </ul>
-               <p class="figure">Figure: Preference dialog</p>
+               <p align="center"><strong>Figure: Preference dialog</strong></p>
                <p align="center"><img alt="Preference dialog" src="../images/da_advanced_preference.png" /></p>
 
 <h2 id="key">Key Shortcuts</h2>
 <p>You can trigger some major analysis functions with key shortcuts.</p>
 
+<p align="center" class="Table"><strong>Table: Key shortcuts</strong></p>
 <table>
-<caption>Table: Key shortcuts</caption>
 <tbody>
 <tr>
  <th colspan="3" rowspan="2">Command</th>
  <h2 id="cli">Command Line Interface</h2>
  <p>You can use the command line interface (CLI) with the Dynamic Analyzer. You can collect tracing data from your application from a target device and later open it in the Dynamic Analyzer GUI (graphical interface) for analysis.</p>
  <p>To launch tracing, you must know the target device name (or IP address) and your application name, and you must specify the profiling features to be enabled.</p>
- <p>To view the CLI help, run the <span style="font-family: Courier New,Courier,monospace">./dacli.jar -h</span> command:</p>
+ <p>To view the CLI help, run the <code>./dacli.jar -h</code> command:</p>
 
 <pre class="prettyprint">
 Usage: dacli.jar &lt;command&gt; [options ...]
@@ -277,37 +277,30 @@ List of commands:
 
 <h3>Environment Setup</h3>
 <p>The CLI tool requires Java VM installed on your computer. The minimum supported version is Java VM 1.7.</p>
-<p>You can launch the <span style="font-family: Courier New,Courier,monospace">dacli.jar</span> file from the Dynamic Analyzer installation directory by using the <span style="font-family: Courier New,Courier,monospace">./dacli.jar</span> command. To make the launching easier, add the directory to your <span style="font-family: Courier New,Courier,monospace">PATH</span> variable. For example, use the following command on Ubuntu:</p>
+<p>You can launch the <code>dacli.jar</code> file from the Dynamic Analyzer installation directory by using the <code>./dacli.jar</code> command. To make the launching easier, add the directory to your <code>PATH</code> variable. For example, use the following command on Ubuntu:</p>
 
 <pre class="prettyprint">
 export PATH=$PATH:&lt;path-to-tizen-studio&gt;/tools/dynamic-analyzer/
 </pre>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If you have trouble with the execution, you can try one of the following:
+<div class="note">
+    <strong>Note</strong>
+    If you have trouble with the execution, you can try one of the following:
 <ul>
-   <li>Grant execution permissions to the <span style="font-family: Courier New,Courier,monospace">dacli.jar</span> file:
-<p><span style="font-family: Courier New,Courier,monospace">chmod +x dacli.jar</span></p>
+   <li>Grant execution permissions to the <code>dacli.jar</code> file:
+<p><code>chmod +x dacli.jar</code></p>
 
 </li>
    <li>Use the following command to launch the Dynamic Analyzer CLI tool:
-<p><span style="font-family: Courier New,Courier,monospace">java -jar dacli.jar</span></p></li>
+<p><code>java -jar dacli.jar</code></p></li>
 </ul>
-        </td>
-    </tr>
-   </tbody>
-  </table>
+</div>
 
 <h3>Useful Commands</h3>
 <p>The following commands are the most useful when controlling the Dynamic Analyzer with the CLI:</p>
    <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">devices</span>
-   <p>The command shows a list of connected devices. If you specify the <span style="font-family: Courier New,Courier,monospace">-u</span> option, only the devices where tracing is already launched through the CLI are listed.</p>
+   <li><code>devices</code>
+   <p>The command shows a list of connected devices. If you specify the <code>-u</code> option, only the devices where tracing is already launched through the CLI are listed.</p>
    <p>Command syntax:</p>
 <pre class="prettyprint">devices [-u]</pre>
 <p>For example:</p>
@@ -321,7 +314,7 @@ List of connected devices:
 
 <p>Take note of the device serial number. It is used to specify the device in other Dynamic Analyzer CLI commands.</p>
    </li> 
-<li><span style="font-family: Courier New,Courier,monospace">apps</span>
+<li><code>apps</code>
 <p>The command shows a list of installed applications on a specified device.</p>
 <p>Command syntax:</p>
 
@@ -344,7 +337,7 @@ List of installed applications:
 
 <p>Take note of your application name. It is used to specify the application in other Dynamic Analyzer CLI commands. If you cannot find your application, make sure it has been installed (for example, from the Tizen Studio).</p>
 </li>
-<li><span style="font-family: Courier New,Courier,monospace">start</span>
+<li><code>start</code>
 <p>The command starts tracing your application on the specified device. In addition, you must specify at least 1 profiling feature to be enabled.</p>
 <p>Command syntax:</p>
 
@@ -352,7 +345,7 @@ List of installed applications:
 start &lt;ip:port|serial&gt; -a &lt;application&gt; &lt;features&gt; [options…]
 </pre>
 
-<p>For example, you can specify the <span style="font-family: Courier New,Courier,monospace">-C</span> option to enable all CPU profiling features. You can see a list of all available features in the command help message.</p>
+<p>For example, you can specify the <code>-C</code> option to enable all CPU profiling features. You can see a list of all available features in the command help message.</p>
 <p>The following command starts the Camera application on the emulator-26101 device with the CPU profiling features enabled:</p>
 
 <pre class="prettyprint">
@@ -360,10 +353,10 @@ $ ./dacli.jar start emulator-26101 -a Camera -C
 DA tracing started.
 Run &quot;dacli stop emulator-26101&quot; to finish it.
 </pre>
-<p>You can specify the <span style="font-family: Courier New,Courier,monospace">-o</span> option to customize the tracing result location.</p>
+<p>You can specify the <code>-o</code> option to customize the tracing result location.</p>
 </li>
 
-<li><span style="font-family: Courier New,Courier,monospace">stop</span>
+<li><code>stop</code>
 <p>The command stops the active tracing process on a specified device.</p>
 <p>Command syntax:</p>
 
@@ -388,7 +381,7 @@ Output:       /home/eclipse/tizen-sdk-data/dynamic-analyzer/save/Camera_2016-08-
 </ul>
 </li>
 
-<li><span style="font-family: Courier New,Courier,monospace">version</span>
+<li><code>version</code>
 <p>The command displays information about the Dynamic Analyzer, including its version, build time, and useful links.</p>
 <p>Command syntax:</p>
 
@@ -438,4 +431,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
index 41b46a4..3827b73 100644 (file)
@@ -39,7 +39,7 @@
 <h1>Handling Common Dynamic Analyzer Tasks</h1>
 <p>The common tasks in the Dynamic Analyzer show how you can launch the Dynamic Analyzer and understand its user interface. Once you have installed your application on the emulator or  Tizen device, you are ready to run the Dynamic Analyzer.</p>
 <p></p>
-<p class="figure">Figure: Dynamic Analyzer icon</p>
+<p align="center"><strong>Figure: Dynamic Analyzer icon</strong></p>
 <p align="center"> <img alt="Dynamic analyzer" src="../images/da_common_analyzer.png" /></p>
 
 <h2 id="dynamic">Dynamic Analyzer Launch</h2>
@@ -59,7 +59,7 @@
                </li>
        </ul>
 <p>After the Dynamic Analyzer startup, select the profiling target and applicable features in the feature dialog. The selected features are listed in the <strong>Selected Features</strong> pane. When you are ready, click <strong>OK</strong> and the Dynamic Analyzer main UI opens.</p>
-<p class="figure">Figure: Feature selection dialog</p>
+<p align="center"><strong>Figure: Feature selection dialog</strong></p>
 <p align="center"> <img alt="Feature selection dialog" src="../images/da_common_feat_sel.png" /></p>
 
 <h2 id="main_ui">Main UI</h2>
@@ -71,7 +71,7 @@
                <li>Chart view</li>
                <li>Detail table view</li>
        </ol>
-<p class="figure">Figure: Main UI</p>
+<p align="center"><strong>Figure: Main UI</strong></p>
 <p align="center"> <img alt="Main UI" src="../images/da_common_main_ui.png" /></p>
 <h3>Menu Bar</h3>
 <p>You can trigger analysis functions in the menu bar:</p>
 
 <h3>Toolbar</h3>
 <p>You can trigger some major analysis functions from the toolbar:</p>
-<p class="figure">Figure: Toolbar</p>
+<p align="center"><strong>Figure: Toolbar</strong></p>
 <p align="center"> <img alt="Toolbar" src="../images/da_common_toolbar.png" /></p>
        <ol>
                
                <li>App life-cycle bar: View the life-cycle of the application.</li>
                <li>Zoom bar: Set a scale for the chart view.</li>
        </ol>
-<p class="figure">Figure: Chart view</p>
+<p align="center"><strong>Figure: Chart view</strong></p>
 <p align="center"> <img alt="Chart view" src="../images/da_common_chart.png" /></p>
 
 <h3>Detail Table View</h3>
                <li><strong>Tag</strong>: Dlog tag, which the application used</li>
                <li><strong>Message</strong>: Dlog message</li>
        </ul>
-<p class="figure">Figure: Dlog table</p>
+<p align="center"><strong>Figure: Dlog table</strong></p>
 <p align="center"> <img alt="Dlog table" src="../images/da_common_dlog.png" /></p>
 
 <h4>Call Trace Table</h4>
                <li><strong>API</strong>: Name of the called function</li>
                <li><strong>Binary path</strong>: Path of binary</li>
        </ul>
-<p class="figure">Figure: Call Trace table</p>
+<p align="center"><strong>Figure: Call Trace table</strong></p>
 <p align="center"> <img alt="Call Trace table" src="../images/da_common_call_trace.png" /></p>
-<table class="note"> 
-       <tbody> 
-               <tr> 
-                       <th class="note">Note</th> 
-               </tr> 
-               <tr> 
-                       <td class="note">If your application is built by setting the optimization option above O0 (default value), the API callstack-related information shown in the Call Trace table can be incorrect. To profile your application with the Dynamic Analyzer, you must not change the optimization option.</td> 
-               </tr> 
-       </tbody>
-</table>
+
+<div class="note">
+    <strong>Note</strong>
+    If your application is built by setting the optimization option above O0 (default value), the API callstack-related information shown in the Call Trace table can be incorrect. To profile your application with the Dynamic Analyzer, you must not change the optimization option.
+</div>
 
 <h4>Startup Table</h4>
 <p>The Startup table shows the startup information of the application. The table contains the following columns:</p>
                <li><strong>Stage</strong>: Stage of the application life-cycle:
                        <ul>
                                <li><strong>library mapping</strong> is a linking phase when the linker maps the library dependencies of the application.</li>
-                               <li><strong>main</strong> is an execution phase from the beginning to the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function within the <span style="font-family: Courier New,Courier,monospace">main()</span> function.</li>
-                               <li><strong>create</strong> is an execution phase of the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback within the <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> struct (this callback function is executed at the start of the application).</li>
-                               <li><strong>service</strong> is an execution phase of the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback within the <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> struct (this callback function is executed when another application sends a launch request to the application).</li>
+                               <li><strong>main</strong> is an execution phase from the beginning to the <code>ui_app_main()</code> function within the <code>main()</code> function.</li>
+                               <li><strong>create</strong> is an execution phase of the <code>app_create_cb()</code> callback within the <code>ui_app_lifecycle_callback_s</code> struct (this callback function is executed at the start of the application).</li>
+                               <li><strong>service</strong> is an execution phase of the <code>app_control_cb()</code> callback within the <code>ui_app_lifecycle_callback_s</code> struct (this callback function is executed when another application sends a launch request to the application).</li>
                        </ul>
                </li>
                <li><strong>Start Time</strong>: Start time of the stage</li>
                <li><strong>End Time</strong>: End time of the stage</li>
        </ul>
-<p class="figure">Figure: Startup table</p>
+<p align="center"><strong>Figure: Startup table</strong></p>
 <p align="center"> <img alt="Startup table" src="../images/da_common_startup.png" /></p>
 
 <h4>Callstack Table</h4>
                <li><strong>Address</strong>: Address of the called function</li>
                <li><strong>Binary path</strong>: Path of the binary</li>
        </ul>
-<p class="figure">Figure: Callstack table</p>
+<p align="center"><strong>Figure: Callstack table</strong></p>
 <p align="center"> <img alt="Callstack table" src="../images/da_common_callstack.png" /></p>
 
 <p>If the symbol is located in the user binary, it is shown in blue. If the symbol name cannot be found, it is marked as an unknown function.</p>
 <p>The exclusive time is the amount of execution time that is passed within the method, excluding the time spent in methods called from the method in question. The inclusive time is the amount of execution time that is passed within the method, including the time spent in methods called from the method in question.</p>
 <p>The CPU time is the actual CPU time consumed by the process. The value is obtained by sampling. The elapsed time is the wall-clock time, meaning the time elapsed between the method entry and exit.</p>
 
-<p class="figure">Figure: Function Profiling table</p>
+<p align="center"><strong>Figure: Function Profiling table</strong></p>
 <p align="center"><img alt="Function Profiling table" src="../images/da_common_func_proftable.png" /></p>
 
 <h4>Failed API Table</h4>
    <li><strong>PID</strong>: PID</li>
 </ul>
 
-<p class="figure">Figure: Failed API table</p>
+<p align="center"><strong>Figure: Failed API table</strong></p>
 <p align="center"><img alt="Failed API table" src="../images/da_common_failedapi_table.png" /></p>
 
 <h4>Warning Table</h4>
    <li><strong>Warning</strong>: Warning message</li>
 </ul>
 
-<p class="figure">Figure: Warning table</p>
+<p align="center"><strong>Figure: Warning table</strong></p>
 <p align="center"><img alt="Warning table" src="../images/da_common_warning_table.png" /></p>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
index 8fc81c0..aff808c 100644 (file)
@@ -47,7 +47,7 @@
 <li><a href="#details">File Details</a> view shows detailed information of the file selected in the file chart.</li>
 </ul>
 
-<p class="figure">Figure: File analysis</p>
+<p align="center"><strong>Figure: File analysis</strong></p>
 <p align="center"><img alt="File analysis" src="../images/da_file_analysis.png" /></p>
  
  
@@ -71,7 +71,7 @@
 <h2 id="chart">File Chart</h2>
 <p>The file chart has a separated child and parent chart. There can be only 1 parent chart of each file, whereas multiple child charts are supported. Multiple child charts are separated by PID and TID. The parent chart records all the operations performed by the child charts.</p>
 
-<p class="figure">Figure: File chart</p>
+<p align="center"><strong>Figure: File chart</strong></p>
 <p align="center"><img alt="File chart" src="../images/da_file_chart.png" /></p> 
 
 <p>The file chart shows the following information:</p>
 <h2 id="api_list">File API List</h2>
 <p>The File API List table shows the APIs that are associated with the file selected in the file chart. When the child of the file is selected, this view shows information about the file included in the TID.</p>
 
-<p class="figure">Figure: File API List table</p>
+<p align="center"><strong>Figure: File API List table</strong></p>
 <p align="center"><img alt="File API List table" src="../images/da_file_apilist.png" /></p>
 
 <p>The table contains the following columns:</p>
 <h2 id="details">File Details</h2>
 <p>The File Details view shows detail information of the file selected in the file chart. When the child row of the file is selected, this view shows information of the file that is included in the TID.</p>
 
-<p class="figure">Figure: File Details view</p>
+<p align="center"><strong>Figure: File Details view</strong></p>
 <p align="center"><img alt="File Details view" src="../images/da_file_details.png" /></p>
 
 <p>The view contains the following fields:</p>
index 41e8d33..377a029 100644 (file)
@@ -53,7 +53,7 @@
 <li><a href="#callstack">CallStack</a> table shows the call stack of the chosen allocation from the <strong>Persistent Allocations</strong> table.</li>
 <li><a href="#map">Memory Map</a> table shows detailed information of the memory mapping.</li>
 </ul>
-<p class="figure">Figure: Memory usage analysis</p>
+<p align="center"><strong>Figure: Memory usage analysis</strong></p>
 <p align="center"><img alt="Memory usage analysis" src="../images/da_memory_analysis.png" /></p>
 
 <h2 id="memory_chart">Memory Chart</h2>
@@ -62,7 +62,7 @@
 <li><strong>System Memory</strong> chart
 <p>You can check the memory size of the system and process.</p>
  
-<p class="figure">Figure: System Memory chart</p>
+<p align="center"><strong>Figure: System Memory chart</strong></p>
 <p align="center"><img alt="System Memory chart" src="../images/da_memory_system.png" /></p>
 </li>
 <li><strong>Process Memory</strong> chart
@@ -71,7 +71,7 @@
        <li><strong>VSS</strong>: Virtual Set Size</li>
        <li><strong>RSS</strong>: Resident Set Size</li>
        <li><strong>PSS</strong>: Proportional Set Size</li></ul>
-<p class="figure">Figure: Process Memory chart</p>
+<p align="center"><strong>Figure: Process Memory chart</strong></p>
 <p align="center"><img alt="Process Memory chart" src="../images/da_memory_process.png" /></p>
 </li>
 <li id="heap"><strong>Heap Allocation</strong> chart
@@ -79,7 +79,7 @@
        <ul>
        <li><strong>Total</strong>: Allocated heap memory size of the process</li>
        <li><strong>Main Executable</strong>: Allocated heap memory size of the main executable</li></ul>
-<p class="figure">Figure: Heap Allocation chart</p>
+<p align="center"><strong>Figure: Heap Allocation chart</strong></p>
 <p align="center"><img alt="Heap Allocation chart" src="../images/da_memory_heap.png" /></p>
 <p>To show the persistent memory charts, select <strong>View &gt; Report &gt; Persistent Memory Charts</strong>.</p>
 <p>These charts are shown above the heap allocation charts after tracing is stopped or when the trace is loaded from file. You can see the following additional information:</p>
 <li><strong>Process Persistent</strong>: Size of the heap memory already allocated in the process and not freed by the end of the trace.</li>
 <li><strong>Main Executable Persistent/Persistent</strong>: Size of the heap memory already allocated by the main executable or each library, and not freed by the end of the trace.</li>
 </ul>
-<p class="figure">Figure: Heap Allocation Chart with the Persistent Memory Charts option enabled</p>
+<p align="center"><strong>Figure: Heap Allocation Chart with the Persistent Memory Charts option enabled</strong></p>
 <p align="center"><img alt="Heap Allocation chart with Persistent Memory Charts" src="../images/da_memory_persistent_option.png" /></p>
 
 <p>When you select one of the heap allocation charts or its children, the corresponding <strong>Statistics</strong> table entry is also selected. This can be helpful if you need more detailed information on some process or library.</p>
-<p class="figure">Figure: Cross-focusing from Heap Allocation charts to the Statistics table</p>
+<p align="center"><strong>Figure: Cross-focusing from Heap Allocation charts to the Statistics table</strong></p>
 <p align="center"><img alt="Cross-focusing from Heap Allocation charts to the Statistics table" src="../images/da_memory_heap_statistics.png" /></p>
 
 </li>
 <h2 id="details">Details</h2>
 <p>You can check the changes of the system and process memory size in the <strong>Details</strong> table.</p>
 
-<p class="figure">Figure: Details table</p>
+<p align="center"><strong>Figure: Details table</strong></p>
 <p align="center"><img alt="Details table" src="../images/da_memory_details.png" /></p>
 
 <p>The table contains the following columns:</p>
 <p>To remove a marker, double-click it.</p>
 <p>Markers and intervals are numbered starting from zero. The <strong>Range Analysis</strong> table allows you to compare the changes in memory usage between time markers. For the explanation of the data shown for each range, see <a href="#statistics">Statistics</a>.</p>
 
-<p class="figure">Figure: Range Analysis table</p>
+<p align="center"><strong>Figure: Range Analysis table</strong></p>
 
 <p align="center"><img alt="Range Analysis table" src="../images/da_memory_range.png" /></p>
 
 
 <h2 id="statistics">Statistics</h2>
 <p>You can check the change of allocation and free by total amount of each library in the <strong>Statistics</strong> table.</p>
-<p class="figure">Figure: Statistics table</p>
+<p align="center"><strong>Figure: Statistics table</strong></p>
 <p align="center"><img alt="Statistics table" src="../images/da_memory_statistics.png" /></p>
 <p>The table contains the following columns:</p>
 <ul>
 <li>Persistent allocations for a selected interval. These are all allocations occurred during the selected interval and not freed by the end of the interval. They can be shown both during tracing and after tracing is stopped. For this type of data, you must select an interval in the timeline charts area.</li>
 </ul>
 
-<p class="figure">Figure: Persistent Allocations table</p>
+<p align="center"><strong>Figure: Persistent Allocations table</strong></p>
 <p align="center"><img alt="Persistent Allocations table" src="../images/da_memory_persistent.png" /></p>
 
 <p>The table contains the following columns:</p>
 <h2 id="callstack">CallStack</h2>
 <p>You can see a call stack for each allocation from the <strong>Persistent Allocations</strong> table in the <strong>CallStack</strong> table. The allocation&#39;s call stack is shown when you select an allocation in the <strong>Persistent Allocations</strong> table.</p>
 
-<p class="figure">Figure: CallStack table</p>
+<p align="center"><strong>Figure: CallStack table</strong></p>
 <p align="center"><img alt="CallStack table" src="../images/da_memory_callstack.png" /></p>
 
 <p>The table contains the following columns:</p>
 
 <h2 id="map">Memory Map</h2>
 <p>You can check the memory mapping information of a select process in the <strong>Memory Map</strong> table. Using this table, you can understand how big every library mapped into a process is, including its starting address (low address) and ending address (high address).</p>
-<p class="figure">Figure: Memory Map table</p>
+<p align="center"><strong>Figure: Memory Map table</strong></p>
 <p align="center"><img alt="Memory Map table" src="../images/da_memory_map.png" /></p>
 
 <p>The table contains the following columns:</p>
index 29a1d23..27f84c5 100644 (file)
 <li><a href="#details">Network Details</a> view shows detailed information of the socket selected in the socket chart.</li>
 </ul>
 
-<p class="figure">Figure: Network analysis</p>
+<p align="center"><strong>Figure: Network analysis</strong></p>
 <p align="center"><img alt="Network analysis" src="../images/da_network_analysis.png" /></p>
  
 <h2 id="chart">Network Chart</h2>
 <p>The network chart displays the socket object in a tree format using a graph.</p>
 
-<p class="figure">Figure: Network chart</p>
+<p align="center"><strong>Figure: Network chart</strong></p>
 <p align="center"><img alt="Network chart" src="../images/da_network_chart.png" /></p> 
 
 <p>The color of the horizontal bar in the chart indicates the state of the socket:</p>
@@ -80,7 +80,7 @@
 <h2 id="api_list">Network API List</h2>
 <p>The Network API List table displays the APIs associated with the socket object selected in the network chart.</p>
 
-<p class="figure">Figure: Network API List table</p>
+<p align="center"><strong>Figure: Network API List table</strong></p>
 <p align="center"><img alt="Network API List table" src="../images/da_network_apilist.png" /></p>
 
 <p>The table contains the following columns:</p>
 <h2 id="details">Network Details</h2>
 <p>The Network Details view displays detailed information of the network socket object selected in the network chart.</p>
 
-<p class="figure">Figure: Network Details view</p>
+<p align="center"><strong>Figure: Network Details view</strong></p>
 <p align="center"><img alt="Network Details view" src="../images/da_network_details.png" /></p>
 
 <p>The view contains the following fields:</p>
index f920f01..0cfdc5f 100644 (file)
@@ -54,7 +54,7 @@
 <li><a href="#texture">Texture</a> table shows texture information.</li>
 </ul>
 
-<p class="figure">Figure: OpenGL analysis</p>
+<p align="center"><strong>Figure: OpenGL analysis</strong></p>
 <p align="center"><img alt="OpenGL analysis" src="../images/da_opengl_analysis.png" /></p> 
 
 <h2 id="chart">OpenGL&reg; Chart</h2>
 <ul>
 <li>The Frame time chart shows the elapsed frame time. The X axis value of the frame time chart means the frame index number. A small chart value means a good status frame. Only the frames smaller than the value specified by the user and changed to yellow are visible.
 
-<p class="figure">Figure: Frame time chart</p>
+<p align="center"><strong>Figure: Frame time chart</strong></p>
 <p align="center"><img alt="Frame time chart" src="../images/da_opengl_frame.png" /></p> 
 </li>
 <li>The Frame rate chart shows the FPS. The X axis value of the frame rate chart means the analysis time. A larger chart value means a good status frame.
 
-<p class="figure">Figure: Frame rate chart analysis</p>
+<p align="center"><strong>Figure: Frame rate chart analysis</strong></p>
 <p align="center"><img alt="Frame rate chart analysis" src="../images/da_opengl_frame_analysis.png" /></p>
 </li>
 </ul>
@@ -75,7 +75,7 @@
 <h2 id="statistics">Statistics</h2>
 <p>The Statistics table displays the API statistics related to EvasGL and OpenGL&reg; 2.0.</p>
 
-<p class="figure">Figure: Statistics table</p>
+<p align="center"><strong>Figure: Statistics table</strong></p>
 <p align="center"><img alt="Statistics table" src="../images/da_opengl_statistics.png" /></p> 
 
 <p>The table contains the following columns:</p>
@@ -89,7 +89,7 @@
 <h2 id="api_list">API List</h2>
 <p>The API List table displays the APIs associated with the values selected in the chart.</p>
 
-<p class="figure">Figure: API List table</p>
+<p align="center"><strong>Figure: API List table</strong></p>
 <p align="center"><img alt="API List table" src="../images/da_opengl_apilist.png" /></p> 
 
 <p>The table contains the following columns:</p>
 <h2 id="redundant">Redundant</h2>
 <p>The Redundant table displays the APIs that are called repeatedly with the same parameters.</p>
 
-<p class="figure">Figure: Redundant table</p>
+<p align="center"><strong>Figure: Redundant table</strong></p>
 <p align="center"><img alt="Redundant table" src="../images/da_opengl_redundant.png" /></p> 
 
 <p>The table contains the following columns:</p>
 <h2 id="context">Context</h2>
 <p>The Context table displays the context rendering state associated with the item selected in the API List table. The title of the table refers to the context number of the selected API.</p>
 
-<p class="figure">Figure: Context table</p>
+<p align="center"><strong>Figure: Context table</strong></p>
 <p align="center"><img alt="Context table" src="../images/da_opengl_context.png" /></p> 
 
 <p>The table contains the following columns:</p>
 <h2 id="program">Program</h2>
 <p>The Program table displays the program information associated with the items selected in the API List table.</p>
 
-<p class="figure">Figure: Program table</p>
+<p align="center"><strong>Figure: Program table</strong></p>
 <p align="center"><img alt="Program table" src="../images/da_opengl_program.png" /></p> 
 
 <p>The table contains the following columns:</p>
 <h2 id="texture">Texture</h2>
 <p>The Texture table displays the textures associated with the item selected in the API List table.</p>
 
-<p class="figure">Figure: Texture table</p>
+<p align="center"><strong>Figure: Texture table</strong></p>
 <p align="center"><img alt="Texture table" src="../images/da_opengl_texture.png" /></p>
 
 <p>The table contains the following columns:</p>
index 06b707c..af8854e 100644 (file)
@@ -46,7 +46,7 @@
 <li>Study the tracing result and fix performance issues again.</li>
 </ol>
 
-<p class="figure">Figure: Basic workflow using Dynamic Analyzer</p> 
+<p align="center"><strong>Figure: Basic workflow using Dynamic Analyzer</strong></p> 
 <p align="center"><img alt="Basic workflow using Dynamic Analyzer" src="../images/dynamic_analyzer_basic_workflow.png"/></p>
 
 <p>With several of profiling features on the Dynamic Analyzer, you can get a hint about how to highly optimize the application.</p>
 
 <p>When the Dynamic Analyzer is launched, a feature selection dialog opens. You can select the available features for your profiling based on the selected target profile.</p>
 
-<p class="figure">Figure: Feature selection dialog</p> 
+<p align="center"><strong>Figure: Feature selection dialog</strong></p> 
 <p align="center"><img alt="Feature selection dialog" src="../images/dynamic_analyzer_feature_selection.png"/></p>
 
 <p>The following table lists the supported features on the Dynamic Analyzer. Every feature is placed onto a specific group (CPU, Memory, File System, Graphics, Network, UI, Synchronization, or Energy) to help you understand the profiling category.</p>
 
+<p align="center" class="Table"><strong>Table: Available features</strong></p>
 <table>
-<caption>Table: Available features</caption>
 <tbody>
 <tr>
  <th>Group</th>
index 1491619..7607261 100644 (file)
 <li><a href="#details">Thread Details</a> view displays detailed information on the thread or synchronization object selected in the thread chart.</li>
 </ul>
 
-<p class="figure">Figure: Thread analysis</p>
+<p align="center"><strong>Figure: Thread analysis</strong></p>
 <p align="center"><img alt="Thread analysis" src="../images/da_thread_analysis.png" /></p>
  
 <h2 id="chart">Thread Chart</h2>
 <p>The thread chart displays the thread and the related synchronization object in a tree format using a graph.</p>
 
-<p class="figure">Figure: Thread chart</p>
+<p align="center"><strong>Figure: Thread chart</strong></p>
 <p align="center"><img alt="Thread chart" src="../images/da_thread_chart.png" /></p> 
 
 <p>The chart classifies thread and synchronization object states by color and shape:</p>
@@ -68,7 +68,7 @@
 <h2 id="api_list">Thread API List</h2>
 <p>The Thread API List table displays the APIs associated with the thread or synchronization object selected in the thread chart.</p>
 
-<p class="figure">Figure: Thread API List table</p>
+<p align="center"><strong>Figure: Thread API List table</strong></p>
 <p align="center"><img alt="Thread API List table" src="../images/da_thread_apilist.png" /></p>
 
 <p>The table contains the following columns:</p>
@@ -86,7 +86,7 @@
 <h2 id="details">Thread Details</h2>
 <p>The Thread Details view displays detailed information of the thread or synchronization object selected in the thread chart.</p>
 
-<p class="figure">Figure: Thread Details view</p>
+<p align="center"><strong>Figure: Thread Details view</strong></p>
 <p align="center"><img alt="Thread Details view" src="../images/da_thread_details.png" /></p>
 
 <p>The view contains the following fields:</p>
index fb4ea46..a36faf3 100644 (file)
@@ -50,7 +50,7 @@
 <li><a href="#layout">Layout</a> view shows a block representation of your application.</li>
 </ol>
 
-<p class="figure">Figure: UI hierarchy analysis</p> 
+<p align="center"><strong>Figure: UI hierarchy analysis</strong></p> 
 <p align="center"><img alt="UI hierarchy analysis" src="../images/da_ui_analysis.png"/></p>
 
 <h2 id="hierarchy">Hierarchy Tree</h2>
@@ -62,7 +62,7 @@
                <li>To see only Elementary UI objects without Evas and Edje, select the <strong>Elementary</strong> check box at the top left corner.</li>
                <li>Click the refresh button (<img alt="Refresh button" src="../images/da_ui_refresh_button.png"/>).</li>
        </ol>
-<p>In the view, each node represents a corresponding UI object and shows its type (such as <span style="font-family: Courier New,Courier,monospace">elm_win</span>).</p>
+<p>In the view, each node represents a corresponding UI object and shows its type (such as <code>elm_win</code>).</p>
  </li>
  <li>You can zoom in and out the hierarchy tree.
  <p>To zoom in or out of the tree, use the slider at the bottom right corner, or use a keyboard shortcut (<strong>Ctrl + mouse scroll wheel</strong>).</p></li>
@@ -71,8 +71,8 @@
        <ol>
        <li>Select a filtering option in the combo box at the bottom left corner:
                <ul>
-               <li><strong>Type</strong>: Type of the UI object (such as <span style="font-family: Courier New,Courier,monospace">elm_win</span> or <span style="font-family: Courier New,Courier,monospace">elm_button</span>)</li>
-               <li><strong>Name</strong>: Name set by the EFL <span style="font-family: Courier New,Courier,monospace">evas_object_name_set()</span> function</li>
+               <li><strong>Type</strong>: Type of the UI object (such as <code>elm_win</code> or <code>elm_button</code>)</li>
+               <li><strong>Name</strong>: Name set by the EFL <code>evas_object_name_set()</code> function</li>
                <li><strong>Text</strong>: Text in the UI object (such as a Label or Text object)</li>
                </ul>
        </li>
@@ -82,7 +82,7 @@
  <li>You can export the hierarchy tree to an image file.
  <p>To save a screenshot of the tree view to an image file (PNG), click the export button (<img alt="Export button" src="../images/da_ui_export_button.png"/>) at the top right corner. In a dialog box, click <strong>Save As</strong> and define a location for the file.</p>
  
- <p class="figure">Figure: Hierarchy tree</p> 
+ <p align="center"><strong>Figure: Hierarchy tree</strong></p> 
  <p align="center"><img alt="Hierarchy tree" src="../images/da_ui_hierarchy_tree.png"/></p>
  </li>
 </ul>
 <p>The Overview area represents the entire tree in the map style. The Hierarchy Tree view displays an enlarged tree, which indicates a particular part of the whole tree in the Overview area.</p>
 <p>Through the Overview area, you can move around the whole hierarchy tree. Select and move the shaded rectangle, and the tree in the rectangle is displayed as an enlarged tree in the Hierarchy Tree view.</p>
 
-<p class="figure">Figure: Overview</p> 
+<p align="center"><strong>Figure: Overview</strong></p> 
 <p align="center"><img alt="Overview" src="../images/da_ui_overview.png"/></p>
 
 <h2 id="UI_object">UI Object</h2>
 
 <p>When you select a node in the Hierarchy Tree view, basic information about the selected UI object appears in a small balloon (UI Object view) above the node.</p>
 
-<p class="figure">Figure: UI Object view</p> 
+<p align="center"><strong>Figure: UI Object view</strong></p> 
 <p align="center"><img alt="UI Object view" src="../images/da_ui_object.png"/></p>
 
 <p>In the view, you can see:</p>
                        <li><strong>No Image</strong>: If the UI object has no image, this message appears (in case that the width or height of the UI object is 0).</li>
                        <li><strong>No Object</strong>: When the UI object does not exist anymore in the application, this message appears. This can happen because the Hierarchy Tree view is not automatically updated.</li>
                </ul>
-       <table class="note"> 
-       <tbody> 
-       <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">If there are other UI objects intersecting the position of the selected UI object, those are also displayed.</td> 
-       </tr> 
-       </tbody> 
-       </table> 
+<div class="note">
+    <strong>Note</strong>
+    If there are other UI objects intersecting the position of the selected UI object, those are also displayed.
+</div>
        </li>
-       <li>The name set by the EFL <span style="font-family: Courier New,Courier,monospace">evas_object_name_set()</span> function. If the name is not set, the <strong>No Name</strong> message appears instead of the name.</li>
+       <li>The name set by the EFL <code>evas_object_name_set()</code> function. If the name is not set, the <strong>No Name</strong> message appears instead of the name.</li>
        <li>The number of child UI objects. If the UI object has no children, the 0 children message appears.</li>
        <li>The memory address of the UI object.</li>
 </ul>
 
 <p>The Properties table shows a list of the properties for the selected UI object from the Hierarchy Tree view. To find an individual property, expand a category name by clicking the arrow on its left.</p>
 <p>The properties are categorized by the type of the EFL UI object (Evas, Elementary, or Edje). The Properties table always shows the Evas category, because all of the EFL UI objects are subtypes of Evas.</p>
-<p>If the UI object is of the Elementary or Edje type, the view shows those categories too. Each type&#39;s own properties are also categorized (such as <span style="font-family: Courier New,Courier,monospace">elm_label</span>).</p>
+<p>If the UI object is of the Elementary or Edje type, the view shows those categories too. Each type&#39;s own properties are also categorized (such as <code>elm_label</code>).</p>
 
-<p class="figure">Figure: Properties table</p> 
+<p align="center"><strong>Figure: Properties table</strong></p> 
 <p align="center"><img alt="Properties table" src="../images/da_ui_properties.png"/></p>
 
 <h2 id="layout">Layout</h2>
 
 <p>The Layout view shows a block representation of the application. When you select a node in the Hierarchy Tree view, the corresponding image is displayed and highlighted.</p>
 
-<p class="figure">Figure: Layout view</p> 
+<p align="center"><strong>Figure: Layout view</strong></p> 
 <p align="center"><img alt="Layout view" src="../images/da_ui_layout.png"/></p>
 
 
index 92ab0ba..47c6691 100644 (file)
@@ -117,16 +117,10 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 </li>
 </ul>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) -related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/ff542275%28v=vs.85%29.aspx" target="_blank">MSDN</a>).</td>
-       </tr>
-</tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) -related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/ff542275%28v=vs.85%29.aspx" target="_blank">MSDN</a>).
+</div>
 <p>No configuration is required for KVM or HAX.</p>
 </li>
 </ol>
@@ -134,14 +128,15 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 <h3>Working with the HW Virtualization, Settings, and Help</h3>
 
 <p>To run the emulator with the HW virtualization support in the Emulator Manager, set the <strong>CPU VT</strong> field to <strong>ON</strong>. The field is disabled if your system cannot support HW virtualization.</p>
-<p>You can also run the emulator with the HW virtualization support from the command line, by including the <span style="font-family: Courier New,Courier,monospace">-enable-kvm</span> (in Ubuntu) or <span style="font-family: Courier New,Courier,monospace">-enable-hax</span> (in Windows&reg; and Mac OS&reg; X) option in the start-up command.</p>
+<p>You can also run the emulator with the HW virtualization support from the command line, by including the <code>-enable-kvm</code> (in Ubuntu) or <code>-enable-hax</code> (in Windows&reg; and Mac OS&reg; X) option in the start-up command.</p>
 
        <h2 id="supported">Supported Features</h2>
 
 <p>The emulator provides various virtual HW, media formats, codecs, and <a href="#opengl">OpenGL&reg; ES acceleration</a>. For better performance of the OpenGL&reg; ES support, the Tizen emulator exploits the latest feature of the graphic driver, so always <a href="../download/prerequisites.htm#emulator">install the latest vendor-provided graphic driver</a>. The emulator, however, has some limitations and <a href="#target">differences compared to physical target devices</a>.</p>
 <p>The following table lists the basic features supported in the emulator.</p>
+
+       <p align="center" class="Table"><strong>Table: Supported emulator features</strong></p>
 <table>
-       <caption>Table: Supported emulator features</caption>
        <tbody>
        <tr>
                <th>Feature</th>
@@ -289,16 +284,10 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 <li>All chipset vendors and driver versions available to support the OpenGL&reg; 1.4 standard</li>
 </ul>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">The emulator supports only ES 1.1, ES 2.0, and EGL&trade; 1.4 versions.</td>
-       </tr>
-</tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    The emulator supports only ES 1.1, ES 2.0, and EGL&trade; 1.4 versions.
+</div>
 
 <h3 id="target" name="target">Differences Between the Emulator and Target</h3>
 
@@ -312,8 +301,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 <li><a href="#codec">Supported media formats and codecs</a></li>
 </ul>
 
+  <p align="center" class="Table"><strong>Table: Comparison summary</strong></p>
 <table>
-  <caption>Table: Comparison summary</caption>
   <tbody>
     <tr>
                <th>Category</th>
@@ -436,8 +425,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 
 <h4 id="input" name="input">Input System</h4>
 
+  <p align="center" class="Table"><strong>Table: Input differences</strong></p>
 <table>
-  <caption>Table: Input differences</caption>
   <tbody>
 
    <tr>
@@ -465,8 +454,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 <h4 id="graphics" name="graphics">Graphics and Display</h4>
 
  
+  <p align="center" class="Table"><strong>Table: Graphics and display differences</strong></p>
  <table>
-  <caption>Table: Graphics and display differences</caption>
   <tbody>
 
    <tr>
@@ -494,8 +483,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
  <h4 id="sensor" name="sensor">Virtual Sensor (Emulator Control Panel)</h4>
    
   
+  <p align="center" class="Table"><strong>Table: Virtual sensor differences</strong></p>
 <table>
-  <caption>Table: Virtual sensor differences</caption>
   <tbody>  
 
   <tr>
@@ -629,8 +618,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 
 <h4 id="telephony" name="telephony">Telephony</h4>
 
+  <p align="center" class="Table"><strong>Table: Telephony differences</strong></p>
  <table>
-  <caption>Table: Telephony differences</caption>
   <tbody>  
  
  <tr>
@@ -658,8 +647,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
    
 <h4 id="power" name="power">Power Management</h4>
  
+  <p align="center" class="Table"><strong>Table: Power management differences</strong></p>
  <table>
-  <caption>Table: Power management differences</caption>
   <tbody>  
  
  <tr>
@@ -686,8 +675,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 
 <h4 id="codec" name="codec">Supported Media Formats and Codecs</h4>
 
+  <p align="center" class="Table"><strong>Table: Media format and codec differences</strong></p>
  <table>
-  <caption>Table: Media format and codec differences</caption>
   <tbody>  
  
  <tr>
index ea3cca0..faca2a3 100644 (file)
 
 <p>The control keys are visible on the emulator when you start it. To access the context menu, right-click the emulator.</p> 
 
-<p class="figure">Figure: Emulator control keys</p>
+<p align="center"><strong>Figure: Emulator control keys</strong></p>
 <p align="center"><img alt="Emulator control keys" src="../images/emulator_control_keys.png" /></p>     
 
 <p>The emulator can use a general purpose or profile-specific skin. While the profile-specific skin provides a realistic skin and hardware keys, the general purpose skin shows a consistent frame on every state of resolution, scale, or rotation, and enables you to change the emulator display resolution to custom values. You can also see the key window.</p>
 
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-        <tr>
-           <td class="note">The layout of the general purpose skin is not configurable like the profile-specific skin.</td>
-       </tr>
-  </tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    The layout of the general purpose skin is not configurable like the profile-specific skin.
+</div>
 
 <ul>
 <li>Key window
 
 <p>The following figure illustrates the general purpose skin emulator.</p>
 
-<p class="figure">Figure: General purpose skin emulator</p>
+<p align="center"><strong>Figure: General purpose skin emulator</strong></p>
 <p align="center"><img alt="General purpose skin emulator" src="../images/emulator_control_general.png" /></p>
 
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-        <tr>
-           <td class="note">You can create a custom resolution emulator by using the <a href="emulator_manager.htm#control">Emulator Manager CLI</a>, and launch it with the general purpose skin. It is not guaranteed that all the applications are correctly shown in the custom resolution.</td>
-       </tr>
-  </tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    You can create a custom resolution emulator by using the <a href="emulator_manager.htm#control">Emulator Manager CLI</a>, and launch it with the general purpose skin. It is not guaranteed that all the applications are correctly shown in the custom resolution.
+</div>
 
 <h3 id="controlkeys" name="controlkeys">Control Keys</h3>
 <p>The following hardware keys are available on the emulator:</p>
 <li>Emulator name (the top row in the menu)
 <p>The <strong>Detailed Info</strong> window is displayed, showing the <strong>Shortcut Info</strong> and <strong>VM Info</strong> tabs. The <strong>Shortcut Info</strong> tab lists the <a href="keyboard_shortcuts.htm#emulator">emulator keyboard shortcuts</a> and the <strong>VM Info</strong> tab defines the virtual machine details.</p>
 <p>In Mac OS&reg; X: To use the emulator keyboard shortcuts, open the Keyboard Setting dialog and switch your Mac function keys option to work as standard function keys.</p>
+
+       <p align="center" class="Table"><strong>Table: VM Info</strong></p>
 <table border="1">
-       <caption>Table: VM Info</caption>
-               <tbody>
+       <tbody>
                        <tr>
                                <th style="text-align:center;margin-left:auto;margin-right:auto;">Feature</th>
                                <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>       
 
 <li><strong>Advanced &gt; Controller</strong>
 <p>Show or hide the controller window.</p>
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-               <tr>
-                       <td class="note">The <strong>Controller</strong> menu is not supported in the profile-specific skin.</td>
-               </tr>
-  </tbody>
-</table></li>
+<div class="note">
+    <strong>Note</strong>
+    The <strong>Controller</strong> menu is not supported in the profile-specific skin.
+</div></li>
 <li><strong>Advanced &gt; Screenshot</strong>
 <p>Capture a screenshot of the emulator.</p></li>
 
 
 </ul>
 
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-               <tr>
-                       <td class="note">In Ubuntu, you must change a global GNOME setting to view the menu icons:
-                       <ol>
-                       <li>In the command console, execute the <span style="font-family: Courier New,Courier,monospace">gconf-editor</span> command.</li>
-                       <li>In the tree, navigate to <strong>desktop &gt; gnome &gt; interface</strong>.</li>
-                       <li>Enable the <strong>menus_have_icons</strong> option.</li>
-                       </ol>
-               </td>
-               </tr>
-  </tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    In Ubuntu, you must change a global GNOME setting to view the menu icons:
+   <ol>
+   <li>In the command console, execute the <code>gconf-editor</code> command.</li>
+   <li>In the tree, navigate to <code>desktop &gt; gnome &gt; interface</code>.</li>
+   <li>Enable the <code>menus_have_icons</code> option.</li>
+   </ol>
+</div>
 
 <h2 id="panel">Using the Control Panel</h2>
 
 <li><strong>Card</strong>, which represents each device, shows the representative device status. By clicking a card, you can inject an event directly or open <strong>Popup</strong> to do it. </li>
 <li><strong>Popup</strong> displays testable events for each device.</li>
 </ul>
-<p class="figure">Figure: Emulator Control Panel</p>
+<p align="center"><strong>Figure: Emulator Control Panel</strong></p>
 <p align="center"><img alt="Emulator Control Panel" src="../images/emulator_control_panel.png" /></p>
  
 
 <li>Right-click the emulator and select <strong>Control Panel</strong>.</li>
 </ol>
 
-<p class="figure">Figure: Opening the control panel</p>
+<p align="center"><strong>Figure: Opening the control panel</strong></p>
 <p align="center"><img alt="Opening the control panel" src="../images/emulator_control_panel_open.png" /></p>
  
 <p>The main features of the Emulator Control Panel are described in the following sections.</p>
 <p>To lose the network connection, set the link status to off. To forward a remote or local port to an inside port of the emulator, enter values in text boxes, and click <strong>Apply</strong>.</p>
 
 <h3>Mounting a Host Directory</h3>
-<p>The specified host directory is mounted to <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> to share resources. Therefore, file transfer is possible through the host directory sharing feature without using the SDB utility.</p>
+<p>The specified host directory is mounted to <code>/mnt/host</code> to share resources. Therefore, file transfer is possible through the host directory sharing feature without using the SDB utility.</p>
 
 <h3>Uninstalling Applications</h3>
 <p>You can see user-installed applications and uninstall them.</p>
 <li>In the <strong>RSSI</strong> tab, set the RSSI information level using the <strong>Level</strong> slider.</li>
 <li>In the <strong>SD Card</strong> tab, select the <strong>4G</strong>, <strong>8G</strong>, <strong>16G</strong>, or <strong>32G</strong> SD card and attach it to the emulator at runtime.
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The same SD card cannot be attached to multiple emulators at the same time.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    The same SD card cannot be attached to multiple emulators at the same time.
+</div>
 </li>
 </ul>
 
 
 <h3>Providing NFC Data</h3>
 <p>The control panel can be used to test the near-field communication (NFC) features, such as NFC data exchange format (NDEF) events, NFC tag detection, and peer-to-peer (P2P) data connections in the <strong>NFC</strong> tab.</p>
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The control panel only sends NFC-related events to the emulator. There is no actual information exchange between the control panel and emulator. Therefore, for features such as writing information to an NFC tag, the emulator simply displays a success message.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    The control panel only sends NFC-related events to the emulator. There is no actual information exchange between the control panel and emulator. Therefore, for features such as writing information to an NFC tag, the emulator simply displays a success message.
+</div>
 <ul>
 <li>Creating NDEF messages
 <p>An NDEF message contains one or more NDEF records. In the <strong>NDEF Message</strong> section:</p>
@@ -426,16 +390,10 @@ timestamp, x, y, z
 <li>Generating incoming calls
        <p>Incoming calls are generated in the <strong>Event Injector &gt; Telephony &gt; Call</strong> tab.</p>
 
-         <table class="note">
-          <tbody>
-               <tr>
-                <th class="note">Note</th>
-               </tr>
-               <tr>
-                <td class="note">A Mobile Termination (MT) call is made from the Event Injector view to the emulator. A Mobile Origination (MO) call is made from the emulator to the Event Injector view using the phone application of the emulator.</td>
-               </tr>
-          </tbody>
-         </table>
+<div class="note">
+    <strong>Note</strong>
+    A Mobile Termination (MT) call is made from the Event Injector view to the emulator. A Mobile Origination (MO) call is made from the emulator to the Event Injector view using the phone application of the emulator.
+</div>
        <p>To make an MT call:</p>
        <ol>
        <li>Enter the phone number you want to imitate the call from.</li>
@@ -481,8 +439,8 @@ timestamp, x, y, z
 <h3>Control Panel Features on Different Profiles</h3>
 <p>The following table lists the control panel features and their availability on different profiles.</p>
 
+<p align="center" class="Table"><strong>Table: Control panel features</strong></p>
 <table>
-<caption>Table: Control panel features</caption>
 <tbody>
 <tr>
  <th colspan="2">Feature</th>
@@ -608,25 +566,25 @@ timestamp, x, y, z
 <p>You can control and monitor the Tizen emulator by using the Emulator Control Panel CLI instead of the control panel UI tool. The CLI supports all the functionalities of the UI. The CLI binary is located in:</p>
        <ul>
                <li>In Ubuntu:
-               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/tools/emulator/bin/ecp-cli</span></p></li>
+               <p><code>&lt;TIZEN_STUDIO&gt;/tools/emulator/bin/ecp-cli</code></p></li>
                <li>In Windows&reg;:
-               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;\tools\emulator\bin\ecp-cli.bat</span></p></li>
+               <p><code>&lt;TIZEN_STUDIO&gt;\tools\emulator\bin\ecp-cli.bat</code></p></li>
        </ul>
 
 <p>You can use the CLI in a session mode or shell mode:</p>
 <ul><li>Session mode
-<p>You can access this mode by running the binary without any parameters. The mode keeps a session until it is exited. You can exit by entering the <span style="font-family: Courier New,Courier,monospace">exit</span> command.</p></li>
+<p>You can access this mode by running the binary without any parameters. The mode keeps a session until it is exited. You can exit by entering the <code>exit</code> command.</p></li>
 <li>Shell mode
 <p>This mode is used for one-time message handling.</p></li></ul>
-<p class="figure">Figure: Session and shell modes</p> 
+<p align="center"><strong>Figure: Session and shell modes</strong></p> 
 <p align="center"><img alt="Session and shell modes" src="../images/emulator_control_cli_modes.png" /></p>
 
 <p>In Ubuntu, the bash-based auto-completion is used with the <strong>TAB</strong> key.</p>
 
 <p>The following tables list the supported commands of the control panel CLI.</p>
 
+<p align="center" class="Table"><strong>Table: CLI common commands</strong></p>
 <table>
-<caption>Table: CLI common commands</caption>
 <tbody>
 <tr>
  <th>Command</th>
@@ -634,48 +592,48 @@ timestamp, x, y, z
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">help</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">help [device]</span></td>
- <td>To get help, type the command as <span style="font-family: Courier New,Courier,monospace">help</span>. For a more specific device help, use the device parameter.</td>
+ <td><code>help</code></td>
+ <td><code>help [device]</code></td>
+ <td>To get help, type the command as <code>help</code>. For a more specific device help, use the device parameter.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">keycode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">keycode &lt;key-code&gt; [period|press|release]</span></td>
+ <td><code>keycode</code></td>
+ <td><code>keycode &lt;key-code&gt; [period|press|release]</code></td>
  <td>To enter a key code for a mobile device:
- <ul><li><span style="font-family: Courier New,Courier,monospace">114</span>: Volume down</li>
-<li><span style="font-family: Courier New,Courier,monospace">115</span>: Volume up</li>
-<li><span style="font-family: Courier New,Courier,monospace">139</span>: Home</li>
-<li><span style="font-family: Courier New,Courier,monospace">158</span>: Back</li>
-<li><span style="font-family: Courier New,Courier,monospace">169</span>: Menu</li></ul></td>
+ <ul><li><code>114</code>: Volume down</li>
+<li><code>115</code>: Volume up</li>
+<li><code>139</code>: Home</li>
+<li><code>158</code>: Back</li>
+<li><code>169</code>: Menu</li></ul></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hmp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">hmp &lt;hmp command&gt;</span></td>
- <td>Access the QEMU human monitor protocol commands. For a list of provided commands, enter the <span style="font-family: Courier New,Courier,monospace">ecp-cli hmp help</span> command.</td>
+ <td><code>hmp</code></td>
+ <td><code>hmp &lt;hmp command&gt;</code></td>
+ <td>Access the QEMU human monitor protocol commands. For a list of provided commands, enter the <code>ecp-cli hmp help</code> command.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">qmp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">qmp &lt;qmp command&gt;</span></td>
- <td>Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require <span style="font-family: Courier New,Courier,monospace">{&quot;execute&quot;: &quot;qmp_capabilities&quot;}</span> to be in the control mode.
+ <td><code>qmp</code></td>
+ <td><code>qmp &lt;qmp command&gt;</code></td>
+ <td>Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require <code>{&quot;execute&quot;: &quot;qmp_capabilities&quot;}</code> to be in the control mode.
  <p>In the shell mode, the shell does not support the double quotation mark (&quot;) as an argument. For the JSON arguments, use  \&quot; (back space + double quotation mark) instead.</p></td>
  </tr>
  <tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">hds</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">hds mount &lt;host path&gt; &lt;guest path&gt;</span></td>
- <td>Enable the host directory sharing feature between the specified <span style="font-family: Courier New,Courier,monospace">&lt;host path&gt;</span> and the emulator&#39;s <span style="font-family: Courier New,Courier,monospace">&lt;guest path&gt;</span>. The specified path must be a folder, not a file.</td>
+ <td rowspan="3"><code>hds</code></td>
+ <td><code>hds mount &lt;host path&gt; &lt;guest path&gt;</code></td>
+ <td>Enable the host directory sharing feature between the specified <code>&lt;host path&gt;</code> and the emulator&#39;s <code>&lt;guest path&gt;</code>. The specified path must be a folder, not a file.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hds unmount &lt;id&gt;</span></td>
- <td>Unmount the mounted host directory sharing path. The <span style="font-family: Courier New,Courier,monospace">id</span> is the HDS ID and you can get it from the <span style="font-family: Courier New,Courier,monospace">hds status</span> command.</td>
+ <td><code>hds unmount &lt;id&gt;</code></td>
+ <td>Unmount the mounted host directory sharing path. The <code>id</code> is the HDS ID and you can get it from the <code>hds status</code> command.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hds status</span></td>
+ <td><code>hds status</code></td>
  <td>Show the current host directory sharing status.</td>
  </tr>
  </tbody></table> 
 
+<p align="center" class="Table"><strong>Table: CLI profile commands</strong></p>
 <table>
-<caption>Table: CLI profile commands</caption>
 <tbody>
 <tr>
  <th>Feature command</th>
@@ -686,202 +644,202 @@ timestamp, x, y, z
 </tr>
 
  <tr>
- <td rowspan="8"><span style="font-family: Courier New,Courier,monospace">telephony</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">call dial</span></td>
+ <td rowspan="8"><code>telephony</code></td> 
+ <td><code>call dial</code></td>
  <td rowspan="8">Yes</td>
  <td rowspan="8">No</td> 
- <td><span style="font-family: Courier New,Courier,monospace">telephony call dial &lt;number&gt;</span></td>
+ <td><code>telephony call dial &lt;number&gt;</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">call hidden-dial</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">telephony call hidden-dial &lt;number&gt;</span></td>
+ <td><code>call hidden-dial</code></td>
+ <td><code>telephony call hidden-dial &lt;number&gt;</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">call connect</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">telephony call connect</span></td>
+ <td><code>call connect</code></td>
+ <td><code>telephony call connect</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">call disconnect</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">telephony call disconnect &lt;call id&gt;</span></td>
+ <td><code>call disconnect</code></td>
+ <td><code>telephony call disconnect &lt;call id&gt;</code></td>
  </tr>                        
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">sms send</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">telephony sms send &lt;number&gt; &lt;text&gt;</span></td>
+ <td><code>sms send</code></td>
+ <td><code>telephony sms send &lt;number&gt; &lt;text&gt;</code></td>
  </tr>
  <tr>
-<td><span style="font-family: Courier New,Courier,monospace">sms set</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">telephony sms set &lt;available | unavailable&gt;</span></td>
+<td><code>sms set</code></td>
+ <td><code>telephony sms set &lt;available | unavailable&gt;</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">sms status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">telephony sms status</span></td>
+ <td><code>sms status</code></td>
+ <td><code>telephony sms status</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">sms mms_status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">telephony sms mms_status</span></td>
+ <td><code>sms mms_status</code></td>
+ <td><code>telephony sms mms_status</code></td>
  </tr> 
  <tr>
- <td rowspan="4"><span style="font-family: Courier New,Courier,monospace">location</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="4"><code>location</code></td> 
+ <td><code>set</code></td>
  <td rowspan="4">Yes</td>
  <td rowspan="4">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">location set &lt;longitude> &lt;latitude&gt;</span></td>
+ <td><code>location set &lt;longitude> &lt;latitude&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">location status</span></td>
+ <td><code>status</code></td>
+ <td><code>location status</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">stop</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">location stop</span></td>
+ <td><code>stop</code></td>
+ <td><code>location stop</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">location file &lt;file-path&gt;</span></td>
+ <td><code>file</code></td>
+ <td><code>location file &lt;file-path&gt;</code></td>
  </tr>
  <tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">battery</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">level</span></td>
+ <td rowspan="3"><code>battery</code></td> 
+ <td><code>level</code></td>
  <td rowspan="3">Yes</td>
  <td rowspan="3">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">battery level &lt;percent&gt;</span></td>
+ <td><code>battery level &lt;percent&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">charger</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">battery charger &lt;on | off&gt;</span></td>
+ <td><code>charger</code></td>
+ <td><code>battery charger &lt;on | off&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">battery status</span></td>
+ <td><code>status</code></td>
+ <td><code>battery status</code></td>
  </tr>
  <tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">earjack</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="2"><code>earjack</code></td> 
+ <td><code>set</code></td>
  <td rowspan="2">Yes</td>
  <td rowspan="2">No</td> 
- <td><span style="font-family: Courier New,Courier,monospace">earjack set &lt;3wire | 4wire | off&gt;</span></td>
+ <td><code>earjack set &lt;3wire | 4wire | off&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">earjack status</span></td>
+ <td><code>status</code></td>
+ <td><code>earjack status</code></td>
  </tr>
  <tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">usb</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="2"><code>usb</code></td> 
+ <td><code>set</code></td>
  <td rowspan="2">Yes</td>
  <td rowspan="2">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">usb set &lt;on | off&gt;</span></td>
+ <td><code>usb set &lt;on | off&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">usb status</span></td>
+ <td><code>status</code></td>
+ <td><code>usb status</code></td>
  </tr>
  <tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">rssi</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="2"><code>rssi</code></td> 
+ <td><code>set</code></td>
  <td rowspan="2">Yes</td>
  <td rowspan="2">No</td> 
- <td><span style="font-family: Courier New,Courier,monospace">rssi set &lt;0~4&gt;</span></td>
+ <td><code>rssi set &lt;0~4&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">rssi status</span></td>
+ <td><code>status</code></td>
+ <td><code>rssi status</code></td>
  </tr>
  <tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">sdcard</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">attach</span></td>
+ <td rowspan="3"><code>sdcard</code></td> 
+ <td><code>attach</code></td>
  <td rowspan="3">Yes</td>
  <td rowspan="3">No</td>
- <td><span style="font-family: Courier New,Courier,monospace">sdcard attach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</span></td>
+ <td><code>sdcard attach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">detach</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sdcard detach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</span></td>
+ <td><code>detach</code></td>
+ <td><code>sdcard detach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sdcard status</span></td>
+ <td><code>status</code></td>
+ <td><code>sdcard status</code></td>
  </tr>
  <tr>
-  <td rowspan="6"><span style="font-family: Courier New,Courier,monospace">nfc</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">tag attach</span></td>
+  <td rowspan="6"><code>nfc</code></td> 
+ <td><code>tag attach</code></td>
  <td rowspan="6">Yes</td>
  <td rowspan="6">No</td>
- <td><span style="font-family: Courier New,Courier,monospace">nfc tag attach &lt;tag type&gt; &lt;NDEF message&gt;</span></td>
+ <td><code>nfc tag attach &lt;tag type&gt; &lt;NDEF message&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">tag detach</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">nfc tag detach</span></td>
+ <td><code>tag detach</code></td>
+ <td><code>nfc tag detach</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">p2p attach</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">nfc p2p attach</span></td>
+ <td><code>p2p attach</code></td>
+ <td><code>nfc p2p attach</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">p2p send</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">nfc p2p send &lt;NDEF message&gt;</span></td>
+ <td><code>p2p send</code></td>
+ <td><code>nfc p2p send &lt;NDEF message&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">p2p detach</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">nfc p2p detach</span></td>
+ <td><code>p2p detach</code></td>
+ <td><code>nfc p2p detach</code></td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">nfc status</span></td>
+ <td><code>status</code></td>
+ <td><code>nfc status</code></td>
  </tr>
  <tr>
- <td rowspan="10"><span style="font-family: Courier New,Courier,monospace">sensor</span></td> 
- <td><span style="font-family: Courier New,Courier,monospace">accelerometer</span></td>
+ <td rowspan="10"><code>sensor</code></td> 
+ <td><code>accelerometer</code></td>
  <td rowspan="10">Yes</td>
  <td rowspan="10">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">sensor accelerometer &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
+ <td><code>sensor accelerometer &lt;x&gt; &lt;y&gt; &lt;z&gt;</code></td>
  </tr> 
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">gyroscope</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor gyroscope &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
+ <td><code>gyroscope</code></td>
+ <td><code>sensor gyroscope &lt;x&gt; &lt;y&gt; &lt;z&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">magnetic</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor magnetic &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
+ <td><code>magnetic</code></td>
+ <td><code>sensor magnetic &lt;x&gt; &lt;y&gt; &lt;z&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">proximity</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor proximity &lt;value&gt;</span></td>
+ <td><code>proximity</code></td>
+ <td><code>sensor proximity &lt;value&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">light</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor light &lt;value&gt;</span></td>
+ <td><code>light</code></td>
+ <td><code>sensor light &lt;value&gt;</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pressure</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor pressure &lt;level&gt;</span></td>
+ <td><code>pressure</code></td>
+ <td><code>sensor pressure &lt;level&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">uv</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor uv &lt;level&gt;</span></td>
+ <td><code>uv</code></td>
+ <td><code>sensor uv &lt;level&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hrm</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor hrm &lt;level&gt;</span></td>
+ <td><code>hrm</code></td>
+ <td><code>sensor hrm &lt;level&gt;</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
-<td><span style="font-family: Courier New,Courier,monospace">sensor status [sensor]</span></td>
+ <td><code>status</code></td>
+<td><code>sensor status [sensor]</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor file &lt;sensor&gt; &lt;path&gt;</span></td>
+ <td><code>file</code></td>
+ <td><code>sensor file &lt;sensor&gt; &lt;path&gt;</code></td>
  </tr>
  <tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">low_memory</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="2"><code>low_memory</code></td>
+ <td><code>set</code></td>
  <td rowspan="2">Yes</td>
  <td rowspan="2">Yes</td>
- <td><span style="font-family: Courier New,Courier,monospace">low_memory set &lt;hard-warning | soft-warning | normal&gt;</span></td>
+ <td><code>low_memory set &lt;hard-warning | soft-warning | normal&gt;</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">low_memory status</span></td>
+ <td><code>status</code></td>
+ <td><code>low_memory status</code></td>
 
  </tr>
 
index df865e6..db54c74 100644 (file)
 <h3 id="add" name="add">Adding a Touch Point</h3>
 
 <p>To add a touch point on the emulator screen, press and hold the <strong>Ctrl</strong> key (<strong>Command</strong> key in Mac OS&reg; X) and mouse-click a point on the screen.</p>
-<p>You can add touch points up to the maximum amount of multi-point touches. To get the maximum amount, use the <span
-      style="font-family: Courier New,Courier,monospace">System::SystemInfo::GetValue()</span> method with the <span
-      style="font-family: Courier New,Courier,monospace">MultiPointTouchCount</span> key.</p>
+<p>You can add touch points up to the maximum amount of multi-point touches. To get the maximum amount, use the <code>System::SystemInfo::GetValue()</code> method with the <code>MultiPointTouchCount</code> key.</p>
 
-<p class="figure">Figure: Adding a touch point</p>
+<p align="center"><strong>Figure: Adding a touch point</strong></p>
 
 <p align="center"><img alt="Adding a touch point" src="../images/emulator_feature_multitouch_add.png"/></p>
 
 
 <p>To move an existing point one by one, press and hold the <strong>Ctrl</strong> key (<strong>Command</strong> key in Mac OS&reg; X), mouse-click an existing point, and move it to another location on the screen.</p>
 
-<p class="figure">Figure: Moving an existing point</p>
+<p align="center"><strong>Figure: Moving an existing point</strong></p>
 
 <p align="center"><img alt="Moving an existing point" src="../images/emulator_feature_multitouch_move1.png"/></p>
 
 <p>To move all existing points together, press and hold the <strong>Ctrl</strong> (<strong>Command</strong> in Mac OS&reg; X) and <strong>Shift</strong> keys, mouse-click an existing point, and move it to another location on the screen.</p>
 
-<p class="figure">Figure: Moving all existing points</p>
+<p align="center"><strong>Figure: Moving all existing points</strong></p>
 <p align="center"><img alt="Moving all existing points" src="../images/emulator_feature_multitouch_move2.png"/></p>
 
 <p>To move 2 existing points symmetrically together, press and hold the <strong>Ctrl</strong> (<strong>Command</strong> in Mac OS&reg; X) and <strong>Alt</strong> keys, mouse-click an existing point, and move it to another location on the screen.</p>
 
-<p class="figure">Figure: Symmetrically moving 2 existing points</p>
+<p align="center"><strong>Figure: Symmetrically moving 2 existing points</strong></p>
 <p align="center"><img alt="Symmetrical moving the 2 existing points" src="../images/emulator_feature_multitouch_move3.png" /></p>
 
 
@@ -92,7 +90,7 @@
 
 <p>To end the multi-point touch, release the <strong>Ctrl</strong> key (<strong>Command</strong> key in Mac OS&reg; X). The touched points on the emulator screen are invalidated, and the next screen touch event is read as a new event, not part of the previous multi-point touch event.</p>
 
-<p class="figure">Figure: Invalidating touched points</p>
+<p align="center"><strong>Figure: Invalidating touched points</strong></p>
 
 <p align="center"><img alt="Invalidating touched points" src="../images/emulator_feature_multitouch_invalidate.png"/></p>
 
 <li>Run the Emulator Manager and click <strong>Create</strong> or <strong>Edit</strong>.</li>
 <li>In the <strong>File Sharing</strong> section of the VM property, enable the <strong>Sharing</strong> button and select a directory to share.</li>
 <li>Start the emulator.
-<p>The host computer&#39;s directory is shown as <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> in the emulator.</p></li>
+<p>The host computer&#39;s directory is shown as <code>/mnt/host</code> in the emulator.</p></li>
 </ol>
 
 <p>You can also add a shared directory in the Emulator Control Panel (ECP):</p>
 <li>Add or remove the host computer directory.</li>
 </ol>
 
-  <table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-    <tr>
-      <td class="note">You must have read/write permissions for the directory you want to share.</td>
-    </tr>
-  </tbody>
-</table>
-
+<div class="note">
+    <strong>Note</strong>
+    You must have read/write permissions for the directory you want to share.
+</div>
 
 <h2 id="camera" name="camera">Using a Camera</h2>
 <p>With the emulator, you can develop an application using the Camera API. The emulator provides a virtual camera. The virtual camera injects frames by using the image files in a host computer or using the computer Webcam.</p>
 
 <p>Before running the application, install a USB-connected Webcam or embedded Webcam on your computer. On Linux, the Webcam feature uses libv4l-0. If you do not have it on your computer, this feature does not work properly. You can check the feature status with the following command:</p>
 <pre class="prettyprint">$ dpkg -l | grep libv4l-0</pre>
-<table class="note">
-
-      <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">
-                 <ul>
-                 <li>The Webcam must support video4linux2. (Currently, only <span style="font-family: Courier New,Courier,monospace">/dev/video0</span> is supported.)</li>
+
+<div class="note">
+    <strong>Note</strong>
+<ul>
+<li>The Webcam must support video4linux2. (Currently, only <code>/dev/video0</code> is supported.)</li>
 <li>Multiple instances of the emulator can be launched, but only a single emulator instance can use the camera feature.</li>
 <li>Depending on the Webcam in use, the emulator camera feature may not work properly.</li>
 </ul>
-</td>
-        </tr>
-      </tbody>
-    </table>
+</div>
 <p>The following table lists the host Webcam features.</p>
-<table style="width: 100%" border="1">
-  <caption>Table: Webcam features</caption>
-  
+
+<p align="center" class="Table"><strong>Table: Webcam features</strong></p>
+<table style="width: 100%" border="1">  
   <col width="25%"/>
   <col width="25%"/>
   <col width="50%"/>
@@ -220,7 +203,7 @@ VGA: 640 x 480<br/>
 <td>Brightness<br/>
 Contrast<br/>
 </td>
-<td>Unsupported attributes can return an error. For example, the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> method returns an error.</td>
+<td>Unsupported attributes can return an error. For example, the <code>camera_start_focusing()</code> method returns an error.</td>
 </tr>
 </tbody>
 </table>
@@ -242,22 +225,16 @@ Contrast<br/>
        <li><strong>Use manual proxy</strong>: sets manually a proxy value different from the host.</li>
 </ul>
 
-<table>
-<tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">The following preallocated addresses are not supported as a manual proxy:
-                       <ul>
-                                               <li>Localhost</li>
-                                               <li>127.0.0.1/8</li>
-                                               <li>10.0.2.0/24</li>
-                       </ul>
-                       <p>The automatic proxy configuration is not supported due to license issues.</p> </td>
-        </tr>
-      </tbody>
-    </table>
+<div class="note">
+    <strong>Note</strong>
+The following preallocated addresses are not supported as a manual proxy:
+<ul>
+<li>Localhost</li>
+<li>127.0.0.1/8</li>
+<li>10.0.2.0/24</li>
+</ul>
+<p>The automatic proxy configuration is not supported due to license issues.</p>
+</div>
 
 <h3 id="NAT" name="NAT">NAT (Network Address Translation)</h3>
 <p>NAT is the default networking backend and has better usability than the other backends. The emulator supports TCP, UDP, and ping within a guest. However, a raw socket is not supported.</p>
@@ -271,7 +248,7 @@ Contrast<br/>
 <li>10.0.2.15: Emulator IP</li>
 </ul>
 
-<p class="figure">Figure: Emulator NAT network architecture</p>
+<p align="center"><strong>Figure: Emulator NAT network architecture</strong></p>
 
 <p align="center"><img alt="Emulator NAT network architecture" src="../images/emulator_feature_nat_architecture.png"/></p>
 
@@ -283,33 +260,27 @@ Contrast<br/>
 <li>ECP (Emulator Control Panel)
 <p>You can add port forwarding by using the ECP. In the <strong>ECP &gt; Network</strong> card, under <strong>Add port-forwarding</strong>, enter the ports to forward.</p></li>
 <li>SDB (Smart Development Bridge)
-<p>The SDB provides port forwarding as a command. For more <span style="font-family: Courier New,Courier,monospace">user,id=net0</span> information in the SDB commands, see <a href="smart_development_bridge.htm#command">sdb forward</a>.</p></li>
+<p>The SDB provides port forwarding as a command. For more <code>user,id=net0</code> information in the SDB commands, see <a href="smart_development_bridge.htm#command">sdb forward</a>.</p></li>
 <li>Launch configuration on boot 
-<p>You can forward the port on booting the emulator by modifying the QEMU redirection option. The QEMU redirection option can be appended in the existing <span style="font-family: Courier New,Courier,monospace">-netdev user,id=net0</span> option in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms/&lt;image name&gt;/vm_launch.conf</span> file with the following appending command:</p>
+<p>You can forward the port on booting the emulator by modifying the QEMU redirection option. The QEMU redirection option can be appended in the existing <code>-netdev user,id=net0</code> option in the <code>&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms/&lt;image name&gt;/vm_launch.conf</code> file with the following appending command:</p>
 <pre class="prettyprint">-netdev user,id=net0,hostfwd=[tcp|udp]:[&lt;hostaddr&gt;]:&lt;hostport&gt;-[&lt;guestaddr&gt;]:&lt;guestport&gt;</pre>
 
 <p>Redirect incoming TCP or UDP connections to the &lt;hostport&gt; host port to the &lt;guestaddr&gt; guest IP address on the &lt;guestport&gt; guest port. If the &lt;guestaddr&gt; is not specified, its value is 10.0.2.15 (default first address given by the built-in DHCP server).</p>
 
 <p>You can also connect one emulator instance with another by using redirection. To set up redirection (where A and B are emulator instances):</p> 
 
-<ol><li>Set up the server on A, listening to <span style="font-family: Courier New,Courier,monospace">10.0.2.15:&lt;ServerPort&gt;</span>.</li>
+<ol><li>Set up the server on A, listening to <code>10.0.2.15:&lt;ServerPort&gt;</code>.</li>
 
-<li>On A, append the <span style="font-family: Courier New,Courier,monospace">,hostfwd tcp:127.0.0.1:&lt;B&#39;s localPort&gt;-:&lt;A&#39;s serverPort&gt;</span> redirection option in the <span style="font-family: Courier New,Courier,monospace">vm_launch.conf</span> file.</li> 
+<li>On A, append the <code>,hostfwd tcp:127.0.0.1:&lt;B&#39;s localPort&gt;-:&lt;A&#39;s serverPort&gt;</code> redirection option in the <code>vm_launch.conf</code> file.</li> 
 
-<li>On B, let the client connect to <span style="font-family: Courier New,Courier,monospace">10.0.2.2:&lt;B&#39;s localPort&gt;</span>.
+<li>On B, let the client connect to <code>10.0.2.2:&lt;B&#39;s localPort&gt;</code>.
 </li>
 </ol>
-<table>
-       <tbody>
-               <tr>
-                       <th class="note">Note</th>
-               </tr>
-               <tr>
-                       <td class="note">The appending value of the configuration file is removed when the user changes the VM setting on the Emulator Manager.</td>
-               </tr>
-       </tbody>
-</table>
 
+<div class="note">
+    <strong>Note</strong>
+The appending value of the configuration file is removed when the user changes the VM setting on the Emulator Manager.
+</div>
 
 </li> </ul>
 
@@ -323,25 +294,17 @@ Contrast<br/>
        <li>You want high performance from the network.</li>
 </ul>
 
-<p class="figure">Figure: Emulator bridged network architecture</p>
+<p align="center"><strong>Figure: Emulator bridged network architecture</strong></p>
  
 <p align="center"><img alt="Emulator bridged network architecture" src="../images/emulator_feature_bridge_architecture.png"/></p>
 
-<table>
-       <tbody>
-               <tr>
-                       <th class="note">Note</th>
-               </tr>
-               <tr>
-                       <td class="note">
-                       <ul>
-                               <li>Network bridging does not work when the underlying physical network device is a wireless device.</li>
-                               <li>On Mac OS&reg; X, only physical network device named <span style="font-family: Courier New,Courier,monospace">en0</span> can be used for bridging.</li>
-                       </ul>
-                       </td>
-               </tr>
-       </tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+<ul>
+<li>Network bridging does not work when the underlying physical network device is a wireless device.</li>
+<li>On Mac OS&reg; X, only physical network device named <code>en0</code> can be used for bridging.</li>
+</ul>
+</div>
 
 <p>When the Emulator Manager creates an emulator instance, it also checks the emulator IP and sets the properties of the bridged network in <strong>Emulator Manager &gt; Network Configuration</strong> automatically.</p>
 
@@ -372,9 +335,9 @@ Contrast<br/>
 
 <h2 id="skin" name="skin">Using Custom Skin Layout</h2>
 
-<p>The emulator skin consists of an <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt;/layout.xml</span> XML meta file. The file defines layout-related information, such as skin image file name, display location, and the location of hardware keys.</p>
+<p>The emulator skin consists of an <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt;/layout.xml</code> XML meta file. The file defines layout-related information, such as skin image file name, display location, and the location of hardware keys.</p>
 
-<p>The following example shows the content of the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> layout file:</p>
+<p>The following example shows the content of the <code>layout.xml</code> layout file:</p>
 <pre class="prettyprint">
 &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
 &lt;EmulatorUI xmlns=&quot;http://www.tizen.org/emulator/ui/layout&quot;&gt;
@@ -411,9 +374,9 @@ Contrast<br/>
 &nbsp;&nbsp;&nbsp;&lt;/formList&gt;
 &lt;/EmulatorUI&gt;</pre>
 
-<p>The emulator skin also contains a <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt;/info.ini</span> property file. The file defines skin-related information, such as skin name and supported resolutions.</p>
+<p>The emulator skin also contains a <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt;/info.ini</code> property file. The file defines skin-related information, such as skin name and supported resolutions.</p>
 
-<p>The following example shows the contents of the <span style="font-family: Courier New,Courier,monospace">info.ini</span> property file:</p>
+<p>The following example shows the contents of the <code>info.ini</code> property file:</p>
 <pre class="prettyprint">skin.name=Phone 480x800
 resolution.width=480
 resolution.height=800
@@ -422,31 +385,24 @@ resolution.height=800
 
 <p>To create your own skin layout:</p>
 <ol>
-       <li>Create a new skin folder in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources/skins</span> folder.</li>
-       <li>In the skin folder, define the content of the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> and <span style="font-family: Courier New,Courier,monospace">info.ini</span> files and include the required skin image files.</li>
+       <li>Create a new skin folder in the <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources/skins</code> folder.</li>
+       <li>In the skin folder, define the content of the <code>layout.xml</code> and <code>info.ini</code> files and include the required skin image files.</li>
        <li><p>Select the skin name in the <a href="emulator_manager.htm">Emulator Manager</a>. You can also use the <a href="#startup">emulator start-up options</a> in the command line.</p>
        <p>The image defined in your modified XML meta file is displayed when the emulator is launched.</p></li>
 </ol>
 
-<table>
- <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">If you reinstall the Tizen Studio, the custom skin folders are reset.</td>
-
-        </tr>
-      </tbody>
-    </table>
 
+<div class="note">
+    <strong>Note</strong>
+       If you reinstall the Tizen Studio, the custom skin folders are reset.
+</div>
 
 <h2 id="eventcast" name="eventcast">Using EventCast</h2>
 
 <p>The emulator supports event injection using ECP (Emulator Control Panel). However, injecting sensor events using ECP is less intuitive and convenient. When you are injecting events, touching the emulator screen simultaneously is impossible. EventCast enables you to inject sensor and touch events more intuitively using a real target device.</p>
 <p>The following figure illustrates how the EventCast application in the target device gathers events and passes them to the emulator controller, which converts and hands them over to the Tizen platform. This is convenient in case you do not have a Tizen mobile device.</p>
 
-<p class="figure">Figure: EventCast architecture</p> 
+<p align="center"><strong>Figure: EventCast architecture</strong></p> 
 <p align="center"><img alt="eventcast_architecture" src="../images/emulator_feature_eventcast_architecture.png" /></p>
 
 <p>EventCast provides the following features:</p>
@@ -458,11 +414,11 @@ resolution.height=800
 
 <h3 id="eventpre" name="eventpre">Prerequisites</h3>
 
-<p>When connecting through USB, ADB is required to make a connection. If you have already installed the Android SDK on the computer, ADB is located in the <span style="font-family: Courier New,Courier,monospace;">&lt;installed Android SDK&gt;/sdk/platform-tools</span> folder. Otherwise, you can download only ADB or install the Android SDK.</p>
+<p>When connecting through USB, ADB is required to make a connection. If you have already installed the Android SDK on the computer, ADB is located in the <code>&lt;installed Android SDK&gt;/sdk/platform-tools</code> folder. Otherwise, you can download only ADB or install the Android SDK.</p>
 <p>To install ADB:</p>
-       <ol><li><p>Ubuntu/Mac OS&reg; X: Download ADB and then install it in the <span style="font-family: Courier New,Courier,monospace;">/usr/bin</span> folder.</p>
+       <ol><li><p>Ubuntu/Mac OS&reg; X: Download ADB and then install it in the <code>/usr/bin</code> folder.</p>
        <p>For more information, see <a href="http://code.google.com/p/adb-fastboot-install/" target="_blank">ADB Fastboot Install</a>.</p></li>
-       <li><p>Windows&reg;: Download ADB and install it in the <span style="font-family: Courier New,Courier,monospace;">C:\ADB</span> folder.</p>
+       <li><p>Windows&reg;: Download ADB and install it in the <code>C:\ADB</code> folder.</p>
        <p>For more information, see <a href="http://rubenalamina.mx/custom-installers/android-adb-fastboot/" target="_blank">ADB Fastboot for Windows</a>.</p></li></ol>
        
 <p>When connecting through Wi-Fi, make sure that your Android device and computer are within the same AP.</p>
@@ -486,21 +442,17 @@ resolution.height=800
                        <p>On most devices running Android 3.2 or older, you can find the option under <strong>Settings &gt; Applications &gt; Development</strong>.</p>
                        <p>On Android 4.0 and newer, it is in <strong>Settings &gt; Developer options</strong>.</p>
 
-                       <table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-      </tr>
-<tr>
-<td class="note">On Android 4.2 and newer, the developer options are hidden by default. To make them available, go to <strong>Settings &gt; About phone</strong> and tap <strong>Build number</strong> 7 times. Return to the previous screen to find the developer options.</td> 
-      </tr>
-</tbody></table>
+<div class="note">
+    <strong>Note</strong>
+       On Android 4.2 and newer, the developer options are hidden by default. To make them available, go to <strong>Settings &gt; About phone</strong> and tap <strong>Build number</strong> 7 times. Return to the previous screen to find the developer options.
+</div>
 </li>
 <li>Enable USB debugging.</li>
 <li>Connect the device to a computer through USB.</li>
 <li>Launch the EventCaster.</li>
 <li>Start the server using a default port (7000) or enter the port number.</li>
-<li>Forward a TCP port using the <span style="font-family: Courier New,Courier,monospace;">adb forward</span> command.
-<p>For example, to forward the 7000 port in the application to the 1234 port in your computer: <span style="font-family: Courier New,Courier,monospace;">adb forward tcp:1234 tcp:7000</span></p></li>
+<li>Forward a TCP port using the <code>adb forward</code> command.
+<p>For example, to forward the 7000 port in the application to the 1234 port in your computer: <code>adb forward tcp:1234 tcp:7000</code></p></li>
 <li>Launch the Tizen emulator, and open the Emulator Control Panel (ECP) from the emulator context menu.</li>
 <li>Select the <strong>USB</strong> checkbox on the <strong>EventCast</strong> tab of the ECP.</li>
 <li>Enter the forwarded port number and click <strong>Connection</strong> on the ECP.
@@ -524,14 +476,14 @@ resolution.height=800
 
 <h2 id="startup" name="startup">Starting an Emulator with a Configuration File</h2>
 
-<p>If you create an emulator instance using the Emulator Manager, a configuration file defining the emulator start-up options is generated (<span style="font-family: Courier New,Courier,monospace;">&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms/&lt;VM_NAME&gt;/vm_launch.conf</span>).</p>
+<p>If you create an emulator instance using the Emulator Manager, a configuration file defining the emulator start-up options is generated (<code>&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms/&lt;VM_NAME&gt;/vm_launch.conf</code>).</p>
 
 <p>With the configuration file, you can launch the emulator in the command line:</p>
 <pre class="prettyprint">
 ./emulator --conf &lt;configuration file&gt;
 </pre>
 
-<p>The emulator binaries are located in the <span style="font-family: Courier New,Courier,monospace;">&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/common/emulator/bin</span> folder.</p>
+<p>The emulator binaries are located in the <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/common/emulator/bin</code> folder.</p>
 
 <p>The configuration file is comprised of 2 sections:</p>
 <ul>
@@ -542,7 +494,7 @@ resolution.height=800
 <p>You can override the defined qemu values on the emulator starting time. For example, to override the guest RAM size:</p>
 
 <ol>
-<li>The <span style="font-family: Courier New,Courier,monospace;">-m</span> qemu option (which sets the guest RAM size) and its value are written in the configuration file:
+<li>The <code>-m</code> qemu option (which sets the guest RAM size) and its value are written in the configuration file:
 <pre class="prettyprint">
 [[VARIABLE]]
 ram=512     # define variable ram
@@ -558,7 +510,7 @@ ram=512     # define variable ram
 </li>
 </ol>
  
-<p>For more information about the start-up options, see <a href="http://wiki.qemu.org/download/qemu-doc.html#sec_005finvocation" target="_blank">QEMU Emulator User Documentation</a> and the <span style="font-family: Courier New,Courier,monospace;">vm_launch.conf</span> file.</p>
+<p>For more information about the start-up options, see <a href="http://wiki.qemu.org/download/qemu-doc.html#sec_005finvocation" target="_blank">QEMU Emulator User Documentation</a> and the <code>vm_launch.conf</code> file.</p>
 
 <p>The following example shows the configuration file:</p>
                 
@@ -637,68 +589,69 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
 
 <h2 id="dir" name="dir">Emulator Directory Structure</h2>
     
-<p>The following table describes the content of the emulator directory, located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/tools/emulator</span> folder.</p>
+<p>The following table describes the content of the emulator directory, located in the <code>&lt;TIZEN_STUDIO&gt;/tools/emulator</code> folder.</p>
+
 
-       <table border="1">
-               <caption>Table: Emulator directory content</caption>
+<p align="center" class="Table"><strong>Table: Emulator directory content</strong></p>
+<table border="1">
                <tbody>
                        <tr>
                                <th>Folder or file</th>
                                <th>Description</th>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-manager</span></td>
+                               <td><code>bin/emulator-manager</code></td>
                                <td>Emulator Manager GUI
                                </td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/em-cli</span></td>
+                               <td><code>bin/em-cli</code></td>
                                <td>Emulator Manager CLI (Command Line Interface)</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/em-cli.jar</span></td>
+                               <td><code>bin/em-cli.jar</code></td>
                                <td>Emulator Manager CLI executable</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/em-lib.jar</span></td>
+                               <td><code>bin/em-lib.jar</code></td>
                                <td>Emulator Manager library</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/em-ui-3.0.jar</span></td>
+                               <td><code>bin/em-ui-3.0.jar</code></td>
                                <td>Emulator Manager GUI executable</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-control-panel.jar</span></td>
+                               <td><code>bin/emulator-control-panel.jar</code></td>
                                <td>Emulator Control Panel (ECP)</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-control-panel-cli.jar</span></td>
+                               <td><code>bin/emulator-control-panel-cli.jar</code></td>
                                <td>ECP CLI (Command Line Interface)</td>
                        </tr>                   
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/libecp.jar</span></td>
+                               <td><code>bin/libecp.jar</code></td>
                                <td>Profile-independent library for ECP</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">bin/&lt;LIBRARIES&gt;</span></td>
+                               <td><code>bin/&lt;LIBRARIES&gt;</code></td>
                                <td>Third party libraries, such as JNA, Protobuf, ARGS4J, JSON-simple, and JLINE</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">storages/sdcard/sdcard_xxx.img</span></td>
-                               <td><span style="font-family: Courier New, Courier, monospace">.img</span> files (base sdcard images) specific to the data size used by the Emulator Manager</td>
+                               <td><code>storages/sdcard/sdcard_xxx.img</code></td>
+                               <td><code>.img</code> files (base sdcard images) specific to the data size used by the Emulator Manager</td>
                        </tr>
                        <tr>
-                               <td><span style="font-family: Courier New, Courier, monospace">storages/swap/swap.img</span></td>
+                               <td><code>storages/swap/swap.img</code></td>
                                <td>Disk image for swap</td>
                        </tr>
                </tbody>
        </table>
 
-       <p>The following table describes the platform image directories that are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-images</span> folder.</p>
+       <p>The following table describes the platform image directories that are located in the <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-images</code> folder.</p>
    
   
-  <table border="1">
-  <caption>Table: Platform image directory content</caption>
+<p align="center" class="Table"><strong>Table: Platform image directory content</strong></p>
+<table border="1">
   <tbody>
     <tr>
            <th>Name</th>
@@ -706,157 +659,158 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
        </tr>
         
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;IMAGE_DIR&gt;</span></td>      
+       <td><code>&lt;IMAGE_DIR&gt;</code></td> 
        <td>Platform image directory</td>
        </tr>  
          <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;IMAGE_DIR&gt;/emulimg-&lt;VERSION&gt;.&lt;ARCHITECTURE&gt;</span></td> 
+       <td><code>&lt;IMAGE_DIR&gt;/emulimg-&lt;VERSION&gt;.&lt;ARCHITECTURE&gt;</code></td>    
        <td>Platform image, which represents an emulator root file system for x86 in the guest OS view</td>
        </tr>  
   <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;IMAGE_DIR&gt;/info.ini</span></td>     
+       <td><code>&lt;IMAGE_DIR&gt;/info.ini</code></td>        
        <td>File for specifying information of the platform image</td>
        </tr> 
  </tbody>
 </table>       
 
-<p>The following table describes the platform common directories that are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/common/emulator</span> folder.</p>
+<p>The following table describes the platform common directories that are located in the <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/common/emulator</code> folder.</p>
+
+<p align="center" class="Table"><strong>Table: Platform common directory content</strong></p>
 <table border="1">
-       <caption>Table: Platform common directory content</caption>
        <tbody>
                <tr>
                        <th>Name</th>
                        <th>Description</th>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">bin/</span></td>
+                       <td><code>bin/</code></td>
                        <td>Binary files</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New, Courier, monospace">bin/emulator</span></td>
+                       <td><code>bin/emulator</code></td>
                        <td>Emulator</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-x86_64 </span></td>
+                       <td><code>bin/emulator-x86_64 </code></td>
                        <td>x86 emulator binary, including QEMU</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New, Courier, monospace">data/bios/</span></td>
-                       <td><span style="font-family: Courier New,Courier,monospace">.bin</span> files for initializing the guest OS</td>
+                       <td><code>data/bios/</code></td>
+                       <td><code>.bin</code> files for initializing the guest OS</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New, Courier, monospace">data/kernel/</span></td>
+                       <td><code>data/kernel/</code></td>
                        <td>Kernel image for the guest Linux OS</td>
                </tr>
        </tbody>
 </table>
 
-<p>The following table describes the platform resource directories that are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources</span> folder.</p>
+<p>The following table describes the platform resource directories that are located in the <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources</code> folder.</p>
 
+<p align="center" class="Table"><strong>Table: Platform resource directory content</strong></p>
 <table border="1">
-  <caption>Table: Platform resource directory content</caption>
   <tbody>
     <tr>
            <th>Name</th>
                <th>Description</th>
        </tr>
     <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">plugins/</span></td>       
+       <td><code>plugins/</code></td>  
        <td>Plugins for profile</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.jar</span></td> 
+       <td><code>plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.jar</code></td>    
        <td>Plugin for the ECP</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.xml</span></td> 
-       <td>XML file for the <span style="font-family: Courier New,Courier,monospace">ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.jar</span> file configuration</td>
+       <td><code>plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.xml</code></td>    
+       <td>XML file for the <code>ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.jar</code> file configuration</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">plugins/em-plugin-&lt;PROFILE&gt;.jar</span></td>  
+       <td><code>plugins/em-plugin-&lt;PROFILE&gt;.jar</code></td>     
        <td>Plugin for the Emulator Manager</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">skins/</span></td> 
+       <td><code>skins/</code></td>    
        <td>Emulator skin images specific to the emulator resolution, and icons for the emulator option button and shortcut</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">skins/&lt;SKIN_NAME&gt;/info.ini</span></td>
+       <td><code>skins/&lt;SKIN_NAME&gt;/info.ini</code></td>
        <td>File for specifying emulator skin information</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">skins/&lt;SKIN_NAME&gt;/layout.xml</span></td>
+       <td><code>skins/&lt;SKIN_NAME&gt;/layout.xml</code></td>
        <td>Metafile for the emulator skin layout</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">template/&lt;IMAGE_NAME&gt;.xml</span></td>
+       <td><code>template/&lt;IMAGE_NAME&gt;.xml</code></td>
        <td>XML file for default configuration of the virtual machine created by the Emulator Manager</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">template/&lt;IMAGE_NAME&gt;-template.xml</span></td>
+       <td><code>template/&lt;IMAGE_NAME&gt;-template.xml</code></td>
        <td>XML file for the template of the virtual machine created by the Emulator Manager</td>
        </tr>
 </tbody>
 </table>
 
     
-<p>The following table describes the directory structure of the user-specific files that are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms</span> folder.</p>
+<p>The following table describes the directory structure of the user-specific files that are located in the <code>&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms</code> folder.</p>
    
   
-  <table border="1">
-  <caption>Table: User directory content</caption>
+<p align="center" class="Table"><strong>Table: User directory content</strong></p>
+<table border="1">
   <tbody>
     <tr>
            <th>Name</th>
                <th>Description</th>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">.em.lock</span></td>       
+       <td><code>.em.lock</code></td>  
        <td>Lock file used for synchronization between VM operations, such as modify, delete, and launch</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">.tizen-em-info</span></td> 
+       <td><code>.tizen-em-info</code></td>    
        <td>Configuration file for the Emulator Manager</td>
        </tr>   
     <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">emulator-manager.log</span></td>   
+       <td><code>emulator-manager.log</code></td>      
        <td>Emulator Manager log file</td>
        </tr>   
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">last-created_&lt;PROFILE&gt;.xml</span></td>       
+       <td><code>last-created_&lt;PROFILE&gt;.xml</code></td>  
        <td>File for saving the VM properties that the user created last. When user creates a new VM next time, properties in this file are displayed as default.</td>
        </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/</span></td>       
+       <td><code>&lt;VM_NAME&gt;/</code></td>  
        <td>Target-specific images</td>
        </tr>
   <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/emulimg-&lt;VM_NAME&gt;.&lt;ARCHITECTURE&gt;</span></td>   
-       <td>Writable <span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;</span> image file</td>
+       <td><code>&lt;VM_NAME&gt;/emulimg-&lt;VM_NAME&gt;.&lt;ARCHITECTURE&gt;</code></td>      
+       <td>Writable <code>&lt;VM_NAME&gt;</code> image file</td>
        </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/gui.property</span></td>   
+       <td><code>&lt;VM_NAME&gt;/gui.property</code></td>      
        <td>Hidden data for the emulator GUI</td>
        </tr>
     <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/logs/</span></td>  
+       <td><code>&lt;VM_NAME&gt;/logs/</code></td>     
        <td>Log files (emulator and kernel logs)</td>
        </tr>
          <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/swap-&lt;VM_NAME&gt;.img</span></td>       
+       <td><code>&lt;VM_NAME&gt;/swap-&lt;VM_NAME&gt;.img</code></td>  
        <td>Swap image file</td>
        </tr>
     <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/vm_config.xml</span></td>  
+       <td><code>&lt;VM_NAME&gt;/vm_config.xml</code></td>     
        <td>Hardware configuration file</td>
        </tr>
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/vm_launch.conf</span></td> 
+       <td><code>&lt;VM_NAME&gt;/vm_launch.conf</code></td>    
        <td>Emulator start-up options file (for more information, see <a href="#startup">Starting an Emulator with a Configuration File</a>) 
 </td>
        </tr> 
        <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">&lt;VM_NAME&gt;/${USER}.lock</span></td>   
+       <td><code>&lt;VM_NAME&gt;/${USER}.lock</code></td>      
        <td>Lock file used for synchronization between VM and ECP for set/get operations</td>
        </tr>
  </tbody>
index 81cdf68..7e06faa 100644 (file)
@@ -69,8 +69,8 @@
 
 <ul>
 <li>Click the Emulator Manager icon on the desktop or in the Start menu. 
+<p align="center" class="Table"><strong>Table: Starting the Emulator Manager</strong></p>
 <table>
-       <caption>Table: Starting the Emulator Manager</caption>
                <tbody>
                <tr>
                        <th style="text-align:center;">Ubuntu</th>
@@ -89,7 +89,7 @@
 </table>
 </li>
 <li><p>In the Tizen Studio, select <strong>Tools &gt; Emulator Manager</strong> or click the Emulator Manager icon in the <strong>Connection Explorer</strong> view.</p>
-<p class="figure">Figure: Launch the Emulator Manager in the Tizen Studio</p>
+<p align="center"><strong>Figure: Launch the Emulator Manager in the Tizen Studio</strong></p>
 <p align="center"><img src="../images/emulator_manager_launch.png" alt="Launch the Emulator Manager" /></p>
 </li>
 </ul>
@@ -98,7 +98,7 @@
 
 <p>The Emulator Manager can help you to select the recommended platform and template. When you need another device environment, you can edit the existing emulator instance, or create a new one with a more suitable platform and template. You can also create platforms and templates to suit your needs.</p>
        
-<p class="figure">Figure: Emulator Manager</p>
+<p align="center"><strong>Figure: Emulator Manager</strong></p>
 <p align="center"><img src="../images/emulator_manager_common.png" alt="Emulator Manager" /></p>
 
 <p>To create a new emulator instance:</p>
 <li>Change properties as needed, and click <strong>Finish</strong>.
 <p>The emulator instance appears in the Emulator Manager.</p>
 <p>To view the detailed information, right-click the emulator to see a context menu.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-       <td class="note">To run the application faster, switch on CPU VT and GPU. If CPU VT is disabled, check <a href="emulator.htm#speed">Increasing the Application Execution Speed</a> for more information. If GPU is disabled, <a href="../download/prerequisites.htm#emulator">install the latest vendor-provided graphic driver</a>.</td>
-</tr>
-</tbody>
-</table>
+
+<div class="note">
+    <strong>Note</strong>
+    To run the application faster, switch on CPU VT and GPU. If CPU VT is disabled, check <a href="emulator.htm#speed">Increasing the Application Execution Speed</a> for more information. If GPU is disabled, <a href="../download/prerequisites.htm#emulator">install the latest vendor-provided graphic driver</a>.
+</div>
 </li>
 </ol>
 
-<p class="figure">Figure: Emulator Configuration dialog</p>
+<p align="center"><strong>Figure: Emulator Configuration dialog</strong></p>
 <p align="center"><img src="../images/emulator_manager_config_dialog.png" alt="Emulator Configuration dialog" /></p>
 
 <h3>Creating Platforms</h3>
 
 <p>To create an emulator, you have to first select the platform. You can create, modify, and delete a custom platform, and view the generated platforms. Most application developers do not need a custom platform, but it can be useful for a platform developer.</p>
 
-<p class="figure">Figure: Platforms list</p>
+<p align="center"><strong>Figure: Platforms list</strong></p>
 <p align="center"><img src="../images/emulator_manager_platforms.png" alt="Platforms list" /></p>
 
 <p>To create a custom platform:</p>
 </li>
 </ol>
 
-<p class="figure">Figure: Platform configuration</p>
+<p align="center"><strong>Figure: Platform configuration</strong></p>
 <p align="center"><img src="../images/emulator_manager_platform_config.png" alt="Platform configuration" /></p>
 
 
 
 <p>The Emulator Manager provides several device template types. A device template refers to, for example, the screen resolution and size, and the sensors in the device specification. You can make an emulator instanced based on the desired template.</p>
 
-<p class="figure">Figure: Device templates</p>
+<p align="center"><strong>Figure: Device templates</strong></p>
 <p align="center"><img src="../images/emulator_manager_device_template.png" alt="Device templates" /></p>
 
 <p>You can create a new template from the beginning, or clone a template and change some properties.</p>
 </ul>
 <p>After configuring the template, click <strong>Next</strong>. The new device template is added to the list with a settings icon.</p>
 
-<p class="figure">Figure: Template configuration</p>
+<p align="center"><strong>Figure: Template configuration</strong></p>
 <p align="center"><img src="../images/emulator_manager_template_config.png" alt="Template configuration" /></p>        
        
        
 <p>You can create, modify, delete, and list your VMs through the command line interface commands. The CLI binary is located in:</p>
 <ul>
 <li>In Ubuntu:
-<p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/tools/emulator/bin/em-cli</span></p></li>
+<p><code>&lt;TIZEN_STUDIO&gt;/tools/emulator/bin/em-cli</code></p></li>
 <li>In Windows:
-<p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;\tools\emulator\bin\em-cli.bat</span></p></li>
+<p><code>&lt;TIZEN_STUDIO&gt;\tools\emulator\bin\em-cli.bat</code></p></li>
 </ul>
 
 <p>For more information, see the CLI help messages.</p>
 
-<p class="figure">Figure: Emulator Manager command line</p>
-<p align="center"><img src="../images/emulator_manager_cli.png" alt="Emulator manager command line" /></p>
+<p align="center"><strong>Figure: Emulator Manager command line</strong></p>
+<p align="center"><img src="../images/emulator_manager_cli.png" alt="Emulator Manager command line" /></p>
 
-<p>In the following figure, you can see the details of a specific command using the <span style="font-family: Courier New,Courier,monospace">-h</span> command option.</p>
+<p>In the following figure, you can see the details of a specific command using the <code>-h</code> command option.</p>
 
-<p class="figure">Figure: Emulator Manager command details</p>
-<p align="center"><img src="../images/emulator_manager_cli_detail.png" alt="Emulator manager command details" /></p>
+<p align="center"><strong>Figure: Emulator Manager command details</strong></p>
+<p align="center"><img src="../images/emulator_manager_cli_detail.png" alt="Emulator Manager command details" /></p>
 
 <p>The following figure shows an example how to create and launch an emulator using the CLI.</p>
-<p class="figure">Figure: Launching the emulator using the command line</p>
+<p align="center"><strong>Figure: Launching the emulator using the command line</strong></p>
 <p align="center"><img src="../images/emulator_manager_cli_create.png" alt="Launching the emulator using the command line" /></p>
  
-<p>In the <span style="font-family: Courier New,Courier,monospace">create</span> command, the <span style="font-family: Courier New,Courier,monospace">–p</span> option is the platform name. You can see the available platforms using the <span style="font-family: Courier New,Courier,monospace">list -vm</span> command.</p>
+<p>In the <code>create</code> command, the <code>–p</code> option is the platform name. You can see the available platforms using the <code>list -vm</code> command.</p>
  
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
index 2d3531f..9057596 100644 (file)
@@ -51,9 +51,9 @@
 
 
   <h2 id="connection" name="connection">Connection Explorer</h2>
-  <table border="1" style="width: 100%">
-  <caption>Table: Connection Explorer shortcuts</caption>
-<tbody>
+<p align="center" class="Table"><strong>Table: Connection Explorer shortcuts</strong></p>
+<table border="1" style="width: 100%">
+  <tbody>
        <tr>
                <th>Command</th>
                <th>Ubuntu</th>
@@ -88,8 +88,8 @@
 </table>
 
 <h2 id="build" name="build">Build and Run</h2>
-  <table border="1" style="width: 100%">
-  <caption>Table: Build and run shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Build and run shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th>Command</th>
 </table>
 
 <h2 id="debug" name="debug">Debug</h2>
-  <table border="1" style="width: 100%">
-  <caption>Table: Debug shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Debug shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th>Command</th>
 </table>
 
 <h2 id="content_assist" name="content_assist">Content Assist</h2>
-  <table border="1" style="width: 100%">
-  <caption>Table: Content assist shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Content assist shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th>Command</th>
 </table>
 
 <h2 id="project" name="project">Project Management</h2>
-  <table border="1" style="width: 100%">
-  <caption>Table: Project management shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Project management shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th>Command</th>
 </table>
 
 <h2 id="editor" name="editor">Editor</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: Editor shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Editor shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th>Command</th>
 </table>
 
 <h2 id="refactor" name="refactor">Refactor</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: Refactor shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Refactor shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th>Command</th>
 </table>
 
 <h2 id="ide" name="ide">Native IDE</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: Native IDE shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Native IDE shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th>Command</th>
 </table>
 
 <h2 id="web_ide" name="web_ide">Web IDE</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: Web IDE shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Web IDE shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
        <tr>
                <th colspan="2">Command</th>
 </table>
 
 <h2 id="da" name="da">Dynamic Analyzer</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: Dynamic analyzer shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Dynamic analyzer shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
                <tr>
                <th>Command</th>
 </table>
 
 <h2 id="emulator_manager" name="emulator_manager">Emulator Manager</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: Emulator Manager shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Emulator Manager shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
                <tr>
                <th>Command</th>
 </table>
 
 <h2 id="emulator" name="emulator">Emulator</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: Emulator shortcuts</caption>
+<p align="center" class="Table"><strong>Table: Emulator shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
         <tr>
         <th>Command</th>
 
 
 <h2 id="ecp" name="ecp">Emulator Control Panel (ECP)</h2>
-  <table border="1" style="width: 100%">
-    <caption>Table: ECP shortcuts</caption>
+<p align="center" class="Table"><strong>Table: ECP shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
         <tr>
         <th colspan="2">Command</th>
 
 
 <h2 id="enventor" name="enventor">EDC Editor</h2>
-  <table border="1" style="width: 100%">
-  <caption>Table: EDC Editor shortcuts</caption>
+<p align="center" class="Table"><strong>Table: EDC Editor shortcuts</strong></p>
+<table border="1" style="width: 100%">
 <tbody>
         <tr>
         <th>Command</th>
index 8243d5e..c0a4d66 100644 (file)
@@ -42,9 +42,9 @@
 <h2 id="view">Viewing Logs in Log Tabs</h2>
 
 <p>By default, the <strong>Log</strong> view is located at the bottom of the <strong>Native</strong> perspective. If you want to open the <strong>Log</strong> view manually, go to <strong>Window &gt; Show View &gt; Other &gt; Log</strong> in the Tizen Studio menu.</p>
-<p>The <strong>Log</strong> view helps you debug your application by capturing all the events logged by the platform and your application. The <strong>Log</strong> view shows the logs through the <a href="../../../org.tizen.guides/html/native/error/system_logs_n.htm">dlog logging service</a>. The service consists of the dlogutil and dlog library. You can also see logs with the <span style="font-family: Courier New,Courier,monospace">dlogutil</span> command in the CLI environment, and create log entries with the dlog library.</p>
+<p>The <strong>Log</strong> view helps you debug your application by capturing all the events logged by the platform and your application. The <strong>Log</strong> view shows the logs through the <a href="../../../org.tizen.guides/html/native/error/system_logs_n.htm">dlog logging service</a>. The service consists of the dlogutil and dlog library. You can also see logs with the <code>dlogutil</code> command in the CLI environment, and create log entries with the dlog library.</p>
 
-<p class="figure">Figure: Log view</p> 
+<p align="center"><strong>Figure: Log view</strong></p> 
 <p align="center"><img alt="Log view" src="../images/log_view.png" /></p> 
  
 <h3>Creating a Log Message</h3>
@@ -77,7 +77,7 @@
 <li><strong>Message</strong>: log message</li>
 </ul>
 
-<p class="figure">Figure: Log table fields</p> 
+<p align="center"><strong>Figure: Log table fields</strong></p> 
 <p align="center"><img alt="Log view" src="../images/log_view_fields.png" /></p> 
  
 <p>In the log table, you have the following options and functions:</p>
index 9c6cb4b..65235a2 100644 (file)
        </ul>
 <p>The SDB is a client-server program that consists of a client, daemon, and server:</p>
        <ul>
-               <li><strong>Client</strong> sends commands to the server. The client runs on your computer. You can invoke the client from a shell by issuing the <span style="font-family: Courier New,Courier,monospace">sdb</span> command at the prompt.
+               <li><strong>Client</strong> sends commands to the server. The client runs on your computer. You can invoke the client from a shell by issuing the <code>sdb</code> command at the prompt.
                </li>
                <li><strong>Daemon</strong> runs commands on the device. The daemon runs as a background process on each target device.
                </li>
                <li><strong>Server</strong> manages communication between the client and the daemon. The server runs as a background process on your computer.
                </li>
        </ul>
-<p>You can find the SDB tools in the <span style="font-family: Courier New,Courier,monospace">$&lt;TIZEN_STUDIO&gt;/tools/</span> folder.</p>
+<p>You can find the SDB tools in the <code>$&lt;TIZEN_STUDIO&gt;/tools/</code> folder.</p>
 
 <h2 id="enabling_sdb">Enabling the SDB</h2>
 <p>The SDB can communicate with a target over a USB or Wi-Fi connection. To use the SDB over USB, open the system settings of the target device, and enable the <strong>USB debugging</strong> mode in <strong>Settings &gt; More system settings &gt; Developer options</strong> (the location can differ based on the device).</p>
 <pre class="prettyprint">
 &gt; sdb [option] &lt;command&gt; [parameters]
 </pre>
-<p>You can specify a target of <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span> by typing the following in the <span style="font-family: Courier New,Courier,monospace">[option]</span>:</p>
+<p>You can specify a target of <code>&lt;command&gt;</code> by typing the following in the <code>[option]</code>:</p>
        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">-d</span>: Sends the <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span> to a connected device and returns an error if there are other devices.
+               <li><code>-d</code>: Sends the <code>&lt;command&gt;</code> to a connected device and returns an error if there are other devices.
                </li>
-               <li><span style="font-family: Courier New,Courier,monospace">-e</span>: Sends the <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span> to a running emulator instance and returns an error if there are other instances.
+               <li><code>-e</code>: Sends the <code>&lt;command&gt;</code> to a running emulator instance and returns an error if there are other instances.
                </li>
-               <li><span style="font-family: Courier New,Courier,monospace">-s &lt;serial number&gt;</span>: Sends the <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span> to a target through <span style="font-family: Courier New,Courier,monospace">&lt;serial number&gt;</span>.
+               <li><code>-s &lt;serial number&gt;</code>: Sends the <code>&lt;command&gt;</code> to a target through <code>&lt;serial number&gt;</code>.
                </li>
        </ul>
 <p>For more information about commands and parameters, see the following table.</p>
 
+<p align="center" class="Table"><strong>Table: SDB commands</strong></p>
 <table id="command">
-<caption>Table: SDB commands</caption>
 <tbody>
 <tr>
        <th>Command</th>
        <th>Description</th>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">devices</span></td>
+       <td><code>devices</code></td>
        <td>Lists all connected target instances.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">connect &lt;host&gt;[:&lt;port&gt;]</span></td>
+       <td><code>connect &lt;host&gt;[:&lt;port&gt;]</code></td>
        <td>Connects to a target through TCP/IP.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">disconnect &lt;host&gt;[:&lt;port&gt;]</span></td>
+       <td><code>disconnect &lt;host&gt;[:&lt;port&gt;]</code></td>
        <td>Disconnects from a TCP/IP device.
        <p>By default, the port 26101 is used if there is no specified port number. If you use this command with no additional arguments, all connected TCP/IP devices are disconnected.</p></td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">push &lt;local&gt; &lt;remote&gt; [-with-utf8]</span></td>
+       <td><code>push &lt;local&gt; &lt;remote&gt; [-with-utf8]</code></td>
        <td>Copies a file or directory recursively from the host computer to the target.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">pull &lt;remote&gt; [&lt;local&gt;]</span></td>
+       <td><code>pull &lt;remote&gt; [&lt;local&gt;]</code></td>
        <td>Copies a file or directory recursively from the target to the host computer.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">shell [&lt;command&gt;]</span></td>
-       <td>Launches the shell on the target instance if the <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span> is not specified. If the <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span> is specified, runs the <span style="font-family: Courier New,Courier,monospace">&lt;command&gt;</span> without entering the SDB remote shell on the target instance.</td>
+       <td><code>shell [&lt;command&gt;]</code></td>
+       <td>Launches the shell on the target instance if the <code>&lt;command&gt;</code> is not specified. If the <code>&lt;command&gt;</code> is specified, runs the <code>&lt;command&gt;</code> without entering the SDB remote shell on the target instance.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">install &lt;pkg-file&gt;</span></td>
-       <td>Pushes the <span style="font-family: Courier New,Courier,monospace">tpk</span> package file to the device and installs it.</td>
+       <td><code>install &lt;pkg-file&gt;</code></td>
+       <td>Pushes the <code>tpk</code> package file to the device and installs it.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">uninstall &lt;pkg-id&gt;</span></td>
-       <td>Uninstalls the application from the device by using its <span style="font-family: Courier New,Courier,monospace">pkg-id</span>.</td>
+       <td><code>uninstall &lt;pkg-id&gt;</code></td>
+       <td>Uninstalls the application from the device by using its <code>pkg-id</code>.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">forward &lt;local&gt; &lt;remote&gt;</span></td>
+       <td><code>forward &lt;local&gt; &lt;remote&gt;</code></td>
        <td>Sets up requests&#39; arbitrary port forwarding from the host&#39;s local port to the target&#39;s remote port.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">dlog [option] [&lt;filter&gt;]</span></td>
+       <td><code>dlog [option] [&lt;filter&gt;]</code></td>
        <td>Monitors the content of the device log buffers.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">start-server [--only-detect-tizen]</span></td>
+       <td><code>start-server [--only-detect-tizen]</code></td>
        <td>Starts the server.
-       <p>If <span style="font-family: Courier New,Courier,monospace">[--only-detect-tizen]</span> is specified, the SDB detects only Tizen devices.</p></td>
+       <p>If <code>[--only-detect-tizen]</code> is specified, the SDB detects only Tizen devices.</p></td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">kill-server</span></td>
+       <td><code>kill-server</code></td>
        <td>Stops the running server.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">get-state</span></td>
-       <td>Prints the connection status with the target device: <span style="font-family: Courier New,Courier,monospace">device</span> or <span style="font-family: Courier New,Courier,monospace">offline</span>.</td>
+       <td><code>get-state</code></td>
+       <td>Prints the connection status with the target device: <code>device</code> or <code>offline</code>.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">get-serialno</span></td>
+       <td><code>get-serialno</code></td>
        <td>Prints the serial number for connecting the target device.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">status-window</span></td>
+       <td><code>status-window</code></td>
        <td>Prints the connection status for a specified device continuously.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">root &lt;on|off&gt;</span></td>
+       <td><code>root &lt;on|off&gt;</code></td>
        <td>Switches between the root and developer account mode.
-       <p>The <span style="font-family: Courier New,Courier,monospace">on</span> value sets the root mode and the <span style="font-family: Courier New,Courier,monospace">off</span> value sets the developer account mode.</p></td>
+       <p>The <code>on</code> value sets the root mode and the <code>off</code> value sets the developer account mode.</p></td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">version</span></td>
+       <td><code>version</code></td>
        <td>Shows the version number.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">help</span></td>
+       <td><code>help</code></td>
        <td>Shows the help message.</td>
 </tr>
 </tbody></table>
 
 <h2 id="targets">Managing Targets</h2>
-<p>Before issuing SDB commands, it is helpful to know which target instances are connected to the SDB server. In response to the <span style="font-family: Courier New,Courier,monospace">devices</span> command option, the SDB prints the serial number (a string created by the SDB to uniquely identify a target instance) and connection status for each connected device. The connection status can be <span style="font-family: Courier New,Courier,monospace">offline</span> (the instance is not connected to the SDB or is not responding) or <span style="font-family: Courier New,Courier,monospace">device</span> (the instance is connected to the SDB server).</p>
+<p>Before issuing SDB commands, it is helpful to know which target instances are connected to the SDB server. In response to the <code>devices</code> command option, the SDB prints the serial number (a string created by the SDB to uniquely identify a target instance) and connection status for each connected device. The connection status can be <code>offline</code> (the instance is not connected to the SDB or is not responding) or <code>device</code> (the instance is connected to the SDB server).</p>
 <p>The output format for each instance is the following:</p>
 <pre class="prettyprint">
 [serialNumber]     [state]    [targetName]
@@ -177,30 +177,30 @@ List of devices attached
 emulator-26100    device    myemulator1
 emulator-26200    device    myemulator2
 </pre>
-<p>By specifying the <span style="font-family: Courier New,Courier,monospace">[serialNumber]</span> in the command, you can execute SDB commands on a specific target device. If you execute a command without specifying the target instance while multiple devices are available, the SDB generates an error.</p>
+<p>By specifying the <code>[serialNumber]</code> in the command, you can execute SDB commands on a specific target device. If you execute a command without specifying the target instance while multiple devices are available, the SDB generates an error.</p>
 
 <h2 id="transferring_files">Transferring Files to and from Targets</h2>
-You can use the <span style="font-family: Courier New,Courier,monospace">pull</span> and <span style="font-family: Courier New,Courier,monospace">push</span> command options to copy files to and from the target instance. These options let you copy arbitrary directories and files to any location in the target instance, if you have a right permission:
+You can use the <code>pull</code> and <code>push</code> command options to copy files to and from the target instance. These options let you copy arbitrary directories and files to any location in the target instance, if you have a right permission:
        <ul>
-               <li>To copy a file or directory (and its sub-directories) from the target to the host computer, use the <span style="font-family: Courier New,Courier,monospace">pull</span> option:
+               <li>To copy a file or directory (and its sub-directories) from the target to the host computer, use the <code>pull</code> option:
 <pre class="prettyprint">
 &gt; sdb pull &lt;remote&gt; [&lt;local&gt;]
 </pre>
                </li>
-               <li>To copy a file or directory (and its sub-directories) from the host computer to the target, use the <span style="font-family: Courier New,Courier,monospace">push</span> option:
+               <li>To copy a file or directory (and its sub-directories) from the host computer to the target, use the <code>push</code> option:
 <pre class="prettyprint">
 &gt; sdb push &lt;local&gt; &lt;remote&gt; [-with-utf8]
 </pre>
-               <p>The <span style="font-family: Courier New,Courier,monospace">[-with-utf8]</span> parameter creates the remote file with the UTF-8 character encoding.</p>
+               <p>The <code>[-with-utf8]</code> parameter creates the remote file with the UTF-8 character encoding.</p>
                </li>
        </ul>
-<p>In both commands, the <span style="font-family: Courier New,Courier,monospace">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;remote&gt;</span> parameters refer to the paths to the target files and directory on your computer (local) and on the target instance (remote). For example:</p>
+<p>In both commands, the <code>&lt;local&gt;</code> and <code>&lt;remote&gt;</code> parameters refer to the paths to the target files and directory on your computer (local) and on the target instance (remote). For example:</p>
 <pre class="prettyprint">
 &gt; sdb push foo.txt /tmp/foo.txt
 </pre>
 
 <h2 id="issuing_commands">Issuing Shell Commands</h2>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">shell</span> command option to issue target shell commands, with or without entering the SDB remote shell on the target. To issue a single command without entering a remote shell:</p>
+<p>You can use the <code>shell</code> command option to issue target shell commands, with or without entering the SDB remote shell on the target. To issue a single command without entering a remote shell:</p>
 <pre class="prettyprint">
 &gt; sdb shell &lt;shell_command&gt;
 </pre>
@@ -208,7 +208,7 @@ You can use the <span style="font-family: Courier New,Courier,monospace">pull</s
 <pre class="prettyprint">
 &gt; sdb shell
 </pre>
-<p>To exit from the remote shell, press the <strong>Ctrl + D</strong> key or use the <span style="font-family: Courier New,Courier,monospace">exit</span> command to end the remote shell.</p>
+<p>To exit from the remote shell, press the <strong>Ctrl + D</strong> key or use the <code>exit</code> command to end the remote shell.</p>
 <p>You can use all shell commands, such as the following, if you have the right permissions:</p>
 <pre class="prettyprint">
 ls, rm, mv, cd, cp, mkdir, touch, echo, tar, grep, cat, chmod, rpm, find, uname, netstat
@@ -217,12 +217,12 @@ ls, rm, mv, cd, cp, mkdir, touch, echo, tar, grep, cat, chmod, rpm, find, uname,
 <h2 id="install_uninstall">Installing and Uninstalling Applications</h2>
 <p>You can use the SDB to install and uninstall the Tizen package file on the target instance:</p>
        <ul>
-               <li>The <span style="font-family: Courier New,Courier,monospace">install</span> command option pushes the package file to the target and installs it. The <span style="font-family: Courier New,Courier,monospace">&lt;path_to_tpk&gt;</span> parameter defines the path to the TPK file. The following command shows an example:
+               <li>The <code>install</code> command option pushes the package file to the target and installs it. The <code>&lt;path_to_tpk&gt;</code> parameter defines the path to the TPK file. The following command shows an example:
 <pre class="prettyprint">
 &gt; sdb install /home/tizen/ko983dw33q-1.0.0-i386.tpk
 </pre>
                </li>
-               <li>The <span style="font-family: Courier New,Courier,monospace">uninstall</span> command option kills the application, if running, and removes the package from the target. The <span style="font-family: Courier New,Courier,monospace">&lt;pkg-id&gt;</span> is a unique 10-digit identifier for the application. The following command shows an example:
+               <li>The <code>uninstall</code> command option kills the application, if running, and removes the package from the target. The <code>&lt;pkg-id&gt;</code> is a unique 10-digit identifier for the application. The following command shows an example:
 <pre class="prettyprint">
 &gt; sdb uninstall ko983dw33q
 </pre>
@@ -231,7 +231,7 @@ ls, rm, mv, cd, cp, mkdir, touch, echo, tar, grep, cat, chmod, rpm, find, uname,
 
 <h2 id="forwarding">Forwarding Ports</h2>
 <p>You can set up arbitrary port forwarding of requests from a specific host port to a specific remote port on a target instance.</p>
-<p>The format for the <span style="font-family: Courier New,Courier,monospace">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;remote&gt;</span> parameters is <span style="font-family: Courier New,Courier,monospace">tcp:&lt;port&gt;</span>. The following example shows how to forward requests from the host port 26102 to the device port 9999:</p>
+<p>The format for the <code>&lt;local&gt;</code> and <code>&lt;remote&gt;</code> parameters is <code>tcp:&lt;port&gt;</code>. The following example shows how to forward requests from the host port 26102 to the device port 9999:</p>
 <pre class="prettyprint">
 &gt; sdb forward tcp:26102 tcp:9999
 </pre>
@@ -246,54 +246,54 @@ ls, rm, mv, cd, cp, mkdir, touch, echo, tar, grep, cat, chmod, rpm, find, uname,
 (gdb) target remote localhost:26102
 </pre>
 <h2 id="controlling_device">Controlling Device Log Output</h2>
-<p>You can see the target log messages using the SDB. To see the log output in your computer or from a remote SDB shell, use the <span style="font-family: Courier New,Courier,monospace">sdb dlog</span> or <span style="font-family: Courier New,Courier,monospace">dlogutil</span> command, respectively:</p>
+<p>You can see the target log messages using the SDB. To see the log output in your computer or from a remote SDB shell, use the <code>sdb dlog</code> or <code>dlogutil</code> command, respectively:</p>
 <pre class="prettyprint">
 &gt; sdb dlog [option] [&lt;filter&gt;]
 </pre>
-<p>The following table shows some options for the <span style="font-family: Courier New,Courier,monospace">sdb dlog</span> and <span style="font-family: Courier New,Courier,monospace">dlogutil</span> commands:</p>
+<p>The following table shows some options for the <code>sdb dlog</code> and <code>dlogutil</code> commands:</p>
+<p align="center" class="Table"><strong>Table: Log output options</strong></p>
 <table>
-<caption>Table: Log output options</caption>
 <tbody>
 <tr>
        <th>Option</th>
        <th>Description</th>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">-f &lt;filename&gt;</span></td>
-       <td>Writes the log to the <span style="font-family: Courier New,Courier,monospace">&lt;filename&gt;</span> file. The default file is stdout.</td>
+       <td><code>-f &lt;filename&gt;</code></td>
+       <td>Writes the log to the <code>&lt;filename&gt;</code> file. The default file is stdout.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">-r &lt;Kbytes&gt;</span></td>
-       <td>Rotates the log file every <span style="font-family: Courier New,Courier,monospace">&lt;Kbytes&gt;</span> of output. The default value is 16. This option also requires the <span style="font-family: Courier New,Courier,monospace">-f</span> option.</td>
+       <td><code>-r &lt;Kbytes&gt;</code></td>
+       <td>Rotates the log file every <code>&lt;Kbytes&gt;</code> of output. The default value is 16. This option also requires the <code>-f</code> option.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">-n &lt;count&gt;</span></td>
-       <td>Sets the maximum number of rotated logs to <span style="font-family: Courier New,Courier,monospace">&lt;count&gt;</span>. The default value is 4. This option also requires the <span style="font-family: Courier New,Courier,monospace">-r</span> option.</td>
+       <td><code>-n &lt;count&gt;</code></td>
+       <td>Sets the maximum number of rotated logs to <code>&lt;count&gt;</code>. The default value is 4. This option also requires the <code>-r</code> option.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">-v &lt;format&gt;</span></td>
+       <td><code>-v &lt;format&gt;</code></td>
        <td>Sets the output format for log messages.
        <p>You can define which metadata fields are included in log messages by setting one of the following output formats:</p>
                <ul>
-                       <li><span style="font-family: Courier New,Courier,monospace">brief</span> (default): Displays the priority/tag and PID of the originating process.
+                       <li><code>brief</code> (default): Displays the priority/tag and PID of the originating process.
                        </li>
-                       <li><span style="font-family: Courier New,Courier,monospace">process</span>: Displays the PID only.
+                       <li><code>process</code>: Displays the PID only.
                        </li>
-                       <li><span style="font-family: Courier New,Courier,monospace">tag</span>: Displays the priority/tag only.
+                       <li><code>tag</code>: Displays the priority/tag only.
                        </li>
-                       <li><span style="font-family: Courier New,Courier,monospace">thread</span>: Displays the <span style="font-family: Courier New,Courier,monospace">process:thread</span> and priority/tag only.
+                       <li><code>thread</code>: Displays the <code>process:thread</code> and priority/tag only.
                        </li>
-                       <li><span style="font-family: Courier New,Courier,monospace">raw</span>: Displays the raw log message, with no other metadata fields.
+                       <li><code>raw</code>: Displays the raw log message, with no other metadata fields.
                        </li>
-                       <li><span style="font-family: Courier New,Courier,monospace">time</span>: Displays the date, invocation time, priority/tag, and PID of the originating process.
+                       <li><code>time</code>: Displays the date, invocation time, priority/tag, and PID of the originating process.
                        </li>
-                       <li><span style="font-family: Courier New,Courier,monospace">long</span>: Displays all metadata fields and separate messages with a blank line.
+                       <li><code>long</code>: Displays all metadata fields and separate messages with a blank line.
                        </li>
                </ul>
        </td>
 </tr>
 </tbody></table>
-<p>The <span style="font-family: Courier New,Courier,monospace">[&lt;filter&gt;]</span> parameter defines the tag of interest (the system component from which the message originates) and the minimum level of priority to report for that tag. The format is <span style="font-family: Courier New,Courier,monospace">&lt;tag&gt;:&lt;priority&gt;</span>, and multiple filters must be separated with a space. The available priorities (from lowest to highest) are <strong>V</strong> (Verbose), <strong>D</strong> (Debug), <strong>I</strong> (Info), <strong>W</strong> (Warning), <strong>E</strong> (Error), and <strong>F</strong> (Fatal).</p>
+<p>The <code>[&lt;filter&gt;]</code> parameter defines the tag of interest (the system component from which the message originates) and the minimum level of priority to report for that tag. The format is <code>&lt;tag&gt;:&lt;priority&gt;</code>, and multiple filters must be separated with a space. The available priorities (from lowest to highest) are <strong>V</strong> (Verbose), <strong>D</strong> (Debug), <strong>I</strong> (Info), <strong>W</strong> (Warning), <strong>E</strong> (Error), and <strong>F</strong> (Fatal).</p>
 <p>For example, to view all log messages of the error and fatal priority in addition to the <strong>MyApp</strong> tag messages of the debug priority (and higher), use the following command:</p>
 <pre class="prettyprint">
 &gt; sdb dlog MyApp:D *:E
index a72efd2..1f39a62 100644 (file)
 <ul>
 <li>Installer and Package Manager
 <p>These tools allow you to install, update, and maintain Tizen. You can select and install the platform and profile you need, providing continuous updates. The tools provide you accurate information so you can configure the necessary development environment without confusion.</p>
-<p class="figure">Figure: Package Manager</p>
+<p align="center"><strong>Figure: Package Manager</strong></p>
 <p align="center"><img alt="Package Manager" src="images/overview_package_manager.png" /></p>
 </li>
 <li>Tizen Studio development environment
 <p>This component for the actual development of Tizen applications has the unified Tizen theme, provides a fast development environment, and improves the ease of use by sorting the menu in the correct order for application development tasks, as well as expanding the toolbar icons.</p>
 <p>In addition, the Tizen Studio provides accurate information in a consistent manner to minimize the difficulties you can encounter when using it.</p>
-<p class="figure">Figure: Tizen Studio development environment</p>
+<p align="center"><strong>Figure: Tizen Studio development environment</strong></p>
 <p align="center"><img alt="Tizen Studio development environment" src="images/overview_ide.png" /></p>
 </li>
 <li>Native UI Builder
 <p>This tool provides assistance in developing native Tizen applications. It allows easy development of UI applications with a WYSIWYG (What You See is What You Get) editor, and it helps you understand Tizen native UI development and the UI hierarchy. The application UI screen can be configured easily with this editor.</p>
-<p class="figure">Figure: Native UI Builder</p>
+<p align="center"><strong>Figure: Native UI Builder</strong></p>
 <p align="center"><img alt="Native UI Builder" src="images/overview_ui_builder.png" /></p>
 </li>
 <li>Emulator
 <p>This tool helps you develop and debug Tizen applications without an actual Tizen device. You can select the platform, profile, and device that you need and run applications with the emulator. In addition, through the Emulator Control Panel (ECP), you can directly input events in the application and see how the application operates.</p>
-<p class="figure">Figure: Emulator Manager and ECP</p>
+<p align="center"><strong>Figure: Emulator Manager and ECP</strong></p>
 <p align="center"><img alt="Emulator Manager and ECP" src="images/overview_emulator.png" /></p>
 </li>
 <li>Profiling tool
 <p>By using the Dynamic Analyzer, the Tizen Studio provides profiling assistance for application optimization. The status of the device, such as its processor usage, memory usage, and UI events, can be measured and viewed for optimizing the Tizen application.</p>
-<p class="figure">Figure: Dynamic Analyzer</p>
+<p align="center"><strong>Figure: Dynamic Analyzer</strong></p>
 <p align="center"><img alt="Dynamic Analyzer" src="images/overview_da.png" /></p>
 </li>
 </ul>
index 4c8f5a8..9ed4f63 100644 (file)
@@ -10,18 +10,17 @@ body {
        font-family: Arial, Helvetica, sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl, dd, footer {
        font-family: Arial, Verdana, Helvetica, sans-serif
        }
 
 /*     Set default font to 9 pt        */
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+table, div, p, dl, td, caption, th, ul, ol, li, dd, pre, code {
        font-size: 9pt;
 }
        
 pre, code { 
        font-family: "Courier New", Courier, monospace;
-       border: 1px solid #719cc7;
        margin: 6px 1.5px;
        padding: 1px 1px 1px 1px;
        font-weight: normal;
@@ -41,7 +40,7 @@ h1, h2, h3, h4, h5 {
        margin-top: 16pt;
 }
 
-caption, p.caption { 
+caption { 
        font-size: 9pt;
        color: #1C1C1C;
        font-weight: bold;
@@ -62,35 +61,6 @@ ul li, ol li {
        margin-bottom: 10px;
 }
 
-ol.tutorstep li {
-       border-top: 2px solid #719cc7;
-       list-style-position: inside;
-       font-weight: bold;
-       margin-top: 30px;
-       margin-left: -20px;
-       padding-top: 3px;
-       font-size: 12pt;
-}
-
-ol.tutorstep li p{
-       font-size: 9pt;
-       font-weight: normal;
-       margin-top: 10px;
-}
-
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
-       font-size: 9pt;
-       list-style-position: outside; 
-       margin-left: 0px;
-       font-weight: normal;
-}
-
-ol.tutorstep ol li p, ol.tutorstep ul li p {
-       font-size: 9pt;
-       font-weight: normal; 
-       margin-top: 5px;
-}
-
 ol li p, ul li p {
        font-size: 9pt;
        font-weight: normal;
@@ -98,7 +68,7 @@ ol li p, ul li p {
        margin-top: 2px;
 }
 
-ol ol , ol.tutorstep ol{
+ol ol {
        font-size: 9pt;
        font-weight: normal;
        list-style-type: lower-alpha;
@@ -107,12 +77,7 @@ ol ol , ol.tutorstep ol{
        margin-top: 10px; 
 }
 
-ol.tutorstep ul {
-       margin-top: 10px;
-       font-size: 9pt;
-}
-
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+ol ol li, ol ul li {
        border-style: none;
        margin-top: 5px;
        font-size: 9pt;
@@ -153,69 +118,38 @@ td {
        vertical-align:top;
        padding: 3px 20px 5px 20px;
        }
-
-td.middle {
-       border: 1px solid #c6d9f1;
-       vertical-align:middle;
-       padding: 3px 20px 5px 20px;
-       }       
        
 /*     Notes stand out using a light top & bottom borders with yellow background       */
-table.note {
-       border-top: 2px solid #719cc7;
-       border-left: 0px;
-       border-right: 0px;
-       width: 100%;
-}
 
-tr.note {
-       text-align: left;
+div.note {
+    background-color: #eeece1;
+    border: medium none;
+    color: #1c1c1c;
+    margin-bottom: 12px;
+    margin-top: 12px;
+    padding: 5px;
 }
 
-th.note {
-       text-align: left;
-       background-color: #ddd9c3;
-       background-image: note.gif;
-       border-top: 2px solid #719cc7;
-       border-bottom:1px solid #719cc7;
-       border-right: none;
-
+div.note > strong:first-child {
+    background-color: #ddd9c3;
+    border-bottom: 1px solid #719cc7;
+    border-right: medium none;
+    border-top: 2px solid #719cc7;
+    text-align: left;
+    color: #719cc7;
+    font-size: 9pt;
+    font-weight: bold;
+       margin: -4px -4px 4px -4px;  
+       padding: 4px 0px 4px 4px;
+       display: block; 
+       width: auto;
 }
 
-td.note, p.note {
-       background-color: #eeece1;
-       color: #1C1C1C;
-       padding: 5px;
-       margin-top:12px;
-       margin-bottom:12px;
-       border: none;
-}
-       
-/*     Figure titles are centered and bolded   */
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
-       text-align: center;
-       font-weight: bold;
+div.note * strong:after {
+       content: "\a ";
+    white-space: pre-line;
 }
 
-/*     Red background and white text for things that need fixing before release        */
-.fix   {
-       background-color: red;
-       font-weight: bold;
-       color: white;
-       }
-
-/* Classes for creating collapsible content */
-#banner {
-       padding: 8px 4px 8px 4px;
-       /* top right bottom left */
-       border: 1px solid #7f7f7f;
-       width: 100%;
-       background-image: url("banner.png");
-       text-align: left;
-       font-weight: bold;
-       font-size: 9pt;
-       color: #ffffff;
-}
 
 #toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
 #toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
@@ -258,12 +192,6 @@ ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 7
        ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
        ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
 
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
-
-.static-cont {width:100%; margin-bottom:40px;}
        
 .top {text-align: right;}
 .toc, ul.toc{
@@ -308,7 +236,21 @@ a img {border: 0;}
 }
 
 .footer {font-size: 8pt;}
+
+p.Table {
+       text-align: center;
+       margin-top: 40px;
+       margin-bottom: -19px;
+       padding: 0;
+}
        
+p.Table strong {
+       font-family: Arial, Verdana, Helvetica, sans-serif;
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+}
+
 caption { 
        font-size: 9pt;
        color: #1C1C1C;
@@ -318,418 +260,24 @@ caption {
        margin-bottom: 0px;
 }
 
-div.qindex, div.navpath, div.navtab{
-       background-color: #e8eef2;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       padding: 2px;
-}
-
-div.qindex, div.navpath {
-       width: 100%;
-       line-height: 140%;
-}
-
-div.navtab {
-       margin-right: 15px;
-}
-
-/* @group Link Styling */
-
-a:link {
-       color: #719cc7;
-       text-decoration: underline;
-       font-weight: bold;
-}
-
-a:hover { 
-       color: #0e437d;
-}
-
-a:visited {
-       text-decoration: underline;
-       color: #719cc7;
-       font-weight: bold;
-}
-
-a.qindex {
-       font-weight: bold;
-       padding: 2px;
-}
-
-a.qindex:hover {
-       text-decoration: underline;
-       color: #0e437d;
-       padding: 2px;
-}
-
-a.qindex:visited {
-       text-decoration: underline;
-       font-weight: bold;
-       color: #719cc7;
-       padding: 2px;
-}
-
-a.qindexHL {
-       text-decoration: underline;
-       font-weight: bold;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-       border: 1px double #9295C2;
-}
-
-a.qindexHL:hover {
-       text-decoration: none;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-}
-
-dl.el { 
-       margin-left: -1cm 
-}
-
-.fragment {
-       font-family: monospace, fixed;
-       font-size: 105%;
-}
-
-pre.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 4px 6px;
-       margin: 4px 8px 4px 2px;
-}
-
-div.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 6px;
-}
-
-div.ah { 
-       background-color: black; 
-       font-weight: bold; 
-       color: #ffffff; 
-       margin-bottom: 3px; 
-       margin-top: 3px 
-}
-
-td.md { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-}
-
-td.mdname1 { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-}
-
-td.mdname { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-       width: 600px; 
-}
-
-div.groupHeader {
-       margin-left: 16px;
-       margin-top: 12px;
-       margin-bottom: 6px;
-       font-weight: bold;
-}
-
-div.groupText { 
-       margin-left: 16px; 
-       font-style: italic; 
-}
-
-td.indexkey {
-       background-color: #eeeeff;
-       font-weight: bold;
-       border: 1px solid #CCCCCC;
-       margin: 2px 0px 2px 0;
-       padding: 2px 10px;
-}
-
-td.indexvalue {
-       background-color: #eeeeff;
-       border: 1px solid #CCCCCC;
-       padding: 2px 10px;
-       margin: 2px 0px;
-}
-
-tr.memlist {
-   background-color: #f0f0f0; 
-}
-
-p.formulaDsp { 
-       text-align: center; 
-}
-
-img.formulaDsp { 
-}
-
-img.formulaInl { 
-       vertical-align: middle; 
-}
-
-/* @group Code Colorization */
-
-span.keyword       { color: #008000 }
-span.keywordtype   { color: #604020 }
-span.keywordflow   { color: #e08000 }
-span.comment       { color: #800000 }
-span.preprocessor  { color: #806020 }
-span.stringliteral { color: #002080 }
-span.charliteral   { color: #008080 }
-span.vhdldigit     { color: #ff00ff }
-span.vhdlchar      { color: #000000 }
-span.vhdlkeyword   { color: #700070 }
-span.vhdllogic     { color: #ff0000 }
-
-.mdTable {
-       border: 1px solid #868686;
-       background-color: #F4F4FB;
-}
-
-.mdRow {
-       padding: 8px 10px;
-}
-
-/* @group Member Descriptions */
-
-.mdescLeft, .mdescRight,
-.memItemLeft, .memItemRight,
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-       background-color: #F4F4F4A;
-       border: none;
-       margin: 4px;
-       padding: 3px 8px 4px 8px;
-}
-
-.mdescLeft, .mdescRight {
-       padding: 0px 8px 4px 8px;
-       color: #555;
-}
-
-.memItemLeft, .memItemRight, .memTemplParams {
-       border-top: 1px solid #DBDBDB;
-}
-
-.memTemplParams {
-       color: #606060;
-}
-
 /* @end */
 
 /* @group Member Details */
 
 /* Styles for detailed member documentation */
 
-.memtemplate {
-       font-size: 80%;
-       color: #606060;
-       font-weight: normal;
-       margin-left: 3px;
-}
-
-.memnav {
-       background-color: #eeeeff;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       margin-right: 15px;
-       padding: 2px;
-}
-
 .memitem {
        padding: 0;
 }
 
-.memname {
-       white-space: nowrap;
-       font-weight: bold;
-}
-
-.memproto, .memdoc {
-       border: 1px solid #9BBCDD;      
-}
-
-.memproto {
-       padding: 0;
-       background-color: #D5E2EF;
-       font-weight: bold;
-       -webkit-border-top-left-radius: 8px;
-       -webkit-border-top-right-radius: 8px;
-       -moz-border-radius-topleft: 8px;
-       -moz-border-radius-topright: 8px;
-}
-
-.memdoc {
-       padding: 2px 5px;
-       background-color: #eef3f5;
-       border-top-width: 0;
-       -webkit-border-bottom-left-radius: 8px;
-       -webkit-border-bottom-right-radius: 8px;
-       -moz-border-radius-bottomleft: 8px;
-       -moz-border-radius-bottomright: 8px;
-}
-
-.memdoc p, .memdoc dl, .memdoc ul {
-       margin: 6px 0;
-}
-
-.paramkey {
-       text-align: right;
-}
-
-.paramtype {
-       white-space: nowrap;
-}
-
-.paramname {
-       color: #853E0E;
-       white-space: nowrap;
-}
-.paramname em {
-       font-style: normal;
-}
-
 /* @end */
 
-.search     { color: #003399;
-              font-weight: bold;
-}
-
-form.search {
-              margin-bottom: 0px;
-              margin-top: 0px;
-}
-
-input.search { font-size: 75%;
-               color: #000080;
-               font-weight: normal;
-               background-color: #eeeeff;
-}
-
-td.tiny { 
-       font-size: 75%;
-}
-
 .highlight {
-        background-color:#E2E2FF;
+       background-color:#E2E2FF;
 }
 
-/*---------- ide-eclipse Styles ---------*/
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
-       margin: 0px 0px;
-       padding: -30px -30px -30px -30px;
-       font-weight: normal;
-       font-style: normal;}
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
-
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
-
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
-.sh_styleFromXML{color:#800000;font-weight:bold;}
-/*-------------------------------------------------------*/
-
-/*-------- Snippet Base Styles ----------*/
-.snippet-wrap {position:relative;}
-*:first-child+html .snippet-wrap {display:inline-block;}
-* html .snippet-wrap {display:inline-block;}
-.snippet-reveal{text-decoration:underline;}
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
-* html .snippet-wrap .snippet-hide {bottom:1px;}
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
--moz-border-radius:0px;
--webkit-border-radius:0px;
-border-radius:0px;
-box-shadow: 1px 1px px #000;
--moz-box-shadow: 2px 2px 1px #000;
--webkit-box-shadow: 1px 1px 1px #000;}
-.snippet-wrap pre.snippet-textonly {padding:1em;}
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
-.snippet-wrap .snippet-num li{padding-left:2px;}
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
-.snippet-wrap li.box-mid {border-width:0 0px !important;}
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}
-
-/* Layout fixing */
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-.clfix {display: inline-block;}
-.clfix {display: block;}
-* html .clfix {height: 1%;} /* Hides from IE-mac */
-.clfix {zoom:1;} /*for IE 5.5-7*/
-
-.fl {float:left !important;}
-.fr {float:right !important;}
-.cl {clear:both;}
-.rel {position:relative;}
-.abs {position:absolute;}
-.ac {text-align:center !important;}
-.ar {text-align:right !important;}
-.al {text-align:left !important;}
-.at {vertical-align:top !important;}
-.am {vertical-align:middle !important;}
-.ab {vertical-align:bottom;}
-.hand {cursor:pointer;}
-.bgnone {background:none !important;}
-.brnone {border:none !important;}
-.b {font-weight:bold !important;}
-.n {font-weight:normal !important;}
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
-.mt5 {margin-top:5px !important;} 
 /* //Layout fixing */
 
-@media print { .hide, .show { display: none; }}
-
 div#profile {
     position: relative;
 }
@@ -750,7 +298,3 @@ div#toc_border {
 p {
        /* overflow: auto; */
 }
-
-div.table {
-       /* overflow: auto; */
-}
\ No newline at end of file
index 34a8f8d..aef4458 100644 (file)
        <ul>
        <li>Function profiling information has been fixed to be properly collected and shown.</li>
        <li>The bug, which caused the selected features not to be updated on a target change, has been fixed.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">--output</span> option in CLI has been fixed to save the result to the specified path.</li>
+       <li>The <code>--output</code> option in CLI has been fixed to save the result to the specified path.</li>
        </ul>
 </li>
 </ul>
 </li>
 <li>Emulator
        <ul>
-       <li>Ubuntu sometimes stops responding for a few seconds after closing the Emulator Manager. This issue is related to an IBus (Intelligent Input Bus) bug. When the issue occurs, restart the ibus-daemon by entering the <span style="font-family: Courier New,Courier,monospace">ibus-daemon â€“drx</span> command at the command prompt, and use another framework, such as uim and fcitx, for multilingual input.</li>
+       <li>Ubuntu sometimes stops responding for a few seconds after closing the Emulator Manager. This issue is related to an IBus (Intelligent Input Bus) bug. When the issue occurs, restart the ibus-daemon by entering the <code>ibus-daemon â€“drx</code> command at the command prompt, and use another framework, such as uim and fcitx, for multilingual input.</li>
        <li>To use the Tizen emulator, install an Intel VTx supported by the CPU, and the latest version of the graphic card driver provided by the vendor. Check the prerequisites for the Tizen emulator from <a href="https://developer.tizen.org/development/tizen-studio/download/installing-tizen-studio/prerequisites" target="_blank">Prerequisites for the Tizen Studio</a>.
                <ul>
                <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select &quot;High Speed NVIDIA Processor&quot; as &quot;Preferred Graphics processor&quot; in the Nvidia&reg; control panel.</li>
-               <li>On Ubuntu, if the graphics driver is out-of-date, your Ubuntu desktop session can be occasionally logged out when launching the Emulator Manager, or the Emulator skin can be drawn improperly. Check the prerequisites and upgrade to the latest graphics driver.</li>
+               <li>On Ubuntu, if the graphics driver is out-of-date, your Ubuntu desktop session can be occasionally logged out when launching the Emulator Manager, or the emulator skin can be drawn improperly. Check the prerequisites and upgrade to the latest graphics driver.</li>
                </ul>
        </li>
        <li>On Ubuntu 14.04, a shortcut menu can sometimes appear transparent.</li>
-       <li>On Windows&reg;, depending on your OS theme (such as Non-Aero themes and Windows XP themes), a display surface can be erased for a while if the Emulator window is covered with another window. If you click the Emulator window, the display surface runs correctly again.</li>
-       <li>On Windows&reg;, if a &#39;failed to allocate memory&#39; error occurs while executing the Emulator, try the following:
+       <li>On Windows&reg;, depending on your OS theme (such as Non-Aero themes and Windows XP themes), a display surface can be erased for a while if the emulator window is covered with another window. If you click the emulator window, the display surface runs correctly again.</li>
+       <li>On Windows&reg;, if a &#39;failed to allocate memory&#39; error occurs while executing the emulator, try the following:
                <ul>
-               <li>Close some other programs and try to launch the Emulator again.</li>
+               <li>Close some other programs and try to launch the emulator again.</li>
                <li>If the RAM size is set to 768 or 1024 MB for the VM in the Emulator Manager, change it to 512 MB.</li>
-               <li>Increase the user area of the virtual memory in the system to 3 GB by entering the <span style="font-family: Courier New,Courier,monospace">bcdedit /set increaseuserva 3072</span> command on the console with administrator rights (Windows&reg; 7 only), and reboot.</li>
+               <li>Increase the user area of the virtual memory in the system to 3 GB by entering the <code>bcdedit /set increaseuserva 3072</code> command on the console with administrator rights (Windows&reg; 7 only), and reboot.</li>
                </ul>
        </li>
-       <li>If you use a MacBook Pro which has both Intel HD and Nvidia GPUs, when you execute the Emulator with the <strong>OpenGL ES ver. v1.1 &amp; v2.0</strong> option, the Emulator can be unexpectedly terminated. Use the <strong>OpenGL ES ver. v2.0 &amp; v3.0</strong> option.</li>
+       <li>If you use a MacBook Pro which has both Intel HD and Nvidia GPUs, when you execute the emulator with the <strong>OpenGL ES ver. v1.1 &amp; v2.0</strong> option, the emulator can be unexpectedly terminated. Use the <strong>OpenGL ES ver. v2.0 &amp; v3.0</strong> option.</li>
        </ul>
 </li>
 <li>CLI and SDB
        <ul>
-       <li>To use the SDB bash completion feature, enter the <span style="font-family: Courier New,Courier,monospace">source .sdb-complete.bash</span> command on the bash shell. The Tizen Studio does not support the SDB bash auto-completion on Windows&reg; (it is available on Ubuntu and Mac OS&reg; X).</li>
+       <li>To use the SDB bash completion feature, enter the <code>source .sdb-complete.bash</code> command on the bash shell. The Tizen Studio does not support the SDB bash auto-completion on Windows&reg; (it is available on Ubuntu and Mac OS&reg; X).</li>
        </ul>
 </li>
 <li>Dynamic Analyzer
index 6950572..e82f65e 100644 (file)
@@ -44,7 +44,7 @@
 <li>Installer, Package Manager, and Uninstaller
        <ul>
        <li>The Package Manager supports installing and removing a profile unit. You do not need to install a package one by one for a profile. By clicking the install button next to each profile, you can install all packages for the profile.</li>
-       <li>The Uninstaller allows you to keep the <span style="font-family: Courier New,Courier,monospace">Data</span> and <span style="font-family: Courier New,Courier,monospace">Keystore</span> directories when you uninstall the Tizen Studio.</li>
+       <li>The Uninstaller allows you to keep the <code>Data</code> and <code>Keystore</code> directories when you uninstall the Tizen Studio.</li>
        </ul>
 </li>
 <li>Web and Native IDE
@@ -77,9 +77,9 @@
 <li>CLI and SDB
        <ul>
        <li>Support to develop a Web widget application has been added for the wearable profile.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">manual</span> command has been added to display the description, syntax, options, and examples of the specific command.</li>
+       <li>The <code>manual</code> command has been added to display the description, syntax, options, and examples of the specific command.</li>
        <li>Support has been added to develop native widget and watch applications.</li>
-       <li>The use of the <span style="font-family: Courier New,Courier,monospace">PROJ_PATH</span>, <span style="font-family: Courier New,Courier,monospace">BUILD_ARCH</span>, and <span style="font-family: Courier New,Courier,monospace">BUILD_CONFIG</span> environment variables has been added in the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> and <span style="font-family: Courier New,Courier,monospace">build_def.prop</span> files.</li>
+       <li>The use of the <code>PROJ_PATH</code>, <code>BUILD_ARCH</code>, and <code>BUILD_CONFIG</code> environment variables has been added in the <code>project_def.prop</code> and <code>build_def.prop</code> files.</li>
        </ul>
 </li>
 <li>Dynamic Analyzer
        <ul>
        <li>Unnecessary Eclipse plugins, such as JDT, PDE, mylin, birt, and egit, have been removed. Consequently, the required disk space for installing the IDE has been decreased about 100 MiB.</li>
        <li>The new UX has been applied to the <strong>Preference</strong> and <strong>Properties</strong> dialogs. Various abundant items have been removed for simplicity.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">/home/developer/sdk_tools/lib</span> directory has been excluded in the linking reference of the native project&#39;s <span style="font-family: Courier New,Courier,monospace">-rpath</span> option.</li>
+       <li>The <code>/home/developer/sdk_tools/lib</code> directory has been excluded in the linking reference of the native project&#39;s <code>-rpath</code> option.</li>
        </ul>
 </li>
 <li>Native UI Builder
        <li>Only a single <strong>EDC Editor</strong> instance is allowed at a time.</li>
        <li>Support has been added for an individual group view size and view scale, so that each group keeps its own view size and view scale.</li>
        <li>Code for various new templates has been added.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">base_scale</span> value has been applied to the Live Edit object.</li>
+       <li>The <code>base_scale</code> value has been applied to the Live Edit object.</li>
        <li>The main EDC file can be changed in the settings.</li>
        <li>Help content has been newly designed.</li>
        <li>Whole macro functions are identified to have syntax color.</li>
 <li>Native IDE
        <ul>
        <li>When you tried to debug an application running on the connected target device through <strong>Debug As &gt; Tizen Native Application - Attach</strong>, you could not attach the debugger to the application by using the <strong>Debug Configurations</strong> dialog. This issue has been fixed.</li>
-       <li>When you exported to the CLI project multiple projects packaged together, and one of the projects was the Static and Shared Library, the information of the referenced library project was not set in the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> file of the reference project. This issue has been fixed.</li>
+       <li>When you exported to the CLI project multiple projects packaged together, and one of the projects was the Static and Shared Library, the information of the referenced library project was not set in the <code>project_def.prop</code> file of the reference project. This issue has been fixed.</li>
        </ul>
 </li>
 <li>Native UI Builder
 </li>
 <li>EDC Editor
        <ul>
-       <li>The map template code typo has been fixed. Previously, the index in the <span style="font-family: Courier New,Courier,monospace">color[4]</span> was grammatically wrong. It has been fixed to <span style="font-family: Courier New,Courier,monospace">color[3]</span>.</li>
+       <li>The map template code typo has been fixed. Previously, the index in the <code>color[4]</code> was grammatically wrong. It has been fixed to <code>color[3]</code>.</li>
        <li>The Go to window closing issue has been fixed. The Go to window used to be closed when you just clicked the window title.</li>
        <li>The dummy swallow/spacer selection issue has been fixed. You could not select the swallow/spacer parts, even when they were on top of the other parts. This was caused by incorrect event handling.</li>
        </ul>
 </li>
 <li>CLI and SDB
        <ul>
-       <li>The build failure of the <span style="font-family: Courier New,Courier,monospace">.po</span> files, which occurred if the project type was an IME (Input Method Editor) application, has been fixed.</li>
-       <li>When you executed the parallel build command with the <span style="font-family: Courier New,Courier,monospace">–j</span> option on Ubuntu, the <span style="font-family: Courier New,Courier,monospace">–j</span> option did not work. This issue has been fixed.</li>
+       <li>The build failure of the <code>.po</code> files, which occurred if the project type was an IME (Input Method Editor) application, has been fixed.</li>
+       <li>When you executed the parallel build command with the <code>–j</code> option on Ubuntu, the <code>–j</code> option did not work. This issue has been fixed.</li>
        </ul>
 </li>
 </ul>
 <ul>
 <li>Installer, Package Manager, and Uninstaller
        <ul>
-       <li>If the SDK Update Notification appears when you start the Tizen IDE or Emulator on Mac OS&reg; X, a terminal (<span style="font-family: Courier New,Courier,monospace">shell.exec</span>) icon can appear on the dock for a few seconds.</li>
+       <li>If the SDK Update Notification appears when you start the Tizen IDE or emulator on Mac OS&reg; X, a terminal (<code>shell.exec</code>) icon can appear on the dock for a few seconds.</li>
        <li>If there is a multibyte character in the Tizen SDK installation path, some development packages have a difficulty in finding the installed SDK&#39;s location when they are working.</li>
        </ul>
 </li>
 </li>
 <li>Emulator
        <ul>
-       <li>Ubuntu sometimes stops responding for a few seconds after closing the Emulator Manager. This issue is related to an IBus (Intelligent Input Bus) bug. When the issue occurs, restart the ibus-daemon by entering the <span style="font-family: Courier New,Courier,monospace">ibus-daemon â€“drx</span> command at the command prompt, and use another framework, such as uim and fcitx, for multilingual input.</li>
+       <li>Ubuntu sometimes stops responding for a few seconds after closing the Emulator Manager. This issue is related to an IBus (Intelligent Input Bus) bug. When the issue occurs, restart the ibus-daemon by entering the <code>ibus-daemon â€“drx</code> command at the command prompt, and use another framework, such as uim and fcitx, for multilingual input.</li>
        <li>To use the Tizen emulator, install an Intel VTx supported by the CPU, and the latest version of the graphic card driver provided by the vendor. Check the prerequisites for the Tizen emulator from <a href="https://developer.tizen.org/development/tools/download/installing-sdk/prerequisites" target="_blank">Prerequisites for the Tizen SDK</a>.
                <ul>
                <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select &quot;High Speed NVIDIA Processor&quot; as &quot;Preferred Graphics processor&quot; in the Nvidia&reg; control panel.</li>
-               <li>On Ubuntu, if the graphics driver is out-of-date, your Ubuntu desktop session can be occasionally logged out when launching the Emulator Manager, or the Emulator skin can be drawn improperly. Check the prerequisites and upgrade to the latest graphics driver.</li>
+               <li>On Ubuntu, if the graphics driver is out-of-date, your Ubuntu desktop session can be occasionally logged out when launching the Emulator Manager, or the emulator skin can be drawn improperly. Check the prerequisites and upgrade to the latest graphics driver.</li>
                </ul>
        </li>
        <li>On Ubuntu 14.04, a shortcut menu can sometimes appear transparent.</li>
-       <li>On Windows&reg;, depending on your OS theme (such as Non-Aero themes and Windows XP themes), a display surface can be erased for a while if the Emulator window is covered with another window. If you click the Emulator window, the display surface runs correctly again.</li>
-       <li>On Windows&reg;, if a &#39;failed to allocate memory&#39; error occurs while executing the Emulator, try the following:
+       <li>On Windows&reg;, depending on your OS theme (such as Non-Aero themes and Windows XP themes), a display surface can be erased for a while if the emulator window is covered with another window. If you click the emulator window, the display surface runs correctly again.</li>
+       <li>On Windows&reg;, if a &#39;failed to allocate memory&#39; error occurs while executing the emulator, try the following:
                <ul>
-               <li>Close some other programs and try to launch the Emulator again.</li>
+               <li>Close some other programs and try to launch the emulator again.</li>
                <li>If the RAM size is set to 768 or 1024 MB for the VM in the Emulator Manager, change it to 512 MB.</li>
-               <li>Increase the user area of the virtual memory in the system to 3 GB by entering the <span style="font-family: Courier New,Courier,monospace">bcdedit /set increaseuserva 3072</span> command on the console with administrator rights (Windows&reg; 7 only), and reboot.</li>
+               <li>Increase the user area of the virtual memory in the system to 3 GB by entering the <code>bcdedit /set increaseuserva 3072</code> command on the console with administrator rights (Windows&reg; 7 only), and reboot.</li>
                </ul>
        </li>
-       <li>If you use a MacBook Pro which has both Intel HD and Nvidia GPUs, when you execute the Emulator with the <strong>OpenGL ES ver. v1.1 &amp; v2.0</strong> option, the Emulator can be unexpectedly terminated. Use the <strong>OpenGL ES ver. v2.0 &amp; v3.0</strong> option.</li>
+       <li>If you use a MacBook Pro which has both Intel HD and Nvidia GPUs, when you execute the emulator with the <strong>OpenGL ES ver. v1.1 &amp; v2.0</strong> option, the emulator can be unexpectedly terminated. Use the <strong>OpenGL ES ver. v2.0 &amp; v3.0</strong> option.</li>
        </ul>
 </li>
 <li>SDB
        <ul>
-       <li>To use the SDB bash completion feature, enter the <span style="font-family: Courier New,Courier,monospace">source .sdb-complete.bash</span> command on the bash shell. The feature runs manually from the official Tizen 2.4 release onwards due to the Installer and Update Manager issue.</li>
+       <li>To use the SDB bash completion feature, enter the <code>source .sdb-complete.bash</code> command on the bash shell. The feature runs manually from the official Tizen 2.4 release onwards due to the Installer and Update Manager issue.</li>
        </ul>
 </li>
 </ul>
index c5a8a0e..cf8b322 100644 (file)
@@ -52,7 +52,7 @@
 
 <p>The package repository is a server which stores all the packages that you are using or will use in the Tizen Studio. Using the Package Manager, you can install or update packages from that repository. Rather than providing a single repository for the main SDK, several CDNs (Content Delivery Networks) are offered around the globe for your convenience. You can select the nearest package repository to install or update packages more quickly.</p>
 
-<p class="figure">Figure: Configuration window with the Package Repository selected</p> 
+<p align="center"><strong>Figure: Configuration window with the Package Repository selected</strong></p> 
 <p align="center"><img alt="Configuration window with the Package Repository selected" src="../images/advanced_conf_server.png" /></p>
 
 <p>To set the package repository:</p>
 <li>Click <strong>OK</strong> to confirm your setting.</li>
 </ol>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If you switch off the <strong>Auto Update</strong> option and select an earlier snapshot than the snapshot you are currently using, entire packages are removed to guarantee system integrity among the packages. Pay attention to that before you select and confirm the use of an earlier snapshot.</td>
-    </tr>
-   </tbody>
-  </table>
-
+<div class="note">
+    <strong>Note</strong>
+    If you switch off the <strong>Auto Update</strong> option and select an earlier snapshot than the snapshot you are currently using, entire packages are removed to guarantee system integrity among the packages. Pay attention to that before you select and confirm the use of an earlier snapshot.
+</div>
 
 <h3>Configuring the SDK Image</h3>
 
 <p>To install or update packages with the SDK image:</p>
 
-<p class="figure">Figure: Configuration window with the SDK Image selected</p> 
+<p align="center"><strong>Figure: Configuration window with the SDK Image selected</strong></p> 
 <p align="center"><img alt="Configuration window with the SDK Image selected" src="../images/advanced_conf_image.png" /></p>
 
 <ol>
 <li>Click <strong>OK</strong> to confirm your setting.</li>
 </ol>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the SDK image distribution ID is different compared to the current packages&#39; distribution ID, entire packages are removed to guarantee system integrity. Pay attention to that before installing or updating packages with an image file.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    If the SDK image distribution ID is different compared to the current packages&#39; distribution ID, entire packages are removed to guarantee system integrity. Pay attention to that before installing or updating packages with an image file.
+</div>
   
 <h2 id="extension">Configuring the Extension SDK Repository</h2>
 
 <p>The Tizen Studio supports extension packages from the extension repositories, which are developed and managed by external developers and companies. To configure the extension SDK, you must unfold the configuration dialog by clicking the <img alt="Extension SDK button icon" src="../images/advanced_conf_icon_extension.png" /> extension SDK icon at the bottom of the dialog box. To move up to the package repository configuration, click the <img alt="Extension SDK button icon active" src="../images/advanced_conf_icon_extension_active.png" /> extension SDK icon again or scroll up.</p>
 
-<p class="figure">Figure: Configuration window with the Extension SDK unfolded</p> 
+<p align="center"><strong>Figure: Configuration window with the Extension SDK unfolded</strong></p> 
 <p align="center"><img alt="Configuration window with the Extension SDK unfolded" src="../images/advanced_conf_extension.png" /></p>
 
 <h3>Adding an Extension Repository</h3>
 <li>Click <strong>OK</strong> to confirm.</li>
 </ol>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the extension repository is deactivated, the packages from that repository are no longer shown in the Package Manager. However, if you activate the extension repository, the packages are shown in the Package Manager again.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    If the extension repository is deactivated, the packages from that repository are no longer shown in the Package Manager. However, if you activate the extension repository, the packages are shown in the Package Manager again.
+</div>
 
 <h2 id="proxy">Configuring the Proxy</h2>
 <p>The Package Manager provides the network option to configure a proxy to connect to repository servers. To set the proxy:</p>
index 8c70599..d471965 100644 (file)
@@ -34,7 +34,7 @@
 
  <h1>Download</h1>
 
-<p>The Tizen Studio is a comprehensive set of tools for developing Tizen native and Web applications. It consists of an IDE, Emulator, toolchain, sample code, and documentation. Tizen Studio runs on Windows&reg; and Ubuntu, as well as Mac OS&reg; X. Tizen applications can be developed without relying on the official Tizen Studio, as long as the application complies with the Tizen packaging rules.</p>
+<p>The Tizen Studio is a comprehensive set of tools for developing Tizen native and Web applications. It consists of an IDE, emulator, toolchain, sample code, and documentation. Tizen Studio runs on Windows&reg; and Ubuntu, as well as Mac OS&reg; X. Tizen applications can be developed without relying on the official Tizen Studio, as long as the application complies with the Tizen packaging rules.</p>
 
 
 <p>For installation instructions, see <a href="installing_sdk.htm">Installing Tizen Studio</a>. For more information, see <a href="1_0_1_release_notes.htm">Release Notes</a>.</p>
index fdc0f7c..85aaa7d 100644 (file)
    <li>At least 1 GB of available memory (2 GB or more is preferred)</li> 
 </ul>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Important</th>
-    </tr>
-    <tr>
-     <td class="note">Intel&reg; HAXM can only be used on systems with an Intel processor which supports the Intel VT.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Important</strong>
+    Intel&reg; HAXM can only be used on systems with an Intel processor which supports the Intel VT.
+</div>
 
 <p id="on_Windows"></p>
 <h2>Installing Intel&reg; HAXM on Windows&reg;</h2>
@@ -63,8 +57,8 @@
 <p><strong>HAXM is installed automatically as part of the Tizen Studio</strong>. If you want to install the HAXM individually, visit <a href="http://download.tizen.org/sdk/haxm/6.0.1/win/" target="_blank">http://download.tizen.org/sdk/haxm/6.0.1/win/</a> and download the Windows installer package.
 </p>
 
+<p align="center" class="Table"><strong>Table: Windows installer package</strong></p>
 <table>
-<caption>Table: Windows installer package</caption>
 <tbody>
 <tr>
  <th>Windows installer</th>
    
    <p>The installer also functions as a configuration tool for Intel&reg; HAXM. To change the memory settings later on, run the installer again.</p>
    
-   <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If you change the Intel&reg; HAXM memory settings for the emulator, you must restart the Intel&reg; HAXM and the emulator. Currently running emulator continues to use the previous memory setting.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    If you change the Intel&reg; HAXM memory settings for the emulator, you must restart the Intel&reg; HAXM and the emulator. Currently running emulator continues to use the previous memory setting.
+</div>
    </li>
    <li>Confirm your Intel&reg; HAXM memory allocation settings and click <strong>Install</strong>.
    <p align="center"> <img alt="Confirm installation" src="../images/hardware_instal.png" /> </p>
@@ -128,33 +116,23 @@ sc query intelhaxm
 <p>To start or stop Intel&reg; HAXM, open the Command Prompt window with administrator privileges and execute one of the following commands:</p>
 
 <ul> 
-   <li>Start HAXM: <span style="font-family: Courier New,Courier,monospace">sc start intelhaxm</span></li>
-   <li>Stop HAXM: <span style="font-family: Courier New,Courier,monospace">sc stop intelhaxm</span></li>
+   <li>Start HAXM: <code>sc start intelhaxm</code></li>
+   <li>Stop HAXM: <code>sc stop intelhaxm</code></li>
 </ul>
 
 <h3>Removing Intel HAXM</h3>
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Warning</th>
-    </tr>
-    <tr>
-     <td class="note">Close all instances of the Tizen emulator before removing the Intel&reg; HAXM.</td>
-    </tr>
-   </tbody>
-  </table>
+
+<div class="note">
+    <strong>Warning</strong>
+    Close all instances of the Tizen emulator before removing the Intel&reg; HAXM.
+</div>
 
 <p>To uninstall the Intel&reg; HAXM, run the installer again or use the Control Panel.</p>
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Important</th>
-    </tr>
-    <tr>
-     <td class="note">If you remove the Intel&reg; HAXM, the acceleration of all Tizen emulators is disabled, but the Tizen emulator still works. If you install the Intel&reg; HAXM again, the acceleration is re-enabled.</td>
-    </tr>
-   </tbody>
-  </table>
+
+<div class="note">
+    <strong>Important</strong>
+    If you remove the Intel&reg; HAXM, the acceleration of all Tizen emulators is disabled, but the Tizen emulator still works. If you install the Intel&reg; HAXM again, the acceleration is re-enabled.
+</div>
 
 <h3>Troubleshooting</h3>
 <p>If you meet an installation failure because of hardware requirements, check the BIOS/OS settings:</p>
@@ -178,8 +156,8 @@ sc query intelhaxm
 <p>Supported Mac OS&reg; versions: 10.10 Yosemite (64-bit), 10.9 Mavericks (64-bit), 10.8 Mountain Lion (64-bit)</p>
 <p><strong>HAXM is installed automatically as part of the Tizen Studio.</strong> If you want to install the HAXM individually, visit <a href="http://download.tizen.org/sdk/haxm/6.0.1/mac/" target="_blank">http://download.tizen.org/sdk/haxm/6.0.1/mac/</a> and download the Mac installer package.</p>
 
+<p align="center" class="Table"><strong>Table: Windows installer package</strong></p>
 <table>
-<caption>Table: Windows installer package</caption>
 <tbody>
 <tr>
  <th>Mac installer</th>
index 8ab143b..1f6d592 100644 (file)
@@ -54,7 +54,7 @@
 <p>Accepting the Tizen Studio software license is the first step in installing the Tizen Studio. Since the license contains important legal notifications for using the Tizen Studio, it is recommended to read it line by line, and click <strong>Accept</strong> only when you agree with the license statement.
 </p>
 
-<p class="figure">Figure: Tizen Studio License Agreement</p> 
+<p align="center"><strong>Figure: Tizen Studio License Agreement</strong></p> 
 <p align="center"><img alt="Tizen Studio License Agreement" src="../images/install_sdk_license.png" /></p>
 
 <h2 id="Configuring">Configuring the Installation Directory</h2>
@@ -62,7 +62,7 @@
 <p>Basically, the installer is installed in the location specified in the installation settings step. You can install the Tizen Studio and its data directory where you want. To change the directory, click <strong>Browse</strong> and specify a new directory. If the new directory is valid, click <strong>Install</strong> at the bottom of the installer.</p>
 
 
-<p class="figure">Figure: Configuring the installation directory</p> 
+<p align="center"><strong>Figure: Configuring the installation directory</strong></p> 
 <p align="center"><img alt="Configuring the installation directory" src="../images/install_sdk_directory.png" /></p>
 
 <h2 id="Installing">Installing the Tizen Studio</h2>
 
 <ul>
 <li>On Microsoft Windows&reg;, the command prompt opens and the installer is automatically executed.</li>
-<li>On Ubuntu and Mac OS&reg; X, open the terminal, go to the directory where the installer is downloaded, and enter the <span style="font-family: Courier New,Courier,monospace">chmod +x</span> command to apply the execute permission to the installer file. Then, execute the installer by entering the command based on the following syntax:
+<li>On Ubuntu and Mac OS&reg; X, open the terminal, go to the directory where the installer is downloaded, and enter the <code>chmod +x</code> command to apply the execute permission to the installer file. Then, execute the installer by entering the command based on the following syntax:
 <pre class="prettyprint">
 web-cli_Tizen_Studio_&lt;version&gt; [options] [&lt;directory path&gt;]
 </pre>
 
+<p align="center" class="Table"><strong>Table: Install options</strong></p>
 <table>
-<caption>Table: Install options</caption>
 <tbody>
 <tr>
  <th>Option</th>
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--show-license</span></td>
+ <td><code>--show-license</code></td>
  <td>Displays the Tizen Studio software license agreement.
  <p>You must use this option alone. Do not use with other options.</p></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--accept-license</span></td>
+ <td><code>--accept-license</code></td>
  <td>Accepts the license terms.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--no-java-check</span></td>
+ <td><code>--no-java-check</code></td>
  <td>Skips the Java version check.</td>
  </tr>
  </tbody></table>
 
+<p align="center" class="Table"><strong>Table: Install command parameters</strong></p>
 <table>
-<caption>Table: Install command parameters</caption>
 <tbody>
 <tr>
  <th>Parameter</th>
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">directory path</span></td>
+ <td><code>directory path</code></td>
  <td>Specifies the installation directory path.
- <p>If you do not enter the path, the Tizen Studio is installed in the default directory (<span style="font-family: Courier New,Courier,monospace">/home/{user}/tizen-studio</span>).</p></td>
+ <p>If you do not enter the path, the Tizen Studio is installed in the default directory (<code>/home/{user}/tizen-studio</code>).</p></td>
  </tr>
  </tbody></table>
 </li>
@@ -134,16 +134,10 @@ web-cli_Tizen_Studio_&lt;version&gt; [options] [&lt;directory path&gt;]
 <p>The CLI installer begins to install the Web App Development platform and tools on your computer.</p></li>
 </ol>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If you want to develop a native application on the CLI, you must install the Native App Development platform and tools using the CLI Package Manager.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    If you want to develop a native application on the CLI, you must install the Native App Development platform and tools using the CLI Package Manager.
+</div>
 
 <h2 id="cliadd">Installing Additional Packages with the CLI Package Manager</h2>  
 
@@ -153,35 +147,35 @@ web-cli_Tizen_Studio_&lt;version&gt; [options] [&lt;directory path&gt;]
 package-manager-cli install [--accept-license] [--no-java-check] [--proxy &lt;value&gt;] [-f &lt;file path&gt;] [-p &lt;password&gt;] &lt;package name&gt;[,…]
 </pre>
 
+<p align="center" class="Table"><strong>Table: Install command parameters</strong></p>
 <table>
-<caption>Table: Install command parameters</caption>
 <tbody>
 <tr>
  <th>Parameter</th>
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--accept-license</span></td>
+ <td><code>--accept-license</code></td>
  <td>Accepts the license terms.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--no-java-check</span></td>
+ <td><code>--no-java-check</code></td>
  <td>Skips the Java version check.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--proxy &lt;value&gt;</span></td>
+ <td><code>--proxy &lt;value&gt;</code></td>
  <td>Proxy configuration value. Use one of the following values: <strong>direct</strong>, <strong>auto</strong>, or <strong>ip:port</strong>.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-f, --file &lt;file path&gt;</span></td>
+ <td><code>-f, --file &lt;file path&gt;</code></td>
  <td>If you want to install packages from a local SDK image, specify the full path of the SDK image file.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-p, --password &lt;password&gt;</span></td>
+ <td><code>-p, --password &lt;password&gt;</code></td>
  <td>Administrator (sudo) password for authentication. Ubuntu only.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">&lt;package name&gt;[,…]</span></td>
+ <td><code>&lt;package name&gt;[,…]</code></td>
  <td>Name of the package you want to install. You can enter multiple package names (such as <strong>NativeIDE</strong> and <strong>Emulator</strong>).
 <p>To retrieve the names of installable packages, use the following command:</p>
 <pre class="prettyprint">
index 32959b9..114e94c 100644 (file)
@@ -45,8 +45,8 @@
 <h2 id="system">OS and System Requirements</h2>
 <p>The following table lists the supported operating systems and hardware requirements for the Tizen Studio.</p>
 
+<p align="center" class="Table"><strong>Table: OS and system requirements</strong></p>
 <table>
-<caption>Table: OS and system requirements</caption>
 <tbody>
 <tr>
  <th colspan="2"></th>
 
 <p>The following table lists the CPU, screen resolution, graphic card, driver, and webcam requirements for using the Tizen emulator.</p>
 
+<p align="center" class="Table"><strong>Table: Emulator requirements</strong></p>
 <table>
-    <caption>Table: Emulator requirements</caption>
     <tbody>
         <tr>
             <th>Component</th>
         <tr>
             <td>Graphic card</td>
             <td colspan="3">Recommended: The following requirements have passed tests with the emulator.
+                <p align="center" class="Table"><strong>Table: Supported graphic cards</strong></p>
                 <table>
-                               <caption>Table: Supported graphic cards</caption>
-                    <tbody>
+                                <tbody>
                         <tr>
                             <th>Brand</th>
                             <th>Product</th>
                         </tr>
                     </tbody>
                 </table>
-                <table class="note">
-                    <tbody>
-                        <tr>
-                            <th class="note">Note</th>
-                        </tr>
-                        <tr>
-                            <td class="note">
-                                <ul>
-                                    <li>If the host machine is using the Nvidia Optimus&trade; technology, the emulator works with the on-board graphics card. To prevent this, either disable the Nvidia Optimus&trade; technology, or set the emulator to run with the external Nvidia graphics card.</li>
-                                    <li>Integrated graphic cards inside Intel&#39;s Q33/Q35/Q43/Q45 motherboards are not supported.</li>
-                                    <li>First generation Intel HD Graphics is not supported.</li>
-                                </ul>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+<div class="note">
+    <strong>Note</strong>
+<ul>
+       <li>If the host machine is using the Nvidia Optimus&trade; technology, the emulator works with the on-board graphics card. To prevent this, either disable the Nvidia Optimus&trade; technology, or set the emulator to run with the external Nvidia graphics card.</li>
+       <li>Integrated graphic cards inside Intel&#39;s Q33/Q35/Q43/Q45 motherboards are not supported.</li>
+       <li>First generation Intel HD Graphics is not supported.</li>
+</ul>
+</div>
             </td>
         </tr>
         <tr>
 
 <p>The following table lists the additional requirements to be met before developing Tizen applications.</p>
 
+<p align="center" class="Table"><strong>Table: Additional Microsoft Windows&reg; requirements</strong></p>
 <table>
-    <caption>Table: Additional Microsoft Windows&reg; requirements</caption>
     <tbody>
         <tr>
             <th>Component</th>
                     <li>On the <a href="https://www.python.org/downloads/" target="_blank">Python Web site</a>, download the appropriate Python version for your hardware and Windows&reg; version.</li>
                     <li>Run the downloaded installer file and follow the displayed instructions.</li>
                 </ol>
-                <table class="note">
-                    <tbody>
-                        <tr>
-                            <th class="note">Note</th>
-                        </tr>
-                        <tr>
-                            <td class="note">To use Python conveniently at the command prompt, set the <span style="font-family: Courier New,Courier,monospace">%PATH%</span> environment variable in <strong>My Computer &gt; Properties &gt; Advanced &gt; Environment Variables</strong>.</td>
-                        </tr>
-                    </tbody>
-                </table>
+<div class="note">
+    <strong>Note</strong>
+    To use Python conveniently at the command prompt, set the <code>%PATH%</code> environment variable in <strong>My Computer &gt; Properties &gt; Advanced &gt; Environment Variables</strong>.
+</div>
             </td>
         </tr>
     </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Additional Mac OS&reg;X requirements</strong></p>
 <table>
-    <caption>Table: Additional Mac OS&reg;X requirements</caption>
     <tbody>
         <tr>
             <th>Component</th>
             <th>Requirement</th>
         </tr>
         <tr>
-            <td>Prerequisite packages (<span style="font-family: Courier New,Courier,monospace">msgfmt</span>) for build PO files</td>
+            <td>Prerequisite packages (<code>msgfmt</code>) for build PO files</td>
             <td>At the terminal prompt, enter the following commands:
                        <pre class="prettyprint">
 $ brew install gettext
@@ -250,23 +236,17 @@ $ brew link gettext â€“force
 $ which msgfmt
 /usr/local/bin/msgfmt
 </pre>
-                <table class="note">
-                    <tbody>
-                        <tr>
-                            <th class="note">Note</th>
-                        </tr>
-                        <tr>
-                            <td class="note">To install Homebrew, see the <a href="http://brew.sh/" target="_blank">Brew Web site</a>.</td>
-                        </tr>
-                    </tbody>
-                </table>
+<div class="note">
+    <strong>Note</strong>
+    To install Homebrew, see the <a href="http://brew.sh/" target="_blank">Brew Web site</a>.
+</div>
             </td>
         </tr>
     </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Additional Ubuntu requirements</strong></p>
 <table>
-    <caption>Table: Additional Ubuntu requirements</caption>
     <tbody>
         <tr>
             <th>Component</th>
@@ -309,4 +289,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
index 4d58c21..e29a977 100644 (file)
 (From Tizen SDK to Tizen Studio)</h1>
 <p>This topic gives instructions for migrating your old Tizen SDK to the Tizen Studio. If you follow the instructions, your development environment is migrated without problems and you can start developing with the new Tizen Studio.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note"><ul> 
-   <li>If the Tizen certificates (author and distributor) are removed during the uninstallation, you cannot issue the same ones again to update your existing applications. Back up your certificates!</li>
-   <li>Your projects used in the Tizen SDK can be imported to the Tizen Studio. Do not uninstall the Tizen SDK before you have imported them to the Tizen Studio after a successful installation.</li>
-   <li>Emulator images made in the Tizen SDK cannot be migrated to the Tizen Studio. After installing the Tizen Studio, you can make a new emulator for each platform.</li>
-</ul></td>
-    </tr>
-   </tbody>
-  </table>
-
-
+<div class="note">
+    <strong>Note</strong>
+<ul> 
+<li>If the Tizen certificates (author and distributor) are removed during the uninstallation, you cannot issue the same ones again to update your existing applications. Back up your certificates!</li>
+<li>Your projects used in the Tizen SDK can be imported to the Tizen Studio. Do not uninstall the Tizen SDK before you have imported them to the Tizen Studio after a successful installation.</li>
+<li>Emulator images made in the Tizen SDK cannot be migrated to the Tizen Studio. After installing the Tizen Studio, you can make a new emulator for each platform.</li>
+</ul>
+</div>
 
 <p>To migrate from the Tizen SDK to the Tizen Studio:</p>
 
@@ -71,7 +63,7 @@
 </ol>
 
 <h2 id="Backing_up_Certificates">Backing up Certificates</h2>
-<p>Backing up your author (<span style="font-family: Courier New,Courier,monospace">author.p12</span>) and distributor (<span style="font-family: Courier New,Courier,monospace">distributor.p12</span>) certificates is a very important process for maintaining your applications.</p>
+<p>Backing up your author (<code>author.p12</code>) and distributor (<code>distributor.p12</code>) certificates is a very important process for maintaining your applications.</p>
 <p>When you update your applications, which are already published at the seller site (<a href="http://seller.samsungapps.com" target="_blank">seller.samsungapps.com</a>), the update must be signed with the same author certificate as the original application. If the applications are signed with different author certificates, the update can be recognized as a different application and not an update.</p>
 <p>Back up the certificates in your own secure place. (When you delete the existing Tizen SDK, the certificates can be removed in the process.)</p>
 <p>To keep your certificates safe, find your author and distributor certificates in the following directory, and move them to other safe location:</p>
 <ul>
 <li>Ubuntu and Mac OS&reg; X:
        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">/home/&lt;user&gt;/&lt;TIZEN-SDK-DATA&gt;/keystore/author.p12</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">/home/&lt;user&gt;/&lt;TIZEN-SDK-DATA&gt;/keystore/distributor.p12</span></li>
+               <li><code>/home/&lt;user&gt;/&lt;TIZEN-SDK-DATA&gt;/keystore/author.p12</code></li>
+               <li><code>/home/&lt;user&gt;/&lt;TIZEN-SDK-DATA&gt;/keystore/distributor.p12</code></li>
        </ul>
 </li>
 <li>Windows&reg;: 
        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">C:\&lt;TIZEN-SDK-DATA&gt;\keystore\author.p12</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">C:\&lt;TIZEN-SDK-DATA&gt;\keystore\distributor.p12</span></li>
+               <li><code>C:\&lt;TIZEN-SDK-DATA&gt;\keystore\author.p12</code></li>
+               <li><code>C:\&lt;TIZEN-SDK-DATA&gt;\keystore\distributor.p12</code></li>
        </ul>
 </li>
 </ul>
 
 <h2 id="Installing_Tizen_Studio">Installing the Tizen Studio</h2>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Make sure that your installation location is empty.</td> 
-    </tr> 
-   </tbody> 
-</table>
+<div class="note">
+    <strong>Note</strong>
+    Make sure that your installation location is empty.
+</div>
 
 <p>To install Tizen Studio:</p>
 <ol> 
 <h2 id="Importing_Projects_to_Tizen_Studio">Importing Projects to the Tizen Studio</h2>
 <p>To import previous Tizen SDK projects (Tizen SDK) to new Tizen Studio projects (Tizen Studio): </p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">These instructions assume that you want to import wearable 2.3.1 projects (created by the Tizen SDK) to the Tizen Studio.</td> 
-    </tr> 
-   </tbody> 
-</table>
+<div class="note">
+    <strong>Note</strong>
+    These instructions assume that you want to import wearable 2.3.1 projects (created by the Tizen SDK) to the Tizen Studio.
+</div>
 
 <ol> 
    <li>Launch the Tizen Studio from <strong>Start &gt; Tizen Studio &gt; Tizen Studio</strong>.
    <p align="center"> <img alt="Launch Tizen Studio" src="../images/migration_launch_tizen.png" /> </p>
    </li>
    <li>Create a new workspace.
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Reusing the existing workspace is not recommended.</td> 
-    </tr> 
-   </tbody> 
-</table>
+<div class="note">
+    <strong>Note</strong>
+    Reusing the existing workspace is not recommended.
+</div>
    <p align="center"> <img alt="Select a workspace" src="../images/migration_select_work.png" /> </p>
    </li>
    <li>In the Tizen Studio menu, go to <strong>File &gt; Import</strong>.</li>
 <ul>
 <li>Ubuntu and Mac OS&reg; X:
        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">/home/&lt;user&gt;/&lt;TIZEN_SDK&gt;</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">/home/&lt;user&gt;/&lt;TIZEN_SDK_DATA&gt;</span></li>
+               <li><code>/home/&lt;user&gt;/&lt;TIZEN_SDK&gt;</code></li>
+               <li><code>/home/&lt;user&gt;/&lt;TIZEN_SDK_DATA&gt;</code></li>
        </ul>
 </li>
 <li>Windows&reg;: 
        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">C:\&lt;TIZEN_SDK&gt;</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">C:\&lt;TIZEN_SDK_DATA&gt;</span></li>
+               <li><code>C:\&lt;TIZEN_SDK&gt;</code></li>
+               <li><code>C:\&lt;TIZEN_SDK_DATA&gt;</code></li>
        </ul>
 </li>
 </ul>
 
-<p>Your Tizen authorization files (author and distributor certificates) exist in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;</span> directory. You cannot update your existing applications on the Tizen seller site if you delete these files without backing them up first.</p>
+<p>Your Tizen authorization files (author and distributor certificates) exist in the <code>&lt;TIZEN_STUDIO&gt;</code> directory. You cannot update your existing applications on the Tizen seller site if you delete these files without backing them up first.</p>
 <p>Some components do not get deleted automatically without further actions (such as shortcuts and install logs).</p>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
index dea71d0..a6dbf39 100644 (file)
@@ -47,7 +47,7 @@
 <h2 id="Selecting_the_Directories_to_Keep">Selecting the Directories to Keep</h2>
 <p>The first step is to select the components to uninstall. By unchecking the <strong>SDK data</strong> or <strong>Keystore</strong> components, you can keep the SDK data or keystore files in each directory for future re-use.</p>
 
-<p class="figure">Figure: Uninstaller selections</p> 
+<p align="center"><strong>Figure: Uninstaller selections</strong></p> 
 <p align="center"> <img alt="Uninstaller selections" src="../images/uninstall_sdk_selection.png" /> </p>
 
 <h3>SDK Data Directory</h3>
@@ -59,7 +59,7 @@
 <h2 id="Uninstalling_the_Tizen_Studio">Uninstalling the Tizen Studio</h2>
 <p>Once you click <strong>Uninstall</strong>, the uninstaller removes all the platforms and tools that you have installed, as well as data and files you have created. Note that you cannot cancel the uninstallation or restore the files after the uninstallation. Thus, make sure to back up data and files before clicking <strong>Uninstall</strong>.</p>
 
-<p class="figure">Figure: Uninstallation</p> 
+<p align="center"><strong>Figure: Uninstallation</strong></p> 
 <p align="center"> <img alt="Uninstallation" src="../images/uninstall_sdk_progress.png" /> </p>
 
 
 package-manager-cli uninstall [-p &lt;password&gt;] &lt;package name&gt;[,…] | [--all]
 </pre>
 
+<p align="center" class="Table"><strong>Table: Uninstall command parameters</strong></p>
 <table>
-<caption>Table: Uninstall command parameters</caption>
 <tbody>
 <tr>
  <th>Parameter</th>
  <th>Description</th>
 </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-p, --password &lt;password&gt;</span></td>
+ <td><code>-p, --password &lt;password&gt;</code></td>
  <td>Administrator (sudo) password for authentication. Ubuntu only.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--all</span></td>
+ <td><code>--all</code></td>
  <td>Uninstalls the entire Tizen Studio with tools and platforms, including user-created data, emulator images, and settings.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">&lt;package name&gt;[,…]</span></td>
+ <td><code>&lt;package name&gt;[,…]</code></td>
  <td>Name of the package you want to uninstall. You can enter multiple package names (such as <strong>NativeIDE</strong> and <strong>Emulator</strong>).
 <p>To retrieve the names of uninstallable packages, use the following command:</p>
 <pre class="prettyprint">
index 9427a8c..b107d70 100644 (file)
@@ -56,7 +56,7 @@
 <p>The Package Manager is composed of 3 main tabs: <strong>Main SDK</strong>, <strong>Extension SDK</strong>, and <strong>Progress</strong>.</p>
 
 <ul> 
-   <li>In the <strong>Main SDK</strong> tab, you can manage platforms, Emulators, and other advanced tools.</li>
+   <li>In the <strong>Main SDK</strong> tab, you can manage platforms, emulators, and other advanced tools.</li>
    <li>In the <strong>Extension SDK</strong> tab, you can install and remove extension SDKs, such as the Certification Extension and other extra packages for platforms.</li>
    <li>In the <strong>Progress</strong> tab, you can monitor the progress of installing, removing, and updating packages. You can also cancel the process while the packages are installing or updating.</li>
 </ul>
@@ -74,7 +74,7 @@
    <li>On Ubuntu, select <strong>Dashboard Home &gt; Package Manager</strong>.</li>
 </ul>
 
-<p class="figure">Figure: Package Manager main window</p> 
+<p align="center"><strong>Figure: Package Manager main window</strong></p> 
 <p align="center"><img alt="Package Manager main window" src="../images/updating_sdk_main.png" /></p>
 
 <h3>Looking Around the Package Manager</h3>
    <li>Under the 3 tabs, there are the <img alt="Profile filter button icons" src="../images/updating_sdk_icon_filter.png" /> profile filter buttons in the left-most side. By turning each filter on or off, you can filter the package list based on the profile. Right to the filter buttons, there is a <strong>View installed packages</strong> check box. This option includes only the installed packages in the profile list. At the right-most side, the <strong>Update available</strong> icon appears only when there are updates available for the installed packages.</li>
 </ul>
 
-<p class="figure">Figure: Main area</p>
+<p align="center"><strong>Figure: Main area</strong></p>
 <p align="center"><img alt="Main area" src="../images/updating_sdk_main_area.png" /></p>
 
 <p>When you click a platform or package in the list, you can see its detailed description.</p>
 
-<p class="figure">Figure: Description area</p>
+<p align="center"><strong>Figure: Description area</strong></p>
 <p align="center"><img alt="Description area" src="../images/updating_sdk_description.png" /></p>
 
 <h2 id="Updating_Packages">Updating Packages</h2>
 
 <p>After you have installed the Tizen Studio using the Installer, there can be updates available of the installed packages. If you are connected to the network, the <img alt="Update icon" src="../images/updating_sdk_icon_update.png" /> <strong>Updates available</strong> button appears as shown in the following figure. Click <strong>Updates available</strong> to update all the packages you have installed. For securing the system integrity among all packages in the Tizen Studio, the Package Manager does not support updating individual packages.</p>
 
-<p class="figure">Figure: Update icon enabled</p>
+<p align="center"><strong>Figure: Update icon enabled</strong></p>
 <p align="center"><img alt="Update icon enabled" src="../images/updating_sdk_updates.png" /></p>
 
 <p>If you are using the Tizen Studio offline, you can update the packages with an image file. To install a package with the image file:</p>
 <li>Click <strong>OK</strong> at the bottom of the dialog. The <strong>Update available</strong> button appears after the platforms and tools of the image file are re-loaded. Now, you can update and install additional platforms and tools with the image file.</li>
 </ol>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Make sure that the image file includes a newer Tizen Studio than the current one before updating and installing with the image file.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    Make sure that the image file includes a newer Tizen Studio than the current one before updating and installing with the image file.
+</div>
 
 <h2 id="Installing_Additional_Packages">Installing Additional Packages</h2>
 
 <p>Installing additional platforms and tools is simple. In the <strong>Main SDK</strong> and <strong>Extension SDK</strong> tabs, there is a list of platforms and tools. If you want to install a specific platform, just click the <img alt="Install icon" src="../images/updating_sdk_icon_install.png" /> install icon next to that platform. The Package Manager installs all tools and packages that are required for the platform.</p>
 
-<p class="figure">Figure: Installing platform packages</p>
+<p align="center"><strong>Figure: Installing platform packages</strong></p>
 <p align="center"><img alt="Installing platform packages" src="../images/updating_sdk_install_platform.png" /></p>
 
 <p>Likewise, when you want to install a single package, you need to unfold the list of a specific platform, and click the install icon next to the package that you want to install. While installing the package, you can install more packages by clicking the install icon next to any package. Once you click the install icon on a platform or a package, you can check the progress of the installation in the <strong>Progress</strong> tab.</p>
 <h3>Canceling and Retrying Installation</h3>
 <p>While installing the packages, you can cancel the installation. To cancel the installation, go to the <strong>Progress</strong> tab while the packages are installing. In the <strong>Progress</strong> tab, you can see the installation progress and the <img alt="Cancel icon" src="../images/updating_sdk_icon_cancel.png" /> cancel icon next to each package. To cancel any package installation, click the cancel icon. Note that canceling the installation of a single package can cancel the installation of other packages due to their dependencies.</p>
 
-<p class="figure">Figure: Canceling the installation</p>
+<p align="center"><strong>Figure: Canceling the installation</strong></p>
 <p align="center"><img alt="Canceling the installation" src="../images/updating_sdk_install_cancel.png" /></p>
 
 <p>After you have canceled the installation, the <img alt="Retry icon" src="../images/updating_sdk_icon_retry.png" /> retry icon appears next to the packages in the <strong>Progress</strong> tab. If you want to try re-installing the package, click the retry icon. According to what you choose to reinstall, the Package Manager may install some packages together because of their dependencies.</p>
 
 <p>Removing the installed packages is as simple as installing. After a package is already installed, the install icon next to the package changes to the <img alt="Remove icon" src="../images/updating_sdk_icon_remove.png" /> remove icon. As when installing packages, removing an individual package can cause some other dependent packages to be removed. You can monitor the removal progress of packages. However, unlike the installation, you cannot cancel the removal process because it may break the integrity of the Tizen Studio.</p>
 
-<p class="figure">Figure: Removing packages</p>
+<p align="center"><strong>Figure: Removing packages</strong></p>
 <p align="center"><img alt="Removing packages" src="../images/updating_sdk_install_remove.png" /></p>
 
 <h2 id="Monitoring_the_Progress">Monitoring the Progress</h2>
 
 <p>You cannot cancel package removal.</p>
 
-<p class="figure">Figure: Progress tab</p>
+<p align="center"><strong>Figure: Progress tab</strong></p>
 <p align="center"><img alt="Progress tab" src="../images/updating_sdk_progress.png" /></p>
 
 <h2 id="cli_package_manager">Updating with the CLI Package Manager</h2>
 package-manager-cli update [--accept-license] [--no-java-check] [--proxy &lt;value&gt;] [-f &lt;file path&gt;] [-p &lt;password&gt;] [--latest]
 </pre>
 
+<p align="center" class="Table"><strong>Table: Update command parameters</strong></p>
 <table>
-<caption>Table: Update command parameters</caption>
 <tbody>
 <tr>
  <th>Parameter</th>
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--accept-license</span></td>
+ <td><code>--accept-license</code></td>
  <td>Accepts the license terms.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--no-java-check</span></td>
+ <td><code>--no-java-check</code></td>
  <td>Skips the Java version check.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--proxy &lt;value&gt;</span></td>
+ <td><code>--proxy &lt;value&gt;</code></td>
  <td>Proxy configuration value. Use one of the following values: <strong>direct</strong>, <strong>auto</strong>, or <strong>ip:port</strong>.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-f, --file &lt;file path&gt;</span></td>
+ <td><code>-f, --file &lt;file path&gt;</code></td>
  <td>If you want to install packages from a local SDK image, specify the full path of the SDK image file.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">-p, --password &lt;password&gt;</span></td>
+ <td><code>-p, --password &lt;password&gt;</code></td>
  <td>Administrator (sudo) password for authentication. Ubuntu only.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">--latest</span></td>
+ <td><code>--latest</code></td>
  <td>This option is only useful to update the Tizen Studio to the latest version after you downgraded it manually to an earlier version. Otherwise, the Package Manager updates it to the latest version with or without this option.</td>
  </tr>
  </tbody></table>
index 46ca2cd..dd59e1e 100644 (file)
 <p>In the <strong>Project Explorer</strong> view, right-click the project on which you want to run the API Checker and select <strong>Check API and Privilege Violations with Build</strong>.</p>
 <p>The project is automatically built and the API Checker is run during the build process.</p>
 
-<p class="figure">Figure: Running the API Checker</p>
+<p align="center"><strong>Figure: Running the API Checker</strong></p>
 <p align="center"><img src="../images/api_checker_run.png" alt="Running the API Checker" /></p>
 
 <p>When the API Checker is finished, the detected issues are listed in the <strong>Problems</strong> view under the <strong>API and Privilege Violations</strong> type. The view contains a detailed description of the issue along with the file and line information about where the error occurred.</p>
 
-<p class="figure">Figure: Check results in the Problems view</p>
+<p align="center"><strong>Figure: Check results in the Problems view</strong></p>
 <p align="center"><img src="../images/api_checker_result.png" alt="Results in the Problems view" /></p>
 
        <h2 id="custom">Customizing the API Checker</h2>
 
 <p>You can quick fix some of the issues found by the API Checker, such as use of the undefined and unused privileges.</p>
 
-<table class="note">
-<tbody>
-       <tr>
-       <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">The deprecated APIs and version mismatch issues cannot be quick fixed. You must fix them manually.</td>
-       </tr>
-</tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    The deprecated APIs and version mismatch issues cannot be quick fixed. You must fix them manually.
+</div>
 
 <p>To quick fix issues:</p>
 <ol>
index 0e9514a..f97af64 100644 (file)
 <div id="container"><div id="contents"><div class="content">
   <h1>Getting Crash Data from Call Stack View</h1> 
   <p>The <strong>Call Stack</strong> view provides information about a crashed API, call stack, or debug message, when the application crashes while running. Though debugging tools give more detailed information in the debugging state, the <strong>Call Stack</strong> view is a useful tool in the running state.</p> 
-  <p>When the application crashes during running, the Tizen Studio creates a <span style="font-family: Courier New,Courier,monospace">*.cs</span> file in the <span style="font-family: Courier New,Courier,monospace">crash-info</span> folder under the current project and shows the <strong>Call Stack</strong> view automatically. The view can also be opened from the Tizen Studio menu by selecting <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Call Stack</strong>.</p> 
+  <p>When the application crashes during running, the Tizen Studio creates a <code>*.cs</code> file in the <code>crash-info</code> folder under the current project and shows the <strong>Call Stack</strong> view automatically. The view can also be opened from the Tizen Studio menu by selecting <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Call Stack</strong>.</p> 
   <p>The <strong>Call Stack</strong> view has 3 tabs:</p> 
   <ul> 
    <li><strong>Header</strong>: Provides basic information about the crashed application. Select a specific information type from the left pane.
-   <p class="figure">Figure: Header tab</p>
+   <p align="center"><strong>Figure: Header tab</strong></p>
    <p align="center"><img alt="Header tab" src="../images/callstack_header.png" /></p></li> 
    <li><strong>Call Stack Information</strong>: Traces call stack steps to find where the memory block has crashed. If you select a call stack item in the left pane, search result is shown in the right pane.
-   <p class="figure">Figure: Call Stack Information tab</p>
+   <p align="center"><strong>Figure: Call Stack Information tab</strong></p>
    <p align="center"><img alt="Call Stack Information tab" src="../images/callstack_info.png" /></p></li> 
    <li><strong>Debug Message</strong>: Provides the latest debug messages and the filtering function similar to the <strong>Log</strong> view. You can search with keywords filtered by tag, pid, and message.
-   <p class="figure">Figure: Debug Message tab</p>
+   <p align="center"><strong>Figure: Debug Message tab</strong></p>
    <p align="center"><img alt="Debug Message tab" src="../images/callstack_debug.png" /></p></li> 
   </ul> 
   <p>The <strong>Call Stack</strong> view shows information only when the application crashes.</p>  
index dc725b9..44594e9 100644 (file)
 <div id="container"><div id="contents"><div class="content">
  <h1>Managing UI Component Attributes in layout.xml</h1>
 
-<p>This document describes the meta schema of the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> file, which can be used in the native UI Builder. You can edit the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> file through the <a href="ui_builder_n.htm">Source tab</a> of the UI Builder.</p>
+<p>This document describes the meta schema of the <code>layout.xml</code> file, which can be used in the native UI Builder. You can edit the <code>layout.xml</code> file through the <a href="ui_builder_n.htm">Source tab</a> of the UI Builder.</p>
 
 <h2 id="hierarchy">Element Hierarchy of the layout.xml File</h2>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">layout.xml</span> file has a hierarchical organization, which consists of XML elements. The tree structure in the following figure shows the relationship between the elements of the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> file.</p>
+<p>The <code>layout.xml</code> file has a hierarchical organization, which consists of XML elements. The tree structure in the following figure shows the relationship between the elements of the <code>layout.xml</code> file.</p>
 
-<p class="figure">Figure: Elements in the layout.xml file</p> 
+<p align="center"><strong>Figure: Elements in the layout.xml file</strong></p> 
 <p align="center"><img alt="Elements in the layout.xml file" src="../images/component_attributes_layout_xml_elements.png"/></p>
 
-<p>The following example illustrates the content and structure of the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> file. The usage format is <span style="font-family: Courier New,Courier,monospace">&lt;attribute_name=value&gt;</span>.</p>
+<p>The following example illustrates the content and structure of the <code>layout.xml</code> file. The usage format is <code>&lt;attribute_name=value&gt;</code>.</p>
 
 <pre class="prettyprint">
 &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
@@ -88,7 +88,7 @@
 
 <h3>Configuration</h3>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;configuration&gt;</span> element represents a specific screen configuration, as shown in the following example:</p>
+<p>The <code>&lt;configuration&gt;</code> element represents a specific screen configuration, as shown in the following example:</p>
 
 <pre class="prettyprint">
 &lt;mscreen&gt;
 &lt;/mscreen&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;configuration&gt;</span> element is placed as a child of the <span style="font-family: Courier New,Courier,monospace">&lt;mscreen&gt;</span> element. The following attributes are used for all configurations.</p>
+<p>The <code>&lt;configuration&gt;</code> element is placed as a child of the <code>&lt;mscreen&gt;</code> element. The following attributes are used for all configurations.</p>
 
+<p align="center" class="Table"><strong>Table: Common configuration attributes</strong></p>
 <table>
-<caption>Table: Common configuration attributes</caption>
 <tbody>
 <tr>
        <th>Attribute</th>
        <th>Value</th>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+       <td><code>id</code></td>
        <td>Identification for the configuration</td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+       <td><code>name</code></td>
        <td>Name of the display</td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">type</span></td>
+       <td><code>type</code></td>
        <td>Whether the configuration is specific or common</td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">device</span></td>
+       <td><code>device</code></td>
        <td>Supported device:
        <ul>
        <li>Mobile: HD, WVGA</li>
        </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">orientation</span></td>
+       <td><code>orientation</code></td>
        <td>Portrait or landscape</td>
  </tr>
 </tbody>
 
 <h3>Variation</h3>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;variation&gt;</span> element represents a set of the variation properties. The following is an example:</p>
+<p>The <code>&lt;variation&gt;</code> element represents a set of the variation properties. The following is an example:</p>
 
 <pre class="prettyprint">
 &lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;49&quot; weight_h=&quot;1&quot; 
 &lt;/button&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;variation&gt;</span> element is placed as a child of the <span style="font-family: Courier New,Courier,monospace">&lt;UI component&gt;</span> element. The <span style="font-family: Courier New,Courier,monospace">&lt;variation&gt;</span> element has <span style="font-family: Courier New,Courier,monospace">visible</span> and <span style="font-family: Courier New,Courier,monospace">pack</span> attributes. The value of the <span style="font-family: Courier New,Courier,monospace">pack</span> attribute depends on the parent container of the UI component. The following attributes are used for all variations.</p>
+<p>The <code>&lt;variation&gt;</code> element is placed as a child of the <code>&lt;UI component&gt;</code> element. The <code>&lt;variation&gt;</code> element has <code>visible</code> and <code>pack</code> attributes. The value of the <code>pack</code> attribute depends on the parent container of the UI component. The following attributes are used for all variations.</p>
+<p align="center" class="Table"><strong>Table: Variation attributes</strong></p>
 <table>
-<caption>Table: Variation attributes</caption>
 <tbody>
 <tr>
        <th>Attribute</th>
        <th>Value</th>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">config_ref</span></td>
+       <td><code>config_ref</code></td>
        <td>Screen configuration ID</td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
+       <td><code>visible</code></td>
+       <td><code>true</code> or <code>false</code></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">pack_x, pack_y, pack_w, pack_h</span></td>
+       <td><code>pack_x, pack_y, pack_w, pack_h</code></td>
        <td>Absolute coordinates when the parent container is a grid.
        <p>0 ~</p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">pack_col, pack_row, row_span, col_span</span></td>
+       <td><code>pack_col, pack_row, row_span, col_span</code></td>
        <td>Position when the parent container is a table.
-       <p><span style="font-family: Courier New,Courier,monospace">pack_col/pack_row</span>: 0 ~</p> 
-       <p><span style="font-family: Courier New,Courier,monospace">row_span/col_span</span>: 1 ~</p></td>
+       <p><code>pack_col/pack_row</code>: 0 ~</p> 
+       <p><code>row_span/col_span</code>: 1 ~</p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">pack</span></td>
+       <td><code>pack</code></td>
        <td>Position when the parent container is a panes.
-       <p><span style="font-family: Courier New,Courier,monospace">left</span> or <span style="font-family: Courier New,Courier,monospace">right</span></p></td>
+       <p><code>left</code> or <code>right</code></p></td>
  </tr>
 </tbody>
 </table>
 
 <p>By using various UI containers and components in the <strong>Palette</strong> of the native UI Builder, you can create your application UI layout. Each component can be set in various styles. For a detailed list of component styles, see the related guides (<a href="../../../org.tizen.guides/html/native/ui/efl/ui_components_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/ui_components_wn.htm">wearable</a>).</p>
 
-<p class="figure">Figure: Native UI Builder Palette</p> 
+<p align="center"><strong>Figure: Native UI Builder Palette</strong></p> 
 <p align="center"><img alt="Native UI Builder Palette" src="../images/component_attributes_native_palette.png" /></p> 
 
 <h2 id="common_attributes">Component Attributes â€“ Common</h2>
 
 <p>The following attributes are used for all UI components.</p>
 
+<p align="center" class="Table"><strong>Table: Common component attributes</strong></p>
 <table>
-<caption>Table: Common component attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">align_h</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">left, right, center, 0 ~ 1.0</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></td>
+ <td><code>align_h</code></td>
+ <td><code>left, right, center, 0 ~ 1.0</code></td>
+ <td><code>evas_object_size_hint_align_set()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">align_v</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">top, bottom, center, 0 ~ 1.0</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></td>
+ <td><code>align_v</code></td>
+ <td><code>top, bottom, center, 0 ~ 1.0</code></td>
+ <td><code>evas_object_size_hint_align_set()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">weight_h</span> or <span style="font-family: Courier New,Courier,monospace">eight_v</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">0 ~ 1.0</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></td>
+ <td><code>weight_h</code> or <code>eight_v</code></td>
+ <td><code>0 ~ 1.0</code></td>
+ <td><code>evas_object_size_hint_weight_set()</code></td>
  </tr>
  </tbody>
  </table>
 
-<p>Some UI component attributes depend on the type of the UI container. For example, if the <span style="font-family: Courier New,Courier,monospace">&lt;button&gt;</span> element is a child of a <span style="font-family: Courier New,Courier,monospace">&lt;grid&gt;</span> element, the <span style="font-family: Courier New,Courier,monospace">&lt;button&gt;</span> element must have <span style="font-family: Courier New,Courier,monospace">pack_x</span>, <span style="font-family: Courier New,Courier,monospace">pack_y</span>, <span style="font-family: Courier New,Courier,monospace">pack_w</span>, and <span style="font-family: Courier New,Courier,monospace">pack_h</span> attributes.</p>
-<table>
-<caption>Table: Specific component attributes</caption>
+<p>Some UI component attributes depend on the type of the UI container. For example, if the <code>&lt;button&gt;</code> element is a child of a <code>&lt;grid&gt;</code> element, the <code>&lt;button&gt;</code> element must have <code>pack_x</code>, <code>pack_y</code>, <code>pack_w</code>, and <code>pack_h</code> attributes.</p>
 
+<p align="center" class="Table"><strong>Table: Specific component attributes</strong></p>
+<table>
 <tbody>
 <tr>
  <th>UI container</th>
  </tr>
  <tr>
  <td>Grid</td>
- <td><span style="font-family: Courier New,Courier,monospace">pack_x, pack_y, pack_w, pack_h</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span></td>
+ <td><code>pack_x, pack_y, pack_w, pack_h</code></td>
+ <td><code>elm_grid_pack()</code></td>
  </tr>
 <tr>
  <td>Table</td>
- <td><span style="font-family: Courier New,Courier,monospace">pack_col, pack_row, row_span, col_span</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span></td>
+ <td><code>pack_col, pack_row, row_span, col_span</code></td>
+ <td><code>elm_table_pack()</code></td>
  </tr>
 <tr>
  <td>Panes</td>
- <td><span style="font-family: Courier New,Courier,monospace">pack</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span></td>
+ <td><code>pack</code></td>
+ <td><code>elm_object_part_content_set()</code></td>
  </tr>
  </tbody>
  </table>
 
 <h3>Event</h3>
 
-<p>An <span style="font-family: Courier New,Courier,monospace">&lt;event&gt;</span> element represents a set of the event attributes. The following is an example:</p>
+<p>An <code>&lt;event&gt;</code> element represents a set of the event attributes. The following is an example:</p>
 
 <pre class="prettyprint">
 &lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;49&quot; weight_h=&quot;1&quot;
 &lt;/button&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;event&gt;</span> element is placed as a child of the <span style="font-family: Courier New,Courier,monospace">&lt;UI component&gt;</span> element.</p>
-<p>The following attributes are used for all <span style="font-family: Courier New,Courier,monospace">&lt;event&gt;</span> elements.</p>
+<p>The <code>&lt;event&gt;</code> element is placed as a child of the <code>&lt;UI component&gt;</code> element.</p>
+<p>The following attributes are used for all <code>&lt;event&gt;</code> elements.</p>
 
+<p align="center" class="Table"><strong>Table: Event attributes</strong></p>
 <table>
-<caption>Table: Event attributes</caption>
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Value</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">function_name</span></td>
+ <td><code>function_name</code></td>
  <td>Name of the function</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">signal</span></td>
+ <td><code>signal</code></td>
  <td>Unique component signal; see the component documentation for details</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">connection_wrapper</span></td>
+ <td><code>connection_wrapper</code></td>
  <td>Connection wrapper function&#39;s name</td>
  </tr>
   <tr>
-  <td><span style="font-family: Courier New,Courier,monospace">target</span></td>
+  <td><code>target</code></td>
   <td>Target view ID to transform</td>
   </tr>
  </tbody>
 
 <h2 id="container_attributes">Component Attributes â€“ UI Container</h2>
 
-<p>The <a href="../../../org.tizen.guides/html/native/ui/efl/ui_layouts_n.htm#ui_container">&lt;UI container&gt;</a> is an element that has the <span style="font-family: Courier New,Courier,monospace">&lt;UI component&gt;</span> elements as children. In the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> file, containers, such as View, Box, Grid, Panel, Panes, Scroller, and Table, are supported.</p>
+<p>The <a href="../../../org.tizen.guides/html/native/ui/efl/ui_layouts_n.htm#ui_container">&lt;UI container&gt;</a> is an element that has the <code>&lt;UI component&gt;</code> elements as children. In the <code>layout.xml</code> file, containers, such as View, Box, Grid, Panel, Panes, Scroller, and Table, are supported.</p>
 
 <h3>View</h3>
 
-<p>A <span style="font-family: Courier New,Courier,monospace">&lt;view&gt;</span> element is a basic unit that represents a layout of the application UI. It contains a <span style="font-family: Courier New,Courier,monospace">&lt;UI container&gt;</span> component as a child.</p>
-<p>The following attributes are used for <span style="font-family: Courier New,Courier,monospace">&lt;view&gt;</span> element.</p>
+<p>A <code>&lt;view&gt;</code> element is a basic unit that represents a layout of the application UI. It contains a <code>&lt;UI container&gt;</code> component as a child.</p>
+<p>The following attributes are used for <code>&lt;view&gt;</code> element.</p>
+
+<p align="center" class="Table"><strong>Table: View attributes</strong></p>
 <table>
-<caption>Table: View attributes</caption>
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Value</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Not duplicated.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
+ <td><code>indicator</code></td>
+ <td><code>true</code> or <code>false</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">screen_orientation</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">no_sensor</span>, <span style="font-family: Courier New,Courier,monospace">only_portrait</span>, <span style="font-family: Courier New,Courier,monospace">only_landscape</span>, or <span style="font-family: Courier New,Courier,monospace">full_sensor</span></td>
+ <td><code>screen_orientation</code></td>
+ <td><code>no_sensor</code>, <code>only_portrait</code>, <code>only_landscape</code>, or <code>full_sensor</code></td>
  </tr>
   <tr>
-  <td><span style="font-family: Courier New,Courier,monospace">type</span></td>
-  <td><span style="font-family: Courier New,Courier,monospace">view</span> or <span style="font-family: Courier New,Courier,monospace">popup</span></td>
+  <td><code>type</code></td>
+  <td><code>view</code> or <code>popup</code></td>
   </tr>
  </tbody>
  </table>
 </pre>
 
 <p>The following attributes are used for the box container.</p>
-<table>
-<caption>Table: Box attributes</caption>
 
+<p align="center" class="Table"><strong>Table: Box attributes</strong></p>
+<table>
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_box_add()</span></td>
+ <td><code>elm_box_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span></td>
+ <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code></td>
+ <td><code>elm_box_horizontal_set()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">homogeneous</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span></td>
+ <td><code>homogeneous</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_box_homogeneous_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">padding_h</span> or <span style="font-family: Courier New,Courier,monospace">padding_v</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">0</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span></td>
+ <td><code>padding_h</code> or <code>padding_v</code></td>
+ <td><code>0</code></td>
+ <td><code>elm_box_padding_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
  </table>
 &lt;/grid&gt;
 </pre>
 
-<p>The child element of the grid container has the <span style="font-family: Courier New,Courier,monospace">pack_w</span>, <span style="font-family: Courier New,Courier,monospace">pack_h</span>, <span style="font-family: Courier New,Courier,monospace">pack_x</span>, and <span style="font-family: Courier New,Courier,monospace">pack_y</span> attributes to indicate the positions in the grid. The following attributes are used for the grid container.</p>
+<p>The child element of the grid container has the <code>pack_w</code>, <code>pack_h</code>, <code>pack_x</code>, and <code>pack_y</code> attributes to indicate the positions in the grid. The following attributes are used for the grid container.</p>
 
+<p align="center" class="Table"><strong>Table: Grid attributes</strong></p>
 <table>
-<caption>Table: Grid attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span></td>
+ <td><code>elm_grid_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">vsize_w</span></td>
+ <td><code>vsize_w</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span></td>
+ <td><code>elm_grid_size_set()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">vsize_h</span></td>
+ <td><code>vsize_h</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span></td>
+ <td><code>elm_grid_size_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
  </table>
 
 <p>The following attributes are used for the panel container.</p>
 
+<p align="center" class="Table"><strong>Table: Panel attributes</strong></p>
 <table>
-<caption>Table: Panel attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_panel_add()</span></td>
+ <td><code>elm_panel_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">orient</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">top</span>, <span style="font-family: Courier New,Courier,monospace">bottom</span>, <span style="font-family: Courier New,Courier,monospace">left</span>, or <span style="font-family: Courier New,Courier,monospace">right</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_panel_orient_set()</span></td>
+ <td><code>orient</code></td>
+ <td><code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code></td>
+ <td><code>elm_panel_orient_set()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hidden</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_panel_hidden_set()</span></td>
+ <td><code>hidden</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_panel_hidden_set()</code></td>
  </tr>
 </tbody>
 </table>
 &lt;/panes&gt;
 </pre>
 
-<p>The child element of the panes container has the <span style="font-family: Courier New,Courier,monospace">pack</span> attribute to indicate the positions in the panes. The following attributes are used for the panes container.</p>
-<table>
-<caption>Table: Panes attributes</caption>
+<p>The child element of the panes container has the <code>pack</code> attribute to indicate the positions in the panes. The following attributes are used for the panes container.</p>
 
+<p align="center" class="Table"><strong>Table: Panes attributes</strong></p>
+<table>
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span></td>
+ <td><code>elm_panes_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span></td>
+ <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code></td>
+ <td><code>elm_panes_horizontal_set()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">fixed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_panes_fixed_set()</span></td>
+ <td><code>fixed</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_panes_fixed_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">right_size</span></td>
+ <td><code>right_size</code></td>
  <td>0 ~ 1</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span></td>
+ <td><code>elm_panes_content_right_size_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the scroller container.</p>
 
+<p align="center" class="Table"><strong>Table: Scroller attributes</strong></p>
 <table>
-<caption>Table: Scroller attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span></td>
+ <td><code>elm_scroller_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">content_min_w</span> or <span style="font-family: Courier New,Courier,monospace">content_min_h</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_scroller_content_min_limit()</span></td>
+ <td><code>content_min_w</code> or <code>content_min_h</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_scroller_content_min_limit()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">propagate_events</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_scroller_propagate_events_set()</span></td>
+ <td><code>propagate_events</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_scroller_propagate_events_set()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">scrollbar_h</span> or <span style="font-family: Courier New,Courier,monospace">scrollbar_v</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">auto</span>, <span style="font-family: Courier New,Courier,monospace">true</span>, or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span></td>
+ <td><code>scrollbar_h</code> or <code>scrollbar_v</code></td>
+ <td><code>auto</code>, <code>true</code>, or <code>false</code></td>
+ <td><code>elm_scroller_policy_set()</code></td>
  </tr>
 </tbody>
 </table>
 &lt;/table&gt;
 </pre>
 
-<p>The child element of the table container has the <span style="font-family: Courier New,Courier,monospace">pack_col</span>, <span style="font-family: Courier New,Courier,monospace">pack_row</span>, <span style="font-family: Courier New,Courier,monospace">row_span</span>, and <span style="font-family: Courier New,Courier,monospace">col_span</span> attributes to indicate the position in the table. The following attributes are used for the table container.</p>
+<p>The child element of the table container has the <code>pack_col</code>, <code>pack_row</code>, <code>row_span</code>, and <code>col_span</code> attributes to indicate the position in the table. The following attributes are used for the table container.</p>
 
+<p align="center" class="Table"><strong>Table: Table attributes</strong></p>
 <table>
-<caption>Table: Table attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_table_add()</span></td>
+ <td><code>elm_table_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">homogeneous</span> or <span style="font-family: Courier New,Courier,monospace">content_min_h</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_table_homogeneous_set()</span></td>
+ <td><code>homogeneous</code> or <code>content_min_h</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_table_homogeneous_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">padding_h</span> or <span style="font-family: Courier New,Courier,monospace">padding_v</span></td>
+ <td><code>padding_h</code> or <code>padding_v</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span></td>
+ <td><code>elm_table_padding_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">cols</span> or <span style="font-family: Courier New,Courier,monospace">rows</span></td>
+ <td><code>cols</code> or <code>rows</code></td>
  <td>1 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span></td>
+ <td><code>elm_table_pack()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the background component.</p>
 
+<p align="center" class="Table"><strong>Table: Background attributes</strong></p>
 <table>
-<caption>Table: Background attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span></td>
+ <td><code>elm_bg_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">option</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">center</span>, <span style="font-family: Courier New,Courier,monospace">scale</span>, <span style="font-family: Courier New,Courier,monospace">stretch</span>, or <span style="font-family: Courier New,Courier,monospace">tile</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span></td>
+ <td><code>option</code></td>
+ <td><code>center</code>, <code>scale</code>, <code>stretch</code>, or <code>tile</code></td>
+ <td><code>elm_bg_option_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">color</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#000000 ~ #ffffff</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span></td>
+ <td><code>color</code></td>
+ <td><code>#000000 ~ #ffffff</code></td>
+ <td><code>elm_bg_color_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span></td>
+ <td><code>src</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_bg_file_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
   </tbody>
 </table>
 
 <p>The following attributes are used for the button component.</p>
 
+<p align="center" class="Table"><strong>Table: Button attributes</strong></p>
 <table>
-<caption>Table: Button attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_button_add()</span></td>
+ <td><code>elm_button_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_object_text_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the calendar component.</p>
 
+<p align="center" class="Table"><strong>Table: Calendar attributes</strong></p>
 <table>
-<caption>Table: Calendar attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_calendar_add()</span></td>
+ <td><code>elm_calendar_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min_year</span> or <span style="font-family: Courier New,Courier,monospace">max_year</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_calendar_min_max_year_set()</span></td>
+ <td><code>min_year</code> or <code>max_year</code></td>
+ <td><code>integer</code></td>
+ <td><code>elm_calendar_min_max_year_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>, <span style="font-family: Courier New,Courier,monospace">always</span>, <span style="font-family: Courier New,Courier,monospace">none</span>, or <span style="font-family: Courier New,Courier,monospace">ondemand</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_calendar_select_mode_set()</span></td>
+ <td><code>select_mode</code></td>
+ <td><code>default</code>, <code>always</code>, <code>none</code>, or <code>ondemand</code></td>
+ <td><code>elm_calendar_select_mode_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">interval</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_calendar_interval_set()</span></td>
+ <td><code>interval</code></td>
+ <td><code>double</code></td>
+ <td><code>elm_calendar_interval_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <h3>Check (<img alt="Check" src="../images/component_attributes_check_icon.png"/>)</h3>
 
-<p>A check component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_check_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_check_wn.htm">wearable</a> applications) toggles the Boolean value between <span style="font-family: Courier New,Courier,monospace">true</span> and <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+<p>A check component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_check_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_check_wn.htm">wearable</a> applications) toggles the Boolean value between <code>true</code> and <code>false</code>.</p>
 
 <pre class="prettyprint">
 &lt;check align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;48&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot; pack_w=&quot;208&quot;
 
 <p>The following attributes are used for the check component.</p>
 
+<p align="center" class="Table"><strong>Table: Check attributes</strong></p>
 <table>
-<caption>Table: Check attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_check_add()</span></td>
+ <td><code>elm_check_add()</code></td>
  </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace">state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_check_state_set()</span></td>
+ <td><code>state</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_check_state_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span>
+ <td><code>text</code></td>
+ <td><code>#string</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span></td>
+ <td><code>elm_object_text_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the colorselector component.</p>
 
+<p align="center" class="Table"><strong>Table: Colorselector attributes</strong></p>
 <table>
-<caption>Table: Colorselector attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_colorselector_add()</span></td>
+ <td><code>elm_colorselector_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
 </tbody>
 </table>
 &lt;/view&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;ctxpopup&gt;</span> element must be placed as a child of the <span style="font-family: Courier New,Courier,monospace">&lt;view&gt;</span> element, and the <span style="font-family: Courier New,Courier,monospace">type</span> attribute in the view must be <span style="font-family: Courier New,Courier,monospace">popup</span>. The following attributes are used for the ctxpopup component.</p>
+<p>The <code>&lt;ctxpopup&gt;</code> element must be placed as a child of the <code>&lt;view&gt;</code> element, and the <code>type</code> attribute in the view must be <code>popup</code>. The following attributes are used for the ctxpopup component.</p>
 
+<p align="center" class="Table"><strong>Table: Ctxpopup attributes</strong></p>
 <table>
-<caption>Table: Ctxpopup attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span></td>
+ <td><code>elm_ctxpopup_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span></td>
+ <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code></td>
+ <td><code>elm_ctxpopup_horizontal_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>A ctxpopup item component can be placed as a child of the ctxpopup component. Each item can have a label, an icon, or both. The following attributes are used for the ctxpopup item component.</p>
 
+<p align="center" class="Table"><strong>Table: Ctxpopup item attributes</strong></p>
 <table>
-<caption>Table: Ctxpopup item attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span></td>
+ <td><code>elm_ctxpopup_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_ctxpopup_item_append()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the datetime component.</p>
 
+<p align="center" class="Table"><strong>Table: Datetime attributes</strong></p>
 <table>
-<caption>Table: Datetime attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span></td>
+ <td><code>elm_datetime_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the entry component.</p>
 
+<p align="center" class="Table"><strong>Table: Entry attributes</strong></p>
 <table>
-<caption>Table: Entry attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span></td>
+ <td><code>elm_entry_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_scrollable_set()</span></td>
+ <td><code>scroll</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_entry_scrollable_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">single_line</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_single_line_set()</span></td>
+ <td><code>single_line</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_entry_single_line_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">password</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_password_set()</span></td>
+ <td><code>password</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_entry_password_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">editable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_editable_set()</span></td>
+ <td><code>editable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_entry_editable_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">context_menu</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_context_menu_disabled_set()</span></td>
+ <td><code>context_menu</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_entry_context_menu_disabled_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">file_text_format</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">plain_utf8</span> or <span style="font-family: Courier New,Courier,monospace">markup_utf8</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_file_text_format_set()</span></td>
+ <td><code>file_text_format</code></td>
+ <td><code>plain_utf8</code> or <code>markup_utf8</code></td>
+ <td><code>elm_entry_file_text_format_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_object_text_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_entry_file_set()</span></td>
+ <td><code>src</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_entry_file_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the flipselector component.</p>
 
+<p align="center" class="Table"><strong>Table: Flipselector attributes</strong></p>
 <table>
-<caption>Table: Flipselector attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_flipselector_add()</span></td>
+ <td><code>elm_flipselector_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>A flipselector item component can be placed as a child of the flipselector container. Each item can have a label. <strong>(Since 2.4, this component is supported in mobile applications only.)</strong></p>
 
+<p align="center" class="Table"><strong>Table: Flipselector item attributes</strong></p>
 <table>
-<caption>Table: Flipselector item attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_append()</span></td>
+ <td><code>elm_flipselector_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_flipselector_item_append()</code></td>
  </tr> 
 </tbody>
 </table>
 
 <p>The following attributes are used for the gengrid component.</p>
 
+<p align="center" class="Table"><strong>Table: Gengrid attributes</strong></p>
 <table>
-<caption>Table: Gengrid attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_add()</span></td>
+ <td><code>elm_gengrid_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>, <span style="font-family: Courier New,Courier,monospace">always</span>, <span style="font-family: Courier New,Courier,monospace">none</span>, or <span style="font-family: Courier New,Courier,monospace">display_only</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_select_mode_set()</span></td>
+ <td><code>select_mode</code></td>
+ <td><code>default</code>, <code>always</code>, <code>none</code>, or <code>display_only</code></td>
+ <td><code>elm_gengrid_select_mode_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_horizontal_set()</span></td>
+ <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code></td>
+ <td><code>elm_gengrid_horizontal_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">item_size_w</span> or <span style="font-family: Courier New,Courier,monospace">item_size_h</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_size_set()</span></td>
+ <td><code>item_size_w</code> or <code>item_size_h</code></td>
+ <td><code>integer</code></td>
+ <td><code>elm_gengrid_item_size_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi_select</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_multi_select_set()</span></td>
+ <td><code>multi_select</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_gengrid_multi_select_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">scrollbar_h</span> or <span style="font-family: Courier New,Courier,monospace">scrollbar_v</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">auto</span>, <span style="font-family: Courier New,Courier,monospace">true</span>, or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span></td>
+ <td><code>scrollbar_h</code> or <code>scrollbar_v</code></td>
+ <td><code>auto</code>, <code>true</code>, or <code>false</code></td>
+ <td><code>elm_scroller_policy_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>A gengrid item component can be placed as a child of the gengrid component. Each item can have a label and image, depending on the style. The following attributes are used for the gengrid item component.</p>
 
+<p align="center" class="Table"><strong>Table: Gengrid item attributes</strong></p>
 <table>
-<caption>Table: Gengrid item attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span></td>
+ <td><code>elm_gengrid_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span></td>
+ <td><code>elm_gengrid_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_gengrid_item_append()</code></td>
  </tr> 
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span></td>
+ <td><code>src</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_gengrid_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span></td>
+ <td><code>selected</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_gengrid_item_selected_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disabled</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span></td>
+ <td><code>disabled</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_item_disabled_set()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the genlist component.</p>
 
+<p align="center" class="Table"><strong>Table: Genlist attributes</strong></p>
 <table>
-<caption>Table: Genlist attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span></td>
+ <td><code>elm_genlist_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>, <span style="font-family: Courier New,Courier,monospace">always</span>, <span style="font-family: Courier New,Courier,monospace">none</span>, or <span style="font-family: Courier New,Courier,monospace">display_only</span>
+ <td><code>select_mode</code></td>
+ <td><code>default</code>, <code>always</code>, <code>none</code>, or <code>display_only</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_select_mode_set()</span></td>
+ <td><code>elm_genlist_select_mode_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">homogeneous</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>
+ <td><code>homogeneous</code></td>
+ <td><code>true</code> or <code>false</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span></td>
+ <td><code>elm_genlist_homogeneous_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">scrollbar_h</span> or <span style="font-family: Courier New,Courier,monospace">scrollbar_v</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">auto</span>, <span style="font-family: Courier New,Courier,monospace">true</span>, or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span></td>
+ <td><code>scrollbar_h</code> or <code>scrollbar_v</code></td>
+ <td><code>auto</code>, <code>true</code>, or <code>false</code></td>
+ <td><code>elm_scroller_policy_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>A genlist item component can be placed as a child of the genlist component. Each item can have a label and image, depending on the style. The following attributes are used for the genlist item component.</p>
 
+<p align="center" class="Table"><strong>Table: Genlist item attributes</strong></p>
 <table>
-<caption>Table: Genlist item attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">end_image_path</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>end_image_path</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">end_standard_icon</span></td>
+ <td><code>end_standard_icon</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">image_path</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>image_path</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">item_type</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">none</span> <span style="font-family: Courier New,Courier,monospace">tree</span>, or <span style="font-family: Courier New,Courier,monospace">group</span>
+ <td><code>item_type</code></td>
+ <td><code>none</code> <code>tree</code>, or <code>group</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>
+ <td><code>selected</code></td>
+ <td><code>true</code> or <code>false</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span></td>
+ <td><code>elm_genlist_item_selected_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">standard_icon</span></td>
+ <td><code>standard_icon</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">sub_text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span></td>
+ <td><code>sub_text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_genlist_item_append()</code></td>
  </tr>
 </tbody>
 </table>
 
 <p>The following attributes are used for the image component.</p>
 
+<p align="center" class="Table"><strong>Table: Image attributes</strong></p>
 <table>
-<caption>Table: Image attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_image_add()</span></td>
+ <td><code>elm_image_add()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_image_file_set()</span></td>
+ <td><code>src</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_image_file_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">aspect_fixed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_image_aspect_fixed_set()</span></td>
+ <td><code>aspect_fixed</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_image_aspect_fixed_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">fill_outside</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span></td>
+ <td><code>fill_outside</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_image_fill_outside_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">resizable_up</span> or <span style="font-family: Courier New,Courier,monospace">resizable_down</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_image_resizable_set()</span></td>
+ <td><code>resizable_up</code> or <code>resizable_down</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_image_resizable_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">no_scale</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_image_no_scale_set()</span></td>
+ <td><code>no_scale</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_image_no_scale_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the index component.</p>
 
+<p align="center" class="Table"><strong>Table: Index attributes</strong></p>
 <table>
-<caption>Table: Index attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_index_add()</span></td>
+ <td><code>elm_index_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">autohide</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_index_autohide_disabled_set()</span></td>
+ <td><code>autohide</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_index_autohide_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_index_indicator_disabled_set()</span></td>
+ <td><code>indicator</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_index_indicator_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>An index item component can be placed as a child of the index component. Each item can have a label. The following attributes are used for the index item component.</p>
 
+<p align="center" class="Table"><strong>Table: Index item attributes</strong></p>
 <table>
-<caption>Table: Index item attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_index_item_append()</span></td>
+ <td><code>elm_index_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_index_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_index_item_append()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the label component.</p>
 
+<p align="center" class="Table"><strong>Table: Label attributes</strong></p>
 <table>
-<caption>Table: Label attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_label_add()</span></td>
+ <td><code>elm_label_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">ellipsis</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_label_ellipsis_set()</span></td>
+ <td><code>ellipsis</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_label_ellipsis_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">wrap_width</span></td>
+ <td><code>wrap_width</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_label_wrap_width_set()</span></td>
+ <td><code>elm_label_wrap_width_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">line_wrap</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">none</span>, <span style="font-family: Courier New,Courier,monospace">char</span>, <span style="font-family: Courier New,Courier,monospace">word</span>, or <span style="font-family: Courier New,Courier,monospace">mixed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_label_line_wrap_set()</span></td>
+ <td><code>line_wrap</code></td>
+ <td><code>none</code>, <code>char</code>, <code>word</code>, or <code>mixed</code></td>
+ <td><code>elm_label_line_wrap_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_object_text_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the layout component.</p>
 
+<p align="center" class="Table"><strong>Table: Layout attributes</strong></p>
 <table>
-<caption>Table: Layout attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span></td>
+ <td><code>elm_layout_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span> or <span style="font-family: Courier New,Courier,monospace">group</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_layout_file_set()</span></td>
+ <td><code>src</code> or <code>group</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_layout_file_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the list component.</p>
 
+<p align="center" class="Table"><strong>Table: List attributes</strong></p>
 <table>
-<caption>Table: List attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_add()</span></td>
+ <td><code>elm_list_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_horizontal_set()</span></td>
+ <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code></td>
+ <td><code>elm_list_horizontal_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>, <span style="font-family: Courier New,Courier,monospace">always</span>, <span style="font-family: Courier New,Courier,monospace">none</span>, or <span style="font-family: Courier New,Courier,monospace">display_only</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_select_mode_set()</span></td>
+ <td><code>select_mode</code></td>
+ <td><code>default</code>, <code>always</code>, <code>none</code>, or <code>display_only</code></td>
+ <td><code>elm_list_select_mode_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi_select</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span></td>
+ <td><code>multi_select</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_list_multi_select_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">compress</span>, <span style="font-family: Courier New,Courier,monospace">scroll</span>, <span style="font-family: Courier New,Courier,monospace">limit</span>, or <span style="font-family: Courier New,Courier,monospace">expand</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_mode_set()</span></td>
+ <td><code>mode</code></td>
+ <td><code>compress</code>, <code>scroll</code>, <code>limit</code>, or <code>expand</code></td>
+ <td><code>elm_list_mode_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">scrollbar_h</span> or <span style="font-family: Courier New,Courier,monospace">scrollbar_v</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">auto</span>, <span style="font-family: Courier New,Courier,monospace">true</span>, or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span></td>
+ <td><code>scrollbar_h</code> or <code>scrollbar_v</code></td>
+ <td><code>auto</code>, <code>true</code>, or <code>false</code></td>
+ <td><code>elm_scroller_policy_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>A list item component can be placed as a child of the list component. Each item can have a label. The following attributes are used for the list item component.</p>
 
+<p align="center" class="Table"><strong>Table: List item attributes</strong></p>
 <table>
-<caption>Table: List item attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span></td>
+ <td><code>elm_list_item_append()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_list_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_set()</span></td>
+ <td><code>selected</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_list_item_selected_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the map component.</p>
 
+<p align="center" class="Table"><strong>Table: Map attributes</strong></p>
 <table>
-<caption>Table: Map attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_map_add()</span></td>
+ <td><code>elm_map_add()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">zoom_level</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">integer (0~)</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span></td>
+ <td><code>zoom_level</code></td>
+ <td><code>integer (0~)</code></td>
+ <td><code>elm_map_zoom_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">region_lon</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_map_region_show()</span></td>
+ <td><code>region_lon</code></td>
+ <td><code>double</code></td>
+ <td><code>elm_map_region_show()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">region_lat</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_map_region_show()</span></td>
+ <td><code>region_lat</code></td>
+ <td><code>double</code></td>
+ <td><code>elm_map_region_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the multibutton entry component.</p>
 
+<p align="center" class="Table"><strong>Table: Multibutton entry attributes</strong></p>
 <table>
-<caption>Table: Multibutton entry attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_multibuttonentry_add()</span></td>
+ <td><code>elm_multibuttonentry_add()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">editable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_multibuttonentry_editable_set()</span></td>
+ <td><code>editable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_multibuttonentry_editable_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">expanded</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_multibuttonentry_expanded_set()</span></td>
+ <td><code>expanded</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_multibuttonentry_expanded_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>A multibutton entry item component can be placed as a child of the multibutton entry component. The following attributes are used for the multibutton entry item component.</p>
 
+<p align="center" class="Table"><strong>Table: Multibutton entry item attributes</strong></p>
 <table>
-<caption>Table: Multibutton entry item attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_multibuttonentry_item_append()</span></td>
+ <td><code>elm_multibuttonentry_item_append()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_multibuttonentry_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_multibuttonentry_item_append()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the progressbar component.</p>
 
+<p align="center" class="Table"><strong>Table: Progressbar attributes</strong></p>
 <table>
-<caption>Table: Progressbar attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_progressbar_add()</span></td>
+ <td><code>elm_progressbar_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span>
+ <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_progressbar_horizontal_set()</span></td>
+ <td><code>elm_progressbar_horizontal_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">span_size</span></td>
+ <td><code>span_size</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_progressbar_span_size_set()</span></td>
+ <td><code>elm_progressbar_span_size_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+ <td><code>value</code></td>
  <td>0 ~ 1</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span></td>
+ <td><code>elm_progressbar_value_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">inverted</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_progressbar_inverted_set()</span></td>
+ <td><code>inverted</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_progressbar_inverted_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span></td>
+ <td><code>min</code> or <code>max</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></td>
+ <td><code>eext_circle_object_value_min_max_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>A popup component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_popup_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_popup_wn.htm">wearable</a> applications) shows a pop-up area that contains a title, content, and action area. The following attributes are used for the popup component.</p>
 
+<p align="center" class="Table"><strong>Table: Popup attributes</strong></p>
 <table>
-<caption>Table: Popup attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_popup_add()</span></td>
+ <td><code>elm_popup_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">title</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_part_text_set()</span></td>
+ <td><code>title</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_object_part_text_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">height</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></td>
+ <td><code>height</code></td>
+ <td><code>integer</code></td>
+ <td><code>evas_object_size_hint_min_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">timeout</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span></td>
+ <td><code>timeout</code></td>
+ <td><code>double</code></td>
+ <td><code>elm_popup_timeout_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the radio component.</p>
 
+<p align="center" class="Table"><strong>Table: Radio attributes</strong></p>
 <table>
-<caption>Table: Radio attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_radio_add()</span></td>
+ <td><code>elm_radio_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">state_value</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#number</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_radio_state_value_set()</span></td>
+ <td><code>state_value</code></td>
+ <td><code>#number</code></td>
+ <td><code>elm_radio_state_value_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#number</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_radio_value_set()</span></td>
+ <td><code>value</code></td>
+ <td><code>#number</code></td>
+ <td><code>elm_radio_value_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span>
+ <td><code>text</code></td>
+ <td><code>#string</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span></td>
+ <td><code>elm_object_text_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for slider component.</p>
 
+<p align="center" class="Table"><strong>Table: Slider attributes</strong></p>
 <table>
-<caption>Table: Slider attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_add()</span></td>
+ <td><code>elm_slider_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>
+ <td><code>indicator</code></td>
+ <td><code>true</code> or <code>false</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_indicator_show_set()</span></td>
+ <td><code>elm_slider_indicator_show_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min</span></td>
+ <td><code>min</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span></td>
+ <td><code>elm_slider_min_max_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">step</span></td>
+ <td><code>step</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_step_set()</span></td>
+ <td><code>elm_slider_step_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">max</span></td>
+ <td><code>max</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span></td>
+ <td><code>elm_slider_min_max_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+ <td><code>value</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span></td>
+ <td><code>elm_slider_value_set()</code></td>
  </tr>
  <tr>
-  <td><span style="font-family: Courier New,Courier,monospace">inverted</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>
+  <td><code>inverted</code></td>
+ <td><code>true</code> or <code>false</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_inverted_set()</span></td>
+ <td><code>elm_slider_inverted_set()</code></td>
  </tr>
  <tr>
-  <td><span style="font-family: Courier New,Courier,monospace">indicator_format</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span>
+  <td><code>indicator_format</code></td>
+ <td><code>#string</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_indicator_format_set()</span></td>
+ <td><code>elm_slider_indicator_format_set()</code></td>
  </tr>
  <tr>
-  <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span>
+  <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code>
  <p>See the <a href="#supported_properties">supported properties</a> for each profile and version.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span></td>
+ <td><code>elm_slider_horizontal_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the spinner component.</p>
 
+<p align="center" class="Table"><strong>Table: Spinner attributes</strong></p>
 <table>
-<caption>Table: Spinner attributes</caption>
-
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_spinner_add()</span></td>
+ <td><code>elm_spinner_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">editable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_spinner_editable_set()</span></td>
+ <td><code>editable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_spinner_editable_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">step</span></td>
+ <td><code>step</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_spinner_step_set()</span></td>
+ <td><code>elm_spinner_step_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min</span></td>
+ <td><code>min</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_spinner_min_max_set()</span></td>
+ <td><code>elm_spinner_min_max_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">max</span></td>
+ <td><code>max</code></td>
  <td>0 ~</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_spinner_min_max_set()</span></td>
+ <td><code>elm_spinner_min_max_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>The following attributes are used for the toolbar component.</p>
 
+<p align="center" class="Table"><strong>Table: Toolbar attributes</strong></p>
 <table>
-<caption>Table: Toolbar attributes</caption>
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_add()</span></td>
+ <td><code>elm_toolbar_add()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">homogeneous</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_homogeneous_set()</span></td>
+ <td><code>homogeneous</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_toolbar_homogeneous_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>, <span style="font-family: Courier New,Courier,monospace">always</span>, <span style="font-family: Courier New,Courier,monospace">none</span>, or <span style="font-family: Courier New,Courier,monospace">display_only</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_select_mode_set()</span></td>
+ <td><code>select_mode</code></td>
+ <td><code>default</code>, <code>always</code>, <code>none</code>, or <code>display_only</code></td>
+ <td><code>elm_toolbar_select_mode_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">icon_size</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">0 ~</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_icon_size_set()</span></td>
+ <td><code>icon_size</code></td>
+ <td><code>0 ~</code></td>
+ <td><code>elm_toolbar_icon_size_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal</span> or <span style="font-family: Courier New,Courier,monospace">vertical</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_horizontal_set()</span></td>
+ <td><code>direction</code></td>
+ <td><code>horizontal</code> or <code>vertical</code></td>
+ <td><code>elm_toolbar_horizontal_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">shrink_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">none</span>, <span style="font-family: Courier New,Courier,monospace">hide</span>, <span style="font-family: Courier New,Courier,monospace">scroll</span>, <span style="font-family: Courier New,Courier,monospace">menu</span>, or <span style="font-family: Courier New,Courier,monospace">expand</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_shrink_mode_set()</span></td>
+ <td><code>shrink_mode</code></td>
+ <td><code>none</code>, <code>hide</code>, <code>scroll</code>, <code>menu</code>, or <code>expand</code></td>
+ <td><code>elm_toolbar_shrink_mode_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">transverse_expand</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_transverse_expanded_set()</span></td>
+ <td><code>transverse_expand</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_toolbar_transverse_expanded_set()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></td>
+ <td><code>visible</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>evas_object_show()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  </tbody>
 </table>
 
 <p>A toolbar item component can be placed as a child of the toolbar component. Each item can have a label and image. The following attributes are used for the toolbar item component.</p>
 
+<p align="center" class="Table"><strong>Table: Toolbar item attributes</strong></p>
 <table>
-<caption>Table: Toolbar item attributes</caption>
 <tbody>
 <tr>
  <th>Attribute</th>
  <th>Function</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Automatically incrementing and editable. Duplicates are not allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span></td>
+ <td><code>elm_toolbar_item_append()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span></td>
+ <td><code>disable</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_object_item_disabled_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span></td>
+ <td><code>text</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_toolbar_item_append()</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">#string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_icon_set()</span></td>
+ <td><code>src</code></td>
+ <td><code>#string</code></td>
+ <td><code>elm_toolbar_item_icon_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_selected_set()</span></td>
+ <td><code>selected</code></td>
+ <td><code>true</code> or <code>false</code></td>
+ <td><code>elm_toolbar_item_selected_set()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>See the <a href="#supported_properties">supported properties</a> for each profile and version</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span></td>
+ <td><code>elm_object_style_set()</code></td>
  </tr>
  </tbody>
 </table>
 <h3 id="supported_properties">Properties Supported for Each Component</h3>
 <p>Some properties are supported only in specific profiles. The following table lists the UI components with attributes that only apply to specific profiles.</p>
 
+<p align="center" class="Table"><strong>Table: Properties supported in specific profiles</strong></p>
 <table>
-<caption>Table: Properties supported in specific profiles</caption>
 <tbody>
 <tr>
  <th>Component</th>
 </tr>
  <tr>
  <td rowspan="4">Panel</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">orient</span></td>
+ <td><code>orient</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hidden</span></td>
+ <td><code>hidden</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
  <tr>
  <td rowspan="5">Panes</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
+ <td><code>direction</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">fixed</span></td>
+ <td><code>fixed</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">right_size</span></td>
+ <td><code>right_size</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
  <tr>
  <td rowspan="6">Calendar</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min_year</span> or <span style="font-family: Courier New,Courier,monospace">max_year</span></td>
+ <td><code>min_year</code> or <code>max_year</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
+ <td><code>select_mode</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">interval</span></td>
+ <td><code>interval</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
  <tr>
  <td rowspan="6">Check</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">state</span></td>
+ <td><code>state</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+ <td><code>text</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
  <tr>
  <td rowspan="2">Colorselector</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
   <tr>
  <td rowspan="3">Flipselector</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
   <tr>
  <td rowspan="2">Flipselector item</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+ <td><code>text</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
 <tr>
  <td rowspan="9">Gengrid</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
+ <td><code>select_mode</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
+ <td><code>direction</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">item_size_w</span> or <span style="font-family: Courier New,Courier,monospace">item_size_h</span></td>
+ <td><code>item_size_w</code> or <code>item_size_h</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi_select</span></td>
+ <td><code>multi_select</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">scrollbar_h</span> or <span style="font-family: Courier New,Courier,monospace">scrollbar_v</span></td>
+ <td><code>scrollbar_h</code> or <code>scrollbar_v</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
 <tr>
  <td rowspan="6">Gengrid item</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+ <td><code>text</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
+ <td><code>src</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><code>selected</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disabled</span></td>
+ <td><code>disabled</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
 <tr>
  <td rowspan="7">Genlist</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
+ <td><code>select_mode</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">homogeneous</span></td>
+ <td><code>homogeneous</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">scrollbar_h</span> or <span style="font-family: Courier New,Courier,monospace">scrollbar_v</span></td>
+ <td><code>scrollbar_h</code> or <code>scrollbar_v</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
 <tr>
  <td rowspan="10">Genlist item</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">end_image_path</span></td>
+ <td><code>end_image_path</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">end_standard_icon</span></td>
+ <td><code>end_standard_icon</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">image_path</span></td>
+ <td><code>image_path</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">item_type</span></td>
+ <td><code>item_type</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+ <td><code>text</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><code>selected</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">standard_icon</span></td>
+ <td><code>standard_icon</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">sub_text</span></td>
+ <td><code>sub_text</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
 <tr>
  <td rowspan="6">Index</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">autohide</span></td>
+ <td><code>autohide</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator</span></td>
+ <td><code>indicator</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>No</td>
  <td>No</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
 <tr>
  <td rowspan="5">Multibutton entry</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">editable</span></td>
+ <td><code>editable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">expanded</span></td>
+ <td><code>expanded</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
  <tr>
  <td rowspan="2">Multibutton entry item</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
    <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+ <td><code>text</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
   <tr>
  <td rowspan="9">Progressbar</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
+ <td><code>direction</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">span_size</span></td>
+ <td><code>span_size</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+ <td><code>value</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">inverted</span></td>
+ <td><code>inverted</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span></td>
+ <td><code>min</code> or <code>max</code></td>
  <td>No</td>
  <td>No</td>
  <td>Yes</td>
  </tr>
   <tr>
  <td rowspan="6">Radio</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">state_value</span></td>
+ <td><code>state_value</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+ <td><code>value</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+ <td><code>text</code></td>
  <td>No</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
   <tr>
  <td rowspan="12">Slider</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator</span></td>
+ <td><code>indicator</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min</span></td>
+ <td><code>min</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">step</span></td>
+ <td><code>step</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">max</span></td>
+ <td><code>max</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+ <td><code>value</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">inverted</span></td>
+ <td><code>inverted</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator_format</span></td>
+ <td><code>indicator_format</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
+ <td><code>direction</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
   <tr>
  <td rowspan="8">Spinner</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">editable</span></td>
+ <td><code>editable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">step</span></td>
+ <td><code>step</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">min</span></td>
+ <td><code>min</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">max</span></td>
+ <td><code>max</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
  </tr>
   <tr>
  <td rowspan="9">Toolbar</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">homogeneous</span></td>
+ <td><code>homogeneous</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
+ <td><code>select_mode</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">icon_size</span></td>
+ <td><code>icon_size</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
+ <td><code>direction</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">shrink_mode</span></td>
+ <td><code>shrink_mode</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">transverse_expand</span></td>
+ <td><code>transverse_expand</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">visible</span></td>
+ <td><code>visible</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  </tr>
   <tr>
  <td rowspan="6">Toolbar item</td>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
+ <td><code>id</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disable</span></td>
+ <td><code>disable</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+ <td><code>text</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
      <tr>
- <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
+ <td><code>src</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><code>selected</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
  <td>No</td>
  </tr>
     <tr>
- <td><span style="font-family: Courier New,Courier,monospace">style</span></td>
+ <td><code>style</code></td>
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
index 27f13df..e0b2ab4 100644 (file)
@@ -45,7 +45,7 @@
 <p>The Component Designer is a rich graphical tool that provides a UI for the EDC markup. It is aimed to simplify the creation and editing of UI component styles, avoiding the need to learn the EDC syntax.</p>
 <p>The Component Designer was designed with the idea that target users are not just programmers, but also designers. Besides styles, the Component Designer is also able to create and edit custom layouts.</p>
 
-<p class="figure">Figure: Component Designer</p> 
+<p align="center"><strong>Figure: Component Designer</strong></p> 
 <p align="center"><img alt="Component Designer" src="../images/comp_des_com_des.png" /></p> 
 
 <h2 id="ui">UI Layout</h2>
@@ -62,7 +62,7 @@
    <li>Block on the right is <strong>Property</strong>. It shows the properties of the item currently selected in the navigation bottom block, and it can be a part, program, or data.</li>
    <li>Violet bar at the top contains tabs. Each tab has its own workspace.</li>
    <li>Red bar at the bottom of the window is a status bar.
-   <p class="figure">Figure: Component Designer window blocks</p> 
+   <p align="center"><strong>Figure: Component Designer window blocks</strong></p> 
 <p align="center"><img alt="Component Designer window blocks" src="../images/comp_des_window_blocks.png" /></p>
 </li>
 </ul>
  
 <p>The list of groups is located on the left side of the Component Designer, and holds all groups from the loaded project, with items sorted alphabetically.</p>
 
-<p class="figure">Figure: Group navigation</p>
+<p align="center"><strong>Figure: Group navigation</strong></p>
 <p align="center"><img alt="Group navigation" src="../images/comp_des_group_navigation.png" /></p> 
 <p>On the top of the navigation bar, 2 icons allow you to add a new group into the project or delete an existing group. If you add a new group, a simple dialog wizard opens, and sets a name for new group and selects a source group, if one is required to create a copy or alias.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Copy and alias are different entities. A copied group is an independent group with all parameters copied from the source group. An alias, on the other side, is just a link. The alias group has a specific icon (<img alt="Link" src="../images/comp_des_icon_link.png" />) and the opened alias group does not allow you to work with the part/program navigation or with parts on the workspace.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    Copy and alias are different entities. A copied group is an independent group with all parameters copied from the source group. An alias, on the other side, is just a link. The alias group has a specific icon (<img alt="Link" src="../images/comp_des_icon_link.png" />) and the opened alias group does not allow you to work with the part/program navigation or with parts on the workspace.
+</div>
 <p>The group list structure is based on splitting the group name by tokens that are separated from each other by the \ character. This creates a clear tree view. For example, the default Elementary theme contains a lot of groups with styles for elementary components. By splitting the root tokens from component styles (for example, <strong>elm</strong>/check/base/default), all groups related to Elementary can be organized below the <strong>elm</strong> entity. On the next level, the splitting happens based on the component names (for example, elm/<strong>check</strong>/base/default). And finally, the lowest level leafs of this tree are the styles names (for example, elm/check/base/<strong>default</strong>).</p> 
 <p>For comfortable visual navigation, the tree leafs have a &quot;document&quot; icon, and the nodes are represented by a &quot;folder&quot; icon.</p>
 <h2 id="part">Part/program Navigation</h2>
 
 <p>The Component Designer provides a navigation bar for primitives that are stored inside groups. The primitives are parts, programs, and data. They are placed on the right side of main work area as 2 root nodes.</p>
-<p class="figure">Figure: Part/program navigation</p>
+<p align="center"><strong>Figure: Part/program navigation</strong></p>
 <p align="center"><img alt="Part/program navigation" src="../images/comp_des_part.png" /></p> 
 
 <p>The controls placed at the top of the navigation bar make it possible to add new primitives or change the order of the parts inside the group. Click the <strong>+</strong> icon to see the names of the available primitive types. Depending on the selected context, some of the entities can be disabled.</p>
-<p class="figure">Figure: Available primitive types</p>
+<p align="center"><strong>Figure: Available primitive types</strong></p>
 <p align="center"><img alt="Available primitive types" src="../images/comp_des_part_2.png" /></p>
 <p>For example, to add a new state for an existing part:</p>
   <ol>  
@@ -107,8 +101,8 @@ By double-clicking the state name you can switch the part state. The state is up
 <ul> 
    <li>Parts<p>There is an eye icon (<img alt="Eye" src="../images/comp_des_icon_eye.png" />) on the left side of the part name. If the group has too many parts, and it is too complicated to work with them on the workspace, you can hide some parts by clicking the eye icon. To show the part again, click the empty check that replaces the eye icon.</p><p>To identify the part type in the tree, an icon representing the part type is shown on the right side of the part name. The following table shows the currently available part types.</p>
    
-   <table>
-<caption>Table: Part types</caption>
+<p align="center" class="Table"><strong>Table: Part types</strong></p>
+<table>
 <tbody>
 <tr>
  <th>Icon</th>
@@ -149,16 +143,12 @@ By double-clicking the state name you can switch the part state. The state is up
  </tbody></table>
 
 Some parts can contain items in addition to states, for example, a box or table. Such items are shown as a different list, which is expandable and shows the number of items already inside the part. When such item (box or table) is selected, you can add new items to it. You cannot add any items to any other part type.
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To explore the tree, double-click a node or press the right arrow icon.</td> 
-    </tr> 
-   </tbody> 
-  </table></li>
+
+<div class="note">
+    <strong>Note</strong>
+    To explore the tree, double-click a node or press the right arrow icon.
+</div>
+</li>
 <li>Programs<p>
 The parts/programs list only allows you to add or remove programs. By clicking a program name, the properties are updated to the program parameters available to be modified.</p></li>
 <li>Data items<p>
@@ -167,7 +157,7 @@ Data items contain raw data information (data name and raw value) that is encase
 <h2 id="workspace">Workspace</h2>
 
 <p>The workspace is placed in the middle of the Component Designer window. It shows a visual representation of the group being edited.</p>
-<p class="figure">Figure: Workspace</p>
+<p align="center"><strong>Figure: Workspace</strong></p>
 <p align="center"><img alt="Workspace" src="../images/comp_des_workspace.png" /></p> 
 <p>You can open multiple groups at the same time, and switch between them using the tab bar placed above the workspace.</p>
 <p>Each workspace has a history (for undo and redo actions).</p>
@@ -179,16 +169,10 @@ Data items contain raw data information (data name and raw value) that is encase
 <li>Parts can be manipulated by a mouse pointer.</li>
 <li>Parts can be selected and highlighted, and by using the highlight, resized.</li>
 </ul> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Clicking a part selects it and loads the part properties. Clicking an already selected part switches between the part state and the part (and switches their properties as well).</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    Clicking a part selects it and loads the part properties. Clicking an already selected part switches between the part state and the part (and switches their properties as well).
+</div>
 <p>If you right-click the group view background, a context menu opens. You can select actions, such as undo, redo, and show/hide rulers and certain scales (or both). The group view also contains rulers to show the relative and absolute sizes.</p>
 <h3>Tools</h3>
 <p>Workspace has various tools to allow you to manipulate it:</p>
@@ -196,22 +180,22 @@ Data items contain raw data information (data name and raw value) that is encase
 <li>The size of the previewed group can be changed through the container border. The container has a small rectangle in the right bottom corner: use it to change the size with the mouse.
 <p>Another way is to use the spinners placed at the beginning of the toolbar to set the container size. The chain between the spinners determines whether the width and height changes are made simultaneously. The toggle on the left blocks all size changes.</p>
 <p>In the following figure, the setting at the bottom blocks all size changes, and the width and height changes are not linked. At the top, the size changes are not blocked, and the width and height changes are linked.</p>
-<p class="figure">Figure: Container size</p> 
+<p align="center"><strong>Figure: Container size</strong></p> 
 <p align="center"><img alt="Container size" src="../images/comp_des_container_size.png" /></p> 
 <p align="center"><img alt="Container size" src="../images/comp_des_container_size_2.png" /></p>
 </li>
 <li>If the group is too small or too big, you can zoom in and out with a slider. To set an accurate zoom value, use the zoom spinner.
-<p class="figure">Figure: Zooming</p> 
+<p align="center"><strong>Figure: Zooming</strong></p> 
 <p align="center"><img alt="Zooming" src="../images/comp_des_zooming.png" /></p> 
 </li>
 <li>To fit the group view with the currently opened group, use the <img alt="Size" src="../images/comp_des_icon_size.png" /> icon. It makes the group smaller or larger, as needed, to fit the size of the group view.
 <p>When the fit is selected, it blocks all size changes until the fit is unselected.</p></li>
 <li>You can undo and redo all changes that happen during group editing. The change history is cleared when you close the tab of the edited group in the workspace.
-<p class="figure">Figure: Undo and redo</p> 
+<p align="center"><strong>Figure: Undo and redo</strong></p> 
 <p align="center"><img alt="Undo and redo" src="../images/comp_des_undo_redo.png" /></p>
 </li>
 <li>A combo box allows fast access to the resource libraries. All available libraries are shown in the drop-down list.
-<p class="figure">Figure: Resource library access</p> 
+<p align="center"><strong>Figure: Resource library access</strong></p> 
 <p align="center"><img alt="Resource library access" src="../images/comp_des_resource_library.png" /></p>
 </li>
 </ul>
@@ -219,11 +203,11 @@ Data items contain raw data information (data name and raw value) that is encase
 
 <p>When working with parts on a workspace and setting certain min, max, or other attributes, you can simply change the sizes and aligns in the group view directly. There are a few highlights available in the group view to help you.</p>
 <p>If you click a part, a highlight with the same size as the clicked part appears, with handlers in each corner. By dragging the handlers, you can change the size of the selected part.</p>
-<p class="figure">Figure: Click highlight</p>
+<p align="center"><strong>Figure: Click highlight</strong></p>
 <p align="center"><img alt="Click highlight" src="../images/comp_des_highlight.png" /></p>
 <p>Remember that the part changes its size and position related to the parts aligns. In addition, the part size cannot reduce lower than its min values, or grow above the object area size.</p>
 <p>The object area is the area between relative points set in the part properties. There are 2 relative points (starting and ending one) and the part is positioned between those points. The relative points are usually the main opened group or any other part. A highlight that shows the object area looks like a shaded rectangle.</p>
-<p class="figure">Figure: Object area highlight</p>
+<p align="center"><strong>Figure: Object area highlight</strong></p>
 <p align="center"><img alt="Object area highlight" src="../images/comp_des_highlight2.png" /></p>
 
 <p>To show or hide the object area in the group view, go to <strong>View</strong> &gt; <strong>Show object area</strong> in the menu.</p>
@@ -234,35 +218,29 @@ Data items contain raw data information (data name and raw value) that is encase
 <li>Normal
 <p>This mode is used to manipulate the group primitives in the development stage. All parts are represented on the workspace, including containers and spacers. Each of the non-visible primitive types has their own pattern and color. This makes it possible to understand the markup of the group and the dependencies between primitives. Text parts are bordered to show the area from the left top to right bottom corners. In addition, text parts set the part name as content if there is no preset text in that part (it can be set in the text block in the properties).</p>
 <p>You can select primitives directly on the workspace in this mode. You can also select parts inside the part/program navigation panel, as usual. The selected part is covered by the resizing control element, which shows highlights that change the maximum size of the primitive.</p>
-<p class="figure">Figure: Normal mode</p>
+<p align="center"><strong>Figure: Normal mode</strong></p>
 <p align="center"><img alt="Normal mode" src="../images/comp_des_mode_normal.png" /></p></li>
 <li>Demo
 <p>While the normal mode is used during the implementation process, the demo mode is used to see the end result. Objects displayed in this mode look the same as in the runtime application.</p>
 <p>You can type text into texts part and set container part content. Predefined components (such as button, check, slider, entry, and progress bar) can be used as content. You can also use a simple rectangle or an image file stored in the file system as content. You can set different colors and minimum/maximum sizes for content.</p>
 <p>The demo mode can also emit signals to objects. When the programs inside a group are created, you want to check how the objects react to those signals. The list of signals that can be emitted in the demo mode exclude the programs that depend on mouse events, because it is easier to click (or mouse in/out, double-click) on a real object.</p>
-<p class="figure">Figure: Demo mode</p>
+<p align="center"><strong>Figure: Demo mode</strong></p>
 <p align="center"><img alt="Demo mode" src="../images/comp_des_mode_demo.png" /></p></li>
 </ul> 
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Important</th>
-    </tr>
-    <tr>
-     <td class="note">Most Elementary components are loaded as fully functional UI components. This means that the behavior of the loaded component depends on the Elementary source code. The group is loaded with a usual layout, in case the group has no Elementary component style or is a still unsupported component.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Important</strong>
+    Most Elementary components are loaded as fully functional UI components. This means that the behavior of the loaded component depends on the Elementary source code. The group is loaded with a usual layout, in case the group has no Elementary component style or is a still unsupported component.
+</div>
 
 <h3>Rulers</h3>
 
 <p>Rulers are parts of the group view, which can be used to show the part sizes and their relatives. Both vertical and horizontal rulers have an indicator that shows the current mouse position, and can be used to make some general measurements of the part size and position. Zooming the group view in or out also changes the rulers, showing zoomed sizes.</p>
-<p class="figure">Figure: Rulers</p>
+<p align="center"><strong>Figure: Rulers</strong></p>
 <p align="center"><img alt="Rulers" src="../images/comp_des_rulers.png" /></p>
 <p>To hide the rulers, click the group view background and clear the <strong>Show rulers</strong> option.</p>
 <p>You can show 2 scales on rulers:</p>
-<p class="figure">Figure: Ruler scales</p>
+<p align="center"><strong>Figure: Ruler scales</strong></p>
 <p align="center"><img alt="Ruler scales" src="../images/comp_des_ruler.png" /></p>
 <ul> 
 <li>Absolute scale (gray text and dashes): rulers show the decent sizes in pixels of the entire group shown and loaded into the container.</li>
@@ -272,7 +250,7 @@ Data items contain raw data information (data name and raw value) that is encase
 <h2 id="properties">Properties</h2>
 
 <p>The panel on the right side of the Component Designer window can be used to modify the properties and parameters of the current context (such as an opened group, workspace mode, or selected part, state, or program). You can see and modify the values of a large number of properties, such as min, relative, map, part name, and content type (for demo).</p>
-<p class="figure">Figure: Properties</p>
+<p align="center"><strong>Figure: Properties</strong></p>
 <p align="center"><img alt="Properties" src="../images/comp_des_properties.png" /></p>
 <p>All general properties that can be modified are described in the following sections. There are different properties for an opened group, demo mode,  selected items, data, program, state, and part. Some user-friendly general behaviors, such as list filtering (hide other controls on certain values), popups, and highlights are covered as well.</p>
 <h3>Property Controls</h3>
@@ -280,50 +258,50 @@ Data items contain raw data information (data name and raw value) that is encase
 <ul> 
 <li>The properties are generally grouped into a tree structure containing the attributes (controls) and related values together. For example, the <strong>Color</strong> block contains the color classes and general color, while the <strong>Position</strong> block contains all controls to work with relatives (such as relative to and offsets).</li>
 <li>Most properties have a description (title) text, which is highlighted with bold when it has a non-default value. Every property has 1 or 2 controls (like min and max in the <strong>Picture</strong> property), and the property can show a subparam (subtitle) and measure (for example, px).
-<p class="figure">Figure: Property title and value</p>
+<p align="center"><strong>Figure: Property title and value</strong></p>
 <p align="center"><img alt=" Property title and value" src="../images/comp_des_property_controls.png" /></p></li>
 <li>If the attribute can have a value within a range, a spinner control is used. These attributes can be, for example, offsets (which can be up to 9999 pixels), borders, and sizes.</li>
 <li>Some attributes can be negative and positive, while some are positive only. All of that depends on the attribute characteristics described by <a href="https://docs.enlightenment.org/efl/current/edcref.html" target="_blank">Edje Data Collection reference</a>.
 
 </li>
 <li>If the attribute can be only in ON or OFF state (such as <strong>Visible</strong>, <strong>Smooth</strong>, and <strong>Map</strong>), a check control is used to show them.
-<p class="figure">Figure: Check control</p>
+<p align="center"><strong>Figure: Check control</strong></p>
 <p align="center"><img alt="Check control" src="../images/comp_des_visible.png" /></p>
 
 </li>
 <li>If the attribute has a constant number of text-based values, a combo box control is used. It is commonly used for, for example, <strong>Aspect preference</strong>, <strong>Clip to</strong>, and <strong>Relative</strong>. That control is also widely used for those attributes which require you to select one of the parts existing inside the opened group.
-<p class="figure">Figure: Combo box</p>
+<p align="center"><strong>Figure: Combo box</strong></p>
 <p align="center"><img alt="Combo box" src="../images/comp_des_aspect_preference.png" /></p>
 
 </li>
 <li>If the attribute defines a color, a button that shows a color palette is used. This is widely used inside the textblock style library. If you click the button, a popup is shown. After you select the color, it is immediately applied to the selected part.
-<p class="figure">Figure: Color palette</p>
+<p align="center"><strong>Figure: Color palette</strong></p>
 <p align="center"><img alt="Color palette" src="../images/comp_des_color.png" /></p>
 
 </li>
 <li>Entry control is commonly used to set up text attributes, such as name, text, and fonts. Sometimes the entry is modified, for example, the image path has an entry control with a button. If you click it, an image selector (similar to the color selector) is shown, with a grid of all images added through the image manager and already existing in the project. Select the image by double-clicking it.
-<p class="figure">Figure: Entry</p>
+<p align="center"><strong>Figure: Entry</strong></p>
 <p align="center"><img alt="" src="../images/comp_des_entry.png" /></p>
 
 </li>
 <li>The <strong>Tween</strong> block has a variable set of images. You can add images by clicking the <strong>+</strong> button, or delete all selected images with the - button. The <strong>+</strong> button shows a list of images, and you can select any number of them before clicking <strong>OK</strong>. All selected images are added to the tween.
-<p class="figure">Figure: Tween</p>
+<p align="center"><strong>Figure: Tween</strong></p>
 <p align="center"><img alt="Tween" src="../images/comp_des_tween.png" /></p></li>
 </ul>
 <h3>Non-default Highlight</h3>
 
 <p>The property highlights to show non-default values in bold. The highlight makes it easier to look at the entire set of properties and see which of them have been changed and differ from the default values. Whenever a non-default value is changed back to its default, the description text of that property is unbolded.</p>
-<p class="figure">Figure: Non-default highlight</p>
+<p align="center"><strong>Figure: Non-default highlight</strong></p>
 <p align="center"><img alt="Non-default highlight" src="../images/comp_des_non_default.png" /></p>
 <h3>Group Block Properties</h3>
 
 <p>The <strong>Group</strong> block shows itself only when a group is loaded and its tab is activated, but nothing is selected yet. It contains just a few properties, such as the group name (which is unedited for now) and some general group min and max sizes.</p>
-<p class="figure">Figure: Group block properties</p>
+<p align="center"><strong>Figure: Group block properties</strong></p>
 <p align="center"><img alt="Group block properties" src="../images/comp_des_group_block.png" /></p>
 <h3>Part Block Properties</h3>
 
 <p>The <strong>Part</strong> block is usually the same for most part types. More properties are available for the text and textblock types, and the source for the part type called <strong>GROUP</strong>. Generally, the block contains some general part attributes, such as mouse pointer attributes (pointer mode, events repeating), scale, and draggable attributes.</p>
-<p class="figure">Figure: Part block properties</p>
+<p align="center"><strong>Figure: Part block properties</strong></p>
 <p align="center"><img alt="Part block properties" src="../images/comp_des_part_block.png" /></p>
 <h3>State Block Properties</h3>
 <p>The <strong>State</strong> block is huge. It differs depending on the selected state of a certain part type. Generally all part types contain 4 blocks:</p>
@@ -337,19 +315,19 @@ Data items contain raw data information (data name and raw value) that is encase
 <h3>Program Block Properties</h3>
 
 <p>The program usually has 1 important block that contains some attributes, such as the program name, action type, signal, source, and filters. Usually, it also contain a list of after&#39;s - programs that are run together with the selected program in a certain queue.</p>
-<p class="figure">Figure: Program block properties</p>
+<p align="center"><strong>Figure: Program block properties</strong></p>
 <p align="center"><img alt="Program block properties" src="../images/comp_des_program_block.png" /></p>
 <p>Based on the program action type, the block can contain more attributes. For example, the <strong>Action params</strong> can have a state name and value for the <strong>STATE_SET</strong> program type, or it can be a sample, channel, and duration for <strong>SOUND_SAMPLE</strong>.
 For programs like <strong>STATE_SET</strong>, there is also a block used to set <strong>Targets</strong> (for example, the <strong>STATE_SET</strong> program applies changes to the parts listed in the <strong>Targets</strong> block).</p>
 <h3>Item Block Properties</h3>
 
 <p>The item properties are shown only when the items of the box or table part are selected. They have simple attributes, such as the source group to be loaded into item, some sizes, and positions, and paddings.</p>
-<p class="figure">Figure: Item block properties</p>
+<p align="center"><strong>Figure: Item block properties</strong></p>
 <p align="center"><img alt="Item block properties" src="../images/comp_des_items_block.png" /></p>
 <h3>Data Item Block Properties</h3>
 
 <p>The <strong>Data item</strong> block contains only a key and value pair.</p>
-<p class="figure">Figure: Data item block properties</p>
+<p align="center"><strong>Figure: Data item block properties</strong></p>
 <p align="center"><img alt="Data item block properties" src="../images/comp_des_data_item.png" /></p>
 <h3>Demo Block Properties</h3>
 <p>The <strong>Demo</strong> block appears only when the workspace is in the demo mode, and the navigation list of parts contains only signals, text, textblock, and swallow parts. The demo properties differ depending on what kind of part or signal is selected:</p>
@@ -362,8 +340,8 @@ For programs like <strong>STATE_SET</strong>, there is also a block used to set
 <p>The <strong>Demo</strong> properties allows you to set a rectangle (and its color), image (with a path to the image file to load the picture from the system), or UI component (predefined list of components to put into the swallow, for example, check, button, and gengrid). In addition, you can set up a certain style for the selected component, from inside the group.</p>
 <p>For any kind of content (UI component, image, or rectangle), you can set up the min and max size, which also helps to determine the resulting behavior of the loaded group.</p>
 
+<p align="center" class="Table"><strong>Table: Demo block properties</strong></p>
 <table>
-<caption>Table: Demo block properties</caption>
 <tbody>
 <tr>
  <th>Content type</th>
@@ -389,44 +367,40 @@ For programs like <strong>STATE_SET</strong>, there is also a block used to set
 <h3>Images</h3>
 
 <p>The image manager shows all images in the project as a grid. Unused images are marked with an exclamation mark <img alt="Exclamation" src="../images/comp_des_icon_exclamation.png" />. When you select an image, you can see its preview and basic info (name, type, location, and size compression type and rate).</p>
-<p class="figure">Figure: Images</p>
+<p align="center"><strong>Figure: Images</strong></p>
 <p align="center"><img alt="Images" src="../images/comp_des_images.png" /></p>
 <p>To add an image into the project, click the <strong>+</strong> button and select it in the file selector. You can add multiple images at once by holding the <strong>Shift</strong> key.</p>
 <p>To delete the selected images, press the <strong>-</strong> button. Only unused images can be deleted, because deleting used images damages all styles where they are used.</p>
 <h3>Sounds</h3>
 
 <p>The sound manager is very similar to the image manager. It shows all sounds and tones in the project and allows adding and removing them. Instead of an image preview, there is a simple sound player.</p>
-<p class="figure">Figure: Sounds</p>
+<p align="center"><strong>Figure: Sounds</strong></p>
 <p align="center"><img alt="Sounds" src="../images/comp_des_sounds.png" /></p>
 
 <h3>Textblock Styles</h3>
 
 <p>The style manager shows all textblock styles in the project. You can expand the style to see all its elements.</p>
-<p class="figure">Figure: Textblock styles</p>
+<p align="center"><strong>Figure: Textblock styles</strong></p>
 <p align="center"><img alt="Textblock styles" src="../images/comp_des_textblock.png" /></p>
 <p><strong>DEFAULT</strong> is a virtual element that defines the properties of the text not enclosed in any element. The element&#39;s attributes can be edited after selecting it. In the left side, you can see how the selected element affects the text in the textblock.</p>
 <h3>Colorclasses</h3>
 
 <p>Color classes are designed to simplify color adjustment in your theme. Changing colors in the color class manager affects all parts in all styles that are using it.</p>
-<p class="figure">Figure: Colorclasses</p>
+<p align="center"><strong>Figure: Colorclasses</strong></p>
 <p align="center"><img alt="Colorclasses" src="../images/comp_des_colorclasses.png" /></p>
 <p>For most part types, only the first color matters. Only the text parts can use all 3 colors.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">If you want some part to have a slightly different color, you can specify both a color and color class. In this case, their values are multiplied. For example, if you have a background color class with the green main color (255, 0, 0, 255) and a part with this color class and a half-transparent white color (255, 255, 255, 127) resulting part color is (255, 0, 0, 127).</td> 
-    </tr> 
-   </tbody> 
-  </table>
+
+<div class="note">
+    <strong>Note</strong>
+    If you want some part to have a slightly different color, you can specify both a color and color class. In this case, their values are multiplied. For example, if you have a background color class with the green main color (255, 0, 0, 255) and a part with this color class and a half-transparent white color (255, 255, 255, 127) resulting part color is (255, 0, 0, 127).
+</div>
+
 <h2 id="shortcuts">Shortcuts</h2>
 
 <p>The following table lists the shortcut keys available for the Component Designer.</p>
 
+<p align="center" class="Table"><strong>Table: Shortcuts</strong></p>
 <table>
-<caption>Table: Shortcuts</caption>
 <tbody>
 <tr>
  <th>Key</th>
index 4eebca5..36eb563 100644 (file)
 <p>When you write code, the API assist feature provides API suggestions to complete the code faster.</p>
 <p>To receive the API suggestions manually, type at least one letter of content, and press <strong>Ctrl + Space</strong>. The suggestion list appears. Use the arrow keys to select a suggestion from the list, and press <strong>Enter</strong> to complete the code.</p>
 
-<p class="figure">Figure: Using API assist</p>
+<p align="center"><strong>Figure: Using API assist</strong></p>
 <p align="center"><img src="../images/content_assist_api.png" alt="API assist" /></p>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">The API assist feature is based on Content Assist in the Eclipse Mars. Like in the Eclipse, you can customize the feature: in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; C/C++ &gt; Editor &gt; Content Assist</strong>. For more information, see the <a href="http://help.eclipse.org/mars/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Freference%2Fcdt_u_c_editor_con_assist.htm" target="_blank">Content Assist preferences</a> help page.</td>
-       </tr>
-</tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    The API assist feature is based on Content Assist in the Eclipse Mars. Like in the Eclipse, you can customize the feature: in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; C/C++ &gt; Editor &gt; Content Assist</strong>. For more information, see the <a href="http://help.eclipse.org/mars/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Freference%2Fcdt_u_c_editor_con_assist.htm" target="_blank">Content Assist preferences</a> help page.
+</div>
 
        <h2 id="hover">API Hover</h2>
        
 <p>When you hover over a Tizen native API function in the source editor, a popup window appears below the function. In that window, you can get detailed information of the API function, such as a brief description, defined parameters, return value type, and exception information.</p>
-<p class="figure">Figure: Using API hover</p>
+<p align="center"><strong>Figure: Using API hover</strong></p>
 <p align="center"><img src="../images/content_assist_api_hover.png" alt="API hover" /></p>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">The API hover feature is based on Hovers in the Eclipse Mars. Like in the Eclipse, you can customize hover behavior: in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; C/C++ &gt; Editor &gt; Hovers</strong>. For more information, see the <a href="http://help.eclipse.org/mars/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Freference%2Fcdt_u_c_editor_hov.htm" target="_blank">Hovers preferences</a> help page.</td>
-       </tr>
-</tbody>
-</table>
-
-
+<div class="note">
+    <strong>Note</strong>
+    The API hover feature is based on Hovers in the Eclipse Mars. Like in the Eclipse, you can customize hover behavior: in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; C/C++ &gt; Editor &gt; Hovers</strong>. For more information, see the <a href="http://help.eclipse.org/mars/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Freference%2Fcdt_u_c_editor_hov.htm" target="_blank">Hovers preferences</a> help page.
+</div>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
index 9b3e9a5..99d715d 100644 (file)
@@ -42,7 +42,7 @@
                <p>The <strong>Resource Manager</strong> view helps you to support specific device configurations, such as different screen densities and languages, in your applications. Tizen native applications can run on different types of devices with various resolutions and resources, and you can develop your applications to support specific or multiple device types and resolutions.</p></li>
 
                <li><a href="po_file_editor_n.htm">PO File Localization Editor</a> <strong>(Localizing Application Resources)</strong>
-               <p>The PO file editor tool is used to localize text strings by editing <span style="font-family: Courier New,Courier,monospace">.po</span> files. Text string localization is the process of translating into different languages the strings used by your application.</p></li>
+               <p>The PO file editor tool is used to localize text strings by editing <code>.po</code> files. Text string localization is the process of translating into different languages the strings used by your application.</p></li>
 </ul>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
index 49d3321..448af87 100644 (file)
@@ -46,7 +46,7 @@
 
 <p>When your application requires real-time changeable layouts, for example, animations, you can write the layout designs using an EDC script, compile it into an EDJ format file, and import it into your application using a UI layout component. You can also write simple and complex design layouts using the EDC script with the EDC Editor. The EDC Editor makes it easier to write the EDC script code and faster to finish your work. If you are not familiar with EDC programming, see <a href="../../../org.tizen.guides/html/native/ui/efl/learn_edc_intro_n.htm">Layouting with EDC</a> for more information.</p>
 
-<p class="figure">Figure: EDC Editor</p> 
+<p align="center"><strong>Figure: EDC Editor</strong></p> 
 <p align="center"><img alt="EDC Editor" src="../images/edceditor_edc_edit.png" /></p>
 <p>The EDC Editor also provides useful functions for you to develop your application UI. Before using the EDC Editor, familiarize yourself with the functionalities described in the following sections.</p>
 
 
 <p>Because of its real-time update mechanism, the EDC Editor updates the preview real-time while you modify the source code in the code view.</p>
 
-<p class="figure">Figure: EDC Editor views</p>
+<p align="center"><strong>Figure: EDC Editor views</strong></p>
 <p align="center"><img alt="EDC Editor views" src="../images/edceditor_edc_edit_views.png" /></p>
 
 <h3>Directory View and Workspace</h3>
 <p>If your EDC collection consists of multiple EDC files, set up a workspace. The default workspace directory is where you opened the EDC file in the Tizen Studio.</p>
 <p>The workspace is designed to be used with the file browser (toggle hotkey, <strong>F9</strong>) and the file tab (toggle hotkey, <strong>F11</strong>) so that you can navigate between multiple EDC files. The file browser (directory view) displays the current workspace directory.</p>
 <p>You can open EDC files in the directory view by double-clicking them. The EDC text file is opened in a new file tab.</p>
-<p>The EDC Editor allows only one main EDC file that can be activated in the live view. In the directory view, the main EDC file is displayed with the <strong>[main]</strong> tag. If the main EDC file contains multiple sub EDC files, you can open and navigate through them. You can open those files in the directory view, or by pressing the <strong>F3</strong> key if the text editor cursor is placed on the <strong>&quot;include&quot;</strong> line in the text view (such as <span style="font-family: Courier New,Courier,monospace">#include &quot;subfile.edc&quot;</span>). To go back to the previously edited file tab, use the <strong>F4</strong> shortcut key.</p>
+<p>The EDC Editor allows only one main EDC file that can be activated in the live view. In the directory view, the main EDC file is displayed with the <strong>[main]</strong> tag. If the main EDC file contains multiple sub EDC files, you can open and navigate through them. You can open those files in the directory view, or by pressing the <strong>F3</strong> key if the text editor cursor is placed on the <strong>&quot;include&quot;</strong> line in the text view (such as <code>#include &quot;subfile.edc&quot;</code>). To go back to the previously edited file tab, use the <strong>F4</strong> shortcut key.</p>
 <p>The EDC Editor tracks the currently focused EDC group to display it while you go through the groups in 1 EDC collection. But if you open a new EDC file which contains another collection, you need to manually set up that file to be a main. To let the EDC Editor know that EDC has a collection to be adoptable with its subordinate files, press the <strong>F2</strong> key after selecting the new main EDC file in the directory view. You can also change the main EDC file in <strong>Settings &gt; EDC Build &gt; Main EDC File</strong>.</p>
 
 <h3>Code View</h3>
@@ -90,7 +90,7 @@
 <ul> 
    <li>Auto-complete
    <p>To help you write EDC source code, the code view supports an auto-complete function, which lists the reserved keywords in a contextual pop-up.</p>
-   <p class="figure">Figure: Auto-complete feature</p>
+   <p align="center"><strong>Figure: Auto-complete feature</strong></p>
    <p align="center"><img alt="Auto-complete feature" src="../images/edceditor_autocomplete.png" /></p>
    <p>When you enter a part of a reserved keyword, a contextual pop-up appears with a list of keywords beginning with your input string. Select a keyword with the up and down arrow keys and press <strong>Enter</strong>. The keyword is selected and a related EDC code snippet is inserted in the code view automatically. In contrast, if you press the <strong>Backspace</strong> key, the auto-complete function is cancelled and the contextual pop-up is dismissed.</p>
    <p>You can also use auto-complete as a contextual help. Press the <strong>Ctrl + Space</strong> key combination to show a list of available keywords in the current cursor position context.</p>
    </li>
    <li>Candidate list
    <p>The EDC script provides a variety of pre-defined keywords, including part object types and program action types. To easily edit the keywords, the code view supports a candidate list function for the keywords. When you double-click a keyword in the code view, the available candidate keyword list based on the context pops up. If you select one of the candidate keywords, the double-clicked keyword is changed to a selected one.</p>
-   <p class="figure">Figure: Candidate list feature</p>
+   <p align="center"><strong>Figure: Candidate list feature</strong></p>
    <p align="center"><img alt="Candidate list feature" src="../images/edceditor_candlist.png" /></p>
    <p>The candidate list function also helps you to know the available range of numeric values based on the context. The numeric candidate function shows a range of available numbers. When you drag the sliders, the EDC Editor updates the preview instantly.</p>
    </li>
    <li>Color selector
    <p>To change color values, use the color selector tool. Each time a &quot;color&quot; keyword is double-clicked, it displays the color selector.</p>
-   <p class="figure">Figure: Color selector feature</p>
+   <p align="center"><strong>Figure: Color selector feature</strong></p>
    <p align="center"><img alt="Color selector feature" src="../images/edceditor_colorselect.png" /></p>
    </li>
    <li>Text zoom
 <p>The preview area displays the EDC source code content as images.</p>
 <p>To change the preview zoom value, use the zoom level controller slider, or press the <strong>Ctrl</strong> key and roll the mouse wheel up and down while the mouse cursor is in the preview area.</p>
 <p>The range of the zoom is from 0.1x to 5.0x.</p>
-<p class="figure">Figure: Preview zooming</p>
+<p align="center"><strong>Figure: Preview zooming</strong></p>
 <p align="center"><img alt="Preview zooming" src="../images/edceditor_prevzoom.png" /></p>
 
 <h3>View Layer</h3>
 <h2 id="edit_tools">Editor Tools</h2>
 <p>The EDC Editor provides useful tool functions through the tool buttons available at the top of the preview and code view areas. The following table lists the tool buttons along with their functions and available hotkeys. To toggle the tools themselves, use the <strong>F7</strong> hotkey.</p>
 
+<p align="center" class="Table"><strong>Table: Tool buttons</strong></p>
 <table>
-<caption>Table: Tool buttons</caption>
 <tbody>
 <tr>
  <th>Icon</th>
 <ul> 
    <li>Highlighting a part object
    <p>To easily identify the part object that you are modifying, the EDC Editor highlights the preview image corresponding to the part object. When you click a part section in the EDC source code, the image corresponding to that part object is highlighted in the preview. Alternatively, clicking a part object image in the preview moves the editor cursor to the corresponding EDC line in the code view.</p>
-<p class="figure">Figure: Part object highlighting</p>
+<p align="center"><strong>Figure: Part object highlighting</strong></p>
 <p align="center"><img alt="Part object highlighting" src="../images/edceditor_objhigh.png" /></p>
    </li>
    <li>Detecting errors
    <p>When errors are detected, the console view at the bottom of the EDC Editor is activated automatically, and the detected errors are listed there. The erroneous code is also underlined in the code view. The console view is deactivated when the errors are fixed.</p>
    <p>The console view behavior is only enabled if the auto hiding console mode is enabled in <strong>Settings &gt; Preference &gt; Auto Hiding Console</strong>. You can change the size of the console view by dragging the pane divider between the code view and the console view. You can also toggle the console view visibility with the <strong>Alt + Up</strong> and <strong>Alt + Down</strong> hotkeys.</p>
    
-<p class="figure">Figure: Error detection</p>
+<p align="center"><strong>Figure: Error detection</strong></p>
 <p align="center"><img alt="Error detection" src="../images/edceditor_errordet.png" /></p>
    
    </li>
    <li>Image preview
    <p>To easily check the image files you use, the code view allows you to preview image files. Write an image keyword and an image file name in the EDC source code and click the image keyword. The preview pop-up of the clicked image file opens. If other image files are written in a previous or next line of the previewed image line, you can view them using the up and down arrow keys or the mouse wheel.</p>
    
-<p class="figure">Figure: Image preview</p>
+<p align="center"><strong>Figure: Image preview</strong></p>
 <p align="center"><img alt="Image preview" src="../images/edceditor_impreview.png" /></p>
 </li>
    <li>Reference popup
    <p>A reference popup is like a manual for the EDC keywords applicable to the current cursor position. It shows a description of an EDC keyword for the beginners, who are not familiar with the EDC programming script language, and helps them to understand the keyword syntax. To pop up the reference, press the <strong>F5</strong> key after positioning the editor cursor on an EDC keyword.</p>
    
-<p class="figure">Figure: Reference popup</p>
+<p align="center"><strong>Figure: Reference popup</strong></p>
 <p align="center"><img alt="Reference popup" src="../images/edceditor_refpop.png" /></p>
 </li>
 </ul>
 <h2 id="live_edit">Using Live Edit</h2>
 <p>The EDC Editor provides a live edit mode to add part objects to the application layout.</p>
 <p>To activate the live edit mode, click one of the part object buttons in the preview area tools. After that, you can add a part object using the live edit contextual pop-up, and change its position and size by dragging. Once you confirm the new part, a code snippet describing it is inserted in the code view. While the live edit mode is active, the code view is disabled.</p>
-<p class="figure">Figure: Live edit mode</p>
+<p align="center"><strong>Figure: Live edit mode</strong></p>
 <p align="center"><img alt="Live edit mode" src="../images/edceditor_liveeditmode.png" /></p>
 <p>In the live edit mode, a wireframe is used to display the outlines of all parts with solid lines, to enable you to understand the logical boundaries of the parts in a layout. You can toggle the wireframe visibility by pressing the <strong>Ctrl + W</strong> key combination.</p>
-<p class="figure">Figure: Wireframes</p>
+<p align="center"><strong>Figure: Wireframes</strong></p>
 <p align="center"><img alt="Wireframes" src="../images/edceditor_wireframe.png" /></p>
 
 <p>To use the live edit mode:</p>
 <h3>View Size</h3>
 <p>When a new group view is shown in the live view area, it has a default view size, 300x300. You can change the view size by clicking the resize button in the status view and using a slider to manipulate the view size. You can control the slider using mouse dragging or the mouse wheel. Each group stores its individual view size, so when you switch views, they can have a different view size. To change the default view size, go to <strong>Settings &gt; Preferences &gt; View Size</strong>.</p>
 <p>You can swap the width and height of the live view instantly by pressing the swap button in the status view. The swap functionality can be used for simulating some scenarios, such as mobile device portrait and landscape modes. </p>
-<p class="figure">Figure: View size change</p>
+<p align="center"><strong>Figure: View size change</strong></p>
 <p align="center"><img alt="View size change" src="../images/edceditor_viewsize.png" /></p>
 
 <h2 id="sett">Settings</h2>
    <li>When the <strong>Auto Hiding Console</strong> option is switched on, the EDC Editor hides the console box automatically when no messages exist after you have fixed all grammatical errors.</li>
    <li>When the <strong>Smart Undo/Redo</strong> option is switched on, the EDC Editor redoes and undoes text word by word. If disabled, redoing and undoing works character by character.</li>
    <li>When the <strong>Error Message Red Alert</strong> option is switched on, the EDC Editor enables the error message red alert effect. When the EDC compilation fails because of a grammatical error, the EDC Editor alerts you with a fading screen effect.
-<p class="figure">Figure: Preference settings</p>
+<p align="center"><strong>Figure: Preference settings</strong></p>
 <p align="center"><img alt="Preference settings" src="../images/edceditor_pref_sett.png" /></p>
 </li>
 </ul>
 <h3>Text Editor</h3>
 <p>The <strong>Text Editor</strong> tab provides text options to control the font size and type. You can also change the text color highlighting scheme. Double-click a keyword in the preview pane to change its color.</p>
-<p class="figure">Figure: Text editor settings</p>
+<p align="center"><strong>Figure: Text editor settings</strong></p>
 <p align="center"><img alt="Text editor settings" src="../images/edceditor_textedit_sett.png" /></p>
 
 <h3>Resources</h3>
 <p>You can control some EDC Editor resources. For example, you can change the image, sound, font, data, and even the main EDC paths.</p>
-<p class="figure">Figure: Resources settings</p>
+<p align="center"><strong>Figure: Resources settings</strong></p>
 <p align="center"><img alt="Resources settings" src="../images/edceditor_resources_sett.png" /></p>
 
 <h2 id="run_edc">Running the EDC Editor</h2>
                        <li>Select a template in the EDC Editor New File dialog.
                        <p>The EDC Editor provides various template samples, which can bring you some ideas about what you can do with EDC programming. The templates contain simple samples and practical examples.</p>
                        <p>If you select a template, the EDC Editor launches the new EDC file with the template source code, allowing you to build your own EDC layout faster.</p>
-                       <p class="figure">Figure: EDC Editor templates</p>
+                       <p align="center"><strong>Figure: EDC Editor templates</strong></p>
                        <p align="center"><img alt="EDC Editor templates" src="../images/edceditor_edc_temp_edit.png" /></p>
                        </li>
                </ol>
@@ -415,9 +415,9 @@ app_get_resource(&quot;edje/my_layout.edj&quot;, edj_path, (int)PATH_MAX);
 elm_layout_file_set(layout, buf, &quot;main&quot;);
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_layout_file_set()</span> function imports 1 group from an EDJ file. You can pass the EDJ file path to the second parameter and the group name to the third parameter. On success, this function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>.</p>
+<p>The <code>elm_layout_file_set()</code> function imports 1 group from an EDJ file. You can pass the EDJ file path to the second parameter and the group name to the third parameter. On success, this function returns <code>EINA_TRUE</code>.</p>
 
-<p class="figure">Figure: Imported EDC layout</p>
+<p align="center"><strong>Figure: Imported EDC layout</strong></p>
 <p align="center"><img alt="Imported EDC layout" src="../images/edceditor_imp_edclay.png" /></p>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
index b831b40..f5575c1 100644 (file)
@@ -47,7 +47,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Using Additional Manifest Elements</h1> 
        
-<p>The following sections summarize some of the common child elements used in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the native application.</p>
+<p>The following sections summarize some of the common child elements used in the <code>tizen-manifest.xml</code> file of the native application.</p>
        
        <h2 name="appcontrol" id="appcontrol">&lt;app-control&gt; Element</h2> 
 <p>This element represents Tizen application control configuration information.</p>
      <th>Occurrences</th> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#operation">&lt;operation&gt;</a></span></td> 
+<td><code><a href="#operation">&lt;operation&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#uri">&lt;uri&gt;</a></span></td> 
+<td><code><a href="#uri">&lt;uri&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#mime">&lt;mime&gt;</a></span></td> 
+<td><code><a href="#mime">&lt;mime&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 </tbody></table>
@@ -90,8 +90,8 @@
 <p>This element represents the operation type of the application control.</p>
          <p><strong>Attributes:</strong> </p>      
          <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">name</span>
-          <p>Name of the application control, for example, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span></p>
+       <li><code>name</code>
+          <p>Name of the application control, for example, <code>http://tizen.org/appcontrol/operation/compose</code></p>
           <p>For more information on the expected values, see <a href="../../../org.tizen.guides/html/native/app_management/common_appcontrol_n.htm">Common Application Controls</a>.</p></li>
       </ul>
 <p><strong>For example:</strong></p>
 <p>This element represents the URI scheme of the application control.</p>
          <p><strong>Attributes:</strong> </p>      
          <ul>
-         <li><span style="font-family: Courier New,Courier,monospace">name</span>
+         <li><code>name</code>
          <p>Name of the URI scheme (string)</p>
          </li>
          </ul>
 <p>This element represents the MIME type of the application control.</p>
          <p><strong>Attributes:</strong> </p>      
          <ul>
-         <li><span style="font-family: Courier New,Courier,monospace">name</span>
+         <li><code>name</code>
          <p>Name of the MIME type (string)</p>
          </li>
          </ul>
       </ul>
          <p><strong>Attributes:</strong> </p>      
          <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">providerid</span>
+       <li><code>providerid</code>
           <p>ID of the data control provider (string)</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace">access</span>
+       <li><code>access</code>
           <p>Access mode of the data control (string)</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace">type</span>
+       <li><code>type</code>
           <p>Type of the data control (string)</p>
           </li>
           </ul>
       </ul>
          <p><strong>Attributes:</strong> </p>      
          <ul>
-<li><span style="font-family: Courier New,Courier,monospace">xml:lang</span>
+<li><code>xml:lang</code>
 <p>Language of the label (available value: &quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;)</p></li>
 </ul>
 
       </ul>
          <p><strong>Attributes:</strong> </p>      
          <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">key</span>
+       <li><code>key</code>
           <p>Key of metadata (string)</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace">value</span>
+       <li><code>value</code>
           <p>Value of metadata (string)</p></li></ul>
 
 <p><strong>For example:</strong></p>
 
 <h2 name="bg-category" id="bg-category">&lt;background-category&gt; Element</h2>
 <p>This element represents the category of the application running on the background.</p>
-<table class="note">
-<tbody>
-<tr><th class="note">Note</th></tr>
-<tr><td class="note">The <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element is not supported for API versions lower than 2.4. An application with a <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element can fail to be installed on devices with a Tizen version lower than 2.4. In this case, the element can be replaced with <span style="font-family: Courier New,Courier,monospace">&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/&lt;value&gt;&quot;/&gt;</span>.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+    <strong>Note</strong>
+    The <code>&lt;background-category&gt;</code> element is not supported for API versions lower than 2.4. An application with a <code>&lt;background-category&gt;</code> element can fail to be installed on devices with a Tizen version lower than 2.4. In this case, the element can be replaced with <code>&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/&lt;value&gt;&quot;/&gt;</code>.
+</div>
 
 <p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> 
 <p><strong>Occurrences:</strong> </p> 
                </ul>
                        <p><strong>Attributes:</strong> </p>      
                <ul>
-                       <li><span style="font-family: Courier New,Courier,monospace">value</span>
+                       <li><code>value</code>
                        <p>Value of the background category (string)</p>
                        </li></ul>
 
index 3e31363..dc26341 100644 (file)
 <div id="container"><div id="contents"><div class="content">
  
   <h1>Configuring the Application Manifest</h1> 
-    <p>A Tizen native application package consists of exactly 1 manifest file, called <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span>, which is used to describe the application information. The manifest file is composed of XML elements, which include the root <a href="#manifest">&lt;manifest&gt;</a> element and its child elements representing application information, such as  <span style="font-family: Courier New,Courier,monospace;">&lt;version&gt;</span>, and <span style="font-family: Courier New,Courier,monospace;">&lt;privileges&gt;</span>. The <a href="#hierarchy">child elements are organized into a specific hierarchy</a>. The elements can have attributes associated with them, providing more information about the element.</p>
+    <p>A Tizen native application package consists of exactly 1 manifest file, called <code>tizen-manifest.xml</code>, which is used to describe the application information. The manifest file is composed of XML elements, which include the root <a href="#manifest">&lt;manifest&gt;</a> element and its child elements representing application information, such as  <code>&lt;version&gt;</code>, and <code>&lt;privileges&gt;</code>. The <a href="#hierarchy">child elements are organized into a specific hierarchy</a>. The elements can have attributes associated with them, providing more information about the element.</p>
 
 <h2 name="editing" id="editing">Editing the Manifest File</h2> 
-<p>There are 2 different ways to edit the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>There are 2 different ways to edit the <code>tizen-manifest.xml</code> file:</p>
 
 <ul>
 <li>Use the text editor to modify the XML structure directly:
-<ol><li>Right-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view.</li>
+<ol><li>Right-click the <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view.</li>
 <li>Select <strong>Open with &gt; Text Editor</strong>.</li>
 </ol>
-<p class="figure">Figure: Text Editor</p>
+<p align="center"><strong>Figure: Text Editor</strong></p>
 <p align="center"><img alt="Text Editor" src="../images/manifest_text.png" /></p>
 </li>
 <li>Use the manifest editor to modify the manifest in a form editor:
-<p>Double-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view.</p> 
+<p>Double-click the <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view.</p> 
 
-<p class="figure">Figure: Manifest editor</p>
+<p align="center"><strong>Figure: Manifest editor</strong></p>
 <p align="center"><img alt="Manifest editor" src="../images/manifest_editor.png" /></p>
 </li>
 </ul>
 
-<table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-      </tr>
-<tr>
-<td class="note">The <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file must conform to both the standard XML file format and the Tizen native application specification requirements. Editing the manifest file XML structure with the text editor is intended for advanced users only. If the file does not conform to the standard and requirements, errors can occur during installation.</td> 
-      </tr>
-</tbody></table>
+<div class="note">
+    <strong>Note</strong>
+    The <code>tizen-manifest.xml</code> file must conform to both the standard XML file format and the Tizen native application specification requirements. Editing the manifest file XML structure with the text editor is intended for advanced users only. If the file does not conform to the standard and requirements, errors can occur during installation.
+</div>
 
 <h2 name="hierarchy" id="hierarchy">Manifest Element Hierarchy</h2> 
-  <p>The Tizen native application manifest file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</p> 
+  <p>The Tizen native application manifest file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <code>tizen-manifest.xml</code> file.</p> 
   
   <table style="border:none;">
 <col width="10%"/>
 <col width="40%"/>
 <tbody>
 <tr>
-<td colspan="7" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#manifest_element">&lt;manifest&gt;</a></span></td>
+<td colspan="7" style="border:none;"><code><a href="#manifest_element">&lt;manifest&gt;</a></code></td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
-               <td colspan="6" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>
+               <td colspan="6" style="border:none;"><code><a href="#author">&lt;author&gt;</a></code></td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
-               <td colspan="6" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>
+               <td colspan="6" style="border:none;"><code><a href="#description">&lt;description&gt;</a></code></td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#service">&lt;service-application&gt;</a></span>
+               <code><a href="#service">&lt;service-application&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#ui">&lt;ui-application&gt;</a></span>
+               <code><a href="#ui">&lt;ui-application&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code>
        </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#account">&lt;account&gt;</a></span>
+               <code><a href="#account">&lt;account&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#accountprovider">&lt;account-provider&gt;</a></span>
+               <code><a href="#accountprovider">&lt;account-provider&gt;</a></code>
                </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="4" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span>
+               <code><a href="#icon">&lt;icon&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="4" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
+               <code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="4" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#capability">&lt;capability&gt;</a></span>
+               <code><a href="#capability">&lt;capability&gt;</a></code>
 </td>
        </tr>
        
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#privileges">&lt;privileges&gt;</a></span>
+               <code><a href="#privileges">&lt;privileges&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#privilege">&lt;privilege&gt;</a></span>
+               <code><a href="#privilege">&lt;privilege&gt;</a></code>
                </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#feature">&lt;feature&gt;</a></span>
+               <code><a href="#feature">&lt;feature&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#profile_element">&lt;profile&gt;</a></span>
+               <code><a href="#profile_element">&lt;profile&gt;</a></code>
 </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#widget_app">&lt;widget-application&gt;</a></span>
+               <code><a href="#widget_app">&lt;widget-application&gt;</a></code>
 </td>
        </tr>   
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#widget_icon">&lt;icon&gt;</a></span>
+               <code><a href="#widget_icon">&lt;icon&gt;</a></code>
                </td>
        </tr>
        <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#widget_label">&lt;label&gt;</a></span>
+               <code><a href="#widget_label">&lt;label&gt;</a></code>
                </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#widget_supportsize">&lt;support-size&gt;</a></span>
+               <code><a href="#widget_supportsize">&lt;support-size&gt;</a></code>
                </td>
        </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#watch_app">&lt;watch-application&gt;</a></span>
+               <code><a href="#watch_app">&lt;watch-application&gt;</a></code>
 </td>
        </tr>   
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#watch_icon">&lt;icon&gt;</a></span>
+               <code><a href="#watch_icon">&lt;icon&gt;</a></code>
                </td>
        </tr>
        <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
                <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="#watch_label">&lt;label&gt;</a></span>
+               <code><a href="#watch_label">&lt;label&gt;</a></code>
                </td>
        </tr>
 </tbody>
 </table>
 
   <h2 name="manifest" id="manifest">Manifest Elements</h2> 
-<p>The following sections summarize the elements used in the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file of the native application.</p>
+<p>The following sections summarize the elements used in the <code>tizen-manifest.xml</code> file of the native application.</p>
   
 <h3 id="manifest_element">&lt;manifest&gt; Element</h3>
-  <p>This element contains the manifest information of the Tizen native application. The <span style="font-family: Courier New,Courier,monospace">&lt;manifest&gt;</span> element is an easily readable description of the Tizen package and serves as a container for the other elements of the configuration document.</p>
+  <p>This element contains the manifest information of the Tizen native application. The <code>&lt;manifest&gt;</code> element is an easily readable description of the Tizen package and serves as a container for the other elements of the configuration document.</p>
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> 
                <p><strong>Occurrences:</strong></p>
                  <ul>
                                        <th>Occurrences</th> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td> 
+<td><code><a href="#author">&lt;author&gt;</a></code></td> 
                                        <td>1 (optional)</td> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td> 
+<td><code><a href="#description">&lt;description&gt;</a></code></td> 
                                        <td>1 or more (optional)</td> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#service">&lt;service-application&gt;</a></span></td> 
+<td><code><a href="#service">&lt;service-application&gt;</a></code></td> 
                                        <td>1 (optional)</td> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#ui">&lt;ui-application&gt;</a></span></td> 
+<td><code><a href="#ui">&lt;ui-application&gt;</a></code></td> 
                                        <td>1 (optional)</td> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#account">&lt;account&gt;</a></span></td>
+<td><code><a href="#account">&lt;account&gt;</a></code></td>
                                        <td>1 (optional)</td>
                                </tr>
                                        <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#privileges">&lt;privileges&gt;</a></span></td> 
+<td><code><a href="#privileges">&lt;privileges&gt;</a></code></td> 
                                        <td>1 (optional)</td> 
                                        </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#feature">&lt;feature&gt;</a></span></td> 
+<td><code><a href="#feature">&lt;feature&gt;</a></code></td> 
                                        <td>1 or more (optional)</td> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#profile_element">&lt;profile&gt;</a></span></td> 
+<td><code><a href="#profile_element">&lt;profile&gt;</a></code></td> 
                                        <td>1 or more (optional)</td> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_app">&lt;widget-application&gt;</a></span></td> 
+<td><code><a href="#widget_app">&lt;widget-application&gt;</a></code></td> 
                                        <td>1 (optional)</td> 
                                </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#watch_app">&lt;watch-application&gt;</a></span></td> 
+<td><code><a href="#watch_app">&lt;watch-application&gt;</a></code></td> 
                                        <td>1 (optional)</td> 
                                </tr>
 </tbody></table>
 
-<p class="figure">Figure: Editing the &lt;manifest&gt; element in the manifest editor</p>
+<p align="center"><strong>Figure: Editing the &lt;manifest&gt; element in the manifest editor</strong></p>
 <p align="center"><img alt="Editing the manifest element in the manifest editor" src="../images/manifest.png" /></p>
 
 <p id="attributes"><strong>Attributes:</strong></p>
                <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">install-location</span></p>
-<p>Installation location for the application (available values: <span style="font-family: Courier New,Courier,monospace">&quot;auto&quot;</span> (the platform decides where the application is installed), <span style="font-family: Courier New,Courier,monospace">&quot;internal-only&quot;</span>, <span style="font-family: Courier New,Courier,monospace">&quot;prefer-external&quot;</span> (preferably installed to an external storage device; however, if the external storage device has no empty space, the application is installed in the internal storage))</p>
-<p>By default, this value is set to <span style="font-family: Courier New,Courier,monospace">&quot;internal-only&quot;</span>. You can select other values to install to an external device, such as an SD card. </p></li> 
-<li><p><span style="font-family: Courier New,Courier,monospace">package</span></p>
-<p>Package of the application (available value: <span style="font-family: Courier New,Courier,monospace">&quot;org.tizen.applicationName&quot;</span>)</p>
+<li><p><code>install-location</code></p>
+<p>Installation location for the application (available values: <code>&quot;auto&quot;</code> (the platform decides where the application is installed), <code>&quot;internal-only&quot;</code>, <code>&quot;prefer-external&quot;</code> (preferably installed to an external storage device; however, if the external storage device has no empty space, the application is installed in the internal storage))</p>
+<p>By default, this value is set to <code>&quot;internal-only&quot;</code>. You can select other values to install to an external device, such as an SD card. </p></li> 
+<li><p><code>package</code></p>
+<p>Package of the application (available value: <code>&quot;org.tizen.applicationName&quot;</code>)</p>
 </li> 
-<li><p><span style="font-family: Courier New,Courier,monospace">type</span></p>
-<p>Package type of the application (available value: <span style="font-family: Courier New,Courier,monospace">&quot;tpk&quot;</span>)</p>
+<li><p><code>type</code></p>
+<p>Package type of the application (available value: <code>&quot;tpk&quot;</code>)</p>
 </li> 
-<li><p><span style="font-family: Courier New,Courier,monospace">version</span></p>
+<li><p><code>version</code></p>
 <p>Version number of the application (available value: number in the &quot;x.y.z&quot; format, where 0 &lt;= x &lt;= 255, 0 &lt;= y &lt;= 255, and 0 &lt;= z &lt;= 65535)</p>
 </li> 
-<li><p><span style="font-family: Courier New,Courier,monospace">api-version</span></p>
-<p>API version number for the application (available value: number in the &quot;x.y.z&quot; format, where z is optional, for example, <span style="font-family: Courier New,Courier,monospace">2.3.1</span> or <span style="font-family: Courier New,Courier,monospace">2.4</span>)</p></li> 
+<li><p><code>api-version</code></p>
+<p>API version number for the application (available value: number in the &quot;x.y.z&quot; format, where z is optional, for example, <code>2.3.1</code> or <code>2.4</code>)</p></li> 
         </ul>
 
 <p><strong>For example:</strong> </p> 
     
 <p><strong>Attributes:</strong></p>
                <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">email</span></p>
+<li><p><code>email</code></p>
 <p>Email of the package creator (available value: any valid email ID string value)</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">href</span></p>
+<li><p><code>href</code></p>
 <p>Web site of the package creator, such as a homepage or a profile on a social network (available value: any valid Web site string value)</p></li>
 </ul>
 
 
          <p><strong>Attributes:</strong> </p>      
          <ul>
-<li><span style="font-family: Courier New,Courier,monospace">xml:lang</span>
+<li><code>xml:lang</code>
 <p>Language and country code (available value: &quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;)</p></li>
       </ul>
 <p><strong>Expected value:</strong> </p>      
      <th>Occurrences</th> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span></td> 
+       <td><code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">appid</span>
+       <li><code>appid</code>
                <p>Application unique ID (string)</p>
                <p>This can be used at launching or terminating the application explicitly.</p></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">exec</span>
+       <li><code>exec</code>
           <p>Application executable file path (string)</p></li> 
-          <li><span style="font-family: Courier New,Courier,monospace">multiple</span>
-          <p>Indicates whether the application can be launched as a multiple (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace">taskmanage</span>
-          <p>Indicates whether the application is shown in the task manager (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>(</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace">type</span>
-          <p>Tizen application type (available values: <span style="font-family: Courier New,Courier,monospace">capp</span>, <span style="font-family: Courier New,Courier,monospace">c++app</span>, <span style="font-family: Courier New,Courier,monospace">webapp</span>)</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">auto-restart</span>
-          <p>Indicates whether the application is relaunched automatically if it is terminated abnormally (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <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">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
+          <li><code>multiple</code>
+          <p>Indicates whether the application can be launched as a multiple (available values: <code>true</code>, <code>false</code>)</p></li>
+       <li><code>taskmanage</code>
+          <p>Indicates whether the application is shown in the task manager (available values: <code>true</code>, <code>false</code>(</p></li>
+       <li><code>type</code>
+          <p>Tizen application type (available values: <code>capp</code>, <code>c++app</code>, <code>webapp</code>)</p></li>
+          <li><code>auto-restart</code>
+          <p>Indicates whether the application is relaunched automatically if it is terminated abnormally (available values: <code>true</code>, <code>false</code>)</p>
+<div class="note">
+    <strong>Note</strong>
+    This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.
+</div>  
           </li> 
-       <li><span style="font-family: Courier New,Courier,monospace">on-boot</span>
-          <p>Indicates whether the application is launched automatically on device booting time or application installation time (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <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">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+       <li><code>on-boot</code>
+          <p>Indicates whether the application is launched automatically on device booting time or application installation time (available values: <code>true</code>, <code>false</code>)</p>
+
+<div class="note">
+    <strong>Note</strong>
+    This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.
+</div>
   </li>
   </ul>
 
      <th>Occurrences</th> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span></td> 
+       <td><code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code></td> 
        <td>1 or more (optional)</td> 
        </tr>
 
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
-<li><span style="font-family: Courier New,Courier,monospace">appid</span>
+<li><code>appid</code>
 <p>Application unique ID (string)</p>
 <p>This can be used at launching or terminating the application explicitly.</p></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">exec</span>
+       <li><code>exec</code>
           <p>Application executable file path (string)</p></li> 
-          <li id="launch_mode"><span style="font-family: Courier New,Courier,monospace">launch_mode</span>
-          <p>Application launch mode (available values: <span style="font-family: Courier New,Courier,monospace">single</span> (launched as a main application), <span style="font-family: Courier New,Courier,monospace">group</span> (launched as a sub application), <span style="font-family: Courier New,Courier,monospace">caller</span> (caller application <a href="../../../org.tizen.guides/html/native/app_management/app_controls_n.htm#mode">defines the launch mode</a> with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function))</p>
-          <p>By default, this value is set to <span style="font-family: Courier New,Courier,monospace">single</span>.</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">multiple</span>
-          <p>Indicates whether the application can be launched as a multiple (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">nodisplay</span>
-          <p>Indicates whether the application is shown in the app-tray (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">taskmanage</span>
-          <p>Indicates whether the application is shown in the task manager (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">hw-acceleration</span>
-          <p>Indicates the application hardware acceleration status (available values: <span style="font-family: Courier New,Courier,monospace">default</span> (depends on the system setting), <span style="font-family: Courier New,Courier,monospace">on</span> (use hardware acceleration))</p>
-          <p>By default, this value is set to <span style="font-family: Courier New,Courier,monospace">default</span>.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace">type</span>
-          <p>Tizen application type (available values: <span style="font-family: Courier New,Courier,monospace">capp</span>, <span style="font-family: Courier New,Courier,monospace">c++app</span>, <span style="font-family: Courier New,Courier,monospace">webapp</span>)</p></li>
+          <li id="launch_mode"><code>launch_mode</code>
+          <p>Application launch mode (available values: <code>single</code> (launched as a main application), <code>group</code> (launched as a sub application), <code>caller</code> (caller application <a href="../../../org.tizen.guides/html/native/app_management/app_controls_n.htm#mode">defines the launch mode</a> with the <code>app_control_set_launch_mode()</code> function))</p>
+          <p>By default, this value is set to <code>single</code>.</p></li>
+          <li><code>multiple</code>
+          <p>Indicates whether the application can be launched as a multiple (available values: <code>true</code>, <code>false</code>)</p></li>
+          <li><code>nodisplay</code>
+          <p>Indicates whether the application is shown in the app-tray (available values: <code>true</code>, <code>false</code>)</p></li> 
+       <li><code>taskmanage</code>
+          <p>Indicates whether the application is shown in the task manager (available values: <code>true</code>, <code>false</code>)</p></li>
+          <li><code>hw-acceleration</code>
+          <p>Indicates the application hardware acceleration status (available values: not defined (depends on the system setting), <code>on</code> (use hardware acceleration), <code>off</code> (do not use hardware acceleration))</p>
+          <p>By default, this value is set to <code>default</code>.</p></li>
+       <li><code>type</code>
+          <p>Tizen application type (available values: <code>capp</code>, <code>c++app</code>, <code>webapp</code>)</p></li>
       </ul>
 
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">&lt;ui-application appid=&quot;org.tizen.uiapp&quot; exec=&quot;uiapp&quot; launch_mode=&quot;single&quot; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; nodisplay=&quot;false&quot; taskmanage=&quot;true&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hw-acceleration=&quot;default&quot; type=&quot;capp&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hw-acceleration=&quot;on&quot; type=&quot;capp&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;label&gt;uiapplication&lt;/label&gt;
 &nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;testlang&lt;/label&gt;
 &nbsp;&nbsp;&nbsp;&lt;icon&gt;uiapp.png&lt;/icon&gt;
      <th>Occurrences</th> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#accountprovider">&lt;account-provider&gt;</a></span></td> 
+<td><code><a href="#accountprovider">&lt;account-provider&gt;</a></code></td> 
      <td>1 or more</td> 
     </tr>
 </tbody></table>
      <th>Occurrences</th> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span></td> 
+<td><code><a href="#icon">&lt;icon&gt;</a></code></td> 
      <td>1 or more</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span></td> 
+<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td> 
      <td>1 or more</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#capability">&lt;capability&gt;</a></span></td> 
+<td><code><a href="#capability">&lt;capability&gt;</a></code></td> 
      <td>1 or more (optional)</td> 
     </tr>
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">appid</span>
+               <li><code>appid</code>
                <p>Application unique ID (string)</p>
                <p>This can be used at launching or terminating the application explicitly. </p></li> 
-               <li><span style="font-family: Courier New,Courier,monospace">multiple-accounts-support</span>
-               <p>Indicates whether multiple accounts are supported (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li> 
-               <li><span style="font-family: Courier New,Courier,monospace">providerid</span>
+               <li><code>multiple-accounts-support</code>
+               <p>Indicates whether multiple accounts are supported (available values: <code>true</code>, <code>false</code>)</p></li> 
+               <li><code>providerid</code>
                <p>ID of the account provider (string)</p></li> 
       </ul>
 
   <p>This element contains the account provider icon image. Since the icons are used in the device under settings, the account icons are placed in a shared directory.</p>
          <p><strong>Attributes:</strong> </p>      
       <ul>
-<li><span style="font-family: Courier New,Courier,monospace">section</span>
-<p>Usage information of the icon image (available values: <span style="font-family: Courier New,Courier,monospace">account</span> (image size: 72 x 72 for density xhigh and 48 x 48 for density high), <span style="font-family: Courier New,Courier,monospace">account-small</span> (image size: 45 x 45 for density xhigh and 30 x 30 for density high))</p></li> 
+<li><code>section</code>
+<p>Usage information of the icon image (available values: <code>account</code> (image size: 72 x 72 for density xhigh and 48 x 48 for density high), <code>account-small</code> (image size: 45 x 45 for density xhigh and 30 x 30 for density high))</p></li> 
       </ul>
 <p><strong>Expected value:</strong> </p>      
       <ul>
 </pre>
 
 <h4 id="capability">&lt;capability&gt; Element</h4>
-  <p>This element contains the account provider capability. The capabilities are defined as <span style="font-family: Courier New,Courier,monospace">http://&lt;VENDOR_INFORMATION&gt;/account/capability/&lt;NAME&gt;</span>.</p>
+  <p>This element contains the account provider capability. The capabilities are defined as <code>http://&lt;VENDOR_INFORMATION&gt;/account/capability/&lt;NAME&gt;</code>.</p>
          <p><strong>Expected value:</strong> </p>      
       <ul>
 <li>IRI string</li> 
 <h3 id="privileges">&lt;privileges&gt; Element</h3>
   <p>This element contains a set of required privileges for the Tizen application.</p>
 
-<p>Applications that use sensitive APIs must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. Since the privilege categories differ for each API type, make sure you define a <a href="../../../org.tizen.training/html/native/details/sec_privileges_n.htm">correct privilege related to the API you need</a>.</p>
+<p>Applications that use sensitive APIs must declare the required privileges in the <code>tizen-manifest.xml</code> file. Since the privilege categories differ for each API type, make sure you define a <a href="../../../org.tizen.training/html/native/details/sec_privileges_n.htm">correct privilege related to the API you need</a>.</p>
 
 <p>Click <strong>+</strong> to open the <strong>Add Privilege</strong> dialog.</p>
-<p class="figure">Figure: Editing the &lt;privileges&gt; element in the manifest editor</p>
+<p align="center"><strong>Figure: Editing the &lt;privileges&gt; element in the manifest editor</strong></p>
 <p align="center"><img alt="Editing the privileges element in the manifest editor" src="../images/manifest_privilege.png" /></p>
 
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
      <th>Occurrences</th> 
     </tr>
 <tr>
-<td><a href="#privilege"><span style="font-family: Courier New,Courier,monospace">&lt;privilege&gt;</span></a></td> 
+<td><a href="#privilege"><code>&lt;privilege&gt;</code></a></td> 
      <td>1 or more (optional)</td> 
     </tr>
 </tbody></table>
 <p>Name (mandatory, the URI of the Device API privilege)</p>
 <p>For example:</p>     
          <ul>
-         <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/application.admin</span></li>
-      <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span></li>
-      <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span></li>
+         <li><code>http://tizen.org/privilege/application.admin</code></li>
+      <li><code>http://tizen.org/privilege/appmanager.launch</code></li>
+      <li><code>http://tizen.org/privilege/account.read</code></li>
 
       </ul>
 <p>For more information on the expected values, see <a href="../../../org.tizen.training/html/native/details/sec_privileges_n.htm">Security and API Privileges</a>.</p> 
   <p>This element contains a list of required features for feature-based filtering in the Tizen Store.</p> 
 
 <p>The element is used to define the hardware and software components for the Tizen application. In order to use or access an API that is specialized for each vendor or platform, the feature must be declared. This element has no child elements.</p>
-<p class="figure">Figure: Editing the &lt;feature&gt; element in the manifest editor</p>
+<p align="center"><strong>Figure: Editing the &lt;feature&gt; element in the manifest editor</strong></p>
 <p align="center"><img alt="Editing the feature element in the manifest editor" src="../images/manifest_features.png" /></p>
 
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>  <p><strong>Occurrences:</strong> </p>
       </ul>
 <p><strong>Attributes:</strong> </p>      
          <ul>
-<li><span style="font-family: Courier New,Courier,monospace">name</span> (mandatory, a feature key URI)
-<p>Item name used in feature-based filtering in the Tizen Store, for example, <span style="font-family: Courier New,Courier,monospace">&quot;http://tizen.org/feature/camera&quot;</span>, <span style="font-family: Courier New,Courier,monospace">&quot;http://tizen.org/feature/fmradio&quot;</span></p>
+<li><code>name</code> (mandatory, a feature key URI)
+<p>Item name used in feature-based filtering in the Tizen Store, for example, <code>&quot;http://tizen.org/feature/camera&quot;</code>, <code>&quot;http://tizen.org/feature/fmradio&quot;</code></p>
 <p>For more information on the expected values and the application filtering mechanism, see <a href="../../../org.tizen.training/html/native/details/app_filtering_n.htm">Application Filtering</a>.</p></li> 
       </ul>
 
 <h3 id="profile_element">&lt;profile&gt; Element</h3>
   <p>This element contains the targeted requirements for specific device categories, which layer on top of the Tizen Common Platform, including additional components for devices, APIs, and hardware requirements. The platform must conform to the Tizen common requirements as well as at least 1 profile.</p>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;profile&gt;</span> element determines on which kind of device the Tizen package operates. This element has no child elements.</p>
+<p>The <code>&lt;profile&gt;</code> element determines on which kind of device the Tizen package operates. This element has no child elements.</p>
 
 <p><strong>Occurrences:</strong> </p>
     <ul>
     </ul>
 <p><strong>Attributes:</strong> </p>
     <ul>
-<li><span style="font-family: Courier New,Courier,monospace">name</span>
-<p>Profile name (available values: <span style="font-family: Courier New,Courier,monospace">mobile</span>, <span style="font-family: Courier New,Courier,monospace">wearable</span>)</p></li>
+<li><code>name</code>
+<p>Profile name (available values: <code>mobile</code>, <code>wearable</code>)</p></li>
     </ul>
 
 <p><strong>For example:</strong></p>
      <th>Occurrences</th> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_icon">&lt;icon&gt;</a></span></td> 
+<td><code><a href="#widget_icon">&lt;icon&gt;</a></code></td> 
      <td>1 or more</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_label">&lt;label&gt;</a></span></td> 
+<td><code><a href="#widget_label">&lt;label&gt;</a></code></td> 
      <td>1 or more</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_supportsize">&lt;support-size&gt;</a></span></td> 
+<td><code><a href="#widget_supportsize">&lt;support-size&gt;</a></code></td> 
      <td>1</td> 
     </tr>
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">appid</span>
+               <li><code>appid</code>
                
                <p>Widget application unique ID (string)</p></li> 
-               <li><span style="font-family: Courier New,Courier,monospace">exec</span>
+               <li><code>exec</code>
                <p>Widget application executable file name (string)</p></li> 
-               <li><span style="font-family: Courier New,Courier,monospace">main</span>
-               <p>Indicates which widget application is the main application (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li> 
-               <li><span style="font-family: Courier New,Courier,monospace">update-period</span>
+               <li><code>main</code>
+               <p>Indicates which widget application is the main application (available values: <code>true</code>, <code>false</code>)</p></li> 
+               <li><code>update-period</code>
                <p>Indicates the update period in seconds (available values: time in seconds)</p>
                <p>Multiples of 1800 only allowed.</p></li> 
       </ul>
       </ul>
 <p><strong>Attributes:</strong> </p> 
                <ul>
-         <li><span style="font-family: Courier New,Courier,monospace">preview</span>
+         <li><code>preview</code>
          <p>Relative path to the preview image (available values: file name)</p>
          <p>The image is shown on the home screen when the user tries to select the widget.</p></li>
       </ul>
 
 <p><strong>Expected value:</strong> </p>     
          <ul>
-         <li><span style="font-family: Courier New,Courier,monospace">2x2</span> (in mobile and wearable)</li>
-         <li><span style="font-family: Courier New,Courier,monospace">4x1</span> (in mobile only)</li>
-         <li><span style="font-family: Courier New,Courier,monospace">4x2</span> (in mobile only)</li>
-         <li><span style="font-family: Courier New,Courier,monospace">4x3</span> (in mobile only)</li>
-      <li><span style="font-family: Courier New,Courier,monospace">4x4</span> (in mobile only)</li>
+         <li><code>2x2</code> (in mobile and wearable)</li>
+         <li><code>4x1</code> (in mobile only)</li>
+         <li><code>4x2</code> (in mobile only)</li>
+         <li><code>4x3</code> (in mobile only)</li>
+      <li><code>4x4</code> (in mobile only)</li>
       </ul>
 
 <p><strong>For example:</strong></p>
                   <th>Occurrences</th>
    </tr>
    <tr>
-                  <td><span style="font-family: Courier New,Courier,monospace"><a href="#watch_icon">&lt;icon&gt;</a></span></td>
+                  <td><code><a href="#watch_icon">&lt;icon&gt;</a></code></td>
                   <td>1</td>
    </tr>
    <tr>
-                  <td><span style="font-family: Courier New,Courier,monospace"><a href="#watch_label">&lt;label&gt;</a></span></td>
+                  <td><code><a href="#watch_label">&lt;label&gt;</a></code></td>
                   <td>1</td>
    </tr>
 
    </tbody></table>
    <p><strong>Attributes:</strong> </p>
    <ul>
-                  <li><span style="font-family: Courier New,Courier,monospace">appid</span>
+                  <li><code>appid</code>
                   <p>Watch application unique ID (string)</p></li>
-                  <li><span style="font-family: Courier New,Courier,monospace">exec</span>
+                  <li><code>exec</code>
                   <p>Watch application executable file path (string)</p></li>
-                  <li><span style="font-family: Courier New,Courier,monospace">ambient-support</span>
-                  <p>Indicates whether the application draws the ambient mode UI itself (available values: <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace">false</span>)</p>
-                  <p>If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the system default ambient mode UI is shown when the devices enters the ambient mode.</p></li>
+                  <li><code>ambient-support</code>
+                  <p>Indicates whether the application draws the ambient mode UI itself (available values: <code>true</code>, <code>false</code>)</p>
+                  <p>If the value is <code>false</code>, the system default ambient mode UI is shown when the devices enters the ambient mode.</p></li>
    </ul>
 
 <pre class="prettyprint">
index 752ea8b..2f24700 100644 (file)
 <li>Internationalization (i18n)</li>
 </ul>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note"><strong>Screen density</strong>
+<div class="note">
+    <strong>Note</strong>
+    <strong>Screen density</strong>
                <p>Screen density is usually referred to as DPI (dots per inch), which means the number of individual dots that can be placed in a line within the span of 1 inch (2.54 cm).</p>
                <p><strong>Resource</strong></p>
                <p>Resources are, for example, images, strings, application binary, and references of external places (such as files and networks). They are used only on runtime in Tizen.</p>
                </ul>
                <p><strong>Internationalization and localization</strong></p>
                <p>Tizen provides localized resources to make your application usable for different countries. The Tizen Studio supports the <strong>Resource Manager</strong> view and string localization (with the PO file editor). By using the Resource Manager, you can make an application that contains a variety of languages.</p>
-       </td>
-       </tr>
-</tbody>
-</table>
+</div>
 
 <h2 id="config">Configuring Multiple Screens</h2>
 
@@ -82,8 +75,8 @@
 <p>There are 2 screen configuration types:</p>
 <ul>
 <li>Common configuration (provided by default)
+<p align="center" class="Table"><strong>Table: Common configuration</strong></p>
 <table>
-<caption>Table: Common configuration</caption>
 <tbody>
        <tr>
                <th>Qualifier</th>
 <p>Auto-scaling, auto-resizing, and auto-setting features enable the UI layout of an application to adapt to different screen resolutions, screen sizes, and screen orientations.</p>
 <p>You must prepare screen configurations for your application. By default, the common configuration is used for the adaptation. If your application is designed for a specific screen, you must make a custom configuration for it.</p>
 
-<p class="figure">Figure: Configuration relationships</p>
+<p align="center"><strong>Figure: Configuration relationships</strong></p>
 <p align="center"><img src="../images/multiple_screen_relations.png" alt="Configuration relationships" /></p>
 
 <p>You can also make a specific configuration for various Tizen devices.</p>
 
+<p align="center" class="Table"><strong>Table: Device-specific configurations</strong></p>
 <table>
-       <caption>Table: Device-specific configurations</caption>
        <tbody>
                <tr>
                        <th>Screen resolution</th>
 
 <p>The screen configuration consists of resources and UI layouts. The resources consist of the screen density and locale, while the UI layout consists of the screen density and screen orientation.</p>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note"><strong>Screen resolution</strong>
+<div class="note">
+    <strong>Note</strong>
+<strong>Screen resolution</strong>
 <p>The total number of physical pixels on a screen.</p>
 <p><strong>Screen orientation</strong></p>
 <p>The way in which a rectangular screen is oriented for normal viewing:</p>
 <li>Landscape: the width of the display area is greater than the height.</li>
 <li>Portrait: the height of the display area is greater than the width.</li>
 </ul>
-       </td>
-       </tr>
-</tbody>
-</table>
-
+</div>
 
 <p>The following table shows the components for multiple screens.</p>
-<table>
-       <caption>
-       Table: Components for multiple screens
-       </caption>
+<p align="center" class="Table"><strong>Table: Components for multiple screens</strong></p>
+<table>        
        <tbody>
        <tr>
                <th>Category</th>
                <td rowspan="3">Tizen Studio</td>
                <td>Resource Manager</td>
                <td>Provides the features to add, delete, or change the resources for the screen configuration and supports drag and drop for placing the UI layout.
-               <p>Paths of alternative resources used for multiple screens are written in the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file, which is referenced at runtime.</p>
+               <p>Paths of alternative resources used for multiple screens are written in the <code>res.xml</code> file, which is referenced at runtime.</p>
                </td>
        </tr>
        <tr>
 
 <p>If you develop an application for a locale, you must register the localized strings displayed at runtime before preparing the multiple screens. The PO file editor is needed for this. To open the editor, right-click the PO file in the <strong>Project Explorer</strong> view and select <strong>Localization</strong>.</p>
 
-<p class="figure">Figure: PO file editor</p>
+<p align="center"><strong>Figure: PO file editor</strong></p>
 <p align="center"><img src="../images/multiple_screen_po_file.png" alt="PO file editor" /></p>
 
 <p>For more information, see <a href="po_file_editor_n.htm">Localizing Applications</a>.</p>
 
-<p>The naming convention for string resources in the <strong>Properties</strong> view is <span style="font-family: Courier New,Courier,monospace">@resource/&lt;Resource ID&gt;</span>, where <span style="font-family: Courier New,Courier,monospace">@resource</span> is an annotation symbol as an alternative resource definition to replace the resource file, and the <span style="font-family: Courier New,Courier,monospace">&lt;Resource ID&gt;</span> is the resource key.</p>
+<p>The naming convention for string resources in the <strong>Properties</strong> view is <code>@resource/&lt;Resource ID&gt;</code>, where <code>@resource</code> is an annotation symbol as an alternative resource definition to replace the resource file, and the <code>&lt;Resource ID&gt;</code> is the resource key.</p>
 
 <p>The following figure shows how to set an alternative resource string in the <strong>Properties</strong> view.</p>
 
-<p class="figure">Figure: Localizing a string in the Properties view</p>
+<p align="center"><strong>Figure: Localizing a string in the Properties view</strong></p>
 <p align="center"><img src="../images/multiple_screen_loc.png" alt="Localizing strings" /></p>
 
 <p>To localize a string:</p>
 </li>
 </ol>
 
-
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note"><strong>Variation property of the UI component</strong>
+<div class="note">
+    <strong>Note</strong>
+<strong>Variation property of the UI component</strong>
 <p>UI component properties are classified based on the screen configuration type into basic and variable properties. The variable properties are comprised of the following:</p>
 <ul>
-<li>Visibility: Whether the UI component is shown (<span style="font-family: Courier New,Courier,monospace">true</span>) or hidden (<span style="font-family: Courier New,Courier,monospace">false</span>).</li>
+<li>Visibility: Whether the UI component is shown (<code>true</code>) or hidden (<code>false</code>).</li>
 <li>Packing: Position and size of the UI component attached to the parent container.
 The packing information has different meanings in different kinds of UI containers. For more information, see <a href="component_attributes_n.htm">Meta Schema in layout.xml</a> (Grid section).</li>
 </ul>
-       </td>
-       </tr>
-</tbody>
-</table>
+</div>
 
 <h3>Alternative Resources</h3>
 
-<p>To use alternative resources on the application, you must create subdirectories with reserved names in the <span style="font-family: Courier New,Courier,monospace">res/contents</span> directory of your project.</p>
+<p>To use alternative resources on the application, you must create subdirectories with reserved names in the <code>res/contents</code> directory of your project.</p>
 <p>To use alternative resources, you must follow the naming configuration rules.</p>
 
+<p align="center" class="Table"><strong>Table: Configuration rules for the alternative resources</strong></p>
 <table>
-<caption>Table: Configuration rules for the alternative resources</caption>
        <tbody>
                <tr>
                        <th>Qualifier</th>
@@ -297,20 +272,13 @@ The packing information has different meanings in different kinds of UI containe
        </tbody>
 </table>
 
-<p>For example, the resource naming for the English locale and medium density is defined as <span style="font-family: Courier New,Courier,monospace">en_US-MDPI</span>.</p>
+<p>For example, the resource naming for the English locale and medium density is defined as <code>en_US-MDPI</code>.</p>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">If there is no alternative resource corresponding to a specific locale, the default resource is displayed on the screen.
+<div class="note">
+    <strong>Note</strong>
+If there is no alternative resource corresponding to a specific locale, the default resource is displayed on the screen.
                <p>If there is no default resource, a blank is displayed on the screen. To avoid blanks, set a default resource.</p>
-               </td>
-       </tr>
-</tbody>
-</table>
+</div>
 
 <p>By using the <strong>Resource Manager</strong> view, you can set specific resources for the locale and screen density:</p>
 <ol>
@@ -327,7 +295,7 @@ The packing information has different meanings in different kinds of UI containe
 
 <p>The following figure shows how to use an alternative resource image from the <strong>Resource Manager</strong> view.</p>
 
-<p class="figure">Figure: Using an alternative resource image from the Resource Manager view</p>
+<p align="center"><strong>Figure: Using an alternative resource image from the Resource Manager view</strong></p>
 <p align="center"><img src="../images/multiple_screen_alternative.png" alt="Using alternative resources" /></p>
 
 <p>To use alternative resources:</p>
@@ -341,10 +309,10 @@ The packing information has different meanings in different kinds of UI containe
 
 <p>You must also specify the selected alternative resource in the <strong>Properties</strong> view.</p>
 
-<p class="figure">Figure: Specifying the alternative resource in the Properties view</p>
+<p align="center"><strong>Figure: Specifying the alternative resource in the Properties view</strong></p>
 <p align="center"><img src="../images/multiple_screen_alternative2.png" alt="Specifying alternative resources" /></p>
 
-<p>The naming rule for alternative resources in the <strong>Properties</strong> view is <span style="font-family: Courier New,Courier,monospace">@resource/key</span>, where <span style="font-family: Courier New,Courier,monospace">@resource</span> is the annotation symbol specifying the resource file for the alternative resource, and <span style="font-family: Courier New,Courier,monospace">key</span> is the resource key.</p>
+<p>The naming rule for alternative resources in the <strong>Properties</strong> view is <code>@resource/key</code>, where <code>@resource</code> is the annotation symbol specifying the resource file for the alternative resource, and <code>key</code> is the resource key.</p>
 <p>When you enter &#39;@&#39; at the <strong>Image path</strong> in the <strong>Properties</strong> view, the auto-completion shows a list of resource keys.</p>
 
                        <h2 id="alternative">Using Alternative UI Layouts</h2>
@@ -384,7 +352,7 @@ The packing information has different meanings in different kinds of UI containe
 <p>When the size of the UI component in a specific configuration is modified, the default screen configuration is separated and mapped to the new screen configuration. The <strong>Variation</strong> property of the UI component is created and set only for the modified specific configuration.</p>
 </li>
 <li>Add a UI component to the specific configuration.
-<p>If you check a UI component in the common configuration, the <strong>Visibility</strong> of the UI component is changed to <span style="font-family: Courier New,Courier,monospace">false</span> and it does not appear in the UI design area.</p>
+<p>If you check a UI component in the common configuration, the <strong>Visibility</strong> of the UI component is changed to <code>false</code> and it does not appear in the UI design area.</p>
 </li>
 </ol>
 </li>
index 3f91014..903be71 100644 (file)
 <p>Tizen works in many environments with different countries, regions, languages, and cultures. To make your application suitable for various device environments, localize application resources, such as text strings, layouts, sounds, and graphics.</p>
 <p>This topic helps you localize text strings. Text string localization is the process of translating into different languages the strings used by your application.</p>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">Internationalization is the process of making your application able to adapt to different languages, regions, and cultures.
+<div class="note">
+    <strong>Note</strong>
+Internationalization is the process of making your application able to adapt to different languages, regions, and cultures.
                <p>Localization is the process of translating your application into multiple languages.</p>
-</td>
-       </tr>
-</tbody>
-</table>
+</div>
 
 <p>The PO file editor is a visual editor for <a href="https://www.gnu.org/software/gettext/" target="_blank">.po files</a>. It allows you to easily add, edit, and remove supported languages and strings. You can also check all strings of a supported language at a glance.</p>
 
 <p>To open the PO file editor, use one of the following methods:</p>
 <ul>
 <li>Right-click a project in the <strong>Project Explorer</strong> view, and select <strong>Localization</strong>.</li>
-<li>Double-click the <span style="font-family: Courier New,Courier,monospace">.po</span> file in the <strong>Profile Explorer</strong> view.</li>
+<li>Double-click the <code>.po</code> file in the <strong>Profile Explorer</strong> view.</li>
 </ul>
 
-<p class="figure">Figure: PO file editor</p>
+<p align="center"><strong>Figure: PO file editor</strong></p>
 <p align="center"><img src="../images/po_file_editor.png" alt="PO file editor" /></p>
 
        
@@ -72,7 +65,7 @@
        
 <p>To add a new language, click the Add Language icon (<img src="../images/po_file_editor_add_icon.png" alt="Add language" />) and select a language code item in the <strong>Add Languages</strong> dialog.</p>
 
-<p class="figure">Figure: Adding a language</p>
+<p align="center"><strong>Figure: Adding a language</strong></p>
 <p align="center"><img src="../images/po_file_editor_add.png" alt="Adding a language" /></p>
 
 <p>If you select a base language when adding a new language, you can add and edit strings based on the base language. For example, you can select English (US) as base language when adding a new English (Canada) language, if the English (US) language already exists.</p>
@@ -83,7 +76,7 @@
 
 <p>The string table in the PO file editor shows the string keys and translated strings of the supported languages. The string keys are in the first column, and the translated strings are listed from the second column forward.</p>
 
-<p class="figure">Figure: String table</p>
+<p align="center"><strong>Figure: String table</strong></p>
 <p align="center"><img src="../images/po_file_editor_string.png" alt="String table" /></p>
 
 <p>To manage strings:</p>
 </li>
 </ul>
 
-<table class="note">
-<tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">The <span style="font-family: Courier New,Courier,monospace">.po</span> file name usually has the form <span style="font-family: Courier New,Courier,monospace">&lt;ll&gt;_&lt;CC&gt;.po</span>, where <span style="font-family: Courier New,Courier,monospace">&lt;ll&gt;</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html" target="_blank">ISO 639</a> 2-letter language code, and <span style="font-family: Courier New,Courier,monospace">&lt;CC&gt;</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html" target="_blank">ISO 3166</a> 2-letter country code. For example, for German in Germany, the file name is <span style="font-family: Courier New,Courier,monospace">de_DE.po</span>.</td>
-       </tr>
-</tbody>
-</table>
-
-
-
+<div class="note">
+    <strong>Note</strong>
+       The <code>.po</code> file name usually has the form <code>&lt;ll&gt;_&lt;CC&gt;.po</code>, where <code>&lt;ll&gt;</code> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html" target="_blank">ISO 639</a> 2-letter language code, and <code>&lt;CC&gt;</code> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html" target="_blank">ISO 3166</a> 2-letter country code. For example, for German in Germany, the file name is <code>de_DE.po</code>.
+</div>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
index 343d386..3abe3b5 100644 (file)
 <ol>
 <li>In the Tizen Studio, open the project you want to convert.</li>
 <li>Right-click the project and select <strong>Export to CLI Project</strong>. 
-<p>An info dialog appears, and the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> and <span style="font-family: Courier New,Courier,monospace">build_def.prop</span> files and the <span style="font-family: Courier New,Courier,monospace">Build</span> directory are created.</p>
+<p>An info dialog appears, and the <code>project_def.prop</code> and <code>build_def.prop</code> files and the <code>Build</code> directory are created.</p>
 </li>
 </ol>
-<p>The Tizen Studio and CLI differ on how they describe the project properties and build configuration. The CLI uses the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> file for the project properties and the <span style="font-family: Courier New,Courier,monospace">build_def.prop</span> file for the build configurations. During the export, the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span>, <span style="font-family: Courier New,Courier,monospace">build_def.prop</span>, and the makefiles are added to the converted CLI project automatically.</p>
+<p>The Tizen Studio and CLI differ on how they describe the project properties and build configuration. The CLI uses the <code>project_def.prop</code> file for the project properties and the <code>build_def.prop</code> file for the build configurations. During the export, the <code>project_def.prop</code>, <code>build_def.prop</code>, and the makefiles are added to the converted CLI project automatically.</p>
 
-<p class="figure">Figure: Project conversion</p> 
+<p align="center"><strong>Figure: Project conversion</strong></p> 
 <p align="center"><img alt="Project conversion" src="../images/project_conversion_export_to_CLI.png"/></p>
 
 <h2 id="about_project_def">About the project_def.prop file</h2>
  
-<p>The <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> file describes the project properties, such as project type and list of source files. When you edit the properties in the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> file to manipulate the build or packaging process, use the following characters:</p>
+<p>The <code>project_def.prop</code> file describes the project properties, such as project type and list of source files. When you edit the properties in the <code>project_def.prop</code> file to manipulate the build or packaging process, use the following characters:</p>
 <ul>
 <li>&quot;/&quot; is a path separator character (in Windows&reg;, Ubuntu, and Mac OS&reg; X).</li>
 <li>&quot;\&quot; is a multi-line character, which is used at the end of each line.</li>
 <li>&quot;#&quot; is a comment character.</li>
 </ul>
 
+<p align="center" class="Table"><strong>Table: Project properties</strong></p>
 <table>
-<caption>Table: Project properties</caption>
 <tbody>
 <tr>
        <th>Property</th>
        <th>Value</th>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">APPNAME</span></td>
+       <td><code>APPNAME</code></td>
        <td>Application name, which must be given in lowercase letters.
-       <p>For example: <span style="font-family: Courier New,Courier,monospace">APPNAME = test</span></p></td>
+       <p>For example: <code>APPNAME = test</code></p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">type</span></td>
+       <td><code>type</code></td>
        <td>Application type, which can be app, sharedLib, or staticLib.
-<p>For example: <span style="font-family: Courier New,Courier,monospace">type = app</span></p>
+<p>For example: <code>type = app</code></p>
 <p>This is a <strong>readonly</strong> property; do not edit it.</p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">profile</span></td>
+       <td><code>profile</code></td>
        <td>Profile with a version.
-<p>For example: <span style="font-family: Courier New,Courier,monospace">profile = mobile-2.3</span></p></td>
+<p>For example: <code>profile = mobile-2.3</code></p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_SRCS</span></td>
+       <td><code>USER_SRCS</code></td>
        <td>
-List of <span style="font-family: Courier New,Courier,monospace">.c</span> and <span style="font-family: Courier New,Courier,monospace">.cpp</span> source files in the current project.
+List of <code>.c</code> and <code>.cpp</code> source files in the current project.
 <p>The list can be used with wildcard characters: *.</p>
 <p>If there are more than 2 files, a white-space character separator is used.</p>
-<p>For example: <span style="font-family: Courier New,Courier,monospace">USER_SRCS = src/*.c</span></p></td>
+<p>For example: <code>USER_SRCS = src/*.c</code></p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_DEFS</span></td>
+       <td><code>USER_DEFS</code></td>
        <td>List of user-defined C files added to the compilation process.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-D</span> characters for the C compiler.</p>
-<p>For example: <span style="font-family: Courier New,Courier,monospace">USER_DEFS = ABC DEF</span></p>
+<p>The list must be used without the <code>-D</code> characters for the C compiler.</p>
+<p>For example: <code>USER_DEFS = ABC DEF</code></p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_UNDEFS</span></td>
+       <td><code>USER_UNDEFS</code></td>
        <td>List of user-defined C files excluded from the compilation process.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-U</span> characters for the C compiler.</p>
+<p>The list must be used without the <code>-U</code> characters for the C compiler.</p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_DEFS</span></td>
+       <td><code>USER_CPP_DEFS</code></td>
        <td>List of user-defined C++ files added to the compilation process.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-D</span> characters for the C++ compiler.</p>
+<p>The list must be used without the <code>-D</code> characters for the C++ compiler.</p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_UNDEFS</span></td>
+       <td><code>USER_CPP_UNDEFS</code></td>
        <td>List of user-defined C++ files excluded from the compilation process.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-U</span> characters for the C++ compiler.</p>
+<p>The list must be used without the <code>-U</code> characters for the C++ compiler.</p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_LIBS</span></td>
+       <td><code>USER_LIBS</code></td>
        <td>List of library paths added to the linking process.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-l</span> characters.</p>
+<p>The list must be used without the <code>-l</code> characters.</p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_OBJS</span></td>
-       <td>List of the <span style="font-family: Courier New,Courier,monospace">.o</span> file paths added to the linking process.
+       <td><code>USER_OBJS</code></td>
+       <td>List of the <code>.o</code> file paths added to the linking process.
 <p>An absolute path can be available.</p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_INC_DIRS</span></td>
+       <td><code>USER_INC_DIRS</code></td>
        <td>List of reference paths for C and C++ compiling.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-I</span> characters.</p>
-<p>For example: <span style="font-family: Courier New,Courier,monospace">USER_INC_DIRS = inc</span></p>
+<p>The list must be used without the <code>-I</code> characters.</p>
+<p>For example: <code>USER_INC_DIRS = inc</code></p>
 <p>An absolute path can be available.</p>
 </td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_INC_FILES</span></td>
-       <td>List of <span style="font-family: Courier New,Courier,monospace">.h</span> file paths for C.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-include</span> characters. An absolute path can be available.</p></td>
+       <td><code>USER_INC_FILES</code></td>
+       <td>List of <code>.h</code> file paths for C.
+<p>The list must be used without the <code>-include</code> characters. An absolute path can be available.</p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_INC_FILES</span></td>
-       <td>List of <span style="font-family: Courier New,Courier,monospace">.h</span> file paths for C++.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-include</span> characters. An absolute path can be available.</p></td>
+       <td><code>USER_CPP_INC_FILES</code></td>
+       <td>List of <code>.h</code> file paths for C++.
+<p>The list must be used without the <code>-include</code> characters. An absolute path can be available.</p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_LIB_DIRS</span></td>
+       <td><code>USER_LIB_DIRS</code></td>
        <td>List of reference paths for the library linking.
-<p>The list must be used without the <span style="font-family: Courier New,Courier,monospace">-L</span> characters. An absolute path can be available.</p></td>
+<p>The list must be used without the <code>-L</code> characters. An absolute path can be available.</p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS</span></td>
-       <td>List of <span style="font-family: Courier New,Courier,monospace">.edc</span> file paths.
+       <td><code>USER_EDCS</code></td>
+       <td>List of <code>.edc</code> file paths.
 <p>The list can be used with wildcard characters, such as *.</p>
 <p>If there are more than 2 files, a white-space character separator is used.</p>
-<p>For example: <span style="font-family: Courier New,Courier,monospace">USER_EDCS = res/edje/*.edc</span></p></td>
+<p>For example: <code>USER_EDCS = res/edje/*.edc</code></p></td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_IMAGE_DIRS</span></td>
-       <td>List of EDC reference paths for compiling, such as the <span style="font-family: Courier New,Courier,monospace">-id</span> option of the Tizen Studio. An absolute path can be available.</td>
+       <td><code>USER_EDCS_IMAGE_DIRS</code></td>
+       <td>List of EDC reference paths for compiling, such as the <code>-id</code> option of the Tizen Studio. An absolute path can be available.</td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_SOUND_DIRS</span></td>
-       <td>List of EDC reference paths for compiling, such as the <span style="font-family: Courier New,Courier,monospace">-sd</span> option of the Tizen Studio. An absolute path can be available.</td>
+       <td><code>USER_EDCS_SOUND_DIRS</code></td>
+       <td>List of EDC reference paths for compiling, such as the <code>-sd</code> option of the Tizen Studio. An absolute path can be available.</td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_FONT_DIRS</span></td>
-       <td>List of EDC reference paths for compiling, such as the <span style="font-family: Courier New,Courier,monospace">-fd</span> option of the Tizen Studio. An absolute path can be available.</td>
+       <td><code>USER_EDCS_FONT_DIRS</code></td>
+       <td>List of EDC reference paths for compiling, such as the <code>-fd</code> option of the Tizen Studio. An absolute path can be available.</td>
  </tr>
  <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">USER_POS</span></td>
-       <td>List of <span style="font-family: Courier New,Courier,monospace">.po</span> file paths.
+       <td><code>USER_POS</code></td>
+       <td>List of <code>.po</code> file paths.
 <p>The list can be used with wildcard characters, such as *.</p>
 <p>If there are more than 2 files, a white-space character separator is used.</p>
-<p>For example: <span style="font-family: Courier New,Courier,monospace">USER_POS = res/po/*.po</span></p></td>
+<p>For example: <code>USER_POS = res/po/*.po</code></p></td>
  </tr>
   </tbody>
   </table>
 
 <h2 id="about_build_def">About the build_def.prop file</h2>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">build_def.prop</span> file describes some build configurations. You can run the pre-build and post-build commands by describing the following properties.</p>
+<p>The <code>build_def.prop</code> file describes some build configurations. You can run the pre-build and post-build commands by describing the following properties.</p>
 
+<p align="center" class="Table"><strong>Table: Build properties</strong></p>
 <table>
-<caption>Table: Build properties</caption>
 <tbody>
 <tr>
  <th>Property</th>
  <th>Description</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">PREBUILD_COMMAND</span></td>
+ <td><code>PREBUILD_COMMAND</code></td>
  <td>Shell command executed before the project build.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">PREBUILD_DESC</span></td>
- <td>Description of <span style="font-family: Courier New,Courier,monospace">PREBUILD_COMMAND</span>.</td>
+ <td><code>PREBUILD_DESC</code></td>
+ <td>Description of <code>PREBUILD_COMMAND</code>.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">POSTBUILD_COMMAND</span></td>
+ <td><code>POSTBUILD_COMMAND</code></td>
  <td>Shell command executed after the project build.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">POSTBUILD_DESC</span></td>
- <td>Description of <span style="font-family: Courier New,Courier,monospace">POSTBUILD_COMMAND</span>.</td>
+ <td><code>POSTBUILD_DESC</code></td>
+ <td>Description of <code>POSTBUILD_COMMAND</code>.</td>
  </tr>
  </tbody>
  </table>
 
 <p>In addition, you can use some environment variables to describe the pre- and post-build commands.</p>
+
+<p align="center" class="Table"><strong>Table: Environment variables</strong></p>
 <table>
-<caption>Table: Environment variables</caption>
 <tbody>
 <tr>
  <th>Variable</th>
  <th>Description</th>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">PROJ_PATH</span></td>
+ <td><code>PROJ_PATH</code></td>
  <td>Path of the project root directory</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">BUILD_CONFIG</span></td>
- <td>Build configuration: <span style="font-family: Courier New,Courier,monospace">Debug</span> or <span style="font-family: Courier New,Courier,monospace">Release</span></td>
+ <td><code>BUILD_CONFIG</code></td>
+ <td>Build configuration: <code>Debug</code> or <code>Release</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">BUILD_ARCH</span></td>
- <td>Architecture type: <span style="font-family: Courier New,Courier,monospace">x86</span> or <span style="font-family: Courier New,Courier,monospace">arm</span></td>
+ <td><code>BUILD_ARCH</code></td>
+ <td>Architecture type: <code>x86</code> or <code>arm</code></td>
  </tr>
  </tbody>
  </table>
index f729b53..fe09329 100644 (file)
@@ -38,7 +38,7 @@
 <h1>Managing Tizen Projects with Project Explorer View</h1>
 <p>The <strong>Project Explorer</strong> view allows you to view and manage Tizen projects. You can view and change the resources of a project in the view, and build, export, and convert projects through the view.</p>
 
-<p class="figure">Figure: Project Explorer</p> 
+<p align="center"><strong>Figure: Project Explorer</strong></p> 
 <p align="center"> <img alt="Project Explorer" src="../images/proj_explorer_n.png" /> </p>
 
 <p>In this view, you can:</p>
 <h2 id="opening">Opening the Project Explorer View</h2>
 <p>Usually, the <strong>Project Explorer</strong> view is located in the left-top side in the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window &gt; Show View &gt; Other &gt; General</strong>.</p>
 
-<p class="figure">Figure: Opening the view</p> 
+<p align="center"><strong>Figure: Opening the view</strong></p> 
 <p align="center"> <img alt="Opening the view" src="../images/proj_explorer_general.png" /> </p>
 
 <h2 id="view">Using the Project Explorer View</h2>
 <p>The files that you select in the <strong>Project Explorer</strong> view affect the information that is displayed in the other views. You can execute and set some operations and configurations by clicking the icons (<img alt="Toolbar icons" src="../images/proj_explorer_op_config.png" />) in the toolbar.</p>
 
-<p class="figure">Figure: Executing operations</p>
+<p align="center"><strong>Figure: Executing operations</strong></p>
 <p align="center"> <img alt="Executing operations" src="../images/proj_explorer_right_click_n.png" /> </p>
 
 <p>To execute operations, such as copying, moving, creating new resources, and comparing resources with each other, right-click on any resource in the <strong>Project Explorer</strong> view, and select the desired action in the context menu. The items in the context menu depend on the focused item. Different folder and file types have different action options.</p>
 
+<p align="center" class="Table"><strong>Table: Project Explorer toolbar</strong></p>
 <table>
-<caption>Table: Project Explorer toolbar</caption>
 <tbody>
 <tr>
  <th>Icon</th>
  </tr>
  </tbody></table>
 
+<p align="center" class="Table"><strong>Table: Project Explorer context menu</strong></p>
 <table>
-<caption>Table: Project Explorer context menu</caption>
 <tbody>
 <tr>
  <th>Menu</th>
index da85292..f01118e 100644 (file)
@@ -54,7 +54,7 @@
 <h2 id="type">Project Type</h2>
 <p>When the Tizen Project Wizard opens, you must first select the project type.</p>
 
-<p class="figure">Figure: Selecting the project type</p> 
+<p align="center"><strong>Figure: Selecting the project type</strong></p> 
 <p align="center"><img alt="Selecting the project type" src="../images/project_wizard_type.png" /></p> 
  
 <p>The Tizen Studio provides various project templates and samples for the mobile and wearable devices according to the installed platform. The Tizen Project Wizard helps you select the template and sample for your project.</p>
@@ -88,7 +88,7 @@
 <p>You can select the profile and version supported by your project, such as a mobile or wearable device. In addition, the Tizen Studio shows you which platforms among the supported platforms have been installed.</p>
 <p>Based on the selected profile and version, a list of templates is shown in the template selection step.</p>
 
-<p class="figure">Figure: Selecting the profile and version</p> 
+<p align="center"><strong>Figure: Selecting the profile and version</strong></p> 
 <p align="center"><img alt="File analysis" src="../images/project_wizard_profile_n.png" /></p> 
  
 <p>To move to the next step, select the profile and version, and click <strong>Next</strong>.</p>
@@ -97,7 +97,7 @@
 <p>You can select the native or Web application type for your project. For more information, see <a href="../../../org.tizen.training/html/native/cover_page_n.htm">Native Application</a> and <a href="../../../org.tizen.training/html/web/cover_page_w.htm">Web Application</a>.</p>
 <p>Based on the selected application type, a list of templates is shown in the template selection step.</p>
 
-<p class="figure">Figure: Selecting the application type</p> 
+<p align="center"><strong>Figure: Selecting the application type</strong></p> 
 <p align="center"><img alt="Selecting the application type" src="../images/project_wizard_app_type_n.png" /></p> 
  
 <p>To move to the next step, select the application type and click <strong>Next</strong>.</p>
 <h2 id="template">Template</h2>
 <p>You can select the template for your project while viewing information about a variety of templates. The Tizen Project Wizard creates the project based on the selected template.</p>
 
-<p class="figure">Figure: Selecting the template</p> 
+<p align="center"><strong>Figure: Selecting the template</strong></p> 
 <p align="center"><img alt="Selecting the template" src="../images/project_wizard_template.png" /></p> 
 
 <p>To move to the next step, select the template and click <strong>Next</strong>.</p>
 <h2 id="properties">Project Properties</h2>
 <p>You can set basic project properties, such as the project name, location, and working sets.</p>
 
-<p class="figure">Figure: Setting project properties</p> 
+<p align="center"><strong>Figure: Setting project properties</strong></p> 
 <p align="center"><img alt="Setting project properties" src="../images/project_wizard_properties.png" /></p> 
  
 <p>The options you can set are listed in the following table.</p>
 
+<p align="center" class="Table"><strong>Table: Project properties</strong></p>
 <table>
-<caption>Table: Project properties</caption>
 <tbody>
 <tr>
  <th>Property</th>
  </tr>
  <tr>
  <td><strong>Use default location</strong></td>
- <td>If you check this option, the project is created in the <span style="font-family: Courier New,Courier,monospace">$&lt;workspace_location&gt;/&lt;project_name&gt;</span> directory.</td>
+ <td>If you check this option, the project is created in the <code>$&lt;workspace_location&gt;/&lt;project_name&gt;</code> directory.</td>
  </tr>
  <tr>
  <td><strong>Location</strong></td>
index 32b8a62..6003e21 100644 (file)
 <p>Tizen native applications can run on different types of devices, such as wearable, phone, tablets, and TVs. Tizen also supports various resolutions (WVGA ~ XQXGA) and resources.</p>
 <p>When you take advantage of the above features, remember that you must always polish your work to create an optimal application for each device. The Tizen Studio provides a tool (<strong>Resource Manager</strong> view) for developing applications for multiple device types and resolutions.</p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Resource Manager is supported in the 2.4 platform only. If you cannot access the <strong>Resource Manager</strong> view, check the <span style="font-family: Courier New,Courier,monospace">version</span> and <span style="font-family: Courier New,Courier,monospace">api-version</span> attributes in the <span style="font-family: Courier New,Courier,monospace">&lt;manifest&gt;</span> element of the application manifest file.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       The Resource Manager is supported in the 2.4 platform only. If you cannot access the <strong>Resource Manager</strong> view, check the <code>version</code> and <code>api-version</code> attributes in the <code>&lt;manifest&gt;</code> element of the application manifest file.
+</div>
+
 <h2 id="directory_hierarchy">Resource Directory Hierarchy</h2>
  
 <p>An application must provide a different UI depending on a specific device configuration, such as the screen size and screen orientation. When developing the application, provide alternative resources for each device display state by grouping them in resource directories.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">res/contents</span> directory contains predefined directories for specific alternative resources, and the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file that is referenced at application runtime. The following example of a Basic UI project shows how to group the resources in your project. Place resources, such as images and sounds, in a specific subdirectory of the project&#39;s <span style="font-family: Courier New,Courier,monospace">res/contents</span> directory or the root directory of the <span style="font-family: Courier New,Courier,monospace">contents</span> directory.</p>
+<p>The <code>res/contents</code> directory contains predefined directories for specific alternative resources, and the <code>res.xml</code> file that is referenced at application runtime. The following example of a Basic UI project shows how to group the resources in your project. Place resources, such as images and sounds, in a specific subdirectory of the project&#39;s <code>res/contents</code> directory or the root directory of the <code>contents</code> directory.</p>
 
-<p class="figure">Figure: Resource directory hierarchy</p> 
+<p align="center"><strong>Figure: Resource directory hierarchy</strong></p> 
 <p align="center"><img alt="Resource directory hierarchy" src="../images/resource_manager_directory_hierarchy.png"/></p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Always include the default resources in the root directory (not in a subdirectory of the <span style="font-family: Courier New,Courier,monospace">contents</span> directory) to ensure that your application has no dependencies on a specific device configuration.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       Always include the default resources in the root directory (not in a subdirectory of the <code>contents</code> directory) to ensure that your application has no dependencies on a specific device configuration.
+</div>
 
 <p>A specific subdirectory is named with a <strong>configuration-qualifier</strong>. The configuration-qualifier is an indicator that represents each device configuration, and more content can be appended to it with a dash (-). The following table shows the 2 configuration-qualifier types currently supported by the Tizen Studio.</p>
+
+<p align="center" class="Table"><strong>Table: Configuration-qualifiers</strong></p>
 <table>
-<caption>Table: Configuration-qualifiers</caption>
 <tbody>
 <tr>
  <th>Configuration-qualifier type</th>
 </tr>
  <tr>
  <td>Language and region code</td>
- <td>For example, <span style="font-family: Courier New,Courier,monospace">en_US</span> or <span style="font-family: Courier New,Courier,monospace">en_UK</span></td>
- <td>The type values have the form <span style="font-family: Courier New,Courier,monospace">ll_CC</span>, where <span style="font-family: Courier New,Courier,monospace">ll</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html" target="_blank">ISO 639</a> 2-letter language code, and the optionally followed <span style="font-family: Courier New,Courier,monospace">CC</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html#Country-Codes" target="_blank">ISO 3166</a> 2-upper-letter region code.</td>
+ <td>For example, <code>en_US</code> or <code>en_UK</code></td>
+ <td>The type values have the form <code>ll_CC</code>, where <code>ll</code> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html" target="_blank">ISO 639</a> 2-letter language code, and the optionally followed <code>CC</code> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html#Country-Codes" target="_blank">ISO 3166</a> 2-upper-letter region code.</td>
  </tr>
  <tr>
  <td>DPI (Dot Per Inch) density</td>
- <td><span style="font-family: Courier New,Courier,monospace">LDPI</span>
-<p><span style="font-family: Courier New,Courier,monospace">MDPI</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">HDPI</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">XHDPI</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">XXHDPI</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">LDPI</span>: low-dpi from 0 to 240
-<p><span style="font-family: Courier New,Courier,monospace">MDPI</span>: medium-dpi from 241 to 300</p>
-<p><span style="font-family: Courier New,Courier,monospace">HDPI</span>: high-dpi from 301 to 380</p>
-<p><span style="font-family: Courier New,Courier,monospace">XHDPI</span>: extra-high-dpi from 381 to 480</p>
-<p><span style="font-family: Courier New,Courier,monospace">XXHDPI</span>: extra-extra-high-dpi from 481 to 600</p></td>
+ <td><code>LDPI</code>
+<p><code>MDPI</code></p>
+<p><code>HDPI</code></p>
+<p><code>XHDPI</code></p>
+<p><code>XXHDPI</code></p></td>
+ <td><code>LDPI</code>: low-dpi from 0 to 240
+<p><code>MDPI</code>: medium-dpi from 241 to 300</p>
+<p><code>HDPI</code>: high-dpi from 301 to 380</p>
+<p><code>XHDPI</code>: extra-high-dpi from 381 to 480</p>
+<p><code>XXHDPI</code>: extra-extra-high-dpi from 481 to 600</p></td>
  </tr>
  </tbody>
  </table>
 
 <p>Each application base scale can be applied to each DPI through a relation modification between the DPI and profile factor. For example, in case of the mobile profile, the Z device has a small screen (profile factor: 0.7) and the 1.8 base scale value, so the proper DPI is LDPI. The Z3 device has a large screen (profile factor: 0.8) and the 2.6 base scale value, so the proper DPI is MDPI.</p>
+
+<p align="center" class="Table"><strong>Table: DPI and profile factor</strong></p>
 <table>
-<caption>Table: DPI and profile factor</caption>
 <tbody>
 <tr>
  <th>DPI type</th>
  </tbody>
  </table>
  
- <p>The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is composed of XML elements, and describes where each alternative resource is grouped into a device configuration. The following example shows a <span style="font-family: Courier New,Courier,monospace">res.xml</span> file based on the BasicUI project.</p>
+ <p>The <code>res.xml</code> file is composed of XML elements, and describes where each alternative resource is grouped into a device configuration. The following example shows a <code>res.xml</code> file based on the BasicUI project.</p>
 
-<p class="figure">Figure: res.xml file</p> 
+<p align="center"><strong>Figure: res.xml file</strong></p> 
 <p align="center"><img alt="res.xml file" src="../images/resource_manager_res_xml.png"/></p>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is automatically generated as part of the build packaging process by the Tizen Studio. Since editing the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file manually is not easy, the Tizen Studio helps to minimize this difficulty by supporting the <strong>Resource Manager</strong> view.</p>
+<p>The <code>res.xml</code> file is automatically generated as part of the build packaging process by the Tizen Studio. Since editing the <code>res.xml</code> file manually is not easy, the Tizen Studio helps to minimize this difficulty by supporting the <strong>Resource Manager</strong> view.</p>
 
 <h2 id="resource_manager">Alternative Resources with the Resource Manager</h2>
 
 <li>Generate code snippets by dragging and dropping in the source editor area.</li>
 </ul>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">If the <strong>Resource Manager</strong> view is not visible, open it by selecting <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Resource Manager</strong> from the Tizen Studio menu.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>To place resource files (<span style="font-family: Courier New,Courier,monospace">rsc1.edc</span> file and the images referenced by it) for en_US and en_US-LDPI configurations:</p>
+<div class="note">
+    <strong>Note</strong>
+       If the <strong>Resource Manager</strong> view is not visible, open it by selecting <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Resource Manager</strong> from the Tizen Studio menu.
+</div>
+
+<p>To place resource files (<code>rsc1.edc</code> file and the images referenced by it) for en_US and en_US-LDPI configurations:</p>
 <ol>
 <li>Open the <strong>Resource Configuration</strong> dialog by clicking <img alt="Setting icon" src="../images/resource_manager_cogwheel_icon.png"/> in the <strong>Resource Manager</strong> view toolbar.</li>
 <li>Add a configuration by selecting LDPI and MDPI in the DPI combo box.</li>
-<li>Drag the <span style="font-family: Courier New,Courier,monospace">edje</span> folder and drop it into the proper tab list view area in the <strong>Resource Manager</strong> view. 
+<li>Drag the <code>edje</code> folder and drop it into the proper tab list view area in the <strong>Resource Manager</strong> view. 
 The following figure shows the Tab list view (on the left) and the Folding list view (on the right) of the <strong>Resource Manager</strong> view. You can switch between the views using the buttons in the <strong>Resource Manager</strong> view toolbar (<img alt="Folding list" src="../images/resource_manager_folding_lists_view_icon.png"/> to switch to folding lists and <img alt="Tab" src="../images/resource_manager_tab_lists_view_icon.png"/> to switch to tab lists).
 </li>
 </ol>
 
-<p id="tablist" class="figure">Figure: Tab view and Folding list view</p> 
+<p id="tablist" align="center"><strong>Figure: Tab view and Folding list view</strong></p> 
 <p align="center"><img alt="Tab view and Folding list view" src="../images/resource_manager_configurations.png"/></p>
 <p align="center"><img alt="" src="../images/resource_manager_edge_res_folder.png"/></p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">All images used by the EDC file must be placed in the <span style="font-family: Courier New,Courier,monospace">edje_res</span> folder created by the Tizen Studio. The <span style="font-family: Courier New,Courier,monospace">edje_res</span> folder is excluded from the <span style="font-family: Courier New,Courier,monospace">.tpk</span> package file.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       All images used by the EDC file must be placed in the <code>edje_res</code> folder created by the Tizen Studio. The <code>edje_res</code> folder is excluded from the <code>.tpk</code> package file.
+</div>
 
 <h3>Managing Resources</h3>
 
@@ -199,8 +178,8 @@ The following figure shows the Tab list view (on the left) and the Folding list
  <li>Create a resource directory hierarchy and copy images into it.
 <p align="center"><img alt="Copy images" src="../images/resource_manager_copy_images.png"/></p>
 </li>
- <li>Create a <span style="font-family: Courier New,Courier,monospace">res.xml</span> file by building the project package.</li>
- <li>Check the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file content.
+ <li>Create a <code>res.xml</code> file by building the project package.</li>
+ <li>Check the <code>res.xml</code> file content.
 <p align="center"><img alt="Check the res.xml file" src="../images/resource_manager_check_res_xml.png"/></p>
  </li>
  <li>Add code for loading alternative resources by using the Resource Manager API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">mobile</a> applications).
index 3fcb11c..133dfda 100644 (file)
@@ -46,7 +46,7 @@
 <p>In the <strong>Project Explorer</strong> view, right-click the project on which you want to run the static analyzer, and select <strong>Check Potential Bugs with Build</strong>.</p>
 <p>The project is automatically built and the static analyzer is run during the build process.</p>
 
-<p class="figure">Figure: Running the Static Analyzer</p> 
+<p align="center"><strong>Figure: Running the Static Analyzer</strong></p> 
 <p align="center"><img alt="Running the Static Analyzer" src="../images/static_analyzer_running_analyzer.png"/></p>
 
 <h2 id="customize">Customizing the Static Analyzer</h2>
 <p>To customize the static analyzer:</p>
 <ol>
 <li>In the <strong>Project Explorer</strong> view, right-click on the project and select <strong>Properties</strong>.
-<p class="figure"></p> 
 <p align="center"><img alt="" src="../images/static_analyzer_project_properties.png"/></p>
 </li>
 <li>Go to <strong>Tizen Studio &gt; Static Analysis</strong>.</li>
 <li>Select and clear the checkers, as needed.
 <p>The analysis is carried out for the selected issues only.</p>
-
-<p class="figure"></p> 
 <p align="center"><img alt="" src="../images/static_analyzer_static_analysis.png"/></p>
 </li>
 </ol>
@@ -72,7 +69,7 @@
 
 <p>When the static analysis is completed, the issues found by the static analyzer are listed in the <strong>Potential Bugs</strong> view on the right pane of the Tizen Studio.</p>
 <p>The issues are categorized based on type. You can expand the categories and double-click the issues to navigate to the exact location of the problem along with the path which caused the issue.</p>
-<p class="figure">Figure: Analysis results in the Potential Bugs view</p> 
+<p align="center"><strong>Figure: Analysis results in the Potential Bugs view</strong></p> 
 <p align="center"><img alt="Analysis results in the Potential Bugs view" src="../images/static_analyzer_analysis_results.png"/></p>
 
 
index bb22196..8466274 100644 (file)
        
 <p>When you select the <strong>Storyboard</strong> tab in the WYSIWYG editor, the Storyboard graphical viewer opens. If the <strong>UI Builder - Navigation View</strong> application template is used, the viewer contains 3 default views with some default connections between them. Otherwise, the viewer contains a single view.</p>
 
-<p class="figure">Figure: Views shown in the Storyboard tab</p>
+<p align="center"><strong>Figure: Views shown in the Storyboard tab</strong></p>
 <p align="center"><img src="../images/storyboard_all_views.png" alt="Views shown in the Storyboard tab" /></p>
        
 <p>To add a new view, right-click the editor, select <strong>Add View</strong>, and select the view type you want.
 Alternatively, you can add a new view in the <strong>Navigation</strong> view and drag and drop the view from the <strong>Navigation</strong> view to the <strong>Storyboard</strong> tab.</p>
 
-<p class="figure">Figure: Adding a new view</p>
+<p align="center"><strong>Figure: Adding a new view</strong></p>
 <p align="center"><img src="../images/storyboard_new_view.png" alt="Adding a new view" /></p>
 
 <p>You can move the views in the viewer by selecting the black label containing the view name and dragging the view to a new position.</p>
@@ -91,7 +91,7 @@ Alternatively, you can add a new view in the <strong>Navigation</strong> view an
 <p>Select an appropriate event from the menu.</p>
 <p align="center"><img src="../images/storyboard_conn_event.png" alt="Select event" /></p>
 
-<p>After you select the event, the new connection is displayed and code is generated in the <span style="font-family: Courier New,Courier,monospace">layout.xml</span> file. The event handler code is also generated in the C file.</p>
+<p>After you select the event, the new connection is displayed and code is generated in the <code>layout.xml</code> file. The event handler code is also generated in the C file.</p>
 <p align="center"><img src="../images/storyboard_conn_connection.png" alt="Connection" /></p>
 </li>
 <li>To edit the event code, right-click the connection, and select <strong>Go to Source Code</strong>.
@@ -100,8 +100,8 @@ Alternatively, you can add a new view in the <strong>Navigation</strong> view an
 </li>
 <li>In the source code, 2 functions are generated:
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">view1_button1_onclicked()</span> is called before the transition is performed to the target view.</li>
-<li><span style="font-family: Courier New,Courier,monospace">view1_button1_onclicked_post()</span> is called after the transition has been performed.</li>
+<li><code>view1_button1_onclicked()</code> is called before the transition is performed to the target view.</li>
+<li><code>view1_button1_onclicked_post()</code> is called after the transition has been performed.</li>
 </ul>
 <p>Write whatever operation you want to perform during the pre and post transition.</p>
 <p align="center"><img src="../images/storyboard_conn_code.png" alt="Source code" /></p>
@@ -112,10 +112,10 @@ Alternatively, you can add a new view in the <strong>Navigation</strong> view an
        
 <p>When you select a component or connection in the Storyboard, the editable properties related to it are displayed in the <strong>Properties</strong> view. You can view the transition properties and change the connection target view and title.</p>
 
-<p class="figure">Figure: Component properties</p>
+<p align="center"><strong>Figure: Component properties</strong></p>
 <p align="center"><img src="../images/storyboard_comp_properties.png" alt="Component properties" /></p>
 
-<p class="figure">Figure: Connection properties</p>
+<p align="center"><strong>Figure: Connection properties</strong></p>
 <p align="center"><img src="../images/storyboard_conn_properties.png" alt="Connection properties" /></p>
 
        <h2 id="max_min_view">Maximizing and Minimizing Views</h2>
@@ -124,7 +124,7 @@ Alternatively, you can add a new view in the <strong>Navigation</strong> view an
 <p>Use this feature to reduce the clutter of multiple views present in the application without compromising on losing the overall sight of the application project.</p>
 <p>The startup view can be identified by an arrow symbol in the left top corner of the view.</p>
 
-<p class="figure">Figure: Maximizing and minimizing views</p>
+<p align="center"><strong>Figure: Maximizing and minimizing views</strong></p>
 <p align="center"><img src="../images/storyboard_max_min.png" alt="Maximizing and minimizing views" /></p>
        
 
index 4a047b3..24272be 100644 (file)
@@ -45,7 +45,7 @@
 
 <p>The following figure illustrates the T-trace dialog elements.</p>
 
-<p class="figure">Figure: T-trace dialog</p> 
+<p align="center"><strong>Figure: T-trace dialog</strong></p> 
 <p style="text-align: center;"> <img alt="T-trace dialog" src="../images/ttrace_dialog.png" /> </p> 
 
 <ol><li><strong>Tags</strong>
 <h2 id="run" name="run">Running the T-trace</h2>
 
 <p>When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.</p> 
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To operate the T-trace, you must first install Python (2.7.x) and Google Chrome&trade; on your computer.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<div class="note">
+    <strong>Note</strong>
+       To operate the T-trace, you must first install Python (2.7.x) and Google Chrome&trade; on your computer.
+</div>
 
 <p>To run the T-trace in the Tizen Studio:</p>
 <ol>
@@ -97,7 +91,7 @@
 <li>In the dialog, set the tracing options and click <strong>Ready to trace</strong>.</li>
 </ol>
 
-<p>You can also run the T-trace from the command line. The T-trace script is located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/tools/ttrace</span> directory, and it requires that Python (2.7.x) or later to be installed on your computer.</p>
+<p>You can also run the T-trace from the command line. The T-trace script is located in the <code>&lt;TIZEN_STUDIO&gt;/tools/ttrace</code> directory, and it requires that Python (2.7.x) or later to be installed on your computer.</p>
 
 <p>To run the T-trace from the command line:</p>
 <ol>
@@ -120,17 +114,17 @@ $ python ttrace.py --help
 
 <h2 id="result" name="result">Viewing the Tracing Result</h2>
 
-<p>The results are stored in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/tools/ttrace/trace</span> directory. Both a <span style="font-family: Courier New,Courier,monospace">.text</span> binary-format trace file and a <span style="font-family: Courier New,Courier,monospace">.html</span> result report file are generated. The files are named with a timestamp (YYYYMMDDHHMMSS).</p>
+<p>The results are stored in the <code>&lt;TIZEN_STUDIO&gt;/tools/ttrace/trace</code> directory. Both a <code>.text</code> binary-format trace file and a <code>.html</code> result report file are generated. The files are named with a timestamp (YYYYMMDDHHMMSS).</p>
 
 <p>You can view the results using the Google Chrome&trade; browser as a viewer. The viewer is launched with the result report when you click <strong>Show result</strong> in the T-trace dialog. If you run the T-trace from the command line, open the result report manually in the viewer.</p>
  
-<p class="figure">Figure: T-trace viewer</p> 
+<p align="center"><strong>Figure: T-trace viewer</strong></p> 
 <p style="text-align: center;"> <img alt="T-trace viewer" src="../images/ttrace_viewer.png" /> </p>  
 
 <p>The following table lists the keyboard shortcuts available in the viewer.</p>
 
+<p align="center" class="Table"><strong>Table: Viewer keyboard shortcuts</strong></p>
 <table>
-<caption>Table: Viewer keyboard shortcuts</caption>
 <tbody>
 <tr>
  <th>Keyboard shortcut</th>
@@ -186,8 +180,8 @@ $ python ttrace.py --help
  
 <p>The result report allows you to analyze various performance aspects of your application. The report shows how your application interacts with the Tizen framework, according to category tags you selected for tracing. The following table shows the kind of information each tag provides.</p>
 
+<p align="center" class="Table"><strong>Table: Tag-specific information</strong></p>
 <table>
-<caption>Table: Tag-specific information</caption>
 <tbody>
 <tr>
  <th>Tag</th>
@@ -227,12 +221,12 @@ $ python ttrace.py --help
 
 <p>You can analyze your application life-cycle using the T-trace in native <!--and Web--> applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.</p>
 
-<p class="figure">Figure: Application life-cycle</p> 
+<p align="center"><strong>Figure: Application life-cycle</strong></p> 
 <p style="text-align: center;"> <img alt="Application life-cycle" src="../images/ttrace_lifecycle.png" /> </p>  
 
 <p>To analyze the application life-cycle, run the T-trace with the <strong>Application manager</strong> tag. <!--For Web applications, enable the  <strong>Web</strong> tag too.--> When the tracing process is finished, the T-trace generates a report, as shown in the following figure.</p>
  
-<p class="figure">Figure: Application life-cycle report</p> 
+<p align="center"><strong>Figure: Application life-cycle report</strong></p> 
 <p style="text-align: center;"> <img alt="Application life-cycle report" src="../images/ttrace_report.png" /> </p> 
 
 <p>In the section for Kernel and application processes, you can see your application state changes and system information, such as the CPU frequency and kernel task scheduling on a common timeline. With this information, you can investigate in which state your application spends unnecessary time and then make changes to optimize the time usage.</p>
index 78afbab..9d18ee3 100644 (file)
@@ -95,7 +95,7 @@
 <p>You can create the UI layout in the native UI Builder by using the XML editor in the <strong>Source</strong> tab to edit the layout file.</p>
 <p>While editing in the <strong>Source</strong> tab, you can preview the resulting layout in the preview pane.</p>
 
-<p class="figure">Figure: Source tab</p>
+<p align="center"><strong>Figure: Source tab</strong></p>
 <p align="center"><img src="../images/ui_builder_source_tab.png" alt="Source tab" /></p>
 
 <p>The native UI Builder provides content assist functionality, which helps you to write code faster and more efficiently. To use this functionality, type a few characters of the word and press <strong>Ctrl + Space</strong>.</p>
 <li>To remove the event handler, click <img src="../images/ui_builder_remove.png" alt="Remove the event handler" />.</li>
 </ul>
 
-<p class="figure">Figure: Adding an event handler</p>
+<p align="center"><strong>Figure: Adding an event handler</strong></p>
 <p align="center"><img src="../images/ui_builder_event_handler.png" alt="Add event handler" /></p>
 
 <h3>Coding the Event Handler Actions</h3>
 
 <p>When you click <img src="../images/ui_builder_get.png" alt="Get the event handler" /> in the <strong>Properties</strong> view, the C code editor opens the generated event handler code. The following figure shows an example of the automatically generated event handler stub.</p>
 
-<p class="figure">Figure: Event handler stub code</p>
+<p align="center"><strong>Figure: Event handler stub code</strong></p>
 <p align="center"><img src="../images/ui_builder_event_handler_stub.png" alt="Event handler stub code" /></p>
 
 <p>The signature contains the following parameters:</p>
 void view1_button1_onclicked(uib_view1_view_context *vc, Evas_Object *obj, void *event_info)
 </pre>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">vc</span>: View context related to the event. You can access the UI component in the view through this structure. The following code example shows a sample of the view context.
+<li><code>vc</code>: View context related to the event. You can access the UI component in the view through this structure. The following code example shows a sample of the view context.
 <pre class="prettyprint">
 struct _uib_view1_view_context {
 &nbsp;&nbsp;&nbsp;&nbsp;/* Parent evas_object which was a parameter of the create function */
@@ -151,13 +151,13 @@ struct _uib_view1_view_context {
 typedef struct _uib_view1_view_context;
 </pre>
 </li>
-<li><span style="font-family: Courier New,Courier,monospace">obj</span>: UI component where the event occurs.</li>
-<li><span style="font-family: Courier New,Courier,monospace">event_info</span>: User data passed from the Tizen framework. The event type determines the available data.</li>
+<li><code>obj</code>: UI component where the event occurs.</li>
+<li><code>event_info</code>: User data passed from the Tizen framework. The event type determines the available data.</li>
 </ul>
 
 <p>The following example shows how to change the button text in the event handler code:</p>
 
-<p class="figure">Figure: Event handler code</p>
+<p align="center"><strong>Figure: Event handler code</strong></p>
 <p align="center"><img src="../images/ui_builder_event_handler_code.png" alt="Event handler code" /></p>
 
 
index 95cd24e..6ce2b4f 100644 (file)
@@ -60,9 +60,9 @@
  
 <p>To use the test project:</p>
 <ol>
-<li>In the <strong>Project Explorer</strong> view, open the <span style="font-family: Courier New,Courier,monospace">&lt;TEST_PROJECT_HOME&gt;/src/&lt;TEST_PROJECT_NAME&gt;TestCase.cpp</span> file.</li>
-<li>Add a <span style="font-family: Courier New,Courier,monospace">TEST_F()</span> test case.
-<p>Each <span style="font-family: Courier New,Courier,monospace">TEST_F()</span> test case is independent. If the <span style="font-family: Courier New,Courier,monospace">TEST_F()</span> test case is associated with a fixture class name, the test case runs based on that fixture class.</p></li>
+<li>In the <strong>Project Explorer</strong> view, open the <code>&lt;TEST_PROJECT_HOME&gt;/src/&lt;TEST_PROJECT_NAME&gt;TestCase.cpp</code> file.</li>
+<li>Add a <code>TEST_F()</code> test case.
+<p>Each <code>TEST_F()</code> test case is independent. If the <code>TEST_F()</code> test case is associated with a fixture class name, the test case runs based on that fixture class.</p></li>
 <li>Add assertions.
 <p>The unit test tool supports basic assertions, binary comparison, and string comparison in the gtest. For more information, see <a href="https://github.com/google/googletest/blob/master/googletest/docs/AdvancedGuide.md" target="_blank">Google Test Advanced Guide</a>.</p></li>
 </ol>
@@ -94,11 +94,11 @@ extern &quot;C&quot;
 </pre>
 </li></ul>
 
-<p>In the following example with a calculator sample project, a test case is created for the <span style="font-family: Courier New,Courier,monospace">utils_round()</span> function declared in the <span style="font-family: Courier New,Courier,monospace">utils/utils.h</span> header file:</p>
+<p>In the following example with a calculator sample project, a test case is created for the <code>utils_round()</code> function declared in the <code>utils/utils.h</code> header file:</p>
 
 <ol>
 <li>Create a calculator project named <strong>myProject</strong>, and for it a unit test project named <strong>myProjectTest</strong>.</li>
-<li>Append the test method to the end of the <span style="font-family: Courier New,Courier,monospace">myProjectTest/src/myProjectTestTestCase.cpp</span> file:
+<li>Append the test method to the end of the <code>myProjectTest/src/myProjectTestTestCase.cpp</code> file:
 <pre class="prettyprint">
 TEST_F(TestSuite, utils_round)
 {
@@ -108,7 +108,7 @@ TEST_F(TestSuite, utils_round)
 }
 </pre>
 </li>
-<li>Change the line that includes the <span style="font-family: Courier New,Courier,monospace">utils/utils.h</span> file:
+<li>Change the line that includes the <code>utils/utils.h</code> file:
 <pre class="prettyprint">
 #include &quot;view/window.h&quot;
 #include &quot;view/main-view.h&quot;
@@ -124,12 +124,12 @@ extern &quot;C&quot;
 <h2 id="run">Running the Unit Test Project on Devices</h2>
 <p>To launch the unit test project, click the <strong>Run</strong> icon in the toolbar.</p>
 
-<p class="figure">Figure: Launching the test project</p> 
+<p align="center"><strong>Figure: Launching the test project</strong></p> 
 <p align="center"><img alt="Launching the test project" src="../images/unit_test_launch.png" /></p> 
  
 <p>After the test cases are executed, the results are displayed on both the <strong>Test Result</strong> and <strong>Test Explorer</strong> views.</p>
 
-<p class="figure">Figure: Test results</p> 
+<p align="center"><strong>Figure: Test results</strong></p> 
 <p align="center"><img alt="Test results" src="../images/unit_test_results.png" /></p> 
  
 <h3>Customizing the Launch Configuration</h3>
@@ -150,8 +150,8 @@ extern &quot;C&quot;
 <p>On the <strong>Test Explorer</strong> view, you can launch the test cases, and check the results. If you want to open the <strong>Test Explorer</strong> view or update the test cases, right-click the unit test project in the <strong>Project Explorer</strong>, and select <strong>Show in Test Explorer</strong>.</p>
 <p>When the test cases are executed, the test case states are automatically updated.</p>
 
+<p align="center" class="Table"><strong>Table: Test case states</strong></p>
 <table>
-<caption>Table: Test case states</caption>
 <tbody>
 <tr>
  <th>Icon</th>
index 4844e04..3fc7b16 100644 (file)
 
 <p>The Tizen Studio provides a platform development environment that helps you develop preloaded platform applications, platform libraries, and device drivers in Ubuntu.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Platform development is supported in Ubuntu 14.04 and higher (32- or 64-bit) only.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       Platform development is supported in Ubuntu 14.04 and higher (32- or 64-bit) only.
+</div>
 
 <p>By using the Tizen Studio for Ubuntu, you can, for example:</p>
 
 <li>Select a rootstrap in the <strong>Rootstrap View</strong>.</li>
 <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Build Project</strong>.
 <p>A dialog box appears and monitors the progress of building and packaging the project.</p>
-<p>After packaging is completed, the package file is located in the <span style="font-family: Courier New,Courier,monospace">$&lt;PROJECT_NAME&gt;\Debug</span> or <span style="font-family: Courier New,Courier,monospace">$&lt;PROJECT_NAME&gt;\Release</span> folder within the project folder.</p></li>
+<p>After packaging is completed, the package file is located in the <code>$&lt;PROJECT_NAME&gt;\Debug</code> or <code>$&lt;PROJECT_NAME&gt;\Release</code> folder within the project folder.</p></li>
 </ol>
  
 <p>If an error message appears in the <strong>Console</strong> view due to dependency problems, open the Package Manager and install the needed packages for building the project. After the installation is completed, rebuild the platform project to confirm that the dependency problems have been solved.</p>
 <p>The Git Build System (GBS) builds a platform project internally. You can set the GBS options in the IDE.</p>
 <p>For more information about GBS, see <a href="https://source.tizen.org/documentation/reference/git-build-system" target="_blank">Git Build System</a>.</p>
 
-<p class="figure">Figure: GBS options</p> 
+<p align="center"><strong>Figure: GBS options</strong></p> 
 <p align="center"><img alt="GBS options" src="../images/platform_gbs_options.png" /></p> 
   
 <p>To set the GBS options:</p>
 <p>To debug a coredump archive:</p>
 <ol>
 <li>Connect a device to your computer.</li>
-<li>In the <strong>Connection Explorer</strong> view, select the device for which a coredump archive to debug exists (for example,  <span style="font-family: Courier New,Courier,monospace">/opt/usr/share/crash/</span>).</li>
+<li>In the <strong>Connection Explorer</strong> view, select the device for which a coredump archive to debug exists (for example,  <code>/opt/usr/share/crash/</code>).</li>
 <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Platform Project â€“ Coredump</strong>.</li>
-<li>In the <strong>Launch Configuration</strong> dialog, select a core dumped file (<span style="font-family: Courier New,Courier,monospace">*.coredump</span>) and CS file (<span style="font-family: Courier New,Courier,monospace">*.cs</span>) by clicking <strong>Remote Browse</strong> or <strong>Local Browse</strong>.
+<li>In the <strong>Launch Configuration</strong> dialog, select a core dumped file (<code>*.coredump</code>) and CS file (<code>*.cs</code>) by clicking <strong>Remote Browse</strong> or <strong>Local Browse</strong>.
 <p align="center"><img alt="Selecting files" src="../images/platform_codedump_files.png" /></p> 
 <p>If the coredump information is displayed, click <strong>Next</strong>, select a rootstrap, and click <strong>Next</strong> again. (It takes about 1~5 minutes when installing the required libraries.)</p>
 <p align="center"><img alt="Selecting rootstrap" src="../images/platform_rootstrap.png" /></p>
index 434b6d0..971bb8e 100644 (file)
@@ -46,7 +46,7 @@
  
 <p>The <strong>Rootstrap View</strong> displays available rootstraps and the currently selected rootstrap. In the view, you can select, create, and remove a rootstrap, and also manage packages.</p>
  
-<p class="figure">Figure: Rootstrap View</p> 
+<p align="center"><strong>Figure: Rootstrap View</strong></p> 
 <p align="center"><img alt="Rootstrap View" src="../images/platform_rootstrap_view.png" /></p> 
 
 <ul>
@@ -69,7 +69,7 @@
 
 <p>To run the Package Manager, right-click the desired rootstrap and select <strong>Manage Packages</strong>. By selecting the applicable tab in the Package Manager, you can install packages to the rootstrap or the device.</p>
 
-<p class="figure">Figure: Package Manager</p> 
+<p align="center"><strong>Figure: Package Manager</strong></p> 
 <p align="center"><img alt="Package Manager" src="../images/platform_package_manager.png" /></p>
 
 <p>On both tabs:</p>
@@ -87,7 +87,7 @@
        <li><strong>Refresh</strong>: Resynchronize the package index files from the package repositories. If the repositories are changed, the package index is refreshed.</li>
        <li><strong>Upgrade</strong>: Perform a distribution upgrade.</li>
        <li><strong>Install</strong>: Install selected packages.</li>
-       <li><strong>Install Local</strong>: Install the selected package files (<span style="font-family: Courier New,Courier,monospace">.rpm</span>).</li>
+       <li><strong>Install Local</strong>: Install the selected package files (<code>.rpm</code>).</li>
        <li><strong>Uninstall</strong>: Uninstall selected packages.</li>
        <li><strong>Filter</strong>: Search for a package.</li>
        </ul>
 
 <h2 id="specfile">Specfile Editor</h2>
 
-<p>The Specfile Editor Plug-in for the Eclipse provides useful features to help you manage <span style="font-family: Courier New,Courier,monospace">.spec</span> files. The plug-in allows you to leverage several Eclipse GUI features in editing the <span style="font-family: Courier New,Courier,monospace">.spec</span> files, including an outline view in the editor, auto-completion, highlighting, file hyperlinks, and folding.</p>
+<p>The Specfile Editor Plug-in for the Eclipse provides useful features to help you manage <code>.spec</code> files. The plug-in allows you to leverage several Eclipse GUI features in editing the <code>.spec</code> files, including an outline view in the editor, auto-completion, highlighting, file hyperlinks, and folding.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Tizen platform IDE does not support features relevant to <strong>rpmlint</strong> and <strong>createrepo</strong>.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       The Tizen platform IDE does not support features relevant to <strong>rpmlint</strong> and <strong>createrepo</strong>.
+</div>
 
 <p>To set the Specfile Editor configuration, go to <strong>Window &gt; Preferences &gt; Others &gt; Specfile Editor</strong> in the IDE toolbar. For more information, see <strong>Help Contents &gt; Specfile Editor User Guide &gt; Configuring Specfile Editor Settings</strong>.</p>
 
-<p class="figure">Figure: Specfile Editor</p> 
+<p align="center"><strong>Figure: Specfile Editor</strong></p> 
 <p align="center"><img alt="Specfile Editor" src="../images/platform_specfile_editor.png" /></p>
  
 <h2 id="contentassist">Content Assist</h2>
 
 <h2 id="pofile">PO File Editor</h2>
 
-<p>The PO file editor is used to edit <span style="font-family: Courier New,Courier,monospace">.po</span> files to generate compiled gettext <span style="font-family: Courier New,Courier,monospace">.mo</span> files, which are used by Tizen platform applications to localize the user interface.</p>
+<p>The PO file editor is used to edit <code>.po</code> files to generate compiled gettext <code>.mo</code> files, which are used by Tizen platform applications to localize the user interface.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">There is no specific wizard to create the <span style="font-family: Courier New,Courier,monospace">.po</span> files. To create a <span style="font-family: Courier New,Courier,monospace">.po</span> file, go to <strong>New &gt; Other &gt; General &gt; File</strong> and save the file with the <span style="font-family: Courier New,Courier,monospace">.po</span> extension.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       There is no specific wizard to create the <code>.po</code> files. To create a <code>.po</code> file, go to <strong>New &gt; Other &gt; General &gt; File</strong> and save the file with the <code>.po</code> extension.
+</div>
 
-<p class="figure">Figure: PO file editor</p> 
+<p align="center"><strong>Figure: PO file editor</strong></p> 
 <p align="center"><img alt="PO file editor" src="../images/platform_po_file_editor.png" /></p>
   
 <ul>
-<li>To open the PO file editor, double-click the <span style="font-family: Courier New,Courier,monospace">.po</span> file in the <strong>Project Explorer</strong> view.</li>
+<li>To open the PO file editor, double-click the <code>.po</code> file in the <strong>Project Explorer</strong> view.</li>
 <li>To add a new string key, click the <strong>Add String Key</strong> icon.
 <p>An empty row is added to the string table. Fill in the details for the row.</p></li>
 <li>To remove a string key, right-click the key and select <strong>Remove</strong>.</li>
  
 <li>To add a language, click the <strong>Add Language</strong> icon.
 <p>In the <strong>Add Languages</strong> dialog, select the language code item you want.</p>
-<p class="figure">Figure: Adding a language</p> 
+<p align="center"><strong>Figure: Adding a language</strong></p> 
 <p align="center"><img alt="Adding a language" src="../images/platform_po_add.png" /></p>
 </li>
 <li>To remove a language, in the <strong>Supporting Languages</strong> pane, click the <strong>Remove Language</strong> icon and select the applicable language code item in the <strong>Remove Languages</strong> dialog.</li>
index b8982d8..8ccb4fa 100644 (file)
 <h2 id="preferences">Setting Web Preferences</h2>
  
  <p>To set Web preferences, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web</strong> in the Tizen Studio menu.</p>
+<div class="note">
+    <strong>Note</strong>
+       In Windows&reg; and Linux, <strong>Preferences</strong> is located in the <strong>Window</strong> menu. However, in Mac OS&reg; X, it is located in the <strong>Tizen Studio</strong> menu.
+</div>
 
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">In Windows&reg; and Linux, <strong>Preferences</strong> is located in the <strong>Window</strong> menu. However, in Mac OS&reg; X, it is located in the <strong>Tizen Studio</strong> menu.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p class="figure">Figure: Tizen Studio preferences</p> 
+<p align="center"><strong>Figure: Tizen Studio preferences</strong></p> 
 <p align="center"><img alt="Tizen Studio preferences" src="../images/ide_pref_tizen_studio.png" /></p> 
 
 <p>The preferences are listed in the left pane, and you can search for items by using the search box on the top left.</p>
@@ -78,9 +72,9 @@
 <h2 id="widget">Widget ID</h2>
 
 <p>To set a customized prefix for the widget ID, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web</strong>, and enter the value in the <strong>Widget ID prefix</strong> field. The default value of this field is <strong>http://yourdomain/</strong>.</p>
-<p>The value is automatically used in all widget IDs when you create a new Web application in the Tizen Studio. You can view the widget ID in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the project.</p>
+<p>The value is automatically used in all widget IDs when you create a new Web application in the Tizen Studio. You can view the widget ID in the <code>config.xml</code> file of the project.</p>
 
-<p class="figure">Figure: Widget ID</p> 
+<p align="center"><strong>Figure: Widget ID</strong></p> 
 <p align="center"><img alt="Widget ID" src="../images/ide_pref_widget_id.png" /></p> 
 
 <h2 id="chrome">Chrome&trade; Browser Path</h2>
@@ -98,7 +92,7 @@
 <h2 id="config">Configuration Editor</h2>
 
 <p>Go to <strong>Tizen Studio &gt; Web &gt; Editor &gt; Configuration Editor</strong>.</p>
-<p>To stop error messages from being displayed if you incorrectly modify the <span style="font-family: Courier New,Courier,monospace">config.xml</span> source file, select the <strong>Don't show error message</strong> check box.</p>
+<p>To stop error messages from being displayed if you incorrectly modify the <code>config.xml</code> source file, select the <strong>Don't show error message</strong> check box.</p>
 
 <h2 id="css">CSS Editor</h2>
 
        <li>Warning</li>
        <li>Error</li>
 </ul>
-<p>You can exclude CSS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.min.css</span> file generates many warnings, the default pattern string values exclude the parsing of this CSS file.</p>
+<p>You can exclude CSS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <code>jquery.min.css</code> file generates many warnings, the default pattern string values exclude the parsing of this CSS file.</p>
 
 <h2 id="html">HTML Editor</h2>
 
 <li>Warning</li>
 <li>Error</li>
 </ul>
-<p>You can exclude JS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.min.js</span> file generates many warnings, the default pattern string values exclude the parsing of this JS file.</p>
+<p>You can exclude JS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <code>jquery.min.js</code> file generates many warnings, the default pattern string values exclude the parsing of this JS file.</p>
 
 <h2 id="json">Json Editor</h2>
 
 <li>Warning</li>
 <li>Error</li>
 </ul>
-<p>You can exclude JS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.min.js</span> file generates many warnings, the default pattern string values exclude the parsing of this JS file.</p>
+<p>You can exclude JS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <code>jquery.min.js</code> file generates many warnings, the default pattern string values exclude the parsing of this JS file.</p>
 
 <h2 id="language">National Language Support</h2>
 
 <li>zh_TW (Chinese Traditional)</li>
 </ul>
 
-<p>To support a language, you must specify the language code. For example, to support the Korean language, edit the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file, which is located in your <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_STUDIO&gt;/ide</span> directory.</p>
-<p>The following snippet shows the current <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file supporting the English language:</p>
+<p>To support a language, you must specify the language code. For example, to support the Korean language, edit the <code>eclipse.ini</code> file, which is located in your <code>&lt;TIZEN_STUDIO&gt;/ide</code> directory.</p>
+<p>The following snippet shows the current <code>eclipse.ini</code> file supporting the English language:</p>
 <pre class="prettyprint">
 -clean
 -nl
@@ -186,7 +180,7 @@ en
 -vmargs
 </pre>
 
-<p>To support the Korean language, replace <span style="font-family: Courier New,Courier,monospace">en</span> with <span style="font-family: Courier New,Courier,monospace">ko</span> and save the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file.</p>
+<p>To support the Korean language, replace <code>en</code> with <code>ko</code> and save the <code>eclipse.ini</code> file.</p>
 <pre class="prettyprint">
 -clean
 -nl
@@ -197,7 +191,7 @@ ko
 <h2 id="launch">Launch</h2>
 
 <p>Go to <strong>Tizen Studio &gt; Web &gt; Launch</strong>.</p>
-<p>Select the option, if you want to launch the application even when the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file has an error. The option is cleared by default.</p>
+<p>Select the option, if you want to launch the application even when the <code>config.xml</code> file has an error. The option is cleared by default.</p>
 
 <h2 id="live">Live Editing</h2>
 
@@ -218,7 +212,7 @@ ko
 </li>
 </ul>
 
-<p class="figure">Figure: Live highlight</p> 
+<p align="center"><strong>Figure: Live highlight</strong></p> 
 <p align="center"><img alt="Live highlight" src="../images/ide_pref_live_highlight.png"/></p>
 
 
index 9451cf2..e8f3183 100644 (file)
@@ -51,7 +51,7 @@
 <p>You can use the Code Beautifier in 3 ways:</p>
        <ul>
        <li>In the <strong>Project Explorer</strong> view, right-click a CSS or JavaScript file in the project and select <strong>Code Beautifier</strong>.
-       <p>A beautified file with the <span style="font-family: Courier New,Courier,monospace">.beaut.&lt;extension&gt;</span> extension is generated, and a notification dialog is displayed in the lower-right section of the Tizen Studio.</p>
+       <p>A beautified file with the <code>.beaut.&lt;extension&gt;</code> extension is generated, and a notification dialog is displayed in the lower-right section of the Tizen Studio.</p>
        </li>
        <li>In the <strong>Source Editor</strong> view, right-click the code and select <strong>Code Beautifier</strong>.</li>
        <li>In the <strong>Source Editor</strong> or <strong>Project Explorer</strong> view, use the <strong>Ctrl + 6</strong> hotkey.</li>
        
 <p>In case you use the Code Beautifier in the <strong>Source Editor</strong> view, no new file is generated. The original file is changed instead.</p> 
 
-<p class="figure">Figure: Code Beautifier with CSS file - before beautifying</p> 
+<p align="center"><strong>Figure: Code Beautifier with CSS file - before beautifying</strong></p> 
 <p align="center"><img alt="Code Beautifier with CSS file - before beautifying" src="../images/code_productivity_before_beautifying.png"/></p>
 
 
-<p class="figure">Figure: Code Beautifier with CSS file - after beautifying</p> 
+<p align="center"><strong>Figure: Code Beautifier with CSS file - after beautifying</strong></p> 
 <p align="center"><img alt="Code Beautifier with CSS file - after beautifying" src="../images/code_productivity_after_beautifying.png"/></p>
 
 
 <p>You can use the Code Minifier in 3 ways:</p>
        <ul>
        <li>In the <strong>Project Explorer</strong> view, right-click a CSS or JavaScript file in the project and select <strong>Code Minifier</strong>.
-       <p>A minified (compressed) file with the <span style="font-family: Courier New,Courier,monospace">.min.&lt;extension&gt;</span> extension is generated, and a notification dialog is displayed in the lower-right section of the Tizen Studio.</p>
+       <p>A minified (compressed) file with the <code>.min.&lt;extension&gt;</code> extension is generated, and a notification dialog is displayed in the lower-right section of the Tizen Studio.</p>
        </li>
        <li>In the <strong>Source Editor</strong> view, right-click the code and select <strong>Code Minifier</strong>.</li>
        <li>In the <strong>Source Editor</strong> or <strong>Project Explorer</strong> view, use the <strong>Ctrl + 5</strong> hotkey.</li>
        
 <p>In case you use the Code Minifier in the <strong>Source Editor</strong> view, no new file is generated. The original file is changed instead.</p>   
 
-<p class="figure">Figure: Code Minifier with CSS file - before minifying</p> 
+<p align="center"><strong>Figure: Code Minifier with CSS file - before minifying</strong></p> 
 <p align="center"><img alt="Code Minifier with CSS file - before minifying" src="../images/code_productivity_minifying_css.png"/></p>
 
 
-<p class="figure">Figure: Code Minifier with CSS file - after minifying</p> 
+<p align="center"><strong>Figure: Code Minifier with CSS file - after minifying</strong></p> 
 <p align="center"><img alt="Code Minifier with CSS file - after minifying" src="../images/code_productivity_minifying_css_after.png"/></p>
 
 
index 9877986..51d37c1 100644 (file)
 
   <h1>Configuring Applications</h1>
 
-  <p>The Tizen Web application configuration file is composed of XML elements, including the <span style="font-family: Courier New,Courier,monospace">&lt;widget&gt;</span> element as its root and other elements. These elements represent the application information, such as <a href="#elements">configuration elements</a> and Tizen extending configuration elements for <a href="#mw_extend">mobile</a> and <a href="#ww_extend">wearable</a> applications.</p>
+  <p>The Tizen Web application configuration file is composed of XML elements, including the <code>&lt;widget&gt;</code> element as its root and other elements. These elements represent the application information, such as <a href="#elements">configuration elements</a> and Tizen extending configuration elements for <a href="#mw_extend">mobile</a> and <a href="#ww_extend">wearable</a> applications.</p>
 
-  <p>This configuration information is used when you install or run the Tizen Web application on the Tizen platform. The Tizen Web application project must have the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the project root directory.</p>
+  <p>This configuration information is used when you install or run the Tizen Web application on the Tizen platform. The Tizen Web application project must have the <code>config.xml</code> file in the project root directory.</p>
 
   <p>The configuration file can be easily edited with the <a href="#edit">Web application configuration editor</a> (form editor), or you can modify the XML structure directly using the configuration source editor. With the form editor, you can set the project configuration (manifest), even if you have no experience of developing a Tizen Web application project. If you are fluent with the configuration file XML structure, you can create the configuration file directly through the configuration source editor.</p>
   
-   <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> must conform to both the XML file format and the W3C specification requirements. Editing the file XML structure with the configuration source editor is intended for advanced users only.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       The <code>config.xml</code> must conform to both the XML file format and the W3C specification requirements. Editing the file XML structure with the configuration source editor is intended for advanced users only.
+</div>
   
   <h2 id="edit" name="edit">Editing the config.xml File</h2>
 
-<p>There are 2 different ways to edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>There are 2 different ways to edit the <code>config.xml</code> file:</p>
 
 <ul>
 <li>Use the <strong>Source</strong> tab:
-       <ol><li>Double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view.</li>
+       <ol><li>Double-click the <code>config.xml</code> file in the <strong>Project Explorer</strong> view.</li>
        <li>Select the <strong>Source</strong> tab.</li>
        </ol>
  
-<p class="figure">Figure: Source tab</p> 
+<p align="center"><strong>Figure: Source tab</strong></p> 
 <p align="center"><img alt="Source tab" src="../images/config_text.png" /></p>
 </li>
 <li>Use the form tabs:
-<ol><li>Double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view.</li>
+<ol><li>Double-click the <code>config.xml</code> file in the <strong>Project Explorer</strong> view.</li>
 <li>Select one of the form tabs (<strong>Overview</strong>, <strong>Features</strong>, <strong>Privileges</strong>, <strong>Localization</strong>, <strong>Policy</strong>, <strong>Preferences</strong>, <strong>Tizen</strong>).</li>
 </ol>
  
-<p class="figure">Figure: Form tabs</p> 
+<p align="center"><strong>Figure: Form tabs</strong></p> 
 <p align="center"><img alt="Form tabs" src="../images/config_form.png" /></p>
 </li>
 </ul>
   
   
   <h2 id="hierarchy" name="hierarchy">Configuration Element Hierarchy</h2>
-  <p>The Tizen Web application configuration file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+  <p>The Tizen Web application configuration file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <code>config.xml</code> file.</p>
     <table style="border:none;">
   <col width="5%"/>
   <col width="5%"/>
   <col width="85%"/>
    <tbody>
     <tr>
-        <td colspan="4" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#widget">&lt;widget&gt;</a></span></td>
+        <td colspan="4" style="border:none;"><code><a href="#widget">&lt;widget&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#name">&lt;name&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#name">&lt;name&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+        <td colspan="2" style="border:none;"><code><a href="#span">&lt;span&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#description">&lt;description&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+        <td colspan="2" style="border:none;"><code><a href="#span">&lt;span&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#author">&lt;author&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+        <td colspan="2" style="border:none;"><code><a href="#span">&lt;span&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#content_element">&lt;content&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#content_element">&lt;content&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> (in <a href="#mw_feature">mobile</a> or <a href="#ww_feature">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;feature&gt;</code> (in <a href="#mw_feature">mobile</a> or <a href="#ww_feature">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#param">&lt;param&gt;</a></span></td>
+        <td colspan="2" style="border:none;"><code><a href="#param">&lt;param&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#icon">&lt;icon&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#license">&lt;license&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#license">&lt;license&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+        <td colspan="2" style="border:none;"><code><a href="#span">&lt;span&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#preference">&lt;preference&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#preference">&lt;preference&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#access">&lt;access&gt;</a></span></td>
+        <td colspan="3" style="border:none;"><code><a href="#access">&lt;access&gt;</a></code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#mw_account">&lt;tizen:account&gt;</a></span> (in mobile only)</td>
+        <td colspan="3" style="border:none;"><code><a href="#mw_account">&lt;tizen:account&gt;</a></code> (in mobile only)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon&gt;</span></td>
+        <td colspan="2" style="border:none;"><code>&lt;tizen:icon&gt;</code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:display-name&gt;</span></td>
+        <td colspan="2" style="border:none;"><code>&lt;tizen:display-name&gt;</code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:capability&gt;</span></td>
+        <td colspan="2" style="border:none;"><code>&lt;tizen:capability&gt;</code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> (in <a href="#mw_appcontrol">mobile</a> or <a href="#appcontrol">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:app-control&gt;</code> (in <a href="#mw_appcontrol">mobile</a> or <a href="#appcontrol">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:src&gt;</span></td>
+        <td colspan="2" style="border:none;"><code>&lt;tizen:src&gt;</code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:operation&gt;</span></td>
+        <td colspan="2" style="border:none;"><code>&lt;tizen:operation&gt;</code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uri&gt;</span></td>
+        <td colspan="2" style="border:none;"><code>&lt;tizen:uri&gt;</code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:mime&gt;</span></td>
+        <td colspan="2" style="border:none;"><code>&lt;tizen:mime&gt;</code></td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:application&gt;</code> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
     </tr>
        
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:content&gt;</code> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span> (in <a href="#mw_privilege">mobile</a> or <a href="#ww_privilege">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:privilege&gt;</code> (in <a href="#mw_privilege">mobile</a> or <a href="#ww_privilege">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span> (in <a href="#mw_setting">mobile</a> or <a href="#ww_setting">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:setting&gt;</code> (in <a href="#mw_setting">mobile</a> or <a href="#ww_setting">wearable</a>)</td>
     </tr>
      <tr>
          <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:background-category&gt;</span> (in <a href="#mw_bg_category">mobile</a> or <a href="#ww_bg_category">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:background-category&gt;</code> (in <a href="#mw_bg_category">mobile</a> or <a href="#ww_bg_category">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy&gt;</span> (in <a href="#mw_sec">mobile</a> or <a href="#ww_contentsecpolicy">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:content-security-policy&gt;</code> (in <a href="#mw_sec">mobile</a> or <a href="#ww_contentsecpolicy">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only&gt;</span> (in <a href="#mw_secreport">mobile</a> or <a href="#ww_contentsecpolicyreport">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:content-security-policy-report-only&gt;</code> (in <a href="#mw_secreport">mobile</a> or <a href="#ww_contentsecpolicyreport">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation&gt;</span> (in <a href="#mw_navigation">mobile</a> or <a href="#ww_allownavigation">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:allow-navigation&gt;</code> (in <a href="#mw_navigation">mobile</a> or <a href="#ww_allownavigation">wearable</a>)</td>
     </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span> (in <a href="#mw_metadata">mobile</a> or <a href="#ww_metadata">wearable</a>)</td>
+        <td colspan="3" style="border:none;"><code>&lt;tizen:metadata&gt;</code> (in <a href="#mw_metadata">mobile</a> or <a href="#ww_metadata">wearable</a>)</td>
     </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span> (in <a href="#mw_profile">mobile</a> or <a href="#ww_profile">wearable</a>)</td>
+               <td colspan="3" style="border:none;"><code>&lt;tizen:profile&gt;</code> (in <a href="#mw_profile">mobile</a> or <a href="#ww_profile">wearable</a>)</td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_ime">&lt;tizen:ime&gt;</a></span> (in wearable only)</td>
+               <td colspan="3" style="border:none;"><code><a href="#ww_ime">&lt;tizen:ime&gt;</a></code> (in wearable only)</td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uuid&gt;</span></td>
+               <td colspan="2" style="border:none;"><code>&lt;tizen:uuid&gt;</code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:languages&gt;</span></td>
+               <td colspan="2" style="border:none;"><code>&lt;tizen:languages&gt;</code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_language">&lt;tizen:language&gt;</a></span></td>
+               <td style="border:none;"><code><a href="#ww_language">&lt;tizen:language&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_category">&lt;tizen:category&gt;</a></span> (in wearable only)</td>
+               <td colspan="3" style="border:none;"><code><a href="#ww_category">&lt;tizen:category&gt;</a></code> (in wearable only)</td>
        </tr>
 
        <tr>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service">&lt;tizen:service&gt;</a></span> (in wearable only)</td>
+               <td colspan="3" style="border:none;"><code><a href="#ww_service">&lt;tizen:service&gt;</a></code> (in wearable only)</td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-name">&lt;tizen:name&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_service-name">&lt;tizen:name&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-icon">&lt;tizen:icon&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_service-icon">&lt;tizen:icon&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-content">&lt;tizen:content&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_service-content">&lt;tizen:content&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-description">&lt;tizen:description&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_service-description">&lt;tizen:description&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-metadata">&lt;tizen:metadata&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_service-metadata">&lt;tizen:metadata&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-category">&lt;tizen:category&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_service-category">&lt;tizen:category&gt;</a></code></td>
        </tr>   
        
        <tr>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_webwidget">&lt;tizen:app-widget&gt;</a></span> (in wearable only)</td>
+               <td colspan="3" style="border:none;"><code><a href="#ww_webwidget">&lt;tizen:app-widget&gt;</a></code> (in wearable only)</td>
        </tr>   
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_widget-label">&lt;tizen:widget-label&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_widget-label">&lt;tizen:widget-label&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_widget-content">&lt;tizen:widget-content&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_widget-content">&lt;tizen:widget-content&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_widget-size">&lt;tizen:widget-size&gt;</a></span></td>
+               <td style="border:none;"><code><a href="#ww_widget-size">&lt;tizen:widget-size&gt;</a></code></td>
        </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_widget-metadata">&lt;tizen:widget-metadata&gt;</a></span></td>
+               <td colspan="2" style="border:none;"><code><a href="#ww_widget-metadata">&lt;tizen:widget-metadata&gt;</a></code></td>
        </tr>   
    </tbody>
   </table>
 
  <h2 id="elements" name="elements">Configuration Elements</h2>
-  <p>The following tables summarize of the W3C configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application. For more information on the W3C element details, see <a href="http://www.w3.org/TR/widgets/" target="_blank">Packaging and XML Configuration</a> (the details of the Tizen extending configuration elements are described in <a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a> and <a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a>). For a quick view of the element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
+  <p>The following tables summarize of the W3C configuration elements used in the <code>config.xml</code> file of the Web application. For more information on the W3C element details, see <a href="http://www.w3.org/TR/widgets/" target="_blank">Packaging and XML Configuration</a> (the details of the Tizen extending configuration elements are described in <a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a> and <a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a>). For a quick view of the element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
   
 <table id="widget">
 <tbody>
 </tr>
  <tr>
  <td>Represents the root element of a configuration document. <p><strong>Expected children:</strong></p>
-<p><span style="font-family: Courier New,Courier,monospace">&lt;name&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;description&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;author&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;license&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;preference&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;access&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:account&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</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>
-    <li><span style="font-family: Courier New,Courier,monospace">version</span>
-    <p>Specific version of the Tizen package. The expected value is <span style="font-family: Courier New,Courier,monospace">[0-255].[0-255].[0-65535]</span>.</p></li>
-    <li><span style="font-family: Courier New,Courier,monospace">height</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">viewmodes</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">defaultlocale</span></li></ul>
+<p><code>&lt;name&gt;</code>, <code>&lt;description&gt;</code>, <code>&lt;author&gt;</code>, <code>&lt;license&gt;</code>, <code>&lt;icon&gt;</code>, <code>&lt;content&gt;</code>, <code>&lt;feature&gt;</code>, <code>&lt;preference&gt;</code>, <code>&lt;access&gt;</code>, <code>&lt;tizen:account&gt;</code>, <code>&lt;tizen:app-control&gt;</code>, <code>&lt;tizen:application&gt;</code>, <code>&lt;tizen:content&gt;</code>, <code>&lt;tizen:privilege&gt;</code>, <code>&lt;tizen:setting&gt;</code>, and <code>&lt;tizen:profile&gt;</code></p> <p><strong>Attributes:</strong></p> 
+    <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li>
+    <li><code>id</code></li>
+    <li><code>version</code>
+    <p>Specific version of the Tizen package. The expected value is <code>[0-255].[0-255].[0-65535]</code>.</p></li>
+    <li><code>height</code></li>
+    <li><code>width</code></li>
+    <li><code>viewmodes</code></li>
+    <li><code>defaultlocale</code></li></ul>
  </td>
  </tr>
  </tbody></table>
 </tr>
  <tr>
  <td>Represents the Web application name used for example, in the application menu. <p><strong>Expected children:</strong></p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</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">short</span></li></ul>
+    <p><code>&lt;span&gt;</code> and <code>&lt;text node&gt;</code></p> <p><strong>Attributes:</strong></p>
+    <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li>
+    <li><code>short</code></li></ul>
  </td>
  </tr>
  </tbody></table>
 </tr>
  <tr>
  <td>Represents text describing the purpose of the Web application. <p><strong>Expected children:</strong></p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</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></ul>
+    <p><code>&lt;span&gt;</code> and <code>&lt;text node&gt;</code></p> <p><strong>Attributes:</strong></p>
+    <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li></ul>
  </td>
  </tr>
  </tbody></table>
 </tr>
  <tr>
  <td>Represents the person that created the Web application. <p><strong>Expected children:</strong></p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</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">href</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">email</span></li></ul>
+    <p><code>&lt;span&gt;</code> and <code>&lt;text node&gt;</code></p> <p><strong>Attributes:</strong></p>
+<ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li>
+    <li><code>href</code></li>
+    <li><code>email</code></li></ul>
  </td>
  </tr>
  </tbody></table>
 </tr>
  <tr>
  <td>Represents the boot-strapping mechanism used to point to the main file of the Web application.  <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">encoding</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">src</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">type</span></li></ul>
+     <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li>
+    <li><code>encoding</code></li>
+    <li><code>src</code></li>
+    <li><code>type</code></li></ul>
  </td>
  </tr>
  </tbody></table>
 </tr>
  <tr>
  <td>Represents the Web application icon.  <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">src</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">height</span></li></ul> 
+     <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li>
+    <li><code>src</code></li>
+    <li><code>width</code></li>
+    <li><code>height</code></li></ul> 
  </td>
  </tr>
  </tbody></table>
 </tr>
  <tr>
  <td>Represents the license under which the Web application is distributed. <p><strong>Expected children:</strong></p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</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">href</span></li></ul>
+    <p><code>&lt;span&gt;</code> and <code>&lt;text node&gt;</code></p> <p><strong>Attributes:</strong></p>
+    <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li>
+    <li><code>href</code></li></ul>
  </td>
  </tr>
  </tbody></table>
  <tr>
  <td>Used to declare preferences as key-value pairs for the Web application for use at runtime. <p><strong>Attributes:</strong></p>
         <ul>
-          <li><span style="font-family: Courier New,Courier,monospace">name</span><p>The maximum length can be limited to 80 bytes.  In that case, leftover bytes are ignored.</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">value</span><p>The maximum length can be limited to 8192 bytes.  In that case, leftover bytes are ignored.</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">readonly</span></li>
+          <li><code>name</code><p>The maximum length can be limited to 80 bytes.  In that case, leftover bytes are ignored.</p></li>
+          <li><code>value</code><p>The maximum length can be limited to 8192 bytes.  In that case, leftover bytes are ignored.</p></li>
+          <li><code>readonly</code></li>
          </ul>
  </td>
  </tr>
 </tr>
  <tr>
  <td>Used to control network access from within a Web application and to request access to certain network resources from the user agent. <p><strong>Attributes:</strong></p>
- <ul><li><span style="font-family: Courier New,Courier,monospace">origin</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">subdomains</span></li></ul>
+ <ul><li><code>origin</code></li>
+    <li><code>subdomains</code></li></ul>
  </td>
  </tr>
  </tbody></table>
 </tr>
  <tr>
  <td>Represents the generic container used mainly for internationalization. <p><strong>Expected children:</strong></p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</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></ul>
+    <p><code>&lt;span&gt;</code> and <code>&lt;text node&gt;</code></p> <p><strong>Attributes:</strong></p>
+    <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li></ul>
  </td>
  </tr>
  </tbody></table>
  <tr>
  <td>Used to declare parameters to be used with a feature in <a href="#mw_feature">mobile</a> and <a href="#ww_feature">wearable</a> applications.
  <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">name</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">value</span></li></ul>
+     <ul><li><code>xml:lang</code></li>
+    <li><code>dir</code></li>
+    <li><code>name</code></li>
+    <li><code>value</code></li></ul>
  </td>
  </tr>
  </tbody></table>
  
 <h2 id="mw_extend" name="mw_extend">Extending Configuration Elements in Mobile Applications</h2>
- <p>The following sections show additional configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
+ <p>The following sections show additional configuration elements used in the <code>config.xml</code> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The extension elements are denoted as though the <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span> namespace declaration was in effect.
-        <p>The maximum length of the attribute and the element (except <span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span>, W3C preference element) can be limited to 2048 bytes. In this case, leftover bytes are ignored.</p></td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       The extension elements are denoted as though the <code>xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</code> namespace declaration was in effect.
+        <p>The maximum length of the attribute and the element (except <code>&lt;tizen:metadata&gt;</code>, W3C preference element) can be limited to 2048 bytes. In this case, leftover bytes are ignored.</p>
+</div>
 
   <h3 id="mw_account" name="mw_account">Tizen Account</h3>
 <table>
     </ul>
     <p><strong>Expected children:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">icon</span> <p>Mandatory. Since the icons are used in the device under <strong>Settings &gt; Accounts</strong>, place them in a shared directory.</p>
+       <li><code>icon</code> <p>Mandatory. Since the icons are used in the device under <strong>Settings &gt; Accounts</strong>, place them in a shared directory.</p>
        <p>Attributes:</p>
-       <ul><li><span style="font-family: Courier New,Courier,monospace;">Account</span>: File path of the account provider icon. The icon size is 72 x 72 pixels.</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">AccountSmall</span>: File path of the account provider small icon. The icon size is 45 x 45 pixels. </li></ul></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">display-name</span> <p>Mandatory; display name of the account provider</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">capability</span><p>Optional; capability of the account provider. Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace;">http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</span> IRI format.</p></li>
+       <ul><li><code>Account</code>: File path of the account provider icon. The icon size is 72 x 72 pixels.</li>
+       <li><code>AccountSmall</code>: File path of the account provider small icon. The icon size is 45 x 45 pixels. </li></ul></li>
+       <li><code>display-name</code> <p>Mandatory; display name of the account provider</p></li>
+       <li><code>capability</code><p>Optional; capability of the account provider. Capabilities are defined in the <code>http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</code> IRI format.</p></li>
       </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">multiple-account-support</span> <p>Mandatory; indicates whether multiple accounts are supported (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>)</p></li>
+       <li><code>multiple-account-support</code> <p>Mandatory; indicates whether multiple accounts are supported (available values: <code>true</code>, <code>false</code>)</p></li>
 
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:account multiple-account-support=&quot;false&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;Account&quot;&gt;account_provider_icon.png&lt;/tizen:icon&gt;
     </ul>
      <p><strong>Expected children:</strong> </p>
       <ul>
-               <li><span style="font-family: Courier New,Courier,monospace;">src</span>
+               <li><code>src</code>
                        <p> Attributes:</p>
                        <ul>
-                               <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; page handling the requests </p></li>
-                               <li><span style="font-family: Courier New,Courier,monospace;">reload</span> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p><strong>Since: 2.4</strong></p> 
-                       <table class="note">
-                       <tbody>
-                       <tr>
-                               <th class="note">Note</th>
-                       </tr> 
-                       <tr>
-                               <td class="note">The <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the application&#39;s <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file is set to a version older than Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is used, the application installation fails.</td>
-                       </tr>
-                       </tbody>
-                       </table>
+                               <li><code>name</code> <p>Mandatory; page handling the requests </p></li>
+                               <li><code>reload</code> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <code>enable</code> (default), <code>disable</code>)</p><p><strong>Since: 2.4</strong></p> 
+<div class="note">
+    <strong>Note</strong>
+       The <code>reload</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>reload</code> attribute is used, the application installation fails.
+</div>
                        </li>
                        </ul>
                </li>
 
-       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
+       <li><code>operation</code> <p>Mandatory; string that defines the action to be performed</p></li>
+       <li><code>uri</code> and <code>mime</code><p>Optional; additional parameters used for resolving application control requests</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the Tizen Studio. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen package ID generated by the Tizen Studio, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
-               <li><span style="font-family: Courier New,Courier,monospace;">launch_mode</span> <p>Optional; sets which launch mode is supported (available values: <span style="font-family: Courier New,Courier,monospace;">single</span> (default), <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">caller</span>)</p>
-               <ul><li><span style="font-family: Courier New,Courier,monospace;">single</span>: launched as a main application</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">group</span>: launched as a sub application</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">caller</span>: caller application defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> method</li></ul>
+       <li><code>id</code> <p>Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the Tizen Studio. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
+       <li><code>package</code> <p>Mandatory; Tizen package ID generated by the Tizen Studio, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.</p></li>
+       <li><code>required_version</code> <p>Mandatory; Tizen API version required for running the Web application</p></li>
+               <li><code>launch_mode</code> <p>Optional; sets which launch mode is supported (available values: <code>single</code> (default), <code>group</code>, <code>caller</code>)</p>
+               <ul><li><code>single</code>: launched as a main application</li>
+               <li><code>group</code>: launched as a sub application</li>
+               <li><code>caller</code>: caller application defines the launch mode with the <code>app_control_set_launch_mode()</code> method</li></ul>
                <p><strong>Since: 2.4</strong></p>
-               <table class="note">
-                       <tbody>
-                               <tr>
-                                       <th class="note">Note</th>
-                               </tr>
-                               <tr>
-                                       <td class="note">The <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the application&#39;s <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file is set to a version older than Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is used, the application installation fails.</td>
-                               </tr>
-                       </tbody>
-               </table>
+<div class="note">
+    <strong>Note</strong>
+       The <code>launch_mode</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>launch_mode</code> attribute is used, the application installation fails.
+</div>
                </li>
       </ul><p><strong>Example:</strong></p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
 </tr>
  <tr>
  <td>Used to point to a document which is hosted on an external server and acts as the Web application start page. The Tizen WRT allows the start page to be hosted on an external server.
-     <p>If the start page is contained in the widget package, it is defined with the <a href="#content_element"><span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> W3C element</a>. If both <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> elements are defined, the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element is used.</p>
+     <p>If the start page is contained in the widget package, it is defined with the <a href="#content_element"><code>&lt;content&gt;</code> W3C element</a>. If both <code>&lt;content&gt;</code> and <code>&lt;tizen:content /&gt;</code> elements are defined, the <code>&lt;tizen:content /&gt;</code> element is used.</p>
      <p><strong>Occurrences:</strong> </p>
     <ul>
        <li>0 or more
-       <p>If more than 1 <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element is specified, the first instance of the element is used.</p></li>
+       <p>If more than 1 <code>&lt;tizen:content /&gt;</code> element is specified, the first instance of the element is used.</p></li>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span><p>Mandatory; URI of the external start page</p></li>
+       <li><code>src</code><p>Mandatory; URI of the external start page</p></li>
       </ul>
 
       <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content src=&quot;https://www.tizen.org/&quot; /&gt;</pre>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li>
+       <li><code>name</code><p> Mandatory; URI of the Device API privilege</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre>
  </td>
  </tr>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> 
-         <p>Optional; application execution continues when it is moved to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (execution continues on the background), <span style="font-family: Courier New,Courier,monospace;">disable</span> (default; application is suspended))</p>    
-                <table class="note">
-                <tbody>
-                 <tr>
-                  <th class="note">Note</th>
-                 </tr>
-                 <tr>
-                  <td class="note">Since Tizen 2.4, the system manages background processes more tightly. Even if the <span style="font-family: Courier New,Courier,monospace;">background-support</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">enable</span>, the Web application process can be suspended on the background. To guarantee that the application runs on the background, <a href="#mw_bg_category">add at least one background category</a> for the application with the <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:background-category&gt;</span> element. Only the background categories declared in the system can be used.</td>
-                 </tr>
-                </tbody>
-               </table>
+       <li><code>background-support</code> 
+         <p>Optional; application execution continues when it is moved to the background (available values: <code>enable</code> (execution continues on the background), <code>disable</code> (default; application is suspended))</p>    
+<div class="note">
+    <strong>Note</strong>
+       Since Tizen 2.4, the system manages background processes more tightly. Even if the <code>background-support</code> attribute is set to <code>enable</code>, the Web application process can be suspended on the background. To guarantee that the application runs on the background, <a href="#mw_bg_category">add at least one background category</a> for the application with the <code>&lt;tizen:background-category&gt;</code> element. Only the background categories declared in the system can be used.
+</div>
                </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Web application resources (HTML, JavaScript, and CSS files) are stored encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span><p>Optional; viewport orientation lock (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">landscape</span>), auto-rotation</p>If the system auto rotation setting is on, the Web application viewport orientation is changed accordingly by default.</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; application installation location (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">internal-only</span>, <span style="font-family: Courier New,Courier,monospace;">prefer-external</span>)</p>
+       <li><code>context-menu</code> <p>Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: <code>enable</code> (default), <code>disable</code>)</p></li>
+       <li><code>encryption</code> <p>Optional; Web application resources (HTML, JavaScript, and CSS files) are stored encrypted (available values: <code>enable</code>, <code>disable</code> (default))</p></li>
+       <li><code>screen-orientation</code><p>Optional; viewport orientation lock (available values: <code>portrait</code> (default), <code>landscape</code>), auto-rotation</p>If the system auto rotation setting is on, the Web application viewport orientation is changed accordingly by default.</li>
+       <li><code>install-location</code> <p>Optional; application installation location (available values: <code>auto</code> (default), <code>internal-only</code>, <code>prefer-external</code>)</p>
                <ul>
-               <li><span style="font-family: Courier New,Courier,monospace;">auto</span>: the system defines the installation location</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">internal-only</span>: the application is installed in the device&#39;s internal storage</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">prefer-external</span>: the application is installed in the external storage (if available)</li>
+               <li><code>auto</code>: the system defines the installation location</li>
+               <li><code>internal-only</code>: the application is installed in the device&#39;s internal storage</li>
+               <li><code>prefer-external</code>: the application is installed in the external storage (if available)</li>
                </ul>  
           </li>
-      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available values: <span style="font-family: Courier New,Courier,monospace;">menu</span> and <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
+      <li><code>hwkey-event</code> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <code>enable</code> (default), <code>  disable</code>)</p><p>If this option is enabled, the <code>tizenhwkey</code> custom event is sent to the Web application. The <code>tizenhwkey</code> event object has a <code>keyName</code> attribute (available values: <code>menu</code> and <code>back</code>).</p></li>
 
 
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;!--Web application execution is not suspended--&gt;
  <tr>
  <td>Used to represent the category of the application that is allowed to run on the background.
 
-        <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">In addition to declaring the <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element, you must <a href="#mw_setting">set the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting background-support&gt;</span> attribute to <span style="font-family: Courier New,Courier,monospace;">enable</span></a> to run Web applications on the background.
-    </td>
-    </tr>
-   </tbody>
-  </table>
-
+<div class="note">
+    <strong>Note</strong>
+       In addition to declaring the <code>&lt;background-category&gt;</code> element, you must <a href="#mw_setting">set the <code>&lt;tizen:setting background-support&gt;</code> attribute to <code>enable</code></a> to run Web applications on the background.
+</div>
      <p><strong>Occurrences:</strong> </p>
     <ul>
        <li>0 or more</li>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>
+       <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>
       </ul><p><strong>Example:</strong> </p>
          <pre class="prettyprint">&lt;tizen:background-category value=&quot;media&quot; /&gt;</pre>
  </td>
 </tr>
  <tr>
  <td>Used to define hardware and software components for a Tizen application. This attribute is only used in the Tizen Store for filtering purposes. It is ignored by the Web Runtime installation procedure.
-     <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
-</td>
-    </tr>
-   </tbody>
-  </table>
+
+<div class="note">
+    <strong>Note</strong>
+       Even though the <code>&lt;feature /&gt;</code> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
+</div>
 
      <p><strong>Occurrences:</strong> </p>
     <ul>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.training/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
+       <li><code>name</code> <p>Mandatory; <a href="../../../org.tizen.training/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre>
  </td>
  </tr>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">key</span>
+       <li><code>key</code>
            <p>Mandatory; unique key string.</p>
            <p>The maximum length can be limited to 80 bytes.  In this case, leftover bytes are ignored.</p>
        </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span>
+       <li><code>value</code>
            <p>Optional; string.</p>
            <p>The maximum length can be limited to 8192 bytes.  In this case, leftover bytes are ignored.</p>
        </li>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string</p></li> 
+       <li><code>name</code> <p>Mandatory; string</p></li> 
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;mobile&quot; /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
 
 <h2 id="ww_extend" name="ww_extend">Extending Configuration Elements in Wearable Applications</h2>
- <p>The following sections show additional configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
+ <p>The following sections show additional configuration elements used in the <code>config.xml</code> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The extension elements are denoted as though the <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span> namespace declaration was in effect.
-       <p>The maximum length of the attribute and the element (except <span style="font-family: Courier New,Courier,monospace;">tizen:metadata</span>, W3C preference element) can be limited to 2048 bytes. In that case, leftover bytes are ignored.</p></td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       The extension elements are denoted as though the <code>xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</code> namespace declaration was in effect.
+       <p>The maximum length of the attribute and the element (except <code>tizen:metadata</code>, W3C preference element) can be limited to 2048 bytes. In that case, leftover bytes are ignored.</p>
+</div>
 
     <h3 id="ww_application" name="ww_application">Tizen Application</h3>
 <table>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-        <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the Tizen Studio. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>             
-       <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory;  Tizen wearable package ID generated by the Tizen Studio, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
-               <li><span style="font-family: Courier New,Courier,monospace;">launch_mode</span> <p>Optional; sets which launch mode is supported (available values: <span style="font-family: Courier New,Courier,monospace;">single</span> (default), <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">caller</span>)</p>
-               <ul><li><span style="font-family: Courier New,Courier,monospace;">single</span>: launched as a main application</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">group</span>: launched as a sub application</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">caller</span>: caller application defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> method</li></ul>
+        <li><code>id</code> <p>Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the Tizen Studio. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>                 
+       <li><code>package</code> <p>Mandatory;  Tizen wearable package ID generated by the Tizen Studio, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
+       <li><code>required_version</code> <p>Mandatory; Tizen API version required for running the Web application</p></li>
+               <li><code>launch_mode</code> <p>Optional; sets which launch mode is supported (available values: <code>single</code> (default), <code>group</code>, <code>caller</code>)</p>
+               <ul><li><code>single</code>: launched as a main application</li>
+               <li><code>group</code>: launched as a sub application</li>
+               <li><code>caller</code>: caller application defines the launch mode with the <code>app_control_set_launch_mode()</code> method</li></ul>
                <p><strong>Since: 2.4</strong></p>
-               <table class="note">
-               <tbody>
-                       <tr>
-                               <th class="note">Note</th>
-                       </tr>
-                       <tr>
-                               <td class="note">The <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the application&#39;s <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file is set to a version older than Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is used, the application installation fails.</td>
-                       </tr>
-               </tbody>
-               </table>
+<div class="note">
+    <strong>Note</strong>
+       The <code>launch_mode</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>launch_mode</code> attribute is used, the application installation fails.
+</div>
        </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">ambient_support</span> <p>Optional; sets whether the Web application supports the ambient mode (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p><strong>Since: 2.3.1</strong>
+       <li><code>ambient_support</code> <p>Optional; sets whether the Web application supports the ambient mode (available values: <code>enable</code>, <code>disable</code> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p><strong>Since: 2.3.1</strong>
 
-   <table class="note">
-    <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> option is only used for watch applications, and ignored in all non-watch applications.
-        <p>The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> attribute is supported from Tizen 2.3.1 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the application&#39;s <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file is set to a version older than Tizen 2.3.1, and the <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> attribute is used, the application installation fails.</p></td>
-        </tr>
-       </tbody>
-    </table> 
+<div class="note">
+    <strong>Note</strong>
+       The <code>ambient_support</code> option is only used for watch applications, and ignored in all non-watch applications.
+        <p>The <code>ambient_support</code> attribute is supported from Tizen 2.3.1 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.3.1, and the <code>ambient_support</code> attribute is used, the application installation fails.</p>
+</div>
 </li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;  
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li> 
+       <li><code>name</code><p> Mandatory; URI of the Device API privilege</p></li> 
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre>
  </td>
  </tr>
     </ul>
      <p><strong>Expected children:</strong> </p>
       <ul>
-               <li><span style="font-family: Courier New,Courier,monospace;">src</span>
+               <li><code>src</code>
                <p>Attributes:</p>
                <ul>
-                       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; page handling the requests </p></li>
-                       <li><span style="font-family: Courier New,Courier,monospace;">reload</span> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p><strong>Since: 2.4</strong></p> 
-                       <table class="note">
-                       <tbody>
-                       <tr>
-                               <th class="note">Note</th>
-                       </tr>
-                       <tr>
-                               <td class="note">The <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the application&#39;s <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file is set to a version older than Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is used, the application installation fails.</td>
-                       </tr>
-                       </tbody>
-                       </table>
+                       <li><code>name</code> <p>Mandatory; page handling the requests </p></li>
+                       <li><code>reload</code> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <code>enable</code> (default), <code>disable</code>)</p><p><strong>Since: 2.4</strong></p> 
+
+<div class="note">
+    <strong>Note</strong>
+       The <code>reload</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>reload</code> attribute is used, the application installation fails.
+</div>
                </li>
                </ul>
                </li>
 
-       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
+       <li><code>operation</code> <p>Mandatory; string that defines the action to be performed</p></li>
+       <li><code>uri</code> and <code>mime</code><p>Optional; additional parameters used for resolving application control requests</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
         <p><strong>Attributes:</strong> </p> 
       <ul> 
      
-      <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> 
-         <p>Optional; application execution continues when it is moved to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (execution continues on the background), <span style="font-family: Courier New,Courier,monospace;">disable</span> (default; application is suspended))</p>
-                         <table class="note">
-               <tbody>
-                <tr>
-                 <th class="note">Note</th>
-                </tr>
-                <tr>
-                 <td class="note">Since Tizen 2.4, the system manages background processes more tightly. Even if the <span style="font-family: Courier New,Courier,monospace;">background-support</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">enable</span>, the Web application process can be suspended on the background. To guarantee that the application runs on the background, <a href="#ww_bg_category">add at least one background category</a> for the application with the <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:background-category&gt;</span> element. Only the background categories declared in the system can be used.</td>
-                </tr>
-               </tbody>
-          </table>
+      <li><code>background-support</code> 
+         <p>Optional; application execution continues when it is moved to the background (available values: <code>enable</code> (execution continues on the background), <code>disable</code> (default; application is suspended))</p>
+<div class="note">
+    <strong>Note</strong>
+       Since Tizen 2.4, the system manages background processes more tightly. Even if the <code>background-support</code> attribute is set to <code>enable</code>, the Web application process can be suspended on the background. To guarantee that the application runs on the background, <a href="#ww_bg_category">add at least one background category</a> for the application with the <code>&lt;tizen:background-category&gt;</code> element. Only the background categories declared in the system can be used.
+</div>
          </li> 
-      <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; sets whether the context menu is shown (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; sets whether Web Application resources are encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, the application resources(HTML, JS and CSS files) are encrypted.</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span> <p>Optional; sets whether it locks the orientation of the Web Application (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">landscape</span>, <span style="font-family: Courier New,Courier,monospace;">auto-rotation</span>)</p>
-         <ul><li><span style="font-family: Courier New,Courier,monospace;">portrait</span> or <span style="font-family: Courier New,Courier,monospace;">landscape</span>: orientation is locked to portrait or landscape respectively</li>
-         <li><span style="font-family: Courier New,Courier,monospace;">auto-rotation</span>: follows the device orientation setting</li></ul>
+      <li><code>context-menu</code> <p>Optional; sets whether the context menu is shown (available values: <code>enable</code> (default), <code>disable</code>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
+      <li><code>encryption</code> <p>Optional; sets whether Web Application resources are encrypted (available values: <code>enable</code>, <code>disable</code> (default))</p><p>If this option is enabled, the application resources(HTML, JS and CSS files) are encrypted.</p></li>
+      <li><code>screen-orientation</code> <p>Optional; sets whether it locks the orientation of the Web Application (available values: <code>portrait</code> (default), <code>landscape</code>, <code>auto-rotation</code>)</p>
+         <ul><li><code>portrait</code> or <code>landscape</code>: orientation is locked to portrait or landscape respectively</li>
+         <li><code>auto-rotation</code>: follows the device orientation setting</li></ul>
          </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; application installation location (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">internal-only</span>, <span style="font-family: Courier New,Courier,monospace;">prefer-external</span>)</p>
+       <li><code>install-location</code> <p>Optional; application installation location (available values: <code>auto</code> (default), <code>internal-only</code>, <code>prefer-external</code>)</p>
                <ul>
-               <li><span style="font-family: Courier New,Courier,monospace;">auto</span>: the system defines the installation location</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">internal-only</span>: the application is installed in the device&#39;s internal storage</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">prefer-external</span>: the application is installed in the external storage (if available)</li>
+               <li><code>auto</code>: the system defines the installation location</li>
+               <li><code>internal-only</code>: the application is installed in the device&#39;s internal storage</li>
+               <li><code>prefer-external</code>: the application is installed in the external storage (if available)</li>
                </ul>  
           </li>
          
-      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available value: <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
+      <li><code>hwkey-event</code> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <code>enable</code> (default), <code>disable</code>)</p><p>If this option is enabled, the <code>tizenhwkey</code> custom event is sent to the Web application. The <code>tizenhwkey</code> event object has a <code>keyName</code> attribute (available value: <code>back</code>).</p></li>
          
          </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
 &lt;tizen:setting background-support=&quot;enable&quot; /&gt;
  <tr>
  <td>Used to represent the category of the application that is allowed to run on the background.
 
-        <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">In addition to declaring the <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element, you must <a href="#ww_setting">set the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting background-support&gt;</span> attribute to <span style="font-family: Courier New,Courier,monospace;">enable</span></a> to run Web applications on the background.
-    </td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       In addition to declaring the <code>&lt;background-category&gt;</code> element, you must <a href="#ww_setting">set the <code>&lt;tizen:setting background-support&gt;</code> attribute to <code>enable</code></a> to run Web applications on the background.
+</div>
 
      <p><strong>Occurrences:</strong> </p>
     <ul>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>
+       <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>
       </ul><p><strong>Example:</strong> </p>
          <pre class="prettyprint">&lt;tizen:background-category value=&quot;media&quot; /&gt;</pre> 
  </td>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
      
-      <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; URI of an external start page</p></li> 
+      <li><code>src</code> <p>Mandatory; URI of an external start page</p></li> 
 
          </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
 &lt;tizen:content src=&quot;https://www.tizen.org&quot;/&gt;</pre>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">key</span>
+       <li><code>key</code>
            <p>Mandatory; unique key string.</p>
            <p>The maximum length can be limited to 80 bytes. In that case, leftover bytes are ignored.</p>
        </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span>
+       <li><code>value</code>
            <p>Optional; string.</p>
            <p>The maximum length can be limited to 8192 bytes. In that case, leftover bytes are ignored.</p>
        </li>
 </tr>
  <tr>
  <td>Used to define the properties of IME (Input Method Editor) type application, which is used when you want to create your own keyboard module for Tizen platform.
-    <table class="note">
-    <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</span> must be defined to activate &lt;tizen:ime&gt;</td> 
-    </tr> 
-    </tbody>
-    </table>
+
+<div class="note">
+    <strong>Note</strong>
+       <code>&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</code> must be defined to activate <code>&lt;tizen:ime&gt;</code>.
+</div>
         <p><strong>Occurrences:</strong> </p> 
        <ul> 
        <li>0 or 1</li> 
        </ul>
         <p><strong>Expected children:</strong> </p> 
     <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">uuid</span> <p>Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters)</p></li> 
-       <li><span style="font-family: Courier New,Courier,monospace;">languages</span> <p>Mandatory; list of input languages that the current IME supports</p>
-    <table class="note">
-    <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:language/&gt;</span> elements are provided as the child elements of this element.</td> 
-    </tr> 
-    </tbody>
-    </table>
+       <li><code>uuid</code> <p>Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters)</p></li> 
+       <li><code>languages</code> <p>Mandatory; list of input languages that the current IME supports</p>
+
+<div class="note">
+    <strong>Note</strong>
+       <code>&lt;tizen:language/&gt;</code> elements are provided as the child elements of this element.
+</div>
     </li> 
     </ul>
          <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:ime&gt;
         </ul>
          <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string</p></li>
+       <li><code>name</code> <p>Mandatory; string</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</pre>
  </td>
  </tr>
       </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.</p><p>The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes.</p></li> 
+       <li><code>id</code> <p>Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.</p><p>The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes.</p></li> 
       </ul>
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">auto-restart</span> <p>Optional; sets whether the service application is relaunched automatically when it is terminated (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><code>auto-restart</code> <p>Optional; sets whether the service application is relaunched automatically when it is terminated (available values: <code>true</code>, <code>false</code> (default))</p></li> 
       </ul>
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">on-boot</span> <p>Optional; sets whether the service application is launched automatically on device booting time (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><code>on-boot</code> <p>Optional; sets whether the service application is launched automatically on device booting time (available values: <code>true</code>, <code>false</code> (default))</p></li> 
       </ul>
       <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:service id=&quot;webService.application&quot; auto-restart=&quot;true&quot; on-boot=&quot;false&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:name&gt;WebService&lt;/tizen:name&gt;
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the service name (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> 
+       <li><code>xml:lang</code> <p>Optional; specifies the language of the service name (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> 
       </ul>
  </td>
  </tr>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory.</p></li> 
+       <li><code>src</code> <p>Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory.</p></li> 
       </ul>
  </td>
  </tr>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory.</p></li> 
+       <li><code>src</code> <p>Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory.</p></li> 
       </ul>
  </td>
  </tr>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">key</span> <p>Mandatory; unique key string</p></li> 
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Optional; string</p></li> 
+       <li><code>key</code> <p>Mandatory; unique key string</p></li> 
+       <li><code>value</code> <p>Optional; string</p></li> 
       </ul>
  </td>
  </tr>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string</p></li> 
+       <li><code>name</code> <p>Mandatory; string</p></li> 
       </ul>
  </td>
  </tr>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string</p></li> 
+       <li><code>name</code> <p>Mandatory; string</p></li> 
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;wearable&quot; /&gt;</pre>
  </td>
  </tr>
 </tr>
  <tr>
  <td>Used to define the hardware and software components for a Tizen wearable Web application. This attribute is only used in the Samsung Apps for filtering purposes. It is ignored by the Web Runtime installation procedure.
-     <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
-</td>
-    </tr>
-   </tbody>
-  </table>
+
+<div class="note">
+    <strong>Note</strong>
+       Even though the <code>&lt;feature /&gt;</code> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
+</div>
 
      <p><strong>Occurrences:</strong> </p>
     <ul>
     </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.training/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
+       <li><code>name</code> <p>Mandatory; <a href="../../../org.tizen.training/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre>
  </td>
  </tr>
       </ul>
      <p><strong>Attributes:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; unique ID of the Web widget in the <span style="font-family: Courier New,Courier,monospace;">&lt;TIZEN_APPLICATION_ID&gt;.&lt;STRING&gt;</span> format, where <span style="font-family: Courier New,Courier,monospace;">&lt;STRING&gt;</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; defines a primary Web widget among the Web widgets in a Web application  (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>)</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace;">max-instance</span> <p>Optional; limits the number of widget instances concurrently executable for a Web application. When omitted or its value is 0, unlimited number of widget instances are supported. The expected value is <span style="font-family: Courier New,Courier,monospace;">integer</span>.</p></li>
+       <li><code>id</code> <p>Mandatory; unique ID of the Web widget in the <code>&lt;TIZEN_APPLICATION_ID&gt;.&lt;STRING&gt;</code> format, where <code>&lt;STRING&gt;</code> comprises 1 or more characters (0~9, a~z, A~Z)</p></li>
+          <li><code>primary</code> <p>Mandatory; defines a primary Web widget among the Web widgets in a Web application  (available values: <code>true</code>, <code>false</code>)</p></li>
+          <li><code>max-instance</code> <p>Optional; limits the number of widget instances concurrently executable for a Web application. When omitted or its value is 0, unlimited number of widget instances are supported. The expected value is <code>integer</code>.</p></li>
       </ul>
         <p><strong>Example:</strong> </p>
 <pre class="prettyprint">
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the box label (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> 
+       <li><code>xml:lang</code> <p>Optional; specifies the language of the box label (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> 
       </ul>
  </td>
  </tr>
       </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; local file path, relative to the source Web application directory of the widget starting page</p></li> 
+       <li><code>src</code> <p>Mandatory; local file path, relative to the source Web application directory of the widget starting page</p></li> 
       </ul>
  </td>
  </tr>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">preview</span> <p>Mandatory; image file path, relative to the source Web application directory of the box content displayed in the widget viewer</p></li> 
+       <li><code>preview</code> <p>Mandatory; image file path, relative to the source Web application directory of the box content displayed in the widget viewer</p></li> 
       </ul>
  </td>
  </tr>
        </ul>
         <p><strong>Attributes:</strong> </p> 
       <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">key</span> <p>Mandatory. The expected value is <span style="font-family: Courier New,Courier,monospace;">String</span>.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Mandatory. The expected value is <span style="font-family: Courier New,Courier,monospace;">String</span>.</p></li>
+       <li><code>key</code> <p>Mandatory. The expected value is <code>String</code>.</p></li>
+       <li><code>value</code> <p>Mandatory. The expected value is <code>String</code>.</p></li>
       </ul>
  </td>
  </tr>
index a8a975c..2d5cf80 100644 (file)
@@ -45,7 +45,7 @@
 <p>Content assist allows you to quickly type names in the context of the code. It can be further improved to assist the you. For example, you can just type in the first letter as lowercase (uppercase letters from a type or variable name), and press <strong>Ctrl + Space</strong> to be offered all the choices that match the entered letters that are valid for the current context (class name, interface name, variable, or field names).</p>
 <p>The Tizen Studio supports Web API, W3C API, jQuery API, and jQuery Mobile API. User-defined and third party APIs can be supported by expanding the content assist functionality.</p>
 
-<p class="figure">Figure: Content assist in the JavaScript editor</p> 
+<p align="center"><strong>Figure: Content assist in the JavaScript editor</strong></p> 
 <p align="center"><img alt="Content assist in the JavaScript editor" src="../images/content_assist.png"/></p>
   
 <h2 id="assist">Using the Content Assist</h2>
@@ -60,8 +60,8 @@
 <p>To activate the content assist for user-defined and third party APIs:</p>
 <ol>
 <li>Prepare an API definition document using the WIDL (Web Interface Definition Language) standard.
-<p>The Tizen Studio supports the <span style="font-family: Courier New,Courier,monospace">.xml</span> and <span style="font-family: Courier New,Courier,monospace">.widlprocxml</span> files.</p></li>
-<li>Add the definition file in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
+<p>The Tizen Studio supports the <code>.xml</code> and <code>.widlprocxml</code> files.</p></li>
+<li>Add the definition file in the <code>config.xml</code> file.
 <p>For more information, see <a href="../../../org.tizen.training/html/web/process/setting_properties_w.htm#privilege">Specifying Privileges in the Privilege Tab</a>.</p></li>
 </ol>
 
index 4ecd4dc..d67398a 100644 (file)
 
 <p>To analyze a Web application with the JSA in the Tizen Studio, choose the target project in the <strong>Project Explorer</strong> view, open the context menu, and select <strong>Check JavaScript Rules</strong>.</p>
 
-<p class="figure">Figure: JSA in the menu</p>
+<p align="center"><strong>Figure: JSA in the menu</strong></p>
 <p align="center"><img alt="JSA in the menu" src="../images/js_rule_checker.png" /></p>
 
-<p>The JSA analyzes JavaScript codes in the selected Web application project after selecting JavaScript files and code segments to analyze. This can be done by parsing the start HTML file (such as <span style="font-family: Courier New,Courier,monospace">index.html</span>) specified in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+<p>The JSA analyzes JavaScript codes in the selected Web application project after selecting JavaScript files and code segments to analyze. This can be done by parsing the start HTML file (such as <code>index.html</code>) specified in the <code>config.xml</code> file.</p>
 
-<p class="figure">Figure: Checking in progress</p>
+<p align="center"><strong>Figure: Checking in progress</strong></p>
 <p align="center"><img alt="Checking in progress" src="../images/js_automatic_analysis.png" /></p>
 
 <p>If JavaScript Analyzer detects codes that can cause potential problems during its analysis step, the problems are listed up in the <strong>Problems</strong> view. If you want to locate a possibly problematic code line, double-click the alarm in the view.</p>
 
-<p class="figure">Figure: Problems view</p>
+<p align="center"><strong>Figure: Problems view</strong></p>
 <p align="center"><img alt="Problems view" src="../images/js_problems_view.png" /></p>
 
 <h2 id="settingrules" name="settingrules">Setting JavaScript Rules</h2>
@@ -79,7 +79,7 @@
         <li>Select or clear a rule checkbox to enable or disable the rule.</li>
     </ol>
 
-<p class="figure">Figure: Preferences</p>
+<p align="center"><strong>Figure: Preferences</strong></p>
 <p align="center"><img alt="Preferences" src="../images/js_settings_rules.png" /></p>
 
 
 
 <p>The JSA provides coding rules to help in writing better JavaScript code. For more information about these rules, see JSLint and <a href="https://github.com/google/styleguide/blob/gh-pages/javascriptguide.xml" target="_blank">Google JavaScript Guide</a>.</p>
 
-<h4>Rule 1. Use <span style="font-family: Courier New,Courier,monospace">var</span> to declare variables</h4>
+<h4>Rule 1. Use <code>var</code> to declare variables</h4>
 
-<p>If variables are declared without the <span style="font-family: Courier New,Courier,monospace">var</span> keyword, they are assigned to the global scope in the JavaScript language. This can be dangerous.</p>
+<p>If variables are declared without the <code>var</code> keyword, they are assigned to the global scope in the JavaScript language. This can be dangerous.</p>
 
-<p>For example, if the functions that have a same name are defined as following example codes, the <span style="font-family: Courier New,Courier,monospace">foo</span> function is changed whenever the <span style="font-family: Courier New,Courier,monospace">func1</span> or <span style="font-family: Courier New,Courier,monospace">func2</span> function is called. The <span style="font-family: Courier New,Courier,monospace">foo</span> function can not be guaranteed.</p>
+<p>For example, if the functions that have a same name are defined as following example codes, the <code>foo</code> function is changed whenever the <code>func1</code> or <code>func2</code> function is called. The <code>foo</code> function can not be guaranteed.</p>
 
-<p>This rule is supported by the JSLint and the Google Closure Linter. They say that &quot;When you fail to specify <span style="font-family: Courier New,Courier,monospace">var</span>, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives.&quot;</p>
+<p>This rule is supported by the JSLint and the Google Closure Linter. They say that &quot;When you fail to specify <code>var</code>, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives.&quot;</p>
 
 <pre class="prettyprint">function func1() {
 &nbsp;&nbsp;&nbsp;/* The foo function is defined without the var keyword */
@@ -122,9 +122,9 @@ function func2() {
 
 <h4>Rule 2. Do Not Declare an Arguments Array within Functions</h4>
 
-<p>If the <span style="font-family: Courier New,Courier,monospace">arguments</span> array is declared with <span style="font-family: Courier New,Courier,monospace">var</span> in functions, this causes duplication with the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span> of JavaScript language in the functions. </p>
+<p>If the <code>arguments</code> array is declared with <code>var</code> in functions, this causes duplication with the reserved keyword <code>arguments</code> of JavaScript language in the functions. </p>
 
-<p>In the following example, the statement <span style="font-family: Courier New,Courier,monospace">var arguments = [];</span> in the function overwrites the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span>. As a result, the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span> in functions lose the feature to access the arguments of the function.</p>
+<p>In the following example, the statement <code>var arguments = [];</code> in the function overwrites the reserved keyword <code>arguments</code>. As a result, the reserved keyword <code>arguments</code> in functions lose the feature to access the arguments of the function.</p>
 
 <pre class="prettyprint">function func() {
 &nbsp;&nbsp;&nbsp;/* &#39;arguments&#39; has been predefined as a reserved keyword */
@@ -139,7 +139,7 @@ function func2() {
 
 <p>If there are captured variables in functions, they can make a closure. The closure may cause potential defects.</p>
 
-<p>In the following example, you always expect 1 to be returned from calling the <span style="font-family: Courier New,Courier,monospace">test</span> function. However, the returned value is not always 1 because the variable <span style="font-family: Courier New,Courier,monospace">x</span> in the function <span style="font-family: Courier New,Courier,monospace">outer</span> is captured.</p>
+<p>In the following example, you always expect 1 to be returned from calling the <code>test</code> function. However, the returned value is not always 1 because the variable <code>x</code> in the function <code>outer</code> is captured.</p>
 
 <p>This rule is introduced in the Google JavaScript Style Guide. They say that &quot;The ability to create closures is perhaps the most useful and often overlooked feature of JS.One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak.&quot;.</p>
 
@@ -199,7 +199,7 @@ var result = func();</pre>
 
 <p>Deleting the property of the object needs time to operate removing the property. In addition, it changes the shape of object. The change of the object&#39;s shape may cause decrease of performance. </p>
 
-<p>In the following example, the property <span style="font-family: Courier New,Courier,monospace">value</span> of the instance <span style="font-family: Courier New,Courier,monospace">obj</span> is deleted using the keyword <span style="font-family: Courier New,Courier,monospace">delete</span>. This leads the instance <span style="font-family: Courier New,Courier,monospace">obj</span> not to share the shape of the constructor <span style="font-family: Courier New,Courier,monospace">Obj</span> with other instances. For that reason, the performance can be slower.</p>
+<p>In the following example, the property <code>value</code> of the instance <code>obj</code> is deleted using the keyword <code>delete</code>. This leads the instance <code>obj</code> not to share the shape of the constructor <code>Obj</code> with other instances. For that reason, the performance can be slower.</p>
 
 <p>This rule is introduced by the Google JavaScript Style Guide. They say that &quot;In modern JavaScript engines, changing the number of properties on an object is much slower than reassigning the values. The delete keyword should be avoided except when it is necessary to remove a property from an object&#39;s iterated list of keys, or to change the result of if (key in obj).&quot;</p>
 
@@ -233,7 +233,7 @@ var str = &#39;The Test String \
 
 <p>Use array and object literals instead of their constructors to avoid confusing and unexpected results.</p>
 
-<p>In the following example, the array <span style="font-family: Courier New,Courier,monospace">arr2</span> that has 3 values (1, 2, and 3) can be created using an array constructor. In the same way, if  the array <span style="font-family: Courier New,Courier,monospace">arr1</span> that has a  single value (1) is created using  an array constructor,  it is the array with the length 1, not arr[0] is 1.</p>
+<p>In the following example, the array <code>arr2</code> that has 3 values (1, 2, and 3) can be created using an array constructor. In the same way, if  the array <code>arr1</code> that has a  single value (1) is created using  an array constructor,  it is the array with the length 1, not arr[0] is 1.</p>
 
 <p>This rule is introduced by the Google Javascript Style Guide. They say that &quot;Array constructors are error-prone due to their arguments&quot;.</p>
 
@@ -251,7 +251,7 @@ var arr2 = new Array(1, 2, 3);</pre>
 
 <h4>Rule 8. Do Not Modify the Prototypes of Built-in Objects</h4>
 
-<p>Modifying built-ins, such as <span style="font-family: Courier New,Courier,monospace">Object.prototype</span> and <span style="font-family: Courier New,Courier,monospace">Array.prototype</span>, can lead to debugging issues in production and must be avoided. </p>
+<p>Modifying built-ins, such as <code>Object.prototype</code> and <code>Array.prototype</code>, can lead to debugging issues in production and must be avoided. </p>
 
 <p>For example, the functions in prototypes of built-in objects are shared by every instance of the built-in objects. If the function is modified, it affects every instances of the built-in objects.</p>
 
@@ -270,7 +270,7 @@ Object.prototype.create = function() {
 
 <p>Avoid creating primitive typed values using the constructor of a wrapper objects.</p>
 
-<p>If a boolean variable is created by the constructor <span style="font-family: Courier New,Courier,monospace">Boolean</span>, its value is a wrapper object, not <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. In the following example, the program always prints <span style="font-family: Courier New,Courier,monospace">true</span> because the variable <span style="font-family: Courier New,Courier,monospace">bool</span> is a object that has a value, <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+<p>If a boolean variable is created by the constructor <code>Boolean</code>, its value is a wrapper object, not <code>true</code> or <code>false</code>. In the following example, the program always prints <code>true</code> because the variable <code>bool</code> is a object that has a value, <code>false</code>.</p>
 
 <p>This rule is introduced by the Google Javascript Style Guide. They say that &quot;There&#39;s no reason to use wrapper objects for primitive types, plus they are dangerous&quot;. </p>
 
@@ -289,11 +289,11 @@ else {
 
 <pre class="prettyprint">[Coding Rule] Do not convert a wrapper object Boolean to a primitive value.</pre>
 
-<h4>Rule 10. Do Not Use the <span style="font-family: Courier New,Courier,monospace">for-in</span> Structure with Arrays</h4>
+<h4>Rule 10. Do Not Use the <code>for-in</code> Structure with Arrays</h4>
 
 <p>If the array is used in for-in statement, the operation can be different from the normal for statement. </p>
 
-<p>In the following example, you expect to print <span style="font-family: Courier New,Courier,monospace">a</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">c</span>, but the program prints <span style="font-family: Courier New,Courier,monospace">0</span>, <span style="font-family: Courier New,Courier,monospace">1</span>, and <span style="font-family: Courier New,Courier,monospace">2</span>.</p>
+<p>In the following example, you expect to print <code>a</code>, <code>b</code>, and <code>c</code>, but the program prints <code>0</code>, <code>1</code>, and <code>2</code>.</p>
 
 <p>This rule is introduced both by the JSLint and the Google Javascript Style Guide. They say that &quot;for-in loops are often incorrectly used to loop over the elements in an Array. This is however very error prone because it does not loop from 0 to length - 1 but over all the present keys in the object and its prototype chain.&quot;</p>
 
@@ -311,7 +311,7 @@ for (var key in arr) {
 <h4>Rule 11. Do Not Use Unclosed Braces</h4>
 
 <p>A function, an object, a code block, or a similar element which has an opening brace but no closing brace is not correct. The analysis detects this and stops with an error message.</p>
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">temp()</span> function needs a closing brace to indicate that the function definition is finished. The JSA detects this and creates an alarm, and the analysis is stopped because of the error.</p>
+<p>In the following example, the <code>temp()</code> function needs a closing brace to indicate that the function definition is finished. The JSA detects this and creates an alarm, and the analysis is stopped because of the error.</p>
 
 <pre class="prettyprint">
 /* The temp function needs the closing brace */
@@ -359,7 +359,7 @@ for (var i = 0; i &lt; 10; i++) {
 
 <p>Semicolon is needed in JavaScript to indicate that the declaration is finished. Missing a semicolon is not recommended, and although the analysis detects this, it proceeds without stopping.</p>
 
-<p>In the following example, the variable a declared in the <span style="font-family: Courier New,Courier,monospace">tempx()</span> function without a semicolon, and the JSA detects it and creates an alarm.</p>
+<p>In the following example, the variable a declared in the <code>tempx()</code> function without a semicolon, and the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">
 /* The declaration of a needed semicolon in the end */
@@ -438,7 +438,7 @@ if (true)
 
 <p>Accessing  API which not provided by the Tizen API modules are notified as an WebAPIError and the analysis proceeded.</p>
 
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.alarm.gett()</span> function does not exist in the Tizen API, so the JSA detects it and creates an alarm.</p>
+<p>In the following example, the <code>tizen.alarm.gett()</code> function does not exist in the Tizen API, so the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">/* Mistyping get as gett */
 var alarm = tizen.alarm.gett(abs_alarm.id);</pre>
@@ -452,7 +452,7 @@ var alarm = tizen.alarm.gett(abs_alarm.id);</pre>
 
 <p>Invoking a function with a wrong argument number is notified as an WebAPIError and the analysis proceeded.</p>
 
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> function needs  more than 1 argument. Since the number of arguments is 1, the JSA detects it and creates an alarm.</p>
+<p>In the following example, the <code>tizen.filesystem.resolve()</code> function needs  more than 1 argument. Since the number of arguments is 1, the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">/* The number of arguments is wrong (2 or more arguments required) */
 tizen.filesystem.resolve(&#39;images&#39;
@@ -466,7 +466,7 @@ tizen.filesystem.resolve(&#39;images&#39;
 
 <p>Invoking an asynchronous function without an error callback is notified as an WebAPIError and the analysis proceeded.</p>
 
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> function needs an error callback as its third argument. Because the error callback does not exist, the JSA detects it and creates an alarm.</p>
+<p>In the following example, the <code>tizen.filesystem.resolve()</code> function needs an error callback as its third argument. Because the error callback does not exist, the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">tizen.filesystem.resolve(&#39;images&#39;,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(dir) {
@@ -481,9 +481,9 @@ tizen.filesystem.resolve(&#39;images&#39;
 
 <h4>Rule 4. Missing Exception Handling</h4>
 
-<p>Invoking an API, which can throw an exception without the <span style="font-family: Courier New,Courier,monospace">try-catch</span> clause is notified as an WebAPIError and the analysis proceeded.</p>
+<p>Invoking an API, which can throw an exception without the <code>try-catch</code> clause is notified as an WebAPIError and the analysis proceeded.</p>
 
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.calendar.getCalendars()</span> is a function that can throw exceptions, so it must be wrapped by a <span style="font-family: Courier New,Courier,monospace">try-catch</span> statement. Because the <span style="font-family: Courier New,Courier,monospace">try-catch</span> statement does not exist, the JSA detects it and creates an alarm.</p>
+<p>In the following example, the <code>tizen.calendar.getCalendars()</code> is a function that can throw exceptions, so it must be wrapped by a <code>try-catch</code> statement. Because the <code>try-catch</code> statement does not exist, the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">/* tizen.calendar.getCalendars API can make exceptions, so it should be wrapped in a try-catch statement */
 tizen.calendar.getCalendars(&#39;EVENT&#39;, calendarListCallback, errorCallback);</pre>
@@ -496,7 +496,7 @@ tizen.calendar.getCalendars(&#39;EVENT&#39;, calendarListCallback, errorCallback
 
 <p>Invoking API which passes wrong type value is notified as an WebAPIError and the is proceeded.</p>
 
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.contact.getAddressBooks()</span> function needs arguments whose type is the <span style="font-family: Courier New,Courier,monospace">function</span> instead of the <span style="font-family: Courier New,Courier,monospace">string</span> and the <span style="font-family: Courier New,Courier,monospace">undefined</span>, so the JSA detects it and makes an alarm.</p>
+<p>In the following example, the <code>tizen.contact.getAddressBooks()</code> function needs arguments whose type is the <code>function</code> instead of the <code>string</code> and the <code>undefined</code>, so the JSA detects it and makes an alarm.</p>
 
 <pre class="prettyprint">var addressBooksCB = &#39;notFucntion&#39;;
 try {
@@ -516,7 +516,7 @@ catch (e) {
 
 <p>Creating a dictionary object with wrong key-value pairs is notified as an WebAPIError and the is proceeded.</p>
 
-<p>In the following example, the constructor <span style="font-family: Courier New,Courier,monospace">tizen.Contact()</span> function needs a dictionary object as the first argument. If the keys of the dictionary object are different from the spec, the JSA detects it and creates an alarm.</p>
+<p>In the following example, the constructor <code>tizen.Contact()</code> function needs a dictionary object as the first argument. If the keys of the dictionary object are different from the spec, the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">var validContactObj = new tizen.Contact({
 &nbsp;&nbsp;&nbsp;name: new tizen.ContactName({
@@ -541,7 +541,7 @@ var invalidContactObj = new tizen.Contact(
 
 <p>Invoking an API which is not defined in the current API version is noticed, although the analysis proceeds without stopping. If the Web API was defined in another API version or platform, the version name is provided in the error message.</p>
 
-<p>In the following example, the Web App is developed for the Tizen 2.3 wearable platform, but the <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> function is defined in for the Tizen 2.3 mobile platform, so the JSA detects it and creates an alarm.</p>
+<p>In the following example, the Web App is developed for the Tizen 2.3 wearable platform, but the <code>tizen.archive.open()</code> function is defined in for the Tizen 2.3 mobile platform, so the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">
 function onsuccess() { /* ... */ }
@@ -562,9 +562,9 @@ try {
 
 <h4>Rule 8. API Privilege Missing</h4>
 
-<p>To use a privileged Tizen Device API in a target device, the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Tizen Web application must have a corresponding privilege URL defined. An alarm is raised if the privilege is not found in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+<p>To use a privileged Tizen Device API in a target device, the <code>config.xml</code> file of the Tizen Web application must have a corresponding privilege URL defined. An alarm is raised if the privilege is not found in the <code>config.xml</code> file.</p>
 
-<p>In the following example, the Web application is using the <span style="font-family: Courier New,Courier,monospace">tizen.application.launch()</span> function, which requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/application.launch</span> privilege, which is commented in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. So an alarm is raised.</p>
+<p>In the following example, the Web application is using the <code>tizen.application.launch()</code> function, which requires the <code>http://tizen.org/privilege/application.launch</code> privilege, which is commented in the <code>config.xml</code> file. So an alarm is raised.</p>
 
 
 <pre class="prettyprint">
@@ -578,7 +578,7 @@ tizen.application.launch(&#39;targetApp0.main&#39;, onsuccess);
 
 <p>The JSA displays the following message:</p>
 
-<pre class="prettyprint">[Web API Rule] Tizen <span style="font-family: Courier New,Courier,monospace">tizen.application.launch</span> API need &quot;http://tizen.org/privilege/application.launch&quot; privilege in &#39;config.xml&#39;.</pre>
+<pre class="prettyprint">[Web API Rule] Tizen <code>tizen.application.launch</code> API need &quot;http://tizen.org/privilege/application.launch&quot; privilege in &#39;config.xml&#39;.</pre>
 
 <h2 id="stalechecker" name="support">Using the Stale Object Checker</h2>
 
@@ -590,20 +590,20 @@ tizen.application.launch(&#39;targetApp0.main&#39;, onsuccess);
 
 <li>Select the testing platform:
 <ul><li>In the Tizen device mode, the project is packaged as an application first, and then pushed to the Tizen device. Finally, it is launched automatically. After the application is launched, you can test the application.</li>
-<li>In the PC Browser mode, the Web application runs at <span style="font-family: Courier New,Courier,monospace">http://localhost:8888</span>.</li>
+<li>In the PC Browser mode, the Web application runs at <code>http://localhost:8888</code>.</li>
 </ul></li>
 <li>When all operations are finished on the Tizen device or PC browser, click <strong>Stop Recoding</strong> on the <strong>Console</strong> view toolbar or enter <strong>Alt+Shift+T</strong> on the keyboard.
 <p align="center"><img alt="Stop recording" src="../images/js_stale_console.png" /></p></li>
 
 <li>After you stop recording, a confirmation message os displayed. Click <strong>OK</strong>.
-<p>The Stale Object Checker continues to inspect the data collected and launches a result page at <span style="font-family: Courier New,Courier,monospace">http://localhost:9000</span>. The result page can be accessed by any Web browser in the PC.</p>
+<p>The Stale Object Checker continues to inspect the data collected and launches a result page at <code>http://localhost:9000</code>. The result page can be accessed by any Web browser in the PC.</p>
 <p align="center"><img alt="Confirmation of the recording stop" src="../images/js_stale_stop_alert.png" /></p></li></ol>
 
 <h3 id="resultpage" name="resultpage">Result Page View</h3>
 
 <p>The result page appears with the view shown in the following figure. The page is composed of 2 parts: issue table and all-sites timeline. You can switch between the parts using the menu at the top of the page.</p>
 
-<p class="figure">Figure: Result page with the issue table</p>
+<p align="center"><strong>Figure: Result page with the issue table</strong></p>
 <p align="center"><img alt="Result page with the issue table" src="../images/js_stale_table_view.png" /></p>
 
 <p>The following details are provided in the issue table:</p>
@@ -619,14 +619,14 @@ tizen.application.launch(&#39;targetApp0.main&#39;, onsuccess);
 
 <p>When you click a site in the issue table, a set of detailed information on a leak occurrence is shown. In the source view, you can easily find the code segment that steadily creates stale objects (possibly causing a memory leak), since it is marked with a colored box.</p>
 
-<p class="figure">Figure: Detailed information</p>
+<p align="center"><strong>Figure: Detailed information</strong></p>
 <p align="center"><img alt="Detailed information" src="../images/js_stale_detail_info.png" /></p>
 
 <p>In the above figure:</p>
 
 <ul><li>The anonymous event handler function at the line 10 is identified as a stale object that can cause a memory leak.</li>
 <li>In the call tree view, a call hierarchy is shown for the function which contains the code that creates stale objects. The name of a node in the call tree view indicates the file name, line number, and column number.
-<p>The &quot;js/main_orig_.js:10:45&quot; root element indicates that the memory leak occurs at line 10, column 45 in the <span style="font-family: Courier New,Courier,monospace">js/main_orig_.js</span> file.</p>
+<p>The &quot;js/main_orig_.js:10:45&quot; root element indicates that the memory leak occurs at line 10, column 45 in the <code>js/main_orig_.js</code> file.</p>
 <p>Click the root element to move the source view to the location. Click the &quot;js/main_orig_.js:27:5&quot; child node to move the source view to line 27 where the function that contains the memory leak issue is called, and to highlight the function.</p></li>
 <li>In the timeline view, the x axis represents the time elapse and the y axis represents the number of created objects from this site. Move the mouse to a specific time to show the number of stale and allocated instances on the graph.</li>
 <li>In the access paths view, you can find out the scope of an object at runtime which leads to the location of the memory leak.</li></ul>
@@ -636,14 +636,14 @@ tizen.application.launch(&#39;targetApp0.main&#39;, onsuccess);
 
 <p>The all-sites time shows the timeline for all the objects created during the execution. The timeline graph in the issue table (figure above) shows the diagram for a specific site while the timeline in the all-sites page (figure below) indicates the diagram for all sites in the application. The pie charts shows the proportion of each site in all allocated and stale objects.</p>
 
-<p class="figure">Figure: All-sites timeline page</p>
+<p align="center"><strong>Figure: All-sites timeline page</strong></p>
 <p align="center"><img alt="All-sites timeline page" src="../images/js_stale_all_site.png" /></p>
 
 <h3 id="samplecode" name="samplecode">Timer Sample Code</h3>
 
-<p>When you click <strong>start</strong>, the Timer starts to run. If you click again, the timer stops. The <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function registers an event handler for the Tizen <strong>Back</strong> key to terminate the application when the <strong>Back</strong> key is pressed. </p>
+<p>When you click <strong>start</strong>, the Timer starts to run. If you click again, the timer stops. The <code>exitApp()</code> function registers an event handler for the Tizen <strong>Back</strong> key to terminate the application when the <strong>Back</strong> key is pressed. </p>
     
-<p>In the <span style="font-family: Courier New,Courier,monospace">runtime()</span> function, the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function is added by mistake. As a result, every time you click <strong>start</strong>, the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function is called, creates an anonymous function, and registers it to listen to the <strong>Back</strong> key events. When you test this application with the Stale Object Checker, multiple <strong>start</strong> button clicks are shown as a memory leak.</p>
+<p>In the <code>runtime()</code> function, the <code>exitApp()</code> function is added by mistake. As a result, every time you click <strong>start</strong>, the <code>exitApp()</code> function is called, creates an anonymous function, and registers it to listen to the <strong>Back</strong> key events. When you test this application with the Stale Object Checker, multiple <strong>start</strong> button clicks are shown as a memory leak.</p>
 
 <pre class="prettyprint">
 /* JavaScript snippets */
@@ -667,24 +667,24 @@ function runtime() {
 <p>When testing the source code, the following figure shows the result. It indicates that a memory leak occurred at the &quot;js/main_orig_.js:39:42&quot; site. Clicking this site, the detailed information is retrieved.</p>
 
 
-<p class="figure">Figure: Timer example issue table</p>
+<p align="center"><strong>Figure: Timer example issue table</strong></p>
 <p align="center"><img alt="Timer example issue table" src="../images/js_stale_example_1_01.png" /></p>
 
-<p class="figure">Figure: Timer example detailed information</p>
+<p align="center"><strong>Figure: Timer example detailed information</strong></p>
 <p align="center"><img alt="Timer example detailed information" src="../images/js_stale_example_1_02.png" /></p>
 
-<p>The detailed information shows that function object added to listen for &quot;tizenhwkey&quot; events caused a memory leak. If you click the &quot;Call Tree&quot; on the page, you can see that the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function with a memory leak issue is called in the <span style="font-family: Courier New,Courier,monospace">runtime()</span> function.</p>
+<p>The detailed information shows that function object added to listen for &quot;tizenhwkey&quot; events caused a memory leak. If you click the &quot;Call Tree&quot; on the page, you can see that the <code>exitApp()</code> function with a memory leak issue is called in the <code>runtime()</code> function.</p>
 
-<p>This code site is detected as a leak because the handler function objects created from the site have not been used before the application exits. The call tree says that when the <span style="font-family: Courier New,Courier,monospace">runtime()</span> function is executed, the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function is invoked, every time creates an anonymous function and registers it to a document object.</p>
+<p>This code site is detected as a leak because the handler function objects created from the site have not been used before the application exits. The call tree says that when the <code>runtime()</code> function is executed, the <code>exitApp()</code> function is invoked, every time creates an anonymous function and registers it to a document object.</p>
 
 <p>In the &quot;Timeline&quot; graph, you can see how the number of stale instances increases steadily. This graph shows any objects created from this code site that have not been used before the application exists.</p>
 
 
 <h3 id="samplecode2" name="samplecode2">Calculator Sample Code</h3>
 
-<p>When you click a number button, the <span style="font-family: Courier New,Courier,monospace">command()</span> function is executed. The <span style="font-family: Courier New,Courier,monospace">init()</span> function registers an event handler for the Tizen <strong>Back</strong> key.</p>
+<p>When you click a number button, the <code>command()</code> function is executed. The <code>init()</code> function registers an event handler for the Tizen <strong>Back</strong> key.</p>
 
-<p>In the <span style="font-family: Courier New,Courier,monospace">command()</span> function, the <span style="font-family: Courier New,Courier,monospace">init()</span> function is added by mistake. As a result, every time you click a number button, the <span style="font-family: Courier New,Courier,monospace">init()</span> function is called, creates an anonymous function, and registers it to listen to Tizen <strong>Back</strong> key events.</p>
+<p>In the <code>command()</code> function, the <code>init()</code> function is added by mistake. As a result, every time you click a number button, the <code>init()</code> function is called, creates an anonymous function, and registers it to listen to Tizen <strong>Back</strong> key events.</p>
 <p>When you test this application with the Stale Object Checker and click a number button many times, the problem is diagnosed as a memory leak. When testing the source code, the result is the same as in the Timer example above.</p>
 
 <pre class="prettyprint">
index a599214..c54350f 100644 (file)
 <li>Select the <strong>Enable live editing</strong> check box in the run configuration.</li>
 </ol>
 <p>If you are running your application for the first time, you must create a new configuration first.</p>
-
-<table class="note"> 
- <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The live editing feature has the following limitations:
+<div class="note">
+    <strong>Note</strong>
+       The live editing feature has the following limitations:
     <ul>
                <li>The Tizen Device API does not work on the emulator.</li>
                <li>Only specific device APIs are supported by the Web simulator.</li>
                <li>Live editing does not work in certain environments, such as a proxy network.</li>
     </ul>
-   </td> 
-  </tr> 
- </tbody> 
-</table>  
+</div>
 
 <p>To define how the live editing works, <a href="IDE_preferences_w.htm#live">set the Tizen Studio Live Editing preferences</a>.</p>
 
index 939894a..e817fff 100644 (file)
 <li>In the context menu, select <strong>Preview</strong> (or use the hotkey <strong>Ctrl + 4</strong>).</li>
 </ol>
 
-<p class="figure">Figure: HTML previewer (calendar application in mobile Web) and CSS previewer</p> 
+<p align="center"><strong>Figure: HTML previewer (calendar application in mobile Web) and CSS previewer</strong></p> 
 <p align="center"><img alt="HTML previewer (calendar application in mobile Web) and CSS previewer" src="../images/previewer_html_previewer.png"/> <img alt="HTML previewer (calendar application in mobile Web) and CSS previewer" src="../images/previewer_css_previewer.png"/></p>
 
 <p>You can configure the previewer to suit your own preferences.</p>
 <p>You can <a href="IDE_preferences_w.htm#live">set the preview</a> in <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Live Editing</strong>.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The previewer is based on the Google Chrome&trade; browser.
+<div class="note">
+    <strong>Note</strong>
+       The previewer is based on the Google Chrome&trade; browser.
 <p>The CSS preview can differ from the actual product. It allows you to see the overall outline.</p>
-<p>Some selectors and elements do not work on the CSS previewer.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
+<p>Some selectors and elements do not work on the CSS previewer.</p>
+</div>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
index 2b64ad3..b0befe7 100644 (file)
@@ -48,7 +48,7 @@
 <li>Right-click the project folder, and select <strong>Check Privilege</strong>.</li>
 </ol>
 
-<p class="figure">Figure: Privilege Checker</p> 
+<p align="center"><strong>Figure: Privilege Checker</strong></p> 
 <p align="center"><img alt="Privilege Checker" src="../images/privilege_checker.png"/></p>
 
 <h2 id="set">Setting the Options</h2>
 <li>Warning</li>
 <li>Error (default)</li>
 </ul>
-<p>You can exclude JS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.min.js</span> file generates many warnings, the default pattern string values exclude the parsing of this JS file.</p>
+<p>You can exclude JS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <code>jquery.min.js</code> file generates many warnings, the default pattern string values exclude the parsing of this JS file.</p>
  
-<p>The check results are displayed in the <strong>Problems</strong> view and vertical ruler. To resolve an alarm, click the annotation on the vertical ruler and select an entry from the proposal list. The required privilege is automatically added into the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (for a quick fix, use the <strong>Ctrl + 1</strong> keyboard shortcut).</p>
+<p>The check results are displayed in the <strong>Problems</strong> view and vertical ruler. To resolve an alarm, click the annotation on the vertical ruler and select an entry from the proposal list. The required privilege is automatically added into the <code>config.xml</code> file (for a quick fix, use the <strong>Ctrl + 1</strong> keyboard shortcut).</p>
                
-<p class="figure">Figure: Check results displayed in the Problems view</p> 
+<p align="center"><strong>Figure: Check results displayed in the Problems view</strong></p> 
 <p align="center"><img alt="Check results displayed in the Problems view" src="../images/privilege_checker_result.png"/></p>
-<p class="figure">Figure: Required privilege is automatically added</p> 
+<p align="center"><strong>Figure: Required privilege is automatically added</strong></p> 
 <p align="center"><img alt="Required privilege is automatically added" src="../images/privilege_checker_add.png"/></p>         
 
+<p align="center" class="Table"><strong>Table: Privilege check alarm example</strong></p>
 <table>
-<caption>Table: Privilege check alarm example</caption>
 <tbody>
 <tr>
  <th>Alarm type</th>
  </tr>
  </tbody></table>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Privilege Checker tool is based on the <a href="content_assist_w.htm">Content Assist</a> Engine of the Tizen Studio. It is used for codes that are not supported by Content Assist and cannot be checked. Therefore, the check results can possibly have missing (unsound) values.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       The Privilege Checker tool is based on the <a href="content_assist_w.htm">Content Assist</a> Engine of the Tizen Studio. It is used for codes that are not supported by Content Assist and cannot be checked. Therefore, the check results can possibly have missing (unsound) values.
+</div>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
index 0748273..e8fc507 100644 (file)
@@ -38,7 +38,7 @@
 <h1>Managing Tizen Projects with Project Explorer View</h1>
 <p>The <strong>Project Explorer</strong> view allows you to view and manage Tizen projects. You can view and change the resources of a project in the view, and build, export, and convert projects through the view.</p>
 
-<p class="figure">Figure: Project Explorer</p> 
+<p align="center"><strong>Figure: Project Explorer</strong></p> 
 <p align="center"> <img alt="Project Explorer" src="../images/proj_explorer_w.png" /> </p>
 
 <p>In this view, you can:</p>
 <h2 id="opening">Opening the Project Explorer View</h2>
 <p>Usually, the <strong>Project Explorer</strong> view is located in the left-top side in the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window &gt; Show View &gt; Other &gt; General</strong>.</p>
 
-<p class="figure">Figure: Opening the view</p> 
+<p align="center"><strong>Figure: Opening the view</strong></p> 
 <p align="center"> <img alt="Opening the view" src="../images/proj_explorer_general.png" /> </p>
 
 <h2 id="view">Using the Project Explorer View</h2>
 <p>The files that you select in the <strong>Project Explorer</strong> view affect the information that is displayed in the other views. You can execute and set some operations and configurations by clicking the icons (<img alt="Toolbar icons" src="../images/proj_explorer_op_config.png" />) in the toolbar.</p>
 
-<p class="figure">Figure: Executing operations</p>
+<p align="center"><strong>Figure: Executing operations</strong></p>
 <p align="center"> <img alt="Executing operations" src="../images/proj_explorer_right_click_w.png" /> </p>
 
 <p>To execute operations, such as copying, moving, creating new resources, and comparing resources with each other, right-click on any resource in the <strong>Project Explorer</strong> view, and select the desired action in the context menu. The items in the context menu depend on the focused item. Different folder and file types have different action options.</p>
 
+<p align="center" class="Table"><strong>Table: Project Explorer toolbar</strong></p>
 <table>
-<caption>Table: Project Explorer toolbar</caption>
 <tbody>
 <tr>
  <th>Icon</th>
  </tr>
  </tbody></table>
 
+<p align="center" class="Table"><strong>Table: Project Explorer context menu</strong></p>
 <table>
-<caption>Table: Project Explorer context menu</caption>
 <tbody>
 <tr>
  <th>Menu</th>
index e2d840b..ca05bcf 100644 (file)
@@ -54,7 +54,7 @@
 <h2 id="type">Project Type</h2>
 <p>When the Tizen Project Wizard opens, you must first select the project type.</p>
 
-<p class="figure">Figure: Selecting the project type</p> 
+<p align="center"><strong>Figure: Selecting the project type</strong></p> 
 <p align="center"><img alt="Selecting the project type" src="../images/project_wizard_type.png" /></p> 
  
 <p>The Tizen Studio provides various project templates and samples for the mobile and wearable devices according to the installed platform. The Tizen Project Wizard helps you select the template and sample for your project.</p>
@@ -85,7 +85,7 @@
 <p>You can select the profile and version supported by your project, such as a mobile or wearable device. In addition, the Tizen Studio shows you which platforms among the supported platforms have been installed.</p>
 <p>Based on the selected profile and version, a list of templates is shown in the template selection step.</p>
 
-<p class="figure">Figure: Selecting the profile and version</p> 
+<p align="center"><strong>Figure: Selecting the profile and version</strong></p> 
 <p align="center"><img alt="File analysis" src="../images/project_wizard_profile.png" /></p> 
  
 <p>To move to the next step, select the profile and version, and click <strong>Next</strong>.</p>
@@ -94,7 +94,7 @@
 <p>You can select the Web or native application type for your project. For more information, see <a href="../../../org.tizen.training/html/web/cover_page_w.htm">Web Application</a> and <a href="../../../org.tizen.training/html/native/cover_page_n.htm">Native Application</a>.</p>
 <p>Based on the selected application type, a list of templates is shown in the template selection step.</p>
 
-<p class="figure">Figure: Selecting the application type</p> 
+<p align="center"><strong>Figure: Selecting the application type</strong></p> 
 <p align="center"><img alt="Selecting the application type" src="../images/project_wizard_app_type_w.png" /></p> 
  
 <p>To move to the next step, select the application type and click <strong>Next</strong>.</p>
 <h2 id="template">Template</h2>
 <p>You can select the template for your project while viewing information about a variety of templates. The Tizen Project Wizard creates the project based on the selected template.</p>
 
-<p class="figure">Figure: Selecting the template</p> 
+<p align="center"><strong>Figure: Selecting the template</strong></p> 
 <p align="center"><img alt="Selecting the template" src="../images/project_wizard_template_w.png" /></p> 
 
 <p>To move to the next step, select the template and click <strong>Next</strong>.</p>
 <h2 id="properties">Project Properties</h2>
 <p>You can set basic project properties, such as the project name, location, and working sets.</p>
 
-<p class="figure">Figure: Setting project properties</p> 
+<p align="center"><strong>Figure: Setting project properties</strong></p> 
 <p align="center"><img alt="Setting project properties" src="../images/project_wizard_properties_w.png" /></p> 
  
 <p>The options you can set are listed in the following table.</p>
 
+<p align="center" class="Table"><strong>Table: Project properties</strong></p>
 <table>
-<caption>Table: Project properties</caption>
 <tbody>
 <tr>
  <th>Property</th>
  </tr>
  <tr>
  <td><strong>Use default location</strong></td>
- <td>If you check this option, the project is created in the <span style="font-family: Courier New,Courier,monospace">$&lt;workspace_location&gt;/&lt;project_name&gt;</span> directory.</td>
+ <td>If you check this option, the project is created in the <code>$&lt;workspace_location&gt;/&lt;project_name&gt;</code> directory.</td>
  </tr>
  <tr>
  <td><strong>Location</strong></td>
index b0d8979..1de6e07 100644 (file)
@@ -64,7 +64,7 @@
 <p>The REST Viewer displays the components of the <a href="http://www.w3.org/Submission/wadl/" target="_blank">WADL</a> (Web Application Description Language)  document in a hierarchical structure.</p>
 <p>The viewer loads the documents from a specific location and classifies them as 4-typed WADL components.</p>
 
-<p class="figure">Figure: REST Viewer</p> 
+<p align="center"><strong>Figure: REST Viewer</strong></p> 
 <p align="center"><img alt="REST Viewer" src="../images/rest_viewer.png"/></p> 
  
 <p>The WADL document can contain 4 types of WADL components:</p>
 <p>To use the REST Viewer, you need WADL. If WADL provided by the REST API service providers exists, it can be used to import. When you export a test case, others can be used.</p>
 <p>With the REST Viewer, you can make new WADL components, and import and export WADL files. You can handle a selected WADL component only if you open a dialog to modify it. You cannot modify the selected component's parent or child components at the same time.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Some attributes are required to make a structure for the tree viewer even if they are optional in the WADL schema.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       Some attributes are required to make a structure for the tree viewer even if they are optional in the WADL schema.
+</div>
 
 <p>To manage the WADL components, in the <strong>REST Viewer</strong> view toolbar, click the following icons:</p>
 <ul>
 <li><img alt="Add icon" src="../images/rest_icon_add.png"/>: Add new WADL components.</li>
 <li><img alt="Import icon" src="../images/rest_icon_import.png"/>: Import a WADL file and show the WADL models from a local WADL file or URL.</li>
-<li><img alt="Export icon" src="../images/rest_icon_export.png"/>: Export the selected WADL models as a <span style="font-family: Courier New,Courier,monospace">.wadl</span> file.</li>
+<li><img alt="Export icon" src="../images/rest_icon_export.png"/>: Export the selected WADL models as a <code>.wadl</code> file.</li>
 </ul>
 <p>When you add a new WADL component, you must define its place in the WADL structure in the addition dialog. The WADL structure is &quot;Service &gt; Base URI &gt; Path [&gt; Path] &gt; API&quot;.</p>
 
-<p class="figure">Figure: Adding a WADL component</p> 
+<p align="center"><strong>Figure: Adding a WADL component</strong></p> 
 <p align="center"><img alt="Adding a WADL component" src="../images/rest_add_wadl.png"/></p> 
 <p>Fill in the necessary details:</p>
 <ul>
 <li>OAuth 2.0 authentication information for a RESTful API</li>
 </ul>
  
-<p class="figure">Figure: Authentication details</p> 
+<p align="center"><strong>Figure: Authentication details</strong></p> 
 <p align="center"><img alt="Authentication details" src="../images/rest_authenticate.png"/></p>
  
 
 <li>Right-click the selected API and run the test from the context menu.</li>
 <li>Click <strong>Save and Run</strong> in the dialog when adding or modifying components.</li>
 </ul>
-<p>The API that works with variables needs specific values for the test. Each profile has its own user variables (key and value). You can manage the profiles and user variables in the Preferences window. After the user variables are set, you can use them with a placeholder to test the API (for example, <span style="font-family: Courier New,Courier,monospace">${email}</span>).</p>
+<p>The API that works with variables needs specific values for the test. Each profile has its own user variables (key and value). You can manage the profiles and user variables in the Preferences window. After the user variables are set, you can use them with a placeholder to test the API (for example, <code>${email}</code>).</p>
 
-<p class="figure">Figure: User variables</p> 
+<p align="center"><strong>Figure: User variables</strong></p> 
 <p align="center"><img alt="User variables" src="../images/rest_user_variable.png"/></p>
  
 
 <p>You can select an active profile in the REST Viewer user variable toolbar menu. When you test the APIs in the REST Viewer, user variables of the selected profile are used.</p>
 
-<p class="figure">Figure: Selecting a profile</p> 
+<p align="center"><strong>Figure: Selecting a profile</strong></p> 
 <p align="center"><img alt="Selecting a profile" src="../images/rest_profile.png"/></p>
 
 <p>The user variables of the active profile are shown when you set the values for an API.</p>
 
-<p class="figure">Figure: Selecting a user variable</p> 
+<p align="center"><strong>Figure: Selecting a user variable</strong></p> 
 <p align="center"><img alt="Selecting a user variable" src="../images/rest_user.png"/></p>
 
 <p>After setting the variables and running the test, the result is displayed in the <strong>Console</strong> view. You can save the response structure.</p>
 
-<p class="figure">Figure: Test result</p> 
+<p align="center"><strong>Figure: Test result</strong></p> 
 <p align="center"><img alt="Test result" src="../images/rest_test.png"/></p>
  
 <h2 id="autogenerate">Automatic Code Generation</h2>
 <p>There are 2 ways to use automatic code generation:</p>
 <ul>
 <li>Use the content assist feature.
-<p>You can activate the content assist with the prefix <span style="font-family: Courier New,Courier,monospace">rest.</span>.</p></li>
+<p>You can activate the content assist with the prefix <code>rest.</code>.</p></li>
 <li>Drag and drop:
        <ol>
        <li>Select the API model in the REST Viewer, and drag and drop it to the Web HTML Editor.</li>
 </li>
 </ul>
 
-<p class="figure">Figure: Selecting functions for the REST API</p> 
+<p align="center"><strong>Figure: Selecting functions for the REST API</strong></p> 
 <p align="center"><img alt="Selecting functions for the REST API" src="../images/rest_functions.png"/></p>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
index 8ac7d32..d03c505 100644 (file)
        <li>Right-click the file and select <strong>Check JavaScript Rules</strong>.</li>
        </ol>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">You can check JavaScript immediately, even without saving the file.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+       You can check JavaScript immediately, even without saving the file.
+</div>
 
-<p class="figure">Figure: Checking JavaScript rules manually</p> 
+<p align="center"><strong>Figure: Checking JavaScript rules manually</strong></p> 
 <p align="center"><img alt="Checking JavaScript rules manually" src="../images/web_editor_manual.png" /></p> 
 </li>
 <li>Automatic check
 <p>When writing code, if there are syntax errors, the automatic check displays the CSSLint or JSLint validator results on the left edge of the editor.</p>
        <ul><li>If you save a file, the project is built and syntax is checked automatically.
 
-<p class="figure">Figure: Checking JavaScript automatically</p> 
+<p align="center"><strong>Figure: Checking JavaScript automatically</strong></p> 
 <p align="center"><img alt="Checking JavaScript automatically" src="../images/web_editor_js_check.png" /></p> 
 
-<p class="figure">Figure: JavaScript scan results in the Problems view</p> 
+<p align="center"><strong>Figure: JavaScript scan results in the Problems view</strong></p> 
 <p align="center"><img alt="JavaScript scan results in the Problems view" src="../images/web_editor_js_result.png" /></p> 
        </li>
        <li>Using content assist. 
 <p>You can get suggestions for HTML, CSS, and JavaScript tag and attribute properties. Also, if you mistype, content assist displays an error. Press <strong>Ctrl + Space</strong> to open content assist.</p>
 
-<p class="figure">Figure: Content assist in a CSS file</p> 
+<p align="center"><strong>Figure: Content assist in a CSS file</strong></p> 
 <p align="center"><img alt="Content assist in a CSS file" src="../images/web_editor_css.png" /></p> 
        </li>
        </ul>
 <p>The advanced content assist supports code completion of the attribute values for some elements in the HTML Editor.</p>
 <p>The advanced content assist has the following features:</p>
 <ul>
-<li>Proposes code completion of the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element:
+<li>Proposes code completion of the <code>href</code> attribute value of the <code>&lt;a&gt;</code> element:
        <ul>
        <li>List of HTML files included in the project</li>
-       <li>List of <span style="font-family: Courier New,Courier,monospace">id</span> values that are assigned to the elements of the edited file</li>
+       <li>List of <code>id</code> values that are assigned to the elements of the edited file</li>
        </ul>
 </li>
-<li>Proposes code completion of the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element:
+<li>Proposes code completion of the <code>href</code> attribute value of the <code>&lt;link&gt;</code> element:
        <ul>
        <li>List of CSS files included in the project</li>
        </ul>
 </li>
-<li>Proposes code completion of the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element:
+<li>Proposes code completion of the <code>src</code> attribute value of the <code>&lt;script&gt;</code> element:
        <ul>
        <li>List of JavaScript files included in the project</li>
        </ul>
 </li>
-<li>Proposes code completion of the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;iframe&gt;</span> element:
+<li>Proposes code completion of the <code>src</code> attribute value of the <code>&lt;iframe&gt;</code> element:
        <ul>
        <li>List of HTML files included in the project</li>
        </ul>
 </li>
-<li>Proposes code completion of the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element:
+<li>Proposes code completion of the <code>src</code> attribute value of the <code>&lt;img&gt;</code> element:
        <ul>
        <li>List of image files included in the project</li>
        </ul>
 </li>
-<li>Proposes code completion of <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> attribute values of all elements:
+<li>Proposes code completion of <code>id</code> or <code>class</code> attribute values of all elements:
        <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">id</span>: List of ID selectors of linked CSS files</li>
-       <li><span style="font-family: Courier New,Courier,monospace">class</span>: List of class selectors of linked CSS files</li>
+       <li><code>id</code>: List of ID selectors of linked CSS files</li>
+       <li><code>class</code>: List of class selectors of linked CSS files</li>
        </ul>
 </li>
 </ul>
 
-<p class="figure">Figure: Content assist with the &lt;img&gt; element</p> 
+<p align="center"><strong>Figure: Content assist with the &lt;img&gt; element</strong></p> 
 <p align="center"><img alt="Content assist with the img element" src="../images/web_editor_img.png" /></p>
 
 <p>To use content assist in the HTML editor:</p>
 <p>The advanced content hover supports additional information of the attribute values of some elements in the HTML editor.</p>
 <p>The advanced content hover has the following features:</p>
 <ul>
-<li>Supports a preview at the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element.
+<li>Supports a preview at the <code>href</code> attribute value of the <code>&lt;a&gt;</code> element.
        <ul>
-       <li>When the HTML file path is assigned to the <span style="font-family: Courier New,Courier,monospace">href</span> value, the preview shows the HTML code of the linked file.</li>
-       <li>When an <span style="font-family: Courier New,Courier,monospace">id</span> element value is assigned to the <span style="font-family: Courier New,Courier,monospace">href</span> value, the preview shows the code snippet of the element that is assigned the <span style="font-family: Courier New,Courier,monospace">id</span> value.</li>
+       <li>When the HTML file path is assigned to the <code>href</code> value, the preview shows the HTML code of the linked file.</li>
+       <li>When an <code>id</code> element value is assigned to the <code>href</code> value, the preview shows the code snippet of the element that is assigned the <code>id</code> value.</li>
        </ul>
 </li>
-<li>Supports a preview of the CSS file at the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element.</li>
-<li>Supports a preview of the JavaScript file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element.</li>
-<li>Supports a preview of the HTML file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;iframe&gt;</span> element.</li>
-<li>Supports a preview of the image file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element.</li>
-<li>Support a preview of the CSS rule at the <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> attribute value of all elements, if the selector (that is made by the <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> value) exists.</li>
+<li>Supports a preview of the CSS file at the <code>href</code> attribute value of the <code>&lt;link&gt;</code> element.</li>
+<li>Supports a preview of the JavaScript file at the <code>src</code> attribute value of the <code>&lt;script&gt;</code> element.</li>
+<li>Supports a preview of the HTML file at the <code>src</code> attribute value of the <code>&lt;iframe&gt;</code> element.</li>
+<li>Supports a preview of the image file at the <code>src</code> attribute value of the <code>&lt;img&gt;</code> element.</li>
+<li>Support a preview of the CSS rule at the <code>id</code> or <code>class</code> attribute value of all elements, if the selector (that is made by the <code>id</code> or <code>class</code> value) exists.</li>
 </ul>
-<p class="figure">Figure: Content hover with the &lt;link&gt; element</p> 
+<p align="center"><strong>Figure: Content hover with the &lt;link&gt; element</strong></p> 
 <p align="center"><img alt="Content hover with the link element" src="../images/web_editor_hover.png" /></p>  
 <p>To use the hover feature in the HTML editor, hover the mouse cursor at the above attributes.</p>
 
 <li>File delete refactoring
 <p>When a file is deleted, other files to which the deleted file is related, are commented out at the linked line of codes.</p></li>
 </ul>
-<p class="figure">Figure: Before CSS file rename refactoring</p> 
+<p align="center"><strong>Figure: Before CSS file rename refactoring</strong></p> 
 <p align="center"><img alt="Before CSS file rename refactoring" src="../images/web_editor_before_refac.png" /></p> 
 
-<p class="figure">Figure: After CSS file rename refactoring</p> 
+<p align="center"><strong>Figure: After CSS file rename refactoring</strong></p> 
 <p align="center"><img alt="After CSS file rename refactoring" src="../images/web_editor_after_refac.png" /></p> 
 
 <h2 id="previewer">Previewer</h2>
 <p>The <strong>JavaScript Log Console</strong> view is a tool that helps to debug the log analysis using the JavaScript Console API when developing Web applications. The <strong>JavaScript Log Console</strong> view is active only in the <strong>Debug</strong> launch mode.</p>
 <p>Using the console functions provided to JavaScript code, the view shows the log information in the target.</p>
 
+<p align="center" class="Table"><strong>Table: Supported JavaScript log methods</strong></p>
 <table>
-<caption>Table: Supported JavaScript log methods</caption>
 <tbody>
 <tr>
  <th>Method</th>
  <th>Example</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">console.log</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">console.log(&quot;console.log&quot;);</span></td>
+ <td><code>console.log</code></td>
+ <td><code>console.log(&quot;console.log&quot;);</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">console.info</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">console.info(&quot;console.info&quot;);</span></td>
+ <td><code>console.info</code></td>
+ <td><code>console.info(&quot;console.info&quot;);</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">console.warn</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">console.warn(&quot;console.warn&quot;);</span></td>
+ <td><code>console.warn</code></td>
+ <td><code>console.warn(&quot;console.warn&quot;);</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">console.error</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">console.error(&quot;console.error&quot;);</span></td>
+ <td><code>console.error</code></td>
+ <td><code>console.error(&quot;console.error&quot;);</code></td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">console.debug</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">console.debug(&quot;console.debug&quot;);</span></td>
+ <td><code>console.debug</code></td>
+ <td><code>console.debug(&quot;console.debug&quot;);</code></td>
  </tr>
  </tbody></table>
 
-<p class="figure">Figure: JavaScript log method colors</p> 
+<p align="center"><strong>Figure: JavaScript log method colors</strong></p> 
 <p align="center"><img alt="JavaScript log method colors" src="../images/web_editor_js_log.png" /></p> 
  
 <h2 id="live_edit">Live Edit</h2>
index 242e412..e57b21e 100644 (file)
    <li><a href="#profile_panel">Profiles Panel</a></li> 
    <li><a href="#console">Console Panel</a></li> 
   </ul> 
-  <p class="figure">Figure: JavaScript Debugger panels</p> 
+  <p align="center"><strong>Figure: JavaScript Debugger panels</strong></p> 
   <p align="center"><img alt="JavaScript Debugger panels" src="../images/jsdebugger_panels.png" /></p> 
-  <p>When debugging with the <a href="../common_tools/emulator.htm">Emulator</a>, the Emulator communicates with the Google Chrome&trade; browser through the HTTP protocol.</p> 
+  <p>When debugging with the <a href="../common_tools/emulator.htm">emulator</a>, the emulator communicates with the Google Chrome&trade; browser through the HTTP protocol.</p> 
   <p>When the JavaScript Debugger is started, the <strong>Network</strong> panel is off. To enable the <strong>Network</strong> panel and start monitoring the resource loading status, press the F5 key. This reloads the current page and displays the load time on the <strong>Network</strong> panel.</p> 
   
 <h2 id="element" name="element">Elements Panel</h2> 
   <p>The <strong>Elements</strong> panel of the JavaScript Debugger allows you to see the Web page components (the DOM tree, CSS style, and Document Object Model).</p> 
-  <p class="figure">Figure: Elements panel</p> 
+  <p align="center"><strong>Figure: Elements panel</strong></p> 
   <p align="center"><img alt="Elements panel" src="../images/remote_inspector_elements.png" /></p>   
   
 <h2 id="resource" name="resource">Resources Panel</h2> 
   <p>The <strong>Resources</strong> panel of the JavaScript Debugger allows you to inspect resources. You can interact with frames containing resources, such as HTML, JavaScript, CSS, images, and fonts. You can also inspect HTML5 databases, local storage, cookies, and application cache.</p> 
-  <p class="figure">Figure: Resources panel</p> 
+  <p align="center"><strong>Figure: Resources panel</strong></p> 
   <p align="center"><img alt="Resources panel" src="../images/remote_inspector_resources.png" /></p>  
 
 <h2 id="network" name="network">Network Panel</h2> 
   <p>The <strong>Network</strong> panel of the JavaScript Debugger allows you to inspect resources downloaded over the network. You can also inspect the HTTP header, response, cookies, and preview.</p> 
-  <p class="figure">Figure: Network panel</p> 
+  <p align="center"><strong>Figure: Network panel</strong></p> 
   <p align="center"><img alt="Network panel" src="../images/remote_inspector_network.png" /></p> 
   
  <h2 id="source" name="source">Sources Panel</h2> 
   <p>The <strong>Sources</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript source page. You can debug your JavaScript code. This panel supports watch expressions, callstack, scope variables, and break point operation. In addition, it supports basic debugging operations: continue, step over, step into, and step out.</p> 
-  <p class="figure">Figure: Sources panel</p> 
+  <p align="center"><strong>Figure: Sources panel</strong></p> 
   <p align="center"><img alt="Sources panel" src="../images/remote_inspector_sources.png" /></p>   
   
  <h2 id="time" name="time">Timeline Panel</h2> 
   <p>The <strong>Timeline</strong> panel of the JavaScript Debugger allows you to perform advanced timing and speed analysis. You can see how long the browser takes to handle DOM events, and rendering and painting windows.</p> 
-  <p class="figure">Figure: Timeline panel</p> 
+  <p align="center"><strong>Figure: Timeline panel</strong></p> 
   <p align="center"><img alt="Timeline panel" src="../images/remote_inspector_timeline.png" /></p>  
  
 <h2 id="profile_panel" name="profile_panel">Profiles Panel</h2> 
   <p>The <strong>Profiles</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript performance analyses. You can inspect CPU profiles or CSS Select profiles.</p> 
-  <p class="figure">Figure: Profiles panel</p> 
+  <p align="center"><strong>Figure: Profiles panel</strong></p> 
   <p align="center"><img alt="Profiles panel" src="../images/remote_inspector_profiles.png" /></p>  
  
  <h2 id="console" name="console">Console Panel</h2> 
   <p>The <strong>Console</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript console operation. You can interact with your page programmatically. Any errors or warnings on your page are shown in the console.</p> 
-  <p class="figure">Figure: Console panel</p> 
+  <p align="center"><strong>Figure: Console panel</strong></p> 
   <p align="center"><img alt="Console panel" src="../images/remote_inspector_console.png" /></p> 
 
   
index ab7eeff..006a065 100644 (file)
@@ -57,7 +57,7 @@
 <li>Click <strong>Localization</strong>.</li>
 
 </ol>
-<p class="figure">Figure: Opening the Web Localization view</p> 
+<p align="center"><strong>Figure: Opening the Web Localization view</strong></p> 
 <p align="center"><img alt="Opening the Web Localization view" src="../images/web_loc_open_view.png"/></p> 
 
 
 <li>To confirm the selected locale information, click <strong>OK</strong>.</li>
 </ol>
 
-<p class="figure">Figure: Added locales</p> 
+<p align="center"><strong>Figure: Added locales</strong></p> 
 <p align="center"><img alt="Added locales" src="../images/web_loc_locales_container.png"/></p>
 
-<p>A container named locales is created for the localized content. Under the container, a subfolder for a locale is added when you set a locale. For example, <span style="font-family: Courier New,Courier,monospace">/locales/en-us</span> and <span style="font-family: Courier New,Courier,monospace">/locales/zn-cn</span>.</p>
+<p>A container named locales is created for the localized content. Under the container, a subfolder for a locale is added when you set a locale. For example, <code>/locales/en-us</code> and <code>/locales/zn-cn</code>.</p>
 
 
 <h2 id="strings">Creating and Managing Localized Strings</h2>
 </ol>
 <p>You can check the defined strings in the <strong>String</strong> tab.</p>
 
-<p class="figure">Figure: Defined strings</p> 
+<p align="center"><strong>Figure: Defined strings</strong></p> 
 <p align="center"><img alt="Defined strings" src="../images/web_loc_string_tab.png"/></p>
 
 <p>You can add more items to the table or remove them, as needed.</p>
 <p>You can change the table tab configuration between ID and Locale by clicking the <strong>Change ViewMode</strong> button.</p>
 
-<p class="figure">Figure: String-based viewmode</p> 
+<p align="center"><strong>Figure: String-based viewmode</strong></p> 
 <p align="center"><img alt="String-based viewmode" src="../images/web_loc_change_view_mode.png"/></p>
 <p>When the string localization is complete, the following modifications are made in the project:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">language.js</span> file is created in the application's top-level folder and in each locale folder under <span style="font-family: Courier New,Courier,monospace">locales</span>, containing the localized string content.
+<li><code>language.js</code> file is created in the application's top-level folder and in each locale folder under <code>locales</code>, containing the localized string content.
 
-<p class="figure">Figure: language.js</p> 
+<p align="center"><strong>Figure: language.js</strong></p> 
 <p align="center"><img alt="language.js" src="../images/web_loc_language_js.png"/></p>
 </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element, whose <span style="font-family: Courier New,Courier,monospace">src</span> attribute is <span style="font-family: Courier New,Courier,monospace">language.js</span>, is added to the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
+<li>The <code>&lt;script&gt;</code> element, whose <code>src</code> attribute is <code>language.js</code>, is added to the <code>index.html</code> file.
 
-<p class="figure">Figure: src element in index.html</p> 
+<p align="center"><strong>Figure: src element in index.html</strong></p> 
 <p align="center"><img alt="src element in index.html" src="../images/web_loc_index_html.png"/></p>
 </li>
 </ul>
-
-<table class="note"> 
- <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">For more information about using localized string content, see <a href="../../../org.tizen.guides/html/web/localization/localization_w.htm">Localization</a>.</td> 
-  </tr> 
- </tbody> 
-</table>  
-
+<div class="note">
+    <strong>Note</strong>
+       For more information about using localized string content, see <a href="../../../org.tizen.guides/html/web/localization/localization_w.htm">Localization</a>.
+</div>
 
 <h3>Using Resources for Localization</h3>
 
 <p>In the <strong>Resource</strong> tab, you can localize resource files, such as images, sound, video, HTML, and JavaScript more efficiently. The <strong>Resource</strong> tab displays the resources of the project in a tile form.</p>
 
-<p class="figure">Figure: Resource tab</p> 
+<p align="center"><strong>Figure: Resource tab</strong></p> 
 <p align="center"><img alt="Resource tab" src="../images/web_loc_resource_tab.png"/></p>
 
 <p>If a resource is not localized, the <strong>+</strong> button appears on the resource tile.</p>
 
-<p class="figure">Figure: Missing resource file</p> 
+<p align="center"><strong>Figure: Missing resource file</strong></p> 
 <p align="center"><img alt="Missing resource file" src="../images/web_loc_missing_resource.png"/></p>
 
 <p>To localize the missing resource:</p>
 
 <h2 id="folder">Folder-based Localization</h2>
 
-<p>Folder-based localization places the resources inside locale folders with names determined by the language tag, such as <strong>en-us</strong> and <strong>ko-kr</strong>. The locale folders are located under a container folder named <span style="font-family: Courier New,Courier,monospace">locales</span>. The localized resources are used in accordance with the location settings of the device. If there are no localized resources, the default resource is used.</p>
-<p>For example, if the locale of a device is <strong>ko-kr</strong>, the  <span style="font-family: Courier New,Courier,monospace">images/a.png</span> and <span style="font-family: Courier New,Courier,monospace">images/c.png</span> images are replaced with the <span style="font-family: Courier New,Courier,monospace">locales/ko-kr/images/a.png</span> and <span style="font-family: Courier New,Courier,monospace">locales/ko-kr/images/c.png</span> images. However, the <span style="font-family: Courier New,Courier,monospace">images/b.png</span> image is not replaced, because there is no applicable resource in the <span style="font-family: Courier New,Courier,monospace">locales/ko-kr/images/</span> folder.</p>
+<p>Folder-based localization places the resources inside locale folders with names determined by the language tag, such as <strong>en-us</strong> and <strong>ko-kr</strong>. The locale folders are located under a container folder named <code>locales</code>. The localized resources are used in accordance with the location settings of the device. If there are no localized resources, the default resource is used.</p>
+<p>For example, if the locale of a device is <strong>ko-kr</strong>, the  <code>images/a.png</code> and <code>images/c.png</code> images are replaced with the <code>locales/ko-kr/images/a.png</code> and <code>locales/ko-kr/images/c.png</code> images. However, the <code>images/b.png</code> image is not replaced, because there is no applicable resource in the <code>locales/ko-kr/images/</code> folder.</p>
 
 <pre class="prettyprint">
 root/
index 3ee90af..fb2c596 100644 (file)
                  <p>In the <strong>Orientation and Zooming</strong> panel, you can switch the orientation between the portrait and landscape modes. If your application has subscribed to the orientation change event, it receives the event and the subscribed event handler is invoked. </p> 
   <p>You can also set the zoom level of your application to view specific areas of the application. Zooming is a visual aid and does not trigger application notifications.</p> 
   
-  <p class="figure">Figure: Orientation and Zooming panel (mobile app on the left, wearable on the right)</p> 
+  <p align="center"><strong>Figure: Orientation and Zooming panel (mobile app on the left, wearable on the right)</strong></p> 
    <p align="center"><img alt="Orientation and Zooming panel" src="../images/simulator_panel_resolution_orientation.png" /></p>  
   
                                <h3 id="system" name="system">System Summary</h3> 
 
                        
   <p>The <strong>System Summary</strong> panel displays generic information and settings about the application, system, device, and platform.</p> 
-  <p class="figure">Figure: System Summary panel (mobile app on the left, wearable on the right)</p> 
+  <p align="center"><strong>Figure: System Summary panel (mobile app on the left, wearable on the right)</strong></p> 
   <p align="center"><img alt="System Summary panel" src="../images/simulator_panel_system_summary.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
 
                        
@@ -67,7 +67,7 @@
 
                         
   <p>The <strong>Geolocation</strong> panel contains location-related settings. You can set the local time zone to test whether your application reacts properly when the target device is located in different geographical areas.</p> 
-  <p class="figure">Figure: Geolocation panel</p> 
+  <p align="center"><strong>Figure: Geolocation panel</strong></p> 
   <p align="center"><img  alt="Geolocation panel" src="../images/simulator_panel_geolocation.png" /></p> 
   <p>The panel also provides an input area to configure geographical data being sent from the device. Additionally, a map is displayed and updated in accordance to the changing of data.</p> 
   <p>To simulate a custom, multi-point route:</p> 
@@ -81,9 +81,9 @@
                                <h3 id="config" name="config">Application Configuration</h3> 
 
                          
-  <p>The <strong>Application Configuration</strong> panel displays a graphical representation of the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. You can use it to ensure the validity of your application configuration.</p> 
+  <p>The <strong>Application Configuration</strong> panel displays a graphical representation of the <code>config.xml</code> file. You can use it to ensure the validity of your application configuration.</p> 
   <p>For more information about the configuration details, see <a href="web_simulator_w.htm#spec">W3C/HTML5 Specifications</a>.</p> 
-  <p class="figure">Figure: Application Configuration panel</p> 
+  <p align="center"><strong>Figure: Application Configuration panel</strong></p> 
   <p align="center"><img  alt="Application Configuration panel" src="../images/simulator_panel_feature_configuration.png" /></p> 
                        
                        
    <li><strong>Shake</strong> simulates shaking the device along the X axis.</li> 
    <li><strong>ResetAll</strong> simulates returning the device to its default position.</li> 
   </ul> 
-  <p class="figure">Figure: Accelerometer sensor (mobile app on the left, wearable on the right)</p> 
+  <p align="center"><strong>Figure: Accelerometer sensor (mobile app on the left, wearable on the right)</strong></p> 
   <p align="center"><img  alt="Accelerometer sensor" src="../images/simulator_panel_accelerometer.png" /></p> 
   <p>To set the magnetic field, enter the X, Y, and Z axis values.</p> 
-  <p class="figure">Figure: Accelerometer and gyro sensors</p> 
+  <p align="center"><strong>Figure: Accelerometer and gyro sensors</strong></p> 
   <p align="center"><img  alt="Accelerometer and gyro sensors" src="../images/simulator_panel_accelerometer_gyro.png" /></p> 
- <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note"><p>If the computer does not fully support WebGL, the simulated device in the <strong>Sensors</strong> panel looks like in the following figure.</p> 
-    <p class="figure">Figure: Sensor without WebGL</p> 
-  <p align="center"><img  alt="Sensor without WebGL" src="../images/simulator_sensor_webgl.png" /></p> </td> 
-      </tr> 
-     </tbody> 
-    </table>
-                       
-                       
-                        
-                               <h3 id="package" name="package">Packages and Applications</h3> 
-                       
-                       
+
+<div class="note">
+    <strong>Note</strong>
+       If the computer does not fully support WebGL, the simulated device in the <strong>Sensors</strong> panel looks like in the following figure.
+    <p align="center"><strong>Figure: Sensor without WebGL</strong></p> 
+  <p align="center"><img  alt="Sensor without WebGL" src="../images/simulator_sensor_webgl.png" /></p>
+</div>
+
+<h3 id="package" name="package">Packages and Applications</h3> 
+
   <p>The <strong>Packages and Applications</strong> panel provides a simulated packages and applications management center on a device. It lists available and installed packages and applications on a device:</p>
   <ul>
   <li>On the <strong>Packages</strong> tab, the available packages list provides INSTALL and UPDATE operations. The operations generate events, such as INSTALLED and UPDATED, and call the required callbacks.</li> 
   </ul>
   <p>You can use the <strong>Packages and Applications</strong> panel to verify created operations and operation details.</p>
 
-  <p class="figure">Figure: Packages and Applications panel</p> 
+  <p align="center"><strong>Figure: Packages and Applications panel</strong></p> 
   <p align="center"><img  alt="Packages and Applications panel" src="../images/simulator_panel_package.png" /></p>   
-  <p>The following sample code demonstrates how to receive the INSTALLED, UPDATED, and UNINSTALLED events for changes in the installed packages list. If you select <strong>Sample Package</strong> from the available packages list and click <strong>Install</strong>, the &quot;The package &quot;Sample Package&quot; is installed&quot; message is displayed in the console, and for each application in the package, the <span style="font-family: Courier New,Courier,monospace">oninstalled</span> event is generated. You can subscribe to these application events by registering the <span style="font-family: Courier New,Courier,monospace">tizen.application.addAppInfoEventListener</span> interface.</p>
+  <p>The following sample code demonstrates how to receive the INSTALLED, UPDATED, and UNINSTALLED events for changes in the installed packages list. If you select <strong>Sample Package</strong> from the available packages list and click <strong>Install</strong>, the &quot;The package &quot;Sample Package&quot; is installed&quot; message is displayed in the console, and for each application in the package, the <code>oninstalled</code> event is generated. You can subscribe to these application events by registering the <code>tizen.application.addAppInfoEventListener</code> interface.</p>
   <pre class="prettyprint">var packageEventCallback =
 {
 &nbsp;&nbsp;&nbsp;oninstalled: function(packageInfo)
@@ -153,7 +145,7 @@ tizen.package.setPackageInfoEventListener(packageEventCallback);</pre>
  <h4>Preinstalled Packages and Applications In Mobile Applications</h4>
  <p>A <strong>Sample Package</strong> is preinstalled in the simulator and contains 2 sample applications: Tizen dialer for making phone calls, and Tizen sender for sending SMS messages. Many sample applications, such as CallLog, use the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API to invoke these service applications. Since the simulator allows you to run only 1 application at a time, the <strong>Application Module Message</strong> window is available, which can provide return data for success callback and simulate application launch failure.</p>
  
- <p>The following sample code demonstrates how to define an application control and invoke the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/send_text</span> service provided by the Tizen sender application. You can use the <strong>Application Module Message</strong> window to simulate the success value for the success callback or an error message for the error callback.</p>
+ <p>The following sample code demonstrates how to define an application control and invoke the <code>http://tizen.org/appcontrol/operation/send_text</code> service provided by the Tizen sender application. You can use the <strong>Application Module Message</strong> window to simulate the success value for the success callback or an error message for the error callback.</p>
   <pre class="prettyprint">var appControl = new tizen.ApplicationControl(&#39;http://tizen.org/appcontrol/operation/send_text&#39;,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;sms:&#39; + phoneNumber);
 
@@ -169,11 +161,11 @@ tizen.application.launchAppControl(appControl, null, function()
 &nbsp;&nbsp;&nbsp;onfailure: function(er) {/* Error handling */}
 });</pre>
 
-  <p class="figure">Figure: Providing application callback data</p> 
+  <p align="center"><strong>Figure: Providing application callback data</strong></p> 
   <p align="center"><img  alt="Providing application callback data" src="../images/simulator_panel_package_callback.png" /></p> 
-  <p>The Web Simulator does not have a home screen. Therefore, when the <span style="font-family: Courier New,Courier,monospace">application.exit()</span> method is called, you cannot navigate to another application or to the home screen. In this situation, a message is displayed stating that the application tried to exit and can be launched again.</p> 
+  <p>The Web Simulator does not have a home screen. Therefore, when the <code>application.exit()</code> method is called, you cannot navigate to another application or to the home screen. In this situation, a message is displayed stating that the application tried to exit and can be launched again.</p> 
     
-       <p class="figure">Figure: Launch an application again</p> 
+       <p align="center"><strong>Figure: Launch an application again</strong></p> 
   <p align="center"><img  alt="Launch an application again" src="../images/app_exit.png" /></p> 
        
                                <h3 id="communication" name="communication">Communications in Mobile Applications</h3> 
@@ -181,10 +173,10 @@ tizen.application.launchAppControl(appControl, null, function()
   <p>In the <strong>Communications</strong> panel, you can handle calls, messages, and the push service.</p>
   <p><strong>Calls</strong></p>
   <p>The <strong>Calls</strong> tab provides controls for simulating incoming calls made to the application. The calls can be tracked by call history-related methods using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API.</p> 
-  <p class="figure">Figure: Calls tab</p> 
+  <p align="center"><strong>Figure: Calls tab</strong></p> 
   <p align="center"><img  alt="Calls tab" src="../images/simulator_panel_call.png" /></p> 
   <p>Click <strong>Call</strong> to display the calling screen. Click <strong>Answer</strong> to simulate a received call, and <strong>Ignore</strong> to simulate a rejected call.</p> 
-  <p class="figure">Figure: Calling screen</p> 
+  <p align="center"><strong>Figure: Calling screen</strong></p> 
   <p align="center"><img  alt="Calling screen" src="../images/simulator_panel_callscreen.png" /></p>
       <p><strong>Messages</strong></p>
   <p>The <strong>Messages</strong> tab provides controls for simulating SMS, MMS, and email message exchange between the panel and a target application. To send a message from the panel to the application:</p> 
@@ -195,18 +187,18 @@ tizen.application.launchAppControl(appControl, null, function()
   </ol> 
   <p>The application receives messages using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API.</p> 
   <p>The <strong>Message Thread</strong> section shows the message history of the current session.</p> 
-  <p class="figure">Figure: Messages tab</p> 
+  <p align="center"><strong>Figure: Messages tab</strong></p> 
   <p align="center"><img  alt="Messages tab" src="../images/simulator_panel_messaging.png" /></p> 
   <p><strong>Push Service</strong></p>
   <p>The <strong>Push</strong> tab provides controls for delivering push notifications to your application. The applications table (on the <strong>Packages and Applications</strong> panel) lists registered applications for receiving push notifications and connectivity status. If an application is connected, the push service sends the push notification data directly to the application. If an application is not connected, the push service posts a UI notification on the Notification panel.</p>
 
-  <p>For the application to receive push messages, it has to register itself with the <span style="font-family: Courier New,Courier,monospace">tizen.push.registerService()</span> method. If the registration is successful, a red pause button is shown at the <strong>Application</strong> section under <strong>Status</strong>. During this status, notification messages pushed by the service server are posted on the Notification panel.</p>
-   <p class="figure">Figure: Registered for the push service</p> 
+  <p>For the application to receive push messages, it has to register itself with the <code>tizen.push.registerService()</code> method. If the registration is successful, a red pause button is shown at the <strong>Application</strong> section under <strong>Status</strong>. During this status, notification messages pushed by the service server are posted on the Notification panel.</p>
+   <p align="center"><strong>Figure: Registered for the push service</strong></p> 
   <p align="center"><img  alt="Registered for the push service" src="../images/simulator_panel_push_register.png" /></p>  
   
-<p>After the registration, the application must connect to the push service with the <span style="font-family: Courier New,Courier,monospace">tizen.push.connectService()</span> method. When the application is connected, a callback provided by the application is called whenever a notification message arrives.</p> 
+<p>After the registration, the application must connect to the push service with the <code>tizen.push.connectService()</code> method. When the application is connected, a callback provided by the application is called whenever a notification message arrives.</p> 
 
-   <p class="figure">Figure: Connected to the push service</p> 
+   <p align="center"><strong>Figure: Connected to the push service</strong></p> 
   <p align="center"><img  alt="Connected to the push service" src="../images/simulator_panel_push_connect.png" /></p>  
   
 <p>To push a message from the panel to the application:</p> 
@@ -216,7 +208,7 @@ tizen.application.launchAppControl(appControl, null, function()
    <li>Click <strong>Push</strong>. </li> 
   </ol>   
   <p>The application receives push notifications using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push</a> API.</p> 
-  <p class="figure">Figure: Push tab</p> 
+  <p align="center"><strong>Figure: Push tab</strong></p> 
   <p align="center"><img  alt="Push tab" src="../images/simulator_panel_push.png" /></p> 
                        
                        
@@ -224,18 +216,18 @@ tizen.application.launchAppControl(appControl, null, function()
                                
                         
   <p>The <strong>Network Management</strong> panel is used to manage network capabilities, such as Wi-Fi, cellular network (2G, 3G, and 4G), NFC, Bluetooth, and bearer selection. </p> 
-  <p class="figure">Figure: Network Management panel</p> 
+  <p align="center"><strong>Figure: Network Management panel</strong></p> 
 
   <p align="center"><img  alt="Network Management panel" src="../images/simulator_panel_network.png" /></p> 
   <p>You can also set additional parameters for the NFC and Bluetooth functionalities, such as NFC tag and target type, Bluetooth adapter information, and the simulated devices.</p> 
-  <p class="figure">Figure: NFC parameters</p> 
+  <p align="center"><strong>Figure: NFC parameters</strong></p> 
   <p align="center"><img  alt="NFC parameters" src="../images/simulator_panel_nfc.png" /></p> 
   
-    <p class="figure">Figure: Bluetooth parameters</p> 
+    <p align="center"><strong>Figure: Bluetooth parameters</strong></p> 
   <p align="center"><img  alt="Bluetooth parameters" src="../images/simulator_panel_bluetooth.png" /></p> 
   
   <p>The <strong>Bearer Selection</strong> section provides network bearer selection management by listing supported network devices and their current availability status. You can request and release specific network connections from this section.</p>
-  <p class="figure">Figure: Network bearer selection</p> 
+  <p align="center"><strong>Figure: Network bearer selection</strong></p> 
   <p align="center"><img  alt="Network bearer selection" src="../images/simulator_panel_bearer.png" /></p>
 
 <p>Your application can manage network devices and network status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a>, <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a>, and <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html">Network Bearer Selection</a> APIs.</p> 
@@ -245,7 +237,7 @@ tizen.application.launchAppControl(appControl, null, function()
                                <h3 id="power" name="power">Power Manager in Mobile Applications</h3> 
                        
   <p>The <strong>Power Manager</strong> panel provides controls for managing the state of the battery and power resources.</p> 
-  <p class="figure">Figure: Power Manager panel</p> 
+  <p align="center"><strong>Figure: Power Manager panel</strong></p> 
   <p align="center"><img alt="Power Manager panel" src="../images/power_manager_simulator.png" /></p> 
 
   <p>The <strong>BATTERY</strong> section simulates the device battery level. Your application can retrieve the current battery status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API.</p> 
@@ -254,13 +246,13 @@ tizen.application.launchAppControl(appControl, null, function()
                                <h3 id="download" name="download">Download in Mobile Applications</h3> 
                        
   <p>The <strong>Download</strong> panel allows you to create a simulated download object with custom size, MIME type, and download speed. All simulated download objects support start, cancel, pause, and resume operations, and provide status feedback mechanism. You can use the simulated download object created by the panel to test various conditions for your application.</p> 
-  <p>The panel contains 2 predefined simulated download objects: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/small_file.zip</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/big_file.zip</span>. When an object is selected from the drop-down list, its details are displayed at the bottom half of the panel. The panel also allows you to add, remove, and update download objects. Details, such as URL, MIME type, file size, and speed, are configurable.</p> 
+  <p>The panel contains 2 predefined simulated download objects: <code>http://tizen.org/small_file.zip</code> and <code>http://tizen.org/big_file.zip</code>. When an object is selected from the drop-down list, its details are displayed at the bottom half of the panel. The panel also allows you to add, remove, and update download objects. Details, such as URL, MIME type, file size, and speed, are configurable.</p> 
   <p>The following sample code demonstrates how to start the download process and set a listener callback to monitor the status of the download. By adjusting the parameter of the download object, you can verify that you application behaves correctly in different scenarios.</p> 
   <pre class="prettyprint">request = tizen.DownloadRequest(&quot;http://tizen.org/small_file.zip&quot;)
 downloadId = tizen.download.start(request)
 tizen.download.setListener(downloadId, listener)
 </pre> 
-  <p class="figure">Figure: Download panel</p> 
+  <p align="center"><strong>Figure: Download panel</strong></p> 
   <p> </p> 
   <p align="center"><img  alt="Download panel" src="../images/simulator_panel_download.png" /></p> 
                        
@@ -268,10 +260,10 @@ tizen.download.setListener(downloadId, listener)
                                <h3 id="noti" name="noti">Notification in Mobile Applications</h3> 
                
   <p>The <strong>Notification</strong> panel provides a notification center administrating system notifications. As the Simulator has no real desktop UI components, such as status bar or notification tray, the panel serves as the final rendering place of all the notifications. You can easily verify that the notification details you created with the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification</a> API are correct.</p> 
-  <p class="figure">Figure: Notification panel with empty notification</p> 
+  <p align="center"><strong>Figure: Notification panel with empty notification</strong></p> 
 
   <p align="center"><img  alt="Notification panel with empty notification" src="../images/simulator_panel_notification_none.png" /></p> 
-  <p>The following sample code demonstrates how to create a status notification. When it is posted with the <span style="font-family: Courier New,Courier,monospace">post()</span> method, the details of the notification are displayed on the panel, as shown in the figure below.</p> 
+  <p>The following sample code demonstrates how to create a status notification. When it is posted with the <code>post()</code> method, the details of the notification are displayed on the panel, as shown in the figure below.</p> 
   <pre class="prettyprint">
 notification = new tizen.StatusNotification(&quot;PROGRESS&quot;, &quot;Notification Sample&quot;, 
 {
@@ -283,7 +275,7 @@ notification = new tizen.StatusNotification(&quot;PROGRESS&quot;, &quot;Notifica
 });
 
 </pre> 
-  <p class="figure">Figure: Notification panel with a notification</p> 
+  <p align="center"><strong>Figure: Notification panel with a notification</strong></p> 
   <p> </p> 
   <p align="center"><img  alt="Notification panel with a notification" src="../images/simulator_panel_notification.png" /></p> 
                
index 701b9df..eb22497 100644 (file)
   </ul> 
   <p>The Tizen Web Simulator is based on the <a href="https://github.com/blackberry-webworks/Ripple-UI" target="_blank">Ripple-UI Framework</a> and is licensed under Apache Software License v.2.0. </p> 
   
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Web Simulator does not support a wearable circular UI.</td>
-    </tr>
-   </tbody>
-  </table>
-  <p class="figure">Figure: Tizen Web Simulator</p> 
+<div class="note">
+    <strong>Note</strong>
+       The Web Simulator does not support a wearable circular UI.
+</div>
+  <p align="center"><strong>Figure: Tizen Web Simulator</strong></p> 
   <p align="center"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></p>   
   
   <h2 id="setting" name="setting">Web Simulator Settings</h2> 
   <ul> 
    <li>Configuration management <p>Save your configuration settings to the local storage and restore the settings at a later time.</p> 
 <p align="left"><img alt="Configuration settings save and load buttons" src="../images/simulator_save_button.png" /></p></li> 
-   <li>Device settings <p>Set the device API and device resolution to simulate the device resolution of the target device on the <strong>DEVICE</strong> tab.</p>
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To provide similar UI rendering on the Emulator and the target device, set the Emulator resolution to <strong>tizen WVGA (480x800)</strong> or <strong>tizen HD (720x1280)</strong>, as the viewport property of these resolutions is configured to be the same as the target device&#39;s.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+   <li>Device settings <p>Set the device API and device resolution to simulate the device resolution of the target device on the <strong>DEVICE</strong> tab.</p> 
+<div class="note">
+    <strong>Note</strong>
+       To provide similar UI rendering on the emulator and the target device, set the emulator resolution to <strong>tizen WVGA (480x800)</strong> or <strong>tizen HD (720x1280)</strong>, as the viewport property of these resolutions is configured to be the same as the target device&#39;s.
+</div>
    
    </li> 
    <li>System settings <p>The Tizen System Information API (for <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications) is used to retrieve device and network-related information. Use the <strong>SYSTEM SETTINGS</strong> tab to set the device status and to test whether your application can retrieve the current device status. You can also test the application listener functions for status change notifications.</p> <p>You can modify the following system configuration settings on the <strong>SYSTEM SETTINGS</strong> tab:</p> 
   <h4 id="chrome" name="chrome">Google Chrome&trade; Location</h4> 
   <p>Enter the full path to the Google Chrome&trade; program. When first started, the Tizen Studio attempts to discover the location. However, it can be necessary to enter or modify this value manually.</p> 
   <ul> 
-   <li>For Linux: <span style="font-family: Courier New,Courier,monospace;">/opt/google/chrome/google-chrome</span>.</li> 
-   <li>For Windows&reg; 64-bit: <span style="font-family: Courier New,Courier,monospace;"> C:\Program Files (x86)\Google\Chrome\Application\chrome.exe</span></li> 
-   <li>For Windows&reg; 32-bit: <span style="font-family: Courier New,Courier,monospace;"> C:\Program Files\Google\Chrome\Application\chrome.exe</span></li> 
+   <li>For Linux: <code>/opt/google/chrome/google-chrome</code>.</li> 
+   <li>For Windows&reg; 64-bit: <code> C:\Program Files (x86)\Google\Chrome\Application\chrome.exe</code></li> 
+   <li>For Windows&reg; 32-bit: <code> C:\Program Files\Google\Chrome\Application\chrome.exe</code></li> 
   </ul> 
   <h4 id="extra" name="extra">Extra Parameters</h4> 
   <p>The simulator is started with default parameters, including the ones described in the following table.</p> 
-  <table style="width: 100%" border="1"> 
-   <caption>
-     Table: Default parameters 
-   </caption> 
-   <tbody> 
+<p align="center" class="Table"><strong>Table: Default parameters</strong></p> 
+<table style="width: 100%" border="1">
+<tbody> 
     <tr> 
      <th>Parameters</th> 
      <th>Description</th> 
     </tr> 
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">--allow-access-from-files</span> </td> 
-     <td>Allows the simulator JavaScript APIs to access files on the disk (such as <span style="font-family: Courier New,Courier,monospace;">config.xml</span> and the application icon).</td> 
+     <td><code>--allow-access-from-files</code> </td> 
+     <td>Allows the simulator JavaScript APIs to access files on the disk (such as <code>config.xml</code> and the application icon).</td> 
     </tr> 
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">--disable-web-security</span> </td> 
+     <td><code>--disable-web-security</code> </td> 
      <td>Allows the simulator to do cross-domain requests (such as access the map location on another server).</td> 
     </tr> 
    </tbody> 
   <p>To add more start-up parameters, enter them in this field.</p> 
   <h4 id="profile_data" name="profile">Profile Data Location</h4> 
   <p>Enter the full directory path for the simulator to store user preferences and Web application data.</p> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Linux users must manually define this parameter instead of using the default value, since the total length of the directory path in Linux is very limited for this parameter. Using the default value can prevent you from launching more than 1 application concurrently. There is no such restriction in the Windows&reg; version.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<div class="note">
+    <strong>Note</strong>
+       Linux users must manually define this parameter instead of using the default value, since the total length of the directory path in Linux is very limited for this parameter. Using the default value can prevent you from launching more than 1 application concurrently. There is no such restriction in the Windows&reg; version.
+</div>
+  
   <h3 id="simulator" name="simulator">Simulator Settings</h3> 
   <p>In this section, you can modify simulator-related preferences:</p> 
   <ul> 
    <li><strong>Simulator location</strong> <p>Set whether to use the default version of the simulator, or a custom version.</p> 
     <ul> 
      <li>Internal: Use the simulator that is part of the Tizen Studio.</li> 
-     <li>External: Use a custom build or other simulator version. Enter the full path to the <span style="font-family: Courier New,Courier,monospace;">index.html</span> file for the version you want to use.</li> 
+     <li>External: Use a custom build or other simulator version. Enter the full path to the <code>index.html</code> file for the version you want to use.</li> 
     </ul></li> 
    <li> <p>Selecting <strong>Launch simulator in Google Chrome&trade; application mode</strong> launches the simulator without the Google URL bar or tabs at the top. The result is that the simulator appears as a standalone application. The setting has no effect on the simulator features.</p></li> 
   </ul>
   <h3 id="issues" name="issues">Web Simulator Known Issues</h3> 
   <p>The Tizen APIs have the following known issues on the Web simulator:</p> 
   <ul> 
-   <li>Not all Tizen-specific properties are supported in the Web simulator <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file. However, the syntax and values of all Tizen-specific properties are verified. The verification result is displayed in the <strong>Application Configuration</strong> panel of the widget configuration editor.</li> 
+   <li>Not all Tizen-specific properties are supported in the Web simulator <code>config.xml</code> configuration file. However, the syntax and values of all Tizen-specific properties are verified. The verification result is displayed in the <strong>Application Configuration</strong> panel of the widget configuration editor.</li> 
    <li>You can run only 1 application at a time. If your application uses the Application API to invoke another service or application, use the Web simulator features to simulate results for the required callbacks.</li> 
    <li>DST (Daylight Saving Time) -related methods of the Time API are not supported.</li> 
    <li>For the Messaging module, the attachment is not supported, and the message body is always loaded.</li>
   <ul> 
    <li><p>Widget:</p> 
     <ul> 
-     <li> <p>The <span style="font-family: Courier New,Courier,monospace;">config.xml</span> of a widget is parsed by the simulator and the information is shown in the <a class="openconnection" href="web_simulator_features_w.htm#config">Application Configuration</a> panel.</p> </li> 
+     <li> <p>The <code>config.xml</code> of a widget is parsed by the simulator and the information is shown in the <a class="openconnection" href="web_simulator_features_w.htm#config">Application Configuration</a> panel.</p> </li> 
     </ul></li> 
    <li>Content (documents, graphics, multimedia): 
     <ul> 
index 459955e..ae853f8 100644 (file)
 <li>Select the methods to test from the method list on the right pane.</li>
 <li>Enter a name for the test file, and click <strong>Finish</strong>.</li>
 </ol>
-<p class="figure">Figure: Creating a Web unit test</p> 
+<p align="center"><strong>Figure: Creating a Web unit test</strong></p> 
 <p align="center"><img alt="Creating a Web unit test" src="../images/web_test_tool_test_stub.png"/></p> 
-<p>The Web unit tests are generated in the <span style="font-family: Courier New,Courier,monospace">webUnitTest</span> folder.</p>
-<p class="figure">Figure: Web unit test location</p> 
+<p>The Web unit tests are generated in the <code>webUnitTest</code> folder.</p>
+<p align="center"><strong>Figure: Web unit test location</strong></p> 
 <p align="center"><img alt="Web unit test location" src="../images/web_test_tool_stub_location.png"/></p>
 
 <h2 id="edit">Editing the Web Unit Test</h2>
 
 <p>To edit a unit test:</p>
 <ol>
-<li>Add a test case using the <span style="font-family: Courier New,Courier,monospace">test()</span> function:
+<li>Add a test case using the <code>test()</code> function:
 <pre class="prettyprint">
 test(name, test2);
 </pre>
 <p>The function takes the following parameters:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">name</span>: Title of the test as a string, used to display the test results</li>
-<li><span style="font-family: Courier New,Courier,monospace">test2</span>: Function containing the actual testing code that is written with 1 or more assertions to test</li>
+<li><code>name</code>: Title of the test as a string, used to display the test results</li>
+<li><code>test2</code>: Function containing the actual testing code that is written with 1 or more assertions to test</li>
 </ul>
 </li>
-<li>Edit the <span style="font-family: Courier New,Courier,monospace">test2</span> parameter using assertions.
+<li>Edit the <code>test2</code> parameter using assertions.
 <p>An assertion is a Boolean expression that means pass or failure in the test. You can test a value generated by your code with the expected value using a number of assertions provided by the Web unit testing tool.</p></li>
 </ol>
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">For more information about assertions, see <a href="http://api.qunitjs.com/category/assert/" target="_blank">http://api.qunitjs.com/category/assert/</a>.</td> 
-    </tr> 
-   </tbody> 
-</table>  
+<div class="note">
+    <strong>Note</strong>
+       For more information about assertions, see <a href="http://api.qunitjs.com/category/assert/" target="_blank">http://api.qunitjs.com/category/assert/</a>.
+</div>
 
 <h2 id="run">Running the Web Unit Test</h2>
 
@@ -94,12 +89,12 @@ test(name, test2);
 </ol>
 <p>The <strong>Web Unit Test Result</strong> view shows the test results in a tree format. It shows the passed tests with a green icon and failed tests with a red icon. To only display the failed tests, you can use the <strong>Show failed only</strong> button (marked with a red rectangle in the following figure).</p>
 
-<p class="figure">Figure: Web unit test application result</p> 
+<p align="center"><strong>Figure: Web unit test application result</strong></p> 
 <p align="center"><img alt="Web unit test application result" src="../images/web_test_tool_result.png"/></p> 
 
 <p>To repeat the test, select its check box and click the <strong>Run checked</strong> button (marked with a red rectangle in the following figure).</p>
 
-<p class="figure">Figure: Repeating a test</p> 
+<p align="center"><strong>Figure: Repeating a test</strong></p> 
 <p align="center"><img alt="Repeating a test" src="../images/web_test_tool_repeat.png"/></p> 
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
index 1b268e3..5b6bcb6 100644 (file)
 <p>The native applications use the Native API, which provides all of the memory management and performance benefits that come with building applications for Linux in C. The Native API is extremely helpful, as it includes dozens of API modules that cover a large range of capabilities. It provides numerous interfaces to much of the hardware that is found in modern mobile and wearable devices, and does so in an environment that is tailored for limited resources.</p></li>
 <li><a href="web/cover_page_w.htm">Web application</a> is essentially a Web site stored on your device and built using Web-native languages, such as HTML5, CSS, and JavaScript. The Web application uses the Tizen Web Framework to interact with the native subsystems.
 <p>The Web applications use the Web API, which is a standard Web application project structure with basic elements. The Web API is designed to allow you to easily build applications using Web-native languages.</p>
-<p>A program built using the Web API is laid out much like a standard Web site with an <span style="font-family: Courier New,Courier,monospace">index.html</span> file that serves as the root, and separate directories for resources, such as JavaScript, CSS, images, and sound resources. This approach makes Web application development in Tizen extremely intuitive for developers with a background in Web development, and makes it easy to quickly write simple applications using high-level languages.</p></li>
+<p>A program built using the Web API is laid out much like a standard Web site with an <code>index.html</code> file that serves as the root, and separate directories for resources, such as JavaScript, CSS, images, and sound resources. This approach makes Web application development in Tizen extremely intuitive for developers with a background in Web development, and makes it easy to quickly write simple applications using high-level languages.</p></li>
 </ul>
 <p>The following figure illustrates the Tizen architecture model supporting the 2 application types.</p>
-<p class="figure">Figure: Tizen architecture</p> 
+<p align="center"><strong>Figure: Tizen architecture</strong></p> 
 <p align="center"><img src="images/what_is_tizen_architecture.png" alt="Tizen architecture" /></p>
 
 <p>The Tizen platform also allows you to develop a hybrid application package where native and Web applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you use the native or Web framework to create them.</p>
 
 <p>Both mobile and wearable profiles are supported in native and Web application types. The TV profile is supported in the Web application type only.</p>
 
-<p class="figure">Figure: Applications using the mobile profile</p>
+<p align="center"><strong>Figure: Applications using the mobile profile</strong></p>
 <p align="center"><img src="images/profile_mobile.png" alt="Applications using the mobile profile" /></p>
   
- <p class="figure">Figure: Applications using the wearable profile</p>
+<p align="center"><strong>Figure: Applications using the wearable profile</strong></p>
 <p align="center"><img src="images/profile_wearable.png" alt="Applications using the wearable profile" /></p> 
 
 
 
 <p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. &quot;N&quot; in the icon stands for the native application profiles and &quot;W&quot; for the Web application profiles.</p>
 
+<p align="center" class="Table"><strong>Table: Tizen profiles</strong></p> 
 <table border="1"> 
-   <caption>
-     Table: Tizen profiles 
-   </caption> 
+  
    <tbody> 
     <tr> 
      <th>Profile</th> 
    </tbody> 
   </table>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">In Tizen native APIs and Web Device mobile and wearable APIs, there are 2 types of APIs: mandatory and optional. The fully gray profile icon (as shown in the table above) refers to an optional API.
-<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>     
+      <div class="note">
+        <strong>Note</strong>
+        In Tizen native APIs and Web Device mobile and wearable APIs, there are 2 types of APIs: mandatory and optional. The fully gray profile icon (as shown in the table above) refers to an optional API.
+<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices.</p>
+    </div>
+  
 
 <p>To become familiar with some terms that you encounter throughout this site, see <a href="https://developer.tizen.org/development/getting-started/glossary" target="_blank">Glossary</a>.</p>
   
index ad7ebcb..6611316 100644 (file)
@@ -10,18 +10,17 @@ body {
        font-family: Arial, Helvetica, sans-serif;\r
 }\r
 \r
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl, dd, footer {\r
        font-family: Arial, Verdana, Helvetica, sans-serif\r
        }\r
 \r
 /*     Set default font to 9 pt        */\r
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, pre, code {\r
        font-size: 9pt;\r
 }\r
        \r
 pre, code { \r
        font-family: "Courier New", Courier, monospace;\r
-       border: 1px solid #719cc7;\r
        margin: 6px 1.5px;\r
        padding: 1px 1px 1px 1px;\r
        font-weight: normal;\r
@@ -41,7 +40,7 @@ h1, h2, h3, h4, h5 {
        margin-top: 16pt;\r
 }\r
 \r
-caption, p.caption { \r
+caption { \r
        font-size: 9pt;\r
        color: #1C1C1C;\r
        font-weight: bold;\r
@@ -62,35 +61,6 @@ ul li, ol li {
        margin-bottom: 10px;\r
 }\r
 \r
-ol.tutorstep li {\r
-       border-top: 2px solid #719cc7;\r
-       list-style-position: inside;\r
-       font-weight: bold;\r
-       margin-top: 30px;\r
-       margin-left: -20px;\r
-       padding-top: 3px;\r
-       font-size: 12pt;\r
-}\r
-\r
-ol.tutorstep li p{\r
-       font-size: 9pt;\r
-       font-weight: normal;\r
-       margin-top: 10px;\r
-}\r
-\r
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
-       font-size: 9pt;\r
-       list-style-position: outside; \r
-       margin-left: 0px;\r
-       font-weight: normal;\r
-}\r
-\r
-ol.tutorstep ol li p, ol.tutorstep ul li p {\r
-       font-size: 9pt;\r
-       font-weight: normal; \r
-       margin-top: 5px;\r
-}\r
-\r
 ol li p, ul li p {\r
        font-size: 9pt;\r
        font-weight: normal;\r
@@ -98,7 +68,7 @@ ol li p, ul li p {
        margin-top: 2px;\r
 }\r
 \r
-ol ol , ol.tutorstep ol{\r
+ol ol {\r
        font-size: 9pt;\r
        font-weight: normal;\r
        list-style-type: lower-alpha;\r
@@ -107,12 +77,7 @@ ol ol , ol.tutorstep ol{
        margin-top: 10px; \r
 }\r
 \r
-ol.tutorstep ul {\r
-       margin-top: 10px;\r
-       font-size: 9pt;\r
-}\r
-\r
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+ol ol li, ol ul li {\r
        border-style: none;\r
        margin-top: 5px;\r
        font-size: 9pt;\r
@@ -153,69 +118,38 @@ td {
        vertical-align:top;\r
        padding: 3px 20px 5px 20px;\r
        }\r
-\r
-td.middle {\r
-       border: 1px solid #c6d9f1;\r
-       vertical-align:middle;\r
-       padding: 3px 20px 5px 20px;\r
-       }       \r
        \r
 /*     Notes stand out using a light top & bottom borders with yellow background       */\r
-table.note {\r
-       border-top: 2px solid #719cc7;\r
-       border-left: 0px;\r
-       border-right: 0px;\r
-       width: 100%;\r
-}\r
 \r
-tr.note {\r
-       text-align: left;\r
+div.note {\r
+    background-color: #eeece1;\r
+    border: medium none;\r
+    color: #1c1c1c;\r
+    margin-bottom: 12px;\r
+    margin-top: 12px;\r
+    padding: 5px;\r
 }\r
 \r
-th.note {\r
-       text-align: left;\r
-       background-color: #ddd9c3;\r
-       background-image: note.gif;\r
-       border-top: 2px solid #719cc7;\r
-       border-bottom:1px solid #719cc7;\r
-       border-right: none;\r
-\r
+div.note > strong:first-child {\r
+    background-color: #ddd9c3;\r
+    border-bottom: 1px solid #719cc7;\r
+    border-right: medium none;\r
+    border-top: 2px solid #719cc7;\r
+    text-align: left;\r
+    color: #719cc7;\r
+    font-size: 9pt;\r
+    font-weight: bold;\r
+       margin: -4px -4px 4px -4px;  \r
+       padding: 4px 0px 4px 4px;\r
+       display: block; \r
+       width: auto;\r
 }\r
 \r
-td.note, p.note {\r
-       background-color: #eeece1;\r
-       color: #1C1C1C;\r
-       padding: 5px;\r
-       margin-top:12px;\r
-       margin-bottom:12px;\r
-       border: none;\r
-}\r
-       \r
-/*     Figure titles are centered and bolded   */\r
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
-       text-align: center;\r
-       font-weight: bold;\r
+div.note * strong:after {\r
+       content: "\a ";\r
+    white-space: pre-line;\r
 }\r
 \r
-/*     Red background and white text for things that need fixing before release        */\r
-.fix   {\r
-       background-color: red;\r
-       font-weight: bold;\r
-       color: white;\r
-       }\r
-\r
-/* Classes for creating collapsible content */\r
-#banner {\r
-       padding: 8px 4px 8px 4px;\r
-       /* top right bottom left */\r
-       border: 1px solid #7f7f7f;\r
-       width: 100%;\r
-       background-image: url("banner.png");\r
-       text-align: left;\r
-       font-weight: bold;\r
-       font-size: 9pt;\r
-       color: #ffffff;\r
-}\r
 \r
 #toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
 #toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
@@ -258,12 +192,6 @@ ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 7
        ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }\r
        ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
 \r
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
-\r
-.static-cont {width:100%; margin-bottom:40px;}\r
        \r
 .top {text-align: right;}\r
 .toc, ul.toc{\r
@@ -308,7 +236,21 @@ a img {border: 0;}
 }\r
 \r
 .footer {font-size: 8pt;}\r
+\r
+p.Table {\r
+       text-align: center;\r
+       margin-top: 40px;\r
+       margin-bottom: -19px;\r
+       padding: 0;\r
+}\r
        \r
+p.Table strong {\r
+       font-family: Arial, Verdana, Helvetica, sans-serif;\r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+}\r
+\r
 caption { \r
        font-size: 9pt;\r
        color: #1C1C1C;\r
@@ -318,418 +260,24 @@ caption {
        margin-bottom: 0px;\r
 }\r
 \r
-div.qindex, div.navpath, div.navtab{\r
-       background-color: #e8eef2;\r
-       border: 1px solid #84b0c7;\r
-       text-align: center;\r
-       margin: 2px;\r
-       padding: 2px;\r
-}\r
-\r
-div.qindex, div.navpath {\r
-       width: 100%;\r
-       line-height: 140%;\r
-}\r
-\r
-div.navtab {\r
-       margin-right: 15px;\r
-}\r
-\r
-/* @group Link Styling */\r
-\r
-a:link {\r
-       color: #719cc7;\r
-       text-decoration: underline;\r
-       font-weight: bold;\r
-}\r
-\r
-a:hover { \r
-       color: #0e437d;\r
-}\r
-\r
-a:visited {\r
-       text-decoration: underline;\r
-       color: #719cc7;\r
-       font-weight: bold;\r
-}\r
-\r
-a.qindex {\r
-       font-weight: bold;\r
-       padding: 2px;\r
-}\r
-\r
-a.qindex:hover {\r
-       text-decoration: underline;\r
-       color: #0e437d;\r
-       padding: 2px;\r
-}\r
-\r
-a.qindex:visited {\r
-       text-decoration: underline;\r
-       font-weight: bold;\r
-       color: #719cc7;\r
-       padding: 2px;\r
-}\r
-\r
-a.qindexHL {\r
-       text-decoration: underline;\r
-       font-weight: bold;\r
-       background-color: #6666cc;\r
-       color: #ffffff;\r
-       padding: 2px 6px;\r
-       border: 1px double #9295C2;\r
-}\r
-\r
-a.qindexHL:hover {\r
-       text-decoration: none;\r
-       background-color: #6666cc;\r
-       color: #ffffff;\r
-       padding: 2px 6px;\r
-}\r
-\r
-dl.el { \r
-       margin-left: -1cm \r
-}\r
-\r
-.fragment {\r
-       font-family: monospace, fixed;\r
-       font-size: 105%;\r
-}\r
-\r
-pre.fragment {\r
-       border: 1px solid #CCCCCC;\r
-       background-color: #f5f5f5;\r
-       padding: 4px 6px;\r
-       margin: 4px 8px 4px 2px;\r
-}\r
-\r
-div.fragment {\r
-       border: 1px solid #CCCCCC;\r
-       background-color: #f5f5f5;\r
-       padding: 6px;\r
-}\r
-\r
-div.ah { \r
-       background-color: black; \r
-       font-weight: bold; \r
-       color: #ffffff; \r
-       margin-bottom: 3px; \r
-       margin-top: 3px \r
-}\r
-\r
-td.md { \r
-       background-color: #f5f5f5; \r
-       font-weight: bold; \r
-}\r
-\r
-td.mdname1 { \r
-       background-color: #f5f5f5; \r
-       font-weight: bold; \r
-       color: #602020; \r
-}\r
-\r
-td.mdname { \r
-       background-color: #f5f5f5; \r
-       font-weight: bold; \r
-       color: #602020; \r
-       width: 600px; \r
-}\r
-\r
-div.groupHeader {\r
-       margin-left: 16px;\r
-       margin-top: 12px;\r
-       margin-bottom: 6px;\r
-       font-weight: bold;\r
-}\r
-\r
-div.groupText { \r
-       margin-left: 16px; \r
-       font-style: italic; \r
-}\r
-\r
-td.indexkey {\r
-       background-color: #eeeeff;\r
-       font-weight: bold;\r
-       border: 1px solid #CCCCCC;\r
-       margin: 2px 0px 2px 0;\r
-       padding: 2px 10px;\r
-}\r
-\r
-td.indexvalue {\r
-       background-color: #eeeeff;\r
-       border: 1px solid #CCCCCC;\r
-       padding: 2px 10px;\r
-       margin: 2px 0px;\r
-}\r
-\r
-tr.memlist {\r
-   background-color: #f0f0f0; \r
-}\r
-\r
-p.formulaDsp { \r
-       text-align: center; \r
-}\r
-\r
-img.formulaDsp { \r
-}\r
-\r
-img.formulaInl { \r
-       vertical-align: middle; \r
-}\r
-\r
-/* @group Code Colorization */\r
-\r
-span.keyword       { color: #008000 }\r
-span.keywordtype   { color: #604020 }\r
-span.keywordflow   { color: #e08000 }\r
-span.comment       { color: #800000 }\r
-span.preprocessor  { color: #806020 }\r
-span.stringliteral { color: #002080 }\r
-span.charliteral   { color: #008080 }\r
-span.vhdldigit     { color: #ff00ff }\r
-span.vhdlchar      { color: #000000 }\r
-span.vhdlkeyword   { color: #700070 }\r
-span.vhdllogic     { color: #ff0000 }\r
-\r
-.mdTable {\r
-       border: 1px solid #868686;\r
-       background-color: #F4F4FB;\r
-}\r
-\r
-.mdRow {\r
-       padding: 8px 10px;\r
-}\r
-\r
-/* @group Member Descriptions */\r
-\r
-.mdescLeft, .mdescRight,\r
-.memItemLeft, .memItemRight,\r
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
-       background-color: #F4F4F4A;\r
-       border: none;\r
-       margin: 4px;\r
-       padding: 3px 8px 4px 8px;\r
-}\r
-\r
-.mdescLeft, .mdescRight {\r
-       padding: 0px 8px 4px 8px;\r
-       color: #555;\r
-}\r
-\r
-.memItemLeft, .memItemRight, .memTemplParams {\r
-       border-top: 1px solid #DBDBDB;\r
-}\r
-\r
-.memTemplParams {\r
-       color: #606060;\r
-}\r
-\r
 /* @end */\r
 \r
 /* @group Member Details */\r
 \r
 /* Styles for detailed member documentation */\r
 \r
-.memtemplate {\r
-       font-size: 80%;\r
-       color: #606060;\r
-       font-weight: normal;\r
-       margin-left: 3px;\r
-}\r
-\r
-.memnav {\r
-       background-color: #eeeeff;\r
-       border: 1px solid #84b0c7;\r
-       text-align: center;\r
-       margin: 2px;\r
-       margin-right: 15px;\r
-       padding: 2px;\r
-}\r
-\r
 .memitem {\r
        padding: 0;\r
 }\r
 \r
-.memname {\r
-       white-space: nowrap;\r
-       font-weight: bold;\r
-}\r
-\r
-.memproto, .memdoc {\r
-       border: 1px solid #9BBCDD;      \r
-}\r
-\r
-.memproto {\r
-       padding: 0;\r
-       background-color: #D5E2EF;\r
-       font-weight: bold;\r
-       -webkit-border-top-left-radius: 8px;\r
-       -webkit-border-top-right-radius: 8px;\r
-       -moz-border-radius-topleft: 8px;\r
-       -moz-border-radius-topright: 8px;\r
-}\r
-\r
-.memdoc {\r
-       padding: 2px 5px;\r
-       background-color: #eef3f5;\r
-       border-top-width: 0;\r
-       -webkit-border-bottom-left-radius: 8px;\r
-       -webkit-border-bottom-right-radius: 8px;\r
-       -moz-border-radius-bottomleft: 8px;\r
-       -moz-border-radius-bottomright: 8px;\r
-}\r
-\r
-.memdoc p, .memdoc dl, .memdoc ul {\r
-       margin: 6px 0;\r
-}\r
-\r
-.paramkey {\r
-       text-align: right;\r
-}\r
-\r
-.paramtype {\r
-       white-space: nowrap;\r
-}\r
-\r
-.paramname {\r
-       color: #853E0E;\r
-       white-space: nowrap;\r
-}\r
-.paramname em {\r
-       font-style: normal;\r
-}\r
-\r
 /* @end */\r
 \r
-.search     { color: #003399;\r
-              font-weight: bold;\r
-}\r
-\r
-form.search {\r
-              margin-bottom: 0px;\r
-              margin-top: 0px;\r
-}\r
-\r
-input.search { font-size: 75%;\r
-               color: #000080;\r
-               font-weight: normal;\r
-               background-color: #eeeeff;\r
-}\r
-\r
-td.tiny { \r
-       font-size: 75%;\r
-}\r
-\r
 .highlight {\r
-        background-color:#E2E2FF;\r
+       background-color:#E2E2FF;\r
 }\r
 \r
-/*---------- ide-eclipse Styles ---------*/\r
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
-       margin: 0px 0px;\r
-       padding: -30px -30px -30px -30px;\r
-       font-weight: normal;\r
-       font-style: normal;}\r
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
-\r
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
-\r
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
-.sh_styleFromXML{color:#800000;font-weight:bold;}\r
-/*-------------------------------------------------------*/\r
-\r
-/*-------- Snippet Base Styles ----------*/\r
-.snippet-wrap {position:relative;}\r
-*:first-child+html .snippet-wrap {display:inline-block;}\r
-* html .snippet-wrap {display:inline-block;}\r
-.snippet-reveal{text-decoration:underline;}\r
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
-* html .snippet-wrap .snippet-hide {bottom:1px;}\r
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
--moz-border-radius:0px;\r
--webkit-border-radius:0px;\r
-border-radius:0px;\r
-box-shadow: 1px 1px px #000;\r
--moz-box-shadow: 2px 2px 1px #000;\r
--webkit-box-shadow: 1px 1px 1px #000;}\r
-.snippet-wrap pre.snippet-textonly {padding:1em;}\r
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
-.snippet-wrap .snippet-num li{padding-left:2px;}\r
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
-.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
-\r
-/* Layout fixing */\r
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
-.clfix {display: inline-block;}\r
-.clfix {display: block;}\r
-* html .clfix {height: 1%;} /* Hides from IE-mac */\r
-.clfix {zoom:1;} /*for IE 5.5-7*/\r
-\r
-.fl {float:left !important;}\r
-.fr {float:right !important;}\r
-.cl {clear:both;}\r
-.rel {position:relative;}\r
-.abs {position:absolute;}\r
-.ac {text-align:center !important;}\r
-.ar {text-align:right !important;}\r
-.al {text-align:left !important;}\r
-.at {vertical-align:top !important;}\r
-.am {vertical-align:middle !important;}\r
-.ab {vertical-align:bottom;}\r
-.hand {cursor:pointer;}\r
-.bgnone {background:none !important;}\r
-.brnone {border:none !important;}\r
-.b {font-weight:bold !important;}\r
-.n {font-weight:normal !important;}\r
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
-.mt5 {margin-top:5px !important;} \r
 /* //Layout fixing */\r
 \r
-@media print { .hide, .show { display: none; }}\r
-\r
 div#profile {\r
     position: relative;\r
 }\r
@@ -750,7 +298,3 @@ div#toc_border {
 p {\r
        /* overflow: auto; */\r
 }\r
-\r
-div.table {\r
-       /* overflow: auto; */\r
-}
\ No newline at end of file
index 3b7b5c5..e4dacbe 100644 (file)
Binary files a/org.tizen.training/html/images/graphics_project_create.png and b/org.tizen.training/html/images/graphics_project_create.png differ
index 14b5979..3cee27f 100644 (file)
@@ -48,7 +48,7 @@
 
 <p>The following figure shows the UI and service application life-cycle.</p>
 
-  <p class="figure">Figure: UI and service application life-cycle</p> 
+  <p align="center"><strong>Figure: UI and service application life-cycle</strong></p> 
   <p align="center"><img src="../../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
 
 <p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices. 
@@ -57,8 +57,8 @@ These devices have constraints, such as relatively small screen sizes and lack o
 
 <h2 id="life" name="life">Native Application Life-cycle</h2>   
 
-<p>A Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. When the application is starting, the <span style="font-family: Courier New,Courier,monospace;">app_create_cb()</span> function is executed and the main event loop starts. The application normally at the top window, with focus.</p> 
-<p>When the application loses the focus status, the <span style="font-family: Courier New,Courier,monospace;">app_pause_cb()</span> callback is invoked. The application can go into the pause state, which means that your application is not terminated but continues to run on the background, when:</p>
+<p>A Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. When the application is starting, the <code>app_create_cb()</code> function is executed and the main event loop starts. The application normally at the top window, with focus.</p> 
+<p>When the application loses the focus status, the <code>app_pause_cb()</code> callback is invoked. The application can go into the pause state, which means that your application is not terminated but continues to run on the background, when:</p>
        
   <ul>
     <li><p>A new application is launched based on a request from your application.</p></li>
@@ -69,7 +69,7 @@ These devices have constraints, such as relatively small screen sizes and lack o
 
 <p>Since Tizen 2.4, the application on the background goes into a suspended state. In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can <a href="../../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>  
   
-<p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace;">app_resume_cb()</span> callback is invoked. The visibility returns, when:</p>
+<p>When your application becomes visible again, the <code>app_resume_cb()</code> callback is invoked. The visibility returns, when:</p>
 
   <ul>
     <li><p>Another application requests your application to run (for example, the Task Navigator, which shows all running applications and lets user select any application to run).</p></li> 
@@ -77,9 +77,9 @@ These devices have constraints, such as relatively small screen sizes and lack o
     <li><p>An alarm is triggered for your application, bringing it to the front and hiding other applications.</p></li>
   </ul>
 
-<p>When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace;">app_terminate_cb()</span> callback is invoked. Your application can start the termination process, when:</p>
+<p>When your application starts exiting, the <code>app_terminate_cb()</code> callback is invoked. Your application can start the termination process, when:</p>
   <ul>
-    <li><p>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace;">ui_app_exit()</span> or <span style="font-family: Courier New,Courier,monospace;">service_app_exit()</span> function to terminate the event loop.</p></li>
+    <li><p>Your application itself requests to exit by calling the <code>ui_app_exit()</code> or <code>service_app_exit()</code> function to terminate the event loop.</p></li>
     <li><p>The low memory killer is terminating your application in a low memory situation.</p></li>
   </ul>
 
@@ -99,21 +99,21 @@ These devices have constraints, such as relatively small screen sizes and lack o
 <p>When developing a Tizen application, you must define a package and application ID:</p>
 <ul>
 <li>Package ID
-<p>The package ID, such as <span style="font-family: Courier New,Courier,monospace;">org.tizen.message</span> or <span style="font-family: Courier New,Courier,monospace;">org.tizen.call</span>, is the application package identifier.</p>
+<p>The package ID, such as <code>org.tizen.message</code> or <code>org.tizen.call</code>, is the application package identifier.</p>
 
 <p>The package ID functions as a unit for package installation, uninstallation, and upgrades. It is also the unit of the application package DRM, sandboxing, and privilege.</p></li>
 
 <li>Application ID
-<p>The application ID (<span style="font-family: Courier New,Courier,monospace;">appid</span>) is the application identifier. Multiple applications are allowed in a package and the application ID is used to identify the different applications.</p>
+<p>The application ID (<code>appid</code>) is the application identifier. Multiple applications are allowed in a package and the application ID is used to identify the different applications.</p>
 
-<p>The application ID must be the same as the package ID if the package contains a single application. If <a href="../process/app_dev_process_n.htm#develop">the package contains multiple applications</a>, the application ID must be assigned with the package ID as a prefix. For example, if the <span style="font-family: Courier New,Courier,monospace;">org.tizen.message</span> package contains 2 applications, the main application is named as <span style="font-family: Courier New,Courier,monospace;">org.tizen.message</span>, and the second application is named as <span style="font-family: Courier New,Courier,monospace;">org.tizen.message.app2</span>.</p>
+<p>The application ID must be the same as the package ID if the package contains a single application. If <a href="../process/app_dev_process_n.htm#develop">the package contains multiple applications</a>, the application ID must be assigned with the package ID as a prefix. For example, if the <code>org.tizen.message</code> package contains 2 applications, the main application is named as <code>org.tizen.message</code>, and the second application is named as <code>org.tizen.message.app2</code>.</p>
 <p>The application ID functions as a unit for launching and terminating applications, and for App Control.</p>
 </li>
 </ul>
 
 <p>The following figure shows how to use the package and application ID.</p>
 
-    <p class="figure">Figure: Package ID and application ID</p> 
+    <p align="center"><strong>Figure: Package ID and application ID</strong></p> 
   <p align="center"><img src="../../images/package_id.png" alt="Package ID and application ID" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
   
 
@@ -121,28 +121,28 @@ These devices have constraints, such as relatively small screen sizes and lack o
 
 <p>The following list shows the directory hierarchy:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace;">bin</span>: Executable binary path</li>
-<li><span style="font-family: Courier New,Courier,monospace;">lib</span>: Library path</li>
-<li><span style="font-family: Courier New,Courier,monospace;">res</span>: Resource path</li>
-<li><span style="font-family: Courier New,Courier,monospace;">data</span>: The application&#39;s own directory (read or write); no initial data</li>
-<li><span style="font-family: Courier New,Courier,monospace;">shared/</span>: For sharing with other applications
-<p>Sandboxing refers to an application package which can access its own directories only. It is used to share resources in the <span style="font-family: Courier New,Courier,monospace;">shared</span> directories.</p>
+<li><code>bin</code>: Executable binary path</li>
+<li><code>lib</code>: Library path</li>
+<li><code>res</code>: Resource path</li>
+<li><code>data</code>: The application&#39;s own directory (read or write); no initial data</li>
+<li><code>shared/</code>: For sharing with other applications
+<p>Sandboxing refers to an application package which can access its own directories only. It is used to share resources in the <code>shared</code> directories.</p>
 <p>In sandboxing, <a href="#installer">SMACK</a> is used, and discretionary access control (DAC) is applied to application package directories and files. The 
 uid(root, app) is applied to directories and files.</p></li>
 </ul>
 
-<p>The <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file and signature files are located in the application root directory.</p>
+<p>The <code>tizen-manifest.xml</code> file and signature files are located in the application root directory.</p>
 
 <h3>Permissions</h3>
 <p>The installed packages have a user ID, a group ID, permissions, and a smack label.</p>
 
-  <p class="figure">Figure: Permissions</p> 
+  <p align="center"><strong>Figure: Permissions</strong></p> 
   <p align="center"><img src="../../images/permissions.png" alt="Permissions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
 
 <p>The following table shows the details of files and directories.</p>
-  
+
+  <p align="center" class="Table"><strong>Table: Package data</strong></p>
 <table>
-<caption>Table: Package data</caption>
 <tbody>
 <tr>
  <th>Name</th>
@@ -152,66 +152,66 @@ uid(root, app) is applied to directories and files.</p></li>
  <th>Smack label</th>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bin</span></td>
+ <td><code>bin</code></td>
  <td rowspan="8">Directory</td>
  <td>root:root</td>
  <td rowspan="13">rwxr-xr-x</td>
  <td rowspan="4">{PackageId}<sup>1</sup></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">data</span></td>
+ <td><code>data</code></td>
  <td>app:app</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lib</span></td>
+ <td><code>lib</code></td>
  <td rowspan="3">root:root</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">res</span></td>
+ <td><code>res</code></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared</span></td>
+ <td><code>shared</code></td>
  <td>_</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared/data</span></td>
+ <td><code>shared/data</code></td>
  <td>app:app</td>
  <td>{Random}<sup>2</sup>, transmute</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared/res</span></td>
+ <td><code>shared/res</code></td>
  <td>root:root</td>
  <td>_</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared/trusted</span></td>
+ <td><code>shared/trusted</code></td>
  <td>app:app</td>
  <td>{Cert Hash}<sup>3</sup>, transmute</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">author-signature.xml</span></td>
+ <td><code>author-signature.xml</code></td>
  <td rowspan="5">File</td>
  <td rowspan="5">root:root</td>
  <td rowspan="5">{PackageId}</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">signature1.xml</span></td>
+ <td><code>signature1.xml</code></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">signature2.xml</span></td>
+ <td><code>signature2.xml</code></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">signatureN.xml</span></td>
+ <td><code>signatureN.xml</code></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span></td>
+ <td><code>tizen-manifest.xml</code></td>
 </tr>
 </tbody>
 </table>
 
-<p><sup>1</sup> The {PackageId} is the package ID, such as <span style="font-family: Courier New,Courier,monospace;">org.tizen.browser</span>.</p>
+<p><sup>1</sup> The {PackageId} is the package ID, such as <code>org.tizen.browser</code>.</p>
 <p><sup>2</sup> {Random} means that there is a 28-byte random string created by the smack module.</p>
-<p><sup>3</sup> {Cert Hash} refers to a 28-byte string where [Raw Hash] equals to Base64Encode (SHA1 author certificate in <span style="font-family: Courier New,Courier,monospace;">author-signature.xml</span>) and {Cert Hash} replaces &quot;/&quot; with &quot;#&quot; in [Raw Hash].</p>
+<p><sup>3</sup> {Cert Hash} refers to a 28-byte string where [Raw Hash] equals to Base64Encode (SHA1 author certificate in <code>author-signature.xml</code>) and {Cert Hash} replaces &quot;/&quot; with &quot;#&quot; in [Raw Hash].</p>
 
 
 <h2  id="appmanifest" name="appmanifest">Application Manifest</h2>
@@ -228,7 +228,7 @@ uid(root, app) is applied to directories and files.</p></li>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;xs:element ref=&quot;packages:label&quot;/&gt;
 </pre>
 
-<p>The following example shows the syntax of the manifest reference. The <span style="font-family: Courier New,Courier,monospace;">&lt;manifest&gt;</span> element serves as a container for the other configuration elements.</p>
+<p>The following example shows the syntax of the manifest reference. The <code>&lt;manifest&gt;</code> element serves as a container for the other configuration elements.</p>
 <pre class="prettyprint">
 &lt;manifest xmlns=http://tizen.org/ns/packages
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;org.tizen.application&quot;
@@ -250,7 +250,7 @@ uid(root, app) is applied to directories and files.</p></li>
 <p>The following image describes the relationship between the signatures.</p>
 
 
-  <p class="figure">Figure: Signature</p> 
+  <p align="center"><strong>Figure: Signature</strong></p> 
   <p align="center"><img src="../../images/signature.png" alt="Signature" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
 
   
@@ -258,10 +258,10 @@ uid(root, app) is applied to directories and files.</p></li>
 
 <p>The following figure describes how the application installer works.</p>
 
-  <p class="figure">Figure: Installer</p> 
+  <p align="center"><strong>Figure: Installer</strong></p> 
   <p align="center"><img src="../../images/installer.png" alt="Installer" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
 
-  <p>The installer applies smack according to the privileges that are specified in the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</p>
+  <p>The installer applies smack according to the privileges that are specified in the <code>tizen-manifest.xml</code> file.</p>
 <p>An application can only access the resources that are allowed by the privileges. The privileges are used in Tizen Store to show the permissions and receive user consent.</p>
 
 
@@ -270,7 +270,7 @@ uid(root, app) is applied to directories and files.</p></li>
 
 <p>You can use shell commands to install, uninstall, update, and launch applications.</p>
 
-  <p class="figure">Figure: Tizen Studio interactions</p> 
+  <p align="center"><strong>Figure: Tizen Studio interactions</strong></p> 
   <p align="center"><img src="../../images/ide_interactions.png" alt="Tizen Studio interactions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
  
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index df06923..84ed428 100644 (file)
   <p>Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:</p>
 <ul>
 <li>When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround.
-<p>For example, if an application wants to use location information, it can check the device capability by using the <span style="font-family: Courier New,Courier,monospace">system_info_get_XXX()</span> function of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
+<p>For example, if an application wants to use location information, it can check the device capability by using the <code>system_info_get_XXX()</code> function of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
 </li>
 <li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user&#39;s device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
 <p>Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.</p></li>
 </ul>
  
-<p>If the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
+<p>If the <code>tizen-manifest.xml</code> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
 
-  <p class="figure">Figure: Feature-based filtering</p> 
+  <p align="center"><strong>Figure: Feature-based filtering</strong></p> 
   <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p> 
  
-<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the &quot;AND&quot; operation. For example, if there are <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
+<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the &quot;AND&quot; operation. For example, if there are <code>http://tizen.org/feature/network.nfc</code> and <code>http://tizen.org/feature/network.bluetooth</code> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
 
 <h3 id="screen_size" name="screen_size">Screen Size Feature</h3>
-<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the &quot;OR&quot; operation. For example, if the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
- <p>If you do not specify a proper screen size in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file, your application can be rejected from the Tizen store.</p>
+<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the &quot;OR&quot; operation. For example, if the <code>http://tizen.org/feature/screen.size.normal.480.800</code> and <code>http://tizen.org/feature/screen.size.normal.720.1280</code> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
+ <p>If you do not specify a proper screen size in the <code>tizen-manifest.xml</code> file, your application can be rejected from the Tizen store.</p>
  <p>The following table lists the available screen size features. </p>
+ <p align="center" class="Table"><strong>Table: Available screen size features</strong></p>
  <table>
-       <caption>Table: Available screen size features</caption>
        <tbody>
        <tr>
                        <th>Feature key</th>
                        <th>Since</th>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal</code></td>
                        <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
-                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <code>http://tizen.org/feature/screen.size.normal</code> and <code>http://tizen.org/feature/screen.size.normal.320.480</code> keys, only the <code>http://tizen.org/feature/screen.size.normal.320.480</code> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
+                       <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
                        <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.2.1</td>
                </tr>   
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
                        <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.3</td>
                </tr>           
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
                        <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.360</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.360.360</code></td>
                        <td>Specify this key, if the application supports the 360 x 360 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3.2</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td>
                        <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3</td>
                </tr>           
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
                        <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td>
                        <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td>
                        <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td>
                        <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td>
                        <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.all</code></td>
                        <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
-                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <code>http://tizen.org/feature/screen.size.all</code> and <code>http://tizen.org/feature/screen.size.normal.320.480</code> keys, only the <code>http://tizen.org/feature/screen.size.normal.320.480</code> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
        </tbody>
   
 <h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>  
 
-<p>The feature keys have a hierarchy. For example, consider the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features:</p>
+<p>The feature keys have a hierarchy. For example, consider the <code>http://tizen.org/feature/location</code>, <code>http://tizen.org/feature/location.gps</code>, and <code>http://tizen.org/feature/location.wps</code> features:</p>
 <ul>
-<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature, only a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature can show the application on the Tizen Store application list.</li>
-<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature, a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span>, or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature can show the application on the Tizen Store application list.
-<p>This means that the Tizen Store considers the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature as the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</span> feature. (If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features together, only a device which supports both those features can show the application.)</p></li></ul>
+<li>If the feature list includes the <code>http://tizen.org/feature/location.gps</code> feature, only a device which has the <code>http://tizen.org/feature/location.gps</code> feature can show the application on the Tizen Store application list.</li>
+<li>If the feature list includes the <code>http://tizen.org/feature/location</code> feature, a device which has the <code>http://tizen.org/feature/location.gps</code>, <code>http://tizen.org/feature/location.wps</code>, or <code>http://tizen.org/feature/location</code> feature can show the application on the Tizen Store application list.
+<p>This means that the Tizen Store considers the <code>http://tizen.org/feature/location</code> feature as the <code>http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</code> feature. (If the feature list includes the <code>http://tizen.org/feature/location.gps</code> and <code>http://tizen.org/feature/location.wps</code> features together, only a device which supports both those features can show the application.)</p></li></ul>
 
 <h3 id="adding" name="adding">Adding the Feature List</h3> 
  
-<p>To enable filtering for your native application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:</p> 
+<p>To enable filtering for your native application, add the feature list for the application <code>tizen-manifest.xml</code> file:</p> 
   <ol>
-  <li>To open the manifest editor in the Tizen Studio, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view. </li>
-<li>In the <strong>Features</strong> tab, click <strong>Add</strong> and set the mandatory features for the application package. <p>The manifest file (<span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>) is updated automatically.</p>
+  <li>To open the manifest editor in the Tizen Studio, double-click the <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view. </li>
+<li>In the <strong>Features</strong> tab, click <strong>Add</strong> and set the mandatory features for the application package. <p>The manifest file (<code>tizen-manifest.xml</code>) is updated automatically.</p>
 </li> 
    <li>Upload and publish the application package on the Tizen Store.</li> 
    <li>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user&#39;s device.</li> 
   </ol>
 <p>The following tables show the available requirements for an application package. If you want to check which features are necessary for using a specific API, see the related feature in the native <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p> 
+  <p align="center" class="Table"><strong>Table: Available mobile native requirements</strong></p>
   <table border="1">
-<caption>
-     Table: Available mobile native requirements 
-   </caption> 
    <tbody>
 <tr>
 <th>Feature key</th> 
         <th>Since</th>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td> 
+<td><code>http://tizen.org/feature/camera</code></td> 
      <td>Specify this key, if the application requires any kind of a camera.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td> 
+<td><code>http://tizen.org/feature/camera.back</code></td> 
      <td>Specify this key, if the application requires a back-facing camera.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td> 
+<td><code>http://tizen.org/feature/camera.back.flash</code></td> 
      <td>Specify this key, if the application requires a back-facing camera with a flash.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td> 
+<td><code>http://tizen.org/feature/camera.front</code></td> 
      <td>Specify this key, if the application requires a front-facing camera.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td> 
+<td><code>http://tizen.org/feature/camera.front.flash</code></td> 
      <td>Specify this key, if the application requires a front-facing camera with a flash.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/consumer_ir</span></td> 
+<td><code>http://tizen.org/feature/consumer_ir</code></td> 
      <td>Specify this key, if the application requires the Consumer Infrared (CIR) feature.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/convergence.d2d</span></td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
      <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td> 
+<td><code>http://tizen.org/feature/database.encryption</code></td> 
      <td>Specify this key, if the application requires the database encryption feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fido.uaf</span></td> 
+<td><code>http://tizen.org/feature/fido.uaf</code></td> 
      <td>Specify this key, if the application requires the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td> 
         <td>3.0</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td> 
+<td><code>http://tizen.org/feature/fmradio</code></td> 
      <td>Specify this key, if the application requires an FM radio.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td> 
+<td><code>http://tizen.org/feature/graphics.acceleration</code></td> 
      <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td> 
+<td><code>http://tizen.org/feature/input.keyboard</code></td> 
      <td>Specify this key, if the application requires a built-in physical keyboard.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td> 
-     <td>Specify this key with a specific keyboard layout (<span style="font-family: Courier New,Courier,monospace">string</span> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
+<td><code>http://tizen.org/feature/input.keyboard.layout</code></td> 
+     <td>Specify this key with a specific keyboard layout (<code>string</code> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
         <td>2.2.1</td>
     </tr>
  <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/iot.ocf</span></td>
+<td><code>http://tizen.org/feature/iot.ocf</code></td>
      <td>Specify this key, if the application requires the Open Connectivity Foundation (OCF) framework.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td> 
+<td><code>http://tizen.org/feature/led</code></td> 
      <td>Specify this key, if the application requires a LED.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td> 
+<td><code>http://tizen.org/feature/location</code></td> 
      <td>Specify this key, if the application requires any location positioning features.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td> 
+<td><code>http://tizen.org/feature/location.batch</code></td> 
      <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
        <td>2.3</td>     
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.geofence</span></td> 
+<td><code>http://tizen.org/feature/location.geofence</code></td> 
      <td>Specify this key, if the application requires the geofence feature.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td> 
+<td><code>http://tizen.org/feature/location.gps</code></td> 
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td> 
+<td><code>http://tizen.org/feature/location.wps</code></td> 
      <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/maps</span></td> 
+<td><code>http://tizen.org/feature/maps</code></td> 
      <td>Specify this key, if the application requires the map service feature.</td> 
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td> 
+<td><code>http://tizen.org/feature/microphone</code></td> 
      <td>Specify this key, if the application requires a microphone.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td> 
+<td><code>http://tizen.org/feature/multimedia.transcoder</code></td> 
      <td>Specify this key, if the application requires the multimedia transcoder feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td> 
+<td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td> 
      <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td> 
         <td>2.2.1</td>
     </tr>
        <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td> 
-     <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
+<td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td> 
+     <td>Specify this key with a specific number (<code>int</code> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth</code></td> 
      <td>Specify this key, if the application requires the Bluetooth feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.call</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.controller</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.controller</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.health</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.hid</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.le</code></td> 
      <td>Specify this key, if the application requires the Bluetooth LE feature.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.opp</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.ethernet</span></td> 
+<td><code>http://tizen.org/feature/network.ethernet</code></td> 
      <td>Specify this key, if the application requires the ethernet connection.</td> 
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.mtp</span></td>
+<td><code>http://tizen.org/feature/network.mtp</code></td>
      <td>Specify this key, if the application requires the Media Transfer Protocol (MTP) Host (Initiator) feature.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.net_proxy</span></td>
+<td><code>http://tizen.org/feature/network.net_proxy</code></td>
      <td>Specify this key, if the application requires the net-proxy feature for the Internet connection. A net-proxy feature for a device acts as an intermediary between client (network service customer) and server (network service provider).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td> 
+<td><code>http://tizen.org/feature/network.nfc</code></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td> 
      <td>Specify this key, if the application requires the NFC card emulation feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+<td><code>http://tizen.org/feature/network.nfc.card_emulation.hce</code></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
         <td>2.3.1</td>
     </tr>              
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.p2p</code></td> 
      <td>Specify this key, if the application requires the NFC p2p feature.</td> 
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td> 
      <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>        
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.tag</code></td> 
      <td>Specify this key, if the application requires the NFC tag feature.</td> 
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td> 
+<td><code>http://tizen.org/feature/network.push</code></td> 
      <td>Specify this key, if the application requires the network-based push service.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td> 
+<td><code>http://tizen.org/feature/network.secure_element</code></td> 
      <td>Specify this key, if the application requires the secure element feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td> 
+<td><code>http://tizen.org/feature/network.secure_element.ese</code></td> 
      <td>Specify this key, if the application requires the ESE secure element feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td> 
+<td><code>http://tizen.org/feature/network.secure_element.uicc</code></td> 
      <td>Specify this key, if the application requires the UICC secure element feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.service_discovery.dnssd</span></td> 
+<td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td> 
      <td>Specify this key, if the application requires the DNS-based Service Discovery Feature (DNSSD).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.service_discovery.ssdp</span></td> 
+<td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td> 
      <td>Specify this key, if the application requires the Simple Service Discovery Protocol feature (SSDP).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td> 
+<td><code>http://tizen.org/feature/network.telephony</code></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.mms</code></td> 
      <td>Specify this key, if the application requires the MMS feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
      <td>Specify this key, if the application requires the SMS feature.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms.cbs</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td> 
      <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td> 
         <td>2.2.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span></td>
+<td><code>http://tizen.org/feature/network.tethering</code></td>
      <td>Specify this key, if the application requires any kind of tethering feature.</td>
         <td>2.3</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.bluetooth</span></td>
+<td><code>http://tizen.org/feature/network.tethering.bluetooth</code></td>
      <td>Specify this key, if the application requires the tethering over Bluetooth feature.</td>
         <td>2.3</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.usb</span></td>
+<td><code>http://tizen.org/feature/network.tethering.usb</code></td>
      <td>Specify this key, if the application requires the tethering over USB connection feature.</td>
         <td>2.3</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.wifi</span></td>
+<td><code>http://tizen.org/feature/network.tethering.wifi</code></td>
      <td>Specify this key, if the application requires the tethering over Wi-Fi feature.</td>
         <td>2.3</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.vpn</span></td> 
+<td><code>http://tizen.org/feature/network.vpn</code></td> 
      <td>Specify this key, if the application requires the Virtual Private Network feature (VPN).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td> 
+<td><code>http://tizen.org/feature/network.wifi</code></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td> 
+<td><code>http://tizen.org/feature/network.wifi.direct</code></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></td> 
+<td><code>http://tizen.org/feature/network.wifi.direct.display</code></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; display feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></td> 
+<td><code>http://tizen.org/feature/network.wifi.direct.service_discovery</code></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; service discovery feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.tdls</span></td> 
+<td><code>http://tizen.org/feature/network.wifi.tdls</code></td> 
      <td>Specify this key, if the application requires the Wi-Fi Tunneled Direct Link Setup (TDLS).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td> 
      <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td> 
      <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td> 
      <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td> 
      <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td> 
      <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td>
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td> 
      <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td> 
+<td><code>http://tizen.org/feature/opengles.version.1_1</code></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 1.1 at minimum.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
        </td> 
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td> 
+<td><code>http://tizen.org/feature/opengles.version.2_0</code></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 2.0.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
        </td> 
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.3_0</span></td>
+<td><code>http://tizen.org/feature/opengles.version.3_0</code></td>
      <td>Specify this key, if the application requires OpenGL&reg; ES version 3.0.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
        </td>
        <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td> 
      <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td> 
      <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td> 
      <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td> 
      <td>Specify this key, if the application requires the SSE3 FPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td> 
      <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td> 
      <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.osp_compatible</span></td> 
+<td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td> 
      <td>Specify this key, if the application requires OSP compatibility (the bada compatibility mode).</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td> 
+<td><code>http://tizen.org/feature/screen.auto_rotation</code></td> 
      <td>Specify this key, if the application requires the automatic screen rotation feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td> 
+<td><code>http://tizen.org/feature/screen.size.all</code></td> 
      <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td> 
         <td>2.2.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal</code></td> 
      <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
      <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td> 
      <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td> 
      <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
         <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.360</span></td>
+<td><code>http://tizen.org/feature/screen.size.normal.360.360</code></td>
      <td>Specify this key, if the application supports the 360 x 360 resolution on the normal screen size.</td>
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td> 
      <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td> 
      <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td> 
      <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td> 
      <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td> 
      <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td> 
      <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer</code></td> 
      <td>Specify this key, if the application requires an acceleration sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td> 
+<td><code>http://tizen.org/feature/sensor.activity_recognition</code></td> 
      <td>Specify this key, if the application requires an activity recognition sensor.</td>
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.barometer</code></td> 
      <td>Specify this key, if the application requires a barometer sensor.</td>
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.geomagnetic_rotation_vector</span></td> 
+<td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td> 
      <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td> 
+<td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td> 
      <td>Specify this key, if the application requires a gesture recognition sensor.</td>
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td> 
+<td><code>http://tizen.org/feature/sensor.gravity</code></td> 
      <td>Specify this key, if the application requires a gravity sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope</code></td> 
      <td>Specify this key, if the application requires a gyro sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td> 
      <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td> 
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.uncalibrated</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td> 
      <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td> 
      <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td> 
      <td>Specify this key, if the application requires a heart rate monitor sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_green</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
      <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
      <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>
        <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_red</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
      <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td> 
+<td><code>http://tizen.org/feature/sensor.humidity</code></td> 
      <td>Specify this key, if the application requires a humidity sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td> 
+<td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td> 
      <td>Specify this key, if the application requires a linear acceleration sensor.</td>
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer</code></td> 
      <td>Specify this key, if the application requires a magnetic sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.uncalibrated</span></td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td> 
      <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.pedometer</code></td> 
      <td>Specify this key, if the application requires a pedometer sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.photometer</code></td> 
      <td>Specify this key, if the application requires a photometer sensor.</td>
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td> 
+<td><code>http://tizen.org/feature/sensor.proximity</code></td> 
      <td>Specify this key, if the application requires a proximity sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td> 
      <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td> 
+<td><code>http://tizen.org/feature/sensor.rotation_vector</code></td> 
      <td>Specify this key, if the application requires a rotation vector sensor.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.sleep_monitor</span></td>
+<td><code>http://tizen.org/feature/sensor.sleep_monitor</code></td>
      <td>Specify this key, if the application requires a sleep monitor sensor which tracks the human sleep state or a sleep detector sensor which detects whether the human falls asleep or wakes up.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.stress_monitor</span></td>
+<td><code>http://tizen.org/feature/sensor.stress_monitor</code></td>
      <td>Specify this key, if the application requires a stress monitor sensor which tracks the human stress level.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td> 
+<td><code>http://tizen.org/feature/sensor.temperature</code></td> 
      <td>Specify this key, if the application requires a temperature sensor.</td>
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td> 
+<td><code>http://tizen.org/feature/sensor.tiltmeter</code></td> 
      <td>Specify this key, if the application requires a tilt sensor.</td>
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td> 
      <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td> 
+<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td> 
      <td>Specify this key, if the application requires a ultraviolet sensor.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td> 
+<td><code>http://tizen.org/feature/sensor.wrist_up</code></td> 
      <td>Specify this key, if the application requires a wrist up sensor.</td>
         <td>2.3</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
      <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td> 
+<td><code>http://tizen.org/feature/sip.voip</code></td> 
      <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.control</span></td> 
+<td><code>http://tizen.org/feature/speech.control</code></td> 
      <td>Specify this key, if the application requires the voice control feature.</td>
        <td>2.4</td>     
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</span></td> 
+<td><code>http://tizen.org/feature/speech.recognition</code></td> 
      <td>Specify this key, if the application requires the speech recognition (STT) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td> 
+<td><code>http://tizen.org/feature/speech.synthesis</code></td> 
      <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory</span></td> 
+<td><code>http://tizen.org/feature/usb.accessory</code></td> 
      <td>Specify this key, if the application requires the USB client (or accessory) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td> 
+<td><code>http://tizen.org/feature/usb.host</code></td> 
      <td>Specify this key, if the application requires the USB host feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_detection</span></td> 
+<td><code>http://tizen.org/feature/vision.barcode_detection</code></td> 
      <td>Specify this key, if the application requires the barcode detection feature.</td> 
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_generation</span></td> 
+<td><code>http://tizen.org/feature/vision.barcode_generation</code></td> 
      <td>Specify this key, if the application requires the barcode generation feature.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td> 
+<td><code>http://tizen.org/feature/vision.face_recognition</code></td> 
      <td>Specify this key, if the application requires the face recognition feature.</td>
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td> 
+<td><code>http://tizen.org/feature/vision.image_recognition</code></td> 
      <td>Specify this key, if the application requires the image recognition feature.</td>
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td> 
+<td><code>http://tizen.org/feature/vision.qrcode_generation</code></td> 
      <td>Specify this key, if the application requires the QR code generation feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td> 
+<td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td> 
      <td>Specify this key, if the application requires the QR code recognition feature.</td> 
         <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Available wearable native requirements</strong></p>
 <table border="1">
-<caption>
-     Table: Available wearable native requirements 
-   </caption> 
    <tbody>
 <tr>
 <th>Feature key</th> 
         <th>Since</th>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td> 
+<td><code>http://tizen.org/feature/camera</code></td> 
      <td>Specify this key, if the application requires any kind of a camera.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td> 
+<td><code>http://tizen.org/feature/camera.back</code></td> 
      <td>Specify this key, if the application requires a back-facing camera.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td> 
+<td><code>http://tizen.org/feature/camera.back.flash</code></td> 
      <td>Specify this key, if the application requires a back-facing camera with a flash.</td>
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td> 
+<td><code>http://tizen.org/feature/camera.front</code></td> 
      <td>Specify this key, if the application requires a front-facing camera.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td> 
+<td><code>http://tizen.org/feature/camera.front.flash</code></td> 
      <td>Specify this key, if the application requires a front-facing camera with a flash.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/consumer_ir</span></td> 
+<td><code>http://tizen.org/feature/consumer_ir</code></td> 
      <td>Specify this key, if the application requires the Consumer Infrared (CIR) feature.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/convergence.d2d</span></td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
      <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td> 
+<td><code>http://tizen.org/feature/database.encryption</code></td> 
      <td>Specify this key, if the application requires the database encryption feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fido.uaf</span></td> 
+<td><code>http://tizen.org/feature/fido.uaf</code></td> 
      <td>Specify this key, if the application requires the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td> 
+<td><code>http://tizen.org/feature/fmradio</code></td> 
      <td>Specify this key, if the application requires an FM radio.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td> 
+<td><code>http://tizen.org/feature/graphics.acceleration</code></td> 
      <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td> 
+<td><code>http://tizen.org/feature/input.keyboard</code></td> 
      <td>Specify this key, if the application requires a built-in physical keyboard.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td> 
-     <td>Specify this key with a specific keyboard layout (<span style="font-family: Courier New,Courier,monospace">string</span> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
+<td><code>http://tizen.org/feature/input.keyboard.layout</code></td> 
+     <td>Specify this key with a specific keyboard layout (<code>string</code> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
+<td><code>http://tizen.org/feature/input.rotating_bezel</code></td>
      <td>Specify this key, if the application requires rotating bezel input.</td>
         <td>2.3.1</td>
     </tr>      
  <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/iot.ocf</span></td>
+<td><code>http://tizen.org/feature/iot.ocf</code></td>
      <td>Specify this key, if the application requires the Open Connectivity Foundation (OCF) framework.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td> 
+<td><code>http://tizen.org/feature/led</code></td> 
      <td>Specify this key, if the application requires a LED.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td> 
+<td><code>http://tizen.org/feature/location</code></td> 
      <td>Specify this key, if the application requires any location positioning features.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td> 
+<td><code>http://tizen.org/feature/location.batch</code></td> 
      <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
        <td>2.3</td>     
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td> 
+<td><code>http://tizen.org/feature/location.gps</code></td> 
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td>
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td> 
+<td><code>http://tizen.org/feature/location.wps</code></td> 
      <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/maps</span></td> 
+<td><code>http://tizen.org/feature/maps</code></td> 
      <td>Specify this key, if the application requires the map service feature.</td> 
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td> 
+<td><code>http://tizen.org/feature/microphone</code></td> 
      <td>Specify this key, if the application requires a microphone.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td> 
+<td><code>http://tizen.org/feature/multimedia.transcoder</code></td> 
      <td>Specify this key, if the application requires the multimedia transcoder feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td> 
+<td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td> 
      <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td> 
         <td>2.2.1</td>
     </tr>
        <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td> 
-     <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
+<td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td> 
+     <td>Specify this key with a specific number (<code>int</code> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth</code></td> 
      <td>Specify this key, if the application requires the Bluetooth feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.call</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.controller</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.controller</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.health</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.hid</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid.device</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.hid.device</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Human Interface Device (HID) device feature.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.le</code></td> 
      <td>Specify this key, if the application requires the Bluetooth LE feature.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.opp</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.phonebook.client</span></td> 
+<td><code>http://tizen.org/feature/network.bluetooth.phonebook.client</code></td> 
      <td>Specify this key, if the application requires the Bluetooth Phone Book Access (PBAP) client feature.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.ethernet</span></td> 
+<td><code>http://tizen.org/feature/network.ethernet</code></td> 
      <td>Specify this key, if the application requires the ethernet connection.</td> 
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
+<td><code>http://tizen.org/feature/network.internet</code></td>
      <td>Specify this key, if the application requires Internet access.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.net_proxy</span></td>
+<td><code>http://tizen.org/feature/network.net_proxy</code></td>
      <td>Specify this key, if the application requires the net-proxy feature for the Internet connection. A net-proxy feature for a device acts as an intermediary between client (network service customer) and server (network service provider).</td>
         <td>3.0</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td> 
+<td><code>http://tizen.org/feature/network.nfc</code></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td> 
      <td>Specify this key, if the application requires the NFC card emulation feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+<td><code>http://tizen.org/feature/network.nfc.card_emulation.hce</code></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
         <td>2.3.1</td>
     </tr>              
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.p2p</code></td> 
      <td>Specify this key, if the application requires the NFC p2p feature.</td> 
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td> 
      <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>        
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td> 
+<td><code>http://tizen.org/feature/network.nfc.tag</code></td> 
      <td>Specify this key, if the application requires the NFC tag feature.</td> 
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td> 
+<td><code>http://tizen.org/feature/network.push</code></td> 
      <td>Specify this key, if the application requires the network-based push service.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td> 
+<td><code>http://tizen.org/feature/network.secure_element</code></td> 
      <td>Specify this key, if the application requires the secure element feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td> 
+<td><code>http://tizen.org/feature/network.secure_element.ese</code></td> 
      <td>Specify this key, if the application requires the ESE secure element feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td> 
+<td><code>http://tizen.org/feature/network.secure_element.uicc</code></td> 
      <td>Specify this key, if the application requires the UICC secure element feature.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.service_discovery.dnssd</span></td> 
+<td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td> 
      <td>Specify this key, if the application requires the DNS-based Service Discovery Feature (DNSSD).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.service_discovery.ssdp</span></td> 
+<td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td> 
      <td>Specify this key, if the application requires the Simple Service Discovery Protocol feature (SSDP).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td> 
+<td><code>http://tizen.org/feature/network.telephony</code></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.mms</code></td> 
      <td>Specify this key, if the application requires the MMS feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
      <td>Specify this key, if the application requires the SMS feature.</td> 
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms.cbs</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td> 
      <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td> 
         <td>2.2.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.vpn</span></td> 
+<td><code>http://tizen.org/feature/network.vpn</code></td> 
      <td>Specify this key, if the application requires the Virtual Private Network feature (VPN).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td> 
+<td><code>http://tizen.org/feature/network.wifi</code></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.tdls</span></td> 
+<td><code>http://tizen.org/feature/network.wifi.tdls</code></td> 
      <td>Specify this key, if the application requires the Wi-Fi Tunneled Direct Link Setup (TDLS).</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td> 
      <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td> 
      <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td> 
      <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td> 
      <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td> 
      <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td> 
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td> 
      <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td> 
+<td><code>http://tizen.org/feature/opengles.version.1_1</code></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 1.1 at minimum.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
 </td> 
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td> 
+<td><code>http://tizen.org/feature/opengles.version.2_0</code></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 2.0.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
 </td> 
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.3_0</span></td>
+<td><code>http://tizen.org/feature/opengles.version.3_0</code></td>
      <td>Specify this key, if the application requires OpenGL&reg; ES version 3.0.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
        </td>
        <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td> 
      <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td> 
      <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td> 
      <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td> 
      <td>Specify this key, if the application requires the SSE3 FPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td> 
      <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td> 
      <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.osp_compatible</span></td> 
+<td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td> 
      <td>Specify this key, if the application requires OSP compatibility (the bada compatibility mode).</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td> 
+<td><code>http://tizen.org/feature/screen.auto_rotation</code></td> 
      <td>Specify this key, if the application requires the automatic screen rotation feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>   
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
+<td><code>http://tizen.org/feature/screen.shape.circle</code></td>
      <td>Specify this key, if the application requires a circle-shaped screen.</td>
         <td>2.3.1</td>
     </tr>
 <tr>   
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
+<td><code>http://tizen.org/feature/screen.shape.rectangle</code></td>
      <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td> 
+<td><code>http://tizen.org/feature/screen.size.all</code></td> 
      <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td> 
         <td>2.2.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal</code></td> 
      <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
      <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td> 
      <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td> 
      <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.360</span></td>
+<td><code>http://tizen.org/feature/screen.size.normal.360.360</code></td>
      <td>Specify this key, if the application supports the 360 x 360 resolution on the normal screen size.</td>
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td> 
      <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td> 
      <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td> 
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td> 
      <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td> 
      <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td> 
      <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td> 
+<td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td> 
      <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer</code></td> 
      <td>Specify this key, if the application requires an acceleration sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td> 
+<td><code>http://tizen.org/feature/sensor.activity_recognition</code></td> 
      <td>Specify this key, if the application requires an activity recognition sensor.</td> 
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.barometer</code></td> 
      <td>Specify this key, if the application requires a barometer sensor.</td> 
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.geomagnetic_rotation_vector</span></td> 
+<td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td> 
      <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td> 
+<td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td> 
      <td>Specify this key, if the application requires a gesture recognition sensor.</td> 
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td> 
+<td><code>http://tizen.org/feature/sensor.gravity</code></td> 
      <td>Specify this key, if the application requires a gravity sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope</code></td> 
      <td>Specify this key, if the application requires a gyro sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td> 
      <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td> 
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.uncalibrated</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td> 
      <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td> 
      <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td> 
      <td>Specify this key, if the application requires a heart rate monitor sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_green</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
      <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
        <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
      <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
        <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_red</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
      <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td> 
+<td><code>http://tizen.org/feature/sensor.humidity</code></td> 
      <td>Specify this key, if the application requires a humidity sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td> 
+<td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td> 
      <td>Specify this key, if the application requires a linear acceleration sensor.</td> 
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer</code></td> 
      <td>Specify this key, if the application requires a magnetic sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.uncalibrated</span></td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td> 
      <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.pedometer</code></td> 
      <td>Specify this key, if the application requires a pedometer sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td> 
+<td><code>http://tizen.org/feature/sensor.photometer</code></td> 
      <td>Specify this key, if the application requires a photometer sensor.</td> 
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td> 
      <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td> 
+<td><code>http://tizen.org/feature/sensor.proximity</code></td> 
      <td>Specify this key, if the application requires a proximity sensor.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td> 
      <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td> 
+<td><code>http://tizen.org/feature/sensor.rotation_vector</code></td> 
      <td>Specify this key, if the application requires a rotation vector sensor.</td> 
         <td>2.3</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td> 
+<td><code>http://tizen.org/feature/sensor.temperature</code></td> 
      <td>Specify this key, if the application requires a temperature sensor.</td> 
        <td>2.3</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td> 
+<td><code>http://tizen.org/feature/sensor.tiltmeter</code></td> 
      <td>Specify this key, if the application requires a tilt sensor.</td> 
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td> 
+<td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td> 
      <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td> 
+<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td> 
      <td>Specify this key, if the application requires a ultraviolet sensor.</td> 
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td> 
+<td><code>http://tizen.org/feature/sensor.wrist_up</code></td> 
      <td>Specify this key, if the application requires a wrist up sensor.</td> 
         <td>2.3</td> 
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
      <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td> 
+<td><code>http://tizen.org/feature/sip.voip</code></td> 
      <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.control</span></td> 
+<td><code>http://tizen.org/feature/speech.control</code></td> 
      <td>Specify this key, if the application requires the voice control feature.</td> 
        <td>2.4</td>     
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</span></td> 
+<td><code>http://tizen.org/feature/speech.recognition</code></td> 
      <td>Specify this key, if the application requires the speech recognition (STT) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td> 
+<td><code>http://tizen.org/feature/speech.synthesis</code></td> 
      <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory</span></td> 
+<td><code>http://tizen.org/feature/usb.accessory</code></td> 
      <td>Specify this key, if the application requires the USB client (or accessory) feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td> 
+<td><code>http://tizen.org/feature/usb.host</code></td> 
      <td>Specify this key, if the application requires the USB host feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_detection</span></td> 
+<td><code>http://tizen.org/feature/vision.barcode_detection</code></td> 
      <td>Specify this key, if the application requires the barcode detection feature.</td> 
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_generation</span></td> 
+<td><code>http://tizen.org/feature/vision.barcode_generation</code></td> 
      <td>Specify this key, if the application requires the barcode generation feature.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td> 
+<td><code>http://tizen.org/feature/vision.face_recognition</code></td> 
      <td>Specify this key, if the application requires the face recognition feature.</td> 
        <td>2.2.1</td>   
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td> 
+<td><code>http://tizen.org/feature/vision.image_recognition</code></td> 
      <td>Specify this key, if the application requires the image recognition feature.</td> 
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td> 
+<td><code>http://tizen.org/feature/vision.qrcode_generation</code></td> 
      <td>Specify this key, if the application requires the QR code generation feature.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td> 
+<td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td> 
      <td>Specify this key, if the application requires the QR code recognition feature.</td> 
         <td>2.2.1</td>
     </tr>
 <h2 id="profile_n" name="profile_n">Profile-based Filtering</h2>
 <p>A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.</p>
 
-<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
+<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <code>profile name</code> element in the <code>tizen-manifest.xml</code> file.</p>
 
 <p>The following table lists the Tizen profiles and related profile name attributes.</p>
+<p align="center" class="Table"><strong>Table: Tizen profiles and profile name attributes</strong></p>
+
  <table border="1" id="feature">
-<caption>Table: Tizen profiles and profile name attributes</caption>
+
 <tbody>
 <tr>
 <th width="50%">Tizen profile</th> 
     </tr>
 <tr>
 <td>Mobile</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">mobile</span></td> 
+     <td><code>mobile</code></td> 
     </tr>
 <tr>
 <td>Wearable</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">wearable</span></td> 
+     <td><code>wearable</code></td> 
     </tr>
 <tr>
 <td>TV</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">TV</span></td> 
+     <td><code>TV</code></td> 
     </tr>
 </tbody></table>
 
-<p>In a native application, the profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file as follows:</p>
+<p>In a native application, the profile name element can be added to the <code>tizen-manifest.xml</code> file as follows:</p>
 <pre class="prettyprint">
 &lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.1&quot; ... &gt;
 &lt;profile name=&quot;mobile&quot;/&gt;
 </pre>
 
-<p>The Tizen Store compares the device profile and the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
+<p>The Tizen Store compares the device profile and the <code>profile name</code> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
index 33ec81c..4aa02ad 100644 (file)
@@ -53,8 +53,8 @@
 <li>This policy comes into effect beginning with Tizen 2.4.</li>
 <li>The functionality of the deprecated API is available for 2 releases, as indicated in the following table.
 
+<p align="center" class="Table"><strong>Table: Deprecation schedule</strong></p>
 <table>
-<caption>Table: Deprecation schedule</caption>
 <tbody>
 <tr>
  <th></th>
index 8e07368..d65f04a 100644 (file)
@@ -62,7 +62,7 @@ BUNDLE_ERROR_OUT_OF_MEMORY /* Out of memory */
 </li>
 
 <li>Obtaining a message for specific error code
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">get_error_message()</span> function to query the meaning of each error code.
+<p>Use the <code>get_error_message()</code> function to query the meaning of each error code.
 The pointer returned is a static variable, you must not free it.</p>
 
 <p>For example:</p>
@@ -76,7 +76,7 @@ if (LOCATIONS_ERROR_NONE != result) {
 &nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;%s&quot;, errMsg);
 }
 </pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">get_error_message()</span> function takes an error code as an input and returns its corresponding error messages, such as &quot;Location service is not available&quot;.</p>
+<p>The <code>get_error_message()</code> function takes an error code as an input and returns its corresponding error messages, such as &quot;Location service is not available&quot;.</p>
 </li>
 </ul>
 <p>Every error code in the Tizen native API is represented as an integer value.</p>   
index 5a08aea..36f48a5 100644 (file)
 
 <p>All Tizen mobile native devices provide the <strong>Menu</strong> and <strong>Back</strong> hardware keys, and the circular wearable devices provide rotary components for emitting rotary events. Both mobile and wearable devices support the media key events. You can use the Efl Extension Event API (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__EVENTS__GROUP.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__EVENT__MODULE.html">wearable</a> applications) to handle the <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events.</p>
 
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-    <tr>
-      <td class="note">For more information on using Efl Extension for <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events, see <a href="../../../../org.tizen.guides/html/native/ui/efl/hw_input_n.htm">Hardware Input Handling</a>.</td>
-    </tr>
-  </tbody>
-</table>
+
+    <div class="note">
+        <strong>Note</strong>
+        For more information on using Efl Extension for <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events, see <a href="../../../../org.tizen.guides/html/native/ui/efl/hw_input_n.htm">Hardware Input Handling</a>.
+    </div>
 
 <p>Follow the guidelines below to ensure predictable and reliable navigation in your application.</p>
 
 <h2 id="menu" name="menu">Menu Key Events in Mobile Applications</h2>
 <p> All Tizen mobile devices provide a <strong>Menu</strong> key, which is used to present users a context-dependent set of options. Pressing the <strong>Menu</strong> key shows a hierarchical option menu. The following figure illustrates the <strong>Menu</strong> key position and the option menu.</p>
 
-<p class="figure">Figure: Menu key</p> 
+<p align="center"><strong>Figure: Menu key</strong></p> 
  <p align="center"><img src="../../images/menu_key.png" alt="Menu key" /></p> 
 
 
@@ -76,7 +71,7 @@
 
 <p>You can use the rotary events to change your application state (for example, change the value of the scroller or slider, change selected items, or zoom the image).</p>
 
-<p class="figure">Figure: Rotary device</p> 
+<p align="center"><strong>Figure: Rotary device</strong></p> 
 <p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
 
 
index cdf4faf..bcddf87 100644 (file)
@@ -41,9 +41,9 @@
        </ul></li>
 </ul>
 <p>The following table shows the application directory hierarchy:</p>
+
+<p align="center" class="Table"><strong>Table: Application package directory hierarchy</strong></p> 
 <table>
-<caption>Table: Application package directory hierarchy</caption>
 <tbody>
 <tr>
  <th>Name</th>
  <th>Permission</th>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bin</span></td>
+ <td><code>bin</code></td>
  <td>Executable binary path</td>
  <td>Owner: Read<p>Others: Access denied</p></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lib</span></td>
+ <td><code>lib</code></td>
  <td>Library path</td>
  <td>Owner: Read<p>Others: Access denied</p></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">data</span></td>
+ <td><code>data</code></td>
  <td>Used to store private data of an application.
-     <p>To get the application data directory path, call the <span style="font-family: Courier New,Courier,monospace;">app_get_data_path()</span> function of the App Common module.</p></td>
+     <p>To get the application data directory path, call the <code>app_get_data_path()</code> function of the App Common module.</p></td>
  <td>Owner: Read and Write<p>Others: Access denied</p></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">res</span></td>
+ <td><code>res</code></td>
  <td>Used to read resource files that are delivered with the application package.
-     <p>To get the application resource directory path, call the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function of the App common module.</p>
+     <p>To get the application resource directory path, call the <code>app_get_resource_path()</code> function of the App common module.</p>
  </td>
  <td>Owner: Read<p>Others: Access denied</p></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared</span></td>
+ <td><code>shared</code></td>
  <td>Parent directory of the data, res, and trusted sub-directories. Files in this directory cannot be delivered with the application package.</td>
  <td>Owner: Read<p> Others: Read</p></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared/data</span></td>
+ <td><code>shared/data</code></td>
  <td>Used to share data with other applications.
-     <p>To get this directory path of your own application, call the <span style="font-family: Courier New,Courier,monospace;">app_get_shared_data_path()</span> function of the App common module.</p>
+     <p>To get this directory path of your own application, call the <code>app_get_shared_data_path()</code> function of the App common module.</p>
      <p>Files stored in the shared/data directory can be read by other applications. Do not store application&#39;s private data in the shared/data directory.</p></td>
  <td>Owner: Read and Write<p>Others: Read</p></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared/res</span></td>
+ <td><code>shared/res</code></td>
  <td>Used to share resources with other applications. The resource files are delivered with the application package.
-     <p>To get this directory path of your own application, call the <span style="font-family: Courier New,Courier,monospace;">app_get_shared_resource_path()</span> function of the App common module.</p>
+     <p>To get this directory path of your own application, call the <code>app_get_shared_resource_path()</code> function of the App common module.</p>
      <p>Files stored in the shared/res directory can be read by other applications. Do not pack application&#39;s private resource files in the shared/res directory.</p>
  </td>
  <td>Owner: Read<p> Others: Read</p></td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">shared/trusted</span></td>
+ <td><code>shared/trusted</code></td>
  <td>Used to share data with family of trusted applications. The family applications signed with the same certificate can access data in the shared/trusted directory.
-     <p>To get this directory path of your own application, call the <span style="font-family: Courier New,Courier,monospace;">app_get_shared_trusted_path()</span> function of the App common module.</p>
+     <p>To get this directory path of your own application, call the <code>app_get_shared_trusted_path()</code> function of the App common module.</p>
  </td>
  <td>Owner: Read and Write<p>Family: Read and Write</p><p> Others: Access denied</p></td>
 </tr>
 </tbody>
 </table>
 
-<p>Every application can access a storage area where media files are stored. This is the media directory. In native applications, to obtain the media directory path, call the <span style="font-family: Courier New,Courier,monospace;">storage_get_directory()</span> function of Storage module. The following table lists the sub-directories of the media directory.</p>
-
+<p>Every application can access a storage area where media files are stored. This is the media directory. In native applications, to obtain the media directory path, call the <code>storage_get_directory()</code> function of Storage module. The following table lists the sub-directories of the media directory.</p>
+<p align="center" class="Table"><strong>Table: Media directory hierarchy</strong></p>
 <table>
-<caption>Table: Media directory hierarchy</caption>
 <tbody>
 <tr>
  <th>Name</th>
  <th>Permission</th>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Images</span></td>
+ <td><code>Images</code></td>
  <td>Used for Image data.</td>
  <td rowspan='7'>Read and Write</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Sounds</span></td>
+ <td><code>Sounds</code></td>
  <td>Used for Sound data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Vides</span></td>
+ <td><code>Vides</code></td>
  <td>Used for Video data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Cameras</span></td>
+ <td><code>Cameras</code></td>
  <td>Used for Camera pictures.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Downloads</span></td>
+ <td><code>Downloads</code></td>
  <td>Used for Downloaded data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Music</span></td>
+ <td><code>Music</code></td>
  <td>Used for Music data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Documents</span></td>
+ <td><code>Documents</code></td>
  <td>Used for Documents.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">System Ringtones</span></td>
+ <td><code>System Ringtones</code></td>
  <td>Used for System default ringtones.</td>
  <td>Read</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Others</span></td>
+ <td><code>Others</code></td>
  <td>Used for other types.</td>
  <td>Read and Write</td> 
 </tr>
 </table>
 
 
-<p>Every application can also access the external storage, such as MMC. This is the external storage directory. In native applications, to obtain the external storage directory path, call the <span style="font-family: Courier New,Courier,monospace;">storage_get_directory()</span> function of the Storage module. The following table lists the sub-directories of the external storage directory.</p>
+<p>Every application can also access the external storage, such as MMC. This is the external storage directory. In native applications, to obtain the external storage directory path, call the <code>storage_get_directory()</code> function of the Storage module. The following table lists the sub-directories of the external storage directory.</p>
 
+<p align="center" class="Table"><strong>Table: External storage directory hierarchy</strong></p>
 <table>
-<caption>Table: External storage directory hierarchy</caption>
 <tbody>
 <tr>
  <th>Name</th>
  <th>Permission</th>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Images</span></td>
+ <td><code>Images</code></td>
  <td>Used for Image data.</td>
  <td rowspan='8'>Read and Write</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Sounds</span></td>
+ <td><code>Sounds</code></td>
  <td>Used for Sound data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Vides</span></td>
+ <td><code>Vides</code></td>
  <td>Used for Video data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Cameras</span></td>
+ <td><code>Cameras</code></td>
  <td>Used for Camera pictures.
  </td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Downloads</span></td>
+ <td><code>Downloads</code></td>
  <td>Used for Downloaded data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Music</span></td>
+ <td><code>Music</code></td>
  <td>Used for Music data.</td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Documents</span></td>
+ <td><code>Documents</code></td>
  <td>Used for Documents.
  </td>
 </tr>
 <tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Others</span></td>
+ <td><code>Others</code></td>
  <td>Used for other types.</td>
 </tr>
 </tbody>
index 2d18e1f..e11cfb2 100644 (file)
@@ -39,25 +39,19 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <li>The platform level is the highest privilege level, and an application that needs these privileges requires at least a platform-signed certificate, which is granted to vendor developers.</li>
 </ul>
 
-<p>Since Tizen platform 3.0, some privileges are categorized as privacy-related and give an option to the user to switch them on and off. If an application invokes a privacy-related privileged API, the Tizen system checks whether the privilege is <strong>allowed</strong> for the application. For the application to use the API, the privilege must be declared in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file and the user must have switched it on.</p>
+<p>Since Tizen platform 3.0, some privileges are categorized as privacy-related and give an option to the user to switch them on and off. If an application invokes a privacy-related privileged API, the Tizen system checks whether the privilege is <strong>allowed</strong> for the application. For the application to use the API, the privilege must be declared in the <code>tizen-manifest.xml</code> file and the user must have switched it on.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">In applications with the platform version 3.0 or higher, if you use privacy-related privileged APIs, make sure that the user has switched the privilege on before making the function call. Otherwise, the application does not work as expected.</td>
-    </tr>
-   </tbody>
-  </table>
+  <div class="note">
+        <strong>Note</strong>
+        In applications with the platform version 3.0 or higher, if you use privacy-related privileged APIs, make sure that the user has switched the privilege on before making the function call. Otherwise, the application does not work as expected.
+    </div>
  
 <p>The Tizen Studio also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../../org.tizen.studio/html/native_tools/api_checker_n.htm">Verifying APIs and Privileges</a>.</p>
 
 <p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
 
+<p align="center" class="Table"><strong>Table: Mobile native API privileges</strong></p>
 <table>
-<caption>Table: Mobile native API privileges</caption>
 <tbody>
 <tr> 
 <th>Privilege</th> 
@@ -67,672 +61,672 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <th>Description</th> 
 </tr> 
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span></td> 
+<td><code>http://tizen.org/privilege/account.read</code></td> 
 <td>public</td>
 <td>Account</td>
 <td>2.3</td>
 <td>The application can read accounts.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span></td> 
+<td><code>http://tizen.org/privilege/account.write</code></td> 
 <td>public</td>
 <td>Account</td>
 <td>2.3</td>
 <td>The application can create, edit, and delete accounts.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></td> 
+<td><code>http://tizen.org/privilege/alarm.get</code></td> 
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can read information about the saved alarms.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></td>
+<td><code>http://tizen.org/privilege/alarm.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can set alarms and wake the device up at scheduled times.</td>
 </tr>
 <tr class="platform-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/antivirus.admin</span></td>
+<td><code>http://tizen.org/privilege/antivirus.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>3.0</td>
 <td>The application can enable or disable antivirus programs and manage detected malware.</td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/antivirus.scan</span></td>
+<td><code>http://tizen.org/privilege/antivirus.scan</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can request to scan files in other applications or on the device to detect harmful content.</td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/antivirus.webprotect</span></td>
+<td><code>http://tizen.org/privilege/antivirus.webprotect</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can check the reputation of a Web address and determine whether accessing it can put the user&#39;s device at risk.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/apphistory.read</span></td>
+<td><code>http://tizen.org/privilege/apphistory.read</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.4</td>
 <td>The application can read the statistics of application usage, such as which applications have been used frequently or recently.</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill</span></td> 
+<td><code>http://tizen.org/privilege/appmanager.kill</code></td> 
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can close other applications.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill.bgapp</span></td>
+<td><code>http://tizen.org/privilege/appmanager.kill.bgapp</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can request to close applications running in the background.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></td>
+<td><code>http://tizen.org/privilege/appmanager.launch</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can open other applications.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></td> 
+<td><code>http://tizen.org/privilege/bluetooth</code></td> 
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth.admin</span></td> 
+<td><code>http://tizen.org/privilege/bluetooth.admin</code></td> 
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can change Bluetooth settings, such as switching Bluetooth on or off, setting the device name, and enabling or disabling the AV remote control.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bookmark.admin</span></td> 
+<td><code>http://tizen.org/privilege/bookmark.admin</code></td> 
 <td>platform</td>
 <td>Bookmark</td>
 <td>2.3</td>
 <td>The application can retrieve, create, edit, and delete Internet bookmarks.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.read</span></td> 
+<td><code>http://tizen.org/privilege/calendar.read</code></td> 
 <td>public</td>
 <td>Calendar</td>
 <td>2.3</td>
 <td>The application can read events and tasks.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.write</span></td>
+<td><code>http://tizen.org/privilege/calendar.write</code></td>
 <td>public</td>
 <td>Calendar</td>
 <td>2.3</td>
 <td>The application can create, update, and delete events and tasks.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></td>
+<td><code>http://tizen.org/privilege/call</code></td>
 <td>public</td>
 <td>Call</td>
 <td>2.3</td>
 <td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user&#39;s payment plan.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></td>
+<td><code>http://tizen.org/privilege/callhistory.read</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3</td>
 <td>The application can read call log items.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></td>
+<td><code>http://tizen.org/privilege/callhistory.write</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3</td>
 <td>The application can create, update, and delete call log items.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></td>
+<td><code>http://tizen.org/privilege/camera</code></td>
 <td>public</td>
 <td>Camera</td>
 <td>2.3</td>
 <td>The application can take pictures and switch the camera flash on and off while using the camera.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.read</span></td>
+<td><code>http://tizen.org/privilege/contact.read</code></td>
 <td>public</td>
 <td>Contacts</td>
  <td>2.3</td>
 <td>The application can read the user profile, contacts, and contact history. Contact history can include social network activity.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.write</span></td>
+<td><code>http://tizen.org/privilege/contact.write</code></td>
 <td>public</td>
 <td>Contacts</td>
 <td>2.3</td>
 <td>The application can create, update, and delete the user profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></td>
+<td><code>http://tizen.org/privilege/content.write</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can change media information. This information can be used by other applications.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/d2d.datasharing</span></td>
+<td><code>http://tizen.org/privilege/d2d.datasharing</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can share data with other devices.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></td>
+<td><code>http://tizen.org/privilege/datasharing</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can share data with other applications.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></td>
+<td><code>http://tizen.org/privilege/display</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td> 
 <td>The application can manage display settings, such as the brightness. This can increase battery consumption.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></td>
+<td><code>http://tizen.org/privilege/download</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can manage HTTP downloads. This can result in additional charges depending on the user&#39;s payment plan.</td> 
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.bluetooth</span></td>
+<td><code>http://tizen.org/privilege/dpm.bluetooth</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict Bluetooth connections. This can prevent applications that use Bluetooth from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.browser</span></td>
+<td><code>http://tizen.org/privilege/dpm.browser</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can prevent the use of browser applications. This can prevent applications that use browser applications from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.camera</span></td>
+<td><code>http://tizen.org/privilege/dpm.camera</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of the camera. This can prevent applications that use the camera from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.clipboard</span></td>
+<td><code>http://tizen.org/privilege/dpm.clipboard</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of the clipboard. This can prevent applications that use the clipboard from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.debugging</span></td>
+<td><code>http://tizen.org/privilege/dpm.debugging</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of debugging. This can prevent applications that use debugging from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.email</span></td>
+<td><code>http://tizen.org/privilege/dpm.email</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict POP and IMAP email access. This can prevent applications that use email services from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.location</span></td>
+<td><code>http://tizen.org/privilege/dpm.location</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of location functions. This can prevent applications that use location functions from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.lock</span></td>
+<td><code>http://tizen.org/privilege/dpm.lock</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can lock the device.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.message</span></td>
+<td><code>http://tizen.org/privilege/dpm.message</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of text, multimedia, and chat messaging services. This can prevent applications that use messaging services from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.microphone</span></td>
+<td><code>http://tizen.org/privilege/dpm.microphone</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of the microphone. This can prevent applications that use the microphone from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.password</span></td>
+<td><code>http://tizen.org/privilege/dpm.password</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can manage password policies and reset the passwords used to unlock the device and recover data.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.security</span></td>
+<td><code>http://tizen.org/privilege/dpm.security</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can change security settings, such as those for certificate installation, data encryption, and factory data resets.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.storage</span></td>
+<td><code>http://tizen.org/privilege/dpm.storage</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can prevent the use of external storages, such as SD cards and USB storage devices. This can prevent applications that use external storage from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.usb</span></td>
+<td><code>http://tizen.org/privilege/dpm.usb</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can prevent USB connections, including the use of USB tethering. This can prevent applications that use USB connections from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.wifi</span></td>
+<td><code>http://tizen.org/privilege/dpm.wifi</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of Wi-Fi networks and mobile hotspots. If the device cannot connect to a Wi-Fi network, it can connect to a mobile network. This can result in additional charges depending on the user&#39;s payment plan.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.wipe</span></td>
+<td><code>http://tizen.org/privilege/dpm.wipe</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can erase all data from the user&#39;s device and reset the user&#39;s device to its factory default settings.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.zone</span></td>
+<td><code>http://tizen.org/privilege/dpm.zone</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can create and remove containers. Containers are private workspaces which provide separate application runtime environments and data storage.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/email</span></td> 
+<td><code>http://tizen.org/privilege/email</code></td> 
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can manage the user&#39;s email accounts, including the user&#39;s folders and emails, POP3 and IMAP downloads, and SMTP uploads. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/email.admin</span></td> 
+<td><code>http://tizen.org/privilege/email.admin</code></td> 
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can manage the email application settings.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/fido.client</span></td>
+<td><code>http://tizen.org/privilege/fido.client</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can trigger authenticators in the user&#39;s device and it can request to use the user&#39;s PIN or biometrics (fingerprints or irises) for authentication.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></td>
+<td><code>http://tizen.org/privilege/haptic</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can control vibration feedback.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/healthinfo</span></td>
+<td><code>http://tizen.org/privilege/healthinfo</code></td>
 <td>public</td>
 <td>Sensor</td>
 <td>2.3.1</td>
 <td>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/ime</span></td>
+<td><code>http://tizen.org/privilege/ime</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/imemanager</span></td>
+<td><code>http://tizen.org/privilege/imemanager</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can manage installed input methods.</td>
 </tr>
 <tr class="platform-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/inputgenerator</span></td>
+<td><code>http://tizen.org/privilege/inputgenerator</code></td>
 <td>platform</td>
 <td></td>
 <td>2.4</td>
 <td>The application can simulate keys being pressed and touch interactions with the screen.</td>
 </tr>
 <tr class="platform-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keygrab</span></td>
+<td><code>http://tizen.org/privilege/keygrab</code></td>
 <td>platform</td>
 <td></td>
 <td>2.4</td>
 <td>The application can read actions involving special keys, such as the volume keys on this or other devices (such as TV remote controls), even when it is running in the background.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></td>
+<td><code>http://tizen.org/privilege/keymanager</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can save keys, certificates, and data to, and retrieve and delete them from, a password-protected storage. Checking the status of certificates while connected to a mobile network can result in additional charges depending on the user&#39;s payment plan. <p><strong>Deprecated since 3.0.</strong></p></td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></td>
+<td><code>http://tizen.org/privilege/keymanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can lock and unlock a password-protected storage, and manage password changes for it. <p><strong>Deprecated since 2.4.</strong></p></td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></td>
+<td><code>http://tizen.org/privilege/led</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can switch LEDs on or off, such as the LED on the front of the device and the camera flash.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></td>
+<td><code>http://tizen.org/privilege/location</code></td>
 <td>public</td>
 <td>Location</td>
 <td>2.3</td>
 <td>The application can read the user&#39;s location information.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.coarse</span></td>
+<td><code>http://tizen.org/privilege/location.coarse</code></td>
 <td>public</td>
 <td>Location</td>
 <td>3.0</td>
 <td>The application can determine the user&#39;s approximate location including the user device&#39;s Cell ID, LAC (Location Area Code), and TAC (Tracking Area Code).</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.enable</span></td>
+<td><code>http://tizen.org/privilege/location.enable</code></td>
 <td>platform</td>
 <td>Location</td>
 <td>2.3</td>
 <td>The application can control the user&#39;s location service settings.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mapservice</span></td>
+<td><code>http://tizen.org/privilege/mapservice</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can use map services, such as geocoding, places, and routing (directions).</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.client</span></td>
+<td><code>http://tizen.org/privilege/mediacontroller.client</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.server</span></td>
+<td><code>http://tizen.org/privilege/mediacontroller.server</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediahistory.read</span></td>
+<td><code>http://tizen.org/privilege/mediahistory.read</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.4</td>
 <td>The application can read the statistics concerning the music and videos played on the device, such as the peak times for playing music or videos.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></td>
+<td><code>http://tizen.org/privilege/message.read</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3</td>
 <td>The application can read text and multimedia messages, and any information related to them.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></td>
+<td><code>http://tizen.org/privilege/message.write</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3</td>
 <td>The application can write, send, delete, and move text and multimedia messages, and change the settings and status of the messages, such as read or unread.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/minicontrol.provider</span></td>
+<td><code>http://tizen.org/privilege/minicontrol.provider</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can show a small toolbar on the notification panel or lock screen while it is open. <p><strong>Deprecated since 3.0.</strong></p></td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></td>
+<td><code>http://tizen.org/privilege/network.get</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can retrieve network information, such as the status of each network, its type, and detailed network profile information.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></td>
+<td><code>http://tizen.org/privilege/network.profile</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can add, remove, and edit network profiles.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></td>
+<td><code>http://tizen.org/privilege/network.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can switch Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></td>
+<td><code>http://tizen.org/privilege/nfc</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can read and write NFC tag information, and send NFC messages to other devices.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.admin</span></td>
+<td><code>http://tizen.org/privilege/nfc.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can change NFC settings, such as switching NFC on or off.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span></td>
+<td><code>http://tizen.org/privilege/nfc.cardemulation</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can access smart card details, such as credit card details, and allow users to make payments using NFC.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></td>
+<td><code>http://tizen.org/privilege/notification</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can show and hide its own notifications and badges.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></td>
+<td><code>http://tizen.org/privilege/packagemanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can install and uninstall application packages.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.clearcache</span></td>
+<td><code>http://tizen.org/privilege/packagemanager.clearcache</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
 <td>The application can clear other applications&#39; caches.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></td>
+<td><code>http://tizen.org/privilege/packagemanager.info</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can retrieve detailed application package information.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></td>
+<td><code>http://tizen.org/privilege/power</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can control power-related settings, such as dimming the screen.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></td>
+<td><code>http://tizen.org/privilege/push</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can receive notifications from the Internet. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/reboot</span></td> 
+<td><code>http://tizen.org/privilege/reboot</code></td> 
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can restart the device.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/recorder</span></td>
+<td><code>http://tizen.org/privilege/recorder</code></td>
 <td>public</td>
 <td>Microphone</td>
 <td>2.3</td>
 <td>The application can record video and audio.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/screenshot</span></td> 
+<td><code>http://tizen.org/privilege/screenshot</code></td> 
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can capture screenshots.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/secureelement</span></td>
+<td><code>http://tizen.org/privilege/secureelement</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/shortcut</span></td>
+<td><code>http://tizen.org/privilege/shortcut</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can create and delete shortcuts.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemmonitor</span></td>
+<td><code>http://tizen.org/privilege/systemmonitor</code></td>
 <td>public</td>
 <td></td>
  <td>2.4</td>
 <td>The application can read system information, including information from the CPU and RAM.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings</span></td>
+<td><code>http://tizen.org/privilege/systemsettings</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can read and write unrestricted system settings.<p><strong>Deprecated since 2.3.1.</strong></p></td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></td>
+<td><code>http://tizen.org/privilege/systemsettings.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can read and write all system settings.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></td>
+<td><code>http://tizen.org/privilege/telephony</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the status of calls.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony.admin</span></td>
+<td><code>http://tizen.org/privilege/telephony.admin</code></td>
 <td>platform</td> 
 <td></td>
 <td>2.3</td>
 <td>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/tethering.admin</span></td>
+<td><code>http://tizen.org/privilege/tethering.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can enable and disable tethering services. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/use_ir</span></td>
+<td><code>http://tizen.org/privilege/use_ir</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can use the infrared transmitter.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></td>
+<td><code>http://tizen.org/privilege/volume.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td> 
 <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/vpnservice</span></td>
+<td><code>http://tizen.org/privilege/vpnservice</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can manage the VPN (virtual private network) and change its settings.</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/web-history.admin</span></td>
+<td><code>http://tizen.org/privilege/web-history.admin</code></td>
 <td>platform</td>
 <td>User history</td>
 <td>2.3</td>
 <td>The application can manage the user&#39;s Internet history.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/widget.viewer</span></td> 
+<td><code>http://tizen.org/privilege/widget.viewer</code></td> 
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can show widgets, and information from their associated applications, on the home screen.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/wifidirect</span></td>
+<td><code>http://tizen.org/privilege/wifidirect</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can enable and disable Wi-Fi Direct&trade;, manage Wi-Fi Direct&trade; connections, and change Wi-Fi Direct&trade; settings.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></td>
+<td><code>http://tizen.org/privilege/window.priority.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
@@ -741,8 +735,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Wearable native API privileges</strong></p>
 <table>
-<caption>Table: Wearable native API privileges</caption>
 <tbody>
 <tr> 
 <th>Privilege</th>
@@ -752,350 +746,350 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <th>Description</th> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span></td>
+<td><code>http://tizen.org/privilege/account.read</code></td>
 <td>public</td>
 <td>Account</td>
 <td>3.0</td>
 <td>The application can read accounts.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span></td>
+<td><code>http://tizen.org/privilege/account.write</code></td>
 <td>public</td>
 <td>Account</td>
 <td>3.0</td>
 <td>The application can create, edit, and delete accounts.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></td>
+<td><code>http://tizen.org/privilege/alarm.get</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can read information about the saved alarms.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></td>
+<td><code>http://tizen.org/privilege/alarm.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can set alarms and wake the device up at scheduled times.</td> 
 </tr>
 <tr class="platform-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/antivirus.admin</span></td>
+<td><code>http://tizen.org/privilege/antivirus.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>3.0</td>
 <td>The application can enable or disable antivirus programs and manage detected malware.</td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/antivirus.scan</span></td>
+<td><code>http://tizen.org/privilege/antivirus.scan</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can request to scan files in other applications or on the device to detect harmful content.</td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/antivirus.webprotect</span></td>
+<td><code>http://tizen.org/privilege/antivirus.webprotect</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can check the reputation of a Web address and determine whether accessing it can put the user&#39;s device at risk.</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill</span></td>
+<td><code>http://tizen.org/privilege/appmanager.kill</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can close other applications.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill.bgapp</span></td>
+<td><code>http://tizen.org/privilege/appmanager.kill.bgapp</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can request to close applications running in the background.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></td>
+<td><code>http://tizen.org/privilege/appmanager.launch</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td> 
 <td>The application can open other applications.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></td>
+<td><code>http://tizen.org/privilege/bluetooth</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td> 
 <td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth.admin</span></td>
+<td><code>http://tizen.org/privilege/bluetooth.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td> 
 <td>The application can change Bluetooth settings, such as switching Bluetooth on or off, setting the device name, and enabling or disabling the AV remote control.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></td>
+<td><code>http://tizen.org/privilege/call</code></td>
 <td>public</td>
 <td>Call</td>
 <td>2.3.1</td>
 <td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></td>
+<td><code>http://tizen.org/privilege/callhistory.read</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3.1</td>
 <td>The application can read call log items.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></td>
+<td><code>http://tizen.org/privilege/callhistory.write</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3.1</td>
 <td>The application can create, update, and delete call log items.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></td>
+<td><code>http://tizen.org/privilege/camera</code></td>
 <td>public</td>
 <td>Camera</td>
 <td>2.3.1</td>
 <td>The application can take pictures and switch the camera flash on and off while using the camera.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.read</span></td>
+<td><code>http://tizen.org/privilege/contact.read</code></td>
 <td>public</td>
 <td>Contacts</td>
 <td>3.0</td>
 <td>The application can read the user profile, contacts, and contact history. Contact history can include social network activity.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.write</span></td>
+<td><code>http://tizen.org/privilege/contact.write</code></td>
 <td>public</td>
 <td>Contacts</td>
 <td>3.0</td>
 <td>The application can create, update, and delete the user profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></td>
+<td><code>http://tizen.org/privilege/content.write</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can change media information. This information can be used by other applications.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/d2d.datasharing</span></td>
+<td><code>http://tizen.org/privilege/d2d.datasharing</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can share data with other devices.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></td>
+<td><code>http://tizen.org/privilege/datasharing</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td> 
 <td>The application can share data with other applications.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></td>
+<td><code>http://tizen.org/privilege/display</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can manage display settings, such as the brightness. This can increase battery consumption.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></td>
+<td><code>http://tizen.org/privilege/download</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can manage HTTP downloads. This can result in additional charges depending on the user&#39;s payment plan.</td> 
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.bluetooth</span></td>
+<td><code>http://tizen.org/privilege/dpm.bluetooth</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict Bluetooth connections. This can prevent applications that use Bluetooth from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.browser</span></td>
+<td><code>http://tizen.org/privilege/dpm.browser</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can prevent the use of browser applications. This can prevent applications that use browser applications from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.camera</span></td>
+<td><code>http://tizen.org/privilege/dpm.camera</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of the camera. This can prevent applications that use the camera from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.clipboard</span></td>
+<td><code>http://tizen.org/privilege/dpm.clipboard</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of the clipboard. This can prevent applications that use the clipboard from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.debugging</span></td>
+<td><code>http://tizen.org/privilege/dpm.debugging</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of debugging. This can prevent applications that use debugging from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.email</span></td>
+<td><code>http://tizen.org/privilege/dpm.email</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict POP and IMAP email access. This can prevent applications that use email services from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.location</span></td>
+<td><code>http://tizen.org/privilege/dpm.location</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of location functions. This can prevent applications that use location functions from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.lock</span></td>
+<td><code>http://tizen.org/privilege/dpm.lock</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can lock the device.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.message</span></td>
+<td><code>http://tizen.org/privilege/dpm.message</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of text, multimedia, and chat messaging services. This can prevent applications that use messaging services from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.microphone</span></td>
+<td><code>http://tizen.org/privilege/dpm.microphone</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of the microphone. This can prevent applications that use the microphone from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.password</span></td>
+<td><code>http://tizen.org/privilege/dpm.password</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can manage password policies and reset the passwords used to unlock the device and recover data.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.security</span></td>
+<td><code>http://tizen.org/privilege/dpm.security</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can change security settings, such as those for certificate installation, data encryption, and factory data resets.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.storage</span></td>
+<td><code>http://tizen.org/privilege/dpm.storage</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can prevent the use of external storages, such as SD cards and USB storage devices. This can prevent applications that use external storage from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.usb</span></td>
+<td><code>http://tizen.org/privilege/dpm.usb</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can prevent USB connections, including the use of USB tethering. This can prevent applications that use USB connections from working properly.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.wifi</span></td>
+<td><code>http://tizen.org/privilege/dpm.wifi</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can restrict the use of Wi-Fi networks and mobile hotspots. If the device cannot connect to a Wi-Fi network, it can connect to a mobile network. This can result in additional charges depending on the user&#39;s payment plan.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.wipe</span></td>
+<td><code>http://tizen.org/privilege/dpm.wipe</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can erase all data from the user&#39;s device and reset the user&#39;s device to its factory default settings.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/dpm.zone</span></td>
+<td><code>http://tizen.org/privilege/dpm.zone</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
 <td>The application can create and remove containers. Containers are private workspaces which provide separate application runtime environments and data storage.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/email</span></td>
+<td><code>http://tizen.org/privilege/email</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can manage the user&#39;s email accounts, including the user&#39;s folders and emails, POP3 and IMAP downloads, and SMTP uploads. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/fido.client</span></td>
+<td><code>http://tizen.org/privilege/fido.client</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can trigger authenticators in the user&#39;s device and it can request to use the user&#39;s PIN or biometrics (fingerprints or irises) for authentication.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></td>
+<td><code>http://tizen.org/privilege/haptic</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can control vibration feedback.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/healthinfo</span></td>
+<td><code>http://tizen.org/privilege/healthinfo</code></td>
 <td>public</td>
 <td>Sensor</td>
 <td>2.3.1</td>
 <td>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/ime</span></td>
+<td><code>http://tizen.org/privilege/ime</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/imemanager</span></td>
+<td><code>http://tizen.org/privilege/imemanager</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can manage installed input methods.</td>
 </tr>
 <tr class="platform-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/inputgenerator</span></td>
+<td><code>http://tizen.org/privilege/inputgenerator</code></td>
 <td>platform</td>
 <td></td>
 <td>3.0</td>
 <td>The application can simulate keys being pressed and touch interactions with the screen.</td>
 </tr>
 <tr class="platform-level">
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keygrab</span></td>
+<td><code>http://tizen.org/privilege/keygrab</code></td>
 <td>platform</td>
 <td></td>
 <td>3.0</td>
 <td>The application can read actions involving special keys, such as the volume keys on this or other devices (such as TV remote controls), even when it is running in the background.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></td>
+<td><code>http://tizen.org/privilege/keymanager</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can save keys, certificates, and data to, and retrieve and delete them from, a password-protected storage.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></td>
+<td><code>http://tizen.org/privilege/keymanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
@@ -1103,231 +1097,231 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <p><strong>Deprecated since 3.0.</strong></p></td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></td>
+<td><code>http://tizen.org/privilege/led</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can switch LEDs on or off, such as the LED on the front of the device and the camera flash.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></td>
+<td><code>http://tizen.org/privilege/location</code></td>
 <td>public</td>
 <td>Location</td>
 <td>2.3.1</td>
 <td>The application can read the user&#39;s location information.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.coarse</span></td>
+<td><code>http://tizen.org/privilege/location.coarse</code></td>
 <td>public</td>
 <td>Location</td>
 <td>3.0</td>
 <td>The application can determine the user&#39;s approximate location including the user device&#39;s Cell ID, LAC (Location Area Code), and TAC (Tracking Area Code).</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.enable</span></td>
+<td><code>http://tizen.org/privilege/location.enable</code></td>
 <td>platform</td>
 <td>Location</td>
 <td>2.3.1</td>
 <td>The application can control the user&#39;s location service settings.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mapservice</span></td>
+<td><code>http://tizen.org/privilege/mapservice</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.2</td>
 <td>The application can use map services, such as geocoding, places, and routing (directions).</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.client</span></td>
+<td><code>http://tizen.org/privilege/mediacontroller.client</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.server</span></td>
+<td><code>http://tizen.org/privilege/mediacontroller.server</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></td>
+<td><code>http://tizen.org/privilege/message.read</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3.1</td>
 <td>The application can read text and multimedia messages, and any information related to them.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></td>
+<td><code>http://tizen.org/privilege/message.write</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3.1</td>
 <td>The application can write, send, delete, and move text and multimedia messages, download multimedia messages, and change the settings and status of the messages, such as read or unread. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></td>
+<td><code>http://tizen.org/privilege/network.get</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can retrieve network information, such as the status of each network, its type, and detailed network profile information.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></td>
+<td><code>http://tizen.org/privilege/network.profile</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can add, remove, and edit network profiles.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></td>
+<td><code>http://tizen.org/privilege/network.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can switch Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></td>
+<td><code>http://tizen.org/privilege/nfc</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can read and write NFC tag information, and send NFC messages to other devices.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.admin</span></td>
+<td><code>http://tizen.org/privilege/nfc.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can change NFC settings, such as switching NFC on or off.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span></td>
+<td><code>http://tizen.org/privilege/nfc.cardemulation</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can access smart card details, such as credit card details, and allow users to make payments using NFC.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></td>
+<td><code>http://tizen.org/privilege/notification</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can show and hide its own notifications and badges.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></td>
+<td><code>http://tizen.org/privilege/packagemanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can install and uninstall application packages.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.clearcache</span></td>
+<td><code>http://tizen.org/privilege/packagemanager.clearcache</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can clear other applications&#39; caches.</td>
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></td>
+<td><code>http://tizen.org/privilege/packagemanager.info</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can retrieve detailed application package information.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></td>
+<td><code>http://tizen.org/privilege/power</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can control power-related settings, such as dimming the screen.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></td>
+<td><code>http://tizen.org/privilege/push</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can receive notifications from the Internet. This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/reboot</span></td>
+<td><code>http://tizen.org/privilege/reboot</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can restart the device. </td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/recorder</span></td>
+<td><code>http://tizen.org/privilege/recorder</code></td>
 <td>public</td>
 <td>Microphone</td>
 <td>2.3.1</td>
 <td>The application can record video and audio.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/screenshot</span></td>
+<td><code>http://tizen.org/privilege/screenshot</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can capture screenshots.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/secureelement</span></td>
+<td><code>http://tizen.org/privilege/secureelement</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemmonitor</span></td>
+<td><code>http://tizen.org/privilege/systemmonitor</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can read system information, including information from the CPU and RAM.</td>
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></td>
+<td><code>http://tizen.org/privilege/systemsettings.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can read and write all system settings.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></td>
+<td><code>http://tizen.org/privilege/telephony</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the status of calls.</td> 
 </tr>
 <tr class="platform-level"> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony.admin</span></td>
+<td><code>http://tizen.org/privilege/telephony.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/use_ir</span></td>
+<td><code>http://tizen.org/privilege/use_ir</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
 <td>The application can use the infrared transmitter.</td>
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></td>
+<td><code>http://tizen.org/privilege/volume.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/widget.viewer</span></td> 
+<td><code>http://tizen.org/privilege/widget.viewer</code></td> 
 <td>public</td>
 <td></td>
 <td>2.3.1</td> 
 <td>The application can show widgets, and information from their associated applications, on the home screen.</td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></td>
+<td><code>http://tizen.org/privilege/window.priority.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
@@ -1342,9 +1336,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 
 <p>The following table lists the non-API bound privileges.</p>
 
+<p align="center" class="Table"><strong>Table: Non-API bound privileges</strong></p>
 <table>
-<caption>Table: Non-API bound privileges</caption>
-
 <tbody>
 <tr> 
 <th>Privilege</th>
@@ -1353,40 +1346,40 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <th>Description</th> 
 </tr> 
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></td>
+<td><code>http://tizen.org/privilege/internet</code></td>
 <td>public</td>
 <td>2.3 / 2.3.1</td>
 <td>Most of the mobile and wearable devices use a cellular network for IP communication. However, the cellular network can cause data costs and an application that sends data through the Internet can be crucial for user privacy. Due to the importance of the functionality, a privilege for controlling application Internet access has been added.
-<p>The new privilege is coupled with IP addresses of the destination and source of the IP packets. If your socket is connecting to or listening for any IP address except 127.0.0.1, this privilege is required to communicate properly. If your application does not have this privilege, the connection is blocked in the kernel layer and returns an error in the <span style="font-family: Courier New,Courier,monospace;">connect()</span> function as the permission is denied. If you are listening to a socket, you never receive any packets from the outside without errors on the socket functions.</p>
-<p>If you are using the <span style="font-family: Courier New,Courier,monospace;">listen()</span> and <span style="font-family: Courier New,Courier,monospace;">connect()</span> functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.</p></td> 
+<p>The new privilege is coupled with IP addresses of the destination and source of the IP packets. If your socket is connecting to or listening for any IP address except 127.0.0.1, this privilege is required to communicate properly. If your application does not have this privilege, the connection is blocked in the kernel layer and returns an error in the <code>connect()</code> function as the permission is denied. If you are listening to a socket, you never receive any packets from the outside without errors on the socket functions.</p>
+<p>If you are using the <code>listen()</code> and <code>connect()</code> functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.</p></td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></td>
+<td><code>http://tizen.org/privilege/mediastorage</code></td>
 <td>public</td>
 <td>2.3 / 2.3.1</td>
 <td>When you connect the device to a computer (Windows or Mac) through USB, you can access a dedicated media storage area shown as massive media storage. This region of the storage is called media storage and is usually used for multimedia files, such as photos, videos, and music files. Since this storage area is used for user private data, access to it must be protected with a privilege.
 <p>If your application does not have this privilege, no file operations into the media storage area succeed and you receive a permission denied error. If you have this privilege, you can read and write directories and files, create new files, and delete files in the storage area.</p></td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></td>
+<td><code>http://tizen.org/privilege/externalstorage</code></td>
 <td>public</td>
 <td>2.3 / 2.3.1</td>
-<td>Similar to the media storage, many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage must be protected with a privilege. You can find the absolute path of the external storage with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API functions, such as <span style="font-family: Courier New,Courier,monospace;">storage_get_root_directory()</span>.
+<td>Similar to the media storage, many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage must be protected with a privilege. You can find the absolute path of the external storage with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API functions, such as <code>storage_get_root_directory()</code>.
 <p>If your application does not have this privilege, all file operations fail with a permission denied error. If you have this privilege, you have full access to the external storage.</p></td> 
 </tr>
 <tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage.appdata</span></td> 
+<td><code>http://tizen.org/privilege/externalstorage.appdata</code></td> 
 <td>public</td>
 <td>2.3 / 2.3.1</td>
 <td>Many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage must be protected with a privilege.
-<p>If your application does not have this privilege, no file operations with the application data stored in the external storage area succeed and you receive a permission denied error. If you have this privilege, you can store data in the application-specific directory of the external storage. You can find the path for storing data in the external storage with, for example, the <span style="font-family: Courier New,Courier,monospace;">app_get_external_data_path()</span>, <span style="font-family: Courier New,Courier,monospace;">app_get_external_cache_path()</span>, and <span style="font-family: Courier New,Courier,monospace;">app_get_external_shared_data_path()</span> functions.</p></td> 
+<p>If your application does not have this privilege, no file operations with the application data stored in the external storage area succeed and you receive a permission denied error. If you have this privilege, you can store data in the application-specific directory of the external storage. You can find the path for storing data in the external storage with, for example, the <code>app_get_external_data_path()</code>, <code>app_get_external_cache_path()</code>, and <code>app_get_external_shared_data_path()</code> functions.</p></td> 
 </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appdir.shareddata</span></td>
+<td><code>http://tizen.org/privilege/appdir.shareddata</code></td>
 <td>public</td>
 <td>3.0 / 3.0</td>
-<td>Since Tizen 3.0, the application must have this privilege to support the <span style="font-family: Courier New,Courier,monospace;">shared/data</span> directory.
-<p>The <span style="font-family: Courier New,Courier,monospace;">app_get_shared_data_path()</span> and <span style="font-family: Courier New,Courier,monospace;">app_manager_get_shared_data_path()</span> functions return an error when the application does not have this privilege. Note that the <span style="font-family: Courier New,Courier,monospace;">shared/data</span> directory is writable for the application itself and readable for all other applications. You must be careful when you use this privilege and share data through the <span style="font-family: Courier New,Courier,monospace;">shared/data</span> directory. For a more secure way of sharing files with another application, try to pass the file path through an application control.</p></td>
+<td>Since Tizen 3.0, the application must have this privilege to support the <code>shared/data</code> directory.
+<p>The <code>app_get_shared_data_path()</code> and <code>app_manager_get_shared_data_path()</code> functions return an error when the application does not have this privilege. Note that the <code>shared/data</code> directory is writable for the application itself and readable for all other applications. You must be careful when you use this privilege and share data through the <code>shared/data</code> directory. For a more secure way of sharing files with another application, try to pass the file path through an application control.</p></td>
  </tr>
 </tbody>
 </table> 
index 6d55a90..a0501f5 100644 (file)
@@ -63,7 +63,7 @@
 <li>The distributor signature determines the API set that the application can use.</li>
 </ul>
 </li></ul>
-<p class="figure">Figure: Signature type</p>
+<p align="center"><strong>Figure: Signature type</strong></p>
 <p align="center"><img src="../../images/signature_type.png" alt="Signature type" /></p>
 
 
@@ -78,8 +78,8 @@
 <p>For an application to use a privileged API, the distributor signature must be generated from a certificate (and its signing key) with a proper privilege level. If an application has a distributor signature generated from a partner level certificate (and its signing key), the application can use only public and partner level APIs.</p>
 <p>The following table shows the relationship between the certificate (and signing key) privilege level and the API privilege level.</p>
 
+<p align="center" class="Table"><strong>Table: API levels allowed in specific certificate privilege levels</strong></p>
 <table>
-       <caption>Table: API levels allowed in specific certificate privilege levels</caption>
 <tbody>
 <tr>
        <th>Certificate privilege level</th>
 
 <p>The following figure illustrates the signature and certificate flow.</p>
 
-<p class="figure">Figure: Signature flow</p>
+<p align="center"><strong>Figure: Signature flow</strong></p>
 <p align="center"><img src="../../images/signature_flow.png" alt="Signature flow" /></p>
 
 <p>The testing distributor certificate and its signing key with the public level are preloaded in the Tizen Studio. The author certificate and its signing key can also be created in the Tizen Studio. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">Working with the Certificate Profile</a>.</p>
 
 <p>The following figure shows the signature file structure.</p>
 
-<p class="figure">Figure: Signature file structure</p>
+<p align="center"><strong>Figure: Signature file structure</strong></p>
 <p align="center"><img src="../../images/signature_structure.png" alt="Signature file structure" /></p>
 
 
index dfc59f6..3e2ce4d 100644 (file)
 
 <p>The following table defines the Tizen mobile native API layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts as reference sources for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Except as noted, the mobile native APIs are available since Tizen 2.3.</td>
-    </tr>
-   </tbody>
-  </table>
-
+      <div class="note">
+        <strong>Note</strong>
+        Except as noted, the mobile native APIs are available since Tizen 2.3.
+    </div>
 
+<p align="center" class="Table"><strong>Table: Mobile native API modules</strong></p>
 <table border="1" style="width: 100%"> 
-         <caption>Table: Mobile native API modules</caption>
        <tbody> 
                <tr> 
                        <th>API module</th>                                     
         </tr> 
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
-                       <td>Provides a library to process files in the <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
+                       <td>Provides a library to process files in the <code>.zip</code> format. It can be used to zip, unzip and compress files.</td>
         </tr> 
                <tr>
        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
         </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a></td>
-                       <td>Maps MIME types to file extensions and vice versa. For example, the <span style="font-family: Courier New,Courier,monospace;">.jpeg</span> file extension is mapped to the <span style="font-family: Courier New,Courier,monospace;">image/jpeg</span> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
+                       <td>Maps MIME types to file extensions and vice versa. For example, the <code>.jpeg</code> file extension is mapped to the <code>image/jpeg</code> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
         </tr>  
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
 
 <p>The following table describes the API modules in the wearable profile and the functionality of all their submodule APIs within that module. The table also acts as reference sources for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Except as noted, the wearable native APIs are available since Tizen 2.3.1.</td>
-    </tr>
-   </tbody>
-  </table>
-         
-<table border="1" style="width: 100%"> 
-         <caption>Table: Wearable native API modules</caption>
-       <tbody> 
+      <div class="note">
+        <strong>Note</strong>
+        Except as noted, the wearable native APIs are available since Tizen 2.3.1.
+    </div>
+  
+<p align="center" class="Table"><strong>Table: Wearable native API modules</strong></p> 
+<table border="1" style="width: 100%">
+       <tbody>
                <tr> 
                        <th>API module</th>                                     
                        <th>API submodule</th> 
         </tr> 
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
-                       <td>Provides a library to process files in the <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
+                       <td>Provides a library to process files in the <code>.zip</code> format. It can be used to zip, unzip and compress files.</td>
         </tr> 
                <tr>
        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
                <tr>
                        <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a></td>
-                       <td>Maps MIME types to file extensions and vice versa. For example, the <span style="font-family: Courier New,Courier,monospace;">.jpeg</span> file extension is mapped to the <span style="font-family: Courier New,Courier,monospace;">image/jpeg</span> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
+                       <td>Maps MIME types to file extensions and vice versa. For example, the <code>.jpeg</code> file extension is mapped to the <code>image/jpeg</code> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
                        <td rowspan="2">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, and access the EXIF information of an image file.
                        <p>Guides:</p>
                        <ul>
index c1251dc..fa66cb6 100644 (file)
 
 <h2 id="app_lifecycle">Application Life-cycle</h2>
 
-<p>The Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. As the application is starting, the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback is invoked and the application goes into a pause state. The pause state means that the application is not terminated, but is running in the background. When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callback is invoked. When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span> callback is invoked.</p>
+<p>The Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. As the application is starting, the <code>app_create_cb()</code> callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the <code>app_pause_cb()</code> callback is invoked and the application goes into a pause state. The pause state means that the application is not terminated, but is running in the background. When your application becomes visible again, the <code>app_resume_cb()</code> callback is invoked. When your application starts exiting, the <code>app_terminate_cb()</code> callback is invoked.</p>
 <p>The application state changes are managed by the underlying framework. The following figure illustrates the application states.</p>
 
-<p class="figure">Figure: Application states</p>
+<p align="center"><strong>Figure: Application states</strong></p>
 <p align="center"><img src="../../images/multiple_apps.png" alt="Application states" /></p>
 
 
 <p>The application states are described in the following table.</p>
+
+<p align="center" class="Table"><strong>Table: Application states</strong></p>
 <table>
-<caption>Table: Application states</caption>
 <tbody>
 <tr>
        <th>State</th>
        <th>Description</th>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
+       <td><code>READY</code></td>
        <td>The application is launched.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td>
+       <td><code>CREATED</code></td>
        <td>The application starts the main loop.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
+       <td><code>RUNNING</code></td>
        <td>The application is running and visible to the user.</td>
 </tr><tr>
-       <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td>
+       <td><code>PAUSED</code></td>
        <td>The application is running but invisible to the user.</td>
 </tr>
 <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
+       <td><code>TERMINATED</code></td>
        <td>The application is terminated.</td>
 </tr>
 </tbody>
@@ -92,8 +93,8 @@
 <p>The location server is alive while the device is turned on and working on the best effort basis to find the current location with various positioning sources by the location method requested by the client. The positioning sources fixing the current location are based on GNSS (Global Navigation Satellite System). GNSS includes systems, such as GPS (Global Positioning System) of USA, GLONASS (Global Orbiting Navigation Satellite System) of Russia, Galileo of Europe, Beidou of China, and QZSS (Quasi-Zenith Satellite System) of Japan, as well as Wi-Fi and mobile network cell tower information. Moreover, various sensors, such as the accelerometer, gyroscope, and compass, are used to determine the location.</p>
 <p>The location server has several states according to the client requests.</p>
 
+<p align="center" class="Table"><strong>Table: Location states</strong></p>
 <table>
-<caption>Table: Location states</caption>
 <tbody>
 <tr>
        <th>State</th>
 <p>The running state is identified as all states except idle and terminated. In the running state, the power consumption is higher than in the other states because the server is working to find the location using the various positioning sources.</p>
 <p>The following figure illustrates the location service state changes.</p>
 
-<p class="figure">Figure: Location state changes</p>
+<p align="center"><strong>Figure: Location state changes</strong></p>
 <p align="center"><img src="../../images/location_states.png" alt="Location state changes" /></p>
 
 
 
 <p>The following table shows how to synchronize the states between an application and location service.</p>
 
+<p align="center" class="Table"><strong>Table: State synchronization</strong></p>
 <table>
-<caption>Table: State synchronization</caption>
 <tbody>
 <tr>
  <th>Application state</th>
  <th>Location state description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
+ <td><code>READY</code></td>
  <td>Idle</td>
  <td>Location handle has been initialized.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td>
+ <td><code>CREATED</code></td>
  <td>Idle</td>
  <td>Location handle has been created.</td>
  </tr>
   <tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
+ <td rowspan="3"><code>RUNNING</code></td>
  <td>Started</td>
  <td>Location service is started.</td>
  </tr>
  <td>Location is fixed.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td>
+ <td><code>PAUSED</code></td>
  <td>Stopped</td>
  <td>Location service has been stopped.</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
+ <td><code>TERMINATED</code></td>
  <td>Terminated</td>
  <td>Location handle has been destroyed.</td>
  </tr>
index 704746d..7499d85 100644 (file)
@@ -49,7 +49,7 @@
 
 <p>If you create a service application, you can stop the location service with an alarm and then restart the service after a specific time interval, because there are no pause and resume states for the service application. Finally, you can stop the location service when the current position is fixed after some seconds or minutes.</p>
 
-<p>The following example demonstrates how you can stop the location service using the timer with the <span style="font-family: Courier New,Courier,monospace">ecore_timer_add()</span> function:</p>
+<p>The following example demonstrates how you can stop the location service using the timer with the <code>ecore_timer_add()</code> function:</p>
 
 <pre class="prettyprint">
 #include &lt;tizen.h&gt;
@@ -201,16 +201,10 @@ main(int argc, char* argv[])
 
 <p>Tizen provides the Alarm API to trigger events whenever you want to. You can increase the life time of the device by stopping the location service with an alarm, when you have no further need for the location information or the device cannot fix the current location for a long time because its location only has weak GPS satellite, Wi-Fi, and mobile network signals.</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The application control is supported in UI applications only, so the following example cannot be reused in service applications.</td>
-    </tr>
-   </tbody>
-  </table>
+<div class="note">
+    <strong>Note</strong>
+    The application control is supported in UI applications only, so the following example cannot be reused in service applications.
+</div>
 
 <p>The following example demonstrates how you can stop the location service using an alarm:</p>
 
index 9f04bdf..d8f1815 100644 (file)
@@ -45,8 +45,8 @@
 
 <p>The location services provide different methods for determining the location, as illustrated in the following table.</p> 
 
+<p align="center" class="Table"><strong>Table: Location service methods</strong></p>
 <table>
-<caption>Table: Location service methods</caption>
 <tbody>
 <tr>
  <th>Method</th>
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">LOCATIONS_METHOD_HYBRID</span></td>
+ <td><code>LOCATIONS_METHOD_HYBRID</code></td>
  <td>GPS, Wi-Fi AP, cell information</td>
  <td>This method allows the device to use all location sources. It provides the best effort with the highest power consumption.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">LOCATIONS_METHOD_GPS</span></td>
+ <td><code>LOCATIONS_METHOD_GPS</code></td>
  <td>GPS</td>
  <td>This method is used by navigation applications requiring high accuracy. The power consumption is lower than in the hybrid method but higher than in the WPS method.</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">LOCATIONS_METHOD_WPS</span></td>
+ <td><code>LOCATIONS_METHOD_WPS</code></td>
  <td>Wi-Fi AP, cell information</td>
  <td>This method receives location information from an external positioning server that computes the approximate location based on the Wi-Fi or mobile network cell tower. It provides the lowest power consumption, and the weakest location accuracy.</td>
  </tr>
@@ -78,8 +78,8 @@
 
 <p>The following table shows how much power is consumed approximately by GPS at a standalone mode in the condition of no assistant GPS, such as SUPL (Secure User Plane Location) server.</p>
 
+<p align="center" class="Table"><strong>Table: GPS power consumption</strong></p>
 <table>
-<caption>Table: GPS power consumption</caption>
 <tbody>
 <tr>
  <th>Operation</th>
 
 <h2 id="privileges">Required Privileges</h2>
 
-<p>To use the location service, the application must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. For more information on the Tizen privileges, see <a href="../../../../org.tizen.training/html/native/details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
+<p>To use the location service, the application must declare the required privileges in the <code>tizen-manifest.xml</code> file. For more information on the Tizen privileges, see <a href="../../../../org.tizen.training/html/native/details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
 <p>For this example, the application manifest must include the following privileges:</p>
 
 <pre class="prettyprint">
index e953ff9..8154884 100644 (file)
@@ -46,7 +46,7 @@
 
 <h3>Required Privileges and Features</h3>
 
-<p>Applications that use the Network (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">wearable</a> applications) and Telephony (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">wearable</a> applications) APIs must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
+<p>Applications that use the Network (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">wearable</a> applications) and Telephony (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">wearable</a> applications) APIs must declare the required privileges in the <code>tizen-manifest.xml</code> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
 
 <p>To perform the network operations, the application manifest must include the following privileges:</p>
 
@@ -58,8 +58,8 @@
 
 <p>To perform the network operations, the device must support the following <a href="../details/app_filtering_n.htm">features</a>:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></li>
+<li><code>http://tizen.org/feature/network.wifi</code></li>
+<li><code>http://tizen.org/feature/network.telephony</code></li>
 </ul>
 
 <h3>Network Selection</h3>
@@ -70,7 +70,7 @@
 
 <p>The Connection Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing data connections. It allows you to get a state of the connection interface, such as Bluetooth, mobile network, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.</p>
 
-<p>Before your application attempts to connect to a network, it must check whether a network connection is available, by using the <span style="font-family: Courier New,Courier,monospace">connection_get_type()</span> function. This is necessary, because the device can be out of range of a network, or the user may have disabled both Wi-Fi and mobile data access.</p>
+<p>Before your application attempts to connect to a network, it must check whether a network connection is available, by using the <code>connection_get_type()</code> function. This is necessary, because the device can be out of range of a network, or the user may have disabled both Wi-Fi and mobile data access.</p>
 
 <p>The following example demonstrates how to create a connection handle and check the currently used connection type with the Connection API:</p>
 
@@ -151,7 +151,7 @@ main(int argc, char* argv[])
 
 <h3>Required Privileges</h3>
 
-<p>To download HTTP content, the application must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. The files that the application downloads from the Internet are stored in the storage of a device. The privileges are required to access the resources for downloading content and to save them to the media storage. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
+<p>To download HTTP content, the application must declare the required privileges in the <code>tizen-manifest.xml</code> file. The files that the application downloads from the Internet are stored in the storage of a device. The privileges are required to access the resources for downloading content and to save them to the media storage. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
 
 <p>To perform the HTTP download operations, the application manifest must include the following privileges:</p>
 
@@ -223,7 +223,7 @@ main(int argc, char* argv[])
 &nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, ad);
 }</pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">ecore_thread_feedback()</span> function allows the <span style="font-family: Courier New,Courier,monospace">download_thread_run_cb()</span> callback to call the <span style="font-family: Courier New,Courier,monospace">download_feedback_cb()</span> callback:</p>
+<p>The <code>ecore_thread_feedback()</code> function allows the <code>download_thread_run_cb()</code> callback to call the <code>download_feedback_cb()</code> callback:</p>
 
 <pre class="prettyprint">
 static void
@@ -340,10 +340,10 @@ download_thread_cancel_cb(void *data, Ecore_Thread *thread)
 
 <p>The following figure illustrates the download states:</p>
 
-<p class="figure">Figure: Download states</p> 
+<p align="center"><strong>Figure: Download states</strong></p> 
 <p align="center"><img alt="Download states" src="../../images/connectivity_download_state.png" /></p> 
 
-<p>The <strong>Start</strong> step begins to download content. If the queue is empty, the state is transited to downloading ( <span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_COMPLETED</span>). Otherwise, the request is queued. The application can pause, cancel, or resume the download based on user interaction. Whenever the user makes a request, the state of the download is transited accordingly to paused, canceled, or downloading.</p>
+<p>The <strong>Start</strong> step begins to download content. If the queue is empty, the state is transited to downloading (<code>DOWNLOAD_STATE_COMPLETED</code>). Otherwise, the request is queued. The application can pause, cancel, or resume the download based on user interaction. Whenever the user makes a request, the state of the download is transited accordingly to paused, canceled, or downloading.</p>
 
 <p>The following example demonstrates how to perform an HTTP download:</p>
 
@@ -472,7 +472,7 @@ main(int argc, char* argv[])
 
 <h3>Required Privileges</h3>
 
-<p>Applications that read and write to a device file system must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
+<p>Applications that read and write to a device file system must declare the required privileges in the <code>tizen-manifest.xml</code> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
 
 <p>To perform the download operations and read and write to a file system, the application manifest must include the following privileges:</p>
 
@@ -593,16 +593,10 @@ json_parse(char *file_name, void *data)
 
 <p>Libxml2 is the XML C parser and toolkit developed for the Gnome project (but usable outside the Gnome platform). It is free software available under the MIT License. XML itself is a metalanguage to design markup languages: it is a text language where semantics and structure are added to the content using extra <strong>markup</strong> information enclosed between angle brackets. HTML is the most well-known markup language. Though the library is written in C, a variety of language bindings make it available in other environments.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">For more examples and tutorials, see <a href="http://www.xmlsoft.org/tutorial/index.html" target="_blank">libxml Tutorial</a>.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
+   <div class="note">
+        <strong>Note</strong>
+        For more examples and tutorials, see <a href="http://www.xmlsoft.org/tutorial/index.html" target="_blank">libxml Tutorial</a>.
+    </div>
 
 <p>The following example comes from the libxml Tutorial. It demonstrates how to parse and validate an XML file to a tree and free the result:</p>
 
index f45c57d..4c1718d 100644 (file)
@@ -55,7 +55,7 @@
 
 <h2 id="privilege">Required Privileges and Features</h2>
 
-<p>Applications that use Wi-Fi Direct&trade; must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
+<p>Applications that use Wi-Fi Direct&trade; must declare the required privileges in the <code>tizen-manifest.xml</code> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
 
 <p>To perform the Wi-Fi Direct&trade; operations, the application manifest must include the following privileges:</p>
 
 &nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/wifidirect&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Wi-Fi Direct&trade; does not require an Internet connection, but it needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/internet</span> privilege because it uses standard sockets.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+  
+      <div class="note">
+        <strong>Note</strong>
+        Wi-Fi Direct&trade; does not require an Internet connection, but it needs the <code>http://tizen.org/privilege/internet</code> privilege because it uses standard sockets.
+    </div>
 
 <p>To perform the Wi-Fi Direct&trade; operations, the device must support the following <a href="../details/app_filtering_n.htm">features</a>:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></li>
+<li><code>http://tizen.org/feature/network.wifi</code></li>
+<li><code>http://tizen.org/feature/network.wifi.direct</code></li>
+<li><code>http://tizen.org/feature/network.wifi.direct.display</code></li>
+<li><code>http://tizen.org/feature/network.wifi.direct.service_discovery</code></li>
 </ul>
 
 <h2 id="setting">Wi-Fi Direct&trade; Settings</h2>
@@ -106,12 +100,12 @@ int error_code;
 error_code = wifi_direct_initialize();
 </pre>
 
-<p>To monitor the state of several events, the application can set state changed callbacks using the <span style="font-family: Courier New,Courier,monospace">wifi_direct_set_device_state_changed_cb()</span>, <span style="font-family: Courier New,Courier,monospace">discovery_state_changed_cb()</span>, and <span style="font-family: Courier New,Courier,monospace">wifi_direct_set_connection_state_changed_cb()</span> functions after initializing Wi-Fi Direct&trade;.</p>
+<p>To monitor the state of several events, the application can set state changed callbacks using the <code>wifi_direct_set_device_state_changed_cb()</code>, <code>discovery_state_changed_cb()</code>, and <code>wifi_direct_set_connection_state_changed_cb()</code> functions after initializing Wi-Fi Direct&trade;.</p>
 </li>
 
 <li>Activate Wi-Fi Direct&trade;.
 
-<p>Define the <span style="font-family: Courier New,Courier,monospace">device_state_changed_cb()</span> callback function, which is invoked whenever a Wi-Fi Direct&trade; local device activates or deactivates:</p> 
+<p>Define the <code>device_state_changed_cb()</code> callback function, which is invoked whenever a Wi-Fi Direct&trade; local device activates or deactivates:</p> 
 
 <pre class="prettyprint">
 /* Get the Wi-Fi Direct&trade; activation and deactivation events in device_state_changed_cb() callback */
@@ -138,7 +132,7 @@ if (error_code != WIFI_DIRECT_ERROR_NONE) {
 }
 </pre>
 
-<p>After the <span style="font-family: Courier New,Courier,monospace">wifi_direct_activate()</span> function is completed, the <span style="font-family: Courier New,Courier,monospace">device_state_changed_cb()</span> callback is invoked.</p>
+<p>After the <code>wifi_direct_activate()</code> function is completed, the <code>device_state_changed_cb()</code> callback is invoked.</p>
 </li>
 <li>Start the discovery to find nearby peer devices:
 
@@ -153,12 +147,12 @@ error_code = wifi_direct_set_discovery_state_changed_cb(discovery_state_changed_
 wifi_direct_start_discovery(false, 0);
 </pre>
 
-<p>When the Wi-Fi Direct&trade; discovery state changes, the <span style="font-family: Courier New,Courier,monospace">discovery_state_changed_cb()</span> function is called.</p>
+<p>When the Wi-Fi Direct&trade; discovery state changes, the <code>discovery_state_changed_cb()</code> function is called.</p>
 </li>
 
 <li>Fetch the list of peers.
 
-<p>Get the list of peers with the <span style="font-family: Courier New,Courier,monospace">wifi_direct_foreach_discovered_peers()</span> function. It invokes the <span style="font-family: Courier New,Courier,monospace">wifi_direct_discovered_peer_cb()</span> callback, which provides information about the peers that Wi-Fi P2P has detected:</p>
+<p>Get the list of peers with the <code>wifi_direct_foreach_discovered_peers()</code> function. It invokes the <code>wifi_direct_discovered_peer_cb()</code> callback, which provides information about the peers that Wi-Fi P2P has detected:</p>
 
 <pre class="prettyprint">
 char * mac_address = NULL;
@@ -228,7 +222,7 @@ connection_state_changed_cb(wifi_direct_error_e error_code,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISASSOCIATION_IND:
 &nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCONNECTION_IND:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Peer : [%s] disconnected.\n&quot;, mac_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Peer: [%s] disconnected.\n&quot;, mac_address);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_IN_PROGRESS:
@@ -288,7 +282,7 @@ wifi_direct_unset_connection_state_changed_cb(NULL);
 </li>
 <li>Release the Wi-Fi Direct&trade;.
 
-<p>Power off the local device using the <span style="font-family: Courier New,Courier,monospace">wifi_direct_deactivate()</span> function:</p>
+<p>Power off the local device using the <code>wifi_direct_deactivate()</code> function:</p>
 
 <pre class="prettyprint">
 /* Release Wi-Fi Direct&trade; */
@@ -314,7 +308,7 @@ wifi_direct_deinitialize();
 
 <p>Wi-Fi Direct&trade; is a new technology defined by the Wi-Fi Alliance aimed at enhancing direct device to device communications in Wi-Fi. Wi-Fi Direct&trade; can be used to directly connect mobile phones, tablets, and PCs to peripherals, such as cameras, printers, gaming devices, or a wireless mouse, without the need for an access point. Devices can make a one-to-one connection, or a group of several devices can connect.</p>
 
-<p class="figure">Figure: Wi-Fi Direct&trade;</p> 
+<p align="center"><strong>Figure: Wi-Fi Direct&trade;</strong></p> 
 <p align="center"><img alt="Wi-Fi Direct" src="../../images/connectivity_wifidirect.png" /></p>
 
 <p>Direct device to device connectivity was already possible in the original IEEE 802.11 standard by means of the ad-hoc mode of operation. However, this never became widely deployed. Wi-Fi Direct&trade; takes a different approach: in it, one of the devices acts as an access point. This means that legacy Wi-Fi devices can seamlessly connect to Wi-Fi Direct&trade; devices.</p>
@@ -323,7 +317,7 @@ wifi_direct_deinitialize();
 
 <p>The IEEE 802.11z amendment is a mechanism that makes it possible to directly transfer data between 2 Wi-Fi clients that are part of the same Wi-Fi network.</p>
   
-<p class="figure">Figure: TDLS</p> 
+<p align="center"><strong>Figure: TDLS</strong></p> 
 <p align="center"><img alt="TDLS" src="../../images/connectivity_tdls.png" /></p> 
 
 <p>Usually, in a Wi-Fi network, data is transferred from one client to another through an access point (AP). The IEEE 802.11z amendment defines mechanisms that allow IEEE 802.11 to set up a direct link between client devices while also remaining associated with the AP. These mechanisms are referred to as Tunneled Direct Link Setup (TDLS). This reduces the amount of traffic that is transferred in the network and prevents congestion at the AP.</p>
index 0a45fba..ebf15ae 100644 (file)
@@ -44,7 +44,7 @@
 
 <h2 id="privilege">Required Privileges and Features</h2>
 
-<p>Applications that access network information and statistics must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
+<p>Applications that access network information and statistics must declare the required privileges in the <code>tizen-manifest.xml</code> file. For more information on the Tizen privileges, see <a href="../details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
 
 <p>To perform the network operations, the application manifest must include the following privileges:</p>
 
 <ul>
 <li>To use Wi-Fi:
        <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></li>
+       <li><code>http://tizen.org/feature/network.wifi</code></li>
+       <li><code>http://tizen.org/feature/network.wifi.direct</code></li>
+       <li><code>http://tizen.org/feature/network.wifi.direct.display</code></li>
+       <li><code>http://tizen.org/feature/network.wifi.direct.service_discovery</code></li>
        </ul>
 </li>
 <li>To use the mobile network:
        <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></li>
+       <li><code>http://tizen.org/feature/network.telephony</code></li>
        </ul>
 </li>
 </ul>
 <p>The Connection API supports the following network types:</p>
 
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_DISCONNECTED</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_WIFI</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_CELLULAR</span> (indicates the mobile network)</li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_ETHERNET</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_BT</span></li>
+<li><code>CONNECTION_TYPE_DISCONNECTED</code></li>
+<li><code>CONNECTION_TYPE_WIFI</code></li>
+<li><code>CONNECTION_TYPE_CELLULAR</code> (indicates the mobile network)</li>
+<li><code>CONNECTION_TYPE_ETHERNET</code></li>
+<li><code>CONNECTION_TYPE_BT</code></li>
 </ul>
 
 <p>The following example demonstrates how to monitor network connection changes:</p>
@@ -128,27 +128,27 @@ get_network_connection()
 
 <p>The Telephony Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">wearable</a> applications) is composed of Call (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications), SIM (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications), Network (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications), and Modem (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications) APIs for the mobile network service.</p>
 
-<p>The Telephony Network API provides the detailed mobile network information: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type. The <span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span> function gets the current network state of the telephony service. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> enumerator values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
+<p>The Telephony Network API provides the detailed mobile network information: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type. The <code>telephony_network_get_service_state()</code> function gets the current network state of the telephony service. It returns one of the <code>telephony_network_service_state_e</code> enumerator values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
 
-<p>The following table indicates the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> enumeration that has the mobile network service state.</p>
+<p>The following table indicates the <code>telephony_network_service_state_e</code> enumeration that has the mobile network service state.</p>
 
+<p align="center" class="Table"><strong>Table: Mobile network service states</strong></p>
 <table>
-<caption>Table: Mobile network service states</caption>
 <tbody>
 <tr>
  <th>Enumeration</th>
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span></td>
+ <td><code>TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</code></td>
  <td>In service</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE</span></td>
+ <td><code>TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE</code></td>
  <td>Out of service</td>
  </tr>
   <tr>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY</span></td>
+ <td><code>TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY</code></td>
  <td>Only emergency call is allowed</td>
  </tr>
  </tbody></table>
@@ -234,12 +234,12 @@ main(int argc, char* argv[])
 
 <p>Another way to get the mobile network state and protect the user against unreasonable use of the mobile network resources is to register a notification callback.</p>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function allows the application to listen for the changes in the mobile network state, and also provides mobile network information by specifying the notification ID when the mobile network state changes.</p>
+<p>The <code>telephony_set_noti_cb()</code> function allows the application to listen for the changes in the mobile network state, and also provides mobile network information by specifying the notification ID when the mobile network state changes.</p>
 
 <p>The following table indicates the available notification IDs.</p>
 
+<p align="center" class="Table"><strong>Table: Notification IDs</strong></p>
 <table>
-<caption>Table: Notification IDs</caption>
 <tbody>
 <tr>
  <th>Changed state</th>
@@ -247,39 +247,39 @@ main(int argc, char* argv[])
 </tr>
  <tr>
  <td>Network service state</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_SERVICE_STATE</code></td>
  </tr>
  <tr>
  <td>Cell ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_CELLID</code></td>
  </tr>
   <tr>
  <td>Roaming status</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</code></td>
  </tr>
   <tr>
  <td>Signal strength</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</code></td>
  </tr>
   <tr>
  <td>Network name</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_NETWORK_NAME</code></td>
  </tr>
   <tr>
  <td>Packet-switched type</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_PS_TYPE</code></td>
  </tr>
   <tr>
  <td>Default data subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</code></td>
  </tr>
   <tr>
  <td>Default subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</code></td>
  </tr> 
  </tbody></table>
        
-<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications) defines the available notification IDs. The callback function registered by the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function (<span style="font-family: Courier New,Courier,monospace">network_service_state_noti_cb()</span> in the following example) delivers change notifications for a network asynchronously.</p>
+<p>The <code>telephony_noti_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications) defines the available notification IDs. The callback function registered by the <code>telephony_set_noti_cb()</code> function (<code>network_service_state_noti_cb()</code> in the following example) delivers change notifications for a network asynchronously.</p>
  
 <p>The following example demonstrates how to register a notification for the mobile network state change:</p>
 
@@ -339,17 +339,17 @@ app_terminate(void *data)
 
 <h3>Getting the Mobile (Cellular) Network Connection State</h3>
 
-<p>The application can use the <span style="font-family: Courier New,Courier,monospace">connection_get_cellular_state()</span> function to get the mobile connection state.</p>
+<p>The application can use the <code>connection_get_cellular_state()</code> function to get the mobile connection state.</p>
 
 <p>The network connection can be in one of the following states:</p>
 
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_CELLULAR_STATE_OUT_OF_SERVICE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_CELLULAR_STATE_FLIGHT_MODE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_CELLULAR_STATE_ROAMING_OFF</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_CELLULAR_STATE_CALL_ONLY_AVAILABLE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_CELLULAR_STATE_AVAILABLE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_CELLULAR_STATE_CONNECTED</span></li>
+<li><code>CONNECTION_CELLULAR_STATE_OUT_OF_SERVICE</code></li>
+<li><code>CONNECTION_CELLULAR_STATE_FLIGHT_MODE</code></li>
+<li><code>CONNECTION_CELLULAR_STATE_ROAMING_OFF</code></li>
+<li><code>CONNECTION_CELLULAR_STATE_CALL_ONLY_AVAILABLE</code></li>
+<li><code>CONNECTION_CELLULAR_STATE_AVAILABLE</code></li>
+<li><code>CONNECTION_CELLULAR_STATE_CONNECTED</code></li>
 </ul>
 
 <p>The following example demonstrates how to get the mobile network state:</p>
@@ -384,14 +384,14 @@ default:
 
 <h3>Getting Wi-Fi Connection State</h3>
 
-<p>The application can use the <span style="font-family: Courier New,Courier,monospace">connection_get_wifi_state()</span> function to get the Wi-Fi connection state.</p>
+<p>The application can use the <code>connection_get_wifi_state()</code> function to get the Wi-Fi connection state.</p>
 
 <p>The Wi-Fi connection can be in one of the following states:</p>
 
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_WIFI_STATE_DEACTIVATED</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_WIFI_STATE_DISCONNECTED</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CONNECTION_WIFI_STATE_CONNECTED</span></li>
+<li><code>CONNECTION_WIFI_STATE_DEACTIVATED</code></li>
+<li><code>CONNECTION_WIFI_STATE_DISCONNECTED</code></li>
+<li><code>CONNECTION_WIFI_STATE_CONNECTED</code></li>
 </ul>
 
 <p>The following example demonstrates how to get the Wi-Fi network state:</p>
@@ -419,11 +419,11 @@ default:
 
 <p>The Connection Statistics API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">wearable</a> applications) provides functions for getting statistical information, such as the amount of sent or received data. The API also provides functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).</p>
 
-<p>Connection statistics include the amount of total sent and received data and the last sent and received data. The parameters of the <span style="font-family: Courier New,Courier,monospace">connection_get_statistics()</span> function determine which connection type and which statistics are gathered:</p>
+<p>Connection statistics include the amount of total sent and received data and the last sent and received data. The parameters of the <code>connection_get_statistics()</code> function determine which connection type and which statistics are gathered:</p>
 
 <ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">connection_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">wearable</a> applications) defines the connection types: <span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_WIFI</span> is Wi-Fi and <span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_CELLULAR</span> is the mobile network. Only Wi-Fi and mobile network connections are supported in the statistics.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">connection_statistics_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">wearable</a> applications) defines the statistics type.</li>
+<li>The <code>connection_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">wearable</a> applications) defines the connection types: <code>CONNECTION_TYPE_WIFI</code> is Wi-Fi and <code>CONNECTION_TYPE_CELLULAR</code> is the mobile network. Only Wi-Fi and mobile network connections are supported in the statistics.</li>
+<li>The <code>connection_statistics_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">wearable</a> applications) defines the statistics type.</li>
 </ul>
 
 <p>The following example demonstrates how to get received data and sent data for mobile connections:</p>
index 7c91623..bfef44b 100644 (file)
@@ -50,7 +50,7 @@
 
 <p>The following figure illustrates the contact structure. The example shows 3 instances of the same contact stored in different address books. Person1 is an aggregation of all 3 instances (Contact1, Contact2, and Contact3).</p>
 
-<p class="figure">Figure: Contact structure</p> 
+<p align="center"><strong>Figure: Contact structure</strong></p> 
 <p align="center"><img alt="Contact structure" src="../../images/app_contacts_contact_structure.png" /></p> 
 
 <h2 id="records">Records and Views</h2>
 
 <p>Records contain properties of basic types:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">integer</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">string</span></li> 
-<li><span style="font-family: Courier New,Courier,monospace">boolean</span></li> 
-<li><span style="font-family: Courier New,Courier,monospace">long integer</span></li> 
-<li><span style="font-family: Courier New,Courier,monospace">long long integer</span> (<span style="font-family: Courier New,Courier,monospace">lli</span>)</li>
-<li><span style="font-family: Courier New,Courier,monospace">double</span></li>
+<li><code>integer</code></li>
+<li><code>string</code></li> 
+<li><code>boolean</code></li> 
+<li><code>long integer</code></li> 
+<li><code>long long integer</code> (<code>lli</code>)</li>
+<li><code>double</code></li>
 </ul>
 
 <p>The following table lists the functions for setting and getting different record property types.</p>
 
+<p align="center" class="Table"><strong>Table: Functions for specific record property types</strong></p>
 <table>
-<caption>Table: Functions for specific record property types</caption>
 <tbody>
 <tr>
  <th>Property type</th>
  <th>Getter function</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_str()</span></td>
+ <td><code>string</code></td>
+ <td><code>contacts_record_set_str()</code></td>
+ <td><code>contacts_record_get_str()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_int()</span></td>
+ <td><code>integer</code></td>
+ <td><code>contacts_record_set_int()</code></td>
+ <td><code>contacts_record_get_int()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_bool()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_bool()</span></td>
+ <td><code>boolean</code></td>
+ <td><code>contacts_record_set_bool()</code></td>
+ <td><code>contacts_record_get_bool()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_lli()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_lli()</span></td>
+ <td><code>long long integer</code></td>
+ <td><code>contacts_record_set_lli()</code></td>
+ <td><code>contacts_record_get_lli()</code></td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_double()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_double()</span></td>
+ <td><code>double</code></td>
+ <td><code>contacts_record_set_double()</code></td>
+ <td><code>contacts_record_get_double()</code></td>
  </tr>
  </tbody></table>
 
-<p>A view is a structure describing the record properties, where the property elements have their data types and names. For example, the <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view describes the properties of the contact record, part of which is listed in the following table.</p>
+<p>A view is a structure describing the record properties, where the property elements have their data types and names. For example, the <code>_contacts_contact</code> view describes the properties of the contact record, part of which is listed in the following table.</p>
 
+<p align="center" class="Table"><strong>Table: Some contact record properties</strong></p>
 <table>
-<caption>Table: Some contact record properties</caption>
 <tbody>
 <tr>
  <th>Property ID</th>
  <th>Description</th>
 </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">uri</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+ <td><code>uri</code></td>
+ <td><code>string</code></td>
  <td>Identifier of this contact view</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">id</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
+ <td><code>id</code></td>
+ <td><code>integer</code></td>
  <td>Database record ID of the contact</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">display_name</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+ <td><code>display_name</code></td>
+ <td><code>string</code></td>
  <td>Display name of the contact</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">is_favorite</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">boolean</span> value indicating whether the contact is a favorite</td>
+ <td><code>is_favorite</code></td>
+ <td><code>boolean</code></td>
+ <td><code>boolean</code> value indicating whether the contact is a favorite</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+ <td><code>name</code></td>
  <td>Record</td>
- <td><span style="font-family: Courier New,Courier,monospace">_contacts_name</span> child record containing the contact name details</td>
+ <td><code>_contacts_name</code> child record containing the contact name details</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">company</span></td>
+ <td><code>company</code></td>
  <td>Record</td>
- <td><span style="font-family: Courier New,Courier,monospace">_contacts_company</span> child record containing the contact&#39;s company details</td>
+ <td><code>_contacts_company</code> child record containing the contact&#39;s company details</td>
  </tr>
  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">address</span></td>
+ <td><code>address</code></td>
  <td>Record</td>
- <td><span style="font-family: Courier New,Courier,monospace">_contacts_address</span> child record containing the contact address details</td>
+ <td><code>_contacts_address</code> child record containing the contact address details</td>
  </tr>
  </tbody></table>
 
-<p>Every view has a special field (<span style="font-family: Courier New,Courier,monospace">_uri</span>) that uniquely identifies the view. In many cases, you must provide the <span style="font-family: Courier New,Courier,monospace">_uri</span> value to indicate what type of record you want to operate on. The following example code creates a contact record and obtains the record handle using the <span style="font-family: Courier New,Courier,monospace">_contacts_contact._uri</span> property:</p>
+<p>Every view has a special field (<code>_uri</code>) that uniquely identifies the view. In many cases, you must provide the <code>_uri</code> value to indicate what type of record you want to operate on. The following example code creates a contact record and obtains the record handle using the <code>_contacts_contact._uri</code> property:</p>
 
 <pre class="prettyprint">
 contacts_record_h contact = NULL;
index 67a3993..c86e135 100644 (file)
@@ -44,7 +44,7 @@
 
 <h2 id="retrieving">Retrieving Groups</h2>
 
-<p>A group is a collection of contacts from the same address book. Retrieving a single group is very similar to retrieving a single person: use the same function (<span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span>) while setting the first parameter to the relevant group view (<span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span>).</p>
+<p>A group is a collection of contacts from the same address book. Retrieving a single group is very similar to retrieving a single person: use the same function (<code>contacts_db_get_record()</code>) while setting the first parameter to the relevant group view (<code>_contacts_group._uri</code>).</p>
 
 <pre class="prettyprint">
 contacts_record_h group;
@@ -62,7 +62,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 <ol>
 <li>Create a filter handle.</li>
 <li>Add search conditions to the filter handle.
-<p>As shown in the example, the search strings and the <span style="font-family: Courier New,Courier,monospace">OR</span> operator are added to the filter handle.</p></li>
+<p>As shown in the example, the search strings and the <code>OR</code> operator are added to the filter handle.</p></li>
 <li>Make a query with the filter, and apply the query to the Contacts database.</li>
 </ol>
 
@@ -89,7 +89,7 @@ error_code = contacts_filter_destroy(filter);
 error_code = contacts_query_destroy(query);
 </pre>
 
-<p>The third parameter of the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function defines a limit for the number of results. Since the parameter is set to <span style="font-family: Courier New,Courier,monospace">0</span> in the above example, the function returns all the groups matching the query.</p>
+<p>The third parameter of the <code>contacts_db_get_records_with_query()</code> function defines a limit for the number of results. Since the parameter is set to <code>0</code> in the above example, the function returns all the groups matching the query.</p>
 
 <h2 id="updating">Updating Groups</h2>
 
@@ -105,7 +105,7 @@ contacts_record_h group = NULL;
 error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
 </pre>
 
-<p>You can also retrieve the group using a search function with queries, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
+<p>You can also retrieve the group using a search function with queries, such as <code>contacts_db_get_records_with_query()</code>.</p>
 </li>
 <li>Set the properties to be changed.
 <p>The following example changes the name and image of the group:</p>
@@ -126,7 +126,7 @@ error_code = contacts_db_update_record(group);
 </pre>
 </li>
 <li>Destroy the handle and release its resources.
-<p>If you set the second parameter to <span style="font-family: Courier New,Courier,monospace">true</span>, the function destroys any child records automatically.</p>
+<p>If you set the second parameter to <code>true</code>, the function destroys any child records automatically.</p>
 
 <pre class="prettyprint">
 error_code = contacts_record_destroy(group, true);
@@ -138,7 +138,7 @@ error_code = contacts_record_destroy(group, true);
 <p>To create a new group, you must create a group handle, set the group properties, insert the group into the database, and destroy the group handle:</p>
 <ol>
 <li>Create a group handle.
-<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function specifies the record type to be created. In this case, the value is the <span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span> property, because you are creating a group. The second parameter stores the new group handle.</p>
+<p>The first parameter of the <code>contacts_record_create()</code> function specifies the record type to be created. In this case, the value is the <code>_contacts_group._uri</code> property, because you are creating a group. The second parameter stores the new group handle.</p>
 <pre class="prettyprint">
 contacts_record_h group = NULL;
 
@@ -146,9 +146,9 @@ error_code = contacts_record_create(_contacts_group._uri, &amp;group);
 </pre>
 </li>
 <li>Set the group properties.
-<p>You can set the group properties using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_XXX()</span> functions with the relevant properties as the second parameter. Depending on the property type, you must use the proper functions, respectively.</p>
+<p>You can set the group properties using the <code>contacts_record_set_XXX()</code> functions with the relevant properties as the second parameter. Depending on the property type, you must use the proper functions, respectively.</p>
 <ul>
-<li>If you set the group name, which is a <span style="font-family: Courier New,Courier,monospace">string</span> type, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_group.name</span> property as the second parameter:
+<li>If you set the group name, which is a <code>string</code> type, use the <code>contacts_record_set_str()</code> function with the <code>_contacts_group.name</code> property as the second parameter:
 
 <pre class="prettyprint">
 error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Neighbors&quot;);
@@ -173,7 +173,7 @@ error_code = contacts_db_insert_record(group, &amp;added_group_id);
 </pre>
 </li>
 <li>Destroy the group handle and release its resources.
-<p>If you set the second parameter to <span style="font-family: Courier New,Courier,monospace">true</span>, the function destroys any child records automatically.</p>
+<p>If you set the second parameter to <code>true</code>, the function destroys any child records automatically.</p>
 <pre class="prettyprint">
 error_code = contacts_record_destroy(group, true);
 </pre>
@@ -181,7 +181,7 @@ error_code = contacts_record_destroy(group, true);
 </ol>
 
 <h2 id="deleting">Deleting a Group</h2>
-<p>You can delete a group record from the Contacts database exactly like you delete a person: use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function. The difference is the first parameter, which for the group deletion is set to the group property (<span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span>). The ID of the group to be deleted is given as the second parameter.</p>
+<p>You can delete a group record from the Contacts database exactly like you delete a person: use the <code>contacts_db_delete_record()</code> function. The difference is the first parameter, which for the group deletion is set to the group property (<code>_contacts_group._uri</code>). The ID of the group to be deleted is given as the second parameter.</p>
 
 <pre class="prettyprint">
 int group_id = ... /* Get the group ID */
@@ -190,7 +190,7 @@ error_code = contacts_db_delete_record(_contacts_group._uri, group_id);
 </pre>
 
 <h2 id="managing">Managing Group Members</h2>
-<p>Group members are contacts from the same address book. With a contact ID and group ID on hand, you can add and remove contacts within a group using the <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_group_remove_contact()</span> functions:</p>
+<p>Group members are contacts from the same address book. With a contact ID and group ID on hand, you can add and remove contacts within a group using the <code>contacts_group_add_contact()</code> and <code>contacts_group_remove_contact()</code> functions:</p>
 <ul>
 <li>Adding a group member:
 <pre class="prettyprint">
index 9afc8ea..181feab 100644 (file)
@@ -45,7 +45,7 @@
 
 <h2 id="initializing">Connecting to the Contact Service</h2>
 
-<p>To initialize the contact service and use the functions and data types of the Contacts API, you must include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application. To be able to access the Contacts database and operations, such as fetching, inserting, or updating, you must also connect to the contact service by calling the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function.</p>
+<p>To initialize the contact service and use the functions and data types of the Contacts API, you must include the <code>&lt;contacts.h&gt;</code> header file in your application. To be able to access the Contacts database and operations, such as fetching, inserting, or updating, you must also connect to the contact service by calling the <code>contacts_connect()</code> function.</p>
 
 <pre class="prettyprint">
 #include &lt;contacts.h&gt;
@@ -57,15 +57,11 @@ if (error_code != CONTACTS_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to connect contacts: error code = %d&quot;, error_code);
 </pre>
 
-<p>When you no longer need it, disconnect from the contact service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function.</p>
-
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To use the Contacts API, your application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file in the application package:
+<p>When you no longer need it, disconnect from the contact service using the <code>contacts_disconnect()</code> function.</p>
+  
+      <div class="note">
+        <strong>Note</strong>
+        To use the Contacts API, your application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file in the application package:
         
 <pre class="prettyprint">
 &lt;privileges&gt;
@@ -73,10 +69,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/contact.write&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
-        </td> 
-    </tr> 
-   </tbody> 
-  </table>
+    </div>
 
 <h2 id="retrieving">Retrieving Persons</h2>
 
@@ -84,7 +77,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 
 <ul>
 <li>
-<p>If a person ID is known in your application, you can retrieve the person&#39;s details using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function, whose first parameter is the <span style="font-family: Courier New,Courier,monospace">_contacts_person._uri</span> view:</p>
+<p>If a person ID is known in your application, you can retrieve the person&#39;s details using the <code>contacts_db_get_record()</code> function, whose first parameter is the <code>_contacts_person._uri</code> view:</p>
 
 <pre class="prettyprint">
 contacts_record_h person = NULL;
@@ -98,7 +91,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 </pre>
 </li>
 <li>
-<p>If you need to retrieve a list of persons matching a search keyword without knowing a specific person ID, you can use the <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function. The third parameter is the offset, meaning the record index from which to search, and the fourth parameter sets a limit to the number of results, where 0 means that all the matched records are retrieved.</p>
+<p>If you need to retrieve a list of persons matching a search keyword without knowing a specific person ID, you can use the <code>contacts_db_search_records()</code> function. The third parameter is the offset, meaning the record index from which to search, and the fourth parameter sets a limit to the number of results, where 0 means that all the matched records are retrieved.</p>
 
 <p>The following example shows how to find all person records that contain the keyword &quot;John&quot;.</p>
 
@@ -114,9 +107,9 @@ if (error_code != CONTACTS_ERROR_NONE)
 </li>
 <li>
 <p>If you have more complex search requirements, you can use queries and filters to retrieve records:</p>
-<ul><li>Queries are used to retrieve data that satisfies given criteria, for example, an <span style="font-family: Courier New,Courier,monospace">integer</span> property being greater than a given value, or a <span style="font-family: Courier New,Courier,monospace">string</span> property containing a given substring.</li>
-<li>Filters specify the search conditions for queries. When creating a filter, you must specify the filter type using the <span style="font-family: Courier New,Courier,monospace">_uri</span> property.
-<p>Conditions can be joined by using the logical operators <span style="font-family: Courier New,Courier,monospace">AND</span> and <span style="font-family: Courier New,Courier,monospace">OR</span>. For contact filters, there are enumerations of operators and conditions for each type: <span style="font-family: Courier New,Courier,monospace">contacts_filter_operator_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga2111e378d844cc7659ed5b4ff96bc433">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga2111e378d844cc7659ed5b4ff96bc433">wearable</a> applications), <span style="font-family: Courier New,Courier,monospace">contacts_match_int_flag_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#gad0453305468fab6453b07183e31628ba">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#gad0453305468fab6453b07183e31628ba">wearable</a> applications), and <span style="font-family: Courier New,Courier,monospace">contacts_match_str_flag_e</span> (in <a href="../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">mobile</a> and <a href="../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">wearable</a> applications).</p>
+<ul><li>Queries are used to retrieve data that satisfies given criteria, for example, an <code>integer</code> property being greater than a given value, or a <code>string</code> property containing a given substring.</li>
+<li>Filters specify the search conditions for queries. When creating a filter, you must specify the filter type using the <code>_uri</code> property.
+<p>Conditions can be joined by using the logical operators <code>AND</code> and <code>OR</code>. For contact filters, there are enumerations of operators and conditions for each type: <code>contacts_filter_operator_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga2111e378d844cc7659ed5b4ff96bc433">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga2111e378d844cc7659ed5b4ff96bc433">wearable</a> applications), <code>contacts_match_int_flag_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#gad0453305468fab6453b07183e31628ba">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#gad0453305468fab6453b07183e31628ba">wearable</a> applications), and <code>contacts_match_str_flag_e</code> (in <a href="../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">mobile</a> and <a href="../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">wearable</a> applications).</p>
 </li>
 </ul>
 <p>The following code demonstrates how to retrieve the contacts associated with a person using queries and filters. As a person can be associated with 1 or more contacts, the number of the contact records for the person can be 1 or more.</p>
@@ -155,7 +148,7 @@ _get_associated_contacts(contacts_record_h record, contacts_list_h *associated_c
 }
 </pre>
 
-<p>The following example uses queries and filters to retrieve a person&#39;s default phone number. If a person is associated with multiple phone numbers, one of them is defined as the default phone number. To determine the default phone number, you can check the <span style="font-family: Courier New,Courier,monospace">is_primary_default</span> property of the <span style="font-family: Courier New,Courier,monospace">_contacts_person_number</span> view. For the default phone number, the property is set to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<p>The following example uses queries and filters to retrieve a person&#39;s default phone number. If a person is associated with multiple phone numbers, one of them is defined as the default phone number. To determine the default phone number, you can check the <code>is_primary_default</code> property of the <code>_contacts_person_number</code> view. For the default phone number, the property is set to <code>true</code>.</p>
 
 <pre class="prettyprint">
 static bool
@@ -208,7 +201,7 @@ _get_default_phone_number(contacts_record_h record, char **default_phone_number)
 <p>To update information of the existing contacts, you must retrieve, change, and save the information you want to update:</p>
 
 <ol>
-<li>Retrieve the contact you want to update using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the contact ID as the second parameter. Alternatively, you can also retrieve the contact using a search function, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.
+<li>Retrieve the contact you want to update using the <code>contacts_db_get_record()</code> function with the contact ID as the second parameter. Alternatively, you can also retrieve the contact using a search function, such as <code>contacts_db_get_records_with_query()</code>.
 <pre class="prettyprint">
 int contact_id = ... /* Get the contact ID */
 contacts_record_h contact = NULL;
@@ -228,7 +221,7 @@ error_code = contacts_record_set_str(name, _contacts_name.first, &quot;Mark&quot
 </pre>
 </li>
 <li>The following example set a new birthday event for the contact by updating another child record.
-<p>The example assumes that the birthday is the only event for the contact, meaning that the event record can be retrieved using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function with index 0 as the second parameter. If the contact has multiple events, you must iterate through them.</p>
+<p>The example assumes that the birthday is the only event for the contact, meaning that the event record can be retrieved using the <code>contacts_record_get_child_record_at_p()</code> function with index 0 as the second parameter. If the contact has multiple events, you must iterate through them.</p>
 <pre class="prettyprint">
 contacts_record_h event = NULL;
 /* Retrieve the contact&#39;s birthday event record */
@@ -238,7 +231,7 @@ int new_date = 1990 * 10000 + 6 * 100 + 21;
 error_code = contacts_record_set_int(event, _contacts_event.date, new_date);
 </pre>
 </li>
-<li>The following example shows the iteration to change the country in all contact addresses, which are child records of the contact. Each address can be traversed by using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function.
+<li>The following example shows the iteration to change the country in all contact addresses, which are child records of the contact. Each address can be traversed by using the <code>contacts_record_get_child_record_at_p()</code> function.
 
 <pre class="prettyprint">
 int contact_id = ... /* Get the contact ID */
@@ -257,7 +250,7 @@ for (i = 0; i &lt; address_num; i++) {
 </li>
 </ul>
 </li>
-<li>Apply the changes to the database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function:
+<li>Apply the changes to the database using the <code>contacts_db_update_record()</code> function:
 
 <pre class="prettyprint">
 error_code = contacts_db_update_record(contact);
@@ -266,19 +259,14 @@ if (error_code != CONTACTS_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to update record: error code = %d&quot;, error_code);
 </pre>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_XXX()</span> functions only change the data in the memory object, not in the Contacts database. Normally, to update the database, you must update each record separately using the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function. However, if you retrieve a child record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function, you only need to update the parent record to the database; the child record is updated automatically with the parent record.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+      <div class="note">
+        <strong>Note</strong>
+        The <code>contacts_record_set_XXX()</code> functions only change the data in the memory object, not in the Contacts database. Normally, to update the database, you must update each record separately using the <code>contacts_db_update_record()</code> function. However, if you retrieve a child record using the <code>contacts_record_get_child_record_at_p()</code> function, you only need to update the parent record to the database; the child record is updated automatically with the parent record.
+    </div>
+  
 </li>
-<li>When no longer needed, destroy the contact handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function.
-<p>If you set the second parameter to <span style="font-family: Courier New,Courier,monospace">true</span>, the function destroys any child records automatically, irrespective of how the child records were added (individually or along with their parent record).</p>
+<li>When no longer needed, destroy the contact handle and release all its resources using the <code>contacts_record_destroy()</code> function.
+<p>If you set the second parameter to <code>true</code>, the function destroys any child records automatically, irrespective of how the child records were added (individually or along with their parent record).</p>
 
 <pre class="prettyprint">
 error_code = contacts_record_destroy(contact, true);
@@ -293,7 +281,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 <p>To create a new contact, you must create a contact handle, set the contact properties, insert the contact into the database, and destroy the handle:</p>
 
 <ol>
-<li>Create a contact handle using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_contact._uri</span> property as the first parameter:
+<li>Create a contact handle using the <code>contacts_record_create()</code> function with the <code>_contacts_contact._uri</code> property as the first parameter:
 
 <pre class="prettyprint">
 contacts_record_h contact;
@@ -304,7 +292,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create record: error code = %d&quot;, error_code);
 </pre>
 
-<p>Remember that records created with the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function are memory objects, with <span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variables as their handles. If you change these objects, the changes are not reflected in the Contacts database until you explicitly insert or update the objects to the database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function.</p></li>
+<p>Remember that records created with the <code>contacts_record_create()</code> function are memory objects, with <code>contacts_record_h</code> type variables as their handles. If you change these objects, the changes are not reflected in the Contacts database until you explicitly insert or update the objects to the database using the <code>contacts_db_insert_record()</code> or <code>contacts_db_update_record()</code> function.</p></li>
 <li>Set the contact properties.
 <p>The following examples set the contact name, image, phone number, and event.</p>
 <p>To simplify the example code, error handling has been omitted.</p>
@@ -312,7 +300,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 <li>Name
 <p>Create a name record, set the string values, &quot;John&quot; and &quot;Smith&quot;, to the name, and set the name record as a child record of the contact record.</p>
 
-<p>When creating the name record, the first parameter of the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function is the <span style="font-family: Courier New,Courier,monospace">_contacts_name._uri</span> property.</p>
+<p>When creating the name record, the first parameter of the <code>contacts_record_create()</code> function is the <code>_contacts_name._uri</code> property.</p>
 <pre class="prettyprint">
 contacts_record_h name;
 
@@ -326,8 +314,8 @@ error_code = contacts_record_add_child_record(contact, _contacts_contact.name, n
 </li>
 <li>Image
 <p>Similarly, create an image record, set the values of the property, and add the image record to the contact as a child record:</p>
-<ul><li>Create the image record with the <span style="font-family: Courier New,Courier,monospace">_contacts_image._uri</span> property.</li>
-<li>Set the path for the image in the <span style="font-family: Courier New,Courier,monospace">caller_id_path[]</span> variable, which is saved in the <span style="font-family: Courier New,Courier,monospace">_contacts_image.path</span> property by the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function.</li>
+<ul><li>Create the image record with the <code>_contacts_image._uri</code> property.</li>
+<li>Set the path for the image in the <code>caller_id_path[]</code> variable, which is saved in the <code>_contacts_image.path</code> property by the <code>contacts_record_set_str()</code> function.</li>
 </ul>
 
 <pre class="prettyprint">
@@ -348,7 +336,7 @@ error_code = contacts_record_add_child_record(contact, _contacts_contact.image,
 </li>
 <li>Phone number
 <p>Similarly again, create a phone number record, set the number, and add the phone number record to the contact as a child record.</p>
-<p>When creating a phone number record, use the <span style="font-family: Courier New,Courier,monospace">_contacts_number._uri</span> property as the second parameter of the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function.</p>
+<p>When creating a phone number record, use the <code>_contacts_number._uri</code> property as the second parameter of the <code>contacts_record_create()</code> function.</p>
 
 <pre class="prettyprint">
 contacts_record_h number;
@@ -361,15 +349,15 @@ error_code = contacts_record_add_child_record(contact, _contacts_contact.number,
 </pre>
 </li>
 <li>Event
-<p>An event consists of a type, date, and other properties. You can set various types of events, as defined in the <span style="font-family: Courier New,Courier,monospace">contacts_event_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">wearable</a> applications). If the event type is <span style="font-family: Courier New,Courier,monospace">CUSTOM</span>, you can set a custom label for the event using the <span style="font-family: Courier New,Courier,monospace">_contacts_event.label</span> property.</p> 
+<p>An event consists of a type, date, and other properties. You can set various types of events, as defined in the <code>contacts_event_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">wearable</a> applications). If the event type is <code>CUSTOM</code>, you can set a custom label for the event using the <code>_contacts_event.label</code> property.</p> 
 
 <p>The following example sets a birthday event:</p>
 <ul>
-<li>In creating an event record, use the <span style="font-family: Courier New,Courier,monospace">_contacts_event._uri</span> property.</li>
-<li>The event type is set as <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_BIRTH</span> in the <span style="font-family: Courier New,Courier,monospace">_contacts_event.type</span> property.</li>
-<li>When you set the event date, the date is an <span style="font-family: Courier New,Courier,monospace">integer</span> type property (<span style="font-family: Courier New,Courier,monospace">_contact_event.date</span>), calculated as year * 10000 + month * 100 + day.</li>
+<li>In creating an event record, use the <code>_contacts_event._uri</code> property.</li>
+<li>The event type is set as <code>CONTACTS_EVENT_TYPE_BIRTH</code> in the <code>_contacts_event.type</code> property.</li>
+<li>When you set the event date, the date is an <code>integer</code> type property (<code>_contact_event.date</code>), calculated as year * 10000 + month * 100 + day.</li>
 </ul>
-<p>Add the event record to the contact as a child record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> function.</p>
+<p>Add the event record to the contact as a child record using the <code>contacts_record_add_child_record()</code> function.</p>
 <pre class="prettyprint">
 contacts_record_h event;
 
@@ -390,7 +378,7 @@ error_code = contacts_record_add_child_record(contact, _contacts_contact.event,
 </ul>
 <p>For other contact properties, you can follow the same steps: create an appropriate record, set the values in the properties, and add the record to the contact as a child record.</p>
 </li>
-<li>Insert the contact into the Contacts database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function. All the child records added to the contact are inserted automatically along with the parent. The second parameter of the function is for the contact ID, which is unique and assigned by the system.
+<li>Insert the contact into the Contacts database using the <code>contacts_db_insert_record()</code> function. All the child records added to the contact are inserted automatically along with the parent. The second parameter of the function is for the contact ID, which is unique and assigned by the system.
 
 <pre class="prettyprint">
 int id = -1;
@@ -398,8 +386,8 @@ int id = -1;
 error_code = contacts_db_insert_record(contact, &amp;id);
 </pre>
 </li>
-<li>Destroy the contact handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function.
-<p>If you set the second parameter to <span style="font-family: Courier New,Courier,monospace">true</span>, the function destroys any child records automatically, irrespective of how the child records were added (individually or along with their parent record).</p>
+<li>Destroy the contact handle and release all its resources using the <code>contacts_record_destroy()</code> function.
+<p>If you set the second parameter to <code>true</code>, the function destroys any child records automatically, irrespective of how the child records were added (individually or along with their parent record).</p>
 
 <pre class="prettyprint">
 error_code = contacts_record_destroy(contact, true);
@@ -408,7 +396,7 @@ error_code = contacts_record_destroy(contact, true);
 </ol>
 <h2 id="deleting">Deleting a Person</h2>
 
-<p>By using the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function, you can delete a person record from the database with related child records. The person ID is given to the function as the second parameter.</p>
+<p>By using the <code>contacts_db_delete_record()</code> function, you can delete a person record from the database with related child records. The person ID is given to the function as the second parameter.</p>
 
 <pre class="prettyprint">
 int person_id = ... /* Get the person ID */
@@ -422,8 +410,8 @@ error_code = contacts_db_delete_record(_contacts_person._uri, person_id);
 
 <p>When you create a contact, it is automatically linked to a person:</p>
 <ul>
-<li>You can link the new contact to an existing person by setting the <span style="font-family: Courier New,Courier,monospace">_contacts_contact.link_mode</span> property as <span style="font-family: Courier New,Courier,monospace">CONTACTS_CONTACT_LINK_MODE_NONE</span>.
-<p>Linking is determined based on the contact properties for phone numbers and email addresses (<span style="font-family: Courier New,Courier,monospace">_contacts_number.number</span> and <span style="font-family: Courier New,Courier,monospace">_contacts_email.email</span>). If an existing person has the same phone number or email address, but in a different address book, the contact is automatically linked to that person. However, if the phone number or email address leads to an existing contact in the same address book, the linking does not work.</p></li>
+<li>You can link the new contact to an existing person by setting the <code>_contacts_contact.link_mode</code> property as <code>CONTACTS_CONTACT_LINK_MODE_NONE</code>.
+<p>Linking is determined based on the contact properties for phone numbers and email addresses (<code>_contacts_number.number</code> and <code>_contacts_email.email</code>). If an existing person has the same phone number or email address, but in a different address book, the contact is automatically linked to that person. However, if the phone number or email address leads to an existing contact in the same address book, the linking does not work.</p></li>
 <li>If the contact cannot be linked to any existing person, a new person is automatically created and linked to the contact.</li>
 </ul>
 
@@ -453,7 +441,7 @@ contacts_record_destroy(contact, true);
 <p>You can modify the contact and person linking, as needed:</p>
 
 <ul>
-<li>To merge existing contacts into 1 person, use the <span style="font-family: Courier New,Courier,monospace">contacts_person_link_person()</span> function to link the contacts of one person to another person. The first parameter of the function is the ID of the person to be merged, and the second parameter is the ID of the person who will have all the merged contacts. After the linking, the former is deleted from the Contacts database. The latter person is left with both their original contacts and the other person&#39;s contacts.
+<li>To merge existing contacts into 1 person, use the <code>contacts_person_link_person()</code> function to link the contacts of one person to another person. The first parameter of the function is the ID of the person to be merged, and the second parameter is the ID of the person who will have all the merged contacts. After the linking, the former is deleted from the Contacts database. The latter person is left with both their original contacts and the other person&#39;s contacts.
 
 <pre class="prettyprint">
 int person_id1 = ... /* Get the person ID whose contacts are merged elsewhere */
@@ -463,10 +451,10 @@ error_code = contacts_person_link_person(person_id1, person_id2);
 </pre>
 <p>The following figure illustrates the process of linking a person. Even though the contacts have different address books, they can be linked to the same person. After linking, the person2 record is destroyed automatically.</p>
 
-<p class="figure">Figure: Linking a person</p> 
+<p align="center"><strong>Figure: Linking a person</strong></p> 
 <p align="center"><img alt="Linking a person" src="../../images/app_contacts_linking.png" /></p>
 </li>
-<li>To separate (unlink) a contact record from the person record, use the <span style="font-family: Courier New,Courier,monospace">contacts_person_unlink_contact()</span> function. The function removes the contact from the person, creates a new person, and links the contact to the new person.
+<li>To separate (unlink) a contact record from the person record, use the <code>contacts_person_unlink_contact()</code> function. The function removes the contact from the person, creates a new person, and links the contact to the new person.
 
 <pre class="prettyprint">
 int person_id = ... /* Get the person ID */
@@ -478,7 +466,7 @@ error_code = contacts_person_unlink_contact(person_id, contact_id, &amp;unlinked
 
 <p>The following figure illustrates the process of unlinking a contact. After unlinking, the person3 record is newly created.</p>
 
-<p class="figure">Figure: Unlinking a contact</p> 
+<p align="center"><strong>Figure: Unlinking a contact</strong></p> 
 <p align="center"><img alt="Unlinking a contact" src="../../images/app_contacts_unlinking.png" /></p>
 </li>
 </ul>
index 9b5c33b..9d181ec 100644 (file)
@@ -70,7 +70,7 @@
 <li>The URI and MIME type contain information about the content to be handled.</li>
 <li>The extra data consists of key-value pairs, which provide additional information for the operation.</li>
 </ul>
-<p>By specifying a proper operation with the content information, your application can share the content with other applications. On the other hand, to allow other applications to find and launch your application, you can advertise your application features by declaring your application control information in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
+<p>By specifying a proper operation with the content information, your application can share the content with other applications. On the other hand, to allow other applications to find and launch your application, you can advertise your application features by declaring your application control information in the <code>tizen-manifest.xml</code> file.</p>
 
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index e7a5872..49bd0ce 100644 (file)
 <p>To initialize NFC:</p>
 
 <ol>
-<li>To use the functions and data types of the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;nfc.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), include the <code>&lt;nfc.h&gt;</code> header file in your application:
 
 <pre class="prettyprint">
 #include &lt;nfc.h&gt;
 </pre>
 </li>
 
-<li>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/nfc</span> privilege to the application manifest file.</li>
+<li>Add the <code>http://tizen.org/privilege/nfc</code> privilege to the application manifest file.</li>
 
-<li>Check whether the device supports NFC by calling the <span style="font-family: Courier New,Courier,monospace">nfc_manager_is_supported()</span> function. It takes no parameters and returns <span style="font-family: Courier New,Courier,monospace">true</span> if NFC is supported on the device.
+<li>Check whether the device supports NFC by calling the <code>nfc_manager_is_supported()</code> function. It takes no parameters and returns <code>true</code> if NFC is supported on the device.
 
 <pre class="prettyprint">
 void
@@ -67,9 +67,9 @@ Network_NFC_startup(void)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_nfc_supported NOT SUPPORTED&quot;);
 }
 </pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">gmainloop</span> created above is used to wait for the results of calling asynchronous functions.</p>
+<p>The <code>gmainloop</code> created above is used to wait for the results of calling asynchronous functions.</p>
 </li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">nfc_manager_initialize()</span> function to start the initialization:
+<li>Call the <code>nfc_manager_initialize()</code> function to start the initialization:
 
 <pre class="prettyprint">
 int error_code = NFC_ERROR_NONE;
@@ -82,7 +82,7 @@ g_timeout_add(1000, timeout_func, gmainloop);
 g_main_loop_run(gmainloop);
 </pre>
 
-<p>Run <span style="font-family: Courier New,Courier,monospace">gmainloop</span> to wait for the initialization result. It is closed when the time set in the <span style="font-family: Courier New,Courier,monospace">g_timeout_add()</span> function elapses. The time is defined in milliseconds, so in the above example the <span style="font-family: Courier New,Courier,monospace">timeout_func</span> is called after 1 second.</p>
+<p>Run <code>gmainloop</code> to wait for the initialization result. It is closed when the time set in the <code>g_timeout_add()</code> function elapses. The time is defined in milliseconds, so in the above example the <code>timeout_func</code> is called after 1 second.</p>
 </li></ol>
 
 <h2 id="message">Sending and Receiving Messages through NFC P2P</h2>
@@ -94,7 +94,7 @@ g_main_loop_run(gmainloop);
 <ol>
 <li>Prepare the NDEF message:
 <ol type="a">
-<li><p>To create an NDEF message consisting of text records, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_record_create_text()</span> function. The following example creates 3 records for a name, phone number, and email address:</p>
+<li><p>To create an NDEF message consisting of text records, use the <code>nfc_ndef_record_create_text()</code> function. The following example creates 3 records for a name, phone number, and email address:</p>
 
 <pre class="prettyprint">
 nfc_ndef_record_h ndef_name_record = NULL;
@@ -126,7 +126,7 @@ nfc_ndef_message_append_record(ndef_message, ndef_email_record);
 <li>Register callbacks to receive notifications about discovered P2P targets and the received data:
 <ul>
 <li>To exchange messages using P2P, register a callback for receiving notifications about discovered P2P targets. When the P2P target is discovered, the callback provides a handle to that device and information on whether it is attached or detached.</li>
-<li>Register a callback for receiving notifications about received data using the <span style="font-family: Courier New,Courier,monospace">nfc_p2p_set_data_received_cb()</span> function. Place the registration code in the callback called after the P2P device is discovered.</li>
+<li>Register a callback for receiving notifications about received data using the <code>nfc_p2p_set_data_received_cb()</code> function. Place the registration code in the callback called after the P2P device is discovered.</li>
 </ul>
 
 <pre class="prettyprint">
@@ -138,7 +138,7 @@ nfc_p2p_set_data_received_cb(target, on_p2p_data_received, NULL);
 <li>Exchange messages:
 <ul>
 <li>Send a message to another device.
-<p>When the other P2P device is attached, send the prepared message to it. You can use the <span style="font-family: Courier New,Courier,monospace">nfc_p2p_send()</span> function, if you do not want to check permissions.</p>
+<p>When the other P2P device is attached, send the prepared message to it. You can use the <code>nfc_p2p_send()</code> function, if you do not want to check permissions.</p>
 
 <pre class="prettyprint">
 nfc_p2p_send(target, ndef_message, NULL, NULL);
@@ -146,7 +146,7 @@ nfc_p2p_send(target, ndef_message, NULL, NULL);
 </li>
 <li>Receive a message from another device.
 <p>The callback about receiving data is invoked when the device receives a message. The callback provides a handle to the received message and a handle to the message source.</p>
-<p>To get a specified record from the message, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_get_record()</span> function with the parameters for a message handle, a record index, and a handle to store the obtained record. When the record is obtained, get the stored text using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_record_get_text()</span> function.</p>
+<p>To get a specified record from the message, use the <code>nfc_ndef_message_get_record()</code> function with the parameters for a message handle, a record index, and a handle to store the obtained record. When the record is obtained, get the stored text using the <code>nfc_ndef_record_get_text()</code> function.</p>
 
 <pre class="prettyprint">
 nfc_ndef_record_h ndef_record;
index 07885dd..5b4ab0a 100644 (file)
@@ -42,9 +42,9 @@
 
 <h2 id="export">Exporting Application Control Functionality</h2>
 
-<p>To allow other applications to find and use your application features implicitly without your application ID, you must advertise your application features to other applications. You can do this by declaring your application control information in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
+<p>To allow other applications to find and use your application features implicitly without your application ID, you must advertise your application features to other applications. You can do this by declaring your application control information in the <code>tizen-manifest.xml</code> file.</p>
 
-<p>The following example shows an advertisement for the <span style="font-family: Courier New,Courier,monospace">VIEW</span> and <span style="font-family: Courier New,Courier,monospace">CALL</span> application control operations:</p>
+<p>The following example shows an advertisement for the <code>VIEW</code> and <code>CALL</code> application control operations:</p>
 
 <pre class="prettyprint">
 &lt;app-control&gt;
 &lt;/app-control&gt;
 </pre>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">In the application manifest file, the valid operation name format is <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/&lt;verb&gt;</span>. You cannot use the related macro name format: <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_&lt;VERB&gt;</span>.</td>
-    </tr>
-   </tbody>
-  </table>
 
+      <div class="note">
+        <strong>Note</strong>
+        In the application manifest file, the valid operation name format is <code>http://tizen.org/appcontrol/operation/&lt;verb&gt;</code>. You cannot use the related macro name format: <code>APP_CONTROL_OPERATION_&lt;VERB&gt;</code>.
+    </div>
 
 <h2 id="incoming">Handling Incoming Content</h2>
 
-<p>When another application sends an application control request to your application, the application framework calls your application&#39;s <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback just after your application enters the main loop. This callback is passed to the handler, <span style="font-family: Courier New,Courier,monospace">app_control</span>, containing the reason why your application was launched. For example, your application can be launched to open a file that another application is sharing with you.</p>
+<p>When another application sends an application control request to your application, the application framework calls your application&#39;s <code>app_control_cb()</code> callback just after your application enters the main loop. This callback is passed to the handler, <code>app_control</code>, containing the reason why your application was launched. For example, your application can be launched to open a file that another application is sharing with you.</p>
 
-<p>When an application control request arrives, your application is responsible for checking and responding accordingly to the information of the <span style="font-family: Courier New,Courier,monospace">app_control</span> handler.</p>
+<p>When an application control request arrives, your application is responsible for checking and responding accordingly to the information of the <code>app_control</code> handler.</p>
 
-<p>The following example shows how you can initialize the application to allow the application control callback to handle the request for the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation:</p>
+<p>The following example shows how you can initialize the application to allow the application control callback to handle the request for the <code>APP_CONTROL_OPERATION_VIEW</code> operation:</p>
 
 <pre class="prettyprint">
 int
@@ -125,7 +119,7 @@ app_control(app_control_h app_control, void *user_data)
 
 <h2 id="extra_data">Managing Extra Data</h2>
 
-<p>Using the <span style="font-family: Courier New,Courier,monospace">app_control_foreach_extra_data()</span> function, you can read any extra data added to the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle. This function calls the <span style="font-family: Courier New,Courier,monospace">_app_control_extra_data_cb()</span> callback once for each extra data key-value pair contained in the handle. When the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>, the iteration ends.</p>
+<p>Using the <code>app_control_foreach_extra_data()</code> function, you can read any extra data added to the <code>app_control</code> handle. This function calls the <code>_app_control_extra_data_cb()</code> callback once for each extra data key-value pair contained in the handle. When the callback returns <code>false</code>, the iteration ends.</p>
 
 <pre class="prettyprint">
 bool
index d8d2020..f78f45d 100644 (file)
@@ -44,7 +44,7 @@
 
 <p>The most common content sharing use case is sending text to another application. For example, a Web browser can share the URL of the currently visited site with other applications, such as a messenger or email application, to allow the user to send the URL to their friends.</p>
 
-<p>Use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> operation and the <span style="font-family: Courier New,Courier,monospace">text/plain</span> MIME type to create an application control request, and define the text content to be shared in the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span> extra data:</p>
+<p>Use the <code>APP_CONTROL_OPERATION_SHARE</code> operation and the <code>text/plain</code> MIME type to create an application control request, and define the text content to be shared in the <code>APP_CONTROL_DATA_TEXT</code> extra data:</p>
 
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -61,26 +61,19 @@ app_control_send_launch_request(app_control, NULL, NULL);
 </pre>
 
 <p>The above example has no explicit designation of the application to be called. When you request an implicit launch, the application launcher framework determines which application to launch by comparing the conditions: operation, URI (or scheme), and MIME type. If only one application is found to match the given conditions, that application is launched. If multiple matching applications are found, the application selector is shown and the user can select the application they want.</p>
-
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">When using application controls, pay attention to the following:
+  
+      <div class="note">
+        <strong>Note</strong>
+        When using application controls, pay attention to the following:
         <ul>
         <li>Since Tizen 2.4, application controls that launch <a href="../../../../org.tizen.guides/html/native/app_management/service_app_n.htm">service applications</a> outside the current package are not supported. Because of this, a service application can only be launched explicitly by an application in the same package.</li>
-        <li>The operation is mandatory information for sending a launch request. If the operation is not specified, the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span> operation is used. In that case, the application ID is mandatory to explicitly launch an application.</li>
-        </ul></td>
-    </tr>
-   </tbody>
-  </table>
+        <li>The operation is mandatory information for sending a launch request. If the operation is not specified, the <code>APP_CONTROL_OPERATION_DEFAULT</code> operation is used. In that case, the application ID is mandatory to explicitly launch an application.</li>
+        </ul>
+    </div>
 
 <h2 id="binaries">Sending Binaries</h2>
 
-<p>Depending on the number of binary content items to be shared, you can use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> (for a single item) or <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> (for multiple items) operation. The location of the content to be shared is defined in the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span> extra data or extra data array.</p>
+<p>Depending on the number of binary content items to be shared, you can use the <code>APP_CONTROL_OPERATION_SHARE</code> (for a single item) or <code>APP_CONTROL_OPERATION_MULTI_SHARE</code> (for multiple items) operation. The location of the content to be shared is defined in the <code>APP_CONTROL_DATA_PATH</code> extra data or extra data array.</p>
 
 <p>The following example demonstrates how to share a single binary content item and multiple items:</p>
 
@@ -127,13 +120,13 @@ app_control_send_launch_request(service, NULL, NULL);
 app_control_destroy(service);
 </pre>
 
-<p>If you try to share a set of files with different MIME types, use <span style="font-family: Courier New,Courier,monospace">&lt;type&gt;/*</span> or <span style="font-family: Courier New,Courier,monospace">*/*</span>. For example, if you send <span style="font-family: Courier New,Courier,monospace">video/mp4</span> and <span style="font-family: Courier New,Courier,monospace">audio/ogg</span>, the MIME type must be <span style="font-family: Courier New,Courier,monospace">*/*</span>.</p>
+<p>If you try to share a set of files with different MIME types, use <code>&lt;type&gt;/*</code> or <code>*/*</code>. For example, if you send <code>video/mp4</code> and <code>audio/ogg</code>, the MIME type must be <code>*/*</code>.</p>
 
 
 <h2 id="files">Sending Files</h2>
 
-<p>When sharing files, you can use the <span style="font-family: Courier New,Courier,monospace">app_control_set_uri()</span> function to set the file URI with the <span style="font-family: Courier New,Courier,monospace">file://</span> scheme.</p>
-<p>Since Tizen 2.4, if the second parameter of the  <span style="font-family: Courier New,Courier,monospace">app_control_set_uri()</span> function starts with <span style="font-family: Courier New,Courier,monospace">file://</span>, and it is a regular file in your application&#39;s data path which can be obtained by calling the <span style="font-family: Courier New,Courier,monospace">app_get_data_path()</span> function, the file is shared with the called application. The framework grants a temporary permission to the called application for this file, and revokes it when the called application is terminated. The called application can just read the file.</p>
+<p>When sharing files, you can use the <code>app_control_set_uri()</code> function to set the file URI with the <code>file://</code> scheme.</p>
+<p>Since Tizen 2.4, if the second parameter of the  <code>app_control_set_uri()</code> function starts with <code>file://</code>, and it is a regular file in your application&#39;s data path which can be obtained by calling the <code>app_get_data_path()</code> function, the file is shared with the called application. The framework grants a temporary permission to the called application for this file, and revokes it when the called application is terminated. The called application can just read the file.</p>
 
 <p>The following example launches a viewer application with the operation, URI, and MIME type:</p>
 
index d620325..308f34d 100644 (file)
 <p>To implement animations in an application:</p>
 <ol>
 <li>Create a new project and specify the project name as <strong>AnimatorEx</strong>.</li>
-<li>After the project is created, open the <span style="font-family: Courier New,Courier,monospace;">.c</span> source file in the <span style="font-family: Courier New,Courier,monospace;">src</span> folder and add the new code to the <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function to create 2 rectangles and 2 animations.
+<li>After the project is created, open the <code>.c</code> source file in the <code>src</code> folder and add the new code to the <code>create_base_gui()</code> function to create 2 rectangles and 2 animations.
 
 <p>The following functions are used to create the animations:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set()</span> specifies a frame time interval for an animation. For example, if you specify the interval as 1/50, 50 frame events occur in 1 second. The unit is seconds.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> creates an <span style="font-family: Courier New,Courier,monospace;">Animator</span> object with a limited time specified in seconds by the first parameter. Once the runtime  of the animator has elapsed, it is deleted automatically.
+<li><code>ecore_animator_frametime_set()</code> specifies a frame time interval for an animation. For example, if you specify the interval as 1/50, 50 frame events occur in 1 second. The unit is seconds.</li>
+<li><code>ecore_animator_timeline_add()</code> creates an <code>Animator</code> object with a limited time specified in seconds by the first parameter. Once the runtime  of the animator has elapsed, it is deleted automatically.
 <p>The second parameter indicates the frame event callback function that actually defines the animation details, and the third parameter indicates the user data, which generally passes an object or application data to which you apply the animation.</p>
-<p>The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to keep the animator running or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to stop it and automatically delete it at any time.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> creates an <span style="font-family: Courier New,Courier,monospace;">Animator</span> object. The first parameter indicates the frame event callback function that actually defines the animation details, and the second parameter indicates the user data.
-<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function is just like the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function, except that the animator only runs for a limited time.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> creates a timer to call the given function in the given period of time. The first parameter is the interval in seconds, and the second parameter is the given function. 
-<p>If this function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>, the timer is rescheduled for the next interval given in the first parameter. If it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the timer is deleted automatically. The third parameter indicates the user data to pass to the function when it is called.</p></li>
+<p>The callback function can return <code>ECORE_CALLBACK_RENEW</code> to keep the animator running or <code>ECORE_CALLBACK_CANCEL</code> to stop it and automatically delete it at any time.</p></li>
+<li><code>ecore_animator_add()</code> creates an <code>Animator</code> object. The first parameter indicates the frame event callback function that actually defines the animation details, and the second parameter indicates the user data.
+<p>The <code>ecore_animator_timeline_add()</code> function is just like the <code>ecore_animator_add()</code> function, except that the animator only runs for a limited time.</p></li>
+<li><code>ecore_timer_add()</code> creates a timer to call the given function in the given period of time. The first parameter is the interval in seconds, and the second parameter is the given function. 
+<p>If this function returns <code>ECORE_CALLBACK_RENEW</code>, the timer is rescheduled for the next interval given in the first parameter. If it returns <code>ECORE_CALLBACK_CANCEL</code>, the timer is deleted automatically. The third parameter indicates the user data to pass to the function when it is called.</p></li>
 </ul>
 
 <p>The label is not used in this example, so annotate it.</p>
@@ -101,7 +101,7 @@ evas_object_show(rect2);
 
 /* Animation */
 ecore_animator_frametime_set(1. / 50);
-Ecore_Animator *anim = ecore_animator_timeline_add(5,_advance_frame, rect);
+Ecore_Animator *anim = ecore_animator_timeline_add(5, _advance_frame, rect);
 Ecore_Animator *anim2 = ecore_animator_add(_advance_frame3, rect2);
 Ecore_Timer *timer1 = ecore_timer_add(10, _start_second_anim, rect);
 Ecore_Timer *timer2 = ecore_timer_add(5, _freeze_third_anim, rect2);
@@ -111,20 +111,20 @@ Ecore_Timer *timer3 = ecore_timer_add(10, _thaw_third_anim, rect2);</span>
 evas_object_show(ad-&gt;win);
 </pre>
 </li>
-<li>Create the frame event callback functions by adding them to the top of the <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function:
+<li>Create the frame event callback functions by adding them to the top of the <code>create_base_gui()</code> function:
 
 <ul>
-<li>The code of the <span style="font-family: Courier New,Courier,monospace;">_advance_frame()</span> timeline animation frame event callback function specifies the new size, position, and color of the square. It changes the blue square to red and grows it larger as it moves to the bottom right. The style applied to the animation is <span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>, which keeps the animation moving at a certain speed.</li>
+<li>The code of the <code>_advance_frame()</code> timeline animation frame event callback function specifies the new size, position, and color of the square. It changes the blue square to red and grows it larger as it moves to the bottom right. The style applied to the animation is <code>ECORE_POS_MAP_LINEAR</code>, which keeps the animation moving at a certain speed.</li>
 
-<li>The code of the <span style="font-family: Courier New,Courier,monospace;">_advance_frame2()</span> timeline animation frame event callback function also specifies the size, position, and color of a square. The style applied to the animation is <span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>, which creates a vibration like a bouncing ball. It slows to a stop after bouncing off the ending point.</li>
+<li>The code of the <code>_advance_frame2()</code> timeline animation frame event callback function also specifies the size, position, and color of a square. The style applied to the animation is <code>ECORE_POS_MAP_BOUNCE</code>, which creates a vibration like a bouncing ball. It slows to a stop after bouncing off the ending point.</li>
 
-<li>The code of the <span style="font-family: Courier New,Courier,monospace;">_advance_frame3()</span> timeline animation frame event callback function increases the X coordinate of an object by 2 at every frame. The static variable <span style="font-family: Courier New,Courier,monospace;">x</span> is used in order to increase the X coordinate whenever this function is called. When the X coordinate becomes greater than 250, it starts back from 0. The <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> function changes the position of an object.</li>
+<li>The code of the <code>_advance_frame3()</code> timeline animation frame event callback function increases the X coordinate of an object by 2 at every frame. The static variable <code>x</code> is used in order to increase the X coordinate whenever this function is called. When the X coordinate becomes greater than 250, it starts back from 0. The <code>evas_object_move()</code> function changes the position of an object.</li>
 </ul>
 
-<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map()</span> function returns the resulting value that is mapped onto the position of the current animation. The returned values range between 0 and 1. The resulting value when the animation starts is 0, and it gradually increases and eventually reaches 1 when the animation stops.</p>
-<p>The second parameter of the timeline animation event function must be passed to the first parameter of the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map()</span> function. For the second parameter, enter the style of the animation. The style types are described in the <span style="font-family: Courier New,Courier,monospace;">_Ecore_Pos_Map</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">wearable</a> applications) that defines the position mappings for the animation. For the third and fourth parameter, enter the intensity and tempo of the speed change.</p>
+<p>The <code>ecore_animator_pos_map()</code> function returns the resulting value that is mapped onto the position of the current animation. The returned values range between 0 and 1. The resulting value when the animation starts is 0, and it gradually increases and eventually reaches 1 when the animation stops.</p>
+<p>The second parameter of the timeline animation event function must be passed to the first parameter of the <code>ecore_animator_pos_map()</code> function. For the second parameter, enter the style of the animation. The style types are described in the <code>_Ecore_Pos_Map</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">wearable</a> applications) that defines the position mappings for the animation. For the third and fourth parameter, enter the intensity and tempo of the speed change.</p>
 
-<p>The <span style="font-family: Courier New,Courier,monospace;">_advance_frame()</span> function is only valid for 5 seconds, since its runtime (specified by the first parameter of the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function) is 5 seconds. Therefore, the <span style="font-family: Courier New,Courier,monospace;">_advance_frame()</span> function is automatically deleted after 5 seconds. The <span style="font-family: Courier New,Courier,monospace;">freeze_third_anim()</span> function is called 5 seconds after the application starts, and the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function pauses the animation. The <span style="font-family: Courier New,Courier,monospace;">thaw_third_anim()</span> and <span style="font-family: Courier New,Courier,monospace;">_start_second_anim()</span> functions are called 10 seconds after the application starts, and the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function restarts the animation.</p>
+<p>The <code>_advance_frame()</code> function is only valid for 5 seconds, since its runtime (specified by the first parameter of the <code>ecore_animator_timeline_add()</code> function) is 5 seconds. Therefore, the <code>_advance_frame()</code> function is automatically deleted after 5 seconds. The <code>freeze_third_anim()</code> function is called 5 seconds after the application starts, and the <code>ecore_animator_freeze()</code> function pauses the animation. The <code>thaw_third_anim()</code> and <code>_start_second_anim()</code> functions are called 10 seconds after the application starts, and the <code>ecore_animator_thaw()</code> function restarts the animation.</p>
 
 <pre class="prettyprint">
 static Eina_Bool
index 0697074..332eb66 100644 (file)
 <p>To implement polygons in an application:</p>
 <ol>
 <li>Create a new project and specify the project name as <strong>DrawPolygon</strong>.</li>
-<li>After the project is created, open the <span style="font-family: Courier New,Courier,monospace;">.c</span> source file in the <span style="font-family: Courier New,Courier,monospace;">src</span> folder and add the new code to the <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function to create a canvas and a triangle.
+<li>After the project is created, open the <code>.c</code> source file in the <code>src</code> folder and add the new code to the <code>create_base_gui()</code> function to create a canvas and a triangle.
 
 <p>The following functions are used to create the triangle:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_polygon_add()</span> creates a polygon object on a canvas.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_polygon_point_add()</span> adds point coordinates to a polygon object. A polygon must have at least 3 points. The first parameter indicates the polygon object, and the second and third parameters indicate the X and Y coordinates.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_color_set()</span> specifies a color for a shape. The parameters are Red, Green, Blue, and semi-transparency.</li>
+<li><code>evas_object_polygon_add()</code> creates a polygon object on a canvas.</li>
+<li><code>evas_object_polygon_point_add()</code> adds point coordinates to a polygon object. A polygon must have at least 3 points. The first parameter indicates the polygon object, and the second and third parameters indicate the X and Y coordinates.</li>
+<li><code>evas_object_color_set()</code> specifies a color for a shape. The parameters are Red, Green, Blue, and semi-transparency.</li>
 </ul>
 
 <p>The label is not used in this example, so annotate it.</p>
@@ -96,7 +96,7 @@ evas_object_show(ad-&gt;win);
 <p align="center"><img alt="Create the project" src="../../images/graphics_triangle.png" /></p>
 </li>
 <li>Adding 4 points to a polygon object creates a square, while adding 5 points creates a pentagon.
-<p>Create a pentagon by adding new code to the <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function.</p>
+<p>Create a pentagon by adding new code to the <code>create_base_gui()</code> function.</p>
 
 <pre class="prettyprint">
 /* Polygon triangle */
index 716f2d4..9e5af3d 100644 (file)
@@ -39,9 +39,9 @@
 
 <p>The following example is created using the <strong>Basic UI</strong> template as a source code. To create a new project:</p>
 <ol>
-<li>In the Tizen Studio menu, select <strong>File &gt; New &gt; Tizen Native Project</strong>.
+<li>In the Tizen Studio menu, select <strong>File &gt; New &gt; Tizen Project</strong>.
 <p align="center"><img alt="Open the Project Wizard" src="../../images/graphics_project.png" /></p></li>
-<li>In the Project Wizard, select <strong>Template &gt; MOBILE-[version] &gt; Basic UI</strong>.</li>
+<li>In the Project Wizard, select <strong>Template</strong> as the project type, <strong>MOBILE</strong> profile and applicable version, <strong>Native Application</strong> type, and <strong>Basic UI</strong> template.</li>
 <li>Enter <strong>DrawRect</strong> in the <strong>Project name</strong> field.
 <p align="center"><img alt="Create the project" src="../../images/graphics_project_create.png" /></p></li>
 <li>Click <strong>Finish</strong>.</li>
 <p>After the project is created, modify the template to create the application with 3 squares:</p>
 
 <ol>
-<li>Open the <span style="font-family: Courier New,Courier,monospace;">.c</span> source file in the <span style="font-family: Courier New,Courier,monospace;">src</span> folder and add the new code to the <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function.
+<li>Open the <code>.c</code> source file in the <code>src</code> folder and add the new code to the <code>create_base_gui()</code> function.
 
 <p>The following functions are used to create the squares:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> retrieves the Evas handler from the window object, which is embedded into the Evas object parameter.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_rectangle_add()</span> creates a rectangle object on a canvas.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_color_set()</span> specifies a color for a shape. The parameters are Red, Green, Blue, and semi-transparency. For example, entering <span style="font-family: Courier New,Courier,monospace;">255, 0, 0, 192</span> creates a semi-transparent red.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> moves objects to a given location. The first parameter indicates the object, and the second and third parameters indicate the horizontal and vertical position.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">evas_object_resize()</span> changes the size of the object. The first parameter indicates the object, and the second and third parameters indicates the width and height.</li>
+<li><code>evas_object_evas_get()</code> retrieves the Evas handler from the window object, which is embedded into the Evas object parameter.</li>
+<li><code>evas_object_rectangle_add()</code> creates a rectangle object on a canvas.</li>
+<li><code>evas_object_color_set()</code> specifies a color for a shape. The parameters are Red, Green, Blue, and semi-transparency. For example, entering <code>255, 0, 0, 192</code> creates a semi-transparent red.</li>
+<li><code>evas_object_move()</code> moves objects to a given location. The first parameter indicates the object, and the second and third parameters indicate the horizontal and vertical position.</li>
+<li><code>evas_object_resize()</code> changes the size of the object. The first parameter indicates the object, and the second and third parameters indicates the width and height.</li>
 </ul>
 
 <p>The label is not used in this example, so annotate it.</p>
index 6343723..9fffccf 100644 (file)
 
 <p>The following figure illustrates the player state changes.</p>
 
-<p class="figure">Figure: Player state changes</p>
+<p align="center"><strong>Figure: Player state changes</strong></p>
 <p align="center"><img src="../../images/player_state_changes_n.png" alt="Player state changes" /></p>
 
 <h3 id="player_init">Initializing the Audio Player</h3>
 
-<p>You can create a player by calling the <span style="font-family: Courier New,Courier,monospace;">player_create()</span> function, which returns a player handle on success. You need the player handle in setting which files to play and with which configuration. You also have to register appropriate callback functions to handle notifications about interruptions, ends, and errors during playback.</p>
+<p>You can create a player by calling the <code>player_create()</code> function, which returns a player handle on success. You need the player handle in setting which files to play and with which configuration. You also have to register appropriate callback functions to handle notifications about interruptions, ends, and errors during playback.</p>
 
 <p>To prepare the player for playback, and to define the necessary callbacks to handle playback events:</p>
 
 <ol>
-<li><p>To use the data types and functions of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;player.h&gt;</span> header file in your application:</p>
+<li><p>To use the data types and functions of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <code>&lt;player.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;player.h&gt;
 </pre>
@@ -85,7 +85,7 @@ init_base_player(appdata_s *ad)
 </pre>
 </li>
 <li>Set configurations, such as the source file URI.
-<p>To set a specific path for audio files to play, retrieve the default internal storage paths. To access and use internal storage, include the <span style="font-family: Courier New,Courier,monospace;">&lt;storage.h&gt;</span> header file in your application.</p>
+<p>To set a specific path for audio files to play, retrieve the default internal storage paths. To access and use internal storage, include the <code>&lt;storage.h&gt;</code> header file in your application.</p>
 <pre class="prettyprint">
 #include &lt;storage.h&gt;
 
@@ -140,7 +140,7 @@ _set_test_path()
 &nbsp;&nbsp;&nbsp;&nbsp;strncat(audio_path, MP3_SAMPLE, strlen(MP3_SAMPLE));
 }
 </pre>
-<p>Once the storage path is set, you can specify the audio file to play using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function with the player handle:</p>
+<p>Once the storage path is set, you can specify the audio file to play using the <code>player_set_uri()</code> function with the player handle:</p>
 <pre class="prettyprint">
 error_code = player_set_uri(ad-&gt;player, audio_path);
 if (error_code != PLAYER_ERROR_NONE)
@@ -239,13 +239,13 @@ init_base_player(appdata_s *ad)
 
 <h3 id="playback">Managing Audio Playback</h3> 
 
-<p>When the player is created, it is in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> state. To start playback, it must be in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span> state.</p>
+<p>When the player is created, it is in the <code>PLAYER_STATE_IDLE</code> state. To start playback, it must be in the <code>PLAYER_STATE_READY</code> state.</p>
 
 <p>To manage playback:</p>
 
 <ol>
 <li>
-<p>Get the player ready for playback by calling the <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function, which changes the player state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>:</p>
+<p>Get the player ready for playback by calling the <code>player_prepare()</code> function, which changes the player state from <code>PLAYER_STATE_IDLE</code> to <code>PLAYER_STATE_READY</code>:</p>
 <pre class="prettyprint">
 error_code = player_prepare(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
@@ -253,7 +253,7 @@ if (error_code != PLAYER_ERROR_NONE)
 </pre>
 </li>
 <li>
-<p>Once the player is ready, start playing the audio file using the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function. The player state changes to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>.</p>
+<p>Once the player is ready, start playing the audio file using the <code>player_start()</code> function. The player state changes to <code>PLAYER_STATE_PLAYING</code>.</p>
 <pre class="prettyprint">
 error_code = player_start(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
@@ -261,8 +261,8 @@ if (error_code != PLAYER_ERROR_NONE)
 </pre>
 </li>
 <li>
-<p>Stop playback by calling the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> function. The player state changes back to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>.</p>
-<p>By calling the <span style="font-family: Courier New,Courier,monospace;">player_pause()</span> function, you can pause playback and change the player state to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span>.</p>
+<p>Stop playback by calling the <code>player_stop()</code> function. The player state changes back to <code>PLAYER_STATE_READY</code>.</p>
+<p>By calling the <code>player_pause()</code> function, you can pause playback and change the player state to <code>PLAYER_STATE_PAUSED</code>.</p>
 </li>
 </ol>
 
@@ -270,8 +270,8 @@ if (error_code != PLAYER_ERROR_NONE)
 
 <p>When you are finished using the player, release all the resources allocated to it:</p>
 <ol>
-<li>Reset the player by calling the <span style="font-family: Courier New,Courier,monospace;">player_unprepare()</span> function, which changes the player state to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span>.</li>
-<li>Destroy the player handle using the <span style="font-family: Courier New,Courier,monospace;">player_destroy()</span> function.</li>
+<li>Reset the player by calling the <code>player_unprepare()</code> function, which changes the player state to <code>PLAYER_STATE_IDLE</code>.</li>
+<li>Destroy the player handle using the <code>player_destroy()</code> function.</li>
 </ol>
 
 <pre class="prettyprint">
@@ -294,7 +294,7 @@ if (error_code != PLAYER_ERROR_NONE)
 <p>The supported formats in audio recording are M4A and AMR.</p>
 <p>The following figure illustrates the general recorder state changes.</p>
 
-<p class="figure">Figure: Recorder state changes</p>
+<p align="center"><strong>Figure: Recorder state changes</strong></p>
 <p align="center"><img src="../../images/recorder_state_changes_n.png" alt="Recorder state changes" /></p>
 
 <h3 id="recorder_init">Initializing the Audio Recorder</h3>
@@ -303,13 +303,13 @@ if (error_code != PLAYER_ERROR_NONE)
 
 <ol>
 <li>
-<p>To use the data types and functions of the Recorder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;recorder.h&gt;</span> header file in your application:</p>
+<p>To use the data types and functions of the Recorder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications), include the <code>&lt;recorder.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;recorder.h&gt;
 </pre>
 </li>
 <li>
-<p>Create an audio recorder by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_create_audiorecorder()</span> function. On success, the function returns a handle for the audio recorder and the state of the audio recorder is set as <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span>.</p>
+<p>Create an audio recorder by calling the <code>recorder_create_audiorecorder()</code> function. On success, the function returns a handle for the audio recorder and the state of the audio recorder is set as <code>RECORDER_STATE_CREATED</code>.</p>
 <pre class="prettyprint">
 static recorder_h g_recorder;
 
@@ -351,7 +351,7 @@ _recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type, void
 <li>
 <p>You can set various attributes of audio recording, such as audio codec, file format, file name, file size limit, encoder bitrate, audio device, and sample rate:</p>
 <ul>
-<li>Set the audio codec for encoding the audio stream using the <span style="font-family: Courier New,Courier,monospace;">recorder_set_audio_encoder()</span> function. The possible audio codec values are defined in the <span style="font-family: Courier New,Courier,monospace;">recorder_audio_codec_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">wearable</a> applications).
+<li>Set the audio codec for encoding the audio stream using the <code>recorder_set_audio_encoder()</code> function. The possible audio codec values are defined in the <code>recorder_audio_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">wearable</a> applications).
 <pre class="prettyprint">
 #define FILENAME_PREFIX &quot;AUDIO&quot;
 struct tm localtime = {0};
@@ -363,13 +363,13 @@ size_t size;
 error_code = recorder_set_audio_encoder(g_recorder, RECORDER_AUDIO_CODEC_AAC);
 </pre>
 </li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">recorder_set_file_format()</span> function to set the correct file format based on the audio codec. For example, if you set the codec to AAC, set the file format to 3GP. The possible file format values are defined in the <span style="font-family: Courier New,Courier,monospace;">recorder_file_format_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">wearable</a> applications).
+<li>Use the <code>recorder_set_file_format()</code> function to set the correct file format based on the audio codec. For example, if you set the codec to AAC, set the file format to 3GP. The possible file format values are defined in the <code>recorder_file_format_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">wearable</a> applications).
 <pre class="prettyprint">
 /* Set the file format according to the audio encoder */
 error_code = recorder_set_file_format(g_recorder, RECORDER_FILE_FORMAT_3GP);
 </pre>
 </li>
-<li>Based on the file format, define the correct file name, and set it using the <span style="font-family: Courier New,Courier,monospace;">recorder_set_filename()</span> function. The parameters are the full path and the name of the file for the recorded audio data to be saved.
+<li>Based on the file format, define the correct file name, and set it using the <code>recorder_set_filename()</code> function. The parameters are the full path and the name of the file for the recorded audio data to be saved.
 <pre class="prettyprint">
 /* Create the file name */
 if (localtime_r(&amp;rawtime, &amp;localtime) != NULL) {
@@ -386,7 +386,7 @@ if (localtime_r(&amp;rawtime, &amp;localtime) != NULL) {
 error_code = recorder_set_filename(g_recorder, filename);
 </pre>
 </li>
-<li>Set the file size limit, encoder bitrate, audio device, and sample rate. The possible audio device values are defined in the <span style="font-family: Courier New,Courier,monospace;">recorder_audio_device_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">wearable</a> applications).
+<li>Set the file size limit, encoder bitrate, audio device, and sample rate. The possible audio device values are defined in the <code>recorder_audio_device_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">wearable</a> applications).
 <pre class="prettyprint">
 /* Set the maximum file size to 1024 (kB) */
 error_code = recorder_attr_set_size_limit(g_recorder, 1024);
@@ -407,33 +407,33 @@ error_code = recorder_attr_set_audio_samplerate(g_recorder, 44100);
 
 <h3 id="audio_rec">Managing Audio Recording</h3>
 
-<p>When the recorder handle is created, the audio recorder is in the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span> state. To start recording, the audio recorder must be in the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span> state.</p>
+<p>When the recorder handle is created, the audio recorder is in the <code>RECORDER_STATE_CREATED</code> state. To start recording, the audio recorder must be in the <code>RECORDER_STATE_READY</code> state.</p>
 
 <p>To manage playback:</p>
 
 <ol>
 <li>
-<p>Change the player state from <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span> to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span> by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_prepare()</span> function:</p>
+<p>Change the player state from <code>RECORDER_STATE_CREATED</code> to <code>RECORDER_STATE_READY</code> by calling the <code>recorder_prepare()</code> function:</p>
 <pre class="prettyprint">
 error_code = recorder_prepare(g_recorder);
 </pre>
 </li>
 <li>
-<p>Once the recorder is ready, start audio recording using the <span style="font-family: Courier New,Courier,monospace;">recorder_start()</span> function. The recorder state changes to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_RECORDING</span>.</p>
+<p>Once the recorder is ready, start audio recording using the <code>recorder_start()</code> function. The recorder state changes to <code>RECORDER_STATE_RECORDING</code>.</p>
 <pre class="prettyprint">
 error_code = recorder_start(g_recorder);
 </pre>
 </li>
 <li>
-<p>In the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_RECORDING</span> state, you can pause or stop recording:</p>
+<p>In the <code>RECORDER_STATE_RECORDING</code> state, you can pause or stop recording:</p>
 <ul>
-<li>To pause recording, call the <span style="font-family: Courier New,Courier,monospace;">recorder_pause()</span> function that changes the recorder state to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_PAUSED</span>. In this state, you can resume or stop recording. To resume, call the <span style="font-family: Courier New,Courier,monospace;">recorder_start()</span> function.
+<li>To pause recording, call the <code>recorder_pause()</code> function that changes the recorder state to <code>RECORDER_STATE_PAUSED</code>. In this state, you can resume or stop recording. To resume, call the <code>recorder_start()</code> function.
 <pre class="prettyprint">
 error_code = recorder_pause(g_recorder);
 </pre>
 </li>
 <li>
-<p>You can stop recording either in the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_PAUSED</span> state. In stopping recording, you can save or discard the recorded data. To save the recorded data, use the <span style="font-family: Courier New,Courier,monospace;">recorder_commit()</span> function, and to discard, use the <span style="font-family: Courier New,Courier,monospace;">recorder_cancel()</span> function. Both functions set the audio recorder state to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span>.</p>
+<p>You can stop recording either in the <code>RECORDER_STATE_RECORDING</code> or <code>RECORDER_STATE_PAUSED</code> state. In stopping recording, you can save or discard the recorded data. To save the recorded data, use the <code>recorder_commit()</code> function, and to discard, use the <code>recorder_cancel()</code> function. Both functions set the audio recorder state to <code>RECORDER_STATE_READY</code>.</p>
 <p>The following example code first checks the audio recorder state, and then stops the recorder and saves the data to a file:</p>
 <pre class="prettyprint">
 /* Check the audio recorder state */
@@ -468,8 +468,8 @@ if (_recorder_expect_state(g_recorder, RECORDER_STATE_RECORDING) || _recorder_ex
 
 <p>After you finish audio recording, release all the resources allocated to the audio recorder:</p>
 <ol>
-<li>Reset the audio recorder by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_unprepare()</span> function, which changes the recorder state from <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span>.</li>
-<li>Release the audio recorder resources by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_destroy()</span> function. The recorder state changes to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_NONE</span>.</li>
+<li>Reset the audio recorder by calling the <code>recorder_unprepare()</code> function, which changes the recorder state from <code>RECORDER_STATE_READY</code> to <code>RECORDER_STATE_CREATED</code>.</li>
+<li>Release the audio recorder resources by calling the <code>recorder_destroy()</code> function. The recorder state changes to <code>RECORDER_STATE_NONE</code>.</li>
 </ol>
 <pre class="prettyprint">
 error_code = recorder_unprepare(g_recorder);
index dfc8d4d..517b037 100644 (file)
@@ -53,7 +53,7 @@
 </ol>
 <p>The following figure illustrates the camera state changes in the normal mode.</p>
 
-<p class="figure">Figure: Camera state changes</p>
+<p align="center"><strong>Figure: Camera state changes</strong></p>
 <p align="center"><img src="../../images/camera_state_changes_n.png" alt="Camera state changes" /></p>
 
 <h2 id="camera_init">Initializing the Camera</h2>
@@ -67,8 +67,8 @@
 #include &lt;camera.h&gt;
 </pre>
 </li>
-<li>Create the camera handle using the <span style="font-family: Courier New,Courier,monospace;">camera_create()</span> function.
-<p>In the following example, create a <span style="font-family: Courier New,Courier,monospace;">g_camera</span> camera handle, and define a <span style="font-family: Courier New,Courier,monospace;">camdata</span> structure type, to store global data related to the camera handle:</p>
+<li>Create the camera handle using the <code>camera_create()</code> function.
+<p>In the following example, create a <code>g_camera</code> camera handle, and define a <code>camdata</code> structure type, to store global data related to the camera handle:</p>
 <pre class="prettyprint">
 struct _camdata {
 &nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
@@ -88,35 +88,30 @@ if (error_code != CAMERA_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;fail to create camera: error code = %d&quot;, error_code);
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace;">CAMERA_DEVICE_CAMERA0</span> parameter means that the currently activated device camera is 0, which is the primary camera. You can select between the primary (0) and the secondary (1) camera, which are defined in the <span style="font-family: Courier New,Courier,monospace;">camera_device_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">wearable</a> applications). Since devices can have multiple camera sensors with different capabilities, you must create a camera handle with a proper <span style="font-family: Courier New,Courier,monospace;">camera_device_e</span> value, determining which camera sensor is used. Usually, the primary sensor is located on the back side and the secondary sensor is on the front side of the device.</p>
+<p>The <code>CAMERA_DEVICE_CAMERA0</code> parameter means that the currently activated device camera is 0, which is the primary camera. You can select between the primary (0) and the secondary (1) camera, which are defined in the <code>camera_device_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">wearable</a> applications). Since devices can have multiple camera sensors with different capabilities, you must create a camera handle with a proper <code>camera_device_e</code> value, determining which camera sensor is used. Usually, the primary sensor is located on the back side and the secondary sensor is on the front side of the device.</p>
 </li>
 <li>Configure the camera settings.
-<p>Before configuring the camera settings, find out which configurations are supported by the camera. Depending on the camera type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information using the relevant functions, such as <span style="font-family: Courier New,Courier,monospace;">camera_foreach_supported_preview_resolution()</span>, <span style="font-family: Courier New,Courier,monospace;">camera_foreach_supported_preview_format()</span>, or other <span style="font-family: Courier New,Courier,monospace;">camera_foreach_supported_XXX()</span> functions. For example, using the <span style="font-family: Courier New,Courier,monospace;">camera_foreach_supported_preview_resolution()</span> function, you can find out which resolutions are supported for the camera preview on a specific device. As usual, the foreach function invokes a callback for each supported resolution and stops when the callback returns <span style="font-family: Courier New,Courier,monospace;">false</span>.</p>
+<p>Before configuring the camera settings, find out which configurations are supported by the camera. Depending on the camera type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information using the relevant functions, such as <code>camera_foreach_supported_preview_resolution()</code>, <code>camera_foreach_supported_preview_format()</code>, or other <code>camera_foreach_supported_XXX()</code> functions. For example, using the <code>camera_foreach_supported_preview_resolution()</code> function, you can find out which resolutions are supported for the camera preview on a specific device. As usual, the foreach function invokes a callback for each supported resolution and stops when the callback returns <code>false</code>.</p>
 
 <p>Set the camera configurations (such as image quality, display type, preview resolution, and capture format) by using the relevant functions:</p>
 
 <ul>
 <li>Image quality
-<p>Set the image quality using the <span style="font-family: Courier New,Courier,monospace;">camera_attr_set_image_quality()</span> function. The quality value ranges from 1 (lowest quality) to 100 (highest quality).</p>
+<p>Set the image quality using the <code>camera_attr_set_image_quality()</code> function. The quality value ranges from 1 (lowest quality) to 100 (highest quality).</p>
 
 <pre class="prettyprint">
 error_code = camera_attr_set_image_quality(cam_data.g_camera, 100);
 </pre>
 </li>
 <li>Display type
-<p>Using the <span style="font-family: Courier New,Courier,monospace;">camera_set_display()</span> function, you can set the display type for showing preview images. The display type is either <span style="font-family: Courier New,Courier,monospace;">CAMERA_DISPLAY_TYPE_EVAS</span> or <span style="font-family: Courier New,Courier,monospace;">CAMERA_DISPLAY_TYPE_OVERLAY</span>.</p>
-<p>The following example shows how to set the display according to the display_type parameter:</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The camera state must be <span style="font-family: Courier New,Courier,monospace;">CAMERA_STATE_CREATED</span> and the <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function must be called before previewing.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>Using the <code>camera_set_display()</code> function, you can set the display type for showing preview images. The display type is either <code>CAMERA_DISPLAY_TYPE_EVAS</code> or <code>CAMERA_DISPLAY_TYPE_OVERLAY</code>.</p>
+<p>The following example shows how to set the display according to the <code>display_type</code> parameter:</p>
+
+  
+      <div class="note">
+        <strong>Note</strong>
+        The camera state must be <code>CAMERA_STATE_CREATED</code> and the <code>create_base_gui()</code> function must be called before previewing.
+    </div>
   
 <pre class="prettyprint">
 int error_code = CAMERA_ERROR_NONE;
@@ -173,8 +168,8 @@ if (error_code != CAMERA_ERROR_NONE) {
 </pre>
 </li>
 <li>Preview resolution
-<p>Set the preview resolution by calling the <span style="font-family: Courier New,Courier,monospace;">camera_set_preview_resolution()</span> function before previewing.</p>
-<p>The following example code sets the camera preview resolution to the first found supported resolution, which is returned from the <span style="font-family: Courier New,Courier,monospace;">camera_foreach_supported_preview_resolution()</span> function:</p>
+<p>Set the preview resolution by calling the <code>camera_set_preview_resolution()</code> function before previewing.</p>
+<p>The following example code sets the camera preview resolution to the first found supported resolution, which is returned from the <code>camera_foreach_supported_preview_resolution()</code> function:</p>
 
 <pre class="prettyprint">
 int resolution[2];
@@ -197,7 +192,7 @@ error_code = camera_set_preview_resolution(cam_data.g_camera, resolution[0], res
 </pre>
 </li>
 <li>Capture format
-<p>Using the <span style="font-family: Courier New,Courier,monospace;">camera_set_capture_format()</span> function, set the capture format. The available formats are defined in the <span style="font-family: Courier New,Courier,monospace;">camera_pixel_format_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">NV12</span>, <span style="font-family: Courier New,Courier,monospace;">NV16</span>, and <span style="font-family: Courier New,Courier,monospace;">JPEG</span>.</p>
+<p>Using the <code>camera_set_capture_format()</code> function, set the capture format. The available formats are defined in the <code>camera_pixel_format_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">wearable</a> applications), such as <code>NV12</code>, <code>NV16</code>, and <code>JPEG</code>.</p>
 <pre class="prettyprint">
 error_code = camera_set_capture_format(cam_data.g_camera, CAMERA_PIXEL_FORMAT_JPEG);
 </pre>
@@ -207,8 +202,8 @@ error_code = camera_set_capture_format(cam_data.g_camera, CAMERA_PIXEL_FORMAT_JP
 <p>To retrieve notifications, you must register appropriate callback functions for handling newly previewed frames and auto-focus state changes:</p>
 <ul>
 <li>Camera preview
-<p>To receive notifications about newly previewed frames, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">camera_set_preview_cb()</span> function. The callback is invoked once per frame during a preview.</p>
-<p>The following example implements the <span style="font-family: Courier New,Courier,monospace;">_camera_preview_cb()</span> callback, which starts auto-focusing using the <span style="font-family: Courier New,Courier,monospace;">camera_start_focusing()</span> function:</p>
+<p>To receive notifications about newly previewed frames, register a callback function using the <code>camera_set_preview_cb()</code> function. The callback is invoked once per frame during a preview.</p>
+<p>The following example implements the <code>_camera_preview_cb()</code> callback, which starts auto-focusing using the <code>camera_start_focusing()</code> function:</p>
 
 <pre class="prettyprint">
 error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL);
@@ -228,12 +223,12 @@ _camera_preview_cb(camera_preview_data_s *frame, void *user_data)
 &nbsp;&nbsp;&nbsp;&nbsp;}
 }
 </pre>
-<p>The second parameter of the <span style="font-family: Courier New,Courier,monospace;">camera_start_focusing()</span> function is a Boolean flag defining whether the camera must continuously maintain focus. The <span style="font-family: Courier New,Courier,monospace;">g_enable_focus</span> flag is set to <span style="font-family: Courier New,Courier,monospace;">true</span> at the application startup. For the first frame of the preview, the camera starts auto-focusing. Subsequent calls to the callback do not provoke any action, which prevents the auto-focusing process from starting after the first previewed frame.</p>
+<p>The second parameter of the <code>camera_start_focusing()</code> function is a Boolean flag defining whether the camera must continuously maintain focus. The <code>g_enable_focus</code> flag is set to <code>true</code> at the application startup. For the first frame of the preview, the camera starts auto-focusing. Subsequent calls to the callback do not provoke any action, which prevents the auto-focusing process from starting after the first previewed frame.</p>
 </li>
 <li>Auto-focus state change
-<p>Before auto-focusing starts, the auto-focus state is <span style="font-family: Courier New,Courier,monospace;">CAMERA_FOCUS_STATE_RELEASED</span>. After the <span style="font-family: Courier New,Courier,monospace;">camera_start_focusing()</span> function is called, the camera starts auto-focusing and the state changes to <span style="font-family: Courier New,Courier,monospace;">CAMERA_FOCUS_STATE_ONGOING</span>. If the auto-focusing finishes successfully, the state changes to <span style="font-family: Courier New,Courier,monospace;">CAMERA_FOCUS_STATE_FOCUSED</span>. If the auto-focusing fails, the state changes to <span style="font-family: Courier New,Courier,monospace;">CAMERA_FOCUS_STATE_FAILED</span>.</p>
-<p>To receive notifications about auto-focusing state changes, register a callback using the <span style="font-family: Courier New,Courier,monospace;">camera_set_focus_changed_cb()</span> function. The callback is invoked every time the auto-focus state changes.</p>
-<p>The following example implements the <span style="font-family: Courier New,Courier,monospace;">_camera_focus_cb()</span> callback, which starts capturing focused frames using the <span style="font-family: Courier New,Courier,monospace;">camera_start_capture()</span> function:</p>
+<p>Before auto-focusing starts, the auto-focus state is <code>CAMERA_FOCUS_STATE_RELEASED</code>. After the <code>camera_start_focusing()</code> function is called, the camera starts auto-focusing and the state changes to <code>CAMERA_FOCUS_STATE_ONGOING</code>. If the auto-focusing finishes successfully, the state changes to <code>CAMERA_FOCUS_STATE_FOCUSED</code>. If the auto-focusing fails, the state changes to <code>CAMERA_FOCUS_STATE_FAILED</code>.</p>
+<p>To receive notifications about auto-focusing state changes, register a callback using the <code>camera_set_focus_changed_cb()</code> function. The callback is invoked every time the auto-focus state changes.</p>
+<p>The following example implements the <code>_camera_focus_cb()</code> callback, which starts capturing focused frames using the <code>camera_start_capture()</code> function:</p>
 
 <pre class="prettyprint">
 static void
@@ -255,18 +250,18 @@ _camera_focus_cb(camera_focus_state_e state, void *user_data)
 
 <h2 id="preview_capture">Previewing and Capturing Images</h2>
                        
-<p>After initializing the camera, you can start the preview, auto-focus, and capturing processes to take a photo. The camera preview starts with the <span style="font-family: Courier New,Courier,monospace;">camera_start_preview()</span> function call, and it draws frames on the screen and allows you to capture frames as still images:</p>
+<p>After initializing the camera, you can start the preview, auto-focus, and capturing processes to take a photo. The camera preview starts with the <code>camera_start_preview()</code> function call, and it draws frames on the screen and allows you to capture frames as still images:</p>
 <pre class="prettyprint">
 error_code = camera_start_preview(cam_data.g_camera);
 </pre>
 
 <p>After starting the camera preview, the image capturing flows as follows:</p>
 <ol>
-<li>To handle the camera preview, the application calls the camera preview callback, which calls the <span style="font-family: Courier New,Courier,monospace;">camera_start_focusing()</span> function starting the auto-focusing process.</li>
-<li>To handle the auto-focusing process, the application calls the camera auto-focus callback, which calls the <span style="font-family: Courier New,Courier,monospace;">camera_start_capture()</span> function starting the capturing process.</li>
+<li>To handle the camera preview, the application calls the camera preview callback, which calls the <code>camera_start_focusing()</code> function starting the auto-focusing process.</li>
+<li>To handle the auto-focusing process, the application calls the camera auto-focus callback, which calls the <code>camera_start_capture()</code> function starting the capturing process.</li>
 <li>To handle the capturing process, the application calls the camera capturing callback, which is invoked once for each captured frame.</li>
 </ol>
-<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace;">_camera_capturing_cb()</span> callback, which saves the captured frame as a JPEG image, whose format is set by the <span style="font-family: Courier New,Courier,monospace;">camera_set_capture_format()</span> function:</p>
+<p>The following example code implements the <code>_camera_capturing_cb()</code> callback, which saves the captured frame as a JPEG image, whose format is set by the <code>camera_set_capture_format()</code> function:</p>
 
 <pre class="prettyprint">
 static void
@@ -282,8 +277,8 @@ _camera_capturing_cb(camera_image_data_s* image, camera_image_data_s* postview,
 }
 </pre>
 
-<p>You can get a notification when the image has been captured. After the <span style="font-family: Courier New,Courier,monospace;">camera_capturing_cb()</span> function completes, the callback function, <span style="font-family: Courier New,Courier,monospace;">camera_capture_completed_cb()</span>, is invoked. It is used for notification and for restarting the camera preview.</p>
-<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace;">_camera_completed_cb()</span> callback, which waits 0.025 seconds before restarting the camera preview with auto-focusing. By waiting 0.025 seconds, the callback keeps the captured image on the screen for 0.025 seconds.</p>
+<p>You can get a notification when the image has been captured. After the <code>camera_capturing_cb()</code> function completes, the callback function, <code>camera_capture_completed_cb()</code>, is invoked. It is used for notification and for restarting the camera preview.</p>
+<p>The following example code implements the <code>_camera_completed_cb()</code> callback, which waits 0.025 seconds before restarting the camera preview with auto-focusing. By waiting 0.025 seconds, the callback keeps the captured image on the screen for 0.025 seconds.</p>
 
 <pre class="prettyprint">
 static void
@@ -305,10 +300,10 @@ _camera_completed_cb(void *user_data)
 <p>After you have finished working with the camera, you need to stop the camera and clean up the application environment:</p>
 
 <ol>
-<li>If auto-focus is switched on, switch it off using the <span style="font-family: Courier New,Courier,monospace;">camera_cancel_focusing()</span> function.</li>
-<li>Stop the camera preview using the <span style="font-family: Courier New,Courier,monospace;">camera_stop_preview()</span> function.</li>
-<li>Unregister the camera preview and auto-focus callback functions using the <span style="font-family: Courier New,Courier,monospace;">camera_unset_preview_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">camera_unset_focus_changed_cb()</span> functions.</li>
-<li>Destroy the camera handle and release all the allocated resources using the <span style="font-family: Courier New,Courier,monospace;">camera_destroy()</span> function.</li>
+<li>If auto-focus is switched on, switch it off using the <code>camera_cancel_focusing()</code> function.</li>
+<li>Stop the camera preview using the <code>camera_stop_preview()</code> function.</li>
+<li>Unregister the camera preview and auto-focus callback functions using the <code>camera_unset_preview_cb()</code> and <code>camera_unset_focus_changed_cb()</code> functions.</li>
+<li>Destroy the camera handle and release all the allocated resources using the <code>camera_destroy()</code> function.</li>
 </ol>
 
 <pre class="prettyprint">
index 1a0ed5a..9c69afd 100644 (file)
 <ol>
 <li>Get the overlay region or Evas from the Graphics module. You can display video on a UI layer with the Evas object as well as on an overlay layer.</li>
 <li>Create the player instance.</li>
-<li>Set the surface type and display a handle to the player using the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function.</li>
+<li>Set the surface type and display a handle to the player using the <code>player_set_display()</code> function.</li>
 </ol>
 <p>The following figure illustrates the player state changes.</p>
 
-<p class="figure">Figure: Player state changes</p>
+<p align="center"><strong>Figure: Player state changes</strong></p>
 <p align="center"><img src="../../images/player_state_changes_n.png" alt="Player state changes" /></p>
 
 <h3 id="video_init">Initializing the Video Player</h3>
 
-<p>You can create a player by calling the <span style="font-family: Courier New,Courier,monospace;">player_create()</span> function, which returns a player handle on success. You need the player handle in setting which files to play and with which configuration. You also have to register appropriate callback functions to handle notifications about interruptions, ends, and errors during playback.</p>
+<p>You can create a player by calling the <code>player_create()</code> function, which returns a player handle on success. You need the player handle in setting which files to play and with which configuration. You also have to register appropriate callback functions to handle notifications about interruptions, ends, and errors during playback.</p>
 
 <p>To prepare the player for playback, and to define the necessary callbacks to handle playback events:</p>
 
 <ol>
 <li>
-<p>To use the data types and functions of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;player.h&gt;</span> header file in your application:</p>
+<p>To use the data types and functions of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <code>&lt;player.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;player.h&gt;
 </pre>
@@ -91,7 +91,7 @@ init_base_player(appdata_s *ad)
 </pre>
 </li>
 <li>Set configurations, such as the source file URI.
-<p>To set a specific path for video files to play, retrieve the default internal storage paths. To access and use internal storage, include the <span style="font-family: Courier New,Courier,monospace;">&lt;storage.h&gt;</span> header file in your application.</p>
+<p>To set a specific path for video files to play, retrieve the default internal storage paths. To access and use internal storage, include the <code>&lt;storage.h&gt;</code> header file in your application.</p>
 <pre class="prettyprint">
 #include &lt;storage.h&gt;
 
@@ -141,7 +141,7 @@ _set_test_path()
 &nbsp;&nbsp;&nbsp;&nbsp;strncat(video_path, MP4_SAMPLE, strlen(MP4_SAMPLE));
 }
 </pre>
-<p>Once the storage path is set, you can specify the video file to play using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function with the player handle:</p>
+<p>Once the storage path is set, you can specify the video file to play using the <code>player_set_uri()</code> function with the player handle:</p>
 <pre class="prettyprint">
 error_code = player_set_uri(ad-&gt;player, video_path);
 if (error_code != PLAYER_ERROR_NONE)
@@ -242,14 +242,14 @@ init_base_player(appdata_s *ad)
 
 <ol>
 <li>
-<p>Unlike in audio playback, the video player needs a region to display. To set the display, use the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function with the player handle, display type, and display handle. After the function has been successfully executed, the player is connected to the display. The display handle can be retrieved using the <span style="font-family: Courier New,Courier,monospace;">GET_DISPLAY()</span> function.</p>
+<p>Unlike in audio playback, the video player needs a region to display. To set the display, use the <code>player_set_display()</code> function with the player handle, display type, and display handle. After the function has been successfully executed, the player is connected to the display. The display handle can be retrieved using the <code>GET_DISPLAY()</code> function.</p>
 <pre class="prettyprint">
 error_code = player_set_display(ad-&gt;player, PLAYER_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(evas_obj));
 </pre>
 </li>
 <li>
-<p>When the player is created, it is in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> state. To start playback, it must be in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span> state.</p>
-<p>Get the player ready for playback by calling the <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function, which changes the player state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>:</p>
+<p>When the player is created, it is in the <code>PLAYER_STATE_IDLE</code> state. To start playback, it must be in the <code>PLAYER_STATE_READY</code> state.</p>
+<p>Get the player ready for playback by calling the <code>player_prepare()</code> function, which changes the player state from <code>PLAYER_STATE_IDLE</code> to <code>PLAYER_STATE_READY</code>:</p>
 <pre class="prettyprint">
 error_code = player_prepare(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
@@ -257,7 +257,7 @@ if (error_code != PLAYER_ERROR_NONE)
 </pre>
 </li>
 <li>
-<p>Once the player is ready, start playing the video file using the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function. The player state changes to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>.</p>
+<p>Once the player is ready, start playing the video file using the <code>player_start()</code> function. The player state changes to <code>PLAYER_STATE_PLAYING</code>.</p>
 <pre class="prettyprint">
 error_code = player_start(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
@@ -265,8 +265,8 @@ if (error_code != PLAYER_ERROR_NONE)
 </pre>
 </li>
 <li>
-<p>Stop playback by calling the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> function. The player state changes back to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>.</p>
-<p>By calling the <span style="font-family: Courier New,Courier,monospace;">player_pause()</span> function, you can pause playback and change the player state to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span>.</p>
+<p>Stop playback by calling the <code>player_stop()</code> function. The player state changes back to <code>PLAYER_STATE_READY</code>.</p>
+<p>By calling the <code>player_pause()</code> function, you can pause playback and change the player state to <code>PLAYER_STATE_PAUSED</code>.</p>
 </li>
 </ol>
 
@@ -278,7 +278,7 @@ if (error_code != PLAYER_ERROR_NONE)
 
 <ol>
 <li>Check whether the display is visible.
-<p>If the display is not visible, make it visible using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_visible()</span> function with <span style="font-family: Courier New,Courier,monospace;">true</span> as the second parameter:</p>
+<p>If the display is not visible, make it visible using the <code>player_set_display_visible()</code> function with <code>true</code> as the second parameter:</p>
 <pre class="prettyprint">
 bool is_visible;
 
@@ -292,14 +292,14 @@ if (!is_visible) {
 </pre>
 </li>
 <li>Set the display mode.
-<p>The available display modes are defined in the <span style="font-family: Courier New,Courier,monospace;">player_display_mode_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">wearable</a> applications). Note that the DST ROI mode is deprecated from Tizen 3.0.</p>
+<p>The available display modes are defined in the <code>player_display_mode_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">wearable</a> applications). Note that the DST ROI mode is deprecated from Tizen 3.0.</p>
 <pre class="prettyprint">
 error_code = player_set_display_mode(ad-&gt;player, PLAYER_DISPLAY_MODE_FULL_SCREEN);
 dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
 </pre>
 </li>
 <li>Set the display orientation.
-<p>The display orientations are defined in the <span style="font-family: Courier New,Courier,monospace;">player_display_rotation_e</span> enumeration (in <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">wearable</a> applications).</p>
+<p>The display orientations are defined in the <code>player_display_rotation_e</code> enumeration (in <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">wearable</a> applications).</p>
 <pre class="prettyprint">
 error_code = player_set_display_rotation(ad-&gt;player, PLAYER_DISPLAY_ROTATION_90);
 dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
@@ -312,8 +312,8 @@ dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_
 <p>When you are finished using the player, release all the resources allocated to it:</p>
 
 <ol>
-<li>Reset the player by calling the <span style="font-family: Courier New,Courier,monospace;">player_unprepare()</span>  function, which changes the player state to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span>.</li>
-<li>Destroy the player handle using the <span style="font-family: Courier New,Courier,monospace;">player_destroy()</span> function.</li>
+<li>Reset the player by calling the <code>player_unprepare()</code>  function, which changes the player state to <code>PLAYER_STATE_IDLE</code>.</li>
+<li>Destroy the player handle using the <code>player_destroy()</code> function.</li>
 </ol>
 
 <pre class="prettyprint">
@@ -337,7 +337,7 @@ if (error_code != PLAYER_ERROR_NONE)
 <p>The supported formats in video recording are MP4 and 3GP.</p>
 <p>The following figure illustrates the general recorder state changes.</p>
 
-<p class="figure">Figure: Recorder state changes</p>
+<p align="center"><strong>Figure: Recorder state changes</strong></p>
 <p align="center"><img src="../../images/recorder_state_changes_n.png" alt="Recorder state changes" /></p>
 
 <h3 id="init_video_rec">Initializing the Video Recorder</h3>
@@ -346,7 +346,7 @@ if (error_code != PLAYER_ERROR_NONE)
 
 <ol>
 <li>
-<p>To use the data types and functions of the Recorder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;recorder.h&gt;</span> header file in your application:</p>
+<p>To use the data types and functions of the Recorder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications), include the <code>&lt;recorder.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;recorder.h&gt;
 </pre>
@@ -378,7 +378,7 @@ static int ret;
 
 <ul>
 <li>Configure the camera.
-<p>Create a handle for the camera using the <span style="font-family: Courier New,Courier,monospace;">camera_create()</span> function. The parameters are the hardware camera to access and the camera handle to be returned. The camera state is set as <span style="font-family: Courier New,Courier,monospace;">CAMERA_STATE_CREATED</span>.</p>
+<p>Create a handle for the camera using the <code>camera_create()</code> function. The parameters are the hardware camera to access and the camera handle to be returned. The camera state is set as <code>CAMERA_STATE_CREATED</code>.</p>
 <pre class="prettyprint">
 static recdata rec_data;
 
@@ -395,7 +395,7 @@ if (error_code != CAMERA_ERROR_NONE)
 </pre>
 </li>
 <li>Configure the video recorder.
-<p>To create a handle for the video recorder, use the <span style="font-family: Courier New,Courier,monospace;">recorder_create_videorecorder()</span> function with the camera and video recorder handles as parameters. The state of the video recorder is set as <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span>.</p>
+<p>To create a handle for the video recorder, use the <code>recorder_create_videorecorder()</code> function with the camera and video recorder handles as parameters. The state of the video recorder is set as <code>RECORDER_STATE_CREATED</code>.</p>
 <pre class="prettyprint">
 /* Create the video recorder handle */
 error_code = recorder_create_videorecorder(rec_data.camera, &amp;rec_data.recorder);
@@ -424,7 +424,7 @@ on_state_changed_cb(recorder_state_e previous, recorder_state_e current, bool by
 <li>
 <p>You can set various attributes of video recording, such as video codec, file format, file name, encoder bitrate, as well as audio attributes:</p>
 <ul>
-<li>To set the video codec, you need to check first which codecs the device supports by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_foreach_supported_video_encoder()</span> function. The possible video codec values are defined in the <span style="font-family: Courier New,Courier,monospace;">recorder_video_codec_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">wearable</a> applications). Using the returned value and the <span style="font-family: Courier New,Courier,monospace;">recorder_set_video_encoder()</span> function, you can set the video recorder codec:
+<li>To set the video codec, you need to check first which codecs the device supports by calling the <code>recorder_foreach_supported_video_encoder()</code> function. The possible video codec values are defined in the <code>recorder_video_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">wearable</a> applications). Using the returned value and the <code>recorder_set_video_encoder()</code> function, you can set the video recorder codec:
 <pre class="prettyprint">
 recorder_video_codec_e supported_codec;
 
@@ -443,19 +443,19 @@ error_code = recorder_foreach_supported_video_encoder(rec_data.recorder, _video_
 error_code = recorder_set_video_encoder(rec_data.recorder, supported_codec);
 </pre>
 </li>
-<li>To set the video encoder bitrate, use the <span style="font-family: Courier New,Courier,monospace;">recorder_attr_set_video_encoder_bitrate()</span> function:
+<li>To set the video encoder bitrate, use the <code>recorder_attr_set_video_encoder_bitrate()</code> function:
 <pre class="prettyprint">
 /* Set the video encoder bitrate */
 error_code = recorder_attr_set_video_encoder_bitrate(rec_data.recorder, g_bitrate);
 </pre>
 </li>
-<li>To set the file format, use the <span style="font-family: Courier New,Courier,monospace;">recorder_set_file_format()</span> function. Make sure that the file format matches the video codec.
+<li>To set the file format, use the <code>recorder_set_file_format()</code> function. Make sure that the file format matches the video codec.
 <pre class="prettyprint">
 /* Set the file format */
 error_code = recorder_set_file_format(rec_data.recorder, RECORDER_FILE_FORMAT_MP4);
 </pre>
 </li>
-<li>To set the file name, use the <span style="font-family: Courier New,Courier,monospace;">recorder_set_filename()</span> function:
+<li>To set the file name, use the <code>recorder_set_filename()</code> function:
 <pre class="prettyprint">
 struct tm localtime = {0};
 time_t rawtime = time(NULL);
@@ -475,39 +475,39 @@ if (localtime_r(&amp;rawtime, &amp;localtime) != NULL) {
 error_code = recorder_set_filename(rec_data.recorder, filename);
 </pre>
 </li>
-<li>To set the audio attributes, such as encoder, encoder bitrate, and sample rate, use the <span style="font-family: Courier New,Courier,monospace;">recorder_set_audio_encoder()</span>, <span style="font-family: Courier New,Courier,monospace;">recorder_attr_set_audio_encoder_bitrate()</span>, and <span style="font-family: Courier New,Courier,monospace;">recorder_attr_set_audio_samplerate()</span> functions, respectively.</li>
+<li>To set the audio attributes, such as encoder, encoder bitrate, and sample rate, use the <code>recorder_set_audio_encoder()</code>, <code>recorder_attr_set_audio_encoder_bitrate()</code>, and <code>recorder_attr_set_audio_samplerate()</code> functions, respectively.</li>
 </ul>
 </li>
 </ol>
 
 <h3 id="video_rec">Managing Video Recording</h3>
 
-<p>When the recorder handle is created, the video recorder is in the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span> state. To start recording, the video recorder must be in the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span> state.</p>
+<p>When the recorder handle is created, the video recorder is in the <code>RECORDER_STATE_CREATED</code> state. To start recording, the video recorder must be in the <code>RECORDER_STATE_READY</code> state.</p>
 
 <p>To manage playback:</p>
 
 <ol>
 <li>
-<p>Change the player state from <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span> to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span> by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_prepare()</span> function:</p>
+<p>Change the player state from <code>RECORDER_STATE_CREATED</code> to <code>RECORDER_STATE_READY</code> by calling the <code>recorder_prepare()</code> function:</p>
 <pre class="prettyprint">
 error_code = recorder_prepare(rec_data.recorder);
 </pre>
 </li>
 <li>
-<p>Once the recorder is ready, start video recording using the <span style="font-family: Courier New,Courier,monospace;">recorder_start()</span> function. The recorder state changes to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_RECORDING</span>.</p>
+<p>Once the recorder is ready, start video recording using the <code>recorder_start()</code> function. The recorder state changes to <code>RECORDER_STATE_RECORDING</code>.</p>
 <pre class="prettyprint">
 error_code = recorder_start(rec_data.recorder);
 </pre>
 </li>
 <li>
-<p>In the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_RECORDING</span> state, you can pause or stop recording:</p>
+<p>In the <code>RECORDER_STATE_RECORDING</code> state, you can pause or stop recording:</p>
 <ul>
-<li>To pause recording, call the <span style="font-family: Courier New,Courier,monospace;">recorder_pause()</span> function that changes the recorder state to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_PAUSED</span>. In this state, you can resume or stop recording. To resume,  call the <span style="font-family: Courier New,Courier,monospace;">recorder_start()</span> function.
+<li>To pause recording, call the <code>recorder_pause()</code> function that changes the recorder state to <code>RECORDER_STATE_PAUSED</code>. In this state, you can resume or stop recording. To resume,  call the <code>recorder_start()</code> function.
 <pre class="prettyprint">
 error_code = recorder_pause(rec_data.recorder);
 </pre>
 </li>
-<li>You can stop recording either in the <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_PAUSED</span> state. In stopping recording, you can save or discard the recorded data. To save the recorded data, use the <span style="font-family: Courier New,Courier,monospace;">recorder_commit()</span> function, and to discard, use the <span style="font-family: Courier New,Courier,monospace;">recorder_cancel()</span> function. Both functions set the video recorder state to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span>.
+<li>You can stop recording either in the <code>RECORDER_STATE_RECORDING</code> or <code>RECORDER_STATE_PAUSED</code> state. In stopping recording, you can save or discard the recorded data. To save the recorded data, use the <code>recorder_commit()</code> function, and to discard, use the <code>recorder_cancel()</code> function. Both functions set the video recorder state to <code>RECORDER_STATE_READY</code>.
 <pre class="prettyprint">
 error_code = recorder_commit(rec_data.recorder);
 /* OR */
@@ -522,8 +522,8 @@ error_code = recorder_cancel(rec_data.recorder);
 
 <p>After you finish video recording, release all the resources allocated to the video recorder:</p>
 <ol>
-<li>Reset the video recorder by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_unprepare()</span> function, which changes the recorder state from <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_CREATED</span>.</li>
-<li>Release the video recorder resources by calling the <span style="font-family: Courier New,Courier,monospace;">recorder_destroy()</span> function. The recorder state changes to <span style="font-family: Courier New,Courier,monospace;">RECORDER_STATE_NONE</span>.</li>
+<li>Reset the video recorder by calling the <code>recorder_unprepare()</code> function, which changes the recorder state from <code>RECORDER_STATE_READY</code> to <code>RECORDER_STATE_CREATED</code>.</li>
+<li>Release the video recorder resources by calling the <code>recorder_destroy()</code> function. The recorder state changes to <code>RECORDER_STATE_NONE</code>.</li>
 </ol>
 <pre class="prettyprint">
 error_code = recorder_unprepare(rec_data-&gt;recorder);
index 642e154..583a5e3 100644 (file)
@@ -46,9 +46,9 @@
 <ol> 
    <li>Create a new project in the Tizen Studio with the <strong>Basic UI</strong> template, and specify the project name as <strong>SensorAccelerator</strong>.
 <p>For more information on how to create a project, see Creating a Project (in <a href="../mobile/first_app_mn.htm#create">mobile</a> and <a href="../wearable/first_app_wn.htm#create">wearable</a> applications).</p></li> 
-   <li>In the new project, open the <span style="font-family: Courier New,Courier,monospace">sensoraccelerator.c</span> source file in the <span style="font-family: Courier New,Courier,monospace">src</span> folder and add the required library header file and variables:
+   <li>In the new project, open the <code>sensoraccelerator.c</code> source file in the <code>src</code> folder and add the required library header file and variables:
    <ul>
-   <li>The <span style="font-family: Courier New,Courier,monospace">sensor.h</span> file is a header file for various sensor libraries.</li>
+   <li>The <code>sensor.h</code> file is a header file for various sensor libraries.</li>
 <li>The purpose of the application is to display whether the accelerator sensor is supported, the current acceleration value, and the maximum value of acceleration. As a result, a variable is defined for each of these values.</li>
    </ul>
    
@@ -67,11 +67,11 @@ typedef struct appdata appdata_s;
 </pre>
 
 </li>
-       <li>Create 2 new functions on top of the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:
+       <li>Create 2 new functions on top of the <code>create_base_gui()</code> function:
        <ul>
-       <li>The <span style="font-family: Courier New,Courier,monospace">show_is_supported()</span> function identifies whether the accelerator sensor is supported, and displays the result in the first label component.
-       <p>The <span style="font-family: Courier New,Courier,monospace">sensor_is_supported()</span> function requests the support information. Passing <span style="font-family: Courier New,Courier,monospace">SENSOR_ACCELEROMETER</span> as the first parameter makes the second parameter return the accelerator support information.</p></li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">my_box_pack()</span> function adds a UI component to a box container.</li>
+       <li>The <code>show_is_supported()</code> function identifies whether the accelerator sensor is supported, and displays the result in the first label component.
+       <p>The <code>sensor_is_supported()</code> function requests the support information. Passing <code>SENSOR_ACCELEROMETER</code> as the first parameter makes the second parameter return the accelerator support information.</p></li>
+       <li>The <code>my_box_pack()</code> function adds a UI component to a box container.</li>
        </ul>
        
 <pre class="prettyprint">
@@ -105,7 +105,7 @@ my_box_pack(Evas_Object *box, Evas_Object *child,
 </pre>
 </li>
 
-       <li>To create the box, add the first and second label to the box, and call the <span style="font-family: Courier New,Courier,monospace">show_is_supported()</span> function to determine the sensor support, you must modify the source code at the bottom of the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function as follows:
+       <li>To create the box, add the first and second label to the box, and call the <code>show_is_supported()</code> function to determine the sensor support, you must modify the source code at the bottom of the <code>create_base_gui()</code> function as follows:
        
 <pre class="prettyprint">
 /* Conformant */
@@ -156,10 +156,10 @@ show_is_supported(ad);
 <p>To implement a feature that requests the corresponding event as you shake the device, and displays the acceleration value on the screen:</p>
 
 <ol> 
-   <li>Add a structure for the sensor and a global variable to the top of the <span style="font-family: Courier New,Courier,monospace">sensoraccelerator.c</span> source file:
+   <li>Add a structure for the sensor and a global variable to the top of the <code>sensoraccelerator.c</code> source file:
    <ul>
-   <li>The <span style="font-family: Courier New,Courier,monospace">sensorinfo_s</span> structure includes a sensor handle and an event listener variable.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">sensor_info</span> is a global variable of the <span style="font-family: Courier New,Courier,monospace">sensorinfo_s</span> structure.</li>
+   <li>The <code>sensorinfo_s</code> structure includes a sensor handle and an event listener variable.</li>
+<li>The <code>sensor_info</code> is a global variable of the <code>sensorinfo_s</code> structure.</li>
 </ul>
    
 <pre class="prettyprint">
@@ -183,16 +183,16 @@ static sensorinfo_s sensor_info;
 
        </li>
 
-       <li>To request sensor events, you need a sensor handle and an event listener, and must start the listener. Create 2 new functions above the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:
+       <li>To request sensor events, you need a sensor handle and an event listener, and must start the listener. Create 2 new functions above the <code>create_base_gui()</code> function:
        <ul>
-       <li>The <span style="font-family: Courier New,Courier,monospace">_new_sensor_value()</span> function is an event callback for the accelerator sensor, and it outputs a new sensor value to the screen.
-<p>The sensor data is passed to the second parameter, and the <span style="font-family: Courier New,Courier,monospace">values[0]</span> field contains the X axis data, <span style="font-family: Courier New,Courier,monospace">values[1]</span> contains the Y axis data, and <span style="font-family: Courier New,Courier,monospace">values[2]</span> contains the Z axis data.</p></li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">start_accelerator_sensor()</span> function starts the accelerator sensor and specifies the event callback function:
+       <li>The <code>_new_sensor_value()</code> function is an event callback for the accelerator sensor, and it outputs a new sensor value to the screen.
+<p>The sensor data is passed to the second parameter, and the <code>values[0]</code> field contains the X axis data, <code>values[1]</code> contains the Y axis data, and <code>values[2]</code> contains the Z axis data.</p></li>
+       <li>The <code>start_accelerator_sensor()</code> function starts the accelerator sensor and specifies the event callback function:
        <ul>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_get_default_sensor()</span> function gets a specific sensor handle. Passing <span style="font-family: Courier New,Courier,monospace">SENSOR_ACCELEROMETER</span> to the first parameter returns an accelerator sensor handle to the second parameter.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_create_listener()</span> function creates an event listener. Passing a sensor handle to the first parameter returns a listener object to the second parameter.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_listener_set_event_cb()</span> function specifies a callback function to the listener. The parameters follow this order: event listener, interval (in milliseconds), callback function name, and user data.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_listener_start()</span> function starts the listener.</li>
+       <li>The <code>sensor_get_default_sensor()</code> function gets a specific sensor handle. Passing <code>SENSOR_ACCELEROMETER</code> to the first parameter returns an accelerator sensor handle to the second parameter.</li>
+       <li>The <code>sensor_create_listener()</code> function creates an event listener. Passing a sensor handle to the first parameter returns a listener object to the second parameter.</li>
+       <li>The <code>sensor_listener_set_event_cb()</code> function specifies a callback function to the listener. The parameters follow this order: event listener, interval (in milliseconds), callback function name, and user data.</li>
+       <li>The <code>sensor_listener_start()</code> function starts the listener.</li>
        </ul>
        </li>
        </ul>
@@ -223,7 +223,7 @@ start_accelerator_sensor(appdata_s *ad)
 </pre>
        </li>
        
-       <li>To operate the event listener automatically when the application starts running, invoke the above <span style="font-family: Courier New,Courier,monospace">start_accelerator_sensor()</span> function at the end of the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:
+       <li>To operate the event listener automatically when the application starts running, invoke the above <code>start_accelerator_sensor()</code> function at the end of the <code>create_base_gui()</code> function:
        
 <pre class="prettyprint">
 /* Show the window after the base GUI is set up */
@@ -238,7 +238,7 @@ start_accelerator_sensor(ad);
 <p>To test on the emulator, use the <a href="../../../../org.tizen.studio/html/common_tools/emulator_control_panel.htm">control panel</a>:</p>
 <ol type="a">
 <li>Right-click the emulator and select <strong>Control Panel</strong>.
-<p align="center"><img alt="Emulator control panel" src="../../images/sensor_accelerator_emulator.png" /></p>
+<p align="center"><img alt="Emulator Control Panel" src="../../images/sensor_accelerator_emulator.png" /></p>
        </li>
        
        <li>In the control panel tree list on the left, select <strong>Event Injector &gt; 3-Axis Sensors</strong>.</li>
@@ -257,7 +257,7 @@ start_accelerator_sensor(ad);
 <p>To access the maximum acceleration value:</p>
 
 <ol>
-       <li>Declare an array variable in a number format at the top of the <span style="font-family: Courier New,Courier,monospace">sensoraccelerator.c</span> source file and reset it to 0. This variable saves the maximum acceleration value.
+       <li>Declare an array variable in a number format at the top of the <code>sensoraccelerator.c</code> source file and reset it to 0. This variable saves the maximum acceleration value.
        
 <pre class="prettyprint">
 struct _sensor_info {
@@ -272,7 +272,7 @@ static float max_acc_value[3] = {0.f, 0.f, 0.f};
 </pre>
        </li>
        
-       <li>To create the third label and a button, add new code to the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function.
+       <li>To create the third label and a button, add new code to the <code>create_base_gui()</code> function.
        <p>The button resets the maximum value to 0, when clicked.</p>
        
 <pre class="prettyprint">
@@ -294,11 +294,11 @@ my_box_pack(box, ad-&gt;label2, 1.0, 1.0, 0.5, -1.0);
 </pre>
        </li>
        
-       <li>Create 2 new functions and add new code to the <span style="font-family: Courier New,Courier,monospace">_new_sensor_value()</span> function:
+       <li>Create 2 new functions and add new code to the <code>_new_sensor_value()</code> function:
        <ul>    
-       <li>The <span style="font-family: Courier New,Courier,monospace">get_absolute_max()</span> function compares 2 values and returns the higher one by changing 2 real numbers to absolute values.</li>
-       <li>The new code in the <span style="font-family: Courier New,Courier,monospace">_new_sensor_value()</span> function saves the maximum values of the X, Y, and Z axis acceleration in the global variable and outputs them to the third label component.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">btn_clicked_init_max_acc_value()</span> function resets the maximum value saved in the global variable to 0 when you click the button.</li>
+       <li>The <code>get_absolute_max()</code> function compares 2 values and returns the higher one by changing 2 real numbers to absolute values.</li>
+       <li>The new code in the <code>_new_sensor_value()</code> function saves the maximum values of the X, Y, and Z axis acceleration in the global variable and outputs them to the third label component.</li>
+       <li>The <code>btn_clicked_init_max_acc_value()</code> function resets the maximum value saved in the global variable to 0 when you click the button.</li>
        </ul>
 <pre class="prettyprint">
 static float
index b66aca8..952ac71 100644 (file)
@@ -44,9 +44,9 @@
 <ol> 
    <li>Create a new project in the Tizen Studio with the <strong>Basic UI</strong> template, and specify the project name as <strong>SensorProximity</strong>.
 <p>For more information on how to create a project, see Creating a Project (in <a href="../mobile/first_app_mn.htm#create">mobile</a> and <a href="../wearable/first_app_wn.htm#create">wearable</a> applications).</p></li> 
-   <li>In the new project, open the <span style="font-family: Courier New,Courier,monospace">sensorproximity.c</span> source file in the <span style="font-family: Courier New,Courier,monospace">src</span> folder and add the required library header file and variables:
+   <li>In the new project, open the <code>sensorproximity.c</code> source file in the <code>src</code> folder and add the required library header file and variables:
    <ul>
-   <li>The <span style="font-family: Courier New,Courier,monospace">sensor.h</span> file is a header file for various sensor libraries.</li>
+   <li>The <code>sensor.h</code> file is a header file for various sensor libraries.</li>
 <li>The purpose of the application is to display whether the proximity sensor is supported, and the current distance value. As a result, a variable is defined for both of these values.</li>
    </ul>
 
@@ -63,11 +63,11 @@ struct appdata {
 typedef struct appdata appdata_s;
 </pre>
        </li>
-       <li>Create 2 new functions on top of the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:
+       <li>Create 2 new functions on top of the <code>create_base_gui()</code> function:
        <ul>
-       <li>The <span style="font-family: Courier New,Courier,monospace">show_is_supported()</span> function identifies whether the proximity sensor is supported, and displays the result in the first label component.
-       <p>The <span style="font-family: Courier New,Courier,monospace">sensor_is_supported()</span> function requests the support information. Passing <span style="font-family: Courier New,Courier,monospace">SENSOR_PROXIMITY</span> as the first parameter makes the second parameter return the proximity support information.</p></li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">my_box_pack()</span> function adds a UI component to a box container.</li>
+       <li>The <code>show_is_supported()</code> function identifies whether the proximity sensor is supported, and displays the result in the first label component.
+       <p>The <code>sensor_is_supported()</code> function requests the support information. Passing <code>SENSOR_PROXIMITY</code> as the first parameter makes the second parameter return the proximity support information.</p></li>
+       <li>The <code>my_box_pack()</code> function adds a UI component to a box container.</li>
        </ul>
        
 <pre class="prettyprint">
@@ -101,7 +101,7 @@ my_box_pack(Evas_Object *box, Evas_Object *child,
 </pre>
        </li>
        
-       <li>To create the box, add the 2 labels to the box, and call the <span style="font-family: Courier New,Courier,monospace">show_is_supported()</span> function to determine the sensor support, you must modify the source code at the bottom of the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function as follows:
+       <li>To create the box, add the 2 labels to the box, and call the <code>show_is_supported()</code> function to determine the sensor support, you must modify the source code at the bottom of the <code>create_base_gui()</code> function as follows:
        
 <pre class="prettyprint">
 /* Conformant */
@@ -153,10 +153,10 @@ show_is_supported(ad);
 <p>To implement a feature that requests the corresponding event as the proximity sensor detects an object, and displays the distance value on the screen:</p>
 
 <ol>
-   <li>Add a structure for the sensor and a global variable to the top of the <span style="font-family: Courier New,Courier,monospace">sensorproximity.c</span> source file:
+   <li>Add a structure for the sensor and a global variable to the top of the <code>sensorproximity.c</code> source file:
    <ul>
-   <li>The <span style="font-family: Courier New,Courier,monospace">sensorinfo_s</span> structure includes a sensor handle and an event listener variable.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">sensor_info</span> is a global variable of the <span style="font-family: Courier New,Courier,monospace">sensorinfo_s</span> structure.</li>
+   <li>The <code>sensorinfo_s</code> structure includes a sensor handle and an event listener variable.</li>
+<li>The <code>sensor_info</code> is a global variable of the <code>sensorinfo_s</code> structure.</li>
 </ul>
        
 <pre class="prettyprint">
@@ -179,16 +179,16 @@ static sensorinfo_s sensor_info;
 
        </li>
 
-       <li>To request sensor events, you need a sensor handle and an event listener, and must start the listener. Create 2 new functions above the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:
+       <li>To request sensor events, you need a sensor handle and an event listener, and must start the listener. Create 2 new functions above the <code>create_base_gui()</code> function:
        <ul>
-       <li>The <span style="font-family: Courier New,Courier,monospace">_new_sensor_value()</span> function is an event callback for the proximity sensor, and it outputs a new sensor value to the screen.
-<p>The sensor data is passed to the second parameter. The distance data is saved in <span style="font-family: Courier New,Courier,monospace">values[0]</span>.</p></li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">start_proximity_sensor()</span> function starts the proximity sensor and specifies the event callback function:
+       <li>The <code>_new_sensor_value()</code> function is an event callback for the proximity sensor, and it outputs a new sensor value to the screen.
+<p>The sensor data is passed to the second parameter. The distance data is saved in <code>values[0]</code>.</p></li>
+       <li>The <code>start_proximity_sensor()</code> function starts the proximity sensor and specifies the event callback function:
        <ul>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_get_default_sensor()</span> function gets a specific sensor handle. Passing <span style="font-family: Courier New,Courier,monospace">SENSOR_PROXIMITY</span> to the first parameter returns an proximity sensor handle to the second parameter.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_create_listener()</span> function creates an event listener. Passing a sensor handle to the first parameter returns a listener object to the second parameter.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_listener_set_event_cb()</span> function specifies a callback function to the listener. The parameters follow this order: event listener, interval (in milliseconds), callback function name, and user data.</li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">sensor_listener_start()</span> function starts the listener.</li>
+       <li>The <code>sensor_get_default_sensor()</code> function gets a specific sensor handle. Passing <code>SENSOR_PROXIMITY</code> to the first parameter returns an proximity sensor handle to the second parameter.</li>
+       <li>The <code>sensor_create_listener()</code> function creates an event listener. Passing a sensor handle to the first parameter returns a listener object to the second parameter.</li>
+       <li>The <code>sensor_listener_set_event_cb()</code> function specifies a callback function to the listener. The parameters follow this order: event listener, interval (in milliseconds), callback function name, and user data.</li>
+       <li>The <code>sensor_listener_start()</code> function starts the listener.</li>
        </ul>
        </li>
        </ul>
@@ -218,7 +218,7 @@ start_proximity_sensor(appdata_s *ad)
 </pre>
        </li>
        
-       <li>To operate the event listener automatically when the application starts running, invoke the above <span style="font-family: Courier New,Courier,monospace">start_proximity_sensor()</span> function at the end of the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:
+       <li>To operate the event listener automatically when the application starts running, invoke the above <code>start_proximity_sensor()</code> function at the end of the <code>create_base_gui()</code> function:
        
 <pre class="prettyprint">
 /* Show the window after the base GUI is set up */
index 7c22196..35af738 100644 (file)
 
 <p>After you have created the project, the Tizen Studio changes to the <strong>UI Builder</strong> perspective with the applicable views, and the project structure is shown in the <strong>Project Explorer</strong> view.</p>
 
-<p class="figure">Figure: UI Builder views and default project structure</p> 
+<p align="center"><strong>Figure: UI Builder views and default project structure</strong></p> 
 <p align="center"><img alt="UI Builder views and default project structure" src="../../images/ui_builder_views.png" /></p>
 
 <p>The following table describes the content of the default project folders and files.</p>
 
+<p align="center" class="Table"><strong>Table: Default project content</strong></p>
 <table>
-<caption>Table: Default project content</caption>
 <tbody>
 <tr>
  <th>File or folder</th>
  <th>Content</th>
 </tr>
  <tr>
- <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <span style="font-family: Courier New,Courier,monospace">inc</span></td>
+ <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <code>inc</code></td>
  <td>Folder for the default include path</td>
  </tr>
  <tr>
- <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <span style="font-family: Courier New,Courier,monospace">res</span></td>
+ <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <code>res</code></td>
  <td>Resource folder of the Tizen Studio</td>
  </tr>
  <tr>
- <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <span style="font-family: Courier New,Courier,monospace">shared</span></td>
+ <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <code>shared</code></td>
  <td>Shared folder</td>
  </tr>
  <tr>
- <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <span style="font-family: Courier New,Courier,monospace">src</span></td>
+ <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <code>src</code></td>
  <td>Application source files
        <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">src/managed</span>: UI layout source files automatically generated by the native UI Builder</li>
-       <li><span style="font-family: Courier New,Courier,monospace">src/event_handler</span>: Event handler source files</li>
+       <li><code>src/managed</code>: UI layout source files automatically generated by the native UI Builder</li>
+       <li><code>src/event_handler</code>: Event handler source files</li>
        </ul>
  </td>
  </tr>
  <tr>
- <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <span style="font-family: Courier New,Courier,monospace">layout</span></td>
+ <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <code>layout</code></td>
  <td>Layout folder</td>
  </tr>
  <tr>
- <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <span style="font-family: Courier New,Courier,monospace">lib</span></td>
+ <td><img alt="Folder" src="../../images/ui_builder_folder.png" /> <code>lib</code></td>
  <td>Library folder</td>
  </tr>
  <tr>
- <td><img alt="Layout" src="../../images/ui_builder_layout.png" /> <span style="font-family: Courier New,Courier,monospace">layout.xml</span></td>
+ <td><img alt="Layout" src="../../images/ui_builder_layout.png" /> <code>layout.xml</code></td>
  <td>Layout meta file</td>
  </tr> 
  <tr>
- <td><img alt="Icon" src="../../images/ui_builder_icon.png" /> <span style="font-family: Courier New,Courier,monospace">icon.png</span></td>
+ <td><img alt="Icon" src="../../images/ui_builder_icon.png" /> <code>icon.png</code></td>
  <td>Application icon file</td>
  </tr>
  <tr>
- <td><img alt="Manifest" src="../../images/ui_builder_manifest.png" /> <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span></td>
+ <td><img alt="Manifest" src="../../images/ui_builder_manifest.png" /> <code>tizen-manifest.xml</code></td>
  <td>Tizen native application manifest XML file</td>
  </tr> 
 </tbody></table>
 
 <p>Using the above steps, you can create a layout for your UI. For example, you can create a Login view by adding a grid, label, entry, button, and check UI components, and setting their properties and events.</p>
 
-<p class="figure">Figure: Login view</p> 
+<p align="center"><strong>Figure: Login view</strong></p> 
 <p align="center"><img alt="Login view" src="../../images/ui_builder_login.png" /></p>
  
 <h3>Using the XML Editor</h3>
 <ul>
        <li><strong>Source</strong> tab
        <p>You can switch to the XML editor by clicking the <strong>Source</strong> tab at the top of the <strong>WYSIWYG Editor</strong> view. In the <strong>Source</strong> tab, you can edit the layout XML file.</p>
-       <p class="figure">Figure: Source tab</p> 
+       <p align="center"><strong>Figure: Source tab</strong></p> 
        <p align="center"><img alt="Source tab" src="../../images/ui_builder_source.png" /></p>
        </li>
 
        <li>Content assist
        <p>The native UI Builder provides content assist functionality, which helps you to write code faster and more efficiently. To use this functionality, type a few characters of the word and press <strong>Ctrl+Space</strong>. The proposals are shown in a popup as in the following figure.</p>
-       <p class="figure">Figure: Content assist</p> 
+       <p align="center"><strong>Figure: Content assist</strong></p> 
        <p align="center"><img alt="Content assist" src="../../images/ui_builder_assist.png" /></p> 
        </li>
        
        <li>Auto complete
        <p>If you select a tag in the suggested list with content assist, the auto complete feature automatically adds the end tag.</p>
-       <p class="figure">Figure: Auto complete</p> 
+       <p align="center"><strong>Figure: Auto complete</strong></p> 
        <p align="center"><img alt="Auto complete" src="../../images/ui_builder_autocomplete.png" /></p>
        </li>
        
        <li>Selection synchronization
        <p>If you move a focus to another UI component in the <strong>Source</strong> tab, the selection in Preview pane is automatically synchronized. Similarly, if you change the selection in the preview pane, the focus in the <strong>Source</strong> tab moves accordingly.</p>
-       <p class="figure">Figure: Selection synchronization</p> 
+       <p align="center"><strong>Figure: Selection synchronization</strong></p> 
        <p align="center"><img alt="Selection synchronization" src="../../images/ui_builder_selection.png" /></p>
        </li>
 </ul>
 void view1_button1_onclicked(uib_view1_view_context *vc, Evas_Object *obj, void *event_info)
 </pre>
        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">vc</span>: View context related to the event. You can access the UI component in the view through this structure. The following code example shows a sample of the view context.
+               <li><code>vc</code>: View context related to the event. You can access the UI component in the view through this structure. The following code example shows a sample of the view context.
 <pre class="prettyprint">
 struct _uib_view1_view_context {
 &nbsp;&nbsp;&nbsp;&nbsp;/* Parent evas_object which was parameter of create function */
@@ -261,8 +261,8 @@ struct _uib_view1_view_context {
 typedef struct _uib_view1_view_context uib_view1_view_context;
 </pre>
                </li>
-               <li><span style="font-family: Courier New,Courier,monospace">obj</span>: UI component where the event occurs.</li>
-               <li><span style="font-family: Courier New,Courier,monospace">event_info</span>: User data passed from the Tizen framework. The event type is defined in the above event handle code.</li>
+               <li><code>obj</code>: UI component where the event occurs.</li>
+               <li><code>event_info</code>: User data passed from the Tizen framework. The event type is defined in the above event handle code.</li>
        </ul>
        </li>
 
@@ -297,8 +297,8 @@ typedef struct _uib_view1_view_context uib_view1_view_context;
        <p align="center"><img alt="Connection options" src="../../images/ui_builder_storyboard_options.png" /></p>
        <p>The <strong>Go to Source Code</strong> option takes you to the source code, where 2 functions have been generated:</p>
        <ul>
-               <li>One is called before the transition is performed to the target view (<span style="font-family: Courier New,Courier,monospace">view1_&lt;UI_component&gt;_&lt;event&gt;()</span>).</li>
-               <li>One is provided after the transition has been performed (<span style="font-family: Courier New,Courier,monospace">view1_&lt;UI_component&gt;_&lt;event&gt;_post()</span>).</li>
+               <li>One is called before the transition is performed to the target view (<code>view1_&lt;UI_component&gt;_&lt;event&gt;()</code>).</li>
+               <li>One is provided after the transition has been performed (<code>view1_&lt;UI_component&gt;_&lt;event&gt;_post()</code>).</li>
        </ul>
        <p>You can perform whatever pre or post transition operations you want in these functions.</p>
        <p align="center"><img alt="Pre and post transition operations" src="../../images/ui_builder_storyboard_transitions.png" /></p>
@@ -323,7 +323,7 @@ typedef struct _uib_view1_view_context uib_view1_view_context;
 
 <p>The following figure shows the running application. If you click the <strong>Login</strong> button, the text changes to <strong>Click to login</strong>.</p>
 
-<p class="figure">Figure: Running Login application</p> 
+<p align="center"><strong>Figure: Running Login application</strong></p> 
 <p align="center"><img alt="Running Login application" src="../../images/ui_builder_run.png" /></p>
        
    
index 05b39af..d8e58ea 100644 (file)
@@ -69,7 +69,7 @@
 <p>The main reason Tizen uses EFL is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering, resulting in EFL being fast even in software rendering.</p>
 <p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated. In other words, since EFL (Evas) works with the retained mode, there is no need to command any drawing.</p>
 
-<p class="figure">Figure: Retained-mode rendering</p> 
+<p align="center"><strong>Figure: Retained-mode rendering</strong></p> 
 <p align="center"><img alt="Retained-mode rendering" src="../../images/ui_builder_retained_mode.png" /></p>
 
 <h3>Separation of UI and Logic with Edje</h3>
 </ul>
 <p>The following figure describes the behavior of the EDC files.</p>
 
-<p class="figure">Figure: EDC file behavior</p> 
+<p align="center"><strong>Figure: EDC file behavior</strong></p> 
 <p align="center"><img alt="EDC file behavior" src="../../images/ui_builder_edc.png" /></p>
 
 <h2 id="efl_structure">EFL Structure on Tizen</h2>
 <p>EFL is a collection of libraries that cover a range of functionality from managing the application life-cycle to rendering graphical objects. EFL libraries build on top of each other in layers, steadily becoming higher-level, yet allowing access to lower levels. The higher up you go, the less you have to do yourself. Elementary is at the top, but you still access the layers below it for common tasks, as there is no need for Elementary to wrap things that work perfectly well as-is.</p>
 <p>To learn more about each library, go to <a href="../../../../org.tizen.guides/html/native/ui/efl/introduction_n.htm">Introduction</a>. This section only briefly describes the hierarchical structure of your application on Tizen.</p>
 
-<p class="figure">Figure: EFL structure</p> 
+<p align="center"><strong>Figure: EFL structure</strong></p> 
 <p align="center"><img alt="EFL structure" src="../../images/ui_builder_efl_structure.png" /></p>
  
 <p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
 <p>To manage multiple views with EFL on Tizen applications, create a naviframe object. The naviframe can contain multiple views, and is a top-layer object which can help your application to manage and switch views. If your application has only one view, you do not need the naviframe.</p>
 <p>The following figure illustrates the most popular view hierarchy for managing multiple views.</p>
 
-<p class="figure">Figure: View hierarchy for multiple views</p> 
+<p align="center"><strong>Figure: View hierarchy for multiple views</strong></p> 
 <p align="center"><img alt="View hierarchy for multiple views" src="../../images/ui_builder_view_hierarchy.png" /></p>
 
 <ul>
 
 <p>If you want to make a structure for each situation (single and multiple views), the following figure illustrates a possible structure.</p>
 
-<p class="figure" id="UI_figure">Figure: UI hierarchy structure</p> 
+<p align="center" id="UI_figure"><strong>Figure: UI hierarchy structure</strong></p> 
 <p align="center"><img alt="UI hierarchy structure" src="../../images/ui_builder_ui_hierarchy.png" /></p>
 
 <h2 id="library">Elementary UI Component Library</h2>
index b6cb87a..7a9b7df 100644 (file)
@@ -46,7 +46,7 @@
 
 <p>A mobile native application is created using the C language, and can be run on Tizen mobile devices. The application uses the native API, which provides various interfaces to the device hardware allowing you to take advantage of numerous capabilities tailored to run with limited device resources.</p>
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic mobile native application, which displays some text on the screen with no user interaction:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic mobile native application, which displays some text on the screen with no user interaction:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
@@ -70,7 +70,7 @@
 
 <p>The following figure illustrates the application to be created. The application screen displays the <strong>Hello Tizen</strong> text and no user interaction is provided. If you click the <strong>Back</strong> key on the device, the application moves to the background.</p>
 
-<p class="figure">Figure: Mobile native Basic UI application</p>
+<p align="center"><strong>Figure: Mobile native Basic UI application</strong></p>
 <p align="center"><img alt="Mobile native Basic UI application" src="../../images/basic_app_running_mn.png" /></p>
 
 <p>To create the application project:</p>
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">inc</span>: Default folder for included source files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">res</span>: Folder for resource files used by the application only</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">shared</span>: Folder for resource files to be shared with other applications</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">src</span>: Folder for source code files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">lib</span>: Folder for external library files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>: Manifest file used by the platform to install and launch the application</p></li>
+<li><p><code>inc</code>: Default folder for included source files</p></li>
+<li><p><code>res</code>: Folder for resource files used by the application only</p></li>
+<li><p><code>shared</code>: Folder for resource files to be shared with other applications</p></li>
+<li><p><code>src</code>: Folder for source code files</p></li>
+<li><p><code>lib</code>: Folder for external library files</p></li>
+<li><p><code>tizen-manifest.xml</code>: Manifest file used by the platform to install and launch the application</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_mn.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+    <div class="note">
+        <strong>Note</strong>
+        You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.
+    </div>
+
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>tizen-manifest.xml</code> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
 </li>
 
 <li>
 <li><p><strong>Localization</strong>: Define localized values for the application label, description, and icon.</p></li>
 <li><p><strong>Advanced</strong>: Define advanced features, such as application metadata, data control for services, application control functionalities, and account details.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>tizen-manifest.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+    <div class="note">
+        <strong>Note</strong>
+        The <code>tizen-manifest.xml</code> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
+
 </li>
 </ul>
 </li>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
 
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_mn.png" /></p>
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 <ul><li>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>.</li>
 </li>
 </ul>
 
-<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <span style="font-family: Courier New,Courier,monospace">Debug</span>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
+<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <code>Debug</code>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
 
 
 <p>After you have built the application, run it.</p>
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_mn.png" alt="Application running in the emulator" /></p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the emulator display has switched off, you cannot see the application launch. To see the application on the emulator screen:
+      <div class="note">
+        <strong>Note</strong>
+        If the emulator display has switched off, you cannot see the application launch. To see the application on the emulator screen:
         <ol type="a">
-        <li>To switch the display on, in the key window next to the emulator screen, click <strong>Power</strong>.</li>
+        <li>To switch the display on, in the key window next to the emulator screen, click <code>Power</code>.</li>
         <li>On the home screen, swipe left.</li>
-        </ol></td>
-    </tr>
-   </tbody>
-  </table>
+        </ol>
+    </div>
 
 <p>While the application is running, the <strong>Log</strong> view in the Tizen Studio shows the log, debug, and exception messages from the methods defined in the log macros. To see the view, in the Tizen Studio menu, go to <strong>Window &gt; Show View &gt; Log</strong>.</p>
 </li>
 </li>
 <li>Confirm that the application launches in the target device.</li>
 </ol>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+  
+      <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_n.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+        </ol>
+    </div>
   
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>  
 </li>
@@ -383,26 +363,26 @@ typedef struct appdata appdata_s;
 </pre>
 
 <h3 id="register" name="register">Registering Life-cycle Callbacks</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function has callbacks that manage specific parts of the application life-cycle:</p>
+<p>The <code>main()</code> function has callbacks that manage specific parts of the application life-cycle:</p>
 
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">app_create</span
+<li><code>app_create</code
 <ul><li>Called when the application process starts.</li>
 <li>Used to create UI components.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_terminate</span
+<li><code>app_terminate</code
 <ul><li>Called while the application process is terminating.</li>
 <li>Called after the main loop quits.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_resume</span> (UI applications only)
+<li><code>app_resume</code> (UI applications only)
 <ul><li>Called when the application window is shown.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_pause</span> (UI applications only)
+<li><code>app_pause</code> (UI applications only)
 <ul><li>Called when the application window is totally hidden.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_control</span
-<ul><li>Called after the <span style="font-family: Courier New,Courier,monospace">app_create</span> callback when the process starts or called when a launch request is received while the process is running.</li>
-<li>Can receive <span style="font-family: Courier New,Courier,monospace">app_control</span> data (parameters for launching the application).</li>
+<li><code>app_control</code
+<ul><li>Called after the <code>app_create</code> callback when the process starts or called when a launch request is received while the process is running.</li>
+<li>Can receive <code>app_control</code> data (parameters for launching the application).</li>
 <li>Used to implement parameter-specific actions of the application.</li>
 </ul></li></ul>
 
@@ -431,7 +411,7 @@ main(int argc, char *argv[])
 </pre>
 
 <h3 id="ui" name="ui">Creating UI Objects</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">app_create()</span> function is called when the process starts, and it calls the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+<p>The <code>app_create()</code> function is called when the process starts, and it calls the <code>create_base_gui()</code> function:</p>
 
 <pre class="prettyprint">
 static bool
@@ -451,7 +431,7 @@ app_create(void *data)
 }
 </pre>
 
-<p>In the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, you can create a simple user interface that consists of window, conformant, and label objects. The function receives a pointer to fill in the <span style="font-family: Courier New,Courier,monospace">ad</span> structure.</p>
+<p>In the <code>create_base_gui()</code> function, you can create a simple user interface that consists of window, conformant, and label objects. The function receives a pointer to fill in the <code>ad</code> structure.</p>
 
 <pre class="prettyprint">
 static void
@@ -492,7 +472,7 @@ create_base_gui(appdata_s *ad)
 
 <ul>
 <li>
-<p>Window objects can be created by using the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and adding callbacks on window objects. One of the callbacks handles the <span style="font-family: Courier New,Courier,monospace">delete,request</span> event when the window is to be closed, and the other handles the <span style="font-family: Courier New,Courier,monospace">EEXT_CALLBACK_BACK</span> event when the hardware back key is pressed.</p>
+<p>Window objects can be created by using the <code>elm_win_util_standard_add()</code> function and adding callbacks on window objects. One of the callbacks handles the <code>delete,request</code> event when the window is to be closed, and the other handles the <code>EEXT_CALLBACK_BACK</code> event when the hardware back key is pressed.</p>
 
 <pre class="prettyprint">
 /*
@@ -512,9 +492,9 @@ eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
 </li>
 <li>
 <p>You can create a conformant object that is based on the window. The conformant goes inside the window first.</p> 
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_win_indicator_mode_set()</span> function decides whether the indicator is visible, and the <span style="font-family: Courier New,Courier,monospace">elm_win_indicator_opacity_set()</span> function sets the indicator opacity mode.</p>
-<p>You can set the conformant object as a resize object of the window by using the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function. It means that the conformant size and position are controlled by the window object directly.</p> 
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function makes the conformant object visible.</p>
+<p>The <code>elm_win_indicator_mode_set()</code> function decides whether the indicator is visible, and the <code>elm_win_indicator_opacity_set()</code> function sets the indicator opacity mode.</p>
+<p>You can set the conformant object as a resize object of the window by using the <code>elm_win_resize_object_add()</code> function. It means that the conformant size and position are controlled by the window object directly.</p> 
+<p>The <code>evas_object_show()</code> function makes the conformant object visible.</p>
 
 <pre class="prettyprint">
 /*
@@ -531,8 +511,8 @@ evas_object_show(ad-&gt;conform);
 </pre>
 </li>
 <li>
-<p>You can add a label object for text by using the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function. It adds a new label to the parent (conformant object).</p>
-<p>You can also set the text to the label by using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+<p>You can add a label object for text by using the <code>elm_label_add()</code> function. It adds a new label to the parent (conformant object).</p>
+<p>You can also set the text to the label by using the <code>elm_object_text_set()</code> function.</p>
 
 <pre class="prettyprint">
 /*
@@ -547,7 +527,7 @@ elm_object_content_set(ad-&gt;conform, ad-&gt;label);
 </pre>
 </li>
 <li>
-<p>When all the UI components are ready, make the window object visible by using the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function. This sets the window to display everything on the screen at once.</p>
+<p>When all the UI components are ready, make the window object visible by using the <code>evas_object_show()</code> function. This sets the window to display everything on the screen at once.</p>
 
 <pre class="prettyprint">
 /* Show the window after the base GUI is set up */
index 6dabd8f..81fa091 100644 (file)
    <li><strong>Designing and creating the application UI (User Interface)</strong> 
         <p>You can <a href="../feature/ui_builder_app_design_mn.htm">design and create the application UI (user interface) with UI Builder</a>.</p> 
         <p>UI Builder is included in the Tizen Studio, and functions as a WYSIWYG (What You See Is What You Get) design environment for creating UIs for native applications.</p>
-       <table class="note"> 
-    <tbody> 
-     <tr> 
-      <th class="note">Note</th> 
-     </tr> 
-     <tr> 
-      <td class="note">You can also design the application UI using the controls defined in the <a href="../../../../org.tizen.guides/html/native/ui/ui_cover_n.htm">User Interface</a> guides.
-        </td> 
-     </tr> 
-    </tbody> 
-   </table>
+
+       <div class="note">
+        <strong>Note</strong>
+        You can also design the application UI using the controls defined in the <a href="../../../../org.tizen.guides/html/native/ui/ui_cover_n.htm">User Interface</a> guides.
+    </div>
+   
         </li>
    <li><strong>Coding applications</strong> 
         <p>Code your application in the Tizen Studio using the namespaces defined in the Native API Reference (in <a href="../../../../org.tizen.native.mobile.apireference/modules.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/modules.html">wearable</a> applications).</p> </li> 
 
 <h2 id="debugging" name="debugging">Running and Debugging the Application</h2>
 
-  <p>You can <a href="running_app_n.htm">run your application in the Emulator</a>. The device Emulator, provided with the Tizen Studio, imitates the target environment running Tizen native applications. Using this replicated environment, you can test your application before deploying it to the real target device.</p>
+  <p>You can <a href="running_app_n.htm">run your application in the emulator</a>. The device emulator, provided with the Tizen Studio, imitates the target environment running Tizen native applications. Using this replicated environment, you can test your application before deploying it to the real target device.</p>
   
    
-  <p>You can also <a href="debugging_app_n.htm#emulator">debug your application with the Emulator</a>. The Emulator represents the almost identical functionality of the corresponding device model.</p> <p>The Emulator provides the following debugging capabilities:</p> 
+  <p>You can also <a href="debugging_app_n.htm#emulator">debug your application with the emulator</a>. The emulator represents the almost identical functionality of the corresponding device model.</p> <p>The emulator provides the following debugging capabilities:</p> 
     <ul> 
      <li>Injecting events with the Event Injector view</li> 
      <li>Simulating peripheral devices</li> 
   
   <p>You can also <a href="performance_n.htm">optimize your application</a> to achieve the best possible performance.</p>
   
-  <p>To debug your application with the Emulator or the target device, you must first <a href="building_app_n.htm">build the application</a>.</p>
+  <p>To debug your application with the emulator or the target device, you must first <a href="building_app_n.htm">build the application</a>.</p>
 
 <h2 id="packaging" name="packaging">Packaging the Application</h2>
 
                <p>In the <strong>Project Explorer</strong> view, a message (with the UI application) appears next to the referenced project name for all the applications you have added to the package.</p> </li> 
       </ul> </li> 
      </ol> 
-        <p>After packaging the multi-project application, the package consists of the application binary, resource, and data files of the root and referenced applications. Their <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> files are merged into one. <a href="../app_model/application_model_n.htm#packageID">The application ID in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> must be assigned with the package ID as a prefix.</a></p>
+        <p>After packaging the multi-project application, the package consists of the application binary, resource, and data files of the root and referenced applications. Their <code>tizen-manifest.xml</code> files are merged into one. <a href="../app_model/application_model_n.htm#packageID">The application ID in the <code>tizen-manifest.xml</code> must be assigned with the package ID as a prefix.</a></p>
    </li> 
    <li><a href="building_app_n.htm">Build</a> and <a href="running_app_n.htm">run</a> the UI application. <p>The service or widget application is built and run automatically while the UI application is built and run.</p></li> 
   </ol> 
 
-<table class="note">
-    <tbody>
-     <tr>
-      <th class="note">Note</th>
-     </tr>
-     <tr>
-      <td class="note">Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
+    <div class="note">
+        <strong>Note</strong>
+       Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
          <p>For your convenience, some policies can be allowed in the Tizen Studio only. For example, you can make a STANDALONE service application or STANDALONE widget application in the Tizen Studio, but these applications can be rejected in the Tizen Store.</p>
-      </td>
-     </tr>
-    </tbody>
-   </table>  
+    </div>   
   
 <p>The following table shows the possible combinations for a native multi-project. <strong>1</strong> means that only one application can be packaged as a sub application, while <strong>M</strong> means that multiple applications can be packaged as sub applications. The <strong>STANDALONE</strong> column defines whether the application can be packaged alone as the main application.</p> 
+<p align="center" class="Table"><strong>Table: Combinations</strong></p>
 <table>
-<caption>Table: Combinations</caption>
 <tbody>
 <tr>
                <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th> 
   <p>To certify and publish your application:</p> 
   <ul>
        <li>Upload your mobile native application to the Tizen Store or your wearable native application to the Samsung Galaxy Apps Store for registration.
-               <p>After the application is uploaded, the application is signed as a certified application installer package and the <span style="font-family: Courier New,Courier,monospace">&lt;Application_name&gt;.tpk</span> archive format, which contains the distributor signature, is added by the Tizen Store or Samsung Galaxy Apps Store.</p>
+               <p>After the application is uploaded, the application is signed as a certified application installer package and the <code>&lt;Application_name&gt;.tpk</code> archive format, which contains the distributor signature, is added by the Tizen Store or Samsung Galaxy Apps Store.</p>
        </li>
        <li>Check your application to the Tizen Store or Samsung Galaxy Apps Store for validation and selling.
                <p>The Tizen Store or Samsung Galaxy Apps Store checks whether your application functions properly.</p>
   <p>You can also upgrade your application after certification. If you want to withdraw your application from distribution and operation, you need to request for application retirement from the Tizen Store or Samsung Galaxy Apps Store.</p>  
 
   <p>The following figure illustrates the process of developing a Tizen native application.</p> 
-  <p class="figure">Figure: Native application development process</p> 
+  <p align="center"><strong>Figure: Native application development process</strong></p> 
 <p align="center"><img alt="Native application development process" src="../../images/app_dev_process_mn.png" /></p>
   
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index 57956cc..afedf92 100644 (file)
 
   <p>In the Tizen Studio, different build configurations are available for different development steps:</p> 
   <ul> 
-   <li>The <strong>Debug</strong> build is used to debug and test the application. <p>The binary, data, and debug files are stored in a <span style="font-family: Courier New,Courier,monospace">Debug</span> folder under the project in the workspace.</p> <p>This is the default build configuration.</p><p>In the debug mode, the debug level is Maximum (-g3) and optimization level is None (-O0).</p></li> 
+   <li>The <strong>Debug</strong> build is used to debug and test the application. <p>The binary, data, and debug files are stored in a <code>Debug</code> folder under the project in the workspace.</p> <p>This is the default build configuration.</p><p>In the debug mode, the debug level is Maximum (-g3) and optimization level is None (-O0).</p></li> 
    <li>The <strong>Release</strong> build is used for the tested, release-ready version of the application. 
-         <p>The compiled binary file is stored in a <span style="font-family: Courier New,Courier,monospace">Release</span> folder 
+         <p>The compiled binary file is stored in a <code>Release</code> folder 
                under the project in the workspace.</p> 
                <p>In the release mode, the debug level is Default (-g) and optimization level is Optimize most (-O3).</p> 
                <p>The release mode build itself does not strip the debug symbol. 
                        Stripping is done only in the packaging step for the ARM architecture.</p> 
 
-    <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The Tizen Studio automatically switches application logging off in the release mode. To enable logging in the release mode:
+       
+           <div class="note">
+        <strong>Note</strong>
+               The Tizen Studio automatically switches application logging off in the release mode. To enable logging in the release mode:
         <ol> 
-         <li>In the Tizen Studio menu, select <strong>Project &gt; Properties</strong>.</li> 
-         <li>In the <strong>Properties</strong> window, go to <strong>C/C++Build &gt; Settings &gt; C Complier &gt; Debugging</strong>.</li> 
-         <li>Select the <strong>Enable application logging</strong> check box.</li> 
-        </ol></td> 
-      </tr> 
-     </tbody> 
-    </table></li> 
+         <li>In the Tizen Studio menu, select <code>Project &gt; Properties</code>.</li> 
+         <li>In the <code>Properties</code> window, go to <code>C/C++Build &gt; Settings &gt; C Complier &gt; Debugging</code>.</li> 
+         <li>Select the <code>Enable application logging</code> check box.</li> 
+        </ol>
+    </div></li> 
   </ul>
 
 <p>To set the target architecture:</p>
@@ -137,16 +132,13 @@ API or privilege violations, which are displayed in the <strong>Problems</strong
        <li>Includes <p>Set the include path or files</p> </li> 
        <li>Optimization <p>Set optimization options</p> </li> 
        <li>Debugging <p>Set debugging options </p> 
-        <table class="note"> 
-         <tbody> 
-          <tr> 
-           <th class="note">Note</th> 
-          </tr> 
-          <tr> 
-           <td class="note"> <p>The <strong>Enable Application logging</strong> option is enabled for the <strong>Debug</strong> build configuration. The option is disabled in the <strong>Release</strong> configuration.</p></td> 
-          </tr> 
-         </tbody> 
-        </table></li> 
+               
+                   <div class="note">
+        <strong>Note</strong>
+        The <strong>Enable Application logging</strong> option is enabled for the <strong>Debug</strong> build configuration. The option is disabled in the <strong>Release</strong> configuration.
+    </div>
+               
+               </li> 
        <li>Warnings <p>Set warning options</p> </li> 
        <li>Miscellaneous <p>Set miscellaneous options</p> </li> 
       </ul></li> 
index c4ab78f..2100841 100644 (file)
 </li>
 <li><p>Define the project properties and click <strong>Finish</strong>.</p>
 <p>You can fill the project name. You can also select the location and working sets by clicking <strong>More properties</strong>.</p>
-      <table class="note"> 
-       <tbody> 
-        <tr> 
-         <th class="note">Note</th> 
-        </tr> 
-        <tr> 
-         <td class="note">The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.</td> 
-        </tr> 
-       </tbody> 
-      </table>
+         
+             <div class="note">
+        <strong>Note</strong>
+        The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.
+    </div>
 <p align="center"><img alt="Defining properties" src="../../images/create_project_wizard_properties_wn.png" /></p>
 
 <p>The Project Wizard sets up the project, creates the application files using the default content from the template, and closes. For more information about the Project Wizard and the available templates, see <a href="../../../../org.tizen.studio/html/native_tools/project_wizard_n.htm">Creating Tizen Projects with Tizen Project Wizard</a>.</p></li>
   </ol> </li></ol>
-  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file as well as in several project folders.</p> 
+  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <code>tizen-manifest.xml</code> file as well as in several project folders.</p> 
  
   <h2 id="import" name="import">Importing a Project</h2> 
   <p>If you have an existing Tizen application project, you can import it into the Tizen Studio:</p> 
   <ol> 
    <li>Select <strong>File &gt; Import &gt; Tizen &gt; Tizen Project</strong>, and click <strong>Next</strong>.</li> 
-   <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or native application package file (with the <span style="font-family: Courier New,Courier,monospace">.tpk</span> extension).</li> 
+   <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or native application package file (with the <code>.tpk</code> extension).</li> 
    <li>With the <strong>Platform</strong> drop-down lists, select the platform profile and version.</li>
    <li>Click <strong>Finish</strong>.</li> 
   </ol>
index 57ee733..bd3419c 100644 (file)
 <div id="container"><div id="contents"><div class="content">
   <h1>Debugging Applications</h1> 
   <p>Debugging your application enables you to understand its flow of control. With the Tizen Studio, you can use various <a href="#methods">application debugging methods</a>. However, remember that the best way to debug an application is to not make bugs in the first place, so learn how to <a href="#logs">prevent bugs by using logs</a>.</p> 
-  <p>The debugging environment uses <a href="http://www.gnu.org/software/gdb/gdb.html" target="_blank">GDB</a> (GNU Debugger) for debugging with the Emulator and a target device. GDB can debug both locally and <a href="#remote">remotely</a>. To ease the debugging process, you can set <a href="#break">break points</a>, step in, step out, and step over break points, and watch variables to track the changes in their values in the <strong>Debug</strong> view.</p> 
+  <p>The debugging environment uses <a href="http://www.gnu.org/software/gdb/gdb.html" target="_blank">GDB</a> (GNU Debugger) for debugging with the emulator and a target device. GDB can debug both locally and <a href="#remote">remotely</a>. To ease the debugging process, you can set <a href="#break">break points</a>, step in, step out, and step over break points, and watch variables to track the changes in their values in the <strong>Debug</strong> view.</p> 
   <p>Debugging native applications with Tizen Studio is same as with Eclipse CDT. For more information, see <a href="http://help.eclipse.org/luna/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Ftasks%2Fcdt_o_debug.htm" target="blank">Debugging in Eclipse</a>.</p> 
   <h2 id="debug" name="debug">Debug View</h2> 
   <p>The <strong>Debug</strong> view provides debug control buttons that help you to track source code easily.</p> 
 
   <p>You can control debug execution in various ways. After a break point suspends the program execution, you can step through your program or suspend the program by force. To control the execution, use the following control buttons in the <strong>Debug</strong> view.</p> 
-  <table> 
-   <caption>
-     Table: Debug view control buttons 
-   </caption> 
+  <p align="center" class="Table"><strong>Table: Debug view control buttons</strong></p>
+   <table> 
    <tbody> 
     <tr> 
      <th>Button</th> 
@@ -93,7 +91,7 @@
   <h3 id="basic" name="basic">Normal Debugging</h3> 
   <p>The normal debugging method is used to debug from start to finish an executable Tizen application, which can be run as a standalone. To debug the application:</p> 
   <ol> 
-   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen native Application</strong>.</p> <p>Debugging starts.</p> </li> 
+   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application</strong>.</p> <p>Debugging starts.</p> </li> 
    <li><p>To stop the program execution, select <strong>Run &gt; Suspend</strong> in the Tizen Studio menu. The program can be stopped also by a break point you have set before debugging.</p> </li> 
   </ol> 
   <p>You can debug the source code by, for example, checking variables, registers, and memory. You can also use the <strong>Step Over</strong>, <strong>Step In</strong>, and <strong>Resume</strong> buttons in the <strong>Debug</strong> view for step-by-step debugging actions.</p> 
   <p>If the Tizen Studio workspace has a project that contains the source code of the application currently running on the target, you can apply &quot;attach debugging&quot; at a source level.</p> 
   <p>To debug an application that is already running on the emulator or a device:</p>
   <ul>
-   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen native Application - Attach</strong>.</p>
+   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application - Attach</strong>.</p>
    <p>Note that the source code of the project must be related to the application that is running on the target.</p> </li>
    </ul>
 
  <h2 name="remote" id="remote">Remote Debugging</h2> 
   <p>The Tizen Studio supports remote debugging. Remote debugging is used to debug the OS Kernel or a system which cannot support local debugging. Remote debugging requires a &quot;GDB client&quot; on the host side and a &quot;GDB server&quot; on the target side. Both sides must be connected by serial or TCP/IP communication.</p> 
-  <p class="figure">Figure: Remote debugging</p> 
+  <p align="center"><strong>Figure: Remote debugging</strong></p> 
   <p align="center"><img alt="Remote debugging" src="../../images/remote_debug.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
   <h3 id="debug_remote" name="debug_remote">Remote Debugging Process</h3> 
   <p>A cross remote debugging environment is used to support the armel architecture of the Tizen devices. This means that the &quot;cross GDB&quot; and &quot;GDB server&quot; are used instead of native GDB and GDB server. Tizen also supports native (i386) remote debugging for the i386 emulator.</p> 
   <p>The Eclipse CDT based Tizen Studio supports the UI and control of the debugging process. The following figure shows the control flow of the remote debugging process.</p> 
-  <p class="figure">Figure: Remote debugging control flow</p> 
+  <p align="center"><strong>Figure: Remote debugging control flow</strong></p> 
   <p align="center"><img alt="Remote debugging control flow" src="../../images/remote_debug_sdk.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
   
   <h2 name="logs" id="logs">Debugging with Logs</h2>
 
-<p>EFL provides a tool (<span style="font-family: Courier New,Courier,monospace;">EINA_LOG</span>) for logging information. It has the following levels:</p>
+<p>EFL provides a tool (<code>EINA_LOG</code>) for logging information. It has the following levels:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_CRITICAL = 0</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_ERR = 1</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_WARN = 2</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_INFO = 3</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_DBG = 4</span></li>
+<li><code>EINA_LOG_LEVEL_CRITICAL = 0</code></li>
+<li><code>EINA_LOG_LEVEL_ERR = 1</code></li>
+<li><code>EINA_LOG_LEVEL_WARN = 2</code></li>
+<li><code>EINA_LOG_LEVEL_INFO = 3</code></li>
+<li><code>EINA_LOG_LEVEL_DBG = 4</code></li>
 </ul>
 
 <p>Execute the application using one of the following commands:</p>
@@ -135,12 +133,12 @@ EINA_LOG_LEVEL=1 ./sample
 export EINA_LOG_LEVEL=1
 </pre>
 
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVELS=elementary:1,evas:4</span> parameters to see the logs domain by domain, and change the log level using <span style="font-family: Courier New,Courier,monospace;">EINA_LOG_ABORT_LEVEL</span>.</p>
-<p>To terminate the application when <span style="font-family: Courier New,Courier,monospace;">EINA_LOG</span> is shown, use <span style="font-family: Courier New,Courier,monospace;">EINA_LOG_ABORT=1</span>.</p>
+<p>Use the <code>EINA_LOG_LEVELS=elementary:1,evas:4</code> parameters to see the logs domain by domain, and change the log level using <code>EINA_LOG_ABORT_LEVEL</code>.</p>
+<p>To terminate the application when <code>EINA_LOG</code> is shown, use <code>EINA_LOG_ABORT=1</code>.</p>
 
 <h3>Already Deleted Parameter Log</h3>
-<p>The following log is shown when the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function is used and the pointer address is deleted again.</p>
-<p>When you use <span style="font-family: Courier New,Courier,monospace;">ecore_timer</span>, <span style="font-family: Courier New,Courier,monospace;">ecore_animator</span>, and <span style="font-family: Courier New,Courier,monospace;">ecore_idler</span>, you can often see this log.</p>
+<p>The following log is shown when the <code>ecore_idler_del()</code> function is used and the pointer address is deleted again.</p>
+<p>When you use <code>ecore_timer</code>, <code>ecore_animator</code>, and <code>ecore_idler</code>, you can often see this log.</p>
 
 <pre class="prettyprint">
 ERR&lt;4268&gt;:ecore ecore.c:558 _ecore_magic_fail()
@@ -154,13 +152,13 @@ ERR&lt;4268&gt;:ecore ecore.c:571 _ecore_magic_fail() *** NAUGHTY PROGRAMMER!!!
 
 <p>To fix the problem:</p>
 
-<ol><li><p>Make a new <span style="font-family: Courier New,Courier,monospace;">ecore_idler</span> and save the pointer address to <span style="font-family: Courier New,Courier,monospace;">myidler</span>:</p>
+<ol><li><p>Make a new <code>ecore_idler</code> and save the pointer address to <code>myidler</code>:</p>
 
 <pre class="prettyprint">
 Ecore_Idler *myidler = ecore_idler_add(_idler_cb, data);
 </pre></li>
 
-<li><p>Define the idler callback. When it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the <span style="font-family: Courier New,Courier,monospace;">ecore_idler</span> is deleted. The pointer address in <span style="font-family: Courier New,Courier,monospace;">myidler</span> is not deleted. So you add <span style="font-family: Courier New,Courier,monospace;">myidler = NULL</span>:</p>
+<li><p>Define the idler callback. When it returns <code>ECORE_CALLBACK_CANCEL</code>, the <code>ecore_idler</code> is deleted. The pointer address in <code>myidler</code> is not deleted. So you add <code>myidler = NULL</code>:</p>
 <pre class="prettyprint">
 static Eina_Bool
 _idler_cb(void *data)
@@ -170,7 +168,7 @@ _idler_cb(void *data)
 &nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
 }
 </pre>
-<p>Similarly, if you use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function, add <span style="font-family: Courier New,Courier,monospace;">myidler = NULL</span>:</p>
+<p>Similarly, if you use the <code>ecore_idler_del()</code> function, add <code>myidler = NULL</code>:</p>
 <pre class="prettyprint">
 if (myidler) {
 &nbsp;&nbsp;&nbsp;&nbsp;ecore_idler_del(myidler);
@@ -179,7 +177,7 @@ if (myidler) {
 </pre></li></ol>
 
 <h3>Parameter Logs</h3>
-<p>The following log is shown when the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> parameter is of the wrong type:</p>
+<p>The following log is shown when the <code>ecore_idler_del()</code> parameter is of the wrong type:</p>
 <pre class="prettyprint">
 ERR&lt;4266&gt;:ecore ecore.c:558 _ecore_magic_fail()
 *** ECORE ERROR: Ecore Magic Check Failed!!!
@@ -195,12 +193,12 @@ ERR&lt;4266&gt;:ecore ecore.c:571 _ecore_magic_fail() *** NAUGHTY PROGRAMMER!!!
 
 <h3>Part Name Logs</h3>
 
-<p>The <span style="font-family: Courier New,Courier,monospace;">elm_object_part_content_set()</span> function is often used as follows:</p>
+<p>The <code>elm_object_part_content_set()</code> function is often used as follows:</p>
 <pre class="prettyprint">
 btn = elm_button_add(win)
 elm_object_part_content_set(btn, &quot;hahaha&quot;, tmp);
 </pre>
-<p>The following log is shown when the <span style="font-family: Courier New,Courier,monospace;">hahaha</span> swallow part does not exist:</p>
+<p>The following log is shown when the <code>hahaha</code> swallow part does not exist:</p>
 <pre class="prettyprint">
 ERR&lt;6919&gt;:elementary elm_layout.c:969 _elm_layout_elm_container_content_set() could not swallow 0x80000005a000002e into part 'hahaha'
 </pre>
@@ -328,7 +326,7 @@ collections
 }
 </pre>
 
-<p>Part1 is calculated by part2 and part1 is of the minimum size, (100, 100). But the size of part2 is no bigger than 50. So Edje has no idea how to calculate part1. Use <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1;</span> on part1 for the correct calculation to fix the problem:</p>
+<p>Part1 is calculated by part2 and part1 is of the minimum size, (100, 100). But the size of part2 is no bigger than 50. So Edje has no idea how to calculate part1. Use <code>fixed: 1 1;</code> on part1 for the correct calculation to fix the problem:</p>
 
 <pre class="prettyprint">
 ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_calc() file, group fixed has a non-fixed part 'part1'. Adding 'fixed: 1 1;' to source EDC may help. Continuing discarding faulty part.
@@ -369,7 +367,7 @@ ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_
    <li>In the <strong>Variables</strong>, <strong>Outline</strong>, or <a href="#expressions">Expressions</a> view, right-click a variable, and select <strong>Add Watchpoint (C/C++)</strong>.</li>
    <li>Define the details and click <strong>OK</strong>.</li>
   </ol>
-  <p class="figure">Figure: Watch point details</p>
+  <p align="center"><strong>Figure: Watch point details</strong></p>
   <p align="center"><img alt="Watch point details" src="../../images/watchpoint_setting.png" /></p>
   <p>The added watch points are displayed in the <strong>Breakpoints</strong> view.</p>
   <p>To execute watch points, set the read/write access of the expression you want to watch. When running the application, the program breaks when the address of the expression is valid.</p>
@@ -389,20 +387,20 @@ ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_
      <li>Drag and drop it into the <strong>Expressions</strong> view.</li> 
     </ol></li> 
   </ul> 
-  <p class="figure">Figure: Expressions view</p> 
+  <p align="center"><strong>Figure: Expressions view</strong></p> 
  <p align="center"><img alt="Expressions view" src="../../images/expressions.png" /></p> 
   
   <h2 name="emulator" id="emulator">Debugging Applications on the Emulator</h2> 
-  <p>You can debug Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
-  <p>To debug your application on the Emulator:</p> 
+  <p>You can debug Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
+  <p>To debug your application on the emulator:</p> 
   <ol> 
-   <li>Start the Emulator in the <strong>Connections</strong> view.</li> 
+   <li>Start the emulator in the <strong>Connections</strong> view.</li> 
    <li><p>Start the debugging by doing one of the following:</p> 
     <ul> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen native Application</strong>.</li> 
-     <li>In the Tizen Studio menu, go to <strong>Debug &gt; Debug As &gt; Tizen native Application</strong>.</li> 
+     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application</strong>.</li> 
+     <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug As &gt; Tizen Native Application</strong>.</li> 
      <li>On the Tizen Studio toolbar, click <strong>Debug</strong>.</li> 
-    </ul> <p>If the application binary does not exist, it is built automatically for the Emulator.</p> <p>If many active Emulator instances are connected, select the Emulator to run the application from the dialog box.</p></li> 
+    </ul> <p>If the application binary does not exist, it is built automatically for the emulator.</p> <p>If many active emulator instances are connected, select the emulator to run the application from the dialog box.</p></li> 
    <li><p>The debug messages are displayed in the Tizen Studio <strong>Console</strong> view. To see the GDB console, in the <strong>Console</strong> view, click the <strong>Display Selected Console</strong> button and select the option containing <strong>gdb</strong>. With the GDB console, you can also execute GDB commands.</p> <p>To display verbose GDB output in the GDB console:</p> 
     <ul>
      <li>Right-click the <strong>Project Explorer</strong> view and select <strong>Debug As &gt; Debug Configurations</strong>.</li>
@@ -410,17 +408,17 @@ ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_
     <li>Click <strong>Debug</strong>.</li>
     </ul> </li>
 
-   <li><p>Use the application in the Emulator as you would in a target device.</p> 
+   <li><p>Use the application in the emulator as you would in a target device.</p> 
        <p>While the application is running, the Tizen Studio <a href="../../../../org.tizen.studio/html/common_tools/log_view.htm">Log view</a> shows the log, debug, and exception messages from the methods defined in the log macros.</p> </li>
        
    <li><p>To stop debugging, do one of the following:</p> 
     <ul> 
-     <li>In the Tizen Studio, in the <strong>Console</strong> or <strong>Debug</strong> view, click the <strong>Terminate</strong> button. If the application execution is not suspended before you click the <strong>Terminate</strong> button, touch an arbitrary control on the screen or press a hard key on the Emulator after clicking <strong>Terminate</strong>.</li> 
-     <li>On the Emulator, press the <strong>End</strong> key.</li> 
+     <li>In the Tizen Studio, in the <strong>Console</strong> or <strong>Debug</strong> view, click the <strong>Terminate</strong> button. If the application execution is not suspended before you click the <strong>Terminate</strong> button, touch an arbitrary control on the screen or press a hard key on the emulator after clicking <strong>Terminate</strong>.</li> 
+     <li>On the emulator, press the <strong>End</strong> key.</li> 
     </ul></li> 
   </ol> 
   <p>After debugging, run your application again to check its functionality and to ensure that the bugs detected during the debugging process are fixed. </p> 
-  <p>In the Emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the 
+  <p>In the emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the 
        <a href="../../../../org.tizen.studio/html/common_tools/emulator_control_panel.htm">Emulator Control Panel</a> to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p> 
   
   
index b7f0da3..33b897b 100644 (file)
@@ -43,7 +43,7 @@
 
 <p>The application performance optimization features include measuring and improving application performance.</p>
 <p>If an application performs poorly and gives delayed responses to user actions, the user experience can suffer. To avoid this situation, some parts of the code must be optimized.</p>
-<p>Most processors that are used today in mobile phones are based on multi-core technologies and so you must consider utilizing this hardware feature. To effectively utilize multi-core capabilities, you need to divide your code to run on several cores simultaneously. Traditionally, this is done by using <span style="font-family: Courier New,Courier,monospace">pthreads</span>, but this method has an overhead of initialization and termination of threads, and can generate potential runtime errors. Several solutions exist to exploit multi-core capabilities easily. These solutions abstract <span style="font-family: Courier New,Courier,monospace">pthreads</span>, allowing you to focus on the application development without worrying about thread level management.</p>
+<p>Most processors that are used today in mobile phones are based on multi-core technologies and so you must consider utilizing this hardware feature. To effectively utilize multi-core capabilities, you need to divide your code to run on several cores simultaneously. Traditionally, this is done by using <code>pthreads</code>, but this method has an overhead of initialization and termination of threads, and can generate potential runtime errors. Several solutions exist to exploit multi-core capabilities easily. These solutions abstract <code>pthreads</code>, allowing you to focus on the application development without worrying about thread level management.</p>
 <p>To improve the performance of an application:</p>
 
 <ol> 
@@ -72,7 +72,7 @@
 
 <ul> 
    <li>Select the most appropriate algorithm and data structures.</li>
-   <li>High-level optimization is important, because it can change the order of complexity. If your code includes <span style="font-family: Courier New,Courier,monospace">sort</span>, <span style="font-family: Courier New,Courier,monospace">search</span>, or <span style="font-family: Courier New,Courier,monospace">compare</span>, use optimal algorithms and data structures.</li>
+   <li>High-level optimization is important, because it can change the order of complexity. If your code includes <code>sort</code>, <code>search</code>, or <code>compare</code>, use optimal algorithms and data structures.</li>
    <li>Split a task, which contains both high and low priority jobs, to prevent low priority jobs delaying high priority jobs. Running high and low priority jobs in a single task causes delays.</li>
    <li>Do not run heavy calculations in the same thread as your UI.</li>
    <li>Use optimization options provided by toolchains.</li>
                <li>Select the <strong>View &gt; Report &gt; Function Profiling</strong> in the menu to show the Function Profiling table displaying the methods consuming the most time. Click the title of a column to view the sorted results.</li>
                <li>To view the execution time of the methods called within a specific time period, use the <a href="../../../../org.tizen.studio/html/common_tools/da_advanced.htm#range">range inspection feature</a> of the Dynamic Analyzer.</li>
                </ul>
-       <p class="figure">Figure: Function Profiling table</p>
+       <p align="center"><strong>Figure: Function Profiling table</strong></p>
        <p align="center"><img alt="Function Profiling table" src="../../images/optimizingappper_funprof.png" /></p>
    </li>
    <li>Timeline CPU chart
    <p>When analyzing application performance, the CPU load is one of the most significant factors. A CPU load peak can result in a performance bottleneck. High CPU load leads to increased memory consumption, which shortens the battery life of the device running the application. To avoid this, you need to optimize your code.</p>
-   
    <p>To detect and fix CPU load peaks with the CPU load feature of the Dynamic Analyzer:</p>
                <ol>
                        <li>Select the <strong>Timeline</strong> tab and view the CPU chart.</li>
                        <li>Right-click the highlighted method and select <strong>View Declaration Source</strong>. The source code is displayed as a tooltip. To investigate the method, double-click it, and the source code is displayed in the Tizen Studio.</li>
                        <li>Modify the code in the Tizen Studio, re-build, and re-analyze the application to see if the bottleneck has been eliminated.</li>
                </ol>
-       <p class="figure">Figure: Timeline CPU chart and Call Trace table</p>
+       <p align="center"><strong>Figure: Timeline CPU chart and Call Trace table</strong></p>
        <p align="center"><img alt="Timeline CPU chart and Call Trace table" src="../../images/optimizingappper_timeline_cpu.png" /></p>
    </li>
    <li>Thread load
    <p>If you use threads in your application code, you need to analyze the load of each thread during the application execution. The thread load feature helps to distribute the thread load. You can modify the code to optimize the thread load, while maintaining a single thread.</p>
    <p>The thread load is displayed in the <strong>Thread</strong> tab. The thread line displayed in blue indicates the thread load within a time frame. The darker the color, the higher the load.</p>
    
-       <p class="figure">Figure: Thread load</p>
+       <p align="center"><strong>Figure: Thread load</strong></p>
        <p align="center"><img alt="Thread load" src="../../images/optimizingappper_threadload.png" /></p>
    </li>
 </ul>
      <li>Heap memory profiling <p>This option uses the <strong>Massif</strong> tool to profile your application. 
        </p></li> 
     </ul></li> 
-   <li><p>On the <strong>General setting</strong> tab, set the general Valgrind options. These options are used for both <strong>Memcheck</strong> and <strong>Massif</strong> profiling.</p> <p class="figure">Figure: Memory error and memory leak data options</p> 
+   <li><p>On the <strong>General setting</strong> tab, set the general Valgrind options. These options are used for both <strong>Memcheck</strong> and <strong>Massif</strong> profiling.</p>
+   <p align="center"><strong>Figure: Memory error and memory leak data options</strong></p> 
 <p align="center"><img alt="Memory error and memory leak data options" src="../../images/optimizingapp_valgrind.png"/></p> 
-    <table style="width: 100%" border="1"> 
-     <caption>
-       Table: General setting options 
-     </caption> 
+      <p align="center" class="Table"><strong>Table: General setting options</strong></p> 
+        <table style="width: 100%" border="1"> 
      <tbody> 
       <tr> 
        <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
        <td>When enabled, Valgrind traces into sub-processes initiated through the exec system call. This is necessary for multi-project applications. Valgrind does trace into the child of a fork (it would be difficult not to, since fork makes an identical copy of a process), so this option is arguably badly named. However, most children of fork calls immediately call exec anyway.</td> 
       </tr> 
       <tr> 
-       <td><strong>run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> on exit</strong></td> 
+       <td><strong>run <code>__libc_freeres()</code> on exit</strong></td> 
        <td>This option is only relevant when running Valgrind on Linux.
-          <p>The GNU C library (<span style="font-family: Courier New,Courier,monospace;">libc.so</span>), which is used by all applications, can allocate memory for its own uses. Usually it does not free that memory when the application ends, since the Linux kernel reclaims all process resources when a process exits anyway. The glibc authors realized that this behavior causes leak checkers, such as Valgrind, to falsely report leaks in glibc, when a leak check is done at exit. In order to avoid this, they provided a routine called <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> specifically to make glibc release all memory it has allocated. <strong>Memcheck</strong> therefore tries to run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> at exit. Unfortunately, in some very old versions of glibc, <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> is sufficiently buggy to cause segmentation faults. This was particularly noticeable on Red Hat 7.1. So this option is provided in order to inhibit the run of <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span>. If your application seems to run fine on Valgrind, but segfaults at exit, disabling this option can fix the problem, although at the cost of possibly falsely reporting space leaks in <span style="font-family: Courier New,Courier,monospace;">libc.so</span>. </p></td> 
+          <p>The GNU C library (<code>libc.so</code>), which is used by all applications, can allocate memory for its own uses. Usually it does not free that memory when the application ends, since the Linux kernel reclaims all process resources when a process exits anyway. The glibc authors realized that this behavior causes leak checkers, such as Valgrind, to falsely report leaks in glibc, when a leak check is done at exit. In order to avoid this, they provided a routine called <code>__libc_freeres()</code> specifically to make glibc release all memory it has allocated. <strong>Memcheck</strong> therefore tries to run <code>__libc_freeres()</code> at exit. Unfortunately, in some very old versions of glibc, <code>__libc_freeres()</code> is sufficiently buggy to cause segmentation faults. This was particularly noticeable on Red Hat 7.1. So this option is provided in order to inhibit the run of <code>__libc_freeres()</code>. If your application seems to run fine on Valgrind, but segfaults at exit, disabling this option can fix the problem, although at the cost of possibly falsely reporting space leaks in <code>libc.so</code>. </p></td> 
       </tr> 
       <tr> 
        <td><strong>demangle C++ names</strong></td> 
       </tr> 
       <tr> 
        <td><strong>show errors below main</strong></td> 
-       <td>By default, stack traces for errors do not show any methods that appear beneath <span style="font-family: Courier New,Courier,monospace;">main()</span>. Alternatively, if <span style="font-family: Courier New,Courier,monospace;">main()</span> is not present in the stack trace, it does not show any methods below <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods, such as glibc&#39;s <span style="font-family: Courier New,Courier,monospace;">__libc_start_main()</span>. Furthermore, if <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are present in the trace, they are normalized (below <span style="font-family: Courier New,Courier,monospace;">main()</span>), in order to make the output more deterministic. If this option is enabled, all stack trace entries are shown and <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are not normalized.</td> 
+       <td>By default, stack traces for errors do not show any methods that appear beneath <code>main()</code>. Alternatively, if <code>main()</code> is not present in the stack trace, it does not show any methods below <code>main()</code>-like methods, such as glibc&#39;s <code>__libc_start_main()</code>. Furthermore, if <code>main()</code>-like methods are present in the trace, they are normalized (below <code>main()</code>), in order to make the output more deterministic. If this option is enabled, all stack trace entries are shown and <code>main()</code>-like methods are not normalized.</td> 
       </tr> 
       <tr> 
        <td><strong>max size of stack frame</strong></td> 
     </table></li> 
    <li>On the <strong>Tool Advanced setting</strong> tab, set the advanced options.
    <p>The tab content depends on the selection you have made on the <strong>Collect data</strong> tab.</p> 
-    <table style="width: 100%" border="1"> 
-     <caption>
-       Table: Tool Advanced setting options for memory error and memory leak profiling 
-     </caption> 
+    <p align="center" class="Table"><strong>Table: Tool Advanced setting options for memory error and memory leak profiling</strong></p>
+        <table style="width: 100%" border="1">
      <tbody> 
       <tr> 
        <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
       </tr> 
      </tbody> 
     </table> 
-    <table style="width: 100%" border="1"> 
-     <caption>
-       Table: Tool Advanced setting options for heap memory profiling 
-     </caption> 
+     <p align="center" class="Table"><strong>Table: Tool Advanced setting options for heap memory profiling</strong></p>
+     <table style="width: 100%" border="1"> 
      <tbody> 
       <tr> 
        <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
     </ul> </li> 
    <li><strong>Stack (B)</strong>: Size of the stacks. By default, stack profiling is disabled as it slows profiling. It is enabled using the <strong>profile stack</strong> option.</li> 
   </ul> 
-<p class="figure">Figure: Heap memory profiling results</p> 
+<p align="center"><strong>Figure: Heap memory profiling results</strong></p> 
   <p align="center"><img alt="Heap memory profiling results" src="../../images/optimizingapp_heapmemory.png" /></p>
   
   <p>A snapshot with a green icon in front has a heap tree with a callstack. Double-click the entry to see the callstack details.</p> 
index 85aaa38..22ce19f 100644 (file)
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
 <h1>Running Applications</h1> 
-  <p>You can run Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
-  <p>To run your application on the Emulator:</p> 
+  <p>You can run Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
+  <p>To run your application on the emulator:</p> 
   <ol> 
         <li><p>Before you run the application, you must sign your application package by generating an author certificate and registering it in the Tizen Studio.</p>
         <p>If you have already registered your certificate in the Tizen Studio, the signature is generated automatically while running your application.</p></li>
-  <li>Start the Emulator in the <strong>Connections</strong> view.</li> 
+  <li>Start the emulator in the <strong>Connections</strong> view.</li> 
    <li><p>Start the run by doing one of the following:</p> 
     <ul> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen native Application</strong>.</li> 
-     <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen native Application</strong>.</li> 
+     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.</li> 
+     <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Native Application</strong>.</li> 
      <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li> 
-    </ul> <p>If the application binary does not exist, it is built automatically for the Emulator.</p> 
-       <p>If many active Emulator instances are connected, select the Emulator to run the application from the dialog box.</p></li> 
-   <li><p>Use the application in the Emulator as you would in a target device.</p> 
+    </ul> <p>If the application binary does not exist, it is built automatically for the emulator.</p> 
+       <p>If many active emulator instances are connected, select the emulator to run the application from the dialog box.</p></li> 
+   <li><p>Use the application in the emulator as you would in a target device.</p> 
        <p>While the application is running, the Tizen Studio <strong>Log</strong> view shows the log, debug, and exception messages from the methods defined in the log macros.</p></li> 
-   <li><p>To terminate the run, exit the application on the Emulator.</p></li> 
+   <li><p>To terminate the run, exit the application on the emulator.</p></li> 
   </ol> 
-  <p>In the Emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the Event Injector view to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p> 
+  <p>In the emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the Event Injector view to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p> 
 
   <h2 name="rapid" id="rapid">Rapid Development Support</h2> 
   <p>Rapid Development Support (RDS) lets you develop a Tizen application rapidly by saving deployment time.</p> 
   <ol> 
    <li>Search for the delta files (changed, added, and deleted files).</li> 
    <li>Transfer the delta files to the target.</li> 
-   <li>If the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file has been modified, execute directory installation.</li> 
+   <li>If the <code>tizen-manifest.xml</code> file has been modified, execute directory installation.</li> 
   </ol> 
   <p>The RDS option is enabled as default. To disable it, in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Currently, this option is not supported in multi-app projects.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
+    <div class="note">
+        <strong>Note</strong>
+        Currently, this option is not supported in multi-app projects.
+    </div>
   
   
     
index d727c96..163bb3d 100644 (file)
   
   <ul>
   <li>To set the <a href="#api">application project properties for API and privilege checks</a>, right-click the project in the Tizen Studio <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>OK</strong>.</li> 
-<li>To define the <a href="#manifest">application manifest settings</a>, edit the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.
+<li>To define the <a href="#manifest">application manifest settings</a>, edit the <code>tizen-manifest.xml</code> file.
 
-  <table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-    </tr>
-<tr>
-<td class="note">Only modify the manifest file by using the manifest editor in the Tizen Studio. If you create or edit the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file using any other text editor, your application may not work as expected.</td> 
-    </tr>
-</tbody></table>
+    <div class="note">
+        <strong>Note</strong>
+        Only modify the manifest file by using the manifest editor in the Tizen Studio. If you create or edit the <code>tizen-manifest.xml</code> file using any other text editor, your application may not work as expected.
+    </div>
 </li></ul>
   
 <p>After you have finished setting the project properties, you are ready to <a href="app_dev_process_n.htm#designing">design the UI and implement the application code</a>.</p>
    <li>During code editing, select the <strong>Run API and privilege checks while editing</strong> option.</li> 
   </ul>
 <p>You can also perform the usage checks manually after building the application, by right-clicking the project in the <strong>Project Explorer</strong> view and selecting  <strong>Check API and Privilege Violations With Build</strong>. The results are displayed in the <strong>Problems</strong> view.</p>
-  <table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-    </tr>
-<tr>
-<td class="note">If the application has conflicting API versions, the build fails and the results are displayed in the <strong>Problems</strong> view.</td> 
-    </tr>
-</tbody></table>
+
+
+    <div class="note">
+        <strong>Note</strong>
+        If the application has conflicting API versions, the build fails and the results are displayed in the <strong>Problems</strong> view.
+    </div>
 
 <h2 id="manifest" name="manifest">Setting the Application Manifest</h2> 
 
-       <p>The application manifest consists of application information, such as package, version, features, and privileges, which are available for the application. To configure the application information in the manifest editor, double-click the application <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view.</p>
-       <p class="figure">Figure: Setting the application manifest</p>
+       <p>The application manifest consists of application information, such as package, version, features, and privileges, which are available for the application. To configure the application information in the manifest editor, double-click the application <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view.</p>
+       <p align="center"><strong>Figure: Setting the application manifest</strong></p>
        <p align="center"><img alt="Setting the application manifest" src="../../images/tizen_project_explorer.png"/></p>
        <p>You can <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#editing">edit the application properties using the form tabs of the manifest editor</a>.</p>
 
        <li>View the application executable file path.</li>
        <li>Add an application icon. <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel. If your application supports both HD and WVGA, it is best to provide an icon for HD for better image quality in both cases.</p> 
        <p>The following table describes the available icons.</p>
+       
+<p align="center" class="Table"><strong>Table: Application icons</strong></p> 
     <table border="1">
-<caption>
-       Table: Application icons 
-     </caption> 
      <colgroup>
 <col width="10%"/>
 <col width="5%"/>
        <ul>
 <li>In the <strong>Name</strong> panel, click <strong>+</strong>. Select the language, define the application name for that language, and click <strong>OK</strong>.
 
-<p>The following example shows the setting in the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file code:</p>
+<p>The following example shows the setting in the <code>tizen-manifest.xml</code> file code:</p>
 <pre class="prettyprint">
 &lt;label xml:lang=&quot;en-us&quot;&gt;This is a sample&lt;/label&gt;
 </pre>
 </li>
        <li>In the <strong>Description</strong> panel, click <strong>+</strong>. Select the language, define the application description text for that language, and click <strong>OK</strong>.
-<p>The following example shows the setting in the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file code:</p>
+<p>The following example shows the setting in the <code>tizen-manifest.xml</code> file code:</p>
 <pre class="prettyprint">
 &lt;description xml:lang=&quot;en-us&quot;&gt;This is a sample&lt;/description&gt;
 </pre>
   <li>Add accounts (in mobile applications only).
    <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p>
    <p>To register an account provider, click <strong>+</strong> in the <strong>Account</strong> section and define the account provider information, as described in the following table.</p>
+<p align="center" class="Table"><strong>Table: Account provider properties</strong></p> 
    <table border="1">
-<caption>
-     Table: Account provider properties 
-   </caption> 
    <tbody>
 <tr>
 <th colspan="2">Account property</th> 
 <tr>
 <td colspan="2">Multiple account</td> 
      <td>
-<span style="font-family: Courier New,Courier,monospace">bool</span> </td> 
+<code>bool</code> </td> 
      <td>
 <p>Indicates whether multiple accounts are supported.</p>
 <p>This is a mandatory property.</p>
 <tr>
 <td colspan="2">Provider ID</td> 
      <td>
-<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+<code>String</code> </td> 
      <td>
 <p>ID of the account provider.</p>
 </td> 
 <tr>
 <td colspan="2">Default label</td> 
      <td>
-<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+<code>String</code> </td> 
      <td>
 <p>Display name of the account provider.</p>
 <p>This is a mandatory property.</p>
 <td rowspan="2">Icons</td>
 <td>Icon</td> 
      <td>
-<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+<code>String</code> </td> 
      <td>
 <p>File path of the account provider icon.</p> <p>The icon size is:</p>
         <ul>
 <tr>
 <td>Icon small</td> 
      <td>
-<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+<code>String</code> </td> 
      <td>
 <p>File path of the account provider icon.</p> <p>The icon size is:</p>
         <ul>
 <tr>
 <td colspan="2">Name</td> 
      <td>
-<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+<code>String</code> </td> 
      <td>
 <p>Localization support for the display name.</p>
 <p>To add a localized name, click <strong>+</strong> in the <strong>Name</strong> panel, select the language, define the display name for that language, and click <strong>OK</strong>.</p>
     </tr>
 <tr>   
 <td colspan="2">Capabilities</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+     <td><code>String</code></td> 
      <td> <p>Capability of the account provider.</p>
-<p>Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace">http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</span> IRI format.</p> <p>The following predefined capabilities can be used in Tizen:</p> 
+<p>Capabilities are defined in the <code>http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</code> IRI format.</p> <p>The following predefined capabilities can be used in Tizen:</p> 
       <ul>
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> <p>Used when the account is related to a calendar.</p>
+               <code>http://tizen.org/account/capability/calendar</code> <p>Used when the account is related to a calendar.</p>
                </li> 
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> <p>Used when the account is related to contacts.</p>
+               <code>http://tizen.org/account/capability/contact</code> <p>Used when the account is related to contacts.</p>
                </li> 
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/document</span> <p>Used when the account is related to a document.</p>
+               <code>http://tizen.org/account/capability/document</code> <p>Used when the account is related to a document.</p>
                </li>
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/email</span> <p>Used when the account is related to email.</p>
+               <code>http://tizen.org/account/capability/email</code> <p>Used when the account is related to email.</p>
                </li>  
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/game</span> <p>Used when the account is related to a game.</p>
+               <code>http://tizen.org/account/capability/game</code> <p>Used when the account is related to a game.</p>
                </li>  
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/message</span> <p>Used when the account is related to a message.</p>
+               <code>http://tizen.org/account/capability/message</code> <p>Used when the account is related to a message.</p>
                </li>  
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/music</span> <p>Used when the account is related to music.</p>
+               <code>http://tizen.org/account/capability/music</code> <p>Used when the account is related to music.</p>
                </li>  
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/photo</span> <p>Used when the account is related to a photo.</p>
+               <code>http://tizen.org/account/capability/photo</code> <p>Used when the account is related to a photo.</p>
                </li>  
                <li>
-               <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/video</span> <p>Used when the account is related to a video.</p>
+               <code>http://tizen.org/account/capability/video</code> <p>Used when the account is related to a video.</p>
                </li>    
 
       </ul>
 
 <h3 id="source" name="source">Editing the tizen-manifest.xml File in the Source Tab</h3>
 
-       <p>The <strong>Source</strong> tab of the manifest editor shows the code of the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file. You can <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm">edit the basic syntax of the XML document</a> and also see how changes made on the other tabs are reflected in the raw XML source content.</p>
-       <table class="note">
-               <tbody>
-                       <tr>
-                               <th class="note">Note</th>
-                       </tr>
-                       <tr>
-                               <td class="note">If you edit application information manually in the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file source code, you can introduce errors preventing the application from running normally.
-                               </td>
-                       </tr>
-               </tbody>
-       </table>
+       <p>The <strong>Source</strong> tab of the manifest editor shows the code of the <code>tizen-manifest.xml</code> file. You can <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm">edit the basic syntax of the XML document</a> and also see how changes made on the other tabs are reflected in the raw XML source content.</p>
+
+       
+           <div class="note">
+        <strong>Note</strong>
+        If you edit application information manually in the <code>tizen-manifest.xml</code> file source code, you can introduce errors preventing the application from running normally.
+    </div>
 
 
 
index 15231bd..47057b1 100644 (file)
@@ -45,7 +45,7 @@
 
 <p>A wearable native application is created using the C language, and can be run on Tizen wearable devices. The application uses the native API, which provides various interfaces to the device hardware allowing you to take advantage of numerous capabilities tailored to run with limited device resources.</p>
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic wearable native application, which displays some text on the screen with no user interaction:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable native application, which displays some text on the screen with no user interaction:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
@@ -69,7 +69,7 @@
 
 <p>The following figure illustrates the application to be created. The application screen displays the <strong>Hello Tizen</strong> text and no user interaction is provided. If you click the <strong>Back</strong> key on the device, the application moves to the background.</p>
 
-<p class="figure">Figure: Wearable native Basic UI application</p>
+<p align="center"><strong>Figure: Wearable native Basic UI application</strong></p>
 <p align="center"><img alt="Wearable native Basic UI application" src="../../images/basic_app_running_wn.png" /></p>
 
 <p>To create the application project:</p>
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">inc</span>: Default folder for included source files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">res</span>: Folder for resource files used by the application only</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">shared</span>: Folder for resource files to be shared with other applications</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">src</span>: Folder for source code files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">lib</span>: Folder for external library files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>: Manifest file used by the platform to install and launch the application</p></li>
+<li><p><code>inc</code>: Default folder for included source files</p></li>
+<li><p><code>res</code>: Folder for resource files used by the application only</p></li>
+<li><p><code>shared</code>: Folder for resource files to be shared with other applications</p></li>
+<li><p><code>src</code>: Folder for source code files</p></li>
+<li><p><code>lib</code>: Folder for external library files</p></li>
+<li><p><code>tizen-manifest.xml</code>: Manifest file used by the platform to install and launch the application</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_wn.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+   <div class="note">
+        <strong>Note</strong>
+        You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.
+    </div>
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>tizen-manifest.xml</code> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
 </li>
 
 <li>
 <li><p><strong>Localization</strong>: Define localized values for the application label, description, and icon.</p></li>
 <li><p><strong>Advanced</strong>: Define advanced features, such as application metadata, data control for services, application control functionalities, and account details.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>tizen-manifest.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+   <div class="note">
+        <strong>Note</strong>
+        The <code>tizen-manifest.xml</code> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
 </li>
 </ul>
 </li>
 <p><strong>Manually</strong></p>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_wn.png" /></p>
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 <ul><li>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>.</li>
 </li>
 </ul>
 
-<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <span style="font-family: Courier New,Courier,monospace">Debug</span>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
+<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <code>Debug</code>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
 
 
 <p>After you have built the application, run it.</p>
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
 
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_wn.png" alt="Application running in the emulator" /></p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).</td>
-    </tr>
-   </tbody>
-  </table>
+  
+     <div class="note">
+        <strong>Note</strong>
+        If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).
+    </div>
 
 <p>While the application is running, the <strong>Log</strong> view in the Tizen Studio shows the log, debug, and exception messages from the methods defined in the log macros. To see the view, in the Tizen Studio menu, go to <strong>Window &gt; Show View &gt; Log</strong>.</p>
 </li>
 <li>Confirm that the application launches in the target device.</li>
 </ol>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+  
+     <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_n.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+        </ol>
+    </div>
   
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
 </li>
 
 <p>The following steps demonstrate how to create a simple user interface for a circular wearable device using EFL. The following figure shows the screen you can create with these instructions.</p>
  
-<p class="figure">Figure: Wearable native UI</p> 
+<p align="center"><strong>Figure: Wearable native UI</strong></p> 
 <p align="center"><img alt="Wearable native UI" src="../../images/emulator_running_wn.png" /></p> 
 
 <p>This guide consists of the following:</p>
@@ -419,26 +397,26 @@ typedef struct appdata appdata_s;
 </pre>
 
 <h3 id="register" name="register">Registering Life-cycle Callbacks</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function has callbacks that manage specific parts of the application life-cycle:</p>
+<p>The <code>main()</code> function has callbacks that manage specific parts of the application life-cycle:</p>
 
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">app_create</span
+<li><code>app_create</code
 <ul><li>Called when the application process starts.</li>
 <li>Used to create UI components.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_terminate</span
+<li><code>app_terminate</code
 <ul><li>Called while the application process is terminating.</li>
 <li>Called after the main loop quits.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_resume</span> (UI applications only)
+<li><code>app_resume</code> (UI applications only)
 <ul><li>Called when the application window is shown.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_pause</span> (UI applications only)
+<li><code>app_pause</code> (UI applications only)
 <ul><li>Called when the application window is totally hidden.</li>
 </ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_control</span
-<ul><li>Called after the <span style="font-family: Courier New,Courier,monospace">app_create</span> callback when the process starts or called when a launch request is received while the process is running.</li>
-<li>Can receive <span style="font-family: Courier New,Courier,monospace">app_control</span> data (parameters for launching the application).</li>
+<li><code>app_control</code
+<ul><li>Called after the <code>app_create</code> callback when the process starts or called when a launch request is received while the process is running.</li>
+<li>Can receive <code>app_control</code> data (parameters for launching the application).</li>
 <li>Used to implement parameter-specific actions of the application.</li>
 </ul></li></ul>
 
@@ -466,7 +444,7 @@ main(int argc, char *argv[])
 </pre>
 
 <h3 id="ui" name="ui">Creating UI Objects</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">app_create()</span> function is called when the process starts, and it calls the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+<p>The <code>app_create()</code> function is called when the process starts, and it calls the <code>create_base_gui()</code> function:</p>
 
 <pre class="prettyprint">
 static bool
@@ -486,7 +464,7 @@ app_create(void *data)
 }
 </pre>
 
-<p>In the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, you can create a simple user interface that consists of window, conformant, and label objects:</p>
+<p>In the <code>create_base_gui()</code> function, you can create a simple user interface that consists of window, conformant, and label objects:</p>
 
 <pre class="prettyprint">
 static void
@@ -527,7 +505,7 @@ create_base_gui(appdata_s *ad)
 
 <ul>
 <li>
-<p>Window objects can be created by using the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and adding callbacks on window objects. One of the callbacks handles the <span style="font-family: Courier New,Courier,monospace">delete,request</span> event when the window is to be closed, and the other handles the <span style="font-family: Courier New,Courier,monospace">EEXT_CALLBACK_BACK</span> event when the hardware back key is pressed.</p>
+<p>Window objects can be created by using the <code>elm_win_util_standard_add()</code> function and adding callbacks on window objects. One of the callbacks handles the <code>delete,request</code> event when the window is to be closed, and the other handles the <code>EEXT_CALLBACK_BACK</code> event when the hardware back key is pressed.</p>
 
 <pre class="prettyprint">
 /* Window */
@@ -544,9 +522,9 @@ eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
 </li>
 <li>
 <p>You can create a conformant object that is based on the window.</p> 
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_win_indicator_mode_set()</span> function decides whether the indicator is visible, and the <span style="font-family: Courier New,Courier,monospace">elm_win_indicator_opacity_set()</span> function sets the indicator opacity mode.</p>
-<p>You can set the conformant object as a resize object of the window by using the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function. It means that the conformant size and position are controlled by the window object directly.</p> 
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function makes the conformant object visible.</p>
+<p>The <code>elm_win_indicator_mode_set()</code> function decides whether the indicator is visible, and the <code>elm_win_indicator_opacity_set()</code> function sets the indicator opacity mode.</p>
+<p>You can set the conformant object as a resize object of the window by using the <code>elm_win_resize_object_add()</code> function. It means that the conformant size and position are controlled by the window object directly.</p> 
+<p>The <code>evas_object_show()</code> function makes the conformant object visible.</p>
 
 <pre class="prettyprint">
 /* Conformant */
@@ -559,8 +537,8 @@ evas_object_show(ad-&gt;conform);
 </pre>
 </li>
 <li>
-<p>You can add a label object for text by using the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function. It adds a new label to the parent (conformant object).</p>
-<p>You can also set the text to the label by using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+<p>You can add a label object for text by using the <code>elm_label_add()</code> function. It adds a new label to the parent (conformant object).</p>
+<p>You can also set the text to the label by using the <code>elm_object_text_set()</code> function.</p>
 
 <pre class="prettyprint">
 /* Label */
@@ -571,7 +549,7 @@ elm_object_content_set(ad-&gt;conform, ad-&gt;label);
 </pre>
 </li>
 <li>
-<p>When all the UI components are ready, make the window object visible by using the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function:</p>
+<p>When all the UI components are ready, make the window object visible by using the <code>evas_object_show()</code> function:</p>
 
 <pre class="prettyprint">
 /* Show the window after the base GUI is set up */
index 99e5116..3e071f5 100644 (file)
@@ -47,7 +47,7 @@
 
 <p>A wearable native watch application is created using the C language, and can be run on Tizen wearable devices to display a customized watch face to the user.</p>
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic wearable native watch application, which displays some text and the current time on the screen:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable native watch application, which displays some text and the current time on the screen:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
@@ -71,7 +71,7 @@
 
 <p>The following figure illustrates the application to be created. The application screen displays the <strong>Hello Watch</strong> text and the current time, which continues to be refreshed every second while the application runs.</p>
 
-<p class="figure">Figure: Wearable native Watch application</p>
+<p align="center"><strong>Figure: Wearable native Watch application</strong></p>
 <p align="center"><img alt="Wearable native Watch application" src="../../images/basic_app_running_wn_watch.png" /></p>
 
 <p>To create the application project:</p>
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">inc</span>: Default folder for included source files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">res</span>: Folder for resource files used by the application only</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">shared</span>: Folder for resource files to be shared with other applications</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">src</span>: Folder for source code files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">lib</span>: Folder for external library files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>: Manifest file used by the platform to install and launch the application</p></li>
+<li><p><code>inc</code>: Default folder for included source files</p></li>
+<li><p><code>res</code>: Folder for resource files used by the application only</p></li>
+<li><p><code>shared</code>: Folder for resource files to be shared with other applications</p></li>
+<li><p><code>src</code>: Folder for source code files</p></li>
+<li><p><code>lib</code>: Folder for external library files</p></li>
+<li><p><code>tizen-manifest.xml</code>: Manifest file used by the platform to install and launch the application</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_wn_watch.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+   <div class="note">
+        <strong>Note</strong>
+               You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.
+    </div>
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>tizen-manifest.xml</code> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
 </li>
 
 <li>
 <li><p><strong>Localization</strong>: Define localized values for the application label, description, and icon.</p></li>
 <li><p><strong>Advanced</strong>: Define advanced features, such as application metadata and some miscellaneous options.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>tizen-manifest.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+   <div class="note">
+        <strong>Note</strong>
+        The <code>tizen-manifest.xml</code> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
 </li>
 </ul>
 </li>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
 
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_wn_watch.png" /></p>
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 <ul><li>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>.</li>
 </li>
 </ul>
 
-<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <span style="font-family: Courier New,Courier,monospace">Debug</span>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
+<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <code>Debug</code>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
 
 
 <p>After you have built the application, run it.</p>
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
@@ -376,21 +365,15 @@ cd tizen-sdk/tools
 <p>Like with the <a href="#watchface">emulator</a>, you must change the watch face in the device settings before you can see the watch application UI on the device.</p></li>
 </ol>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+     <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_wn_watch.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table>  
+        </ol>
+    </div>
 
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
 </li>
@@ -407,13 +390,13 @@ cd tizen-sdk/tools
 <p>To initialize the watch application:</p>
 
 <ol>
-<li>To use the functions and data types of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;watch_app.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API, include the <code>&lt;watch_app.h&gt;</code> header file in your application:
 <pre class="prettyprint">
 #include &lt;watch_app.h&gt;
 </pre>
-<p>All header files that you need are already included in the <span style="font-family: Courier New,Courier,monospace">watchapplication.h</span> file, which is generated by the Tizen Studio when the template project is created.</p>
+<p>All header files that you need are already included in the <code>watchapplication.h</code> file, which is generated by the Tizen Studio when the template project is created.</p>
 </li>
-<li>Set the life-cycle callbacks in the <a href="../../../../org.tizen.native.wearable.apireference/structwatch__app__lifecycle__callback__s.html">watch_app_lifecycle_callback_s</a> structure, and pass the structure to the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API to start the watch application event loop:
+<li>Set the life-cycle callbacks in the <a href="../../../../org.tizen.native.wearable.apireference/structwatch__app__lifecycle__callback__s.html">watch_app_lifecycle_callback_s</a> structure, and pass the structure to the <code>watch_app_main()</code> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API to start the watch application event loop:
 <pre class="prettyprint">
 int
 main(int argc, char* argv[])
@@ -432,7 +415,7 @@ main(int argc, char* argv[])
 </pre>
 
 <ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">create</span> event is triggered before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures.
+<li>The <code>create</code> event is triggered before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures.
 <pre class="prettyprint">
 static bool
 app_create(int width, int height, void* data)
@@ -446,7 +429,7 @@ app_create(int width, int height, void* data)
 }
 </pre>
 </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">time_tick</span> event is triggered at least once per second. The watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time</span> time handle to draw a normal watch.
+<li>The <code>time_tick</code> event is triggered at least once per second. The watch applications can get the current time from the <code>watch_time</code> time handle to draw a normal watch.
 <pre class="prettyprint">
 static void
 app_time_tick(watch_time_h watch_time, void* data)
@@ -457,16 +440,10 @@ app_time_tick(watch_time_h watch_time, void* data)
 </pre>
 </li></ul>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">For more information on the application life-cycle callbacks, see <a href="../../../../org.tizen.guides/html/native/app_management/applications_n.htm">Applications</a>.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+     <div class="note">
+        <strong>Note</strong>
+        For more information on the application life-cycle callbacks, see <a href="../../../../org.tizen.guides/html/native/app_management/applications_n.htm">Applications</a>.
+    </div>
 </li>
 </ol>
 
@@ -475,7 +452,7 @@ app_time_tick(watch_time_h watch_time, void* data)
 <p>To draw the watch UI, you need the current time handle and the window object of the idle screen:</p>
 
 <ol>
-<li>Get the window object with the <span style="font-family: Courier New,Courier,monospace">watch_app_get_elm_win()</span> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API:
+<li>Get the window object with the <code>watch_app_get_elm_win()</code> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API:
 
 <pre class="prettyprint">
 struct appdata {
@@ -536,7 +513,7 @@ app_create(int width, int height, void *date)
 }
 </pre>
 </li>
-<li>You can get the current local time handle in the <span style="font-family: Courier New,Courier,monospace">time_tick</span> callback function and then draw the watch UI with the handle. For example, you can use the <span style="font-family: Courier New,Courier,monospace">watch_time_get_minute()</span> function of the Watch Application API to retrieve the current minute value.
+<li>You can get the current local time handle in the <code>time_tick</code> callback function and then draw the watch UI with the handle. For example, you can use the <code>watch_time_get_minute()</code> function of the Watch Application API to retrieve the current minute value.
 <pre class="prettyprint">
 static void
 update_watch(appdata_s *ad, watch_time_h watch_time, int ambient)
@@ -575,26 +552,19 @@ app_time_tick(watch_time_h watch_time, void* data)
 <h3 id="ambient" name="ambient">Using the Ambient Mode</h3>
 
 <p>In a low-powered wearable device, an ambient mode is available. In this mode, the watch application shows a limited UI and receives only the ambient tick event every minute to reduce power consumption.</p>
-<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient-support</span> attribute to <span style="font-family: Courier New,Courier,monospace">false</span> in the watch application manifest file to allow the platform to show a default ambient mode UI.</p>
-
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To use the ambient mode, the user must enable it in the device settings. In addition, in the Gear S2 device, the ambient mode activates only when you are wearing the watch on the wrist.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <code>ambient-support</code> attribute to <code>false</code> in the watch application manifest file to allow the platform to show a default ambient mode UI.</p>
+
+     <div class="note">
+        <strong>Note</strong>
+        To use the ambient mode, the user must enable it in the device settings. In addition, in the Gear S2 device, the ambient mode activates only when you are wearing the watch on the wrist.
+    </div>
   
 <p>To use the ambient mode:</p>
 
 <ol>
 <li>Define the ambient mode callbacks:
-<ul><li>The <span style="font-family: Courier New,Courier,monospace">ambient_changed</span> callback is called when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">ambient_tick</span> callback is called every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming tasks and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.</li>
+<ul><li>The <code>ambient_changed</code> callback is called when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.</li>
+<li>The <code>ambient_tick</code> callback is called every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming tasks and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.</li>
 </ul>
 <pre class="prettyprint">
 static void
index 817cb0d..75a0d4d 100644 (file)
 
 <p>A widget application is one of the Tizen application types. It can be shown by specific UI applications (such as the home screen and lock screen) that can contain widget applications.</p>
  
-<p class="figure">Figure: Widget application in a wearable device</p> 
+<p align="center"><strong>Figure: Widget application in a wearable device</strong></p> 
 <p align="center"><img alt="Widget application in a wearable device" src="../../images/widget_app_wearable.png" /></p>  
  
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic wearable native widget application, which displays some text on the screen with no user interaction:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable native widget application, which displays some text on the screen with no user interaction:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
 
 <p>The following example shows you how to create and configure a basic wearable native widget application project in the Tizen Studio. An application project contains all the files that make up an application.</p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">
-                <p>For user convenience, standalone widget application packages are not allowed in the Tizen market place.</p>
-                <p>Use a standalone widget application for testing purposes. If you want to publish the application in the Tizen market place, combine it with at least 1 UI application in the same package. For more information, see <a href="../process/app_dev_process_n.htm#develop">Developing Multiple Projects as a Combined Package</a>.</p>
-            </td>
-        </tr>
-    </tbody>
-</table>
+
+   <div class="note">
+        <strong>Note</strong>
+       For user convenience, standalone widget application packages are not allowed in the Tizen market place.
+       <p>Use a standalone widget application for testing purposes. If you want to publish the application in the Tizen market place, combine it with at least 1 UI application in the same package. For more information, see <a href="../process/app_dev_process_n.htm#develop">Developing Multiple Projects as a Combined Package</a>.</p>
+    </div>
 
 <p>The following figure illustrates the application to be created. The application screen displays the <strong>Hello widget</strong> text and no user interaction is provided.</p>
 
-<p class="figure">Figure: Wearable native Widget application</p>
+<p align="center"><strong>Figure: Wearable native Widget application</strong></p>
 <p align="center"><img alt="Wearable native Widget application" src="../../images/basic_app_running_wn_widget.png" /></p>
 
 <p>To create the application project:</p>
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">inc</span>: Default folder for included source files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">res</span>: Folder for resource files used by the application only</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">shared</span>: Folder for resource files to be shared with other applications</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">src</span>: Folder for source code files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">lib</span>: Folder for external library files</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>: Manifest file used by the platform to install and launch the application</p></li>
+<li><p><code>inc</code>: Default folder for included source files</p></li>
+<li><p><code>res</code>: Folder for resource files used by the application only</p></li>
+<li><p><code>shared</code>: Folder for resource files to be shared with other applications</p></li>
+<li><p><code>src</code>: Folder for source code files</p></li>
+<li><p><code>lib</code>: Folder for external library files</p></li>
+<li><p><code>tizen-manifest.xml</code>: Manifest file used by the platform to install and launch the application</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_wn_widget.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+   <div class="note">
+        <strong>Note</strong>
+        You can <a href="#configuration">view and modify the application configuration</a> in the manifest editor. In this example, no configuration changes are required.
+    </div>
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>tizen-manifest.xml</code> file of the application. The Tizen Studio opens the file in the manifest editor.</p>
 </li>
 
 <li>
 <li><p><strong>Localization</strong>: Define localized values for the application label, description, and icon.</p></li>
 <li><p><strong>Advanced</strong>: Define advanced features, such as application metadata, widget (preview image and supported size), and miscellaneous options.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>tizen-manifest.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+   <div class="note">
+        <strong>Note</strong>
+               The <code>tizen-manifest.xml</code> file must conform to both the XML file format and the Tizen native application specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
 </li>
 </ul>
 </li>
 <p><strong>Manually</strong></p>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_wn_widget.png" /></p>
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 <ul><li>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>.</li>
 </li>
 </ul>
 
-<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <span style="font-family: Courier New,Courier,monospace">Debug</span>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
+<p>You can have more than one build configuration. To see the current active configuration or change it, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Configurations &gt; Set Active</strong>. The default configuration is <code>Debug</code>. For more information, see <a href="../process/building_app_n.htm">Building Applications</a>.</p>
 
 
 <p>After you have built the application, run it.</p>
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_wn_widget.png" alt="Application running in the emulator" /></p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).</td>
-    </tr>
-   </tbody>
-  </table>
+  
+     <div class="note">
+        <strong>Note</strong>
+        If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).
+    </div>
 
 <p>The above screen is shown through the Viewer, to allow you to develop a lone widget application for testing purposes.</p>
 <p id="viewer">To see the widget running on the home screen, add the widget there:</p>
@@ -400,23 +377,17 @@ cd tizen-sdk/tools
 </li>
 <li>Confirm that the application launches in the target device.
 <p>Like with the <a href="#viewer">emulator</a>, you must add the widget to the home screen before you can see it.</p></li>
-</ol>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+</ol> 
+  
+     <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_wn_widget.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table>  
+        </ol>
+    </div>
 
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
 </li>
@@ -433,12 +404,12 @@ cd tizen-sdk/tools
 <p>To initialize the widget application:</p>
 
 <ol>
-<li>To use the functions and data types of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;widget_app.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API, include the <code>&lt;widget_app.h&gt;</code> header file in your application:
 <pre class="prettyprint">
 #include &lt;widget_app.h&gt;
 </pre>
 
-<p>All header files that you need are already included in the <span style="font-family: Courier New,Courier,monospace">MyWidget.h</span> file, which is generated by the Tizen Studio when the template project is created.</p></li>
+<p>All header files that you need are already included in the <code>MyWidget.h</code> file, which is generated by the Tizen Studio when the template project is created.</p></li>
 <li>Edit the widget application settings in the <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#widget_app">manifest</a> file.</li>
 </ol>
 
@@ -447,9 +418,9 @@ cd tizen-sdk/tools
 <p>To create the widget application:</p>
 
 <ol>
-<li>Start and initialize the application with the <span style="font-family: Courier New,Courier,monospace">main()</span> function.
+<li>Start and initialize the application with the <code>main()</code> function.
 
-<p>Set up the <span style="font-family: Courier New,Courier,monospace">widget_app_lifecycle_callback_s</span> structure variable for the widget application life-cycle callbacks, define the functions themselves (<span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> for <a href="#initial">initialization</a> and <span style="font-family: Courier New,Courier,monospace">widget_app_terminate()</span> for <a href="#term">termination</a>), and call the <span style="font-family: Courier New,Courier,monospace">widget_app_main()</span> function to start the application event loop:</p>
+<p>Set up the <code>widget_app_lifecycle_callback_s</code> structure variable for the widget application life-cycle callbacks, define the functions themselves (<code>widget_app_create()</code> for <a href="#initial">initialization</a> and <code>widget_app_terminate()</code> for <a href="#term">termination</a>), and call the <code>widget_app_main()</code> function to start the application event loop:</p>
 
 <pre class="prettyprint">
 int
@@ -468,7 +439,7 @@ main(int argc, char *argv[])
 &nbsp;&nbsp;&nbsp;&nbsp;return ret;
 }
 </pre></li>
-<li id="initial">Use the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> life-cycle function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts.
+<li id="initial">Use the <code>widget_app_create()</code> life-cycle function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts.
 
 <pre class="prettyprint">
 static widget_class_h
@@ -480,7 +451,7 @@ widget_app_create(void *user_data)
 </li>
 <li>Register the callback functions and make a class for widget instances.
 
-<p>At the end of the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> function, remember to create a widget instance class and return a handle for it, so that the handle can be used for making widget instances.</p>
+<p>At the end of the <code>widget_app_create()</code> function, remember to create a widget instance class and return a handle for it, so that the handle can be used for making widget instances.</p>
 
 <pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;&nbsp;return widget_app_class_create(ops, user_data);
@@ -499,7 +470,7 @@ widget_app_terminate(void *user_data)
 
 <h3 id="callback" name="callback">Managing Widget Instance Life-cycle Callbacks</h3>
 
-<p>The widget application provides a life-cycle and methods for making and managing a widget class. The application has one process, whose responsibility it is to make a class in the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> callback function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API. With this class, the framework can make instances whenever applications for widget viewers (such as home screen or lock screen) request for a widget instance.</p>
+<p>The widget application provides a life-cycle and methods for making and managing a widget class. The application has one process, whose responsibility it is to make a class in the <code>widget_app_create()</code> callback function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API. With this class, the framework can make instances whenever applications for widget viewers (such as home screen or lock screen) request for a widget instance.</p>
 <p>The widget instance has its own life-cycle, which is similar to the widget application. However, the widget instance is just an object that is shown by the applications for widget viewers. Many widget instances can be running on the same widget application process.</p>
 
 <p>To manage the widget instance life-cycle:</p>
@@ -508,7 +479,7 @@ widget_app_terminate(void *user_data)
 <li>Define the widget instance life-cycle callbacks:
 
 <ul><li>This callback is triggered when the widget instance is created.
-<p>Initialize resources for the widget instance and <a href="../../../../org.tizen.guides/html/native/app_management/widget_app_n.htm#get_window">draw the UI</a>. If the bundle content is not <span style="font-family: Courier New,Courier,monospace">NULL</span>, restore the previous status.</p>
+<p>Initialize resources for the widget instance and <a href="../../../../org.tizen.guides/html/native/app_management/widget_app_n.htm#get_window">draw the UI</a>. If the bundle content is not <code>NULL</code>, restore the previous status.</p>
 
 <pre class="prettyprint">
 static int
@@ -528,7 +499,7 @@ widget_instance_create(widget_context_h context, bundle *content,
 }
 </pre></li>
 <li>This callback is triggered when the widget instance is destroyed.
-<p>Release all widget resources. If the <span style="font-family: Courier New,Courier,monospace">reason</span> for the termination is not <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html#ga50c912e59019e4e719851bae110baa02">WIDGET_APP_DESTROY_TYPE_PERMANENT</a>, store the current status with the incoming bundle.</p>
+<p>Release all widget resources. If the <code>reason</code> for the termination is not <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html#ga50c912e59019e4e719851bae110baa02">WIDGET_APP_DESTROY_TYPE_PERMANENT</a>, store the current status with the incoming bundle.</p>
 
 <pre class="prettyprint">
 static int
@@ -562,7 +533,7 @@ widget_instance_resume(widget_context_h context, void *user_data)
 }
 </pre></li>
 <li>This callback is triggered when a widget update event is received.
-<p>Take the necessary actions for the widget update. If the <span style="font-family: Courier New,Courier,monospace">force</span> parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, the widget can be updated even in the pause state.</p>
+<p>Take the necessary actions for the widget update. If the <code>force</code> parameter is <code>true</code>, the widget can be updated even in the pause state.</p>
 
 <pre class="prettyprint">
 static int
@@ -572,14 +543,13 @@ widget_instance_update(widget_context_h context, bundle *content, int force, voi
 }
 </pre></li></ul>
 </li>
-<li>Register the callbacks in the <span style="font-family: Courier New,Courier,monospace">widget_instance_lifecycle_callback_s</span> structure during the widget application initialization:
+<li>Register the callbacks in the <code>widget_instance_lifecycle_callback_s</code> structure during the widget application initialization:
 
 <pre class="prettyprint">
 static widget_class_h
 widget_app_create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops =
-&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops = {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.create = widget_instance_create,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.destroy = widget_instance_destroy,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pause = widget_instance_pause,
@@ -594,7 +564,7 @@ widget_app_create(void *user_data)
 
 <h3 id="ui_draw" name="ui_draw">Drawing the Widget UI</h3>
 
-<p>To draw the widget UI, you must get a window object with the <span style="font-family: Courier New,Courier,monospace">widget_app_get_elm_win()</span> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API and create the UI on the home screen:</p>
+<p>To draw the widget UI, you must get a window object with the <code>widget_app_get_elm_win()</code> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API and create the UI on the home screen:</p>
 
 <pre class="prettyprint">
 #include &lt;widget_app_efl.h&gt;
@@ -654,7 +624,7 @@ widget_instance_create(widget_context_h context, bundle *content,
 <p>Widget instances can have private data. The data usually includes view objects to make a screen for each widget instance. The framework provides an easy way to find private data from the widget context handle, which is provided as a parameter in the callback functions. The following example shows how to make private data and use it:</p>
 
 <ul>
-<li>You can define a private data structure and attach it to the widget instance by calling the <span style="font-family: Courier New,Courier,monospace">widget_app_context_set_tag()</span> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API:
+<li>You can define a private data structure and attach it to the widget instance by calling the <code>widget_app_context_set_tag()</code> function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API:
 
 <pre class="prettyprint">
 struct widget_instance_data {
@@ -679,9 +649,9 @@ widget_instance_create(widget_context_h context, bundle *content,
 }
 </pre>
 </li>
-<li>You can get the private data from the widget instance by calling the <span style="font-family: Courier New,Courier,monospace">widget_app_context_get_tag()</span> function of the Widget Application API.
+<li>You can get the private data from the widget instance by calling the <code>widget_app_context_get_tag()</code> function of the Widget Application API.
 
-<p>The following code within the  <span style="font-family: Courier New,Courier,monospace">widget_instance_update()</span> callback is not included in the default application template in the Tizen Studio, but you can add it to test the data handling feature.</p>
+<p>The following code within the  <code>widget_instance_update()</code> callback is not included in the default application template in the Tizen Studio, but you can add it to test the data handling feature.</p>
 <pre class="prettyprint">
 static int
 widget_instance_update(widget_context_h context, bundle *content,
index 9d1157a..04229aa 100644 (file)
   <p>The application package manager is one of the core modules of the Tizen application framework, and responsible for installing, uninstalling, and updating packages, and storing their information. Using the package manager, you can also retrieve information related to the packages that are installed on the device.</p> 
   <p>The application package manager module is expandable to support various types of applications, and designated installation modules can be added to it. </p>
 
 <p class="figure">Figure: Application package manager</p> 
<p align="center"><strong>Figure: Application package manager</strong></p> 
  <p align="center"><img alt="Application package manager" src="../../images/application_package_manager.png" /></p> 
 
 <h3 id="config" name="config">Web Package Configuration</h3> 
-  <p>Each Web application package has a configuration file, <span style="font-family: Courier New,Courier,monospace">config.xml</span>, which indicates a packaging format and metadata for the application.</p>
+  <p>Each Web application package has a configuration file, <code>config.xml</code>, which indicates a packaging format and metadata for the application.</p>
   <p>The Tizen Web application must follow the guidelines of <a href="http://www.w3.org/TR/widgets/" target="_blank">W3C Widget Packaging</a> and Tizen extended configuration (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p>
   <p>For more information on the configuration elements, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#hierarchy">Configuration Element Hierarchy</a>.</p>
   
@@ -57,8 +57,8 @@
 <li>Package format and file extension
        <ul>
        <li>File format: ZIP archive file format</li>
-       <li>File extension: <span style="font-family: Courier New,Courier,monospace">.wgt</span> (for example, <span style="font-family: Courier New,Courier,monospace">sample.wgt</span>)</li>
-       <li>MIME type: <span style="font-family: Courier New,Courier,monospace">application/widget</span></li>
+       <li>File extension: <code>.wgt</code> (for example, <code>sample.wgt</code>)</li>
+       <li>MIME type: <code>application/widget</code></li>
        </ul>
 </li>
 <li>Application ID
 <li>Package content
        <ul>
        <li>File and folders: The root of the Web package is the path of the ZIP archive and contains files and folders, some of which are reserved. The following table shows the content of a package.
-       <table style="width: 100%" border="1"> 
-   <caption>
-     Table: Package content 
-   </caption> 
-   <tbody> 
+   <p align="center" class="Table"><strong>Table: Package content</strong></p>
+   <table style="width: 100%" border="1">
+   <tbody>
     <tr> 
      <th>Name</th> 
      <th>Type</th> 
      <th>Description</th> 
     </tr> 
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td> 
+     <td><code>config.xml</code></td> 
      <td rowspan="11">File</td> 
      <td>Application configuration document</td> 
     </tr> 
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">icon.gif</span></td> 
+     <td><code>icon.gif</code></td> 
      <td rowspan="5">Application default icon</td> 
     </tr> 
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">icon.ico</span></td> 
+     <td><code>icon.ico</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">icon.jpg</span></td> 
+     <td><code>icon.jpg</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">icon.png</span></td> 
+     <td><code>icon.png</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">icon.svg</span></td> 
+     <td><code>icon.svg</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td> 
+     <td><code>index.html</code></td> 
         <td rowspan="5">Application default start file</td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">index.htm</span></td> 
+     <td><code>index.htm</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">index.svg</span></td> 
+     <td><code>index.svg</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">index.xhtml</span></td> 
+     <td><code>index.xhtml</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">index.xht</span></td> 
+     <td><code>index.xht</code></td> 
     </tr>
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">locales</span></td> 
+     <td><code>locales</code></td> 
      <td>Folder</td> 
      <td>Container for localized content</td> 
     </tr>
 <li>Directory hierarchy (after installation on device)
 <p>The following figure and table illustrate the Web application package directory structure.</p>
   <p align="center"><img alt="Web application directory structure" src="../../images/web_app_directory_structure.png" /></p>
-       <table style="width: 100%" border="1"> 
-   <caption>
-     Table: Web application package structure 
-   </caption> 
+       <p align="center" class="Table"><strong>Table: Web application package structure</strong></p> 
+       <table style="width: 100%" border="1">
    <tbody> 
     <tr> 
      <th>Package</th> 
      <th>Core XML file</th> 
     </tr> 
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">App</span></td> 
-        <td><span style="font-family: Courier New,Courier,monospace">home/owner/apps_rw/&lt;Package ID&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">home/owner/apps_rw/qik37po9ck</span>)</p></td>
-     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;Name&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Sample</span>)</p></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">opt/share/packages/&lt;Package ID&gt;.xml</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">opt/share/packages/qik37po9ck.xml</span>)</p></td> 
+     <td><code>App</code></td> 
+        <td><code>home/owner/apps_rw/&lt;Package ID&gt;</code><p>(For example: <code>home/owner/apps_rw/qik37po9ck</code>)</p></td>
+     <td><code>&lt;Package ID&gt;.&lt;Name&gt;</code><p>(For example: <code>qik37po9ck.Sample</code>)</p></td> 
+     <td><code>opt/share/packages/&lt;Package ID&gt;.xml</code><p>(For example: <code>opt/share/packages/qik37po9ck.xml</code>)</p></td> 
     </tr> 
        </tbody> 
   </table> </li>
 <li>Package format and file extension
        <ul>
        <li>File format: ZIP archive file format</li>
-       <li>File extension: <span style="font-family: Courier New,Courier,monospace">.wgt</span> (for example, <span style="font-family: Courier New,Courier,monospace">sample.wgt</span>)</li>
+       <li>File extension: <code>.wgt</code> (for example, <code>sample.wgt</code>)</li>
        </ul>
 </li>
 <li>Package content
        <ul>
        <li>File and folders: The root of the hybrid package is the path of the ZIP archive and contains reserved folders. The following table shows the content of a package.
-<table border="1"> 
-   <caption>
-     Table: Package content 
-   </caption> 
+   <p align="center" class="Table"><strong>Table: Package content</strong></p> 
+   <table border="1">
    <tbody> 
     <tr> 
      <th>Name</th> 
         <th>Description</th> 
     </tr> 
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">bin</span></td> 
+               <td><code>bin</code></td> 
                <td rowspan="6">Folder</td>
                <td>Native application executable binary</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">data</span></td> 
+               <td><code>data</code></td> 
 
                <td>Web or native application private data</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">info</span></td> 
+               <td><code>info</code></td> 
 
                <td>Native application metadata</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">lib</span></td> 
+               <td><code>lib</code></td> 
 
                <td>Native application libraries</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">res</span></td> 
+               <td><code>res</code></td> 
 
                <td>Native application resources or Web application content</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">res/wgt</span></td> 
+               <td><code>res/wgt</code></td> 
 
                <td>Web application project root</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">res/wgt/index.html</span></td> 
+               <td><code>res/wgt/index.html</code></td> 
                <td>File</td>
                <td>Default HTML file for the Web application</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">setting</span></td> 
+               <td><code>setting</code></td> 
                <td rowspan="2">Folder</td>
                <td>Native application setting</td> 
        </tr>
        <tr>
-               <td><span style="font-family: Courier New,Courier,monospace">shared</span></td> 
+               <td><code>shared</code></td> 
        
                <td>Native application shared resources</td> 
        </tr>
  
   <li>Directory hierarchy (after installation on device)
   <p>The following figure and table illustrate the hybrid application package directory structure.</p>
-   <p class="figure">Figure: Hybrid application directory structure</p> 
+   <p align="center"><strong>Figure: Hybrid application directory structure</strong></p> 
   <p align="center"><img alt="Hybrid application directory structure" src="../../images/hybrid_app_package_manager.png" /></p> 
-       <table style="width: 100%" border="1"> 
-   <caption>
-     Table: Hybrid application package structure 
-   </caption> 
+       <p align="center" class="Table"><strong>Table: Hybrid application package structure</strong></p>
+   <table style="width: 100%" border="1"> 
    <tbody> 
     <tr> 
      <th>Package</th> 
      <th>Core XML file</th> 
     </tr> 
     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">App1</span> <p>(Web)</p></td> 
-     <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">home/owner/apps_rw/&lt;Package ID&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">home/owner/apps_rw/qik37po9ck</span>)</p></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;Name&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Sample</span>)</p></td> 
-     <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">opt/share/packages/&lt;Package ID&gt;.xml</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">opt/share/packages/qik37po9ck.xml</span>)</p></td> 
+     <td><code>App1</code> <p>(Web)</p></td> 
+     <td rowspan="3"><code>home/owner/apps_rw/&lt;Package ID&gt;</code><p>(For example: <code>home/owner/apps_rw/qik37po9ck</code>)</p></td> 
+     <td><code>&lt;Package ID&gt;.&lt;Name&gt;</code><p>(For example: <code>qik37po9ck.Sample</code>)</p></td> 
+     <td rowspan="3"><code>opt/share/packages/&lt;Package ID&gt;.xml</code><p>(For example: <code>opt/share/packages/qik37po9ck.xml</code>)</p></td> 
     </tr> 
        <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">App2</span> <p>(Native)</p></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;ExecutableName1&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Service</span>)</p></td> 
+     <td><code>App2</code> <p>(Native)</p></td> 
+     <td><code>&lt;Package ID&gt;.&lt;ExecutableName1&gt;</code><p>(For example: <code>qik37po9ck.Service</code>)</p></td> 
     </tr> 
        <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">App3</span> <p>(Native)</p></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;ExecutableName2&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Downloader</span>)</p></td> 
+     <td><code>App3</code> <p>(Native)</p></td> 
+     <td><code>&lt;Package ID&gt;.&lt;ExecutableName2&gt;</code><p>(For example: <code>qik37po9ck.Downloader</code>)</p></td> 
     </tr> 
        </tbody> 
   </table> </li>
index fd98f48..e2d38e1 100644 (file)
   <p>Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:</p>
 <ul>
 <li>When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround.
-<p>For example, if an application wants to use location information, it can check the device capability by using the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
+<p>For example, if an application wants to use location information, it can check the device capability by using the <code>getCapability()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
 </li>
 <li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user&#39;s device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
 <p>Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.</p></li>
 </ul>
  
-<p>If the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
+<p>If the <code>config.xml</code> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
 
-  <p class="figure">Figure: Feature-based filtering</p> 
+  <p align="center"><strong>Figure: Feature-based filtering</strong></p> 
   <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p> 
  
-<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the &quot;AND&quot; operation. For example, if there are <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
+<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the &quot;AND&quot; operation. For example, if there are <code>http://tizen.org/feature/network.nfc</code> and <code>http://tizen.org/feature/network.bluetooth</code> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
 
 <h3 id="screen_size" name="screen_size">Screen Size Feature</h3>
-<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the &quot;OR&quot; operation. For example, if the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
- <p>If you do not specify a proper screen size in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, your application can be rejected from the Tizen store.</p>
+<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the &quot;OR&quot; operation. For example, if the <code>http://tizen.org/feature/screen.size.normal.480.800</code> and <code>http://tizen.org/feature/screen.size.normal.720.1280</code> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
+ <p>If you do not specify a proper screen size in the <code>config.xml</code> file, your application can be rejected from the Tizen store.</p>
  <p>The following tables list the available screen size features. </p>
+ <p align="center" class="Table"><strong>Table: Available screen size features for mobile applications</strong></p>
  <table>
-       <caption>Table: Available screen size features for mobile applications</caption>
        <tbody>
        <tr>
                        <th>Feature key</th>
                        <th>Since</th>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal</code></td>
                        <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
-                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <code>http://tizen.org/feature/screen.size.normal</code> and <code>http://tizen.org/feature/screen.size.normal.320.480</code> keys, only the <code>http://tizen.org/feature/screen.size.normal.320.480</code> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
+                       <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
                        <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.2.1</td>
                </tr>   
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
                        <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.3</td>
                </tr>           
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
                        <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.360</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.360.360</code></td>
                        <td>Specify this key, if the application supports the 360 x 360 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3.2</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td>
                        <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3</td>
                </tr>           
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
                        <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td>
                        <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td>
                        <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td>
                        <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td>
                        <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.all</code></td>
                        <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
-                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <code>http://tizen.org/feature/screen.size.all</code> and <code>http://tizen.org/feature/screen.size.normal.320.480</code> keys, only the <code>http://tizen.org/feature/screen.size.normal.320.480</code> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
        </tbody>
  </table>
-
+<p align="center" class="Table"><strong>Table: Available screen size features for wearable applications</strong></p>
  <table>
-       <caption>Table: Available screen size features for wearable applications</caption>
        <tbody>
        <tr>
                        <th>Feature key</th>
                        <th>Since</th>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal</code></td>
                        <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
-                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <code>http://tizen.org/feature/screen.size.normal</code> and <code>http://tizen.org/feature/screen.size.normal.320.480</code> keys, only the <code>http://tizen.org/feature/screen.size.normal.320.480</code> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
                        <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        <td>2.3</td>
                        </td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.360</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.360.360</code></td>
                        <td>Specify this key, if the application supports the 360 x 360 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3.2</td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td>
                        <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
-                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3</td>
                </tr>           
        
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+                       <td><code>http://tizen.org/feature/screen.size.all</code></td>
                        <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
-                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+                       <p>You cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <code>http://tizen.org/feature/screen.size.all</code> and <code>http://tizen.org/feature/screen.size.normal.320.480</code> keys, only the <code>http://tizen.org/feature/screen.size.normal.320.480</code> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.2.1</td>
                </tr>
        </tbody>
   
 <h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>  
 
-<p>The feature keys have a hierarchy. For example, consider the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features:</p>
+<p>The feature keys have a hierarchy. For example, consider the <code>http://tizen.org/feature/location</code>, <code>http://tizen.org/feature/location.gps</code>, and <code>http://tizen.org/feature/location.wps</code> features:</p>
 <ul>
-<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature, only a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature can show the application on the Tizen Store application list.</li>
-<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature, a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span>, or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature can show the application on the Tizen Store application list.
-<p>This means that the Tizen Store considers the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature as the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</span> feature. (If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features together, only a device which supports both those features can show the application.)</p></li></ul>
+<li>If the feature list includes the <code>http://tizen.org/feature/location.gps</code> feature, only a device which has the <code>http://tizen.org/feature/location.gps</code> feature can show the application on the Tizen Store application list.</li>
+<li>If the feature list includes the <code>http://tizen.org/feature/location</code> feature, a device which has the <code>http://tizen.org/feature/location.gps</code>, <code>http://tizen.org/feature/location.wps</code>, or <code>http://tizen.org/feature/location</code> feature can show the application on the Tizen Store application list.
+<p>This means that the Tizen Store considers the <code>http://tizen.org/feature/location</code> feature as the <code>http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</code> feature. (If the feature list includes the <code>http://tizen.org/feature/location.gps</code> and <code>http://tizen.org/feature/location.wps</code> features together, only a device which supports both those features can show the application.)</p></li></ul>
 
 <h3 id="adding" name="adding">Adding the Feature List</h3> 
  
- <p>To enable filtering for your Web application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p> 
+ <p>To enable filtering for your Web application, add the feature list for the application <code>config.xml</code> file:</p> 
   <ol>
-    <li>To open the Web application configuration editor in the Tizen Studio, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view. </li>
+    <li>To open the Web application configuration editor in the Tizen Studio, double-click the <code>config.xml</code> file in the <strong>Project Explorer</strong> view. </li>
    <li>In the <strong>Feature</strong> tab, click <strong>Add</strong>.</li>
    <li>Select a feature from the list.</li>
    <li>Click <strong>Save</strong>.</li>
 
   <p>After setting the feature information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
 
-  <p> The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
+  <p> The following example shows the setting in the <code>config.xml</code> file code:</p>
   <pre class="prettyprint">
 &lt;tizen:feature name=&quot;http://tizen.org/feature/network.nfc&quot;/&gt;
 </pre>
 
 <p>The following tables show the available requirements for Tizen Web application package.</p>
+<p align="center" class="Table"><strong>Table: Available requirements for mobile Web Device APIs</strong></p>
 <table border="1" id="features">
-<caption>Table: Available requirements for mobile Web Device APIs</caption>
    <tbody>
 <tr>
      <th>Feature key</th>
         <th>Since</th>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/convergence.d2d</span></td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
      <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
+<td><code>http://tizen.org/feature/database.encryption</code></td>
      <td>Specify this key, if the application requires the database encryption feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
+<td><code>http://tizen.org/feature/datasync</code></td>
      <td>Specify this key, if the application requires the DataSync feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
+<td><code>http://tizen.org/feature/fmradio</code></td>
      <td>Specify this key, if the application requires an FM radio.</td>
         <td>2.2.1</td>
        </tr>
  <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+<td><code>http://tizen.org/feature/humanactivitymonitor</code></td>
     <td>Specify this key, if the application requires any of the Human Activity Monitor features.</td>
        <td>2.3</td>
     </tr>
  <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/iot.ocf</span></td>
+<td><code>http://tizen.org/feature/iot.ocf</code></td>
      <td>Specify this key, if the application requires the Open Connectivity Foundation (OCF) framework.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
+<td><code>http://tizen.org/feature/led</code></td>
      <td>Specify this key, if the application requires the LED feature.</td>
         <td>2.4</td>
     </tr>
 <tr>   
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
+<td><code>http://tizen.org/feature/location.batch</code></td>
      <td>Specify this key, if the application requires the location tracking with a position batch information feature for using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">Human Activity Monitor</a> (GPS Type) API.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth</code></td>
      <td>Specify this key, if the application requires the Bluetooth feature.</td>
         <td>2.2.1</td>
        </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td>
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
         <td>2.3</td>
         </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth.health</code></td>
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth.le</code></td>
      <td>Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.net_proxy</span></td>
+<td><code>http://tizen.org/feature/network.net_proxy</code></td>
      <td>Specify this key, if the application requires the net-proxy feature for the Internet connection. A net-proxy feature for a device acts as an intermediary between client (network service customer) and server (network service provider).</td>
         <td>3.0</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+<td><code>http://tizen.org/feature/network.nfc</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td>
      <td>Specify this key, if the application requires the NFC card emulation feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+<td><code>http://tizen.org/feature/network.nfc.card_emulation.hce</code></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
+<td><code>http://tizen.org/feature/network.nfc.p2p</code></td>
      <td>Specify this key, if the application requires the NFC P2P feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
+<td><code>http://tizen.org/feature/network.nfc.tag</code></td>
      <td>Specify this key, if the application requires the NFC tag feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+<td><code>http://tizen.org/feature/network.push</code></td>
      <td>Specify this key, if the application requires the network-based push service.</td>
         <td>2.2.1</td>
        </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+<td><code>http://tizen.org/feature/network.secure_element</code></td>
      <td>Specify this key, if the application requires the secure element feature.</td>
         <td>2.2.1</td>
         </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+<td><code>http://tizen.org/feature/network.telephony</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+<td><code>http://tizen.org/feature/network.telephony.mms</code></td>
      <td>Specify this key, if the application requires the MMS feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
      <td>Specify this key, if the application requires the SMS feature.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+<td><code>http://tizen.org/feature/network.wifi</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+<td><code>http://tizen.org/feature/sensor.barometer</code></td>
      <td>Specify this key, if the application requires a barometer sensor for using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> (Pressure Type) API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td>
+<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td>
      <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td>
      <td>Specify this key, if the application requires a heart rate monitor sensor for using the Human Activity Monitor (HRM Type) API.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_green</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
      <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
        <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
      <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
        <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_red</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
      <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+<td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
      <td>Specify this key, if the application requires a magnetic sensor for using the Sensor (MAGNETIC Type) API.</td>
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+<td><code>http://tizen.org/feature/sensor.pedometer</code></td>
      <td>Specify this key, if the application requires a pedometer sensor for using the Human Activity Monitor (PEDOMETER Type) API.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+<td><code>http://tizen.org/feature/sensor.photometer</code></td>
      <td>Specify this key, if the application requires a photometer sensor for using the Sensor (LIGHT Type) API.</td>
         <td>2.2.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+<td><code>http://tizen.org/feature/sensor.proximity</code></td>
      <td>Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.sleep_monitor</span></td>
+<td><code>http://tizen.org/feature/sensor.sleep_monitor</code></td>
      <td>Specify this key, if the application requires a sleep monitor sensor which tracks the human sleep state or a sleep detector sensor which detects whether the human falls asleep or wakes up.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td>
      <td>Specify this key, if the application requires a ultraviolet sensor for using the Sensor (ULTRAVIOLET Type) API.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+<td><code>http://tizen.org/feature/sensor.wrist_up</code></td>
      <td>Specify this key, if the application requires a wrist up sensor for using the Human Activity Monitor (WRIST_UP Type) API.</td>
         <td>2.3</td>
     </tr>
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Available requirements for mobile Web W3C/HTML5 APIs</strong></p>
 <table border="1" id="features">
-<caption>Table: Available requirements for mobile Web W3C/HTML5 APIs</caption>
    <tbody>
 <tr>
      <th>Feature key</th>
     </tr>
 
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+<td><code>http://tizen.org/feature/camera</code></td>
      <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+<td><code>http://tizen.org/feature/location.gps</code></td>
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">GeoLocation</a> API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+<td><code>http://tizen.org/feature/microphone</code></td>
      <td>Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>   
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+<td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
      <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+<td><code>http://tizen.org/feature/sensor.gyroscope</code></td>
      <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+<td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
      <td>Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation</a> API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+<td><code>http://tizen.org/feature/speech.synthesis</code></td>
      <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webspeech">Web Speech</a> API.</td>
         <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Available requirements for mobile Web Runtime</strong></p>
 <table border="1" id="features">
-<caption>Table: Available requirements for mobile Web Runtime</caption>
    <tbody>
 <tr>
      <th>Feature key</th>
         <th>Since</th>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
      <td>Specify this key, if the application requires the Widget feature. Since 2.3.1, this key indicates only the native Widget.</td> 
         <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
 
-
+<p align="center" class="Table"><strong>Table: Available requirements for wearable Web Device APIs</strong></p>
   <table border="1" id="features">
-<caption>Table: Available requirements for wearable Web Device APIs</caption>
    <tbody>
 <tr>
      <th>Feature key</th>
         <th>Since</th>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/convergence.d2d</span></td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
      <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
+<td><code>http://tizen.org/feature/database.encryption</code></td>
      <td>Specify this key, if the application requires the database encryption feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
+<td><code>http://tizen.org/feature/download</code></td>
      <td>Specify this key, if the application requires the network connection to access the Internet for using the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download</a> API.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+<td><code>http://tizen.org/feature/humanactivitymonitor</code></td>
      <td>Specify this key, if the application requires the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">Human Activity Monitor</a> API.
-         <p>If the key is declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, the application can be installed on the device with any of the Human Activity Monitor features:</p>
+         <p>If the key is declared in the <code>config.xml</code> file, the application can be installed on the device with any of the Human Activity Monitor features:</p>
         <ul>
-               <li>HRM: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></li>
-        <li>PEDOMETER: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></li>
-        <li>WRIST_UP: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></li>
-        <li>GPS: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></li>
+               <li>HRM: <code>http://tizen.org/feature/sensor.heart_rate_monitor</code></li>
+        <li>PEDOMETER: <code>http://tizen.org/feature/sensor.pedometer</code></li>
+        <li>WRIST_UP: <code>http://tizen.org/feature/sensor.wrist_up</code></li>
+        <li>GPS: <code>http://tizen.org/feature/location.batch</code></li>
                </ul>
      </td>
         <td>2.3</td>
    </tr>
  <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/iot.ocf</span></td>
+<td><code>http://tizen.org/feature/iot.ocf</code></td>
      <td>Specify this key, if the application requires the Open Connectivity Foundation (OCF) framework.</td>
         <td>3.0</td>
     </tr>
  <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
+<td><code>http://tizen.org/feature/led</code></td>
      <td>Specify this key, if the application requires the LED feature.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
+<td><code>http://tizen.org/feature/location.batch</code></td>
      <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth</code></td>
      <td>Specify this key, if the application requires the Bluetooth feature.</td>
         <td>2.2.1</td>
        </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td>
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP) feature for using the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key</a> API.</td>
         <td>2.3</td>
         </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth.health</code></td>
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+<td><code>http://tizen.org/feature/network.bluetooth.le</code></td>
      <td>Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.net_proxy</span></td>
+<td><code>http://tizen.org/feature/network.net_proxy</code></td>
      <td>Specify this key, if the application requires the net-proxy feature for the Internet connection. A net-proxy feature for a device acts as an intermediary between client (network service customer) and server (network service provider).</td>
         <td>3.0</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+<td><code>http://tizen.org/feature/network.nfc</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td>
      <td>Specify this key, if the application requires the NFC card emulation feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+<td><code>http://tizen.org/feature/network.nfc.card_emulation.hce</code></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
+<td><code>http://tizen.org/feature/network.nfc.p2p</code></td>
      <td>Specify this key, if the application requires the NFC P2P feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
+<td><code>http://tizen.org/feature/network.nfc.tag</code></td>
      <td>Specify this key, if the application requires the NFC tag feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+<td><code>http://tizen.org/feature/network.push</code></td>
      <td>Specify this key, if the application requires the network-based push service.</td>
         <td>2.2.1</td>
        </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+<td><code>http://tizen.org/feature/network.secure_element</code></td>
      <td>Specify this key, if the application requires the secure element feature.</td>
         <td>2.2.1</td>
         </tr>  
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+<td><code>http://tizen.org/feature/network.telephony</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
      <td>Specify this key, if the application requires the SMS feature.</td> 
         <td>2.4</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+<td><code>http://tizen.org/feature/network.wifi</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature (for example, the Download API).</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+<td><code>http://tizen.org/feature/sensor.barometer</code></td>
      <td>Specify this key, if the application requires a barometer sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td>
+<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td>
      <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td>
      <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_green</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
      <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
      <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_red</span></td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
      <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+<td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
      <td>Specify this key, if the application requires a magnetic sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+<td><code>http://tizen.org/feature/sensor.pedometer</code></td>
      <td>Specify this key, if the application requires a pedometer sensor.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+<td><code>http://tizen.org/feature/sensor.photometer</code></td>
      <td>Specify this key, if the application requires a photometer sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+<td><code>http://tizen.org/feature/sensor.proximity</code></td>
      <td>Specify this key, if the application requires a proximity sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.sleep_monitor</span></td>
+<td><code>http://tizen.org/feature/sensor.sleep_monitor</code></td>
      <td>Specify this key, if the application requires a sleep monitor sensor which tracks the human sleep state or a sleep detector sensor which detects whether the human falls asleep or wakes up.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td>
      <td>Specify this key, if the application requires an ultraviolet sensor.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+<td><code>http://tizen.org/feature/sensor.wrist_up</code></td>
      <td>Specify this key, if the application requires a wrist up sensor.</td>
         <td>2.3</td>
     </tr>
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Available requirements for wearable Web W3C/HTML5 APIs</strong></p>
 <table border="1" id="features">
-<caption>Table: Available requirements for wearable Web W3C/HTML5 APIs</caption>
    <tbody>
 <tr>
      <th>Feature key</th>
     </tr>
 
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+<td><code>http://tizen.org/feature/camera</code></td>
      <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
+<td><code>http://tizen.org/feature/input.rotating_bezel</code></td>
      <td>Specify this key, if the application requires rotating bezel input.</td>
         <td>2.3.1</td>
     </tr>      
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+<td><code>http://tizen.org/feature/location.gps</code></td>
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">GeoLocation</a> API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+<td><code>http://tizen.org/feature/microphone</code></td>
      <td>Specify this key, if the application requires a microphone for using the getUserMedia API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
+<td><code>http://tizen.org/feature/network.internet</code></td>
      <td>Specify this key, if the application requires Internet access for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> API.</td>
         <td>2.3.1</td>
     </tr>      
 <tr>   
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
+<td><code>http://tizen.org/feature/screen.shape.circle</code></td>
      <td>Specify this key, if the application requires a circle-shaped screen.</td>
         <td>2.3.1</td>
     </tr>
 <tr>   
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
+<td><code>http://tizen.org/feature/screen.shape.rectangle</code></td>
      <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
         <td>2.3.1</td>
     </tr>      
 <tr>   
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+<td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
      <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification</a> API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+<td><code>http://tizen.org/feature/sensor.gyroscope</code></td>
      <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+<td><code>http://tizen.org/feature/speech.synthesis</code></td>
      <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webspeech">Web Speech</a> API.</td>
         <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Available requirements for wearable Web Supplementary APIs</strong></p>
 <table border="1" id="features">
-<caption>Table: Available requirements for wearable Web Supplementary APIs</caption>
    <tbody>
 <tr>
      <th>Feature key</th>
         <th>Since</th>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.audio_recording</span></td>
+<td><code>http://tizen.org/feature/media.audio_recording</code></td>
      <td>Specify this key, if the application requires the audio recording functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.</td>
         <td>2.3</td>
    </tr>  
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.image_capture</span></td>
+<td><code>http://tizen.org/feature/media.image_capture</code></td>
      <td>Specify this key, if the application requires the image capture functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Image Recording) API.</td>
         <td>2.3</td>
    </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.video_recording</span></td>
+<td><code>http://tizen.org/feature/media.video_recording</code></td>
      <td>Specify this key, if the application requires the video recording functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Video Recording) API.</td>
         <td>2.3</td>
    </tr>
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Available requirements for wearable Web Runtime</strong></p>
 <table border="1" id="features">
-<caption>Table: Available requirements for wearable Web Runtime</caption>
    <tbody>
 <tr>
      <th>Feature key</th>
         <th>Since</th>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
      <td>Specify this key, if the application requires the Widget feature. Since 2.3.1, this key indicates only the native Widget.</td> 
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/web.service</span></td>
+<td><code>http://tizen.org/feature/web.service</code></td>
      <td>Specify this key, if the application requires the Web service application feature.</td>
         <td>2.3</td>
    </tr>
 <h2 id="profile_w" name="profile_w">Profile-based Filtering</h2>
 <p>A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.</p>
 
-<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <code>profile name</code> element in the <code>config.xml</code> file.</p>
 
 <p>The following table lists the Tizen profiles and related profile name attributes.</p>
+<p align="center" class="Table"><strong>Table: Tizen profiles and profile name attributes</strong></p>
  <table border="1" id="feature">
-<caption>Table: Tizen profiles and profile name attributes</caption>
 <tbody>
 <tr>
 <th width="50%">Tizen profile</th> 
     </tr>
 <tr>
 <td>Mobile</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">mobile</span></td> 
+     <td><code>mobile</code></td> 
     </tr>
 <tr>
 <td>Wearable</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">wearable</span></td> 
+     <td><code>wearable</code></td> 
     </tr>
 <tr>
 <td>TV</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">TV</span></td> 
+     <td><code>TV</code></td> 
     </tr>
 </tbody></table>
 
-<p>In a Web application, the profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as follows:</p>
+<p>In a Web application, the profile name element can be added to the <code>config.xml</code> file as follows:</p>
 <pre class="prettyprint">
 &lt;widget xmlns=&quot;http://www.w3.org/ns/widgets&quot; xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot; ... &gt;
 &lt;tizen:profile name=&quot;mobile&quot;/&gt;
 &lt;tizen:profile name=&quot;wearable&quot;/&gt;
 </pre>
 
-<p>The Tizen Store compares the device profile and the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
+<p>The Tizen Store compares the device profile and the <code>profile name</code> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
 
 <h2 id="multi_profile" name="multi_profile">Single Web Application for Multiple Profiles</h2> 
-<p>Applications are created for a single specific target profile and can only run on devices compliant to that profile. However, it is easily possible to develop a Web application on one profile and make it work on another profile if you use Web APIs that are common to both the profiles. You just modify the <span style="font-family: Courier New,Courier,monospace"> &lt;tizen:profile&gt;</span> tag to switch profiles. You may also have to make other changes, like adapting your application to different screen sizes and input events. It is recommended that you test this modified application to ensure it performs as desired.</p> 
+<p>Applications are created for a single specific target profile and can only run on devices compliant to that profile. However, it is easily possible to develop a Web application on one profile and make it work on another profile if you use Web APIs that are common to both the profiles. You just modify the <code> &lt;tizen:profile&gt;</code> tag to switch profiles. You may also have to make other changes, like adapting your application to different screen sizes and input events. It is recommended that you test this modified application to ensure it performs as desired.</p> 
                
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index 33ec81c..4aa02ad 100644 (file)
@@ -53,8 +53,8 @@
 <li>This policy comes into effect beginning with Tizen 2.4.</li>
 <li>The functionality of the deprecated API is available for 2 releases, as indicated in the following table.
 
+<p align="center" class="Table"><strong>Table: Deprecation schedule</strong></p>
 <table>
-<caption>Table: Deprecation schedule</caption>
 <tbody>
 <tr>
  <th></th>
index ba88610..cf580c2 100644 (file)
   
 <p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p> 
 
-<p class="figure">Figure: Rotary device</p> 
+<p align="center"><strong>Figure: Rotary device</strong></p> 
 <p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
 <p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
 
+<p align="center" class="Table"><strong>Table: Rotary events</strong></p>
 <table border="1">
-<caption> Table: Rotary events</caption>
  <tbody>
     <tr>
     <th>Type</th>
@@ -56,8 +56,8 @@
   <tr>
      <td>rotarydetent</td>
    <td>Event is triggered when a device detects the detent point.</td>
-   <td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: the rotation direction.
-     <p>The available values are <span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise and <span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation.</p></td>
+   <td><code>detail.direction</code>: the rotation direction.
+     <p>The available values are <code>CW</code> for clockwise and <code>CCW</code> for counter-clockwise rotation.</p></td>
    </tr>
   </tbody>
 </table>
@@ -86,7 +86,7 @@ document.addEventListener(&quot;rotarydetent&quot;, function(ev)
 
 <p>In low-powered wearable devices, the Tizen platform supports an ambient mode for watch applications. When the device enables the ambient mode, the Tizen watch application displayed on an idle screen can show a limited UI to reduce power consumption. The watch application also receives a tick event every minute in the ambient mode.</p>
 
-<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient_support</span> attribute to <span style="font-family: Courier New,Courier,monospace">disable</span> in the watch application <span style="font-family: Courier New,Courier,monospace">config.xml</span> file to allow the platform to show a default ambient mode UI.</p>
+<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <code>ambient_support</code> attribute to <code>disable</code> in the watch application <code>config.xml</code> file to allow the platform to show a default ambient mode UI.</p>
 
 <p>Since Tizen 2.3.2, some devices introduce a high color mode for the ambient mode. In the high color mode, you can use more colors (usually, 24-bit color) for drawing the ambient mode UI. To check whether the device supports the high color mode, use the following code:</p>
 
@@ -96,8 +96,8 @@ var isHighColorMode = tizen.systeminfo.getCapability(&quot;http://tizen.org/feat
 </pre>
 
 <p>The following table describes the ambient mode events.</p>
+<p align="center" class="Table"><strong>Table: Ambient events</strong></p>
 <table border="1">
-<caption> Table: Ambient events</caption>
  <tbody>
    <tr>
      <th>Type</th>
@@ -107,23 +107,17 @@ var isHighColorMode = tizen.systeminfo.getCapability(&quot;http://tizen.org/feat
    <tr>
      <td>ambientmodechanged</td>
      <td>Event is triggered when a device enables or disables the ambient mode.</td>
-     <td><span style="font-family: Courier New,Courier,monospace">detail.ambientMode</span>: the status of the mode.
-        <p>The available values are <span style="font-family: Courier New,Courier,monospace;">true</span> when the ambient mode is enabled and <span style="font-family: Courier New,Courier,monospace;">false</span> when the ambient mode is disabled.</p>
+     <td><code>detail.ambientMode</code>: the status of the mode.
+        <p>The available values are <code>true</code> when the ambient mode is enabled and <code>false</code> when the ambient mode is disabled.</p>
         </td>
    </tr>
    <tr>
      <td>timetick</td>
      <td>Event is triggered once a minute while the device is in the ambient mode to notify the application that it can update its UI.
-       <table class="note">
-         <tbody>
-           <tr>
-             <th class="note">Note</th>
-           </tr>
-           <tr>
-             <td class="note">The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm</span> privilege must be set to get timetick events.</td>
-           </tr>
-         </tbody>
-       </table>
+             <div class="note">
+        <strong>Note</strong>
+        The <code>http://tizen.org/privilege/alarm</code> privilege must be set to get timetick events.
+    </div>
      </td>
      <td>-</td>
    </tr>
index a764856..423b059 100644 (file)
@@ -39,25 +39,19 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <li>The platform level is the highest privilege level, and an application that needs these privileges requires at least a platform-signed certificate, which is granted to vendor developers.</li>
 </ul>
 
-<p>Since Tizen platform 3.0, some privileges are categorized as privacy-related and give an option to the user to switch them on and off. If an application invokes a privacy-related privileged API, the Tizen system checks whether the privilege is <strong>allowed</strong> for the application. For the application to use the API, the privilege must be declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and the user must have switched it on.</p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">In applications with the platform version 3.0 or higher, if you use privacy-related privileged APIs, make sure that the user has switched the privilege on before making the function call. Otherwise, the application does not work as expected.</td>
-    </tr>
-   </tbody>
-  </table>
+<p>Since Tizen platform 3.0, some privileges are categorized as privacy-related and give an option to the user to switch them on and off. If an application invokes a privacy-related privileged API, the Tizen system checks whether the privilege is <strong>allowed</strong> for the application. For the application to use the API, the privilege must be declared in the <code>config.xml</code> file and the user must have switched it on.</p>
+  
+     <div class="note">
+        <strong>Note</strong>
+        In applications with the platform version 3.0 or higher, if you use privacy-related privileged APIs, make sure that the user has switched the privilege on before making the function call. Otherwise, the application does not work as expected.
+    </div>
 
 <p>The Tizen Studio also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../../org.tizen.studio/html/web_tools/privilege_checker_w.htm">Verifying Privilege Usage</a>.</p>
                        
 <p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
 
+<p align="center" class="Table"><strong>Table: Mobile Web Device API privileges</strong></p> 
 <table id="privileges">
-<caption>Table: Mobile Web Device API privileges</caption> 
 <tbody>
 <tr>
        <th>Privilege</th>
@@ -127,7 +121,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td></td>
     <td>2.2.1</td>
-       <td>The application can change Bluetooth settings, such as switching Bluetooth on or off and setting the device name. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+       <td>The application can change Bluetooth settings, such as switching Bluetooth on or off and setting the device name. <strong>Deprecated since 2.4</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.
        </td>
 </tr>
 <tr>
@@ -135,7 +129,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td></td>
     <td>2.2.1</td>
-       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices. <strong>Deprecated since 2.4</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.
        </td>
 </tr>
 <tr>
@@ -143,7 +137,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td></td>
     <td>2.2.1</td>
-       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information. <strong>Deprecated since 2.4</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.
        </td>
 </tr>
 <tr>
@@ -151,7 +145,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td></td>
     <td>2.2.1</td>
-       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data. <strong>Deprecated since 2.4</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.
        </td>
 </tr>
 <tr class="platform-level">
@@ -439,7 +433,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>partner</td>
        <td></td>
     <td>2.2.1</td>
-       <td>The application can read secure system information. <strong>Deprecated since 2.3.1</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/telephony</span> instead.</td>
+       <td>The application can read secure system information. <strong>Deprecated since 2.3.1</strong>. Use <code>http://tizen.org/privilege/telephony</code> instead.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/telephony</td>
@@ -472,8 +466,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Mobile Web W3C/HTML5 API privileges</strong></p>
 <table id="privileges">
-<caption>Table: Mobile Web W3C/HTML5 API privileges</caption> 
 <tbody>
 <tr>
        <th>Privilege</th>
@@ -532,8 +526,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Mobile Web Supplementary API privileges</strong></p> 
 <table id="privileges">
-<caption>Table: Mobile Web Supplementary API privileges</caption> 
 <tbody>
 <tr>
        <th>Privilege</th>
@@ -552,8 +546,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Wearable Web Device API privileges</strong></p> 
 <table id="privileges">
-<caption>Table: Wearable Web Device API privileges</caption> 
 <tbody>
 <tr>
        <th>Privilege</th>
@@ -609,28 +603,28 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td></td>
     <td>2.3.1</td>
-       <td>The application can change Bluetooth settings, such as switching Bluetooth on or off and setting the device name. <strong>Deprecated since 3.0</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+       <td>The application can change Bluetooth settings, such as switching Bluetooth on or off and setting the device name. <strong>Deprecated since 3.0</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/bluetooth.gap</td>
        <td>public</td>
        <td></td>
     <td>2.3.1</td>
-       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices. <strong>Deprecated since 3.0</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices. <strong>Deprecated since 3.0</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/bluetooth.health</td>
        <td>public</td>
        <td></td>
     <td>2.3.1</td>
-       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information. <strong>Deprecated since 3.0</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information. <strong>Deprecated since 3.0</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/bluetooth.spp</td>
        <td>public</td>
        <td></td>
     <td>2.3.1</td>
-       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data. <strong>Deprecated since 3.0</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data. <strong>Deprecated since 3.0</strong>. Use <code>http://tizen.org/privilege/bluetooth</code> instead.</td>
 </tr>
 <tr class="platform-level">
        <td class="key">http://tizen.org/privilege/bluetoothmanager</td>
@@ -833,7 +827,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>partner</td>
        <td></td>
     <td>2.2.1</td>
-       <td>The application can read secure system information. <strong>Deprecated since 2.3.1</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/telephony</span> instead.</td>
+       <td>The application can read secure system information. <strong>Deprecated since 2.3.1</strong>. Use <code>http://tizen.org/privilege/telephony</code> instead.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/telephony</td>
@@ -859,8 +853,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Wearable Web W3C/HTML5 API privileges</strong></p> 
 <table id="privileges">
-<caption>Table: Wearable Web W3C/HTML5 API privileges</caption> 
 <tbody>
 <tr>
        <th>Privilege</th>
@@ -909,8 +903,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
+<p align="center" class="Table"><strong>Table: Wearable Web Supplementary API privileges</strong></p>
 <table id="privileges">
-<caption>Table: Wearable Web Supplementary API privileges</caption> 
 <tbody>
 <tr>
        <th>Privilege</th>
index 8865221..38c5415 100644 (file)
@@ -63,7 +63,7 @@
 <li>The distributor signature determines the API set that the application can use.</li>
 </ul>
 </li></ul>
-<p class="figure">Figure: Signature type</p>
+<p align="center"><strong>Figure: Signature type</strong></p>
 <p align="center"><img src="../../images/signature_type.png" alt="Signature type" /></p>
 
 
@@ -78,8 +78,8 @@
 <p>For an application to use a privileged API, the distributor signature must be generated from a certificate (and its signing key) with a proper privilege level. If an application has a distributor signature generated from a partner level certificate (and its signing key), the application can use only public and partner level APIs.</p>
 <p>The following table shows the relationship between the certificate (and signing key) privilege level and the API privilege level.</p>
 
+<p align="center" class="Table"><strong>Table: API levels allowed in specific certificate privilege levels</strong></p>
 <table>
-       <caption>Table: API levels allowed in specific certificate privilege levels</caption>
 <tbody>
 <tr>
        <th>Certificate privilege level</th>
 
 <p>The following figure illustrates the signature and certificate flow.</p>
 
-<p class="figure">Figure: Signature flow</p>
+<p align="center"><strong>Figure: Signature flow</strong></p>
 <p align="center"><img src="../../images/signature_flow.png" alt="Signature flow" /></p>
 
 <p>The testing distributor certificate and its signing key with the public level are preloaded in the Tizen Studio. The author certificate and its signing key can also be created in the Tizen Studio. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">Working with the Certificate Profile</a>.</p>
 
 <p>The following figure shows the signature file structure.</p>
 
-<p class="figure">Figure: Signature file structure</p>
+<p align="center"><strong>Figure: Signature file structure</strong></p>
 <p align="center"><img src="../../images/signature_structure.png" alt="Signature file structure" /></p>
 
 
index 909497d..1531c59 100644 (file)
                        
 <p>Tizen provides a wide range of Web API modules that allow you to take full advantage of various Tizen features.</p>
   <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html">Mobile Web Device API Reference</a>.</p>
-  <table border="1"> 
-   <caption>
-     Table: Device API features provided for mobile applications 
-   </caption> 
+   <p align="center" class="Table"><strong>Table: Device API features provided for mobile applications</strong></p> 
+   <table border="1"> 
+
    <colgroup> 
     <col width="20%" /> 
     <col width="40%" /> 
   </table>
  
 <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html">Wearable Web Device API Reference</a>.</p>
-  <table border="1"> 
-   <caption>
-     Table: Device API features provided for wearable applications 
-   </caption> 
+   <p align="center" class="Table"><strong>Table: Device API features provided for wearable applications</strong></p> 
+   <table border="1"> 
    <colgroup> 
     <col width="20%" /> 
     <col width="40%" /> 
   </table>
  
 <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html" shape="rect">Mobile Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
-  <table border="1"> 
-   <caption>
-     Table: W3C/HTML5 and some supplementary API features provided for mobile applications 
-   </caption> 
+   <p align="center" class="Table"><strong>Table: W3C/HTML5 and some supplementary API features provided for mobile applications</strong></p> 
+   <table border="1"> 
    <colgroup> 
     <col width="20%" /> 
     <col width="40%" /> 
   
  
 <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">Wearable Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
-  <table border="1"> 
-   <caption>
-     Table: W3C/HTML5 and some supplementary API features provided for wearable applications 
-   </caption> 
+   <p align="center" class="Table"><strong>Table: W3C/HTML5 and some supplementary API features provided for wearable applications</strong></p> 
+   <table border="1"> 
    <colgroup> 
     <col width="20%" /> 
     <col width="40%" /> 
index b1b3d65..97f1203 100644 (file)
 <li>Web application privilege level is Public, and 1 or more Partner or Platform level API privileges are declared in the configuration file.</li>
        </ul>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note"> A Web application can be installed from the Tizen Store or can be side-loaded (for example, through a browser or Bluetooth).
-The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</span> element is ignored in the Tizen Web application installation process.
-</td> 
-    </tr> 
-   </tbody> 
-  </table>
+  
+     <div class="note">
+        <strong>Note</strong>
+        A Web application can be installed from the Tizen Store or can be side-loaded (for example, through a browser or Bluetooth).
+               The <code>&lt;feature&gt;</code> element is ignored in the Tizen Web application installation process.
+    </div>
 </li> 
    <li>Updating Web applications 
    <p>The WRT supports updating Web applications when there is a new version available.</p>
@@ -85,7 +79,7 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
 <li>Web application data, such as Tizen settings, cookies, and local storage are preserved across updates. You must ensure that the old data in your application is still usable after the update.</li>
 </ul></li> 
    <li>Uninstalling Web applications <p>The WRT supports the uninstallation of Web applications. During the uninstallation process, all Web application data, such as preferences, local storage data, cookies, and the local storage folder, are removed.</p></li> 
-   <li>Managing Web application life-cycle <p>The WRT supports W3C DOM load and unload, and the <a href="http://www.w3.org/TR/page-visibility/" target="_blank">Page Visibility</a> events for all pages.</p> <p>When a Web application is sent to the background or hidden, the JavaScript execution and rendering, including CSS animations, is suspended, unless the application is specifically configured to be a background service.</p> <p>When a Web application returns to the foreground, the JavaScript execution and rendering is resumed.</p> <p>The Web Runtime supports the following URI schemes: <span style="font-family: Courier New,Courier,monospace;">sms://</span>, <span style="font-family: Courier New,Courier,monospace;">mmsto://</span>, and <span style="font-family: Courier New,Courier,monospace;">mailto://</span>. </p>
+   <li>Managing Web application life-cycle <p>The WRT supports W3C DOM load and unload, and the <a href="http://www.w3.org/TR/page-visibility/" target="_blank">Page Visibility</a> events for all pages.</p> <p>When a Web application is sent to the background or hidden, the JavaScript execution and rendering, including CSS animations, is suspended, unless the application is specifically configured to be a background service.</p> <p>When a Web application returns to the foreground, the JavaScript execution and rendering is resumed.</p> <p>The Web Runtime supports the following URI schemes: <code>sms://</code>, <code>mmsto://</code>, and <code>mailto://</code>. </p>
    <p>For each supported URI scheme, the Web Runtime launches a registered platform scheme handler with appropriate parameters.</p><p>The content localization is supported according to the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and Configuration</a>.</p>
 </li> 
   </ul> 
@@ -96,23 +90,20 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
    <li><p><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 APIs</a></p></li> 
    <li><p><a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API</a></p></li> 
   </ul> 
-  <p>It also supports multiple browsing context creation within a single Web application using, for example, the <span style="font-family: Courier New,Courier,monospace;">window.open()</span> method, or hyperlink navigation.</p>
+  <p>It also supports multiple browsing context creation within a single Web application using, for example, the <code>window.open()</code> method, or hyperlink navigation.</p>
   <p>Tizen Web APIs can be accessed in the top-level browsing context, such as main document window, and nested browsing contexts, such as iframes.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Tizen Device API can only be used with a locally packaged page. Tizen Device APIs are not available in cross-origin pages.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
- <p>To access the host page of your Web application, add the domain for access in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. For more information, see <a href="#content_sec">Content Security Policy</a>.</p>
+
+  
+     <div class="note">
+        <strong>Note</strong>
+        Tizen Device API can only be used with a locally packaged page. Tizen Device APIs are not available in cross-origin pages.
+    </div>
+       
+ <p>To access the host page of your Web application, add the domain for access in the <code>config.xml</code> file. For more information, see <a href="#content_sec">Content Security Policy</a>.</p>
   <p>The Web Runtime also supports the following features:</p> 
   <ul> 
    <li><p><a href="http://www.w3.org/TR/widgets-apis/" target="_blank">Widget Interface</a></p></li> 
-   <li><p><span style="font-family: Courier New,Courier,monospace;">maximized</span> and <span style="font-family: Courier New,Courier,monospace;">fullscreen</span> view modes of the <a href="http://www.w3.org/TR/view-mode/" target="_blank">&#39;view-mode&#39; Media Feature</a>.</p></li> 
+   <li><p><code>maximized</code> and <code>fullscreen</code> view modes of the <a href="http://www.w3.org/TR/view-mode/" target="_blank">&#39;view-mode&#39; Media Feature</a>.</p></li> 
 
   </ul>
 
@@ -132,7 +123,7 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
   <p>The Web Runtime follows the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML digital widget signature</a> process:</p> 
   <ul> 
    <li>Web application can be signed by the author and distributors.</li> 
-   <li>The first valid Tizen distributor signature, <span style="font-family: Courier New,Courier,monospace;">signature1.xml</span>, determines the privilege level of the Web application, which is Public, Partner, or Platform.</li>
+   <li>The first valid Tizen distributor signature, <code>signature1.xml</code>, determines the privilege level of the Web application, which is Public, Partner, or Platform.</li>
    <li>Web application is installed as a trusted application when it is signed with valid signatures and its privilege level is Public, Partner, or Platform.</li>
    <li>Web application is installed as an untrusted application if it is:
 <ul>
@@ -143,7 +134,7 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
   </ul> 
   
   <h3 id="protect" name="protect">Web Application Protection</h3>
-  <p>For Web applications that explicitly turn on encryption (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:setting /&gt;</span> element in the configuration file, the Web Runtime provides the following protection features:</p> 
+  <p>For Web applications that explicitly turn on encryption (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) using the <code>&lt;tizen:setting /&gt;</code> element in the configuration file, the Web Runtime provides the following protection features:</p> 
   <ul> 
    <li>HTML, JavaScript, and CSS files of the Web application stored by the device are encrypted.</li> 
    <li>When the Web application is launched, the WRT decrypts all of its resources in a manner which is transparent to the Web application itself.</li> 
@@ -156,8 +147,8 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
    <p>The Web applications can use HTML5 APIs, some of which need user permission to execute the API call. For such APIs, the Web Runtime supports specific privileges.</p>
   
   <p>The following table summarizes distributor signature type to API privilege level behavior mapping.</p>
-  <table border="1">
-        <caption>Table: HTML5 API privileges and behavior</caption>
+    <p align="center" class="Table"><strong>Table: HTML5 API privileges and behavior</strong></p>
+               <table border="1">
        <tbody>
                <tr>
                        <th>API</th>
@@ -166,37 +157,37 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
                </tr>
                <tr>
                        <td>Geolocation (in <strong>mobile and wearable applications only</strong>)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></td>
+                       <td><code>http://tizen.org/privilege/location</code></td>
                        <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise block execution.<p><strong>Remote domain</strong>: Popup user prompt if defined, otherwise block execution.</p></td>
                </tr>
                <tr>
                        <td>Getusermedia (in <strong>mobile and wearable applications only</strong>)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacapture</span></td>
+                       <td><code>http://tizen.org/privilege/mediacapture</code></td>
                </tr>
                <tr>
                        <td>Web Notifications (in <strong>mobile applications only</strong>)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></td>
+                       <td><code>http://tizen.org/privilege/notification</code></td>
                        <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise popup user prompt.<p><strong>Remote domain</strong>: Popup user prompt.</p></td>
                </tr>
                <tr>
                        <td>Storage (in <strong>mobile and wearable applications only</strong>)
                        <p>(IndexedDB, FileSystem capacity, quota exceeding WebDatabase)</p></td>
-                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/unlimitedstorage</span></td>
+                       <td><code>http://tizen.org/privilege/unlimitedstorage</code></td>
                </tr>
                <tr>
                        <td>FullScreen (in <strong>mobile applications only</strong>)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/fullscreen</span></td>
+                       <td><code>http://tizen.org/privilege/fullscreen</code></td>
                        <td>If defined, launch in fullscreen mode. If not defined, launch fullscreen mode according to user input (which depends on the content).</td>
                </tr>
                <tr>
                        <td>Audio Recording (in <strong>wearable applications only</strong>)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/audiorecorder</span></td>
+                       <td><code>http://tizen.org/privilege/audiorecorder</code></td>
                        <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise block execution.<p><strong>Remote domain</strong>: Block execution. </p>
 </td>
                </tr>
                <tr>
                        <td>Video Recording (in <strong>wearable applications only</strong>)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></td>     
+                       <td><code>http://tizen.org/privilege/camera</code></td> 
                </tr>
        </tbody>
   </table>
@@ -205,12 +196,12 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
    <h3 id="device" name="device">Tizen Device API Security Policy</h3>
   <p>Web Runtime also provides access to sensitive Device API features after consulting the platform-defined security policy. A Web application or an individual user cannot elevate the permissions set by the platform-defined security policy. The mapping between each Tizen Device API and the corresponding privilege is defined in the API definitions in the <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API Reference</a>.</p>
   <p>The following table summarizes distributor signature type to API privilege level behavior mapping:</p>
+  <p align="center" class="Table"><strong>Table: Distributor signature type to API privilege level behavior mapping</strong></p>
   <table border="1">
-       <caption>Table: Distributor signature type to API privilege level behavior mapping</caption>
        <tbody>
                <tr>
                        <th rowspan="2">API privilege level</th>
-                       <th colspan="3">Distributor signature type (<span style="font-family: Courier New,Courier,monospace;">signature1.xml</span>)</th>
+                       <th colspan="3">Distributor signature type (<code>signature1.xml</code>)</th>
                        <th rowspan="2">Untrusted</th>
                </tr>
                <tr>
@@ -221,61 +212,50 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
                <tr>
                        <th>Platform</th>
                        <td>Allowed</td>
-                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
-                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
-                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+                       <td>Security error for runtime use (direct API call without <code>config.xml</code> declaration)<p>Installation fail for <code>config.xml</code> use</p></td>
+                       <td>Security error for runtime use (direct API call without <code>config.xml</code> declaration)<p>Installation fail for <code>config.xml</code> use</p></td>
+                       <td>Security error for runtime use (direct API call without <code>config.xml</code> declaration)<p>Installation fail for <code>config.xml</code> use</p></td>
                </tr>
                <tr>
                        <th>Partner</th>
                        <td>Allowed</td>
                        <td>Allowed</td>
-                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
-                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+                       <td>Security error for runtime use (direct API call without <code>config.xml</code> declaration)<p>Installation fail for <code>config.xml</code> use</p></td>
+                       <td>Security error for runtime use (direct API call without <code>config.xml</code> declaration)<p>Installation fail for <code>config.xml</code> use</p></td>
                </tr>
                <tr>
                        <th>Public</th>
                        <td>Allowed</td>
                        <td>Allowed</td>
                        <td>Allowed</td>
-                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+                       <td>Security error for runtime use (direct API call without <code>config.xml</code> declaration)<p>Installation fail for <code>config.xml</code> use</p></td>
                </tr>
        </tbody>
   </table>
   <h3 id="content_sec" name="content_sec">Content Security Policy</h3>
     <p>The Web applications can mitigate various kinds of content injection vulnerabilities, such as cross-site scripting (XSS). The content security policy (CSP) is a declarative policy that lets the author or server administrator of a Web application inform the client from where the application expects to load resources. To mitigate XSS, for example, a Web application can declare from where it expects to load scripts, allowing the client to detect and block malicious scripts injected into the application by an attacker.</p>
-  <p>Web application configuration can include 1 or more <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy-report-only&gt;</span>, or <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:allow-navigation&gt;</span> element. If these are included, the Web application is set to the <strong>CSP-based security mode</strong>.</p>
+  <p>Web application configuration can include 1 or more <code>&lt;tizen:content-security-policy&gt;</code>, <code>&lt;tizen:content-security-policy-report-only&gt;</code>, or <code>&lt;tizen:allow-navigation&gt;</code> element. If these are included, the Web application is set to the <strong>CSP-based security mode</strong>.</p>
 
 <p>In the CSP-based security mode, the Web Runtime provides content security as per <strong>Content Security Policy 1.0</strong>. CSP policies can be delivered from the following sources:</p>
   <ul>
-       <li>Default policy (enforced by WRT, if required): <span style="font-family: Courier New,Courier,monospace;">default-src *; script-src &#39;self&#39;; style-src &#39;self&#39;; object-src &#39;none&#39;;</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">config.xml</span>: <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy&gt;</span> or <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy-report-only&gt;</span>
-       <p>If the CSP is defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file, the configuration-based CSP policy is enforced and the default CSP is ignored.</p>
-       <p>If the CSP policy is not defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file, the default CSP policy is enforced.</p></li>
-       <li>HTTP header: <span style="font-family: Courier New,Courier,monospace;">Content-Security-Policy</span> or <span style="font-family: Courier New,Courier,monospace;">Content-Security-Policy-Report-Only</span>
+       <li>Default policy (enforced by WRT, if required): <code>default-src *; script-src &#39;self&#39;; style-src &#39;self&#39;; object-src &#39;none&#39;;</code></li>
+       <li><code>config.xml</code>: <code>&lt;tizen:content-security-policy&gt;</code> or <code>&lt;tizen:content-security-policy-report-only&gt;</code>
+       <p>If the CSP is defined in the <code>config.xml</code> file, the configuration-based CSP policy is enforced and the default CSP is ignored.</p>
+       <p>If the CSP policy is not defined in the <code>config.xml</code> file, the default CSP policy is enforced.</p></li>
+       <li>HTTP header: <code>Content-Security-Policy</code> or <code>Content-Security-Policy-Report-Only</code>
        <p>If a CSP is present in the HTTP header, the most restrictive policy in the configuration-based CSP and HTTP-based CSP is applied.</p></li>
   </ul>
-<p> Otherwise, the Web application is set to the <strong>WARP-based security mode</strong>. In this mode, the Web application network and content security is enforced by the legacy <span style="font-family: Courier New,Courier,monospace;">&lt;access&gt;</span> tag according to <a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/" target="_blank">Widget Access Request Policy</a>.</p>  
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The default CSP enforcement is subject to change in the future.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p> Otherwise, the Web application is set to the <strong>WARP-based security mode</strong>. In this mode, the Web application network and content security is enforced by the legacy <code>&lt;access&gt;</code> tag according to <a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/" target="_blank">Widget Access Request Policy</a>.</p>  
+  <div class="note">
+        <strong>Note</strong>
+        The default CSP enforcement is subject to change in the future.
+    </div>
   
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">If a Web application declares the <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:allow-navigation&gt;</span> element in its configuration document, the main resource navigation (through the <span style="font-family: Courier New,Courier,monospace;">window.open()</span> method or a hyperlink) to an external URL is allowed or restricted accordingly.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+     <div class="note">
+        <strong>Note</strong>
+        If a Web application declares the <code>&lt;tizen:allow-navigation&gt;</code> element in its configuration document, the main resource navigation (through the <code>window.open()</code> method or a hyperlink) to an external URL is allowed or restricted accordingly.
+    </div>
 
                        
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index d1ddf39..5fed535 100644 (file)
@@ -47,7 +47,7 @@
 
 <p>A mobile Web application is basically a Web site stored on a mobile device. You can create it using Web-native languages, such as HTML5, CSS, and JavaScript.</p>
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic mobile Web application, which displays some text on the screen and changes the text when the user clicks it:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic mobile Web application, which displays some text on the screen and changes the text when the user clicks it:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
@@ -76,7 +76,7 @@
 <li><p>On the right, the figure shows the application screen after you tap the text. The screen now displays the <strong>Tizen</strong> text. Tapping the text area switches between the 2 texts.</p></li>
 </ul>
 
-<p class="figure">Figure: Mobile Web Basic application</p>
+<p align="center"><strong>Figure: Mobile Web Basic application</strong></p>
 <p align="center"><img alt="Mobile Web Basic application" src="../../images/basic_app_running_1_mw.png" /> <img alt="Mobile Web Basic application" src="../../images/basic_app_running_2_mw.png" /></p>
 
 <p>To create the application project:</p>
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">css</span>: Folder for CSS files used by the application to style its content</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">js</span>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file used by the  platform to install and launch the application</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Application icon file used by the platform to represent the application</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">index.html</span>: Main HTML file for the layout of the application screen</p></li>
+<li><p><code>css</code>: Folder for CSS files used by the application to style its content</p></li>
+<li><p><code>js</code>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
+<li><p><code>config.xml</code>: Application configuration file used by the  platform to install and launch the application</p></li>
+<li><p><code>icon.png</code>: Application icon file used by the platform to represent the application</p></li>
+<li><p><code>index.html</code>: Main HTML file for the layout of the application screen</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_mw.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+
+   <div class="note">
+        <strong>Note</strong>
+        You can <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.
+    </div>
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>config.xml</code> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
 </li>
 
 <li>
 <li><p><strong>Preferences</strong>: Define name-value pairs that can be set or retrieved through the application.</p></li>
 <li><p><strong>Tizen</strong>: Edit the Tizen schema extension properties of the application.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>config.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+   <div class="note">
+        <strong>Note</strong>
+        The <code>config.xml</code> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
 </li>
 </ul>
 </li>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
 
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_mw.png" /></p>
 
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_mw.png" alt="Application running in the emulator" /></p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the emulator display has switched off, you cannot see the application launch. To see the application on the emulator screen:
+  
+     <div class="note">
+        <strong>Note</strong>
+        If the emulator display has switched off, you cannot see the application launch. To see the application on the emulator screen:
         <ol type="a">
-        <li>To switch the display on, in the key window next to the emulator screen, click <strong>Power</strong>.</li>
+        <li>To switch the display on, in the key window next to the emulator screen, click <code>Power</code>.</li>
         <li>On the home screen, swipe left.</li>
-        </ol></td>
-    </tr>
-   </tbody>
-  </table>
+        </ol>
+    </div>
 
 <p>While the application is running, the <strong>Log</strong> view in the Tizen Studio shows the log, debug, and exception messages from the methods defined in the log macros. To see the view, in the Tizen Studio menu, go to <strong>Window &gt; Show View &gt; Log</strong>.</p>
 </li>
 <li>Confirm that the application launches in the target device.</li>
 </ol>
 
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+     <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_w.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+        </ol>
+    </div>
  
   
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
 <h4 id="html" name="html">HTML</h4> 
 
 <p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> elements as child nodes:</p>
+<p>The <code>&lt;html&gt;</code> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> elements as child nodes:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;/html&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, and JavaScript:</p>
+<p>The <code>&lt;head&gt;</code> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, and JavaScript:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;title&gt;</span>: Defines the title of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;meta&gt;</span>: Defines information, such as encoding, creator, and keywords of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span>: Sets the styles of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;noscript&gt;</span>: Adds functions to the document.</li>
+<li><code>&lt;title&gt;</code>: Defines the title of the document.</li>
+<li><code>&lt;meta&gt;</code>: Defines information, such as encoding, creator, and keywords of the document.</li>
+<li><code>&lt;style&gt;</code>, <code>&lt;link&gt;</code>: Sets the styles of the document.</li>
+<li><code>&lt;script&gt;</code>, <code>&lt;noscript&gt;</code>: Adds functions to the document.</li>
 </ul>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;/html&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element defines the area displaying content on the browser screen:</p>
+<p>The <code>&lt;body&gt;</code> element defines the area displaying content on the browser screen:</p>
 
 <pre class="prettyprint">
 &lt;body&gt;
 
 <p>The HTML code displays the <strong>Basic</strong> text on the screen.</p>
 
-<p class="figure">Figure: Screen with Basic text</p> 
+<p align="center"><strong>Figure: Screen with Basic text</strong></p> 
 <p align="center"><img src="../../images/basic_app_running_1_mw.png" alt="Screen with Basic text" /></p>
 
 <h4 id="css" name="css">CSS</h4>
 <p>CSS (Cascading Style Sheets) specifies the layout and styling of the Web application.</p>
 <p>There are various ways to connect CSS with HTML:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">style</span> attribute in an HTML element</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element</li>
+<li><code>style</code> attribute in an HTML element</li>
+<li><code>&lt;link&gt;</code> element in the <code>&lt;head&gt;</code> element</li>
+<li><code>@import</code> attribute in the CSS area</li>
+<li><code>&lt;style&gt;</code> element in the <code>&lt;head&gt;</code> element</li>
 </ul>
-<p>Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element.</p>
+<p>Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <code>&lt;link&gt;</code> element in the <code>&lt;head&gt;</code> element.</p>
 
 <p>The following code shows how to link to a CSS file:</p>
 
 &lt;/html&gt;
 </pre>
 
-<p>The following lines in the CSS code describe the styling of the text in an element with the <span style="font-family: Courier New,Courier,monospace">content-text</span> class name:</p>
+<p>The following lines in the CSS code describe the styling of the text in an element with the <code>content-text</code> class name:</p>
 
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">css/style.css</span>:
+<li><code>css/style.css</code>:
 <pre class="prettyprint">
 html,
 body
@@ -522,7 +500,7 @@ body
 }
 </pre>
 </li>
-<li><span style="font-family: Courier New,Courier,monospace">index.html</span>:
+<li><code>index.html</code>:
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot; class=&quot;page&quot;&gt;
@@ -534,7 +512,7 @@ body
 </pre>
 </li>
 </ul>
-<p>By default, the text uses the <span style="font-family: Courier New,Courier,monospace">#ffffff</span> color (white), defined for the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element. If you change the CSS code and add a separate color for the <span style="font-family: Courier New,Courier,monospace">content-text</span> class, the text color changes (in this case, to <span style="font-family: Courier New,Courier,monospace">#ff0000</span> red):</p>
+<p>By default, the text uses the <code>#ffffff</code> color (white), defined for the <code>&lt;body&gt;</code> element. If you change the CSS code and add a separate color for the <code>content-text</code> class, the text color changes (in this case, to <code>#ff0000</code> red):</p>
 
 <pre class="prettyprint">
 #content-text
@@ -545,7 +523,7 @@ body
 }
 </pre>
 
-<p class="figure">Figure: Screen with a new text color</p> 
+<p align="center"><strong>Figure: Screen with a new text color</strong></p> 
 <p align="center"><img src="../../images/build_ui_basic_textbox_mw.png" alt="Screen with a new text color" /></p>
 
 <h3 id="tau" name="tau">TAU (Tizen Advanced UI)</h3>
@@ -553,7 +531,7 @@ body
 <p>TAU is a Web UI library that enables you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button, checkbox, or listview. You can manipulate and interact with the application screens through the UI components.</p>
 <p>TAU helps you to create Tizen Web Applications easily. The following figure shows the role of TAU and its relation with the Web application.</p>
 
-<p class="figure">Figure: TAU and the Web application</p>
+<p align="center"><strong>Figure: TAU and the Web application</strong></p>
 <p align="center"><img src="../../images/simple_ui_tau_relation_mw.png" alt="TAU and the Web application" /></p>
 
 <p>To create a Web application and design its UI with TAU:</p>
@@ -583,19 +561,19 @@ body
 &lt;/html&gt;
 </pre>
 
-<p>In HTML, use the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications:</p>
+<p>In HTML, use the <code>&lt;script&gt;</code> and <code>&lt;link&gt;</code> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications:</p>
 <ul>
-<li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span>
+<li>TAU library: <code>tau(.min).js</code>
 <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p>
 </li>
-<li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span>
+<li>TAU theme: <code>tau(.min).css</code>
 <p>This element is also mandatory, as it imports the TAU theme.</p>
 </li>
 </ul>
 
-<p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets. However, place them after the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
-<p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element in the HTML <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
-<p>The following example shows a basic TAU template. Overwrite the <span style="font-family: Courier New,Courier,monospace">index.html</span> file content with the following code:</p>
+<p>You can add an additional <code>&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</code> or <code>&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</code> element to include your own scripts and style sheets. However, place them after the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>To load your JavaScript file, include the file in the <code>&lt;script&gt;</code> element in the HTML <code>&lt;body&gt;</code> element. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
+<p>The following example shows a basic TAU template. Overwrite the <code>index.html</code> file content with the following code:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -623,7 +601,7 @@ body
 <p align="center"><img src="../../images/simple_ui_tau_properties_mw.png" alt="Changing properties" /></p></li>
 
 <li>In the <strong>Project Explorer</strong> view, view the project.
-<p>The TAU library is located in the <span style="font-family: Courier New,Courier,monospace">lib</span> folder.</p>
+<p>The TAU library is located in the <code>lib</code> folder.</p>
 <p align="center"><img src="../../images/simple_ui_tau_dir_mw.png" alt="TAU library directory" /></p>
 </li>
 </ol>
@@ -632,8 +610,8 @@ body
 
 <li>Create a simple page.
 <ol type="a">
-<li><p>Open the <span style="font-family: Courier New,Courier,monospace">index.html</span> file. The body element of the HTML file contains 1 or more pages.</p></li>
-<li><p>To create a page in the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element, use the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class with the <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element:</p>
+<li><p>Open the <code>index.html</code> file. The body element of the HTML file contains 1 or more pages.</p></li>
+<li><p>To create a page in the <code>&lt;body&gt;</code> element, use the <code>ui-page</code> class with the <code>&lt;div&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -643,7 +621,7 @@ body
 &lt;/body&gt;
 </pre></li>
 <li>
-<p>To layout the page, add a content area with the <span style="font-family: Courier New,Courier,monospace">ui-content</span> class, a header with the <span style="font-family: Courier New,Courier,monospace">ui-header</span> class, and a footer with the <span style="font-family: Courier New,Courier,monospace">ui-footer</span> class:</p>
+<p>To layout the page, add a content area with the <code>ui-content</code> class, a header with the <code>ui-header</code> class, and a footer with the <code>ui-footer</code> class:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -664,7 +642,7 @@ body
 
 <p align="center"><img src="../../images/simple_ui_hello_tau_mw.png" alt="Hello TAU" /></p></li>
 <li>
-<p>You can add your own style in the content and footer area with a defined <span style="font-family: Courier New,Courier,monospace">id</span> attribute:</p>
+<p>You can add your own style in the content and footer area with a defined <code>id</code> attribute:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -682,7 +660,7 @@ body
 &lt;/body&gt;
 </pre>
 
-<p>In the <span style="font-family: Courier New,Courier,monospace">style.css</span> file, add the CSS styles for the new <span style="font-family: Courier New,Courier,monospace">id</span> attributes:
+<p>In the <code>style.css</code> file, add the CSS styles for the new <code>id</code> attributes:
 </p>
 <pre class="prettyprint">
 #contentArea
@@ -702,10 +680,10 @@ body
 </li>
 
 <li>Add a list.
-<p>You can add a list with the TAU ListView component using the <span style="font-family: Courier New,Courier,monospace">&lt;ul&gt;</span> element and the <span style="font-family: Courier New,Courier,monospace">ui-listview</span> class:</p>
+<p>You can add a list with the TAU ListView component using the <code>&lt;ul&gt;</code> element and the <code>ui-listview</code> class:</p>
 <ul>
 <li>
-<p>Create a simple and basic static list. Overwrite the <span style="font-family: Courier New,Courier,monospace">index.html</span> file content with the following code:</p>
+<p>Create a simple and basic static list. Overwrite the <code>index.html</code> file content with the following code:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -727,7 +705,7 @@ body
 <p align="center"><img src="../../images/simple_ui_tau_list_mw.png" alt="TAU list" /></p>
 </li>
 <li>
-<p>For a more advanced option, you can also create an anchor listview (whose items can be clicked to navigate to other pages or show a popup). Overwrite the <span style="font-family: Courier New,Courier,monospace">&lt;ul class=&quot;ui-listview&quot;&gt;</span> element content with the following code:</p>
+<p>For a more advanced option, you can also create an anchor listview (whose items can be clicked to navigate to other pages or show a popup). Overwrite the <code>&lt;ul class=&quot;ui-listview&quot;&gt;</code> element content with the following code:</p>
 
 <pre class="prettyprint">
 &lt;body&gt;
@@ -753,8 +731,8 @@ body
 </li>
 
 <li>Add a button in the footer.
-<p>When implementing Tizen mobile Web applications, you can use the <span style="font-family: Courier New,Courier,monospace">ui-footer</span> class as a footer area. Organize the footer area with 1 or 2 buttons.</p>
-<p>Defining a button is very simple. Add the <span style="font-family: Courier New,Courier,monospace">&lt;div class=&quot;ui-footer&quot;&gt;...&lt;/div&gt;</span> element after the <span style="font-family: Courier New,Courier,monospace">&lt;div class=&quot;ui-content&quot;&gt;...&lt;/div&gt;</span> element:</p>
+<p>When implementing Tizen mobile Web applications, you can use the <code>ui-footer</code> class as a footer area. Organize the footer area with 1 or 2 buttons.</p>
+<p>Defining a button is very simple. Add the <code>&lt;div class=&quot;ui-footer&quot;&gt;...&lt;/div&gt;</code> element after the <code>&lt;div class=&quot;ui-content&quot;&gt;...&lt;/div&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -782,7 +760,7 @@ body
 <p>The previous steps showed you how to import TAU, create a page, add a list, and add a footer button. In this step, you learn to create another page and make a link between 2 pages.</p>
 <ol type="a">
 <li>
-<p>In the Tizen Studio, you can create a new HTML file and rename it. Create a <span style="font-family: Courier New,Courier,monospace">second.html</span> file with the following content:</p>
+<p>In the Tizen Studio, you can create a new HTML file and rename it. Create a <code>second.html</code> file with the following content:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -804,7 +782,7 @@ body
 </pre>
 </li>
 <li>
-<p> Decorate the page in the same way as <span style="font-family: Courier New,Courier,monospace">index.html</span>. In the <span style="font-family: Courier New,Courier,monospace">style.css</span> file, add the following CSS style:</p>
+<p> Decorate the page in the same way as <code>index.html</code>. In the <code>style.css</code> file, add the following CSS style:</p>
 
 <pre class="prettyprint">
 #secondPage
@@ -814,8 +792,8 @@ body
 </pre>
 </li>
 <li>
-<p>Create navigation between the <span style="font-family: Courier New,Courier,monospace">index.html</span> and <span style="font-family: Courier New,Courier,monospace">second.html</span> pages.</p>
-<p>Go back to the <span style="font-family: Courier New,Courier,monospace">index.html</span> file and add a file path in the listview <span style="font-family: Courier New,Courier,monospace">&lt;li&gt;&lt;a href&gt;</span> element:</p>
+<p>Create navigation between the <code>index.html</code> and <code>second.html</code> pages.</p>
+<p>Go back to the <code>index.html</code> file and add a file path in the listview <code>&lt;li&gt;&lt;a href&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;ul class=&quot;ui-listview&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;second.html&quot;&gt;Go to Second Page&lt;/a&gt;&lt;/li&gt;
@@ -825,7 +803,7 @@ body
 &lt;/ul&gt;
 </pre></li>
 <li>
-<p>Run the code, and see how you can move from the <span style="font-family: Courier New,Courier,monospace">index.html</span> page to the <span style="font-family: Courier New,Courier,monospace">second.html</span> page.</p>
+<p>Run the code, and see how you can move from the <code>index.html</code> page to the <code>second.html</code> page.</p>
 
 <p align="center"><img src="../../images/simple_ui_tau_move_mw.png" alt="Move to second page" /></p>
 </li></ol>
@@ -833,12 +811,12 @@ body
 </li>
 
 <li>Go back with the back key.
-<p>You can navigate from page to page with the <span style="font-family: Courier New,Courier,monospace">&lt;a href=&quot;PAGE_FILE_NAME&quot;&gt;</span> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
-<p>Create a new <span style="font-family: Courier New,Courier,monospace">app.js</span> JavaScript file:</p>
+<p>You can navigate from page to page with the <code>&lt;a href=&quot;PAGE_FILE_NAME&quot;&gt;</code> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
+<p>Create a new <code>app.js</code> JavaScript file:</p>
 
 <ol type="a">
 <li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">index.html</span> file, add the <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;</span> line before closing the <span style="font-family: Courier New,Courier,monospace">&lt;/body&gt;</span> element:</p>
+<p>In the <code>index.html</code> file, add the <code>&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;</code> line before closing the <code>&lt;/body&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -851,7 +829,7 @@ body
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
 &nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
 &nbsp;&nbsp;&nbsp;&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
 &lt;/body&gt;  
@@ -861,7 +839,7 @@ body
 <p align="center"><img src="../../images/simple_ui_tau_new_js_mw.png" alt="Create a new JavaScript file" /></p></li>
 <li>Write the file name as <strong>app.js</strong> and click <strong>Finish</strong>.</li>
 <li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">app.js</span> file, all kinds of logic can be added to the application. In this case, add several lines for handling navigation:</p>
+<p>In the <code>app.js</code> file, all kinds of logic can be added to the application. In this case, add several lines for handling navigation:</p>
 
 <pre class="prettyprint">
 (function() 
@@ -884,9 +862,9 @@ body
 </li>
 
 <li>Exit the application.
-<p>You can make your application exit by adding more lines to the <span style="font-family: Courier New,Courier,monospace">app.js</span> file.</p>
+<p>You can make your application exit by adding more lines to the <code>app.js</code> file.</p>
 <p>You have to consider the fact that when the user clicks the back key, the application can only exit if it is showing the main page. If the second page is showing, the application must return to the main page.</p>
-<p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <span style="font-family: Courier New,Courier,monospace">main.js</span> file by default.</p>
+<p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <code>main.js</code> file by default.</p>
 <pre class="prettyprint">
 (function() 
 {
index b4d4781..6162b26 100644 (file)
   <li>Compile for:
         <ul><li>Coffeescript</li>
                <li>Less</li></ul></li></ol>
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">About the output files: 
+  
+     <div class="note">
+        <strong>Note</strong>
+        About the output files: 
       <ul> 
-       <li>Compiled coffeescript output file name is <span style="font-family: Courier New,Courier,monospace">&lt;file name&gt;.js</span>. This file is used when the project is packed to the WGT package file, but the script tag&#39;s reference path must be changed manually.</li> 
-       <li>Compiled less output file name is <span style="font-family: Courier New,Courier,monospace">&lt;file name&gt;.css</span>. This file is used when the project is packed to the WGT package file, but the script tag&#39;s reference path must be changed manually.</li> 
-      </ul></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+       <li>Compiled coffeescript output file name is <code>&lt;file name&gt;.js</code>. This file is used when the project is packed to the WGT package file, but the script tag&#39;s reference path must be changed manually.</li> 
+       <li>Compiled less output file name is <code>&lt;file name&gt;.css</code>. This file is used when the project is packed to the WGT package file, but the script tag&#39;s reference path must be changed manually.</li> 
+      </ul>
+    </div>
+       
   <p>If the project has errors, they are shown in the <strong>Problems</strong> and <strong>Project Explorer</strong> views after the build.</p>
 
   <p>You can build a Web application automatically or manually:</p> 
    <li>Automatic build: <p>In the Tizen Studio menu, select <strong>Project &gt; Build Automatically</strong>.</p> <p>If you select this option, whenever the source or a resource is changed and saved, the Tizen Studio automatically recognizes any saved changes and rebuilds the project source.</p> </li> 
    <li>Manual build: <p>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>.</p> <p>You can build your project at your convenience. If you want to use the manual build, ensure that the <strong>Project &gt; Build Automatically</strong> option is not selected.</p> </li> 
   </ul> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">In the manual build mode: 
+
+      <div class="note">
+        <strong>Note</strong>
+        In the manual build mode: 
       <ul> 
        <li>Ensure that you have the latest build output before you run or debug a project.</li> 
-       <li>To remove a project build output, select <strong>Project &gt; Clean</strong> in the Tizen Studio menu.</li> 
-      </ul></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+       <li>To remove a project build output, select <code>Project &gt; Clean</code> in the Tizen Studio menu.</li> 
+      </ul>
+    </div>
+  
 
   <p>To customize the application, set the build properties:</p> 
        <ul><li>JS validation
   <ol><li>Build automatically if no build has been created yet.</li>
   <li>Package.
 <p>The optimization process is only executed when you execute the packaging process.</p></li>
-  <li>Execute the application to the Emulator or target device.</li></ol>
+  <li>Execute the application to the emulator or target device.</li></ol>
 
   <p>You can run your application in one of the following environments:</p> 
   <ul>  
-   <li><a href="run_debug_app_w.htm#emulator">Emulator</a> <p>The device Emulator, provided with the Tizen Studio, imitates the target environment running Tizen Web applications. Using this replicated environment, you can test your application before deploying it to the real target device.</p></li> 
-   <li><a href="run_debug_app_w.htm#target">Target Device</a> <p>Running your application on a target device allows you to debug and test your application in a real-time environment.</p></li>
+   <li><a href="run_debug_app_w.htm#emulator">Emulator</a> <p>The device emulator, provided with the Tizen Studio, imitates the target environment running Tizen Web applications. Using this replicated environment, you can test your application before deploying it to the real target device.</p></li> 
+   <li><a href="run_debug_app_w.htm#target">Target device</a> <p>Running your application on a target device allows you to debug and test your application in a real-time environment.</p></li>
    <li><a href="run_debug_app_w.htm#simulator">Simulator</a> <p>The Tizen Web simulator allows you to run application that use the Tizen Web APIs.</p></li>  
   </ul> 
 
   <li>Make up resources (for hybrid core, font, and UI framework applications).</li>
   <li>Handle signing.</li></ol>
   <p>Web application packaging process is based on the W3C packaging and configuration.</p>
-  <p>You can package a Web application using the <span style="font-family: Courier New,Courier,monospace">web-packaging</span> command in the <a href="../../../../org.tizen.studio/html/common_tools/command_line_interface.htm">Command Line Interface (CLI)</a>, which is a functional tool in the Tizen Studio:</p>
+  <p>You can package a Web application using the <code>web-packaging</code> command in the <a href="../../../../org.tizen.studio/html/common_tools/command_line_interface.htm">Command Line Interface (CLI)</a>, which is a functional tool in the Tizen Studio:</p>
   <pre class="prettyprint">web-packaging project.wgt project/</pre>
 
   <p>The Tizen Studio provides the functionality to package a Web application quickly in the required format and to set the package properties.</p>
   <p>You can minify your JavaScript, CSS, HTML, and PNG resources and put in an exclude file pattern that you do not want to optimize.</p></li>
   <li><strong>Set hybrid application&#39;s main service application</strong></li></ul>
 
-  <p>By default, the Web application package is created once. You can view the package content at any point of the application development process by double-clicking the project <span style="font-family: Courier New,Courier,monospace">.wgt</span> file in the <strong>Project Explorer</strong> view. All the files present in the application project are displayed in a list.</p> 
+  <p>By default, the Web application package is created once. You can view the package content at any point of the application development process by double-clicking the project <code>.wgt</code> file in the <strong>Project Explorer</strong> view. All the files present in the application project are displayed in a list.</p> 
 
   <p>Any changes made to the files in the package content list, such as deleting files or dragging and dropping files, are not reflected in the actual project files.</p> 
-  <p class="figure">Figure: Viewing the Web application package</p> 
+  <p align="center"><strong>Figure: Viewing the Web application package</strong></p> 
  <p align="center"><img alt="Viewing the Web application package" src="../../images/view_package_mw.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
   
   
    <p>To modify the build configuration of the service application, see <a href="../../native/process/app_dev_process_n.htm#build">Building the Application</a>.</p></li>
    </ol>
 
-<table class="note">
-    <tbody>
-     <tr>
-      <th class="note">Note</th>
-     </tr>
-     <tr>
-      <td class="note">Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
-      </td>
-     </tr>
-    </tbody>
-   </table>   
+
+       <div class="note">
+        <strong>Note</strong>
+        Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
+    </div>
    
 <p>The following table shows the possible combinations for a hybrid multi-project. <strong>M</strong> means that multiple applications can be packaged as sub applications.</p>
 
+<p align="center" class="Table"><strong>Table: Combinations</strong></p>
 <table>
-<caption>Table: Combinations</caption>
 <tbody>
 <tr>
 <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th> 
   <p>To certify and publish your application:</p> 
   <ul>
        <li>Upload your mobile Web application to the Tizen Store or your wearable Web application to the Samsung Galaxy Apps Store for registration.
-               <p>After the application is uploaded, the application is signed as a certified application installer package and the <span style="font-family: Courier New,Courier,monospace">&lt;Application_name&gt;.wgt</span> archive format, which contains the distributor signature, is added by the Tizen Store or Samsung Galaxy Apps Store.</p>
+               <p>After the application is uploaded, the application is signed as a certified application installer package and the <code>&lt;Application_name&gt;.wgt</code> archive format, which contains the distributor signature, is added by the Tizen Store or Samsung Galaxy Apps Store.</p>
        </li>
        <li>Submit your application to the Tizen Store or Samsung Galaxy Apps Store for validation and selling.
                <p>The Tizen Store or Samsung Galaxy Apps Store checks whether your application functions properly before publishing it.</p>
 <p>You can upgrade your application even after you have certified and made it available for sale at the Tizen Store or Samsung Galaxy Apps Store.</p> 
   <p>To upgrade your application:</p> 
   <ol>
-       <li>Update your application version, and if needed the privileges, in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file in the Tizen Studio.</li>
+       <li>Update your application version, and if needed the privileges, in the <code>config.xml</code> configuration file in the Tizen Studio.</li>
        <li>Update the application code as needed.</li>
-       <li>If needed, update the privileges in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file in the Tizen Studio.</li>
+       <li>If needed, update the privileges in the <code>config.xml</code> configuration file in the Tizen Studio.</li>
        <li>Build, test, and repackage the application.</li>
        <li>Register the upgraded application on the Tizen Store or Samsung Galaxy Apps Store.</li>
   </ol>
   <p>Once your application has reached the end of its life-cycle, you can remove it from the Tizen Store or Samsung Galaxy Apps Store.</p> 
 
   <p>The following figure illustrates the process of developing a Tizen Web application.</p> 
-  <p class="figure">Figure: Web application development process</p> 
+  <p align="center"><strong>Figure: Web application development process</strong></p> 
   <p align="center"><img alt="Web application development process" src="../../images/app_dev_process_mw.png" /></p> 
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index e16e2cb..aa78e3b 100644 (file)
  
   <h2 name="hover" id="hover">Using Hover Help</h2> 
    <p>The Tizen Studio supports hover help for Web API and W3C Widget APIs. The hover help provides input from the <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">API Reference</a>.</p> 
-  <p class="figure">Figure: Hover help</p> 
+  <p align="center"><strong>Figure: Hover help</strong></p> 
   <p align="center"><img alt="Hover help" src="../../images/hover_help.png" /></p> 
    <h2 name="add" id="add">Adding External Source Code or Library</h2>  
-   <p>External source files are located in the project directory, and its <span style="font-family: Courier New,Courier,monospace">/js</span> and <span style="font-family: Courier New,Courier,monospace">/css</span> sub-directories. You can add a new folder or source file (such as CSS, HTML, JSON, XML, and JavaScript) to your existing project.</p> 
+   <p>External source files are located in the project directory, and its <code>/js</code> and <code>/css</code> sub-directories. You can add a new folder or source file (such as CSS, HTML, JSON, XML, and JavaScript) to your existing project.</p> 
   <p>You can add files in the following ways (as an example, the instructions illustrate the adding of a CSS file):</p> 
   <ul> 
    <li>Adding a new file: 
     </ol> </li> 
    <li>Adding an existing file: 
     <ol> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the <span style="font-family: Courier New,Courier,monospace">/css</span> sub-directory and select <strong>Import &gt; General &gt; File System</strong>.</li> 
+     <li>In the <strong>Project Explorer</strong> view, right-click the <code>/css</code> sub-directory and select <strong>Import &gt; General &gt; File System</strong>.</li> 
      <li>In the <strong>Import</strong> view, click <strong>Browse</strong> and select the import location.</li> 
      <li>Click <strong>Finish</strong>.</li> 
     </ol> </li> 
   </ul> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">You can also drag and drop external source files or libraries. If you drop a file to the <strong>Project Explorer</strong> view, the <strong>File Operation</strong> dialog appears, and allows you to either copy the file or create a link to it.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+
+      <div class="note">
+        <strong>Note</strong>
+        You can also drag and drop external source files or libraries. If you drop a file to the <strong>Project Explorer</strong> view, the <strong>File Operation</strong> dialog appears, and allows you to either copy the file or create a link to it.
+    </div>
   
   
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index 29bb81a..152cab1 100644 (file)
 </li>
 <li><p>Define the project properties and click <strong>Finish</strong>.</p>
 <p>You can fill the project name. You can also select the location and working sets by clicking <strong>More properties</strong>.</p>
-      <table class="note"> 
-       <tbody> 
-        <tr> 
-         <th class="note">Note</th> 
-        </tr> 
-        <tr> 
-         <td class="note">The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.</td> 
-        </tr> 
-       </tbody> 
-      </table>
+         
+             <div class="note">
+        <strong>Note</strong>
+               The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.
+    </div>
 <p align="center"><img alt="Defining properties" src="../../images/create_project_wizard_properties_ww.png" /></p>
 
 <p>The Project Wizard sets up the project, creates the application files using the default content from the template, and closes. For more information about the Project Wizard and the available templates, see <a href="../../../../org.tizen.studio/html/web_tools/project_wizard_w.htm">Creating Tizen Projects with Tizen Project Wizard</a>.</p></li>
   </ol> </li></ol>
-  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders.</p> 
+  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <code>config.xml</code> file as well as in several project folders.</p> 
  
   <h2 id="import" name="import">Importing a Project</h2> 
   <p>If you have an existing Tizen application project, you can import it into the Tizen Studio:</p> 
   <ol> 
    <li>Select <strong>File &gt; Import &gt; Tizen &gt; Tizen Project</strong>, and click <strong>Next</strong>.</li> 
-   <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or Web application package file (with the <span style="font-family: Courier New,Courier,monospace">.wgt</span> extension).</li> 
+   <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or Web application package file (with the <code>.wgt</code> extension).</li> 
    <li>With the <strong>Platform</strong> drop-down lists, select the platform profile and version.</li>
    <li>Click <strong>Finish</strong>.</li> 
   </ol>
index 0f14573..1b99e0f 100644 (file)
   </ul> 
   <p>To stop the emulator, right-click the emulator and click <strong>Close</strong>.</p>
   
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Running an emulator instance requires a minimum free disk space of 20 MB. The emulator image can occupy up to 10 GB of disk space.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+  
+      <div class="note">
+        <strong>Note</strong>
+        Running an emulator instance requires a minimum free disk space of 20 MB. The emulator image can occupy up to 10 GB of disk space.
+    </div>
   
    <h2 name="target" id="target">Running Web Applications on a Target Device</h2> 
   <p>You can run Tizen Web applications on a target device using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
   
     <h2 name="simulator" id="simulator">Running Mobile Web Applications on the Simulator</h2> 
   <p>You can run Tizen Web applications on the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm">Web Simulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Tizen Web Simulator runs only on the Google Chrome&trade; browser. To use the Web Simulator, download and install <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>. You can manually specify the installation location of the browser in the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+
+      <div class="note">
+        <strong>Note</strong>
+        The Tizen Web Simulator runs only on the Google Chrome&trade; browser. To use the Web Simulator, download and install <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>. You can manually specify the installation location of the browser in the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.
+    </div>
+  
   <p>If you are running your Web application on the Web Simulator for the first time, create a running configuration by selecting <strong>Run &gt; Run Configurations &gt; Tizen Web Simulator Application</strong> in the Tizen Studio menu. The running configuration contains the application launch settings.</p> 
   <p>To run your application on the Simulator, do one of the following:</p> 
   <ul> 
    <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Web Simulator Application</strong>.</li> 
    <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li> 
   </ul> 
-  <p>When the application is launched, the Web Simulator loads the file specified in the <strong>Content</strong> field of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. The mostly commonly specified file is <span style="font-family: Courier New,Courier,monospace">index.html</span>.</p> 
+  <p>When the application is launched, the Web Simulator loads the file specified in the <strong>Content</strong> field of the <code>config.xml</code> file. The mostly commonly specified file is <code>index.html</code>.</p> 
   
   <p>The simulator renders your application on the browser using the <a href="http://www.webkit.org/" target="_blank">WebKit</a> engine. All the Google Chrome&trade; browser development features are available (by pressing the <strong>F12</strong> keyboard key) in the simulator, as is the <a href="../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool. You can leverage the advantages of the Web Simulator tool by setting the device screen size and orientation, and by sending events and messages, such as geolocation data and sensor input events, to your application for debugging it.</p> 
   
    <li>Start the debugging by clicking <strong>Debug</strong>.
    <p>If no changes are required in the debug configuration, you can also debug the application on the target device by doing one of the following:</p> 
    <ul> 
-    <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Web application</strong>.</li> 
-    <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug As &gt; Tizen Web application</strong>.</li> 
+    <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Web Application</strong>.</li> 
+    <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug As &gt; Tizen Web Application</strong>.</li> 
     <li>On the Tizen Studio toolbar, click <strong>Debug</strong>.</li> 
    </ul> 
    <p>The Web Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Web Inspector:</p> 
     <li>Inspect resources</li> 
     <li>Debug JavaScript code</li> 
    </ul> 
-   <table class="note"> 
-    <tbody> 
-     <tr> 
-      <th class="note">Note</th> 
-     </tr> 
-     <tr> 
-      <td class="note"> <p>The Web Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Web Inspector browser is not supported.</p> <p>Installing Google Chrome on the device is mandatory for the Web Inspector to work. When Google Chrome is installed on the device, the Tizen Studio automatically detects it. To select the browser path, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Chrome</strong>.</p> </td> 
-     </tr> 
-    </tbody> 
-   </table> 
+   
+       <div class="note">
+        <strong>Note</strong>
+        The Web Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Web Inspector browser is not supported. 
+               <p>Installing Google Chrome on the device is mandatory for the Web Inspector to work. When Google Chrome is installed on the device, the Tizen Studio automatically detects it. To select the browser path, go to <code>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Chrome</code>.</p>
+    </div>
+       
 </li>
    <li>To debug the JavaScript code, click <strong>Sources</strong> in the Web Inspector menu.
    <p>You must enable debugging before debugging JavaScript code.</p> </li> 
    <li>You can also set a break point in the code by right-clicking in the marker bar area on the left side of the editor, and selecting <strong>Toggle Breakpoint</strong>. 
    <p>Once the break points are set, you can watch variables, expressions, and the current call stack. You can also control the debugging by using the following control buttons.</p> 
-   <table> 
-    <caption>
-      Table: Control buttons for debugging between break points 
-    </caption> 
+    <p align="center" class="Table"><strong>Table: Control buttons for debugging between break points</strong></p> 
+       <table> 
     <tbody> 
      <tr> 
       <th>Button</th> 
   <ol> 
    <li>Search for the delta files (changed, added, and deleted files).</li> 
    <li>Transfer the delta files to the target.</li> 
-   <li>If the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file has been modified, execute directory installation.</li> 
+   <li>If the <code>config.xml</code> file has been modified, execute directory installation.</li> 
   </ol> 
   <p>The RDS option is enabled as default. To disable it, in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">RDS is not supported in multi-app projects.
-        <p>If you want to remove an application from your device, you must manually delete the installed application as the launch process does not have an uninstall process.</p> </td> 
-    </tr> 
-   </tbody> 
-  </table>
+
+  
+      <div class="note">
+        <strong>Note</strong>
+        RDS is not supported in multi-app projects.
+        <p>If you want to remove an application from your device, you must manually delete the installed application as the launch process does not have an uninstall process.</p>
+    </div>
+  
+  
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
index c194926..df3d23a 100644 (file)
   <p>Before you implement the actual application functionality, define all the necessary properties for your application project:</p>   
     <ul>
   <li>To set the application project properties for <a href="#set">build</a> and <a href="#set_json">JSON properties</a>, right-click the project in the Tizen Studio <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>OK</strong>.</li> 
-<li>To define the <a href="#set_widget">Web application configuration</a>, edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
+<li>To define the <a href="#set_widget">Web application configuration</a>, edit the <code>config.xml</code> file.
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Only modify the Web application configuration by using the configuration editor in the Tizen Studio. If you create or edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file using any other text editor, your application may not work as expected.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+      <div class="note">
+        <strong>Note</strong>
+        Only modify the Web application configuration by using the configuration editor in the Tizen Studio. If you create or edit the <code>config.xml</code> file using any other text editor, your application may not work as expected.
+    </div>
  </li></ul> 
   
   <p>After you have finished setting the project properties, you are ready to <a href="app_dev_process_w.htm#design">design the UI</a>.</p> 
@@ -73,8 +67,8 @@
   
   <h2 name="set_widget" id="set_widget">Setting the Web Application Configuration</h2> 
   
-       <p>The Web application configuration consists of application information, such as version, features, and privileges, which are available for the application. To configure the application information in the Web application configuration editor, double-click the application <span style="font-family: Courier New, Courier, monospace">config.xml</span> file in the <strong>Project Explorer</strong> view.</p>
-       <p class="figure">Figure: Setting the application configuration</p>
+       <p>The Web application configuration consists of application information, such as version, features, and privileges, which are available for the application. To configure the application information in the Web application configuration editor, double-click the application <code>config.xml</code> file in the <strong>Project Explorer</strong> view.</p>
+       <p align="center"><strong>Figure: Setting the application configuration</strong></p>
        <p align="center"><img alt="Setting the application configuration" src="../../images/tizen_project_explorer_w.png"/></p>
        <p>You can <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#edit">edit the application properties using the form tabs of the Web application configuration editor</a>.</p>
   
   <li>Add an application icon. 
   <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel.</p> 
   <p>The following table describes the available icon format and size.</p>
+        <p align="center" class="Table"><strong>Table: Icon format and size</strong></p>
         <table border="1"> 
-           <caption>
-     Table: Icon format and size 
-   </caption>
         <tbody>
                <tr> 
                <th>Format</th> 
     <ul> 
      <li><strong>Internal</strong>: Select the needed privileges from the <a href="../details/sec_privileges_w.htm">predefined list of API privileges</a>.</li> 
      <li><strong>Privilege name</strong>: Manually enter the URL containing a privilege definition.</li> 
-     <li><strong>File</strong>: Click <strong>Browse</strong> and select a privilege file (with the <span style="font-family: Courier New,Courier,monospace">.xml</span> or <span style="font-family: Courier New,Courier,monospace">.widlprocxml</span> extension).</li> 
+     <li><strong>File</strong>: Click <strong>Browse</strong> and select a privilege file (with the <code>.xml</code> or <code>.widlprocxml</code> extension).</li> 
     </ul> </li> 
    <li>Click <strong>Finish</strong>.</li> 
   </ol> 
 
     
   <p>The following table lists the policy properties you can edit in the <strong>Policy</strong> tab.</p> 
-  <table border="1"> 
-   <caption>
-     Table: Policy information 
-   </caption> 
-   <tbody> 
+   <p align="center" class="Table"><strong>Table: Policy information</strong></p> 
+     <table border="1"> 
+       <tbody> 
     <tr> 
      <th>Property</th> 
      <th>Description</th> 
   
 <p>To add a localized name, description, or license:</p> 
 <ul><li>In the <strong>Name</strong> panel, click <strong>+</strong>. Select the language, define the application name for that language, and click <strong>OK</strong>.
-<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>The following example shows the setting in the <code>config.xml</code> file:</p>
   <pre class="prettyprint">
 &lt;name xml:lang=&quot;en-gb&quot;&gt;Lee&lt;/name&gt;
 </pre></li>
 <li>In the <strong>Description</strong> panel, click <strong>+</strong>. Select the language, define the application description for that language, and click <strong>OK</strong>.
-<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>The following example shows the setting in the <code>config.xml</code> file:</p>
   <pre class="prettyprint">
 &lt;description xml:lang=&quot;en-gb&quot;&gt;Widget&lt;/description&gt;
 </pre></li>
 <li>In the <strong>License</strong> panel, click <strong>+</strong>. Select a language, define the license and license URI for that language, and click <strong>OK</strong>.
-  <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> 
+  <p>The following example shows the setting in the <code>config.xml</code> file code:</p> 
   <pre class="prettyprint">
 &lt;license xml:lang=&quot;en-gb&quot; href=&quot; http://www.apache.org/licenses/LICENSE-2.0.html&quot;&gt;
 &nbsp;&nbsp;&nbsp;Apache License, Version 2.0
   <p> The <strong>Tizen</strong> tab of the Web application configuration editor shows the Tizen schema extension. Some of the attributes specified on this tab are mandatory and must be defined, whereas others are optional.</p> 
 
   <p>The following table describes the schema extension properties that you can edit.</p> 
-  <table border="1"> 
-   <caption>
-     Table: Tizen-specific information 
-   </caption> 
+   <p align="center" class="Table"><strong>Table: Tizen-specific information</strong></p> 
+   <table border="1"> 
    <tbody> 
     <tr> 
      <th colspan="2">Property</th> 
     <tr> 
      <td colspan="2"><strong>Application Control</strong></td> 
      <td>Describes the <a href="../../../../org.tizen.guides/html/web/app_management/app_controls_w.htm">application control functionalities</a> provided by the application. To define an application control used to access the functionality of your application, click <strong>+</strong> in the <strong>Application Control</strong> panel and define the details.
-        <p>The <strong>operation</strong>, <strong>uri</strong>, and <strong>mime</strong> fields describe the functionalities that other applications can request and the <strong>src</strong> field describes the application page that handles the request.</p> <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> <pre class="prettyprint">
+        <p>The <strong>operation</strong>, <strong>uri</strong>, and <strong>mime</strong> fields describe the functionalities that other applications can request and the <strong>src</strong> field describes the application page that handles the request.</p> <p>The following example shows the setting in the <code>config.xml</code> file code:</p> <pre class="prettyprint">
 &lt;tizen:app-control&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;edit.html&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/edit&quot;/&gt;
        <tr> 
      <td><strong>Capabilities</strong></td> 
      <td>The capabilities of the account provider defined in the IRI format:
-        <p><span style="font-family: Courier New,Courier,monospace">http://&lt;vendor information&gt;/accounts/capability/&lt;name&gt;</span></p>
+        <p><code>http://&lt;vendor information&gt;/accounts/capability/&lt;name&gt;</code></p>
         <p>The following predefined capabilities can be used:</p>
         <ul>
-        <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span>
+        <li><code>http://tizen.org/account/capability/contact</code>
         <p>Used when the account is related to contacts.</p></li>
-        <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span>
+        <li><code>http://tizen.org/account/capability/calendar</code>
         <p>Used when the account is related to calendar.</p></li>
         </ul>
         <p>To add a capability, click an empty row in the <strong>Capabilities</strong> panel table and select a capability you need.</p>
        <td colspan="2"><strong>Meta Data</strong></td>
      <td>Defines key-value pairs that can be accessed (read-only) through the Application API (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).
         <p>To add a key-value pair, click <strong>+</strong> in the <strong>Meta Data</strong> section, define a key (unique string) and value (string), and click <strong>OK</strong>. This attribute is optional.</p>
-        <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
+        <p>The following example shows the setting in the <code>config.xml</code> file code:</p>
         <pre class="prettyprint">
 &lt;tizen:metadata key=&quot;key1&quot;/&gt;
 &lt;tizen:metadata key=&quot;key2&quot; value=&quot;value&quot;/&gt;
 
 <h3 id="source" name="source">Editing the config.xml File in the Source Tab</h3>
 
-  <p>The <strong>Source</strong> tab of the Web application configuration editor shows the code of the <span style="font-family: Courier New, Courier, monospace">config.xml</span> file. You can <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm">edit the basic syntax of the XML document</a> and also see how changes made on the other tabs are reflected in the raw XML source content.</p>
+  <p>The <strong>Source</strong> tab of the Web application configuration editor shows the code of the <code>config.xml</code> file. You can <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm">edit the basic syntax of the XML document</a> and also see how changes made on the other tabs are reflected in the raw XML source content.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> must conform not only to the XML file format but also to the W3C specification requirements. If you edit application information manually in the <span style="font-family: Courier New, Courier, monospace">config.xml</span> file source code, you can introduce errors preventing the application from running normally.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+      <div class="note">
+        <strong>Note</strong>
+        The <code>config.xml</code> must conform not only to the XML file format but also to the W3C specification requirements. If you edit application information manually in the <code>config.xml</code> file source code, you can introduce errors preventing the application from running normally.
+    </div>
 
  
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
index bb1191a..4101ad5 100644 (file)
@@ -45,7 +45,7 @@
 
 <p>A wearable Web application is basically a Web site stored on a wearable device. You can create it using Web-native languages, such as HTML5, CSS, and JavaScript.</p>
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic wearable Web application, which displays some text on the screen and changes the text when the user clicks it:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable Web application, which displays some text on the screen and changes the text when the user clicks it:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
@@ -74,7 +74,7 @@
 <li><p>On the right, the figure shows the application screen after you tap the text. The screen now displays the <strong>Tizen</strong> text. Tapping the text area switches between the 2 texts.</p></li>
 </ul>
 
-<p class="figure">Figure: Wearable Web Basic application</p>
+<p align="center"><strong>Figure: Wearable Web Basic application</strong></p>
 <p align="center"><img alt="Wearable Web Basic application" src="../../images/basic_app_running_1_ww.png" /> <img alt="Wearable Web Basic application" src="../../images/basic_app_running_2_ww.png" /></p>
 
 <p>To create the application project:</p>
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">css</span>: Folder for CSS files used by the application to style its content</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">js</span>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file used by the  platform to install and launch the application</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Application icon file used by the platform to represent the application</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">index.html</span>: Main HTML file for the layout of the application screen</p></li>
+<li><p><code>css</code>: Folder for CSS files used by the application to style its content</p></li>
+<li><p><code>js</code>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
+<li><p><code>config.xml</code>: Application configuration file used by the  platform to install and launch the application</p></li>
+<li><p><code>icon.png</code>: Application icon file used by the platform to represent the application</p></li>
+<li><p><code>index.html</code>: Main HTML file for the layout of the application screen</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_ww.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+    <div class="note">
+        <strong>Note</strong>
+        You can <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.
+    </div>
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>config.xml</code> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
 </li>
 
 <li>
 <li><p><strong>Preferences</strong>: Define name-value pairs that can be set or retrieved through the application.</p></li>
 <li><p><strong>Tizen</strong>: Edit the Tizen schema extension properties of the application.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>config.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+    <div class="note">
+        <strong>Note</strong>
+        The <code>config.xml</code> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
 </li>
 </ul>
 </li>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
 
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_ww.png" /></p>
 
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 
 <p>You can run the Web application on the <a href="../process/run_debug_app_w.htm#emulator">emulator</a> or a <a href="../process/run_debug_app_w.htm#target">real target device</a>.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
+  
+      <div class="note">
+        <strong>Note</strong>
+        Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.
+    </div>
 
 <h3 id="emulator">Running on the Emulator</h3>
 
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_ww.png" alt="Application running in the emulator" /></p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).</td>
-    </tr>
-   </tbody>
-  </table>
+      <div class="note">
+        <strong>Note</strong>
+        If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).
+    </div>
 
 <p>While the application is running, the <strong>Log</strong> view in the Tizen Studio shows the log, debug, and exception messages from the methods defined in the log macros. To see the view, in the Tizen Studio menu, go to <strong>Window &gt; Show View &gt; Log</strong>.</p>
 </li>
 </li>
 <li>Confirm that the application launches in the target device.</li>
 </ol>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+  
+      <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_w.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+        </ol>
+    </div>
   
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
 <h4 id="html" name="html">HTML</h4> 
 
 <p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> elements as child nodes:</p>
+<p>The <code>&lt;html&gt;</code> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> elements as child nodes:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;/html&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, and JavaScript:</p>
+<p>The <code>&lt;head&gt;</code> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, and JavaScript:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;title&gt;</span>: Defines the title of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;meta&gt;</span>: Defines information, such as encoding, creator, and keywords of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span>: Sets the styles of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;noscript&gt;</span>: Adds functions to the document.</li>
+<li><code>&lt;title&gt;</code>: Defines the title of the document.</li>
+<li><code>&lt;meta&gt;</code>: Defines information, such as encoding, creator, and keywords of the document.</li>
+<li><code>&lt;style&gt;</code>, <code>&lt;link&gt;</code>: Sets the styles of the document.</li>
+<li><code>&lt;script&gt;</code>, <code>&lt;noscript&gt;</code>: Adds functions to the document.</li>
 </ul>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;/html&gt;
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element defines the area displaying content on the browser screen:</p>
+<p>The <code>&lt;body&gt;</code> element defines the area displaying content on the browser screen:</p>
 
 <pre class="prettyprint">
 &lt;body&gt;
 
 <p>The HTML code displays the <strong>Basic</strong> text on the screen.</p>
 
-<p class="figure">Figure: Screen with Basic text</p> 
+<p align="center"><strong>Figure: Screen with Basic text</strong></p> 
 <p align="center"><img src="../../images/build_ui_basic_ww.png" alt="Screen with Basic text" /></p>
 
 <h4 id="css" name="css">CSS</h4>
 <p>CSS (Cascading Style Sheets) specifies the layout and styling of the Web application.</p>
 <p>There are various ways to connect CSS with HTML:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">style</span> attribute in an HTML element</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element</li>
+<li><code>style</code> attribute in an HTML element</li>
+<li><code>&lt;link&gt;</code> element in the <code>&lt;head&gt;</code> element</li>
+<li><code>@import</code> attribute in the CSS area</li>
+<li><code>&lt;style&gt;</code> element in the <code>&lt;head&gt;</code> element</li>
 </ul>
-<p>Applying the style of an HTML element directly with the style attribute has the highest priority. On the other hand, creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element.</p>
-<p>The following code shows how to link to a CSS file, and how to use the <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element to set the margin of the <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element to be automatic so that the browser calculates the margin automatically and the text is placed in the center:</p>
+<p>Applying the style of an HTML element directly with the style attribute has the highest priority. On the other hand, creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <code>&lt;link&gt;</code> element in the <code>&lt;head&gt;</code> element.</p>
+<p>The following code shows how to link to a CSS file, and how to use the <code>&lt;style&gt;</code> element to set the margin of the <code>&lt;div&gt;</code> element to be automatic so that the browser calculates the margin automatically and the text is placed in the center:</p>
 
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;/html&gt;
 </pre>
 
-<p>The following lines in the CSS code describe the styling of the text in an element with the <span style="font-family: Courier New,Courier,monospace">content-text</span> class name:</p>
+<p>The following lines in the CSS code describe the styling of the text in an element with the <code>content-text</code> class name:</p>
 
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace">css/style.css</span>:
+<li><code>css/style.css</code>:
 <pre class="prettyprint">
 html,
 body
@@ -540,7 +513,7 @@ body
 }
 </pre>
 </li>
-<li><span style="font-family: Courier New,Courier,monospace">index.html</span>:
+<li><code>index.html</code>:
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot; class=&quot;page&quot;&gt;
@@ -552,7 +525,7 @@ body
 </pre>
 </li>
 </ul>
-<p>By default, the text uses the <span style="font-family: Courier New,Courier,monospace">#ffffff</span> color (white), defined for the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element. If you change the CSS code and add a separate color for the <span style="font-family: Courier New,Courier,monospace">content-text</span> class, the text color changes (in this case, to <span style="font-family: Courier New,Courier,monospace">#ff0000</span> red):</p>
+<p>By default, the text uses the <code>#ffffff</code> color (white), defined for the <code>&lt;body&gt;</code> element. If you change the CSS code and add a separate color for the <code>content-text</code> class, the text color changes (in this case, to <code>#ff0000</code> red):</p>
 
 <pre class="prettyprint">
 #content-text
@@ -562,7 +535,7 @@ body
 &nbsp;&nbsp;&nbsp;<span class="highlight">color: #ff0000;</span>
 }
 </pre>
-<p class="figure">Figure: Screen with a new text color</p> 
+<p align="center"><strong>Figure: Screen with a new text color</strong></p> 
 <p align="center"><img src="../../images/build_ui_basic_textbox_ww.png" alt="Screen with a new text color" /></p>
 
 <h3 id="tau" name="tau">TAU (Tizen Advanced UI)</h3>
@@ -570,7 +543,7 @@ body
 <p>TAU is a Web UI library that enables you to create and manage various kinds of UI components. The components represent a visual UI element, such as a checkbox, listview, or progress. You can manipulate and interact with the application screens through the UI components. UI components for wearable devices have been enhanced to support a circular screen. You can make an application that runs on both rectangular and circular screens with a single source code.</p>
 <p>The following figure shows the role of TAU and its relation with the Web application.</p>
 
-<p class="figure">Figure: TAU and the Web application</p>
+<p align="center"><strong>Figure: TAU and the Web application</strong></p>
 <p align="center"><img src="../../images/simple_ui_tau_relation_ww.png" alt="TAU and the Web application" /></p>
 
 <p>To create a Web application and design its UI with TAU:</p>
@@ -592,7 +565,7 @@ body
 <li>Change the project name and properties and click <strong>Finish</strong>.
 <p align="center"><img src="../../images/simple_ui_tau_properties_ww.png" alt="Changing properties" /></p></li>
 <li>In the <strong>Project Explorer</strong> view, view the project.
-<p>The TAU library is located in the <span style="font-family: Courier New,Courier,monospace">lib</span> folder.</p>
+<p>The TAU library is located in the <code>lib</code> folder.</p>
 <p align="center"><img src="../../images/simple_ui_tau_dir_ww.png" alt="TAU library directory" /></p>
 </li>
 </ol>
@@ -615,25 +588,25 @@ body
 &lt;/html&gt;
 </pre>
 
-<p>In HTML, use the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications:</p>
+<p>In HTML, use the <code>&lt;script&gt;</code> and <code>&lt;link&gt;</code> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications:</p>
 <ul>
-<li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span>
+<li>TAU library: <code>tau(.min).js</code>
 <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p>
 </li>
-<li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span>
+<li>TAU theme: <code>tau(.min).css</code>
 <p>This element is also mandatory, as it imports the TAU theme.</p>
 </li>
-<li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau.circle(.min).css</span>
+<li>TAU theme: <code>tau.circle(.min).css</code>
 <p>This element is optional, but mandatory if you want to develop a Web application on a circular device.</p>
 </li>
-<li>Support JavaScript: <span style="font-family: Courier New,Courier,monospace">circle-helper.js</span>
+<li>Support JavaScript: <code>circle-helper.js</code>
 <p>This element is optional. If you import this file, you can easily get a listview that handles rotary events.</p>
 </li>
 </ul>
 
-<p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets. However, place them after the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
-<p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element in the HTML <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
-<p>The following example shows a basic TAU template. Overwrite the <span style="font-family: Courier New,Courier,monospace">index.html</span> file content with the following code:</p>
+<p>You can add an additional <code>&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</code> or <code>&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</code> element to include your own scripts and style sheets. However, place them after the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>To load your JavaScript file, include the file in the <code>&lt;script&gt;</code> element in the HTML <code>&lt;body&gt;</code> element. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
+<p>The following example shows a basic TAU template. Overwrite the <code>index.html</code> file content with the following code:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -659,7 +632,7 @@ body
 <ol type="a">
 <li>
 <p>The body element of the HTML file contains 1 or more pages.</p>
-<p>To create a page in the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element, use the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class with the <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element:</p>
+<p>To create a page in the <code>&lt;body&gt;</code> element, use the <code>ui-page</code> class with the <code>&lt;div&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -669,7 +642,7 @@ body
 &lt;/body&gt;
 </pre></li>
 <li>
-<p>To layout the page, add a content area with the <span style="font-family: Courier New,Courier,monospace">ui-content</span> class and a header with the <span style="font-family: Courier New,Courier,monospace">ui-header</span> class:</p>
+<p>To layout the page, add a content area with the <code>ui-content</code> class and a header with the <code>ui-header</code> class:</p>
 <pre class="prettyprint">
 &lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
@@ -686,7 +659,7 @@ body
 <p align="center"><img src="../../images/simple_ui_hello_tau_ww.png" alt="Hello TAU" /></p>
 </li>
 <li>
-<p>You can add your own style in the content and footer area with a defined <span style="font-family: Courier New,Courier,monospace">id</span> attribute:</p>
+<p>You can add your own style in the content and footer area with a defined <code>id</code> attribute:</p>
 <pre class="prettyprint">
 &lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
@@ -698,7 +671,7 @@ body
 &lt;/div&gt;
 </pre>
 
-<p>In the <span style="font-family: Courier New,Courier,monospace">style.css</span> file, add a CSS style for the new <span style="font-family: Courier New,Courier,monospace">id</span> attribute:</p>
+<p>In the <code>style.css</code> file, add a CSS style for the new <code>id</code> attribute:</p>
 <pre class="prettyprint">
 #contentArea
 {
@@ -712,11 +685,11 @@ body
 </li>
 
 <li>Add a list.
-<p>You can add a list with the TAU Listview component using the <span style="font-family: Courier New,Courier,monospace">&lt;ul&gt;</span> element and the <span style="font-family: Courier New,Courier,monospace">ui-listview</span> class:</p>
+<p>You can add a list with the TAU Listview component using the <code>&lt;ul&gt;</code> element and the <code>ui-listview</code> class:</p>
 
 <ul>
 <li>
-<p>Create a simple and basic static list. Overwrite the <span style="font-family: Courier New,Courier,monospace">&lt;ul class=&quot;ui-content&quot;&gt;</span> element content with the following code:</p>
+<p>Create a simple and basic static list. Overwrite the <code>&lt;ul class=&quot;ui-content&quot;&gt;</code> element content with the following code:</p>
 <pre class="prettyprint">
 &lt;div class=&quot;ui-content&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
@@ -733,9 +706,9 @@ body
 </li>
 
 <li>For a more advanced option, you can also create a SnapListview.
-<p>In a circular device, you can use a SnapListview, which is a circular-specialized listview component. To use this component, add several lines in your own JavaScript file. Note that if you already have added the <span style="font-family: Courier New,Courier,monospace">circle-helper.js</span> file, you do dot need to add the script again.</p>
+<p>In a circular device, you can use a SnapListview, which is a circular-specialized listview component. To use this component, add several lines in your own JavaScript file. Note that if you already have added the <code>circle-helper.js</code> file, you do dot need to add the script again.</p>
 
-<p>The following example shows how to create a SnapListview using the <span style="font-family: Courier New,Courier,monospace">tau.helper</span> class:</p>
+<p>The following example shows how to create a SnapListview using the <code>tau.helper</code> class:</p>
 <pre class="prettyprint">
 (function(tau) 
 {
@@ -772,7 +745,7 @@ body
 <li>Create another page.
 <ol type="a">
 <li>
-<p>In the Tizen Studio, you can create a new HTML file and rename it. Create a <span style="font-family: Courier New,Courier,monospace">second.html</span> file with the following content:</p>
+<p>In the Tizen Studio, you can create a new HTML file and rename it. Create a <code>second.html</code> file with the following content:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -796,10 +769,10 @@ body
 &lt;/html&gt;
 </pre>
 </li>
-<li>Decorate the page in the same way as <span style="font-family: Courier New,Courier,monospace">index.html</span>.</li>
+<li>Decorate the page in the same way as <code>index.html</code>.</li>
 
-<li>Create navigation between the <span style="font-family: Courier New,Courier,monospace">index.html</span> and <span style="font-family: Courier New,Courier,monospace">second.html</span> pages.
-<p>Go back to the <span style="font-family: Courier New,Courier,monospace">index.html</span> file and add a file path in the listview <span style="font-family: Courier New,Courier,monospace">&lt;li&gt;&lt;a href&gt;</span> element:</p>
+<li>Create navigation between the <code>index.html</code> and <code>second.html</code> pages.
+<p>Go back to the <code>index.html</code> file and add a file path in the listview <code>&lt;li&gt;&lt;a href&gt;</code> element:</p>
 
 <pre class="prettyprint">
 &lt;ul class=&quot;ui-listview&quot;&gt;
@@ -811,7 +784,7 @@ body
 &lt;/ul&gt;
 </pre></li>
 <li>
-<p>Run the code, and see how you can move from the <span style="font-family: Courier New,Courier,monospace">index.html</span> page to the <span style="font-family: Courier New,Courier,monospace">second.html</span> page.</p>
+<p>Run the code, and see how you can move from the <code>index.html</code> page to the <code>second.html</code> page.</p>
 
 <p align="center"><img src="../../images/simple_ui_tau_move_ww.png" alt="Move to second page" /></p>
 </li></ol>
@@ -820,10 +793,10 @@ body
 </li>
 
 <li>Go back with the back key.
-<p>You can navigate from page to page with the <span style="font-family: Courier New,Courier,monospace">&lt;a href=&quot;PAGE_FILE_NAME&quot;&gt;</span> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
+<p>You can navigate from page to page with the <code>&lt;a href=&quot;PAGE_FILE_NAME&quot;&gt;</code> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
 
 <ol type="a">
-<li><p>Add a new JavaScript file to the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+<li><p>Add a new JavaScript file to the <code>index.html</code> file:</p>
 <pre class="prettyprint">
 &lt;body&gt;
 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
@@ -846,9 +819,9 @@ body
 &lt;/body&gt;
 </pre></li>
 <li>
-<p>In the new file (<span style="font-family: Courier New,Courier,monospace">app.js</span>), all kinds of logic can be added to the application. In this case, add several lines for handling navigation.</p>
+<p>In the new file (<code>app.js</code>), all kinds of logic can be added to the application. In this case, add several lines for handling navigation.</p>
 
-<p>Overwrite the <span style="font-family: Courier New,Courier,monospace">app.js</span> file content with the following code:</p>
+<p>Overwrite the <code>app.js</code> file content with the following code:</p>
 <pre class="prettyprint">
 (function() 
 {
@@ -870,9 +843,9 @@ body
 </li>
 
 <li>Exit the application.
-<p>You can make your application exit by adding more lines to the <span style="font-family: Courier New,Courier,monospace">app.js</span> file.</p>
+<p>You can make your application exit by adding more lines to the <code>app.js</code> file.</p>
 <p>You have to consider the fact that when the user clicks the back key, the application can only exit if it is showing the main page. If the second page is showing, the application must return to the main page.</p>
-<p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <span style="font-family: Courier New,Courier,monospace">main.js</span> file by default.</p>
+<p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <code>main.js</code> file by default.</p>
 <pre class="prettyprint">
 (function() 
 {
index 23b7df0..d019b5d 100644 (file)
@@ -45,7 +45,7 @@
 
 <p>A wearable Web application is basically a Web site stored on a wearable device. You can create it using Web-native languages, such as HTML5, CSS, and JavaScript. and run it on Tizen wearable devices to display a customized watch face to the user.</p>
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic wearable Web watch application, which displays an analog watch face with the current time on the screen:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable Web watch application, which displays an analog watch face with the current time on the screen:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
@@ -69,7 +69,7 @@
 
 <p>The following figure illustrates the application to be created. The application screen displays the analog watch face and the current time, which continues to be refreshed every second while the application runs.</p>
 
-<p class="figure">Figure: Wearable Web Watch application</p>
+<p align="center"><strong>Figure: Wearable Web Watch application</strong></p>
 <p align="center"><img alt="Wearable Web Watch application" src="../../images/basic_app_running_ww_watch.png" /></p>
 
 
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">css</span>: Folder for CSS files used by the application to style its content</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">js</span>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file used by the  platform to install and launch the application</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Application icon file used by the platform to represent the application</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">index.html</span>: Main HTML file for the layout of the application screen</p></li>
+<li><p><code>css</code>: Folder for CSS files used by the application to style its content</p></li>
+<li><p><code>js</code>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
+<li><p><code>config.xml</code>: Application configuration file used by the  platform to install and launch the application</p></li>
+<li><p><code>icon.png</code>: Application icon file used by the platform to represent the application</p></li>
+<li><p><code>index.html</code>: Main HTML file for the layout of the application screen</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_ww_watch.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+    <div class="note">
+        <strong>Note</strong>
+        You can <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.
+    </div>
+
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>config.xml</code> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
 </li>
 
 <li>
 <li><p><strong>Preferences</strong>: Define name-value pairs that can be set or retrieved through the application.</p></li>
 <li><p><strong>Tizen</strong>: Edit the Tizen schema extension properties of the application.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>config.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+    <div class="note">
+        <strong>Note</strong>
+        The <code>config.xml</code> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
 </li>
 </ul>
 </li>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
 
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_watch_ww.png" /></p>
 
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 <h2 id="run">Running Your Application</h2>
 
 <p>You can run the Web watch application on the <a href="../process/run_debug_app_w.htm#emulator">emulator</a> or a <a href="../process/run_debug_app_w.htm#target">real target device</a>.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
+  
+      <div class="note">
+        <strong>Note</strong>
+        Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.
+    </div>
 
 <h3 id="emulator">Running on the Emulator</h3>
 
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
@@ -378,21 +362,17 @@ cd tizen-sdk/tools
 <p>Like with the <a href="#watchface">emulator</a>, you must change the watch face in the device settings before you can see the watch application UI on the device.</p>
 </li>
 </ol>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+
+  
+      <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_ww_watch.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table>  
+        </ol>
+    </div>
 
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
@@ -409,15 +389,15 @@ cd tizen-sdk/tools
 <p>To initialize the watch application:</p>
 <ol>
 <li>
-<p>To set the application configuration, use the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p> 
+<p>To set the application configuration, use the <code>config.xml</code> file:</p> 
 
 
        <ul>
-       <li>By default, the BasicWatch sample has the application category defined as <span style="font-family: Courier New,Courier,monospace">&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</span>.
-       <p>To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <span style="font-family: Courier New,Courier,monospace">&lt;tizen:category name=&quot;com.samsung.wmanager.WATCH_CLOCK&quot; /&gt;</span> instead.</p>
+       <li>By default, the BasicWatch sample has the application category defined as <code>&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</code>.
+       <p>To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <code>&lt;tizen:category name=&quot;com.samsung.wmanager.WATCH_CLOCK&quot; /&gt;</code> instead.</p>
                </li>
                <li>
-       <p>To enable a custom UI for the <a href="../details/event_handling_w.htm#ambient">ambient mode</a>, the <span style="font-family: Courier New,Courier,monospace">ambient_support</span> attribute must be set to <span style="font-family: Courier New,Courier,monospace">enable</span>.</p>
+       <p>To enable a custom UI for the <a href="../details/event_handling_w.htm#ambient">ambient mode</a>, the <code>ambient_support</code> attribute must be set to <code>enable</code>.</p>
        </li>
        </ul>
 
@@ -436,8 +416,8 @@ cd tizen-sdk/tools
 </pre>
 </li>
 <li>
-<p>To initialize the application and define basic features, use the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
-<p>Modify the <span style="font-family: Courier New,Courier,monospace">window.requestAnimationFrame()</span> method to make the application compatible with the main browsers:</p>
+<p>To initialize the application and define basic features, use the <code>main.js</code> file.</p>
+<p>Modify the <code>window.requestAnimationFrame()</code> method to make the application compatible with the main browsers:</p>
 <pre class="prettyprint">
 window.requestAnimationFrame = window.requestAnimationFrame ||
 &nbsp;&nbsp;&nbsp;window.webkitRequestAnimationFrame ||
@@ -498,7 +478,7 @@ window.onload = function onLoad()
 <p>To draw the watch UI:</p>
 <ol>
 <li>
-<p>To define the application layout, use the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+<p>To define the application layout, use the <code>index.html</code> file.</p>
 
 <p>By default, the BasicWatch sample application layout contains only the main screen that displays the clock on a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element.</p> 
 
@@ -519,7 +499,7 @@ window.onload = function onLoad()
 </pre> 
 </li>
 <li>
-<p>To draw the watch face on the canvas, use the <span style="font-family: Courier New,Courier,monospace">main.js</span> file:</p>
+<p>To draw the watch face on the canvas, use the <code>main.js</code> file:</p>
 <ol type="a">
 <li>
 <p>Create the clock in the middle of the canvas, and define the watch face style:</p>
@@ -538,7 +518,7 @@ function renderDots()
 &nbsp;&nbsp;&nbsp;ctx.beginPath();
 &nbsp;&nbsp;&nbsp;ctx.fillStyle = &#39;#999999&#39;;</pre>
 </li>
-<li>Create 4 dots on the sides of the watch face and use the <span style="font-family: Courier New,Courier,monospace">fill()</span> method to style the dots:
+<li>Create 4 dots on the sides of the watch face and use the <code>fill()</code> method to style the dots:
 <pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;for (i = 1; i &lt;= 4; i++) 
 &nbsp;&nbsp;&nbsp;{
@@ -567,11 +547,11 @@ function renderDots()
 </li>
 </ol>
 </li>
-<li><p>To display the actual time on the watch face, create the clock needles and set their position using the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
+<li><p>To display the actual time on the watch face, create the clock needles and set their position using the <code>main.js</code> file.</p>
 <p>Render the clock needles:</p>
 <ol type="a"> 
-<li>The needles can be created using the <span style="font-family: Courier New,Courier,monospace">renderNeedle()</span> method.
-<p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. To assign the rest of the points of the triangle or polygon, use the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method.</p>
+<li>The needles can be created using the <code>renderNeedle()</code> method.
+<p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <code>moveTo()</code> method. To assign the rest of the points of the triangle or polygon, use the <code>lineTo()</code> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <code>lineTo()</code> method.</p>
 <pre class="prettyprint">
 function renderNeedle(angle, radius) 
 {
@@ -589,7 +569,7 @@ function renderNeedle(angle, radius)
 &nbsp;&nbsp;&nbsp;ctx.restore();
 }</pre>
 </li>
-<li>Create the hour needle using the <span style="font-family: Courier New,Courier,monospace">renderHourNeedle()</span> method:
+<li>Create the hour needle using the <code>renderHourNeedle()</code> method:
 <pre class="prettyprint">
 function renderHourNeedle(hour) 
 {
@@ -603,7 +583,7 @@ function renderHourNeedle(hour)
 &nbsp;&nbsp;&nbsp;renderNeedle(angle, radius);
 }</pre>
 </li>
-<li>Create the minute needle using the <span style="font-family: Courier New,Courier,monospace">renderMinuteNeedle()</span> method:
+<li>Create the minute needle using the <code>renderMinuteNeedle()</code> method:
 <pre class="prettyprint">
 function renderMinuteNeedle(minute)
 {
@@ -619,9 +599,9 @@ function renderMinuteNeedle(minute)
 </li>
 </ol>
 </li>
-<li>Indicate the current time in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file:
+<li>Indicate the current time in the <code>main.js</code> file:
 <ol>
-<li>Determine the current time using the <span style="font-family: Courier New,Courier,monospace">new Date()</span> method. 
+<li>Determine the current time using the <code>new Date()</code> method. 
 <p>To point the needles accurately, define variables for the current hour and minute.</p>
 <pre class="prettyprint">
 function getDate() 
@@ -659,7 +639,7 @@ function watch()
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute = minutes + seconds / 60,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nextMove = 1000 - date.getMilliseconds();</pre>
 </li>
-<li>Every time a new time is indicated, erase the previous time (the previously positioned needles) using the <span style="font-family: Courier New,Courier,monospace">clearRect()</span> method:
+<li>Every time a new time is indicated, erase the previous time (the previously positioned needles) using the <code>clearRect()</code> method:
 <pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);</pre>
 </li>
@@ -685,16 +665,11 @@ function watch()
 <h3 id="ambient">Using the Ambient Mode</h3>
 
 <p>In a low-powered wearable device, an ambient mode is available. In this mode, the watch application shows a limited UI and receives only the ambient tick event every minute to reduce power consumption.</p>
-<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient_support</span> attribute to <span style="font-family: Courier New,Courier,monospace">disable</span> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> watch application configuration file to allow the platform to show a default ambient mode UI.</p>
+<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <code>ambient_support</code> attribute to <code>disable</code> in the <code>config.xml</code> watch application configuration file to allow the platform to show a default ambient mode UI.</p>
 
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To use the ambient mode, the user must enable it in the device settings. In addition, in the Gear S2 device, the ambient mode activates only when you are wearing the watch on the wrist.
+      <div class="note">
+        <strong>Note</strong>
+        To use the ambient mode, the user must enable it in the device settings. In addition, in the Gear S2 device, the ambient mode activates only when you are wearing the watch on the wrist.
         
         <p>Since Tizen 2.3.2, some devices introduce a high color mode for the ambient mode. In the high color mode, you can use more colors (usually, 24-bit color) for drawing the ambient mode UI. To check whether the device supports the high color mode, use the following code:</p>
 
@@ -703,10 +678,8 @@ bool support;
 int ret;
 
 ret = system_info_get_platform_bool(&quot;http://tizen.org/feature/screen.always_on.high_color&quot;, &amp;support);
-</pre></td> 
-    </tr> 
-   </tbody> 
-  </table>
+</pre>
+    </div>
   
 <p>To use the ambient mode:</p>
 <ol>
index be6dd8a..8162ebf 100644 (file)
 
 <p>A widget application is one of the Tizen application types. It can be shown by specific UI applications (such as the home screen and lock screen) that can contain widget applications.</p>
  
-<p class="figure">Figure: Widget application in a wearable device</p> 
+<p align="center"><strong>Figure: Widget application in a wearable device</strong></p> 
 <p align="center"><img alt="Widget application in a wearable device" src="../../images/widget_app_wearable_widget.png" /></p>  
  
 
-<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the Emulator or target device. With the instructions, you can create and run a basic wearable Web widget application (a Web widget), which displays some text on the screen with no user interaction:</p>
+<p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable Web widget application (a Web widget), which displays some text on the screen with no user interaction:</p>
 
 <ol>
 <li>Before you get started with developing Tizen applications, download and install the <a href="../../../../org.tizen.studio/html/download/download.htm">Tizen Studio</a>.
 
 <p>The following example shows you how to create and configure a basic wearable Web widget application project in the Tizen Studio. An application project contains all the files that make up an application.</p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">
-                <p>For user convenience, standalone widget application packages are not allowed in the Tizen market place.</p>
-                <p>Use a standalone widget application for testing purposes. If you want to publish the application in the Tizen market place, combine it with at least 1 UI application in the same package. For more information, see <a href="../process/app_dev_process_w.htm#multi">Developing Multiple Projects as a Combined Package</a>.</p>
-            </td>
-        </tr>
-    </tbody>
-</table>
+    <div class="note">
+        <strong>Note</strong>
+        For user convenience, standalone widget application packages are not allowed in the Tizen market place.
+        <p>Use a standalone widget application for testing purposes. If you want to publish the application in the Tizen market place, combine it with at least 1 UI application in the same package. For more information, see <a href="../process/app_dev_process_w.htm#multi">Developing Multiple Projects as a Combined Package</a>.</p>
+    </div>
 
 <p>The following figure illustrates the application to be created. The application screen displays the <strong>Hello, Web Widget!</strong> text and no user interaction is provided.</p>
 
-<p class="figure">Figure: Wearable Web Widget application</p>
+<p align="center"><strong>Figure: Wearable Web Widget application</strong></p>
 <p align="center"><img alt="Wearable Web Widget application" src="../../images/basic_app_running_ww_widget.png" /></p>
 
 <p>To create the application project:</p>
 <p>You can see the created project in the <strong>Project Explorer</strong> view. The most important files and folders include:</p>
 
 <ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">css</span>: Folder for CSS files used by the application to style its content</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">js</span>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file used by the  platform to install and launch the application</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Application icon file used by the platform to represent the widget</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">index.html</span>: Main HTML file for the layout of the application screen</p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">preview.png</span>: Preview of the widget application file that is displayed in the widget view on the target.</p></li>
+<li><p><code>css</code>: Folder for CSS files used by the application to style its content</p></li>
+<li><p><code>js</code>: Folder for JavaScript files used by the application to implement its functional logic</p></li>
+<li><p><code>config.xml</code>: Application configuration file used by the  platform to install and launch the application</p></li>
+<li><p><code>icon.png</code>: Application icon file used by the platform to represent the widget</p></li>
+<li><p><code>index.html</code>: Main HTML file for the layout of the application screen</p></li>
+<li><p><code>preview.png</code>: Preview of the widget application file that is displayed in the widget view on the target.</p></li>
 </ul>
 
-<p class="figure">Figure: Application in the Project Explorer</p>
+<p align="center"><strong>Figure: Application in the Project Explorer</strong></p>
 <p align="center"><img alt="Application in the Project Explorer" src="../../images/basic_app_project_explorer_ww_widget.png" /></p>
 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">You can <a href="#validate">validate your widget</a> and <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.</td>
-        </tr>
-    </tbody>
-</table>
+
+    <div class="note">
+        <strong>Note</strong>
+        You can <a href="#validate">validate your widget</a> and <a href="#configuration">view and modify the application configuration</a> in the Web application configuration editor. In this example, no configuration changes are required.
+    </div>
 
 <p>Your application project is now ready for further actions. Next, build the application.</p>
 
 
 <p>You can enable or disable these validators in the application preferences: go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; WebWidget</strong>, and check the applicable check boxes.</p>
 
-<p class="figure">Figure: Validation preferences</p>
+<p align="center"><strong>Figure: Validation preferences</strong></p>
 <p align="center"><img alt="Validation preferences" src="../../images/widget_validate_pref_w.png" /></p> 
 
 <p>The validation is performed automatically when the project or package is built, or when the application is run.</p> 
  
 <p>When the validation is complete, its results are shown in the <strong>Problems</strong> view. If the view is not displayed, select it from <strong>Window &gt; Show view &gt; Problems</strong> (keyboard shortcut: <strong>Shift + Alt + Q + X</strong>).</p>
 
-<p class="figure">Figure: Validation results</p>
+<p align="center"><strong>Figure: Validation results</strong></p>
 <p align="center"><img alt="Validation results" src="../../images/widget_validate_result_w.png" /></p> 
  
 <h3 id="configuration" name="configuration">Managing the Application Configuration</h3>
 <ol>
 
 <li>
-<p>In the <strong>Project Explorer</strong> view, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
+<p>In the <strong>Project Explorer</strong> view, double-click the <code>config.xml</code> file of the application. The Tizen Studio opens the file in the Web application configuration editor.</p>
 </li>
 
 <li>
 <li><p><strong>Preferences</strong>: Define name-value pairs that can be set or retrieved through the application.</p></li>
 <li><p><strong>Tizen</strong>: Edit the Tizen schema extension properties of the application.</p></li>
 <li>
-<p><strong>Source</strong>: View and edit the source code of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.</td>
-        </tr>
-    </tbody>
-</table>
+<p><strong>Source</strong>: View and edit the source code of the <code>config.xml</code> file. Changes made and saved on the other tabs are reflected in the source code and vice versa.</p>
+
+
+    <div class="note">
+        <strong>Note</strong>
+        The <code>config.xml</code> file must conform to both the XML file format and the W3C specification requirements. Editing the file in the <strong>Source</strong> tab is intended for advanced users only.
+    </div>
 </li>
 </ul>
 </li>
 <p>The manual build means that you determine yourself when the application is built.</p>
 <p>To manually build the application, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Build Project</strong>.</p>
 
-<p class="figure">Figure: Manually building the application</p>
+<p align="center"><strong>Figure: Manually building the application</strong></p>
 <p align="center"><img alt="Manually building the application" src="../../images/build_manual_widget_ww.png" /></p>
 
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 
 <p>You can run the Web widget application on the <a href="../process/run_debug_app_w.htm#emulator">emulator</a> or a <a href="../process/run_debug_app_w.htm#target">real target device</a>.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
+      <div class="note">
+        <strong>Note</strong>
+        Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.
+    </div>
+       
+       
 <h3 id="emulator">Running on the Emulator</h3>
 
 <p>To run the application on the emulator:</p>
 <li>Create and launch an emulator instance in the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, launch the Emulator Manager by clicking the related icon.
-<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator manager icon" /></p>
+<p align="center"><img src="../../images/emulator_icon.png" alt="Emulator Manager icon" /></p>
 </li>
 <li>In the Emulator Manager, click <strong>Create</strong>.
 <p align="center"><img src="../../images/emulator_instance_create.png" alt="Creating an emulator instance" /></p>
 
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_ww_widget.png" alt="Application running in the emulator" /></p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).</td>
-    </tr>
-   </tbody>
-  </table>
+  
+      <div class="note">
+        <strong>Note</strong>
+        If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).
+    </div>
 
 <p>The above screen is shown through the Viewer, to allow you to develop a lone widget application for testing purposes.</p>
 <p id="viewer">To see the widget running on the home screen, add the widget there:</p>
@@ -430,21 +403,16 @@ cd tizen-sdk/tools
 <p>Like with the <a href="#viewer">emulator</a>, you must add the widget to the home screen before you can see it.</p></li>
 </ol>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The application is launched using the default debug run configuration. To create and use another configuration:
+
+    <div class="note">
+        <strong>Note</strong>
+        The application is launched using the default debug run configuration. To create and use another configuration:
         <ol>
-        <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
-        <li>In the <strong>Run Configurations</strong> window, click the <strong>New Launch Configuration</strong> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <strong>Run</strong>.
+        <li>In the <code>Project Explorer</code> view, right-click the project and select <code>Run As &gt; Run Configurations</code>.</li>
+        <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_w_widget.png" /></p></li>
-        </ol></td> 
-    </tr> 
-   </tbody> 
-  </table>  
+        </ol>
+    </div>  
 
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
@@ -461,8 +429,8 @@ cd tizen-sdk/tools
 <p>To initialize the widget application:</p>
 
 <ol>
-<li>Edit the widget application settings in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
-<p>The file include various information for the widget application. The following code shows an example of the widget content in the file. The <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget&gt;</span> element indicates the widget settings. If the widget requires privileges, add them to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well.</p>
+<li>Edit the widget application settings in the <code>config.xml</code> file.
+<p>The file include various information for the widget application. The following code shows an example of the widget content in the file. The <code>&lt;tizen:app-widget&gt;</code> element indicates the widget settings. If the widget requires privileges, add them to the <code>config.xml</code> file as well.</p>
 
 <pre class="prettyprint">
 &lt;?xml version="1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
@@ -509,16 +477,16 @@ widget
 &nbsp;&nbsp;&nbsp;preview.png
 &nbsp;&nbsp;&nbsp;index.html
 </pre>
-<p>You can customize the <span style="font-family: Courier New,Courier,monospace">index.html</span>, <span style="font-family: Courier New,Courier,monospace">style.css</span>, and <span style="font-family: Courier New,Courier,monospace">main.js</span> files. For example, if a JS-based animation effect is needed, add the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span>  method or some other animation library to the JS file. Similarly, to change the UI elements&#39; visual looks or add CSS-based effects (including animation), modify the CSS file.</p>
+<p>You can customize the <code>index.html</code>, <code>style.css</code>, and <code>main.js</code> files. For example, if a JS-based animation effect is needed, add the <code>requestAnimationFrame()</code>  method or some other animation library to the JS file. Similarly, to change the UI elements&#39; visual looks or add CSS-based effects (including animation), modify the CSS file.</p>
 
 <p>To create the widget application:</p>
 
 <ol>
-<li>Start and initialize the widget application with the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
-<p>The starting point is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file&#39;s <span style="font-family: Courier New,Courier,monospace">content src</span> field, which is set to <span style="font-family: Courier New,Courier,monospace">index.html</span>.</p> 
+<li>Start and initialize the widget application with the <code>index.html</code> file.
+<p>The starting point is defined in the <code>config.xml</code> file&#39;s <code>content src</code> field, which is set to <code>index.html</code>.</p> 
 </li>
 
-<li>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file includes the element structure of the widget application using HTML elements. In addition, it imports the JavaScript and CSS files.
+<li>The <code>index.html</code> file includes the element structure of the widget application using HTML elements. In addition, it imports the JavaScript and CSS files.
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -537,8 +505,8 @@ widget
 &lt;/html&gt; 
 </pre>
 </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">style.css</span> file indicates the style properties of various HTML elements.
-<p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file imports the <span style="font-family: Courier New,Courier,monospace">style.css</span> file.</p>
+<li>The <code>style.css</code> file indicates the style properties of various HTML elements.
+<p>The <code>index.html</code> file imports the <code>style.css</code> file.</p>
 <pre class="prettyprint">
 html, body
 {
@@ -569,7 +537,7 @@ html, body
 }
 </pre>
 </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">main.js</span> file contains the JS-based functions for the widget.
+<li>The <code>main.js</code> file contains the JS-based functions for the widget.
 <p>There are many JS-based functions, such as asynchronous functions, JS library, and effects. You can add various features to the widget application using JS.</p> 
 </li>
 </ol>