--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Resource Manager</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#config">Providing Configuration-specific Alternative Resources</a></li>
+ <li><a href="#example">Managing Resources in the SDK</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Resource Manager</h1>
+
+<p>Tizen native applications can run on different types of devices, such as wearable, phone, tablets, and TVs. Tizen also supports various resolutions (WVGA ~ XQXGA) and resources. Regardless of these advantages, remember that you must always polish your work to create an optimal application for each device.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The <strong>Resource Manager</strong> is supported only in 2.4 platform. If the <strong>Resource Manager</strong> view is not supported, check the <strong>Project Version</strong> and the <strong>Api Version</strong> in tizen-manifest.xml.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="config" name="config">Providing Configuration-specific Alternative Resources</h2>
+
+<p>An application must provide a different UI depending on a specific device configuration, such as the screen size and screen orientation. When developing the application, provide alternative resources for each device display state by grouping them in resource directories.</p>
+
+<h3>Predefined Resource Directory Hierarchy</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">res/contents</span> directory contains predefined directories for specific alternative resources, and the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file that is referenced at application runtime.</p>
+
+<p>The following example of a BasicUI project shows how to group the resources in your project. Place resources, such as images and sounds, in a specific subdirectory of the project's <span style="font-family: Courier New,Courier,monospace">res/contents</span> directory or the root directory of the <span style="font-family: Courier New,Courier,monospace">contents</span> directory.</p>
+<pre class="prettyprint">
+BasicUI/
+ res/
+ contents/
+ LDPI /
+ basicui.png
+ MDPI/
+ basicui.png
+ basicui.png
+ res.xml
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Always include default resources in the root directory (not in a subdirectory of the <span style="font-family: Courier New,Courier,monospace">contents</span> directory) to ensure that your application has no dependencies on a specific device configuration.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>A specific subdirectory is named as <span style="font-family: Courier New,Courier,monospace">configuration-qualifier</span>. The configuration-qualifier is an indicator that represents each device configuration and more content can be appended to it with a dash (-). The following table shows the 2 configuration-qualifier types currently supported by the SDK.</p>
+
+<table>
+<caption>Table: Configuration-qualifiers</caption>
+
+<tbody>
+<tr>
+ <th>Configuration-qualifier name</th>
+ <th>Type value</th>
+ <th>Description</th>
+</tr>
+ <tr>
+ <td>Language and region code</td>
+ <td>For example, <span style="font-family: Courier New,Courier,monospace">en_US</span> or <span style="font-family: Courier New,Courier,monospace">en_UK</span></td>
+ <td>The type values have the form <span style="font-family: Courier New,Courier,monospace">ll_CC</span>, where <span style="font-family: Courier New,Courier,monospace">ll</span> stands for an ISO 639 2-letter language code, and the optionally followed <span style="font-family: Courier New,Courier,monospace">CC</span> stands for an ISO 3166 2-upper letter region code.</td>
+ </tr>
+ <tr>
+ <td>DPI (Dot Per Inch) density</td>
+ <td><span style="font-family: Courier New,Courier,monospace">LDPI</span>
+<p><span style="font-family: Courier New,Courier,monospace">MDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">HDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XHDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XXHDPI</span></p></td>
+ <td>LDPI: low-dpi from 0 to 240
+<p>MDPI: medium-dpi from 241 to 300</p>
+<p>HDPI: high-dpi from 301 to 380</p>
+<p>XHDPI: extra-high-dpi from 381 to 480</p>
+<p>XXHDPI: extra-extra-high-dpi from 481 to 600</p></td>
+ </tr>
+ </tbody></table>
+
+<p>Each application base scale can be applied to each DPI through a relation modification between the DPI and profile factor. For example, in case of the mobile profile, Z1 has a small screen (profile factor: 0.7) and the 1.8 base scale value, so LDPI is the proper DPI. Z3 has a large screen (profile factor: 0.8) and the 2.6 base scale value, so MDPI is the proper DPI.</p>
+
+<table>
+<caption>Table: DPI and profile factor</caption>
+
+<tbody>
+<tr>
+ <th>DPI type value</th>
+ <th>Small screen mobile
+<p>(profile factor: 0.7)</p></th>
+ <th>Large screen mobile
+<p>(profile factor: 0.8)</p></th>
+</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">LDPI</span>
+<p><span style="font-family: Courier New,Courier,monospace">MDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">HDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XHDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XXHDPI</span></p></td>
+ <td>0 ~ 1.9
+<p>1.9 ~ 2.3</p>
+<p>2.3 ~ 3.0</p>
+<p>3.0 ~ 3.7</p>
+<p>3.7 ~</p></td>
+ <td>0 ~ 2.1
+<p>2.1 ~ 2.7</p>
+<p>2.7 ~ 3.4</p>
+<p>3.4 ~ 4.3</p>
+<p>4.3 ~</p></td>
+ </tr>
+ </tbody></table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is composed of XML elements and describes where each alternative resource is grouped into a device configuration. The following example shows a <span style="font-family: Courier New,Courier,monospace">res.xml</span> file based on the BasicUI project.</p>
+
+<pre class="prettyprint">
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<res xmlns="http://tizen.org/ns/rm">
+ <group-image folder="contents">
+ <node folder="contents/LDPI" screen-dpi-range="from 0 to 240"/>
+ <node folder="contents/MDPI" screen-dpi-range="from 241 to 300"/>
+ </group-image>
+</res>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is automatically generated as part of the build packaging process by the IDE. Since editing the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file manually is not easy, the IDE helps to minimize this difficulty by supporting the <strong>Resource Manager</strong> view.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">You cannot modify the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file manually in IDE. The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is overridden by the IDE during the packaging process. You can disable the override in the project properties in the IDE (<strong>Properties > Tizen SDK > Package</strong>).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Resource Manager View</h3>
+<p>The <strong>Resource Manager</strong> view helps you to place resources to support specific device configurations, such as different screen densities.</p>
+
+<p>In the <strong>Resource Manager</strong> view, you can:</p>
+
+<ul><li>Show all resource configurations that the project provides (see the <a href="#tablist">Tab and folding lists</a> figure).</li>
+<li>Create multiple configuration-qualifier directories and remove them.</li>
+<li>Copy resources to an alternative directory by dragging and dropping into the view area. You can also remove resources.</li>
+<li>Generate code snippets by dragging and dropping into the source editor area.</li></ul>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">If the <strong>Resource Manager</strong> view is not visible, open it by selecting <strong>Window > Show View > Other > Resource Manager</strong> from the IDE menu.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>To place the <span style="font-family: Courier New,Courier,monospace">rsc1.edc</span> file and the images referenced by the file for LDPI and MDPI (as shown in the resource directory hierarchy figure below), use the following steps:</p>
+
+<ol><li>Open the <strong>Resource Configuration</strong> dialog by clicking <img alt="Resource Configuration" src="../images/fallback_icon.png" /> from the toolbar menu in the <strong>Resource Manager</strong> view.
+<p align="center"><img alt="Resource directory hierarchy" src="../images/fallback_directory.png" /></p>
+</li>
+<li>Add a configuration by selecting <strong>LDPI</strong> and <strong>MDPI</strong> in the <strong>DPI</strong> combo box.</li>
+<li>Drag the <span style="font-family: Courier New,Courier,monospace">edje</span> folder and drop it into the proper tab list view area in the <strong>Resource Manager</strong> view.
+
+<p>The following figure shows the Tab list view (on the left) and the Folding list view (on the right) of the <strong>Resource Manager</strong> view. You can switch between the views using the buttons in the <strong>Resource Manager</strong> view toolbar menu (<img alt="Switch to folding" src="../images/fallback_folding.png" /> to switch to folding lists and <img alt="Switch to tabs" src="../images/fallback_tablist.png" /> to switch to tab lists).</p>
+
+<p id="tablist" align="center"><img alt="Tab and folding lists" src="../images/fallback_lists.png" /></p>
+</li></ol>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">All images used by EDC file must be placed in the <span style="font-family: Courier New,Courier,monospace">edje_res</span> folder created by the SDK. The <span style="font-family: Courier New,Courier,monospace">edje_res</span> folder is excluded from the <span style="font-family: Courier New,Courier,monospace">.tpk</span> package file.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="example" name="example">Managing Resources in the SDK</h2>
+
+<p>The following steps provide a quick example for managing resources in the SDK:</p>
+
+<ol><li>Create a BasicUI project.</li>
+<li>Create a resource directory hierarchy and copy images into it.
+<p align="center"><img alt="Resource directory hierarchy and the Resource Manager" src="../images/fallback_hierarchy.png" /></p>
+</li>
+<li>Create a <span style="font-family: Courier New,Courier,monospace">res.xml</span> file with the Build Package command.</li>
+<li>Check the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file.
+<p align="center"><img alt="res.xml" src="../images/fallback_resxml.png" /></p>
+</li>
+<li>Add code for loading alternative resources by using the Resource Manager API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">wearable</a> applications).
+<p align="center"><img alt="Resource Manager" src="../images/fallback_resmanager.png" /></p>
+
+</li>
+<li>Build and run the BasicUI project.
+<p align="center"><img alt="Output" src="../images/fallback_output.png" /></p></li></ol>
+
+<p>In case of predefined application layouts (edc), you can use the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file manually.</p>
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
projects / sdk / online-doc.git / commitdiff
