-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
-<head>\r
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
- <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
- <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
- <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
- <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
- <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
- <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
- <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
- <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
-\r
- <title>Creating Your First Tizen Application</title> \r
-</head>\r
-\r
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
-\r
-<div id="toc-navigation">\r
-</div> \r
-\r
-<div id="container"><div id="contents"><div class="content">\r
- <div id="profile">\r
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
- </div>\r
- \r
-<h1>Creating Your First Tizen Application</h1>\r
-\r
-<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>\r
- \r
-<p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p> \r
- <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/native_tools/tools_n.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p> \r
- <h2 id="create_n" name="create_n">To Create a HelloWorld Application</h2> \r
- <ol class="tutorstep"> \r
- <li>Creating the HelloWorld Project \r
- <ol type="a"> \r
- <li>Launch the <strong>Tizen IDE</strong>.</li> \r
- <li><a href="../process/app_dev_process_n.htm#creating">Create the application project in the IDE</a>. \r
- <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Native Project</strong> window, select <strong>Template > MOBILE|WEARABLE-<version> > Basic UI Application</strong>.</p> </li> \r
- <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li></ol>\r
-\r
-<p class="figure">Figure: Creating the helloworld project</p> \r
- <p align="center"><img alt="Creating the helloworld project" src="../../images/hello_world_n.png" /></p>\r
- \r
- \r
- <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> configuration file as well as in several other project files, including:</p> \r
- <ul> \r
- <li><span style="font-family: Courier New,Courier,monospace">inc</span> folder: Application header file directory</li> \r
- <li><span style="font-family: Courier New,Courier,monospace">src</span> folder: C files directory</li> \r
- </ul>\r
-</li>\r
-\r
-<li>Configuring the Application and Creating the Application Code \r
- <p>To configure the application:</p>\r
- <ol type="a">\r
- <li><a href="../process/setting_properties_n.htm#manifest">Set the project properties</a> by modifying the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</li>\r
- <li>Implement the application code in the <span style="font-family: Courier New,Courier,monospace">helloworld.c</span> file.</li>\r
- </ol> \r
-\r
- <p>When coding the application, note that the Tizen Native API follows the basic principles listed below:</p>\r
-\r
-<ul><li>Ownership of returned strings\r
-<p>All strings returned as pointers must be freed by the caller unless stated otherwise.</p>\r
-<p>To not free memory can lead to memory leaks. Insufficient system memory triggers a system low memory notification and some applications can be killed. As a heuristic algorithm selects the process to be killed, it can destabilize the system.</p>\r
- \r
-<pre class="prettyprint">\r
-char *app_id_string = NULL;\r
-if (!app_get_id(&app_id_string))\r
-{\r
- // Use app_id_string\r
- if (app_id_string != NULL)\r
- free(app_id_string);\r
-}\r
-</pre></li>\r
-\r
-<li>Handles\r
-<p>A handle provides means to manage an instance associated with it. Handles are widely used in Tizen Native API for API compatibility reasons. Creation and destruction functions (create/destroy) are provided for each handle type. They do not create and destroy the handle itself, but they operate on the instance associated with a given handle. It means that a handle is not valid until a corresponding create function has been called and the handle is not valid after a corresponding destroy function has been called. Also accessor functions (getters/setters) are provided to access members of the hidden structure identified by a given handle.</p>\r
-<pre class="prettyprint">// Text message is represented by a handle\r
-messages_message_h sms_msg;\r
-\r
-// Create message and associate it with this handle\r
-messages_create_message(MESSAGES_TYPE_SMS, &sms_msg);\r
-\r
-// Destroy message\r
-messages_destroy_message(sms_msg);\r
-\r
-// Change the properties of the text message\r
-messages_set_text(sms_msg,"Hello, how are you?"); \r
-messages_add_address (sms_msg,"01020157919", MESSAGE_RECIPIENT_TO);\r
-</pre></li>\r
-\r
-<li>Asynchronous function calls\r
-<p>Some of Tizen native API functions are asynchronous.</p>\r
-<p>An asynchronous function starts the processing and returns before this processing is finished. However, sometimes one should know, when this processing is finished. In such cases, waiting for the processing completion notification must be properly implemented.</p>\r
-</li>\r
-<li>Code assist\r
-<p>Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient.</p>\r
-<p>Press CTRL+SPACE while editing your codes to see available APIs as follows:</p>\r
-\r
-<p class="figure">Figure: Code assist</p> \r
- <p align="center"><img src="../../images/code_assist.png" alt="Code assist" /></p> \r
-</li></ul> \r
-</li>\r
-\r
-<li>Creating the Application UI with EFL\r
-<p> The <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a> is the native graphical toolkit for Tizen.</p>\r
-\r
-<p>To create the application UI:</p>\r
-<ol type="a">\r
-<li>Add an interface\r
-\r
-<p>In this tutorial, there are the following exercises:</p>\r
-<ul>\r
-<li>a window to hold everything</li>\r
-<li>a conformant, which shows the virtual keyboard (required by Tizen guidelines)</li>\r
-<li>a naviframe used for applications, which show multiple screens through their lives with back and forth transitions between them (required by Tizen guidelines)</li>\r
-<li>a horizontal box with\r
- <ul>\r
- <li>a label with several lines of text</li>\r
- <li>a button</li>\r
- </ul>\r
-</li>\r
-</ul>\r
-</li>\r
-\r
-<li>Add an application skeleton with appcore\r
-<p>A pointer to important objects is stored in the following data structure.</p>\r
-<pre class="prettyprint">typedef struct appdata \r
-{\r
- // All graphical objects here are pointers to the value of the type Evas_Object\r
- Evas_Object *win;\r
- Evas_Object *conformant;\r
- Evas_Object *naviframe;\r
-} appdata_s;\r
-</pre>\r
-<p>The pointer is created and initialized to contain only zeros in the <span style="font-family: Courier New,Courier,monospace">main()</span> function. The same applies for the structure of the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> type, which holds the app-core related callbacks.</p>\r
-\r
-<pre class="prettyprint">static bool\r
-app_create(void *data)\r
-{\r
- appdata_s *ad = data;\r
- create_gui(ad);\r
- return true;\r
-}\r
-\r
-int\r
-main(int argc, char *argv[])\r
-{\r
- appdata_s *ad = {0,};\r
- int ret = 0;\r
- ui_app_lifecycle_callback_s event_callback = {0,};\r
- app_event_handler_h handlers[5] = {NULL,};\r
-\r
- event_callback.create = app_create;\r
- event_callback.terminate = app_terminate;\r
- event_callback.pause = app_pause;\r
- event_callback.resume = app_resume;\r
- event_callback.app_control = app_control;\r
-\r
- ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);\r
- ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);\r
- ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);\r
- ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);\r
- ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);\r
- ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);\r
-\r
- ret = ui_app_main(argc, argv, &event_callback, &ad);\r
-\r
- return ret;\r
-}\r
-</pre>\r
-\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">For more information on Appcore, see <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</td> \r
- </tr> \r
- </tbody> \r
- </table> \r
-</li>\r
-<li>Create the GUI objects\r
-<p>The GUI is created with the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. It receives a pointer to fill in the "ad" structure.</p>\r
-<p>Create the function and mark it static, since it is reachable only from the current compilation unit (which allows the compiler to produce faster and smaller code).</p>\r
-<p>Inside the function, create a window and set its name and title to "Hello World". Add a callback on the "delete,request" event (when the window is to be closed).</p>\r
-\r
-<pre class="prettyprint">static void\r
-create_gui(appdata_s *ad)\r
-{\r
- // Create the window\r
- ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
- elm_win_conformant_set(ad->win, EINA_TRUE);\r
-\r
- // Advertise which rotations are supported by the application; the\r
- // device_orientation callback is used to do the actual rotation when\r
- // the system detects the device's orientation has changed\r
- if (elm_win_wm_rotation_supported_get(ad->win)) {\r
- int rots[4] = { 0, 90, 180, 270 };\r
- elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);\r
- }\r
-\r
- // Add a callback on the "delete,request" event; it is emitted when\r
- // the system closes the window \r
- evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);\r
-\r
- // Alternatively, elm_win_autodel_set() can be used to close\r
- // the window (not the application) automatically \r
- // with the Back button, for example\r
- // elm_win_autodel_set(ad->win, EINA_TRUE);\r
-</pre>\r
-\r
-<p>The conformant goes inside the window first. Everything created from now on is inside it.</p>\r
-<pre class="prettyprint"> // Create the conformant\r
- ad->conformant = elm_conformant_add(ad->win);\r
-\r
- // Set the conformant use as much horizontal and vertical space as\r
- // possible, that is, expand in both directions\r
- evas_object_size_hint_weight_set(ad->conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
-\r
- // Set the conformant as the resize object for the window:\r
- // the window and the conformant grow together \r
- // in proportion to each other\r
- elm_win_resize_object_add(ad->win, ad->conformant);\r
-\r
- // Show the conformant since all widgets are hidden by default\r
- evas_object_show(ad->conformant);\r
-</pre>\r
-\r
-<p>The naviframe is useful for applications showing multiple screens: it enables displaying a screen, switching to another, moving back to the first (and doing the same with several screens).</p>\r
-<p>Only one screen is built: the naviframe is created and put inside the conformant.</p>\r
-\r
-<pre class="prettyprint"> // Create the naviframe\r
- ad->naviframe = elm_naviframe_add(ad->conformant);\r
- elm_object_content_set(ad->conformant, ad->naviframe);\r
-\r
- // Show the box\r
- evas_object_show(ad->conformant);\r
-</pre>\r
-\r
-<p>The box is probably the most common container; it arranges a set of widgets in a vertical or horizontal way.</p>\r
-<pre class="prettyprint"> // Create the box\r
- Evas_Object *box = elm_box_add(ad->naviframe);\r
-\r
- // Set the box vertical\r
- elm_box_horizontal_set(box, EINA_FALSE);\r
-\r
- // The box expands when its contents need more space\r
- evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
-\r
- // The box fills the available space\r
- evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
-\r
- // Add the box in the naviframe container\r
- elm_naviframe_item_push(ad->naviframe, "Hello World", NULL, NULL, box, NULL);\r
-\r
- // Show the box\r
- evas_object_show(box);\r
-</pre>\r
-\r
-<p>Labels hold text with formatting and over multiple lines.</p>\r
-<pre class="prettyprint"> // Create the label\r
- Evas_Object *label = elm_label_add(box);\r
- // The label expands when its contents need more space\r
- evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
- // The box fills the available space on the horizontal axis and is\r
- // centered on the vertical axis (placed at 0.5 vertically, that is, in the\r
- // middle)\r
- evas_object_size_hint_align_set(label, EVAS_HINT_FILL, 0.5);\r
-\r
- // Set the text for the label and set formatting through the HTML tags:\r
- // - "Hello World!" centered on the first line\r
- // - skip a line\r
- // - Add a longer text that does not fit on a single line but wraps at\r
- // the word boundaries\r
- elm_object_text_set(label,\r
- "<align=center>Hello World!</align><br>"\r
- "<br>"\r
- "<wrap = word>Clicking on the button below closes the application.</wrap>");\r
-\r
- // Add the label at the end of the box\r
- elm_box_pack_end(box, label);\r
-\r
- // Show the label\r
- evas_object_show(label);\r
-</pre>\r
-<p>The last widget is the button. It exits the application when clicked.</p>\r
-<pre class="prettyprint"> // Create the button\r
- Evas_Object *button = elm_button_add(box);\r
-\r
- // The box expands when its contents need more space\r
- evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
-\r
- // The button fills the available space on the horizontal axis and is\r
- // placed at the bottom of the vertical axis (1 is the end of the axis,\r
- // the coordinates start at (0, 0) on the top-left corner\r
- evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);\r
-\r
- // Set the text for the button\r
- elm_object_text_set(button, "Close!");\r
-\r
- // Add a callback on the button for the "clicked" event; implementation of\r
- // the callback is below\r
- evas_object_smart_callback_add(button, "clicked", clicked_cb, NULL);\r
-\r
- // Add the widget at the end of the box; since the axis starts in the top left\r
- // corner and the box is vertical, the end of the box is below the label\r
- elm_box_pack_end(box, button);\r
-\r
- // Show the button\r
- evas_object_show(button);\r
-</pre>\r
-\r
-<p>This is how to set the window displaying everything on screen at once.</p>\r
-<pre class="prettyprint"> // Show window after the GUI is set up\r
- evas_object_show(ad->win);\r
-}\r
-</pre> \r
-</li>\r
-<li>Exit the GUI\r
-\r
-<p>The <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function exits the Elementary; the prototype of the function is common to all callbacks given to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>. Put the <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function above the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. </p>\r
-<p>For more details on the callbacks, see the <a href="../../../../org.tizen.ui.guides/html/native/efl/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>\r
-<pre class="prettyprint">static void\r
-clicked_cb(void *user_data, Evas_Object *obj, void *event_info)\r
-{\r
- elm_exit();\r
-}\r
-</pre>\r
-</li>\r
-</ol>\r
-</li>\r
- \r
- <li>Building and Packaging the Application \r
- <p>After you have finished implementing your application, you must <a href="../process/building_app_n.htm">build it</a>.</p>\r
- \r
- <p>After building, the Tizen IDE automatically packages the project.</p>\r
-</li>\r
-\r
-<li>Running and Debugging the Application \r
- <p>You can run the HelloWorld application on the <a href="../process/running_app_n.htm">Emulator</a>. </p>\r
- \r
- <p>The following figure shows the widget running in the Emulator.</p> <p class="figure">Figure: Running the project</p> \r
- <p align="center"><img alt="Running the project" src="../../images/hello.png" /></p>\r
-</li>\r
-\r
-</ol>\r
-\r
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
-<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
-</div></div></div>\r
-\r
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
-\r
-<div id="footer">\r
-<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>\r
-</div>\r
-\r
-<script type="text/javascript">\r
-var _gaq = _gaq || [];\r
-_gaq.push(['_setAccount', 'UA-25976949-1']);\r
-_gaq.push(['_trackPageview']);\r
-(function() {\r
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
-})();\r
-</script>\r
-\r
-</body>\r
-</html>\r
-\r
+<!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>Creating Your First Tizen Application</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+<h1>Creating Your First Tizen Application</h1>
+
+<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>
+
+<p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p>
+ <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/native_tools/tools_n.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p>
+ <h2 id="create_n" name="create_n">To Create a HelloWorld Application</h2>
+ <ol class="tutorstep">
+ <li>Creating the HelloWorld Project
+ <ol type="a">
+ <li>Launch the <strong>Tizen IDE</strong>.</li>
+ <li><a href="../process/app_dev_process_n.htm#creating">Create the application project in the IDE</a>.
+ <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Native Project</strong> window, select <strong>Template > MOBILE|WEARABLE-<version> > Basic UI Application</strong>.</p> </li>
+ <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li></ol>
+
+<p class="figure">Figure: Creating the helloworld project</p>
+ <p align="center"><img alt="Creating the helloworld project" src="../../images/hello_world_n.png" /></p>
+
+
+ <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> configuration file as well as in several other project files, including:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">inc</span> folder: Application header file directory</li>
+ <li><span style="font-family: Courier New,Courier,monospace">src</span> folder: C files directory</li>
+ </ul>
+</li>
+
+<li>Configuring the Application and Creating the Application Code
+ <p>To configure the application:</p>
+ <ol type="a">
+ <li><a href="../process/setting_properties_n.htm#manifest">Set the project properties</a> by modifying the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</li>
+ <li>Implement the application code in the <span style="font-family: Courier New,Courier,monospace">helloworld.c</span> file.</li>
+ </ol>
+
+ <p>When coding the application, note that the Tizen Native API follows the basic principles listed below:</p>
+
+<ul><li>Ownership of returned strings
+<p>All strings returned as pointers must be freed by the caller unless stated otherwise.</p>
+<p>To not free memory can lead to memory leaks. Insufficient system memory triggers a system low memory notification and some applications can be killed. As a heuristic algorithm selects the process to be killed, it can destabilize the system.</p>
+
+<pre class="prettyprint">
+char *app_id_string = NULL;
+if (!app_get_id(&app_id_string))
+{
+ // Use app_id_string
+ if (app_id_string != NULL)
+ free(app_id_string);
+}
+</pre></li>
+
+<li>Handles
+<p>A handle provides means to manage an instance associated with it. Handles are widely used in Tizen Native API for API compatibility reasons. Creation and destruction functions (create/destroy) are provided for each handle type. They do not create and destroy the handle itself, but they operate on the instance associated with a given handle. It means that a handle is not valid until a corresponding create function has been called and the handle is not valid after a corresponding destroy function has been called. Also accessor functions (getters/setters) are provided to access members of the hidden structure identified by a given handle.</p>
+<pre class="prettyprint">// Text message is represented by a handle
+messages_message_h sms_msg;
+
+// Create message and associate it with this handle
+messages_create_message(MESSAGES_TYPE_SMS, &sms_msg);
+
+// Destroy message
+messages_destroy_message(sms_msg);
+
+// Change the properties of the text message
+messages_set_text(sms_msg,"Hello, how are you?");
+messages_add_address (sms_msg,"01020157919", MESSAGE_RECIPIENT_TO);
+</pre></li>
+
+<li>Asynchronous function calls
+<p>Some of Tizen native API functions are asynchronous.</p>
+<p>An asynchronous function starts the processing and returns before this processing is finished. However, sometimes one should know, when this processing is finished. In such cases, waiting for the processing completion notification must be properly implemented.</p>
+</li>
+<li>Code assist
+<p>Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient.</p>
+<p>Press CTRL+SPACE while editing your codes to see available APIs as follows:</p>
+
+<p class="figure">Figure: Code assist</p>
+ <p align="center"><img src="../../images/code_assist.png" alt="Code assist" /></p>
+</li></ul>
+</li>
+
+<li>Creating the Application UI with EFL
+<p> The <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a> is the native graphical toolkit for Tizen.</p>
+
+<p>To create the application UI:</p>
+<ol type="a">
+<li>Add an interface
+
+<p>In this tutorial, there are the following exercises:</p>
+<ul>
+<li>a window to hold everything</li>
+<li>a conformant, which shows the virtual keyboard (required by Tizen guidelines)</li>
+<li>a naviframe used for applications, which show multiple screens through their lives with back and forth transitions between them (required by Tizen guidelines)</li>
+<li>a horizontal box with
+ <ul>
+ <li>a label with several lines of text</li>
+ <li>a button</li>
+ </ul>
+</li>
+</ul>
+</li>
+
+<li>Add an application skeleton with appcore
+<p>A pointer to important objects is stored in the following data structure.</p>
+<pre class="prettyprint">typedef struct appdata
+{
+ // All graphical objects here are pointers to the value of the type Evas_Object
+ Evas_Object *win;
+ Evas_Object *conformant;
+ Evas_Object *naviframe;
+} appdata_s;
+</pre>
+<p>The pointer is created and initialized to contain only zeros in the <span style="font-family: Courier New,Courier,monospace">main()</span> function. The same applies for the structure of the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> type, which holds the app-core related callbacks.</p>
+
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+ appdata_s *ad = data;
+ create_gui(ad);
+ return true;
+}
+
+int
+main(int argc, char *argv[])
+{
+ appdata_s *ad = {0,};
+ int ret = 0;
+ ui_app_lifecycle_callback_s event_callback = {0,};
+ app_event_handler_h handlers[5] = {NULL,};
+
+ event_callback.create = app_create;
+ event_callback.terminate = app_terminate;
+ event_callback.pause = app_pause;
+ event_callback.resume = app_resume;
+ event_callback.app_control = app_control;
+
+ ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
+ ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
+ ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
+ ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
+ ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
+ ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+ ret = ui_app_main(argc, argv, &event_callback, &ad);
+
+ return ret;
+}
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">For more information on Appcore, see <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</td>
+ </tr>
+ </tbody>
+ </table>
+</li>
+<li>Create the GUI objects
+<p>The GUI is created with the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. It receives a pointer to fill in the "ad" structure.</p>
+<p>Create the function and mark it static, since it is reachable only from the current compilation unit (which allows the compiler to produce faster and smaller code).</p>
+<p>Inside the function, create a window and set its name and title to "Hello World". Add a callback on the "delete,request" event (when the window is to be closed).</p>
+
+<pre class="prettyprint">static void
+create_gui(appdata_s *ad)
+{
+ // Create the window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+
+ // Advertise which rotations are supported by the application; the
+ // device_orientation callback is used to do the actual rotation when
+ // the system detects the device's orientation has changed
+ if (elm_win_wm_rotation_supported_get(ad->win)) {
+ int rots[4] = { 0, 90, 180, 270 };
+ elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
+ }
+
+ // Add a callback on the "delete,request" event; it is emitted when
+ // the system closes the window
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+
+ // Alternatively, elm_win_autodel_set() can be used to close
+ // the window (not the application) automatically
+ // with the Back button, for example
+ // elm_win_autodel_set(ad->win, EINA_TRUE);
+</pre>
+
+<p>The conformant goes inside the window first. Everything created from now on is inside it.</p>
+<pre class="prettyprint"> // Create the conformant
+ ad->conformant = elm_conformant_add(ad->win);
+
+ // Set the conformant use as much horizontal and vertical space as
+ // possible, that is, expand in both directions
+ evas_object_size_hint_weight_set(ad->conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+ // Set the conformant as the resize object for the window:
+ // the window and the conformant grow together
+ // in proportion to each other
+ elm_win_resize_object_add(ad->win, ad->conformant);
+
+ // Show the conformant since all UI components are hidden by default
+ evas_object_show(ad->conformant);
+</pre>
+
+<p>The naviframe is useful for applications showing multiple screens: it enables displaying a screen, switching to another, moving back to the first (and doing the same with several screens).</p>
+<p>Only one screen is built: the naviframe is created and put inside the conformant.</p>
+
+<pre class="prettyprint"> // Create the naviframe
+ ad->naviframe = elm_naviframe_add(ad->conformant);
+ elm_object_content_set(ad->conformant, ad->naviframe);
+
+ // Show the box
+ evas_object_show(ad->conformant);
+</pre>
+
+<p>The box is probably the most common container; it arranges a set of UI components in a vertical or horizontal way.</p>
+<pre class="prettyprint"> // Create the box
+ Evas_Object *box = elm_box_add(ad->naviframe);
+
+ // Set the box vertical
+ elm_box_horizontal_set(box, EINA_FALSE);
+
+ // The box expands when its contents need more space
+ evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+ // The box fills the available space
+ evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ // Add the box in the naviframe container
+ elm_naviframe_item_push(ad->naviframe, "Hello World", NULL, NULL, box, NULL);
+
+ // Show the box
+ evas_object_show(box);
+</pre>
+
+<p>Labels hold text with formatting and over multiple lines.</p>
+<pre class="prettyprint"> // Create the label
+ Evas_Object *label = elm_label_add(box);
+ // The label expands when its contents need more space
+ evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ // The box fills the available space on the horizontal axis and is
+ // centered on the vertical axis (placed at 0.5 vertically, that is, in the
+ // middle)
+ evas_object_size_hint_align_set(label, EVAS_HINT_FILL, 0.5);
+
+ // Set the text for the label and set formatting through the HTML tags:
+ // - "Hello World!" centered on the first line
+ // - skip a line
+ // - Add a longer text that does not fit on a single line but wraps at
+ // the word boundaries
+ elm_object_text_set(label,
+ "<align=center>Hello World!</align><br>"
+ "<br>"
+ "<wrap = word>Clicking on the button below closes the application.</wrap>");
+
+ // Add the label at the end of the box
+ elm_box_pack_end(box, label);
+
+ // Show the label
+ evas_object_show(label);
+</pre>
+<p>The last UI component is the button. It exits the application when clicked.</p>
+<pre class="prettyprint"> // Create the button
+ Evas_Object *button = elm_button_add(box);
+
+ // The box expands when its contents need more space
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+ // The button fills the available space on the horizontal axis and is
+ // placed at the bottom of the vertical axis (1 is the end of the axis,
+ // the coordinates start at (0, 0) on the top-left corner
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);
+
+ // Set the text for the button
+ elm_object_text_set(button, "Close!");
+
+ // Add a callback on the button for the "clicked" event; implementation of
+ // the callback is below
+ evas_object_smart_callback_add(button, "clicked", clicked_cb, NULL);
+
+ // Add the UI component at the end of the box; since the axis starts in the top left
+ // corner and the box is vertical, the end of the box is below the label
+ elm_box_pack_end(box, button);
+
+ // Show the button
+ evas_object_show(button);
+</pre>
+
+<p>This is how to set the window displaying everything on screen at once.</p>
+<pre class="prettyprint"> // Show window after the GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+</li>
+<li>Exit the GUI
+
+<p>The <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function exits the Elementary; the prototype of the function is common to all callbacks given to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>. Put the <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function above the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. </p>
+<p>For more details on the callbacks, see the <a href="../../../../org.tizen.ui.guides/html/native/efl/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
+<pre class="prettyprint">static void
+clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
+{
+ elm_exit();
+}
+</pre>
+</li>
+</ol>
+</li>
+
+ <li>Building and Packaging the Application
+ <p>After you have finished implementing your application, you must <a href="../process/building_app_n.htm">build it</a>.</p>
+
+ <p>After building, the Tizen IDE automatically packages the project.</p>
+</li>
+
+<li>Running and Debugging the Application
+ <p>You can run the HelloWorld application on the <a href="../process/running_app_n.htm">Emulator</a>. </p>
+
+ <p>The following figure shows the application running in the Emulator.</p> <p class="figure">Figure: Running the project</p>
+ <p align="center"><img alt="Running the project" src="../../images/hello.png" /></p>
+</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>
+
projects / sdk / online-doc.git / commitdiff