Add C# WidgetApplication API Guide 00/156600/15
authorHyunho Kang <hhstark.kang@samsung.com>
Thu, 19 Oct 2017 05:53:27 +0000 (14:53 +0900)
committerHyunho Kang <hhstark.kang@samsung.com>
Mon, 6 Nov 2017 07:35:42 +0000 (16:35 +0900)
PS10: Reviewed
PS13: Widget element added to manifest editor topic

Change-Id: I845d5eed991cdec94ff7765be3a6fcef9a153738
Signed-off-by: Hyunho Kang <hhstark.kang@samsung.com>
org.tizen.guides/html/dotnet/app_management/widget_app_cs.htm [new file with mode: 0644]
org.tizen.guides/html/images/csharp_widgetapplication.png [new file with mode: 0644]
vstools/tools/manifest_editor.htm

diff --git a/org.tizen.guides/html/dotnet/app_management/widget_app_cs.htm b/org.tizen.guides/html/dotnet/app_management/widget_app_cs.htm
new file mode 100644 (file)
index 0000000..4c01660
--- /dev/null
@@ -0,0 +1,367 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Widget Application</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Dependencies</p>
+               <ul class="toc">
+                       <li>Tizen 4.0 and Higher</li>
+               </ul>
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#app_instance">Widget Application and Widget Instance</a></li>
+                       <li><a href="#instance">Widget Instance States and Events</a></li>
+                       <li><a href="#prerequisites">Prerequisites</a></li>
+                       <li><a href="#create">Creating the Widget Application</a></li>
+                       <li><a href="#life-cycle">Managing the Widget Instance Life-cycle</a></li>
+                       <li><a href="#get_window">Drawing the Widget UI</a></li>
+                       <li><a href="#share">Data Sharing Between the Widget Application and Other Applications</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetApplication.html">Tizen.Applications.WidgetApplication Class</a></li>
+                       <li><a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetBase.html">Tizen.Applications.WidgetBase Class</a></li>
+                       <li><a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetControl.html">Tizen.Applications.WidgetControl Class</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Widget Application</h1>
+<p>You can create widget applications, which are Tizen .NET applications shown on the home screen. They are launched by the home screen when the user selects them in the <strong>Add Widget</strong> menu.</p>
+
+  <p>The main widget application features include:</p>
+  <ul>
+    <li>Creating widget applications
+       <p>You can <a href="#create">create a widget application</a>, which usually has 1 process for maintaining the main loop. Within the process, the framework can <a href="#app_instance">create multiple widget instances</a> that can share the same resources.</p>
+       <p>The widget application can also <a href="#share">share data</a> with other applications.</p></li>
+       <li>Managing multiple widget instances
+       <p>Whenever a widget instance is requested, the framework creates one. You can manage the widget instances by updating or destroying them, or by retrieving information about them.</p></li>
+       <li>Managing the life-cycle
+       <p>You can manage the <a href="#instance">widget instance</a> life-cycle through callback methods that are triggered as the instance state changes.</p></li>
+       <li>Creating the widget UI
+       <p>The widget application can <a href="#get_window">draw a UI on the home screen</a>.</p>
+
+       <div class="note">
+               <strong>Note</strong>
+               The widget application UI has a limitation with the scroll action to provide a better user experience. Design the widget UI to display all the information within the given area of the screen points.
+               <p>To draw the UI, use a single window as a protected property of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetBase.html">Tizen.Applications.WidgetBase</a> class. Do not create additional windows. A stack of widget application windows gets corrupted, because the platform handles the widget application window in a special way.</p>
+       </div>
+
+       </li>
+  </ul>
+
+<h2 id="app_instance">Widget Application and Widget Instance</h2>
+
+<p>The <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetApplication.html">Tizen.Applications.WidgetApplication</a> class provides the <code>WidgetApplication(IDictionary&lt; Type, string &gt; typeInfo)</code> constructor, which allows a widget application to have multiple widget classes. The widget applications with multiple classes can make diverse class instances whenever widget viewer applications, such as the home screen and the lock screen, request for a widget instance.</p>
+<p>The widget instance has its own life-cycle similar to the widget application. However, the widget instance is only an object shown by the widget viewer applications. Many widget instances can be running on the same widget application process.</p>
+<p align="center"><strong>Figure: Each widget application has 1 or more widget instances</strong></p>
+<p align="center"><img alt="Each widget application has 1 or more widget instances" src="../../images/widget_homescreen.png"/></p>
+
+<h2 id="instance">Widget Instance States and Events</h2>
+
+<p>The following figure illustrates the widget instance states during the instance life-cycle:</p>
+<ul>
+       <li>When the application is in the Ready state, the instance does not exist.</li>
+       <li>When the instance is created, it is in the Created state.</li>
+       <li>When the instance is visible, it is in the Running state.</li>
+       <li>When the instance is invisible, it is in the Paused state.</li>
+       <li>When the instance is destroyed, it is in the Destroyed state.</li>
+</ul>
+
+<p align="center"><strong>Figure: Widget instance life-cycle</strong></p>
+<p align="center"><img alt="Widget instance life-cycle" src="../../images/csharp_widgetapplication.png" /></p>
+
+<p>The following table lists the <a href="#life-cycle">callbacks you can use as the instance state changes</a>.</p>
+
+<p align="center" class="Table"><strong>Table: Instance state change callbacks</strong></p>
+<table>
+       <tbody>
+       <tr>
+               <th>Callback</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><code>OnCreate()</code></td>
+               <td>Called after the widget instance is created.</td>
+       </tr>
+       <tr>
+               <td><code>OnDestroy()</code></td>
+               <td>Called before the widget instance is destroyed.</td>
+       </tr>
+   <tr>
+               <td><code>OnPause()</code></td>
+               <td>Called when the widget is invisible.</td>
+       </tr>
+       <tr>
+               <td><code>OnResume()</code></td>
+               <td>Called when the widget is visible.</td>
+       </tr>
+       <tr>
+               <td><code>OnResize()</code></td>
+               <td>Called before the widget size is changed.</td>
+       </tr>
+       <tr>
+               <td><code>OnUpdate()</code></td>
+               <td>Called when an event for updating the widget is received.</td>
+       </tr>
+       </tbody>
+</table>
+
+<p>You can declare a widget class by inheriting the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetBase.html">Tizen.Applications.WidgetBase</a> class. For example:</p>
+
+<pre class="prettyprint">
+class MyWidget : WidgetBase
+{
+    public override void OnCreate(Bundle content, int w, int h) {}
+
+    public override void OnPause() {}
+
+    public override void OnResume() {}
+
+    public override void OnResize(int w, int h) {}
+
+    public override void OnUpdate(Bundle content, bool isForce) {}
+
+    public override void OnDestroy(WidgetDestroyType reason, Bundle content) {}
+}
+</pre>
+
+<h2 id="prerequisites">Prerequisites</h2>
+
+<p>To enable your application to use the widget functionality:</p>
+
+<ol>
+       <li>To use the methods and properties of the <a href="https://developer.tizen.org/dev-guide/csapi/namespaceTizen_1_1Applications.html">Tizen.Applications</a> namespace, include it in your application:
+<pre class="prettyprint">
+using Tizen.Applications;
+</pre>
+       </li>
+       <li>In Visual Studio, open the <strong>tizen-manifest.xml</strong> file with the text editor and add the <a href="../../../../vstools/tools/manifest_editor.htm#widget_app">&lt;widget-application&gt; manifest element</a>.
+       <p>The following code example shows how the <code>&lt;widget-application&gt;</code> element is consequently added to the <code>tizen-manifest.xml</code> file:</p>
+<pre class="prettyprint">
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="3.0" package="@PACKAGE_NAME@" version="@VERSION@"&gt;
+   &lt;profile name="common" /&gt;
+   &lt;widget-application appid="org.tizen.widgetsample"
+                       exec="widgetsample.dll"
+                       type="dotnet"
+                       main="true"
+                       update-period="0"&gt;
+        &lt;icon&gt;widgetsample.png&lt;/icon&gt;
+        &lt;label&gt;widgetsample&lt;/label&gt;
+        &lt;support-size preview="widgetsample.png"&gt;4X4&lt;/support-size&gt;
+   &lt;/widget-application&gt;
+&lt;/manifest&gt;
+</pre>
+</li>
+</ol>
+
+ <h2 id="create">Creating the Widget Application</h2>
+<p>The widget application starts with the <code>Main()</code> function, which creates and initializes the application. The <code>Run()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetApplication.html">Tizen.Applications.WidgetApplication</a> class is used to start the application event loop.</p>
+
+<p>The <code>Tizen.Applications.WidgetApplication</code> class provides 2 kinds of constructors:</p>
+<ul>
+<li>If you create the widget application with the <code>WidgetApplication(Type type)</code> constructor, that widget application's ID is the same as the application ID.</li>
+<li>Using the <code>WidgetApplication(IDictionary&lt;Type, string&gt; typeInfo)</code> constructor, you can make widget applications with multiple widget classes.</li>
+</ul>
+<p>A widget viewer application can add the widget application by using the widget application ID.</p>
+
+<pre class="prettyprint">
+class Program
+{
+    static void Main(string[] args)
+    {
+        Elementary.Initialize();
+        Elementary.ThemeOverlay();
+        WidgetApplication app = new WidgetApplication(typeof(MyFirstWidget));
+        WidgetApplication app = new WidgetApplication(new Dictionary&lt;Type, string&gt;()
+        {
+            {typeof(MySecondWidget), "second@org.tizen.MyWidget"}
+        });
+        app.Run(args);
+    }
+}
+</pre>
+
+<h2 id="life-cycle">Managing the Widget Instance Life-cycle</h2>
+<p>To manage the widget instance life-cycle:</p>
+<ol>
+       <li>Define your widget class, which is inherited from the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1WidgetBase.html">Tizen.Applications.WidgetBase</a> class:
+
+<pre class="prettyprint">
+class MyWidget : WidgetBase {}
+</pre>
+       </li>
+       <li>Override the event callback methods of your new class:
+               <ul>
+                       <li>The <code>OnCreate()</code> callback is triggered when the widget instance is created.
+                       <p>Initialize resources for this widget instance and <a href="#get_window">draw the UI</a>. If bundle content is not <code>NULL</code>, restore the previous status.</p>
+<pre class="prettyprint">
+public override void OnCreate(Bundle content, int w, int h)
+{
+    try
+    {
+        base.OnCreate(content, w, h);
+        /// Recover the previous status with the bundle object
+        /// Create the UI
+    }
+    catch (Exception e)
+    {
+        Log.Warn(_logTag, "exception " + e);
+    }
+}
+</pre>
+                       </li>
+                       <li>The <code>OnDestroy()</code> callback is triggered when the widget instance is destroyed.
+                       <p>Release all widget resources. If the <code>reason</code> for the termination is not <code>WidgetDestroyType.Permanent</code>, store the current status with the incoming bundle.</p>
+<pre class="prettyprint">
+public override void OnDestroy(WidgetDestroyType reason, Bundle content)
+{
+    if (reason != WidgetDestroyType.Permanent)
+        /// Save the current status at the bundle object
+}
+</pre>
+                       </li>
+                       <li>The <code>OnPause()</code> callback is triggered when the widget instance is paused.
+                       <p>Take the necessary actions when the widget instance becomes invisible. The framework can destroy a paused widget instance.</p>
+<pre class="prettyprint">
+public override void OnPause() {}
+</pre>
+                       </li>
+                       <li>The <code>OnResume()</code> callback is triggered when the widget instance is resumed.
+                       <p>Take the necessary actions when the widget instance becomes visible.</p>
+<pre class="prettyprint">
+public override void OnResume() {}
+</pre>
+                       </li>
+                       <li>The <code>OnResize()</code> callback is triggered before the widget instance is resized.
+                       <p>Take the necessary actions to accommodate the new size.</p>
+<pre class="prettyprint">
+public override void OnResize(int w, int h) {}
+</pre>
+                       </li>
+                       <li>The <code>OnUpdate()</code> callback is triggered when a widget update event is received.
+                       <p>Take the necessary actions for the widget update. If the <code>isForce</code> parameter is <code>true</code>, the widget can be updated even in the pause state.</p>
+<pre class="prettyprint">
+public override void OnUpdate(Bundle content, bool isForce) {}
+</pre>
+                       </li>
+               </ul>
+       </li>
+</ol>
+
+<h2 id="get_window">Drawing the Widget UI</h2>
+
+<p>The widget UI is drawn in the <code>OnCreate()</code> callback of your widget class:</p>
+<pre class="prettyprint">
+public override void OnCreate(Bundle content, int w, int h)
+{
+    try
+    {
+        base.OnCreate(content, w, h);
+        Conformant conformant = new Conformant(Window);
+        conformant.Show();
+        Scroller scroller = new Scroller(Window)
+        {
+            AlignmentX = -1,
+            AlignmentY = -1,
+            WeightX = 1,
+            WeightY = 1,
+            ScrollBlock = ScrollBlock.None,
+        };
+        scroller.Show();
+
+        Box box = new Box(Window)
+        {
+            AlignmentX = -1,
+            AlignmentY = -1,
+            WeightX = 1,
+            WeightY = 1,
+        };
+        box.Show();
+        scroller.SetContent(box);
+        conformant.SetContent(scroller);
+
+        Button exitButton = new Button(Window)
+        {
+            Text = "Exit Test",
+            AlignmentX = -1,
+            AlignmentY = -1,
+            WeightX = 1,
+            WeightY = 1
+        };
+        box.PackEnd(exitButton);
+        exitButton.Show();
+    }
+    catch (Exception e)
+    {
+        Log.Warn(_logTag, "exception " + e);
+    }
+}
+</pre>
+
+
+<h2 id="share">Data Sharing Between the Widget Application and Other Applications</h2>
+
+<p>You can share data between widget applications and UI (or service) applications. However, you must understand that this kind of data sharing is dependent on the file system. The reason is that the system (home screen) controls the widget application life-cycle, while the UI application life-cycle is mostly explicitly controlled by the user.</p>
+
+<p>For example, consider the differences between a Weather application and a Weather widget:</p>
+<ul>
+       <li>The Weather application is launched when the user selects it from the application list.</li>
+       <li>The widget is launched when the home screen is on screen and is terminated when the home screen is hidden.</li>
+</ul>
+
+<p>Although the widget wants to share some data from the Weather application (such as the user's favorite city), it is ineffective for the widget to launch the Weather application every time to retrieve such data. This inefficiency makes it difficult to use typical IPC mechanisms, such as sockets and <a href="../message_port_n.htm">message ports</a>, for which both the receiver and sender processes must be alive. To overcome this limitation, the widget application must use a communication method that stores data permanently somewhere in the system.</p>
+
+<p>In the Tizen platform, applications in the same package (including widget applications) can access files in the <code>data</code> directory of the package installation path. This means that the UI (or service) application can first write files to the <code>data</code> directory, and the widget can later read them, or vice versa.</p>
+
+<p align="center"><strong>Figure: Sharing through the data directory</strong></p>
+<p align="center"><img alt="Sharing through the data directory" src="../../images/widget_data_share.png" /></p>
+
+<p>To manage data through the <code>data</code> directory, you can use the methods and properties of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Preference.html">Tizen.Applications.Preference</a> class to store and retrieve key-value pairs.</p>
+
+<p>If an application requires complex control over a widget, such as Music Player, it must implement a service application in the middle and use a data control with the classes and methods of the <a href="https://developer.tizen.org/dev-guide/csapi/namespaceTizen_1_1Applications_1_1DataControl.html">Tizen.Applications.DataControl</a> namespace.</p>
+<p>For example, a music-player-service service application is needed to control the audio device, process audio files, and handle play and stop signals. The music-player-ui and music-player-widget applications display the UI controls, title, album art, and other content retrieved from the music-player-service service application. The service application can export its data using the data control to <a href="../data_control_n.htm">provide data to the other applications</a> (widget and UI) simultaneously. The following figure illustrates the typical data control flows between the set of UI, service, and widget applications.</p>
+
+<p align="center"><strong>Figure: Sharing through data control</strong></p>
+<p align="center"><img alt="Sharing through data control" src="../../images/widget_data_control_share.png" /></p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.guides/html/images/csharp_widgetapplication.png b/org.tizen.guides/html/images/csharp_widgetapplication.png
new file mode 100644 (file)
index 0000000..4fd354f
Binary files /dev/null and b/org.tizen.guides/html/images/csharp_widgetapplication.png differ
index 45bcbf0..1fa57c1 100644 (file)
@@ -139,6 +139,64 @@ The <code>tizen-manifest.xml</code> file must conform to both the standard XML f
                        <td colspan="5" style="border:none;"><code><a href="#watch_icon">&lt;icon&gt;</a></code></td>
                </tr>
                <tr>
+               <td style="border:none;"> </td>
+                               <td colspan="6" style="border:none;">
+                               <code><a href="#widget_app">&lt;widget-application&gt;</a></code>
+               </td>
+                       </tr>
+               <tr>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+                               <td colspan="5" style="border:none;">
+                               <code><a href="#widget_icon">&lt;icon&gt;</a></code>
+                               </td>
+                       </tr>
+                       <tr>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+                               <td colspan="5" style="border:none;">
+                               <code><a href="#widget_label">&lt;label&gt;</a></code>
+                               </td>
+                       </tr>
+               <tr>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+                               <td colspan="5" style="border:none;">
+                               <code><a href="#widget_supportsize">&lt;support-size&gt;</a></code>
+                               </td>
+                       </tr>
+               <tr>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+                               <td colspan="5" style="border:none;">
+                               <code><a href="#widget_class">&lt;widget-class&gt;</a></code>
+                               </td>
+                       </tr>
+               <tr>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+                               <td colspan="4" style="border:none;">
+                               <code><a href="#widget_icon">&lt;icon&gt;</a></code>
+                               </td>
+                       </tr>
+                       <tr>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+                               <td colspan="4" style="border:none;">
+                               <code><a href="#widget_label">&lt;label&gt;</a></code>
+                               </td>
+                       </tr>
+               <tr>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+               <td style="border:none;"> </td>
+                               <td colspan="4" style="border:none;">
+                               <code><a href="#widget_supportsize">&lt;support-size&gt;</a></code>
+                               </td>
+                       </tr>
+               <tr>
                        <td style="border:none;"> </td>
                        <td colspan="6" style="border:none;"><code><a href="#shortcut-list">&lt;shortcut-list&gt;</a></code></td>
                </tr>
@@ -558,7 +616,7 @@ The <code>tizen-manifest.xml</code> file must conform to both the standard XML f
                <li><code>exec</code>
                <p>Watch application executable file path (string)</p></li>
                <li><code>type</code>
-               <p>Tizen application type (available value: <code>dotnet</code>)</p>
+               <p>Tizen application type (available value: <code>dotnet</code>)</p></li>
        </ul>
 
 <pre class="prettyprint">
@@ -603,6 +661,174 @@ The <code>tizen-manifest.xml</code> file must conform to both the standard XML f
 &lt;icon&gt;watchsample.png&lt;/icon&gt;
 </pre>
 
+
+<h3 id="widget_app">&lt;widget-application&gt; Element</h3>
+  <p>This element contains the settings for a widget application.</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>
+<li>1 (optional)</li>
+      </ul>
+<p><strong>Expected children:</strong> </p>
+
+<table border="1"><tbody>
+<tr>
+       <th width="50%">Child element</th>
+       <th>Occurrences</th>
+</tr>
+<tr>
+       <td><code><a href="#widget_label">&lt;label&gt;</a></code></td>
+     <td>1 or more</td>
+</tr>
+<tr>
+       <td><code><a href="#widget_icon">&lt;icon&gt;</a></code></td>
+     <td>1 or more</td>
+</tr>
+<tr>
+       <td><code><a href="#widget_supportsize">&lt;support-size&gt;</a></code></td>
+       <td>1</td>
+</tr>
+<tr>
+       <td><code><a href="#widget_class">&lt;widget-class&gt;</a></code></td>
+       <td>1 or more (optional)</td>
+</tr>
+</tbody></table>
+
+<p><strong>Attributes:</strong> </p>
+         <ul>
+               <li><code>appid</code>
+
+               <p>Widget application unique ID (string)</p></li>
+               <li><code>exec</code>
+               <p>Widget application executable file name (string)</p></li>
+               <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>
+               <li><code>setup-appid</code>
+               <p>Widget application setup application ID (string)</p></li>
+               <li><code>max-instance</code>
+               <p>Indicates the maximum number of widget instances that can be created in the widget application</p></li>
+      </ul>
+
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;widget-application appid="org.tizen.test" exec="test" main="true" update-period="0" max-instance="5" setup-appid="org.tizen.widget-setting"&gt;
+   &lt;label&gt;.....&lt;/label&gt;
+   &lt;icon&gt;.....&lt;/icon&gt;
+   &lt;support-size&gt;.....&lt;/support-size&gt;
+   &lt;widget-class&gt;.....&lt;/widget-class&gt;
+&lt;/widget-application&gt;
+</pre>
+
+<h4 id="widget_label">&lt;label&gt; Element</h4>
+  <p>This element contains the widget application text.</p>
+<p><strong>Occurrences:</strong> </p>
+      <ul>
+<li>1 or more</li>
+      </ul>
+
+<p><strong>Expected value:</strong> </p>
+         <ul>
+         <li>Label value in string</li>
+      </ul>
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;label&gt;test&lt;/label&gt;
+</pre>
+
+<h4 id="widget_icon">&lt;icon&gt; Element</h4>
+  <p>This element contains the widget application icon image.</p>
+<p><strong>Occurrences:</strong> </p>
+      <ul>
+<li>1 or more</li>
+      </ul>
+
+<p><strong>Expected value:</strong> </p>
+         <ul>
+         <li>Icon file name</li>
+      </ul>
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;icon&gt;icon.png&lt;/icon&gt;
+</pre>
+
+<h4 id="widget_supportsize">&lt;support-size&gt; Element</h4>
+  <p>This element contains the size supported by the widget application.</p>
+<p><strong>Occurrences:</strong> </p>
+      <ul>
+<li>1</li>
+      </ul>
+<p><strong>Attributes:</strong> </p>
+               <ul>
+         <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><code>2x2</code> (in mobile and wearable)</li>
+         <li><code>4x1</code> (in mobile)</li>
+         <li><code>4x2</code> (in mobile)</li>
+         <li><code>4x3</code> (in mobile)</li>
+      <li><code>4x4</code> (in mobile)</li>
+      </ul>
+
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;support-size preview="preview.png"&gt;2x2&lt;/support-size&gt;
+</pre>
+
+<h4 id="widget_class">&lt;widget-class&gt; Element</h4>
+  <p>This element contains the settings for the widget class. After adding this element, you can use the <code>widget_app_class_add()</code> function to create widget instances in the widget application (maximum number of instances is defined in the <code>max-instance</code> attribute of the <code>&lt;widget-application&gt;</code> element).</p>
+<p><strong>Occurrences:</strong> </p>
+      <ul>
+<li>1 or more (optional)</li>
+      </ul>
+<p><strong>Expected children:</strong> </p>
+
+<table border="1"><tbody>
+       <tr>
+               <th width="50%">Child element</th>
+               <th>Occurrences</th>
+       </tr>
+       <tr>
+               <td><code><a href="#widget_label">&lt;label&gt;</a></code></td>
+     <td>1 or more</td>
+       </tr>
+       <tr>
+               <td><code><a href="#widget_icon">&lt;icon&gt;</a></code></td>
+     <td>1 or more</td>
+       </tr>
+       <tr>
+               <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><code>classid</code>
+               <p>Widget application class unique ID (string)</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>
+               <li><code>setup-appid</code>
+               <p>Widget application setup application ID (string)</p></li>
+      </ul>
+
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;widget-class classid="class1" update-period="0" setup-appid="org.tizen.widget-setting"&gt;
+   &lt;label&gt;.....&lt;/label&gt;
+   &lt;icon&gt;.....&lt;/icon&gt;
+   &lt;support-size&gt;.....&lt;/support-size&gt;
+&lt;/widget-class&gt;
+</pre>
+
+
 <h3 id="shortcut-list">&lt;shortcut-list&gt; Element</h3>
 
 <p>This element contains the shortcut template list used for adding a shortcut to the home screen.</p>