--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Alarm Widget Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+
+<div id="container"><div id="contents"><div class="content">
+
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+</div>
+
+
+<h1>Alarm Widget Sample Overview</h1>
+
+<p>The Alarm widget sample demonstrates how to manage text objects and image objects to create a complete widget view.</p>
+<p>The following figure illustrates the main screen of the Alarm widget.</p>
+<p class="figure">Figure: Alarm main view</p>
+<p align="center"><img src="../images/alarm_wearable_sd.png" alt="Alarm main view" /></p>
+
+<p>This sample consists of the view and main operation parts.</p>
+
+<h2>View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates the widget view frame that consists of the window, text parts, and image parts.</p>
+<pre class="prettyprint">
+view_create(context, w, h);
+</pre>
+<p>The following figure illustrates the view frame.</p>
+<p class="figure">Figure: Alarm view frame</p>
+<p align="center"><img src="../images/alarm_structure_wearable_sd.png" alt="Alarm view frame" /></p>
+
+<p>To fill out text parts with the part name and the text, use the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function.</p>
+
+<p>Implement the <span style="font-family: Courier New,Courier,monospace">data_get_text()</span> function to create the text you want to use. In this function, you can also choose the part name which you want to fill out. Then, call the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function with the part name and text you obtained.</p>
+<p>In this example, the text to use is <span style="font-family: Courier New,Courier,monospace">time_txt</span> and the part name to fill out is <span style="font-family: Courier New,Courier,monospace">widget.time</span>.</p>
+<pre class="prettyprint">
+time_txt = data_get_text("widget.time");
+view_set_text(wid, "widget.time", time_txt);
+</pre>
+
+<h2>Main Operation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_set_event_callback()</span> function controls the widget main operation that launches the application.</p>
+<p>The launch options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_PRESSED</span> for launch on a touch press event</li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_RELEASED</span> for launch on a touch release event </li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_CLICKED</span>for launch on a click event</li>
+</ul>
+<p>In this example, the application is launched when you click the widget.</p>
+<pre class="prettyprint">
+view_set_event_callback(wid, "widget.event", WIDGET_EVENT_CLICKED, clicked_cb);
+</pre>
+
+
+
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>(Circle) Music Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+
+<div id="container"><div id="contents"><div class="content">
+
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+</div>
+
+
+<h1>(Circle) Music Sample Overview</h1>
+
+<p>The Music sample appliction shows you how to create a music application. Especially, it demonstrates how to draw the UI for a music player.</p>
+<p>The following figure illustrates the main screen of the Music sample application.</p>
+<p class="figure">Figure: (Circle) Music main views</p>
+<p align="center"><img src="../images/music_wearable_sd.png" alt="Music main view" /></p>
+
+<p>This sample consists of the view and main operation parts.</p>
+
+<h2>View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates the widget view frame consisting of window, text parts, image parts, and so on.</p>
+<pre class="prettyprint">
+view_create(context, w, h);
+</pre>
+<p>The following figure illustrates the view frame.</p>
+<p class="figure">Figure: Music view frame</p>
+<p align="center"><img src="../images/music_structure_wearable_sd.png" alt="Music view frame" /></p>
+
+<p>To create the parts:</p>
+
+<ul>
+<li>Text
+<p>You can fill out text parts with the part name and the text using the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function.</p>
+<p>Implement the <span style="font-family: Courier New,Courier,monospace">data_get_music_title()</span> function to create the text to use. Then, call the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function with the part name and text you obtained.</p>
+<p>In this example, the text to use is <span style="font-family: Courier New,Courier,monospace">txt</span> and the part name to fill out is <span style="font-family: Courier New,Courier,monospace">txt.title</span>.</p>
+<pre class="prettyprint">
+txt = data_get_music_title(0);
+view_set_text(wid, "txt.title", txt);
+</pre>
+</li>
+<li>Image
+<p>You can create an image object using the <span style="font-family: Courier New,Courier,monospace">view_set_image()</span> function. Pass the part name which you want to draw and the name of image file including its directory path.</p>
+<p>In this example, the part name is <span style="font-family: Courier New,Courier,monospace">sw.icon.device</span> and the icon contains the path of an image file in the <span style="font-family: Courier New,Courier,monospace">images</span> directory.</p>
+<pre class="prettyprint">
+icon = data_get_image("sw.icon.device");
+view_set_image(ad->content, "sw.icon.device", icon);
+</pre>
+</li>
+<li>Button
+<p>You can create buttons using the <span style="font-family: Courier New,Courier,monospace">view_set_button()</span> function.</p>
+<p>Call the function with the part name, image path, button text, callback function, and user data.</p>
+<p>In this example, the part name is <span style="font-family: Courier New,Courier,monospace">sw.icon.next</span> and the icon contains the path of an image file in the <span style="font-family: Courier New,Courier,monospace">images</span> directory.</p>
+<pre class="prettyprint">
+view_set_button(ad->content, "sw.icon.next", icon, NULL, _next_clicked_cb, ad);
+</pre>
+<p>The callback function registered is called when the button is clicked.</p>
+</li>
+<li>Progress bar
+<p>You can create a progress bar using the <span style="font-family: Courier New,Courier,monospace">view_set_prgressbar()</span> function. Pass the part name as a parameter.</p>
+<p>In this example, the part name is <span style="font-family: Courier New,Courier,monospace">sw.progressbar</span>.</p>
+<pre class="prettyprint">
+view_set_prgressbar(ad->content, "sw.progressbar");
+</pre>
+
+<p>You can change value of progressbar using the <span style="font-family: Courier New,Courier,monospace">view_set_progressbar_val()</span> function.</p>
+<p>In this example, the part name is <span style="font-family: Courier New,Courier,monospace">sw.progressbar</span> and the value you want to set.</p>
+<pre class="prettyprint">
+view_set_progressbar_val(ad->content, "sw.progressbar", 70);
+</pre>
+</li>
+<li>More button
+<p>You can create a more button using the <span style="font-family: Courier New,Courier,monospace">view_set_more_button()</span> function. Pass the part name as a parameter.</p>
+<pre class="prettyprint">
+view_set_more_button(ad->content, "sw.more");
+</pre>
+<p>You can add add items to more button. In this example, the part name is <span style="font-family: Courier New,Courier,monospace">sw.more</span>, and <span style="font-family: Courier New,Courier,monospace">main_txt</span> and <span style="font-family: Courier New,Courier,monospace">sub_txt</span> are displayed when item is selected. The <span style="font-family: Courier New,Courier,monospace">img_path</span> contains the path of image file in the <span style="font-family: Courier New,Courier,monospace">images</span> directory.</p>
+<p>You can also register a callback function and user data.</p>
+<pre class="prettyprint">
+view_add_more_button_item(ad->content, "sw.more", main_txt, sub_txt, img_path, _item_clicked_cb, ad);
+</pre>
+</li>
+</ul>
+
+<h2>Main Operation</h2>
+
+<p>To create the music application:</p>
+<ol>
+<li>Create the music application UI.
+<p>The application starts with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, where the life-cycle callbacks are registered. The <span style="font-family: Courier New,Courier,monospace">app_create()</span> callback function is called first. After that, the <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates the base UI of the application.</p>
+<pre class="prettyprint">
+static bool
+app_create(void *data)
+{
+ // Hook to take necessary actions before main event loop starts
+ // Initialize UI resources and application data
+ // If this function returns true, the main loop of application starts
+ // If this function returns false, the application is terminated
+ appdata_s *ad = data;
+ char *bg = NULL;
+ char *icon = NULL;
+ char *txt = NULL;
+ int i = 0;
+
+ view_create(ad);
+
+ bg = data_get_image("sw.bg");
+ view_set_image(ad->content, "sw.bg", bg);
+ free(bg);
+
+ icon = data_get_image("sw.icon.vol");
+ view_set_button(ad->content, "sw.icon.vol", icon, NULL, _clicked_cb, "volume");
+ view_set_color(ad->content, "sw.icon.vol", 250, 250, 250, 255);
+ free(icon);
+
+ icon = data_get_image("sw.progressbar.bg");
+ view_set_image(ad->content, "sw.progressbar.bg", icon);
+ view_set_color(ad->content, "sw.progressbar.bg", 0, 87, 107, 255);
+ free(icon);
+
+ icon = data_get_image("sw.icon.play");
+ view_set_button(ad->content, "sw.icon.play", icon, NULL, _clicked_cb, "play");
+ view_set_color(ad->content, "sw.icon.play", 250, 250, 250, 255);
+ free(icon);
+
+ icon = data_get_image("sw.icon.prev");
+ view_set_button(ad->content, "sw.icon.prev", icon, NULL, _prev_clicked_cb, ad);
+ view_set_color(ad->content, "sw.icon.prev", 250, 250, 250, 255);
+ free(icon);
+
+ icon = data_get_image("sw.icon.next");
+ view_set_button(ad->content, "sw.icon.next", icon, NULL, _next_clicked_cb, ad);
+ view_set_color(ad->content, "sw.icon.next", 250, 250, 250, 255);
+ free(icon);
+
+ icon = data_get_image("sw.icon.device");
+ view_set_image(ad->content, "sw.icon.device", icon);
+ view_set_color(ad->content, "sw.icon.device", 250, 250, 250, 255);
+ free(icon);
+
+ txt = data_get_music_title(0);
+ view_set_text(ad->content, "txt.title", txt);
+ free(txt);
+
+ txt = data_get_music_artist(0);
+ view_set_text(ad->content, "txt.artist", txt);
+ free(txt);
+
+ evas_object_data_set(ad->content, "__ALBUM_ORDER__", (void *)0);
+
+ view_set_prgressbar(ad->content, "sw.progressbar");
+ view_set_color(ad->content, "sw.progressbar", 0, 192, 235, 255);
+ view_set_progressbar_val(ad->content, "sw.progressbar", 70);
+
+ view_set_more_button(ad->content, "sw.more");
+ for ( i = 0; i < 6; i++)
+ {
+ view_add_more_button_item(ad->content,
+ "sw.more",
+ more_btn_item[i].main_txt,
+ more_btn_item[i].sub_txt,
+ more_btn_item[i].img_path,
+ _more_btn_item_clicked_cb,
+ ad);
+ }
+
+ return true;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates base UI that is composed of window, conformant, and layout components.</p>
+<p>The wearable profile does not support the indicator function, so use a conformant that does not set the indicator mode.</p>
+<pre class="prettyprint">
+void
+view_create(appdata_s *ad)
+{
+ ad->win = view_create_win();
+ if (ad->win == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "window is NULL.");
+
+ return;
+ }
+
+ ad->conform = view_create_conformant(ad->win);
+ if (ad->conform == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to create a conformant");
+
+ return;
+ }
+
+ ad->content = view_create_layout_for_conformant(ad->win, ad->conform, EDJ_FILE, GRP_MAIN, ad);
+ if (ad->content == NULL)
+ {
+ evas_object_del(ad->win);
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to create a content.");
+
+ return;
+ }
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+<p>When it comes to layout, there are 2 methods to create a layout component. One of them involves creating an edc file that you can customize, and the other uses a premade edc file. This layout is created using a customized edc file.</p>
+
+<pre class="prettyprint">
+Evas_Object*
+view_create_layout_for_conformant(Evas_Object *parent, Evas_Object *conformant,
+ const char *file_name, const char *group_name,
+ void *user_data)
+{
+ Evas_Object *layout = NULL;
+
+ layout = view_create_layout(parent, file_name, group_name, user_data);
+ if (layout == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "parent is NULL.");
+
+ return NULL;
+ }
+
+ elm_object_content_set(conformant, layout);
+
+ return layout;
+}
+</pre>
+</li>
+<li>Create a more button component with the <span style="font-family: Courier New,Courier,monospace">view_create_more_button()</span> function.
+<pre class="prettyprint">
+void
+view_set_more_button(Evas_Object *parent, const char *part)
+{
+ Evas_Object *more_btn = NULL;
+
+ if (parent == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "parent is NULL.");
+
+ return;
+ }
+
+ more_btn = eext_more_option_add(parent);
+ if (more_btn == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "more option is NULL.");
+
+ return;
+ }
+
+ // Add the smart callbacks
+ evas_object_smart_callback_add(more_btn, "more,option,opened", _more_option_opened, NULL);
+ evas_object_smart_callback_add(more_btn, "more,option,closed", _more_option_closed, NULL);
+ evas_object_smart_callback_add(more_btn, "item,selected", _item_selected, NULL);
+
+ elm_object_part_content_set(parent, part, more_btn);
+}
+</pre>
+<p>You can add items to the more button component using the <span style="font-family: Courier New,Courier,monospace">view_add_more_button_item()</span> function.</p>
+<pre class="prettyprint">
+void
+view_add_more_button_item(Evas_Object *parent, const char *part, const char *main_txt,
+ const char *sub_txt, const char *img_path,
+ void (clicked_cb)(void *data, Evas_Object *obj,
+ void *event_info), void *user_data)
+{
+ Evas_Object *img = NULL;
+ Evas_Object *more_btn = NULL;
+ char full_path[PATH_MAX] = {0,};
+
+ more_btn = elm_object_part_content_get(parent, part);
+ if (more_btn == NULL)
+ {
+ return;
+ }
+
+ // Create the new item
+ Eext_Object_Item *item = eext_more_option_item_append(more_btn);
+
+ // Set the text in item text part
+ eext_more_option_item_part_text_set(item, "selector,main_text", main_txt);
+ eext_more_option_item_part_text_set(item, "selector,sub_text", sub_txt);
+
+ img = elm_image_add(more_btn);
+ _get_resource(img_path, full_path, sizeof(full_path));
+ elm_image_file_set(img, full_path, NULL);
+
+ // Set the content in item content part
+ eext_more_option_item_part_content_set(item, "item,icon", img);
+
+ evas_object_smart_callback_add(more_btn, "item,clicked", clicked_cb, user_data);
+}
+</pre>
+</li>
+<li>Click the next or previous button.
+<p>If you click the next or previous button, you can change the music information with the <span style="font-family: Courier New,Courier,monospace">_next_clicked_cb()</span> and <span style="font-family: Courier New,Courier,monospace">_prev_clicked_cb()</span> callbacks.</p>
+<pre class="prettyprint">
+static void
+_next_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+ char *bg = NULL;
+ char *title = NULL;
+ char *artist = NULL;
+ int index = 0;
+
+ index = (int)evas_object_data_get(ad->content, "__ALBUM_ORDER__");
+ index = (index + 1) % 2;
+ evas_object_data_set(ad->content, "__ALBUM_ORDER__", (void *)index);
+
+ dlog_print(DLOG_DEBUG, LOG_TAG, "next button is clicked(%d)", index);
+
+ bg = data_get_music_album_art(index);
+ view_set_image(ad->content, "sw.bg", bg);
+ free(bg);
+
+ title = data_get_music_title(index);
+ view_set_text(ad->content, "txt.title", title);
+ free(title);
+
+ artist = data_get_music_artist(index);
+ view_set_text(ad->content, "txt.artist", artist);
+ free(artist);
+}
+</pre>
+</li>
+</ol>
+
+<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>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>New Briefing Widget Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+
+<div id="container"><div id="contents"><div class="content">
+
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+</div>
+
+
+<h1>New Briefing Widget Sample Overview</h1>
+
+<p>The New Briefing widget sample demonstrates how to manage text objects and image objects to create a complete widget view.</p>
+<p>The following figure illustrates the main screen of the New Briefing widget.</p>
+<p class="figure">Figure: New Briefing main view</p>
+<p align="center"><img src="../images/new_briefing_wearable_sd.png" alt="New Briefing main view" /></p>
+
+<p>This sample consists of the view and main operation parts.</p>
+
+<h2>View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates the widget view frame that consists of the window, text parts, and image parts.</p>
+<pre class="prettyprint">
+view_create(context, w, h);
+</pre>
+<p>The following figure illustrates the view frame.</p>
+<p class="figure">Figure: New Briefing view frame</p>
+<p align="center"><img src="../images/new_briefing_structure_wearable_sd.png" alt="New Briefing view frame" /></p>
+
+<p>To create the parts:</p>
+<ul>
+<li>Text
+<p>You can fill out the text parts with the part name and the text using the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function.</p>
+
+<p>Implement the <span style="font-family: Courier New,Courier,monospace">data_get_text()</span> function to create the text you want to use. In this function, you can also choose the part name which you want to fill out. Then, call the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function with the part name and text you obtained.</p>
+<p>In this example, the text to use is <span style="font-family: Courier New,Courier,monospace">news_txt</span> and the part name to fill out is <span style="font-family: Courier New,Courier,monospace">widget.text</span>.</p>
+<pre class="prettyprint">
+news_txt = data_get_text("widget.text");
+view_set_text(wid, "widget.text", news_txt);
+</pre>
+</li>
+<li>Image
+<p>You can create a widget with image files using the <span style="font-family: Courier New,Courier,monospace">view_set_image()</span> function. Pass the part name which you want to draw and the name of image file including its directory path.</p>
+<p>In this example, the part name is <span style="font-family: Courier New,Courier,monospace">widget.bg</span> and the name of image file is <span style="font-family: Courier New,Courier,monospace">bg.png</span> in the <span style="font-family: Courier New,Courier,monospace">images</span> directory.</p>
+<pre class="prettyprint">
+view_set_image(wid, "widget.bg", "images/bg.png");
+</pre>
+</li>
+</ul>
+
+<h2>Main Operation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_set_event_callback()</span> function controls the widget main operation that launches the application.</p>
+<p>The launch options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_PRESSED</span> for launch on a touch press event</li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_RELEASED</span> for launch on a touch release event</li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_CLICKED</span> for launch on a click event</li>
+</ul>
+<p>In this example, the application is launched when you click the widget.</p>
+<pre class="prettyprint">
+view_set_event_callback(wid, "widget.event", WIDGET_EVENT_CLICKED, clicked_cb);
+</pre>
+
+
+
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Scheduler Widget Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+
+<div id="container"><div id="contents"><div class="content">
+
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+</div>
+
+
+<h1>Scheduler Widget Sample Overview</h1>
+
+<p>The Scheduler widget sample demonstrates how to manage text objects and image objects to create a complete widget view.</p>
+<p>The following figure illustrates the main screen of the Scheduler widget.</p>
+<p class="figure">Figure: Scheduler main view</p>
+<p align="center"><img src="../images/scheduler_wearable_sd.png" alt="Scheduler main view" /></p>
+
+<p>This sample consists of the view and main operation parts.</p>
+
+<h2>View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates the widget view frame that consists of the window, text parts, and image parts.</p>
+<pre class="prettyprint">
+view_create(context, w, h);
+</pre>
+<p>The following figure illustrates the view frame.</p>
+<p class="figure">Figure: Scheduler view frame</p>
+<p align="center"><img src="../images/scheduler_structure_wearable_sd.png" alt="Scheduler view frame" /></p>
+
+<p>To fill out text parts with the part name and the text, use the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function.</p>
+
+<p>Implement the <span style="font-family: Courier New,Courier,monospace">data_get_text()</span> function to create the text you want to use. In this function, you can also choose the part name which you want to fill out. Then, call the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function with the part name and text you obtained.</p>
+<p>In this example, the text to use is <span style="font-family: Courier New,Courier,monospace">txt_day</span> and the part name to fill out is <span style="font-family: Courier New,Courier,monospace">widget.day</span>.</p>
+<pre class="prettyprint">
+txt_day = data_get_text("widget.day");
+view_set_text(wid, "widget.day", txt_day);
+</pre>
+
+<h2>Main Operation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_set_event_callback()</span> function controls the widget main operation that launches the application.</p>
+<p>The launch options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_PRESSED</span> for launch on a touch press event</li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_RELEASED</span> for launch on a touch release event </li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_CLICKED</span>for launch on a click event</li>
+</ul>
+<p>In this example, the application is launched when you click the widget.</p>
+<pre class="prettyprint">
+view_set_event_callback(wid, "widget.event", WIDGET_EVENT_CLICKED, clicked_cb);
+</pre>
+
+
+
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>(Circle) Settings Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+
+<div id="container"><div id="contents"><div class="content">
+
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+</div>
+
+
+<h1>(Circle) Settings Sample Overview</h1>
+
+<p>The Settings sample application shows you how you can create a settings application. Especially, it demonstrates how to manage the naviframe and genlist components to create a complete view of settings application.</p>
+<p>The following figure illustrates the main screen of the Settings application.</p>
+<p class="figure">Figure: Settings main view</p>
+<p align="center"><img src="../images/settings_wearable_sd.png" alt="Settings main view" /></p>
+
+
+
+<h2>Implementation</h2>
+
+<p>To create the settings application:</p>
+<ol>
+<li>Create the Settings UI.
+<p>The application starts with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function, where the life-cycle callbacks are registered. The <span style="font-family: Courier New,Courier,monospace;">app_create()</span> callback function is called first. After that, the <span style="font-family: Courier New,Courier,monospace;">view_create()</span> function creates the base UI of the application.</p>
+<pre class="prettyprint">
+static bool
+app_create(void *data)
+{
+ // Hook to take necessary actions before main event loop starts
+ // Initialize UI resources and application data
+ // If this function returns true, the main loop of application starts
+ // If this function returns false, the application is terminated
+ appdata_s *ad = data;
+
+ int i = 0;
+
+ view_create(ad);
+
+ ad->genlist = view_create_circle_genlist(ad->nf, ad->circle_surface);
+
+ view_append_item_to_genlist(ad->genlist, "menu.title", NULL, NULL, NULL);
+
+ for (i = 0; menu_its[i]; i++)
+ {
+ view_append_item_to_genlist(ad->genlist, "1text.1icon", (void *)i, _create_sub_list, (void *)i);
+ }
+ evas_object_data_set(ad->genlist, "appdata", ad);
+
+ view_append_item_to_genlist(ad->genlist, "padding", NULL, NULL, NULL);
+
+ view_push_item_to_naviframe(ad->nf, ad->genlist, _naviframe_pop_cb, NULL);
+
+ return true;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace;">view_create()</span> function creates the base UI that is composed of window, conformant, layout, and naviframe components.</p>
+<p>The wearable profile does not support the indicator function, so use a conformant that does not set the indicator mode. After that, create a <span style="font-family: Courier New,Courier,monospace;">circle_surface</span> to display a circular genlist.</p>
+<pre class="prettyprint">
+void
+view_create(appdata_s *ad)
+{
+ ad->win = view_create_win(PACKAGE);
+ if (ad->win == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to create a window.");
+
+ return;
+ }
+
+ ad->conform = view_create_conformant_without_indicator(ad->win);
+ if (ad->conform == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to create a conformant");
+ evas_object_del(ad->win);
+
+ return;
+ }
+
+ // Create the Eext Circle Surface
+ ad->circle_surface = eext_circle_surface_conformant_add(ad->conform);
+
+ ad->layout = view_create_layout_for_conformant(ad->conform, NULL, NULL);
+
+ ad->nf = view_create_naviframe(ad->layout);
+ if (ad->nf == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to create a naviframe.");
+ evas_object_del(ad->win);
+
+ return;
+ }
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+<p>When it comes to layout, there are 2 methods to create layout component. One of them involves creating an edje file that you can customize, and the other uses a premade edje file. This layout is created using the premade edje file. The style can be changed with the <span style="font-family: Courier New,Courier,monospace;">elm_layout_theme_set()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object*
+view_create_layout_by_theme(Evas_Object *parent, const char *file_name, const char *group_name)
+{
+ Evas_Object *layout = NULL;
+
+ if (parent == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "parent is NULL.");
+
+ return NULL;
+ }
+
+ layout = elm_layout_add(parent);
+ elm_layout_theme_set(layout, "layout", "application", "default");
+ evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+ evas_object_show(layout);
+
+ return layout;
+}
+</pre>
+</li>
+<li>Create the genlist.
+<p>The <span style="font-family: Courier New,Courier,monospace;">view_create_circle_genlist()</span> function creates the genlist component. The genlist component sets the list mode with the <span style="font-family: Courier New,Courier,monospace;">elm_genlist_mode_set()</span> function. To display a circular genlist, create circular genlist component supported by EFL Extension. The <span style="font-family: Courier New,Courier,monospace;">eext_circle_object_genlist_scroller_policy_set()</span> function sets the scrollbar visibility policy.</p>
+<pre class="prettyprint">
+Evas_Object*
+view_create_circle_genlist(Evas_Object *parent, Eext_Circle_Surface *circle_surface)
+{
+ Evas_Object *genlist = NULL;
+ Evas_Object *circle_genlist = NULL;
+
+ if (parent == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "parent is NULL.");
+
+ return NULL;
+ }
+
+ if (circle_surface == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "circle surface is NULL.");
+
+ return NULL;
+ }
+
+ genlist = elm_genlist_add(parent);
+ elm_genlist_mode_set(genlist, ELM_LIST_COMPRESS);
+ evas_object_smart_callback_add(genlist, "selected", _gl_selected_cb, NULL);
+
+ circle_genlist = eext_circle_object_genlist_add(genlist, circle_surface);
+ eext_circle_object_genlist_scroller_policy_set(circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+ eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
+
+ evas_object_show(genlist);
+
+ return genlist;
+}
+</pre>
+</li>
+<li>Insert an item to the genlist.
+<p>An item is inserted into genlist using the <span style="font-family: Courier New,Courier,monospace;">view_append_item_to_genlist()</span> function.</p>
+<pre class="prettyprint">
+void
+view_append_item_to_genlist(Evas_Object *genlist, const char *style,
+ const void *data, Evas_Smart_Cb _clicked_cb, const void *cb_data)
+{
+ Elm_Genlist_Item_Class *item_class = NULL;
+
+ if (genlist == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "genlist is NULL.");
+
+ return;
+ }
+
+ if (style == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "item style is NULL.");
+
+ return;
+ }
+
+ item_class = _set_genlist_item_class(style);
+
+ elm_genlist_item_append(genlist, item_class, data, NULL, ELM_GENLIST_ITEM_NONE, _clicked_cb, cb_data);
+
+ elm_genlist_item_class_free(item_class);
+}
+</pre>
+<p>Before the item is inserted into genlist, the item class must be set. The <span style="font-family: Courier New,Courier,monospace;">_set_genlist_item_class()</span> function sets the class for each item and registers the functions to get the text and contents. These functions are called when the <span style="font-family: Courier New,Courier,monospace;">elm_genlist_item_append()</span> function runs, and they receive data as a parameter.</p>
+<pre class="prettyprint">
+static Elm_Genlist_Item_Class*
+_set_genlist_item_class(const char *style)
+{
+ Elm_Genlist_Item_Class *item_class = NULL;
+
+ if (style == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "style is NULL.");
+
+ return NULL;
+ }
+
+ item_class = elm_genlist_item_class_new();
+
+ if (!strcmp(style, "menu.title"))
+ {
+ item_class->item_style = "title";
+ item_class->func.text_get = data_get_menu_title_text;
+ }
+ else if (!strcmp(style, "display.title"))
+ {
+ item_class->item_style = "title";
+ item_class->func.text_get = data_get_display_title_text;
+ }
+ else if (!strcmp(style, "1text"))
+ {
+ item_class->item_style = "1text";
+ item_class->func.text_get = data_get_display_text;
+ }
+ else if (!strcmp(style, "1text.1icon"))
+ {
+ item_class->item_style = "1text.1icon";
+ item_class->func.text_get = data_get_menu_text;
+ item_class->func.content_get = _get_menu_icon;
+ }
+ else if (!strcmp(style, "1text.1icon.1"))
+ {
+ item_class->item_style = "1text.1icon.1";
+ item_class->func.text_get = data_get_display_text;
+ item_class->func.content_get = _get_display_icon;
+ }
+ else if (!strcmp(style, "2text"))
+ {
+ item_class->item_style = "2text";
+ item_class->func.text_get = data_get_display_text;
+ }
+ else if (!strcmp(style, "padding"))
+ {
+ // @note
+ // "padding" style does nothing
+ // But it makes genlist item placed in the middle of the screen
+ }
+
+ return item_class;
+}
+</pre>
+</li>
+<li>Insert the genlist into the naviframe.
+<p>The genlist component is inserted into the naviframe component to be shown on the screen. </p>
+<pre class="prettyprint">
+void
+view_push_item_to_naviframe(Evas_Object *nf, Evas_Object *item, Elm_Naviframe_Item_Pop_Cb _pop_cb, void *cb_data)
+{
+ Elm_Object_Item* nf_it = NULL;
+
+ if (nf == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "naviframe is NULL.");
+
+ return;
+ }
+
+ if (item == NULL)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "item is NULL.");
+
+ return;
+ }
+
+ nf_it = elm_naviframe_item_push(nf, NULL, NULL, NULL, item, "empty");
+ elm_naviframe_item_pop_cb_set(nf_it, _pop_cb, cb_data);
+}
+</pre>
+</li>
+</ol>
+
+
+<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>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Task-manager Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+
+<div id="container"><div id="contents"><div class="content">
+
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+</div>
+
+
+<h1>Task-manager Sample Overview</h1>
+
+<p>The Task-manager sample application demonstrates how you can see the recently used items and delete them. By controlling the scroller, box, list, and index, you can learn to manage several items and pages on Tizen.</p>
+<p>The following figure illustrates the main screens of the Task-manager.</p>
+<p class="figure">Figure: Task-manager views</p>
+<p align="center"><img src="../images/taskmanager_wearable_sd.png" alt="Task-manager main view" /></p>
+
+<p>This sample consists of the following:</p>
+<ul>
+<li>View
+<p class="figure">Figure: Task-manager view structure</p>
+<p align="center"><img src="../images/taskmanager_view_wearable_sd.png" alt="Task-manager view structure" /></p>
+</li>
+<li>Main operation
+<ul>
+<li>Delete item</li>
+<li>Show the index according to the current page</li>
+<li>Close all items</li>
+</ul>
+</li>
+</ul>
+
+<h2>View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates the window, conformant, and layout frame as illustrated in the following figure.</p>
+<p class="figure">Figure: Task-manager frame structure</p>
+<p align="center"><img src="../images/taskmanager_layout_wearable_sd.png" alt="Task-manager frame structure" /></p>
+
+<p>To create the parts:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">task.item.list</span>
+<p>This part is for items, and consists of scroller, box, and items.</p>
+<ol>
+<li>Create the components and the layout.
+<p>To manage several items, the scroller and box components are required.</p>
+<p>The scroller makes this application scrollable, and the box allows this application to show several items through packaging and arrangement.</p>
+<p>The following example creates a horizontal scroller and a box which packs the items horizontally.</p>
+<pre class="prettyprint">
+ad->scroller = view_create_horizontal_scroller(ad);
+ad->box = view_create_horizontal_box(ad);
+</pre>
+
+<p>The following figure illustrates the structure of the scroller and the box.</p>
+<p class="figure">Figure: Scroller and box</p>
+<p align="center"><img src="../images/taskmanager_scrollerbox_wearable_sd.png" alt="Scroller and box" /></p>
+<p>The following function creates the layout frame for the item. It consists of text and image.</p>
+<pre class="prettyprint">
+item_layout = view_create_layout(ad->layout, edj_path, GRP_ITEM);
+</pre>
+<p>The following figure illustrates the item layout.</p>
+<p class="figure">Figure: Item layout</p>
+<p align="center"><img src="../images/taskmanager_item_layout_wearable_sd.png" alt="Item layout" /></p>
+</li>
+<li>Set the name and icon for the item.
+<p>The following functions set the name and icon for the item. You can pass the item name and the image file as a second parameter.</p>
+<pre class="prettyprint">
+view_set_text(item_layout, "recent.item.name", name);
+view_set_image(item_layout, "recent.item.image", image_file);
+</pre>
+
+<p>The part named <span style="font-family: Courier New,Courier,monospace">recent.item.del</span> is attached as an IMAGE part. You can find this in the edj file and change the image file and the position.</p>
+<p>After creating the item, put the item in the box using the following function.</p>
+<pre class="prettyprint">
+elm_box_pack_start(ad->box, item_layout);
+</pre>
+</li>
+<li>Customize the position of the items using the following function:
+<pre class="prettyprint">
+elm_box_layout_set(box, _box_layout_cb, ad, NULL);
+</pre>
+<p>Whenever the size of box is changed because of deleting or adding an item, the <span style="font-family: Courier New,Courier,monospace">_box_layout_cb()</span> function is called. You can specify the location of the item wherever you want.</p>
+</li>
+</ol>
+<p>You can create a scroller, a box, and an item at once by calling the following function.</p>
+<pre class="prettyprint">
+Evas_Object *view_create_1text_1image_delbutton_item(appdata_s *ad, char *name, char *image_file);
+</pre>
+<p>The following figure illustrates the scroller, box, and item together.</p>
+<p class="figure">Figure: Scroller, box, and item</p>
+<p align="center"><img src="../images/taskmanager_scrollerboxitem_wearable_sd.png" alt="Scroller, box, and item" /></p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">no.apps.page</span>
+<p>The <span style="font-family: Courier New,Courier,monospace">no.apps.page</span> is an empty page that is displayed when all items are deleted.</p>
+<p>This part is made of 2 text parts and 1 image part.</p>
+<p>The following figure illustrates the layout.</p>
+<p class="figure">Figure: Empty page layout</p>
+<p align="center"><img src="../images/taskmanager_noapps_wearable_sd.png" alt="Empty page layout" /></p>
+
+<p>To fill out all these parts, call the following function.</p>
+<pre class="prettyprint">
+no_apps_page = view_create_layout_for_part(parent, edj_path, GRP_NOAPPS_PAGE, "no.apps.page");
+</pre>
+
+<p>Because all the parts are attached as an image and a text in the edj file, only the edj file name is required.</p>
+<p>In the edj file, you can find a group named <span style="font-family: Courier New,Courier,monospace">GRP_NOAPPS_PAGE</span>. To customize the shape, adjust the <span style="font-family: Courier New,Courier,monospace">GRP_NOAPPS_PAGE</span> in the edj file.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">task.item.index</span>
+<p>This part is the index. The circle index occupies the full screen area, but it is displayed only in the top area of the screen.</p>
+<p>The following figure illustrates the index.</p>
+<p class="figure">Figure: Index</p>
+<p align="center"><img src="../images/taskmanager_index_wearable_sd.png" alt="Index" /></p>
+
+<p>The following function creates the index.</p>
+<pre class="prettyprint">
+Evas_Object *view_create_circular_index(appdata_s *ad);
+</pre>
+<p>After creating the index, call the following function to show it.</p>
+<pre class="prettyprint">
+void view_add_circular_index(appdata_s *ad, int idx);
+</pre>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">task.del.all.btn</span>
+<p>This part creates a button that deletes all items at once.</p>
+<p>The style of the button is provided, and you can customize the word displayed in the button.</p>
+<p>The following figure illustrates the button.</p>
+<p class="figure">Figure: Bottom button</p>
+<p align="center"><img src="../images/taskmanager_bottom_btn_wearable_sd.png" alt="Bottom button" /></p>
+<p>The following function creates the button.</p>
+<pre class="prettyprint">
+Evas_Object *view_create_bottom_button(appdata_s *ad);
+</pre>
+</li>
+</ul>
+
+<h2>Main Operation</h2>
+
+<p>The Task-manager sample carries out several operations.</p>
+<ul>
+<li>Deleting items
+<p>To delete an item, the application exhanges signals caused by a part in the edj file.</p>
+<p>Set the program in the edj file to trigger a click event to delete the button named <span style="font-family: Courier New,Courier,monospace">delete.item.del</span>.</p>
+
+<pre class="prettyprint">
+part
+{
+ name: "recent.item.del";
+ type: IMAGE;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: (216-63)/216 0; to: "recent.item.image";}
+ rel2 {relative: 216/216 63/216; to: "recent.item.image";}
+ image.normal: "b_recent_widget_del_icon.png";
+ color: 184 46 46 255;
+ }
+ description
+ {
+ state: "pressed" 0.0;
+ inherit: "default" 0.0;
+ color: 184 46 46 127;
+ }
+ description
+ {
+ state: "closeall" 0.0;
+ inherit: "default" 0.0;
+ min: 40 40;
+ max: 40 40;
+ color: 255 255 255 0;
+ }
+}
+
+programs
+{
+ program
+ {
+ name: "delete.clicked";
+ signal: "mouse,clicked,1";
+ source: "recent.item.del";
+ action: SIGNAL_EMIT "delete_button,clicked" "clicked";
+ }
+}
+</pre>
+<p>If the <span style="font-family: Courier New,Courier,monospace">mouse,clicked</span> event is detected from the <span style="font-family: Courier New,Courier,monospace">recent.item.del</span> part, send the <span style="font-family: Courier New,Courier,monospace">delete_button,clicked</span> signal with source named <span style="font-family: Courier New,Courier,monospace">clicked</span>.</p>
+<p>To receive this signal, register a callback function to the item which is called when the signal is detected.</p>
+<p>In this example, if the <span style="font-family: Courier New,Courier,monospace">delete_button,clicked</span> signal is detected with the <span style="font-family: Courier New,Courier,monospace">clicked</span> source, the <span style="font-family: Courier New,Courier,monospace">_delete_btn_clicked_cb()</span> callback is called.</p>
+<pre class="prettyprint">
+elm_object_signal_callback_add(item_layout, "delete_button,clicked" "clicked", _delete_btn_clicked_cb, ad);
+</pre>
+
+</li>
+<li>Showing the index according to the items and the current page
+<p>In both situation that the items are deleted or added and the page is moved, the index must be changed according to the items and pages.</p>
+<ol type="a">
+<li>Delete the item.
+<pre class="prettyprint">
+static void
+_delete_btn_clicked_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
+{
+ int cur_page = -1;
+ appdata_s *ad = data;
+ Evas_Object *cur_item = NULL;
+
+ Eina_List *list = elm_box_children_get(ad->box);
+
+ elm_scroller_current_page_get(ad->scroller, &cur_page, NULL);
+ cur_item = eina_list_nth(list, cur_page);
+
+ elm_box_unpack(ad->box, cur_item);
+ evas_object_del(cur_item);
+
+ update_index(ad);
+}
+</pre>
+
+<p>The following functions are called:</p>
+<pre class="prettyprint">
+// Delete the index, and count the items that exist
+void update_index(appdata_s *ad);
+// Create an index according to the number of items
+void view_add_circular_index(appdata_s *ad, int idx);
+// Check what number is the item showing and highlight the index of the same number
+void view_sync_index_with_item(appdata_s *ad);
+</pre>
+</li>
+<li>Move the page.
+<p>By calling the following functions, the application is able to synchronize the index properly.</p>
+<pre class="prettyprint">
+static void
+_scroller_scrolled_cb(void *data, Evas_Object *scroller, void *event_info)
+{
+ appdata_s *ad = data;
+ view_sync_index_with_item(ad);
+}
+
+void view_sync_index_with_item(appdata_s *ad); // Check what number is the item showing and highlight the index of the same number
+</pre>
+</li>
+</ol>
+</li>
+<li>Closing all items.
+<p>You can close all items by 1 click only using an edj signal.</p>
+<p>The callback function registered on creation is called when the <span style="font-family: Courier New,Courier,monospace">bottom_button</span> is clicked.</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(del_all_btn, "clicked", _del_all_btn_clicked_cb, ad->layout);
+</pre>
+<p>In the <span style="font-family: Courier New,Courier,monospace">_del_all_btn_clicked_cb()</span> callback, send a signal named <span style="font-family: Courier New,Courier,monospace">del.all.item</span> with source <span style="font-family: Courier New,Courier,monospace">item.list</span> and signal named <span style="font-family: Courier New,Courier,monospace">noapps</span> with source <span style="font-family: Courier New,Courier,monospace">show,noapps</span> to edj.</p>
+<pre class="prettyprint">
+static void
+_del_all_btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *layout = data
+
+ elm_object_signal_elmit(layout, "del.all.item", "item.list");
+ bottom_button_disabled_set(layout, EINA_TRUE);
+ elm_object_signal_emit(layout, "noapps", "show,noapps");
+}
+</pre>
+
+<p>In the edj, you must register programs to receive these signals.</p>
+<pre class="prettyprint">
+programs
+{
+ program
+ {
+ name: "show,noapps";
+ signal: "noapps";
+ source: "show,noapps";
+ action: STATE_SET "noapps" 0.0;
+ target: "bg";
+ target: "no.apps.page";
+ target: "task.item.index";
+ }
+ program
+ {
+ name: "hide.all.item";
+ signal: "del.all.item";
+ source: "item.list";
+ action: STATE_SET "hide" 0.0;
+ target: "task.item.list";
+ }
+}
+</pre>
+
+<p>This means that if these signals are detected with the sources, target changes their state to <span style="font-family: Courier New,Courier,monospace">noapps</span> and <span style="font-family: Courier New,Courier,monospace">hide</span>.</p>
+<pre class="prettyprint">
+part
+{
+ name: "task.item.list";
+ type: SWALLOW;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0; to: "bg";}
+ rel2 {relative: 1.0 1.0; to: "bg";}
+ }
+ description
+ {
+ state: "hide" 0.0;
+ inherit: "default" 0.0;
+ visible: 0;
+ }
+}
+part
+{
+ name: "no.apps.page";
+ type: SWALLOW;
+ description:
+ {
+ state: "default" 0.0;
+ visible: 0;
+ }
+ description
+ {
+ state: "noapps" 0.0;
+ rel1 {relative: 0.0 0.0; to: "bg";}
+ rel2 {relative: 1.0 1.0; to "bg";}
+ visible: 1;
+ }
+}
+</pre>
+<p>To customise this application, see the functions in the <span style="font-family: Courier New,Courier,monospace">view.h</span> header file. This application is easy to customize with different variables and parameters.</p>
+</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>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>World Clock Widget Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+
+<div id="container"><div id="contents"><div class="content">
+
+ <div id="profile">
+ <p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+</div>
+
+
+<h1>World Clock Widget Sample Overview</h1>
+
+<p>The World Clock widget sample demonstrates how to manage text objects and image objects to create a complete widget view.</p>
+<p>The following figure illustrates the main screen of the World Clock widget.</p>
+<p class="figure">Figure: World Clock main view</p>
+<p align="center"><img src="../images/worldclock_wearable_sd.png" alt="World Clock main view" /></p>
+
+<p>This sample consists of the view and main operation parts.</p>
+
+<h2>View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_create()</span> function creates the widget view frame that consists of the window, text parts, and image parts.</p>
+<pre class="prettyprint">
+view_create(context, w, h);
+</pre>
+<p>The following figure illustrates the view frame.</p>
+<p class="figure">Figure: World Clock view frame</p>
+<p align="center"><img src="../images/worldclock_structure_wearable_sd.png" alt="World Clock view frame" /></p>
+
+<p>To create the parts:</p>
+<ul>
+<li>Text
+<p>You can fill out the text parts with the part name and the text using the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function.</p>
+<p>Implement the <span style="font-family: Courier New,Courier,monospace">data_get_text()</span> function to create the text you want to use. In this function, you can also choose the part name which you want to fill out. Then, call the <span style="font-family: Courier New,Courier,monospace">view_set_text()</span> function with the part name and text you obtained.</p>
+<p>In this example, the text to use is <span style="font-family: Courier New,Courier,monospace">region_txt</span> and the part name to fill out is <span style="font-family: Courier New,Courier,monospace">widget.region</span>.</p>
+<pre class="prettyprint">
+region_txt = data_get_text("widget.region");
+view_set_text(wid, "widget.region", region_txt);
+</pre>
+</li>
+<li>Image
+<p>You can create the widget with image files using the <span style="font-family: Courier New,Courier,monospace">view_set_image()</span> function. Pass the part name which you want to draw and the name of image file including its directory path.</p>
+<p>In this example, the part name is <span style="font-family: Courier New,Courier,monospace">widget.bg</span> and the name of image file is <span style="font-family: Courier New,Courier,monospace">bg.png</span> in the <span style="font-family: Courier New,Courier,monospace">images</span> directory.</p>
+<pre class="prettyprint">
+view_set_image(wid, "widget.bg", "images/bg.png");
+</pre>
+</li>
+</ul>
+
+<h2>Main Operation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">view_set_event_callback()</span> function controls the widget main operation that launches the application.</p>
+<p>The launch options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_PRESSED</span> for launch on a touch press event</li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_RELEASED</span> for launch on a touch release event </li>
+<li><span style="font-family: Courier New,Courier,monospace">WIDGET_EVENT_CLICKED</span>for launch on a click event</li>
+</ul>
+<p>In this example, the application is launched when you click the widget.</p>
+<pre class="prettyprint">
+view_set_event_callback(wid, "widget.event", WIDGET_EVENT_CLICKED, clicked_cb);
+</pre>
+
+
+
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
projects / sdk / online-doc.git / commitdiff
