- wizard supports online-sample.
- change png files.
Change-Id: I6b12a39ec6618245ad46119a05e713d21979c7b0
Signed-off-by: hyunsik.noh <hyunsik.noh@samsung.com>
<!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>Project Wizard </title>
-- </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>Project Wizard</title>
++</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
--<div id="toc-navigation">
--</div>
++ <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>
--
++ <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>Project Wizard</h1>
-- <p>The Tizen native Project Wizard is an IDE tool that is used to create a native application project.
-- It allows you to define the application type and requirements and components.</p>
-- <p>The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen native Project Wizard uses to automatically create basic functionalities for the native application. The default project files and folders are also created.</p>
-- <p>The following project templates are available:</p>
-- <ul>
-- <li><strong>UI Application</strong>
-- <p>This template is suitable for creating a UI application with project files. </p></li>
--
-- <li><strong>Service Application</strong>
-- <p>This template is suitable for creating a service application that does not have an UI and always runs in the background. Service applications can also work with a UI application.</p></li>
--
-- <li><strong>Library</strong>
-- <p>This template is suitable for creating a Tizen library module. Multiple application projects can reference the library modules. If a template project is created as a library project, it cannot be installed onto a device.</p></li>
-- </ul>
--
--
-- <p>On the main page of the Tizen native Project Wizard, you can set basic properties of a project, such as the project name, package name, location, sample, and template.</p>
--
-- <p class="figure">Figure: Project Wizard</p>
-- <p align="center"><img alt="Project Wizard" src="../images/native_application_wizard.png"/></p>
--
-- <p>The options you can set are listed in the following table.</p>
-- <table border="1">
-- <caption>
-- Table: Project Wizard options
-- </caption>
-- <tbody>
-- <tr>
-- <th style="text-align:center;margin-left:auto;margin-right:auto;">Option</th>
-- <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
-- </tr>
-- <tr>
-- <td>Tab</td>
-- <td>You can create an application based on a template or sample application.</td>
-- </tr>
-- <tr>
-- <td>Category</td>
-- <td>If the selected category has samples or templates, they are displayed in the list on the left.</td>
-- </tr>
-- <tr>
-- <td>Application type</td>
-- <td>Select the application type. It can be previewed in the description view on the right.</td>
++ <h1>Project Wizard</h1>
++ <p>The Tizen native Project Wizard is an IDE tool that is used
++ to create a native application project. It allows you to define the
++ application type and requirements and components.</p>
++ <p>The Tizen IDE provides various project templates that make it
++ easier for you to start coding your application. When you create a
++ new project, you can select a specific template, which the Tizen
++ native Project Wizard uses to automatically create basic
++ functionalities for the native application. The default project
++ files and folders are also created.</p>
++
++ <p>On the main page of the Tizen native Project Wizard, you can
++ set basic properties of a project, such as the project name,
++ package name, location, sample, and template.</p>
++
++ <p class="figure">Figure: Project Wizard</p>
++ <p align="center">
++ <img alt="Project Wizard" width="75%"
++ src="../images/native_application_wizard.png" />
++ </p>
++
++ <p>The options you can set are listed in the following table.</p>
++ <table border="1">
++ <caption>Table: Project Wizard options</caption>
++ <tbody>
++ <tr>
++ <th
++ style="text-align: center; margin-left: auto; margin-right: auto;">Option</th>
++ <th
++ style="text-align: center; margin-left: auto; margin-right: auto;">Description</th>
++ </tr>
++ <tr>
++ <td>Tab</td>
++ <td>You can create an application based on a template or
++ sample application.</td>
++ </tr>
++ <tr>
++ <td>Application type</td>
++ <td>Select the application type. It can be previewed in the
++ description view on the right.</td>
</tr>
-- <tr>
-- <td>Project name</td>
-- <td>Enter the name for the project to be created. <p>The project names are restricted to the following regular expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.</p></td>
++ <tr>
++ <td>Project name</td>
++ <td>Enter the name for the project to be created.
++ <p>The project names are restricted to the following regular
++ expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.</p>
++ </td>
</tr>
-- <tr>
-- <td>Use default location</td>
-- <td>If you check this option, the project is created in the <span style="font-family: Courier New,Courier,monospace">$<workspace_location>/$<project_name></span> directory.</td>
++ <tr>
++ <td>Package name</td>
++ <td>Enter the name for the package to be created.</td>
</tr>
-- <tr>
-- <td>Location</td>
-- <td>Manually select the location of the project. If you check the <strong>Use default location</strong> checkbox, this option is disabled.</td>
++ <tr>
++ <td>Profile</td>
++ <td>select the project's profile.</td>
</tr>
-- </tbody>
++ <tr>
++ <td>Version</td>
++ <td>select the profile version.</td>
++ </tr>
++ <tr>
++ <td>Use default location</td>
++ <td>If you check this option, the project is created in the
++ <span style="font-family: Courier New, Courier, monospace">$<workspace_location>/$<project_name></span>
++ directory.
++ </td>
++ </tr>
++ <tr>
++ <td>Location</td>
++ <td>Manually select the location of the project. If you
++ check the <strong>Use default location</strong> checkbox, this
++ option is disabled.
++ </td>
++ </tr>
++ <tr>
++ <td>Working sets</td>
++ <td>If you want to include your project as a specific
++ working set, select a <a
++ href="http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.platform.doc.user%2Fconcepts%2Fcworkset.htm"
++ target="_blank">working set</a>.
++ </td>
++ </tr>
++ </tbody>
</table>
--
--<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>
++ <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>
++ <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>
++ <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>
<!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>Project Wizard </title>
-- </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>Project Wizard</title>
++</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
--<div id="toc-navigation">
--</div>
++ <div id="toc-navigation"></div>
--<div id="container"><div id="contents"><div class="content">
-- <div id="profile">
-- <p><img alt="Mobile web" src="../images/mw_icon.png"/> <img alt="Wearable web" src="../images/ww_icon.png"/></p>
-- </div>
--
++ <div id="container">
++ <div id="contents">
++ <div class="content">
++ <div id="profile">
++ <p>
++ <img alt="Mobile web" src="../images/mw_icon.png" /> <img
++ alt="Wearable web" src="../images/ww_icon.png" />
++ </p>
++ </div>
-- <h1>Project Wizard</h1>
-- <p>The Tizen Web Project Wizard is an IDE tool that is used to create a Web application project.</p>
-- <p>The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen Web Project Wizard uses to automatically create basic functionalities for the Web application. The default project files and folders are also created.</p>
-- <p>The following table lists the available project templates.</p>
-- <table border="1">
-- <caption>
-- Table: Project templates
-- </caption>
-- <tbody>
-- <tr>
-- <th>Project type</th>
-- <th>Application type</th>
-- <th>Description</th>
-- </tr>
-- <tr>
-- <td>Basic</td>
-- <td>Blank Application</td>
-- <td>Tizen blank application template.</td>
-- </tr>
-- <tr>
-- <td>jQuery Mobile (mobile only)</td>
-- <td>
-- <ul>
-- <li>Single Page Application</li>
-- <li>Multi Page Application</li>
-- <li>Master Detail Application</li>
-- <li>Navigation Application</li>
-- </ul></td>
-- <td>Templates based on <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a>. <p>You can alter the application page header, body, and footer based on the following color themes:</p>
-- <ul>
-- <li>A - Black</li>
-- <li>B - Blue</li>
-- <li>C - Grey</li>
-- <li>D - Light grey</li>
-- <li>E - Yellow</li>
-- </ul> </td>
-- </tr>
-- <tr>
-- <td>IME application (wearable only)</td>
-- <td>Web IME Application</td>
-- <td>Web-based IME application template, which lets you create your own IME by only writing HTML, CSS, and JavaScript code.
-- </td>
-- </tr>
-- </tbody>
-- </table>
--
--
-- <p>On the main page of the Tizen Web Project Wizard, you can set basic properties of a project, such as the project name, location, and working sets.</p>
--
-- <p class="figure">Figure: Project Wizard</p>
-- <p align="center"><img alt="Project Wizard" src="../images/web_application_wizard.png"/></p>
--
-- <p>The options you can set are listed in the following table.</p>
-- <table border="1">
-- <caption>
-- Table: Project Wizard options
-- </caption>
-- <tbody>
-- <tr>
-- <th style="text-align:center;margin-left:auto;margin-right:auto;">Option</th>
-- <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
-- </tr>
-- <tr>
-- <td>Tab</td>
-- <td>You can create an application based on a template or sample application.</td>
-- </tr>
-- <tr>
-- <td>Category</td>
-- <td>If the selected category has samples or templates, they are displayed in the list on the left.</td>
-- </tr>
-- <tr>
-- <td>Application type</td>
-- <td>Select the application type. It can be previewed in the description view on the right.</td>
++
++ <h1>Project Wizard</h1>
++ <p>The Tizen Web Project Wizard is an IDE tool that is used to
++ create a Web application project.</p>
++ <p>The Tizen IDE provides various project templates that make it
++ easier for you to start coding your application. When you create a
++ new project, you can select a specific template, which the Tizen
++ Web Project Wizard uses to automatically create basic
++ functionalities for the Web application. The default project files
++ and folders are also created.</p>
++
++ <p>On the main page of the Tizen Web Project Wizard, you can set
++ basic properties of a project, such as the project name, location,
++ and working sets.</p>
++
++ <p class="figure">Figure: Project Wizard</p>
++ <p align="center">
++ <img alt="Project Wizard" width="75%"
++ src="../images/web_application_wizard.png" />
++ </p>
++
++ <p>The options you can set are listed in the following table.</p>
++ <table border="1">
++ <caption>Table: Project Wizard options</caption>
++ <tbody>
++ <tr>
++ <th
++ style="text-align: center; margin-left: auto; margin-right: auto;">Option</th>
++ <th
++ style="text-align: center; margin-left: auto; margin-right: auto;">Description</th>
++ </tr>
++ <tr>
++ <td>Tab</td>
++ <td>You can create an application based on templates or
++ online samples.</td>
</tr>
-- <tr>
-- <td>Project name</td>
-- <td>Enter the name for the project to be created. <p>The project names are restricted to the following regular expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.</p></td>
++ <tr>
++ <td>Application type</td>
++ <td>Select the application type. It can be previewed in the
++ description view on the right.</td>
</tr>
-- <tr>
-- <td>Use default location</td>
-- <td>If you check this option, the project is created in the <span style="font-family: Courier New,Courier,monospace">$<workspace_location>/$<project_name></span> directory.</td>
++ <tr>
++ <td>Project name</td>
++ <td>Enter the name for the project to be created.
++ <p>The project names are restricted to the following regular
++ expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.</p>
++ </td>
</tr>
-- <tr>
-- <td>Location</td>
-- <td>Manually select the location of the project. If you check the <strong>Use default location</strong> checkbox, this option is disabled.</td>
++ <tr>
++ <td>Profile</td>
++ <td>select the project's profile.</td>
</tr>
-- <tr>
-- <td>Working sets</td>
-- <td>If you want to include your project as a specific working set, select a <a href="http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.platform.doc.user%2Fconcepts%2Fcworkset.htm" target="_blank">working set</a>.</td>
++ <tr>
++ <td>Version</td>
++ <td>select the profile version.</td>
</tr>
-- </tbody>
++ <tr>
++ <td>Use default location</td>
++ <td>If you check this option, the project is created in the
++ <span style="font-family: Courier New, Courier, monospace">$<workspace_location>/$<project_name></span>
++ directory.
++ </td>
++ </tr>
++ <tr>
++ <td>Location</td>
++ <td>Manually select the location of the project. If you
++ check the <strong>Use default location</strong> checkbox, this
++ option is disabled.
++ </td>
++ </tr>
++ <tr>
++ <td>Working sets</td>
++ <td>If you want to include your project as a specific
++ working set, select a <a
++ href="http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.platform.doc.user%2Fconcepts%2Fcworkset.htm"
++ target="_blank">working set</a>.
++ </td>
++ </tr>
++ </tbody>
</table>
--
--<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>
++ <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>
++ <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>
++ <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>
<!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>
++<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> > UI Application > 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 should be freed by the caller unless stated otherwise.</p>
--<p>To not free memory may lead to memory leaks. Insufficient system memory will trigger a system low memory notification and some applications may be killed. As a heuristic algorithm selects the process to be killed, it can destabilize the system.</p>
--
--<pre class="prettyprint">
++ <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 > </strong> {Platform} (e.g.
++ MOBILE-x.x or WEARABLE-x.x) <strong> > 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" width="75%"
++ 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 should be freed by the
++ caller unless stated otherwise.</p>
++ <p>To not free memory may lead to memory leaks. Insufficient
++ system memory will trigger a system low memory notification and
++ some applications may 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))
{
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 ABI 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
++</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 ABI
++ 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
// 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.tutorials/html/native/ui/efl_tutorial_n.htm">EFL</a> is the native graphical toolkit for Tizen. This tutorial is an introduction to the EFL rather than a full-fledged Tizen application, as it does not use Appcore.</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
++</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.tutorials/html/native/ui/efl_tutorial_n.htm">EFL</a>
++ is the native graphical toolkit for Tizen. This tutorial is an
++ introduction to the EFL rather than a full-fledged Tizen
++ application, as it does not use Appcore.
++ </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 *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
++ <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;
}
</pre>
-- <table class="note">
-- <tbody>
-- <tr>
-- <th class="note">Note</th>
-- </tr>
-- <tr>
-- <td class="note">For more information on Appcore, see the <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 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
++ <table class="note">
++ <tbody>
++ <tr>
++ <th class="note">Note</th>
++ </tr>
++ <tr>
++ <td class="note">For more information on Appcore, see
++ the <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 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
// 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
++ <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
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
++ <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);
evas_object_show(ad->conformant);
</pre>
--<p> The box is probably the most common container; it arranges a set of widgets in a vertical or horizontal way.</p>
--<pre class="prettyprint"> // Create the box
++ <p>The box is probably the most common container; it
++ arranges a set of widgets 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
evas_object_show(box);
</pre>
--<p> Labels hold text with formatting and over multiple lines.</p>
--<pre class="prettyprint"> // Create the label
++ <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);
// Show the label
evas_object_show(label);
</pre>
--<p> The last widget is the button. It exits the application when clicked.</p>
--<pre class="prettyprint"> // Create the button
++ <p>The last widget 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_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
++ <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.guides/html/native/ui/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
--<pre class="prettyprint">static void
++</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.guides/html/native/ui/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 widget 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">
++ </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 widget 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']);
<!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>
++<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 onload="prettyPrint()" style="overflow: auto;">
--<div id="toc-navigation">
-- <div id="profile">
-- <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-- </div>
--
-- <div id="toc_border"><div id="toc">
-- <p class="toc-title">Content</p>
-- <ul class="toc">
-- <li><a href="#webapp">Creating Your First Mobile Web App</a></li>
-- <li><a href="#wearapp">Creating Your First Wearable Web App</a></li>
-- </ul>
-- </div></div>
--</div>
--
--<div id="container"><div id="contents"><div class="content">
--<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>
--
--
--<h2 id="webapp" name="webapp">Creating Your First Mobile Web App</h2>
--
-- <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_w.htm">Web 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/web_tools/tools_w.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p>
-- <h3 id="create" name="create">To Create a HelloWorld Application</h3>
-- <ol class="tutorstep">
-- <li>Creating the HelloWorld Project
-- <ol type="a">
-- <li>Launch the <strong>Tizen IDE</strong>.</li>
-- <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Web Project</strong> window, select <strong>Template > Tizen > Basic > Basic Application</strong>.</p> </li>
-- <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li>
-- </ol> <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">config.xml</span> file as well as in several project folders, including:</p>
-- <ul>
-- <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS files directory</li>
-- <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript files directory</li>
-- <li><span style="font-family: Courier New,Courier,monospace">config.xml</span> file: Application configuration file</li>
-- <li><span style="font-family: Courier New,Courier,monospace">icon.png</span> file: Icon file</li>
-- <li><span style="font-family: Courier New,Courier,monospace">index.html</span> file: Default HTML file</li>
-- </ul> </li>
-- <li>Configuring the Application and Creating the Application Code <p>The Web project source files already contain the basic application functionality.</p> <p>The automatically-included code creates an application with the title "Application Name". To change the title to HelloWorld, take the following steps (illustrated in the following figure):</p>
-- <ol type="a">
-- <li>Open <span style="font-family: Courier New,Courier,monospace">index.html</span> (1). </li>
-- <li>Select the title (2). </li>
-- <li>Locate the title in the code and change "Application Name" into "HelloWorld" (3).</li>
-- </ol> <p class="figure">Figure: HelloWorld project</p> <p align="center"> <img alt="HelloWorld project" src="../../images/create_project.png" /> </p> <p>You also have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#design">design the application UI</a>.</p> </li>
-- <li>Building and Packaging the Application <p>After you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> file.</p> </li>
-- <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a>, <a href="../process/run_debug_app_w.htm#simulator">Simulator</a>, or <a href="../process/run_debug_app_w.htm#target">real target device</a>. </p><p>The following figure shows the Web application running in the Emulator.</p> <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/running_project.png" /> </p> <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li>
-- </ol>
--
-- <h2 id="wearapp" name="wearapp">Creating Your First Wearable Web App</h2>
--
-- <p>This tutorial demonstrates how you can create a simple HelloWorld application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web <a href="../process/app_dev_process_w.htm">application development process</a> and use the Tizen SDK, installing the created application on the Emulator or a target device.</p>
-- <p>When developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to make creating functionality and designing the application UI easier.</p>
--
-- <h3 id="create_ww" name="create_ww">To Create a HelloWorld Application</h3>
-- <ol class="tutorstep">
-- <li>Creating the HelloWorld Project
-- <ol type="a">
-- <li>Launch the <strong>Tizen IDE</strong>.</li>
-- <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>To use the Wearable UI project template, in the <strong>New Tizen Wearable Web Project</strong> window, select <strong>Template > Wearable UI > Basic 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/helloworld_helloworld.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">config.xml</span> file as well as in several project folders, including:</p>
-- <ul>
-- <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS file directory</li>
-- <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript file directory</li>
-- <li><span style="font-family: Courier New,Courier,monospace">lib</span> folder: Tizen wearable UI framework directory
-- <ul>
-- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.min.css</span>: Release version of the Tizen wearable UI theme </li>
-- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.min.js</span>: Release version of the Tizen wearable UI library </li>
-- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.css</span>: Debug version of the Tizen wearable UI theme </li>
-- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.js</span>: Debug version of the Tizen wearable UI library </li>
-- </ul>
-- </li>
-- <li><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file</li>
-- <li><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Icon file</li>
-- <li><span style="font-family: Courier New,Courier,monospace">index.html</span>: Default HTML file</li>
--
-- </ul> </li>
-- <li>Configuring the Application and Creating the Application Code
-- <p>The Web project source files already contain the basic application functionality.</p>
-- <ol type="a">
-- <li>Open the <span style="font-family: Courier New,Courier,monospace">index.html</span> file (1).</li>
-- <li>Set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag (2).</li>
-- <li>Add the <span style="font-family: Courier New,Courier,monospace">tau.min.css</span> file (3).
-- <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li>
-- <li>Add a link to the <span style="font-family: Courier New,Courier,monospace">tau.min.js</span> file in the <span style="font-family: Courier New,Courier,monospace">script</span> element (4).
-- <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li></ol>
--
--<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace">index.html</span> file</p> <p align="center"> <img alt="index.html file" src="../../images/helloworld_js.png" /> </p>
--
--
-- <p>You have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#code">code the application features</a>.</p> </li>
--
--
-- <li>Creating a Layout using the Wearable UI Theme <p>In the Wearable UI, each scene is named a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm">page</a>. When you include the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class attribute in a <span style="font-family: Courier New,Courier,monospace"><div></span> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.</p>
--<p>For more information about the Tizen wearable UI layout and components, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Wearable Web UI Framework Reference</a>.</p> </li>
--
-- <li>Building and Packaging the Application
-- <p>When you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> package file.</p> </li>
-- <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a> or a real <a href="../process/run_debug_app_w.htm#target">target device</a>. </p><p>The following figure shows the Web application running in the Emulator.</p>
--
-- <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/helloworld_emulator.png" /> </p>
--
-- <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</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>
++ <div id="toc-navigation">
++ <div id="profile">
++ <p>
++ <img alt="Mobile Web" src="../../images/mw_icon.png" /> <img
++ alt="Wearable Web" src="../../images/ww_icon.png" />
++ </p>
++ </div>
++
++ <div id="toc_border">
++ <div id="toc">
++ <p class="toc-title">Content</p>
++ <ul class="toc">
++ <li><a href="#webapp">Creating Your First Mobile Web App</a></li>
++ <li><a href="#wearapp">Creating Your First Wearable Web
++ App</a></li>
++ </ul>
++ </div>
++ </div>
++ </div>
++
++ <div id="container">
++ <div id="contents">
++ <div class="content">
++ <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>
++
++
++ <h2 id="webapp" name="webapp">Creating Your First Mobile Web
++ App</h2>
++
++ <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_w.htm">Web
++ 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/web_tools/tools_w.htm">tools
++ included in the SDK</a> to ease the tasks of creating functionality
++ and designing the application UI.
++ </p>
++ <h3 id="create" name="create">To Create a HelloWorld
++ Application</h3>
++ <ol class="tutorstep">
++ <li>Creating the HelloWorld Project
++ <ol type="a">
++ <li>Launch the <strong>Tizen IDE</strong>.
++ </li>
++ <li><a href="../process/creating_app_project_w.htm">Create
++ the application project in the IDE</a>.
++ <p>
++ During the project creation, use the basic Tizen project
++ template: in the <strong>New Tizen Web Project</strong> window,
++ select <strong>Template > </strong>{Platform} (e.g. MOBILE-x.x)<strong>
++ > Basic Application</strong>.
++ </p></li>
++ <li>Define <strong>helloworld</strong> as the name of your
++ project and click <strong>Finish</strong>.
++ </li>
++ </ol>
++ <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">config.xml</span>
++ file as well as in several project folders, including:
++ </p>
++ <ul>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">css</span>
++ folder: CSS files directory</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">js</span>
++ folder: JavaScript files directory</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">config.xml</span>
++ file: Application configuration file</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">icon.png</span>
++ file: Icon file</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">index.html</span>
++ file: Default HTML file</li>
++ </ul>
++ </li>
++ <li>Configuring the Application and Creating the Application
++ Code
++ <p>The Web project source files already contain the basic
++ application functionality.</p>
++ <p>The automatically-included code creates an application with
++ the title "Application Name". To change the title to
++ HelloWorld, take the following steps (illustrated in the
++ following figure):</p>
++ <ol type="a">
++ <li>Open <span
++ style="font-family: Courier New, Courier, monospace">index.html</span>
++ (1).
++ </li>
++ <li>Locate the title in the code and change
++ "Application Name" into "HelloWorld" (2).</li>
++ </ol>
++ <p class="figure">Figure: HelloWorld project</p>
++ <p align="center">
++ <img alt="HelloWorld project" width="75%"
++ src="../../images/helloworld_index.png" />
++ </p>
++ <p>
++ You also have various options to <a
++ href="../process/setting_properties_w.htm#set_widget">set
++ the application configuration</a> using the <span
++ style="font-family: Courier New, Courier, monospace">config.xml</span>
++ file and <a href="../process/app_dev_process_w.htm#design">design
++ the application UI</a>.
++ </p>
++ </li>
++ <li>Building and Packaging the Application
++ <p>
++ After you have finished implementing your application, you must <a
++ href="../process/app_dev_process_w.htm#build">build it</a>.
++ </p>
++ <p>
++ After building, the Tizen IDE automatically packages the project
++ by creating a <span
++ style="font-family: Courier New, Courier, monospace">.wgt</span>
++ file.
++ </p>
++ </li>
++ <li>Running and Debugging the Application on the Emulator
++ <p>
++ You can run the HelloWorld application on the <a
++ href="../process/run_debug_app_w.htm#emulator">Emulator</a>, <a
++ href="../process/run_debug_app_w.htm#simulator">Simulator</a>,
++ or <a href="../process/run_debug_app_w.htm#target">real
++ target device</a>.
++ </p>
++ <p>The following figure shows the Web application running in
++ the Emulator.</p>
++ <p class="figure">Figure: Running the project</p>
++ <p align="center">
++ <img alt="Running the project"
++ src="../../images/running_project.png" />
++ </p>
++ <p>
++ On a real target device, you can use the <a
++ href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web
++ Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug
++ the application</a>.
++ </p>
++ </li>
++ </ol>
++
++ <h2 id="wearapp" name="wearapp">Creating Your First Wearable
++ Web App</h2>
++
++ <p>
++ This tutorial demonstrates how you can create a simple Hello
++ application with the Tizen wearable UI. The tutorial helps you to
++ familiarize yourself with the Tizen wearable Web <a
++ href="../process/app_dev_process_w.htm">application
++ development process</a> and use the Tizen SDK, installing the created
++ application on the Emulator or a target device.
++ </p>
++ <p>
++ When developing a more complex application, you can take advantage
++ of the <a
++ href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools
++ included in the SDK</a> to make creating functionality and designing
++ the application UI easier.
++ </p>
++
++ <h3 id="create_ww" name="create_ww">To Create a Hello
++ Application</h3>
++ <ol class="tutorstep">
++ <li>Creating the Hello Project
++ <ol type="a">
++ <li>Launch the <strong>Tizen IDE</strong>.
++ </li>
++ <li><a href="../process/creating_app_project_w.htm">Create
++ the application project in the IDE</a>.
++ <p>
++ To use the Wearable UI project template, in the <strong>New
++ Tizen Wearable Web Project</strong> window, select <strong>Template
++ > </strong> {Platform} (e.g. WEARABLE-x.x)<strong> > Basic</strong>.
++ </p></li>
++ <li>Define <strong>Hello</strong> as the name of your
++ project and click <strong>Finish</strong>.
++ </li>
++ </ol>
++ <p class="figure">Figure: Creating the Hello project</p>
++ <p align="center">
++ <img alt="Creating the Hello project" width="75%"
++ src="../../images/hello_wearable.png" />
++ </p>
++
++ <p>
++ The new <strong>Hello</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">config.xml</span>
++ file as well as in several project folders, including:
++ </p>
++ <ul>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">css</span>
++ folder: CSS file directory</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">js</span>
++ folder: JavaScript file directory</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">lib</span>
++ folder: Tizen wearable UI framework directory
++ <ul>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">lib/tau/themes/default/tau.min.css</span>:
++ Release version of the Tizen wearable UI theme</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">lib/tau/wearable/js/tau.min.js</span>:
++ Release version of the Tizen wearable UI library</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">lib/tau/themes/default/tau.css</span>:
++ Debug version of the Tizen wearable UI theme</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">lib/tau/wearable/js/tau.js</span>:
++ Debug version of the Tizen wearable UI library</li>
++ </ul></li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">config.xml</span>:
++ Application configuration file</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">icon.png</span>:
++ Icon file</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">index.html</span>:
++ Default HTML file</li>
++
++ </ul>
++ </li>
++ <li>Configuring the Application and Creating the Application
++ Code
++ <p>The Web project source files already contain the basic
++ application functionality.</p>
++ <ol type="a">
++ <li>Open the <span
++ style="font-family: Courier New, Courier, monospace">index.html</span>
++ file (1).
++ </li>
++ <li>Set the <span
++ style="font-family: Courier New, Courier, monospace">viewport</span>
++ meta tag (2).
++ </li>
++ <li>Add the <span
++ style="font-family: Courier New, Courier, monospace">tau.min.css</span>
++ file (3).
++ <p>
++ If you created your application project using the Wearable UI
++ template, the link already exists in the <span
++ style="font-family: Courier New, Courier, monospace">index.html</span>
++ file.
++ </p></li>
++ <li>Add a link to the <span
++ style="font-family: Courier New, Courier, monospace">tau.min.js</span>
++ file in the <span
++ style="font-family: Courier New, Courier, monospace">script</span>
++ element (4).
++ <p>
++ If you created your application project using the Wearable UI
++ template, the link already exists in the <span
++ style="font-family: Courier New, Courier, monospace">index.html</span>
++ file.
++ </p></li>
++ </ol>
++
++ <p class="figure">
++ Figure: <span
++ style="font-family: Courier New, Courier, monospace">index.html</span>
++ file
++ </p>
++ <p align="center">
++ <img alt="index.html file" width="75%" src="../../images/hello_wearable_js.png" />
++ </p>
++
++
++ <p>
++ You have various options to <a
++ href="../process/setting_properties_w.htm#set_widget">set
++ the application configuration</a> using the <span
++ style="font-family: Courier New, Courier, monospace">config.xml</span>
++ file and <a href="../process/app_dev_process_w.htm#code">code
++ the application features</a>.
++ </p>
++ </li>
++
++
++ <li>Creating a Layout using the Wearable UI Theme
++ <p>
++ In the Wearable UI, each scene is named a <a
++ href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm">page</a>.
++ When you include the <span
++ style="font-family: Courier New, Courier, monospace">ui-page</span>
++ class attribute in a <span
++ style="font-family: Courier New, Courier, monospace"><div></span>
++ element, the attribute applies to the visible Wearable UI theme
++ and the supporting page navigation features.
++ </p>
++ <p>
++ For more information about the Tizen wearable UI layout and
++ components, see <a
++ href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen
++ Wearable Web UI Framework Reference</a>.
++ </p>
++ </li>
++
++ <li>Building and Packaging the Application
++ <p>
++ When you have finished implementing your application, you must <a
++ href="../process/app_dev_process_w.htm#build">build it</a>.
++ </p>
++ <p>
++ After building, the Tizen IDE automatically packages the project
++ by creating a <span
++ style="font-family: Courier New, Courier, monospace">.wgt</span>
++ package file.
++ </p>
++ </li>
++ <li>Running and Debugging the Application on the Emulator
++ <p>
++ You can run the Hello application on the <a
++ href="../process/run_debug_app_w.htm#emulator">Emulator</a> or a
++ real <a href="../process/run_debug_app_w.htm#target">target
++ device</a>.
++ </p>
++ <p>The following figure shows the Web application running in
++ the Emulator.</p>
++
++ <p class="figure">Figure: Running the project</p>
++ <p align="center">
++ <img alt="Running the project" width="50%"
++ src="../../images/hello_wearable_emulator.png" />
++ </p>
++
++ <p>
++ On a real target device, you can use the <a
++ href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web
++ Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug
++ the application</a>.
++ </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>
<!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>
++<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 the Application Project</title>
++<title>Creating the Application Project</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
--<div id="toc-navigation">
-- <div id="profile">
-- <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-- </div>
--
-- <div id="toc_border"><div id="toc">
-- <p class="toc-title">Content</p>
-- <ul class="toc">
-- <li><a href="#import">Importing a Project</a></li>
-- <li><a href="#export">Exporting a Project User Template</a></li>
-- <li><a href="#template">Supported Templates and Samples</a></li>
-- <li><a href="#user">User Template</a></li>
-- </ul>
-- </div></div>
--</div>
++ <div id="toc-navigation">
++ <div id="profile">
++ <p>
++ <img alt="Mobile Web" src="../../images/mw_icon.png" /> <img
++ alt="Wearable Web" src="../../images/ww_icon.png" />
++ </p>
++ </div>
--<div id="container"><div id="contents"><div class="content">
-- <h1>Creating the Application Project</h1>
-- <p>You can create a Web application project by selecting from a variety of <a href="#template">templates and samples</a>. The following instructions are specific for creating the project with a template.</p>
-- <p>To create a Web application project:</p>
-- <ol>
-- <li>In the IDE, select <strong>File > New > Tizen Web Project</strong>. <p>If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to <strong>Window > Open Perspective > Other</strong> and select the perspective you need.</p></li>
-- <li>In the <strong>New Tizen Web Project</strong> window, define the project details:
-- <ol type="a">
-- <li>Select the project type.</li>
-- <li>Define the name of your project. <p>The default location for your application project is defined.</p>
-- <table class="note">
-- <tbody>
-- <tr>
-- <th class="note">Note</th>
-- </tr>
-- <tr>
-- <td class="note">The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.</td>
-- </tr>
-- </tbody>
-- </table></li>
-- </ol> </li>
-- <li>Some templates allow you to customize some part of the project. <p>If the <strong>Next</strong> button is enabled, click it and customize the jQuery Mobile settings.</p></li>
-- <li>Click <strong>Finish</strong>.</li>
-- </ol>
-- <p>The new application 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">config.xml</span> file as well as in several project folders.</p>
-- <p class="figure">Figure: Creating a Tizen mobile Web project</p>
-- <p align="center"><img alt="Creating a Tizen mobile Web project" src="../../images/web_application_project.png" /></p>
++ <div id="toc_border">
++ <div id="toc">
++ <p class="toc-title">Content</p>
++ <ul class="toc">
++ <li><a href="#import">Importing a Project</a></li>
++ <li><a href="#export">Exporting a Project User Template</a></li>
++ <li><a href="#user">User Template</a></li>
++ </ul>
++ </div>
++ </div>
++ </div>
--<p class="figure">Figure: Creating a Tizen wearable Web project</p>
--<p align="center"><img alt="Creating a Tizen wearable Web project" src="../../images/wearable_web_application_project.png" /></p>
++ <div id="container">
++ <div id="contents">
++ <div class="content">
++ <h1>Creating the Application Project</h1>
++ <p>
++ You can create a Web application project by selecting from a
++ variety of <a href="#template">templates and samples</a>. The
++ following instructions are specific for creating the project with a
++ template.
++ </p>
++ <p>To create a Web application project:</p>
++ <ol>
++ <li>In the IDE, select <strong>File > New >
++ Tizen Web Project</strong>.
++ <p>
++ If the project option you want is not visible, make sure that you
++ are using the correct perspective (Tizen Web). To switch
++ perspectives, go to <strong>Window > Open Perspective
++ > Other</strong> and select the perspective you need.
++ </p></li>
++ <li>In the <strong>New Tizen Web Project</strong> window,
++ define the project details:
++ <ol type="a">
++ <li>Select the project type.</li>
++ <li>Define the name of your project.
++ <p>The default location for your application project is
++ defined.</p>
++ <table class="note">
++ <tbody>
++ <tr>
++ <th class="note">Note</th>
++ </tr>
++ <tr>
++ <td class="note">The Tizen API names cannot be used as
++ project names. The project name must be more than 2
++ characters and is restricted to the following regular
++ expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.</td>
++ </tr>
++ </tbody>
++ </table>
++ </li>
++ </ol>
++ </li>
++ <li>Click <strong>Finish</strong>.
++ </li>
++ </ol>
++ <p>
++ The new application 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">config.xml</span>
++ file as well as in several project folders.
++ </p>
++ <p class="figure">Figure: Creating a Tizen mobile Web project</p>
++ <p align="center">
++ <img alt="Creating a Tizen mobile Web project" width="75%"
++ src="../../images/web_application_wizard.png" />
++ </p>
--
--
--
-- <h2 id="import" name="import">Importing a Project</h2>
-- <p>If you have an existing Tizen application project, you can import it into the Tizen IDE:</p>
-- <ol>
- <li>Select <strong>File > Import > Tizen > Tizen Project</strong>.</li>
- <li>Select <strong>File > Import > Tizen > Tizen Project or Package</strong>.</li>
-- <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or Web application package file (with the <span style="font-family: Courier New,Courier,monospace">.wgt</span> extension).</li>
-- <li>Click the selection buttons under <strong>To</strong>, and select both a profile and a version.</li>
-- <li>Enter a project name.</li>
-- <li>Click <strong>Finish</strong>.</li>
-- </ol>
- <p>And supports to import by a legacy way:</p>
- <ol>
- <li>Select <strong>File > Import > Tizen > Web Projects and Widget file</strong>.</li>
- <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or widget file (with the <span style="font-family: Courier New,Courier,monospace">.wgt</span> extension). <p>After selecting the project, you can copy it into the workspace by selecting the <strong>Copy projects into workspace</strong> check box.</p></li>
- <li>Click <strong>Finish</strong>.</li>
- <table class="note">
- <tbody>
- <tr><th class="note">Note</th></tr>
- <tr><td class="note">This is supported for who is using earlier versions of Tizen SDK. But, this will be deprecated at next version because a legacy Tizen application project is no longer suitable to the multi-platform environment.</td></tr>
- </tbody>
- </table>
- </ol>
-- <h2 id="export" name="export">Exporting a Project User Template</h2>
-- <p>To export an existing project as a <a href="#user">user template</a> that you can use as a basis for creating other projects:</p>
-- <ol>
-- <li>Select <strong>File > Export > Tizen > Tizen Web User Template</strong>.</li>
-- <li>In the <strong>User Template Export Wizard</strong> window, define the project and user template details:
-- <ol type="a">
-- <li>Select the source project.</li>
-- <li>Define the name of your user template.</li>
-- <li>Click <strong>Browse</strong> and select the export location. <p>You can add the template to the <strong>User Template</strong> tab of the <strong>New Tizen Web Project</strong> window by selecting the <strong>Import a template to the new project wizard automatically</strong> check box. To select a template description, preview image, and icon files to be shown in the Project Wizard, click <strong>Next</strong>.</p></li>
-- </ol> </li>
-- <li>Click <strong>Finish</strong>.</li>
-- </ol>
--
-- <h2 name="template" id="template">Supported Templates and Samples</h2>
-- <p>You can create Tizen Web applications based on a variety of templates and samples. In addition to the predefined templates and samples, you can also <a href="#export">create your own user templates</a>.</p>
-- <p>The following table lists the available templates for Tizen Web application development. For more information about the available samples, see <a href="https://developer.tizen.org/downloads/sample-applications" target="blank">Sample Applications</a>.</p>
-- <table border="1">
-- <caption>
-- Table: Templates
-- </caption>
-- <tbody>
-- <tr>
-- <th>Project type</th>
-- <th>Application type</th>
-- <th>Description</th>
-- </tr>
-- <tr>
-- <td>Basic</td>
-- <td>Blank Application</td>
-- <td>This is a Tizen blank application template.</td>
-- </tr>
-- <tr>
-- <td>jQuery Mobile (mobile applications only)</td>
-- <td>
-- <ul>
-- <li>Single Page Application</li>
-- <li>Multi Page Application</li>
-- <li>Master Detail Application</li>
-- <li>Navigation Application</li>
-- </ul></td>
-- <td>These templates are based on <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a>. <p>You can alter the application page header, body, and footer based on the following color themes:</p>
-- <ul>
-- <li>A - Black</li>
-- <li>B - Blue</li>
-- <li>C - Grey</li>
-- <li>D - Light grey</li>
-- <li>E - Yellow</li>
-- </ul> </td>
-- </tr>
-- <tr>
-- <td>IME application (wearable applications only)</td>
-- <td>Web IME Application</td>
-- <td>This is a Web-based IME application template, which lets you create your own IME by only writing HTML, CSS, and JavaScript code.
-- </td>
-- </tr>
-- </tbody>
-- </table>
--
-- <h2 name="user" id="user">User Template</h2>
-- <p>You can <a href="#export">create custom user templates from existing projects</a> and then use these templates to create new projects. The created user templates are located in the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA>/ide/user-templates/web</span> directory and a user-defined directory. When you create a user template, you can define the export location in the User Template Export Wizard.</p>
-- <p class="figure">Figure: User template export location</p>
-- <p align="center"><img alt="User template export location" src="../../images/user_template_export.png" /></p>
--
-- <p>The <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA></span> directory is different for different platforms:</p>
-- <ul>
-- <li>In Windows® XP: <span style="font-family: Courier New,Courier,monospace">C:\tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">C:\tizen-wearable-sdk-data</span> (in wearable Web projects)</li>
-- <li>In Windows® 7: <span style="font-family: Courier New,Courier,monospace">C:\tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">C:\tizen-wearable-sdk-data</span> (in wearable Web projects)</li>
-- <li>In Linux: <span style="font-family: Courier New,Courier,monospace">/home/${USER_NAME}/tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">/home/${USER_NAME}/tizen-wearable-sdk-data</span> (in wearable Web projects)</li>
++ <p class="figure">Figure: Creating a Tizen wearable Web project</p>
++ <p align="center">
++ <img alt="Creating a Tizen wearable Web project" width="75%"
++ src="../../images/hello_wearable.png" />
++ </p>
-- </ul>
-- <p>The <span style="font-family: Courier New,Courier,monospace">project</span> folder of a user template consists of project-related files that are copied into new projects created using the user template. You can modify these files in your new project.</p>
-- <p>The following table describes the files included in a user template in addition to the <span style="font-family: Courier New,Courier,monospace">project</span> folder content.</p>
-- <table border="1">
-- <caption>
-- Table: User template files
-- </caption>
-- <tbody>
-- <tr>
-- <th>File</th>
-- <th>Contents</th>
-- </tr>
-- <tr>
-- <td><span style="font-family: Courier New,Courier,monospace">description.xml</span></td>
-- <td><p>This file consists of the following template description information that is displayed in the Project Wizard:</p>
-- <ul>
-- <li><span style="font-family: Courier New,Courier,monospace"><SampleName></span> tag: Project type name. Several project types can be created using the same user template.</li>
-- <li><span style="font-family: Courier New,Courier,monospace"><SampleVersion></span> tag: Project type version.</li>
-- <li><span style="font-family: Courier New,Courier,monospace"><Preview></span> tag: Preview file name.</li>
-- <li><span style="font-family: Courier New,Courier,monospace"><Description></span> tag: Description title.</li>
-- </ul></td>
-- </tr>
-- <tr>
-- <td><span style="font-family: Courier New,Courier,monospace">tizen-app-template.xml</span></td>
-- <td><p>This file consists of the following template definition information that is displayed in the Project Wizard:</p>
-- <ul>
-- <li><span style="font-family: Courier New,Courier,monospace"><template-name></span> tag: User template name.</li>
-- <li><span style="font-family: Courier New,Courier,monospace"><widget-type></span> tag: Widget type, which is set as <span style="font-family: Courier New,Courier,monospace">TIZEN</span> by default.</li>
-- <li><span style="font-family: Courier New,Courier,monospace"><description-file-name></span> tag: Description file name, which is set as <span style="font-family: Courier New,Courier,monospace">description.xml</span> by default.</li>
-- <li><span style="font-family: Courier New,Courier,monospace">icon64</span> and <span style="font-family: Courier New,Courier,monospace">icon32</span> attributes: Icon image file name. The number suffixes refer to the icon size.</li>
-- </ul></td>
-- </tr>
-- </tbody>
-- </table>
-- <p>To create a new user template from an existing user template (instead of an exporting the template from an existing project):</p>
-- <ol>
-- <li>Copy and rename the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA>/ide/user-templates/web</span> folder. <p>The folder contains a default template layout.</p></li>
-- <li>Edit the files within the new folder, or add new files (such as snapshot or icon images and JavaScript and CSS files), as needed.</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>
++ <h2 id="import" name="import">Importing a Project</h2>
++ <p>If you have an existing Tizen application project, you can
++ import it into the Tizen IDE:</p>
++ <ol>
++ <li>Select <strong>File > Import > Tizen >
++ Tizen Project or Package</strong>.
++ </li>
++ <li>Click <strong>Browse</strong> and select the root
++ directory, which contains your existing project, or Web
++ application package file (with the <span
++ style="font-family: Courier New, Courier, monospace">.wgt</span>
++ extension).
++ </li>
++ <li>Click the selection buttons under <strong>To</strong>, and
++ select both a profile and a version.
++ </li>
++ <li>Enter a project name.</li>
++ <li>Click <strong>Finish</strong>.
++ </li>
++ </ol>
++ <h2 id="export" name="export">Exporting a Project User Template</h2>
++ <p>
++ To export an existing project as a <a href="#user">user
++ template</a> that you can use as a basis for creating other projects:
++ </p>
++ <ol>
++ <li>Select <strong>File > Export > Tizen >
++ Tizen Web User Template</strong>.
++ </li>
++ <li>In the <strong>User Template Export Wizard</strong>
++ window, define the project and user template details:
++ <ol type="a">
++ <li>Select the source project.</li>
++ <li>Define the name of your user template.</li>
++ <li>Click <strong>Browse</strong> and select the export
++ location.
++ <p>
++ You can add the template to the <strong>User Template</strong>
++ tab of the <strong>New Tizen Web Project</strong> window by
++ selecting the <strong>Import a template to the new
++ project wizard automatically</strong> check box. To select a template
++ description, preview image, and icon files to be shown in the
++ Project Wizard, click <strong>Next</strong>.
++ </p></li>
++ </ol>
++ </li>
++ <li>Click <strong>Finish</strong>.
++ </li>
++ </ol>
--<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
++ <h2 name="user" id="user">User Template</h2>
++ <p>
++ You can <a href="#export">create custom user templates from
++ existing projects</a> and then use these templates to create new
++ projects. The created user templates are located in the <span
++ style="font-family: Courier New, Courier, monospace"><TIZEN_SDK_DATA>/ide/user-templates/web</span>
++ directory and a user-defined directory. When you create a user
++ template, you can define the export location in the User Template
++ Export Wizard.
++ </p>
++ <p class="figure">Figure: User template export location</p>
++ <p align="center">
++ <img alt="User template export location"
++ src="../../images/user_template_export.png" />
++ </p>
--<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>
++ <p>
++ The <span style="font-family: Courier New, Courier, monospace"><TIZEN_SDK_DATA></span>
++ directory is different for different platforms:
++ </p>
++ <ul>
++ <li>In Windows® XP: <span
++ style="font-family: Courier New, Courier, monospace">C:\tizen-sdk-data</span>
++ (in mobile Web projects) or <span
++ style="font-family: Courier New, Courier, monospace">C:\tizen-wearable-sdk-data</span>
++ (in wearable Web projects)
++ </li>
++ <li>In Windows® 7: <span
++ style="font-family: Courier New, Courier, monospace">C:\tizen-sdk-data</span>
++ (in mobile Web projects) or <span
++ style="font-family: Courier New, Courier, monospace">C:\tizen-wearable-sdk-data</span>
++ (in wearable Web projects)
++ </li>
++ <li>In Linux: <span
++ style="font-family: Courier New, Courier, monospace">/home/${USER_NAME}/tizen-sdk-data</span>
++ (in mobile Web projects) or <span
++ style="font-family: Courier New, Courier, monospace">/home/${USER_NAME}/tizen-wearable-sdk-data</span>
++ (in wearable Web projects)
++ </li>
-- <!--start-->
-- <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>
-- <!--end-->
-- </body>
- </html>
++ </ul>
++ <p>
++ The <span style="font-family: Courier New, Courier, monospace">project</span>
++ folder of a user template consists of project-related files that
++ are copied into new projects created using the user template. You
++ can modify these files in your new project.
++ </p>
++ <p>
++ The following table describes the files included in a user template
++ in addition to the <span
++ style="font-family: Courier New, Courier, monospace">project</span>
++ folder content.
++ </p>
++ <table border="1">
++ <caption>Table: User template files</caption>
++ <tbody>
++ <tr>
++ <th>File</th>
++ <th>Contents</th>
++ </tr>
++ <tr>
++ <td><span
++ style="font-family: Courier New, Courier, monospace">description.xml</span></td>
++ <td><p>This file consists of the following template
++ description information that is displayed in the Project
++ Wizard:</p>
++ <ul>
++ <li><span
++ style="font-family: Courier New, Courier, monospace"><SampleName></span>
++ tag: Project type name. Several project types can be created
++ using the same user template.</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace"><SampleVersion></span>
++ tag: Project type version.</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace"><Preview></span>
++ tag: Preview file name.</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace"><Description></span>
++ tag: Description title.</li>
++ </ul></td>
++ </tr>
++ <tr>
++ <td><span
++ style="font-family: Courier New, Courier, monospace">tizen-app-template.xml</span></td>
++ <td><p>This file consists of the following template
++ definition information that is displayed in the Project Wizard:</p>
++ <ul>
++ <li><span
++ style="font-family: Courier New, Courier, monospace"><template-name></span>
++ tag: User template name.</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace"><widget-type></span>
++ tag: Widget type, which is set as <span
++ style="font-family: Courier New, Courier, monospace">TIZEN</span>
++ by default.</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace"><description-file-name></span>
++ tag: Description file name, which is set as <span
++ style="font-family: Courier New, Courier, monospace">description.xml</span>
++ by default.</li>
++ <li><span
++ style="font-family: Courier New, Courier, monospace">icon64</span>
++ and <span style="font-family: Courier New, Courier, monospace">icon32</span>
++ attributes: Icon image file name. The number suffixes refer to
++ the icon size.</li>
++ </ul></td>
++ </tr>
++ </tbody>
++ </table>
++ <p>To create a new user template from an existing user template
++ (instead of an exporting the template from an existing project):</p>
++ <ol>
++ <li>Copy and rename the <span
++ style="font-family: Courier New, Courier, monospace"><TIZEN_SDK_DATA>/ide/user-templates/web</span>
++ folder.
++ <p>The folder contains a default template layout.</p></li>
++ <li>Edit the files within the new folder, or add new files
++ (such as snapshot or icon images and JavaScript and CSS files), as
++ needed.</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>
++
++ <!--start-->
++ <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>
++ <!--end-->
++</body>
+ </html>
projects / sdk / online-doc.git / commitdiff
