[minicontrol] New guide and tutorial.
authorKyuho Jo <kyuho.jo@samsung.com>
Tue, 28 Jul 2015 05:40:27 +0000 (14:40 +0900)
committerKyuho Jo <kyuho.jo@samsung.com>
Tue, 28 Jul 2015 05:41:25 +0000 (14:41 +0900)
Change-Id: I77d04bfae3bd64c859eac9eb1d5a35b9b949d555
Signed-off-by: Kyuho Jo <kyuho.jo@samsung.com>
org.tizen.guides/html/images/minicontrol-on-lockscreen.png [new file with mode: 0644]
org.tizen.guides/html/images/minicontrol-on-quickpanel.png [new file with mode: 0644]
org.tizen.guides/html/native/app/minicontrol_n.htm [new file with mode: 0644]
org.tizen.tutorials/html/images/minicontrol.png [new file with mode: 0644]
org.tizen.tutorials/html/native/app_framework/minicontrol_tutorial_n.htm [new file with mode: 0644]

diff --git a/org.tizen.guides/html/images/minicontrol-on-lockscreen.png b/org.tizen.guides/html/images/minicontrol-on-lockscreen.png
new file mode 100644 (file)
index 0000000..37cb28e
Binary files /dev/null and b/org.tizen.guides/html/images/minicontrol-on-lockscreen.png differ
diff --git a/org.tizen.guides/html/images/minicontrol-on-quickpanel.png b/org.tizen.guides/html/images/minicontrol-on-quickpanel.png
new file mode 100644 (file)
index 0000000..b06615a
Binary files /dev/null and b/org.tizen.guides/html/images/minicontrol-on-quickpanel.png differ
diff --git a/org.tizen.guides/html/native/app/minicontrol_n.htm b/org.tizen.guides/html/native/app/minicontrol_n.htm
new file mode 100644 (file)
index 0000000..02cb4f5
--- /dev/null
@@ -0,0 +1,92 @@
+<!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>Minicontrol</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/minicontrol_tutorial_n.htm">Minicontrol Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__MODULE.html">Minicontrol API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__MINICONTROL__MODULE.html">Minicontrol API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Minicontrol</h1>
+<p>Minicontrol is small application view can be shown on Quick panel or lock screen.</p>
+
+<table>
+<tr>
+<td>
+<p class="figure">Figure: Minicontrol on Quick panel</p> 
+<p align="center"><img alt="minicontrol-on-quickpanel" src="../../images/minicontrol-on-quickpanel.png" /></p>
+</td>
+<td>
+<p class="figure">Figure: Minicontrol on lock screen</p> 
+<p align="center"><img alt="minicontrol-on-lockscreen" src="../../images/minicontrol-on-lockscreen.png" /></p>
+</td>
+</tr>
+</table>
+
+<p>There are two kinds of minicontol API. </p>
+<ul>
+       <li> 
+               minicontrol provider API : API for creating minicontrols of your application
+               <p>The Tizen Minicontrol provider API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/minicontrol.provider</span> privilege.</p>
+       </li>
+       <li> 
+               minicontrol viewer API : API for hosting minicontrols likes lock screen
+               <p>The Tizen Minicontrol viewer API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/minicontrol.viewer</span> privilege.</p>
+       </li>
+</ul>
+<BR>
+<p>To create the minicontrol :</p>
+<ul><li>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function, which returns a Evas_Object of minicontrol window</li>
+<li>To send a request to , use the <span style="font-family: Courier New,Courier,monospace">minicontrol_send_event()</span> function to get a minicontrol handle and set the details.</li></ul>
+<BR>
+<p>To host minicontrols :</p>
+<ul><li>To host mincontrols, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_viewer_set_event_cb()</span> function for listening the request from minicontrol providers. </li>
+<li>When you get the creation request from minicontrol provider, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_viewer_add()</span> function to add the minicontrol on your application.</li></ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/images/minicontrol.png b/org.tizen.tutorials/html/images/minicontrol.png
new file mode 100644 (file)
index 0000000..46c7a68
Binary files /dev/null and b/org.tizen.tutorials/html/images/minicontrol.png differ
diff --git a/org.tizen.tutorials/html/native/app_framework/minicontrol_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/minicontrol_tutorial_n.htm
new file mode 100644 (file)
index 0000000..4696098
--- /dev/null
@@ -0,0 +1,142 @@
+<!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>Minicontrol: Creating a minicontrol</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#add">Creating a minicontrol</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/minicontrol_n.htm">Minicontrol Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__MODULE.html">Minicontrol API for Mobile Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Minicontrol: Creating a minicontrol</h1>
+
+  
+<p>This tutorial demonstrates how you can create minicontrols on the Quick panel or the lock screen, and hide a minicontrol viewer.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Minicontrol API basics by learning about:</p>
+       <ul>
+               <li><a href="#create">Creating a minicontrol on Quick panel</a>
+               <p>Create a minicontrol on Quick panel.</p></li>
+       </ul>
+       <ul>
+               <li><a href="#hide">Hiding the Quick panel</a>
+               <p>Send a request for hiding the Quick panel.</p></li>
+       </ul>
+
+<h2 id="create" name="create">Creating a minicontrol on Quick panel</h2>
+
+<p>To create a minicontrol of your application:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__MODULE.html">Minicontrol</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;minicontrol_provider.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;minicontrol_provider.h&gt;
+</pre>
+</li>
+<li><p>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function:</p>
+
+<pre class="prettyprint">
+Evas_Object *win;
+
+win = minicontrol_create_window(&quot;mini-sample&quot;, MINICONTROL_TARGET_VIEWER_QUICK_PANEL, NULL);
+evas_object_resize(win, 480, 140);
+evas_object_show(win);
+</pre>
+
+<p>To create a minicontrol on Quick panel, the <span style="font-family: Courier New,Courier,monospace">target_viewer</span> parameter must be set to <span style="font-family: Courier New,Courier,monospace">MINICONTROL_TARGET_VIEWER_QUICK_PANEL</span>.</p></li>
+
+<li>Add a text label on the minicontrol using the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function:</p>
+
+<pre classs="prettyprint">
+label = elm_label_add(win);
+elm_object_text_set(label, "mini-sample");
+evas_object_resize(label, 480, 140);
+evas_object_show(label);
+</pre>
+</ol>
+
+<h2 id="hide" name="hide">Hiding Quick panel</h2>
+<p>To hide Quick panel:</p>
+<ol>
+<li>
+<p>Add a button on the minicontrol</p>
+</li>
+<pre class="prettyprint">
+button = elm_button_add(win);
+elm_object_text_set(button, "Click to hide.");
+evas_object_move(button, 0, 50);
+evas_object_resize(button, 200, 50);
+evas_object_show(button);
+</pre>
+<li>
+<p>Add an event handler callback function</p>
+</li>
+<pre class="prettyprint">
+evas_object_smart_callback_add(button, "clicked", _button_clicked_cb, win);
+</pre>
+<li>
+<p>Define callback function for hiding Quickpanel</p>
+</li>
+<pre class="prettyprint">
+static void _button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+       Evas_Object *win = data;
+       minicontrol_send_event(win, MINICONTROL_PROVIDER_EVENT_REQUEST_HIDE, NULL);
+}
+</pre>
+</ol>
+
+<p class="figure">Figure: Minicontrol on quick panel</p> 
+<p align="center"><img alt="minicontrol-on-quickpanel" src="../../images/minicontrol.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>
\ No newline at end of file