</div>
<div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#hardwarekey">HardwareKey Event</a></li>
+ <li><a href="#rotaryevent">Rotary Event</a></li>
+ </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
<div id="container"><div id="contents"><div class="content">
<h1>Tizen Event Handling</h1>
+ <p>The Tizen platform supports some device events for user interaction. <br>
+ To provide a full user experience for your application users, you must handle various events in your application.</p>
+
+ <h2 id="hardwarekey">HardwareKey Event</h2>
+ <p>The Tizen platform supports hardware key events for user interaction on devices.</p>
+ <table id='tau-circular' style="width:95%">
+ <caption>Table: Hardware Key on each device</caption>
+ <tbody>
+ <tr>
+ <td><img alt="Menu and Back keys" src="../../../images/efl_phone.png" /></td>
+ <td><img alt="Back key" src="../../../images/backWearable.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">Menu and Back keys on Mobile device</td>
+ <td align="center">Back key on Wearable device</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table border="1">
+ <caption> Table: hardware key events</caption>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ <th>Attribute</th>
+ </tr>
+ <tr>
+ <td>tizenhwkey</td>
+ <td>Event is triggered when a device detects the user interaction through special point of hardware.</td>
+ <td>
+ <p><span style="font-family: Courier New,Courier,monospace;">event.keyName</span></p>
+ <ul style="padding-left:0">
+ <li><span style="font-family: Courier New,Courier,monospace;">back</span> for wearable.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">back, menu</span> for mobile.</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <p>To bind an event callback on tizenhwkey events, use the following code:</p>
+<pre class="prettyprint">
+window.addEventListener("tizenhwkey", function(ev)
+{
+ if (ev.keyName == "back") {
+ // Call window.history.back() to go to previous browser window
+ // Call tizen.application.getCurrentApplication().exit() to exit application
+ // Add script to add another behavior
+ }
+});
+</pre>
+
+
+ <h2 id="rotaryevent">Rotary Event</h2>
+
+ <p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <p class="figure">Figure: Rotary device</p>
+ <p align="center"><img alt="Rotary device" src="../../../images/rotary_event.png" /> </p>
+ <p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
+
+ <table border="1">
+ <caption> Table: Rotary events</caption>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ <th>Attribute</th>
+ </tr>
+ <tr>
+ <td>rotarydetent</td>
+ <td>Event is triggered when a device detects the detent point.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: the rotation direction.
+ <p>The available values are <span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise and <span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation.</p></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>To bind an event callback on rotary events, use the following code:</p>
+<pre class="prettyprint">
+document.addEventListener("rotarydetent", function(ev)
+{
+ var direction = ev.detail.direction;
+ /* Add behavior for detent detected event with a direction value */
+});
+</pre>
- <p></p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</div>
<div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#jquery_globalize">jQuery and Globalize</a></li>
+ <li><a href="#use">Using the Globalize Utility</a></li>
+ <li><a href="#utility">Using the Globalize Utility Methods</a></li>
+ <li><a href="#rtl">Right-to-left (RTL) Language Support</a></li>
+ </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
</div></div>
</div>
+
<div id="container"><div id="contents"><div class="content">
<h1>Globalization</h1>
- <p></p>
+ <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support the right-to-left (RTL) languages.</p>
+
+ <h2 id="jquery_globalize" name="jquery_globalize">jQuery and Globalize</h2>
+
+ <p>Globalize is a jQuery JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data. The library works both for the browser and as a Node.js module. jQuery and Globalize have dependencies with <a href="https://github.com/rxaviers/cldrjs" target="_blank">cldr.js</a>, which is a CLDR low-level manipulation tool.</p>
+
+ <p>Globalize:</p>
+ <ul>
+ <li>Leverages the Unicode CLDR data and follows its UTS#35 specification.</li>
+ <li>Keeps the code separate from the i18n content. Does not host or embed any locale data in the library. Empowers you to control the loading mechanism of your choice.</li>
+ <li>Allows you to load as much or as little data as you need. Avoids duplicating data if using multiple i18n libraries that leverage CLDR.</li>
+ <li>Keeps the code modular. Allows you to load the i18n functionalities you need.</li>
+ <li>Runs in browsers and Node.js, and consistently across all of them.</li>
+ <li>Makes globalization as easy to use as jQuery.</li>
+ </ul>
+
+ <h3 id="cldr" name="cldr">CLDR Data</h3>
+
+ <p>The Unicode CLDR provides the key building blocks for software to support the world's languages. It includes:</p>
+ <ul>
+ <li>Locale-specific patterns for formatting and parsing dates, times, time zones, numbers, and currency values</li>
+ <li>Translations of names: languages, scripts, countries and regions, currencies, eras, months, weekdays, day periods, time zones, cities, and time units</li>
+ <li>Language and script information: characters used, plural cases, gender of lists, capitalization, rules for sorting and searching, writing direction, transliteration rules, rules for spelling out numbers, and rules for segmenting text into graphemes, words, and sentences</li>
+ <li>Country information: language usage, currency information, calendar preference and week conventions, and postal and telephone codes</li>
+ <li>ISO and BCP 47 code support (such as cross-mappings) and keyboard layouts</li>
+ </ul>
+
+ <p>CLDR uses the XML format provided by UTS #35: Unicode Locale Data Markup Language (LDML). LDML is a format used not only for CLDR, but also for the general interchange of locale data. For more information about CLDR, see <a href="http://cldr.unicode.org/index/downloads/cldr-27" target="_blank">CLDR release notes</a>, and to download the JSON format file , see <a href="https://github.com/unicode-cldr/cldr-json" target="_blank">JSON Data from the Unicode CLDR Project</a>.</p>
+ <p>The TAU Globalize utility uses the CLDR 26 release, and when you create a Tizen Web application project, you find CLDR in the <span style="font-family: Courier New,Courier,monospace"><project>/lib/tau/<profile>js/cldr-data</span> folder.</p>
+
+ <h2 id="use" name="use">Using the Globalize Utility</h2>
+
+ <p>To use the TAU Globalize utility in your application:</p>
+ <ol>
+ <li>Download the following dependency files for your application:
+ <ul>
+ <li><a href="https://github.com/rxaviers/cldrjs" target="_blank">Cldr</a> (v0.4.0)</li>
+ <li><a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> (v1.0.0-alpha.17)</li>
+ <li><a href="http://unicode.org/Public/cldr/26/json-full.zip" target="_blank">Cldr-date</a> (26 version) main and supplemental</li>
+ </ul>
+ </li>
+ <li>Create a folder structure, as shown in the following table.
+ <table>
+ <caption>
+ Table: Globalize folder structure
+ </caption>
+ <tbody>
+ <tr>
+ <th colspan="2">Folder structure</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td rowspan="7"> <p class="figure"></p>
+ <p align="center"><img src="../../../images/globalize_folder_structure.png" alt="Globalize folder structure" /></p></td>
+ <td rowspan="7"> <p class="figure"></p>
+ <p align="center"><img src="../../../images/globalize_folder_structure_main.png" alt="Globalize main folder" /></p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">cldr/</span>: Copy the cldr.js library in this folder.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">cldr-data/</span>: Copy the cldr-data files in this folder.
+ <p><span style="font-family: Courier New,Courier,monospace">cldr-data/main</span>: Copy the languages to be supported in this folder.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Do not copy all languages, just the ones you need.</td>
+ </tr>
+ </tbody>
+ </table></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">globalize/</span>: Copy the Globalize library in this folder.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">locale/</span>: Make the custom locale string in this folder.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">script/</span>: JavaScript files.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">style/</span>: CSS, image, and other style related files.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">view/</span>: HTML files</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li>Set the locale using the following example code:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "ko-KR";
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(ko)
+ {
+ /* "ko" is the Globalize utility instance */
+ console.log(ko.getLocale()) /* "ko" */
+ })
+})
+</pre>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is not synchronous, and it returns the deferred object with the methods <span style="font-family: Courier New,Courier,monospace">then()</span>, <span style="font-family: Courier New,Courier,monospace">done()</span>, and <span style="font-family: Courier New,Courier,monospace">fail()</span>. Use these methods to receive the Globalize utility instance.</p>
+ <p>You can specify locales in 2 ways using IETF language tags, such as en, pt-BR, or zh-Hant-TW:</p>
+ <ul>
+ <li>Specify the locale ID in the <span style="font-family: Courier New,Courier,monospace">lang</span> attribute of the body element, such as <span style="font-family: Courier New,Courier,monospace"><body lang="ko-KR"></span>.</li>
+ <li>Use a string variable as an input argument of the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method (for example <span style="font-family: Courier New,Courier,monospace">ko.setLocale("en")</span>) to overwrite the body element setting. </li>
+ </ul>
+ <p>If no <span style="font-family: Courier New,Courier,monospace">lang</span> attribute or <span style="font-family: Courier New,Courier,monospace">setLocale()</span> input argument is defined, the Globalize utility finds the locale by checking the <span style="font-family: Courier New,Courier,monospace">window.navigator.language</span> property. If the check result is false, the utility uses the default locale "en".</p>
+ <p>The following table illustrates the locale setting method order.</p>
+ <table>
+ <caption>
+ Table: Locale setting methods
+ </caption>
+ <tbody>
+ <tr>
+ <th>Order</th>
+ <th>Locale setting methods</th>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td><span style="font-family: Courier New,Courier,monospace">setLocale(LocaleId)</span></td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td><span style="font-family: Courier New,Courier,monospace"><body lang="ko-KR"></span></td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td><span style="font-family: Courier New,Courier,monospace">window.navigator.language</span></td>
+ </tr>
+ <tr>
+ <td>4</td>
+ <td>Default locale "en"</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li>Make sure that you have all required CLDR files.
+ <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method automatically loads the basic CLDR data files which are match the given locale by local AJAX. During the method call, the Globalize utility also loads the basic CLDR JSON files:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/currencies.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/scriptMetaData.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</li>
+ </ul>
+ <p>In addition to the basic files, each Globalize method requires a special set of CLDR portions. Determine which Globalize module functionalities you need, and make sure you have the required files, as defined in the following table.</p>
+
+ <table>
+ <caption>
+ Table: CLDR requirements
+ </caption>
+ <tbody>
+ <tr>
+ <th>Module</th>
+ <th>Required CLDR JSON files</th>
+ </tr>
+ <tr>
+ <td>Core module</td>
+ <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></td>
+ </tr>
+ <tr>
+ <td>Date module</td>
+ <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span>
+ <p><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/timeZoneNames.json</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></p>
+ <p>CLDR JSON files from the number module</p></td>
+ </tr>
+ <tr>
+ <td>Number module</td>
+ <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span>
+ <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></p>
+ </span></td>
+ </tr>
+ <tr>
+ <td>Plural module</td>
+ <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)
+ <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ </ol>
+
+ <h2 id="utility" name="utility">Using the Globalize Utility Methods</h2>
+ <p>The following code snippets show how to use the TAU Globalize utility methods:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">formatCurrency()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "ko-KR",
+ currency_unit = "KRW"; /* ISO 4217 */
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(ko)
+ {
+ console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
+ })
+})
+</pre>
+ <p>For more information, see the <a href="http://en.wikipedia.org/wiki/ISO_4217" target="_blank">currency unit standard in ISO 4217</a>.</p>
+ </li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">formatDate()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "ko-KR",
+ currency_unit = "KRW"; /* ISO 4217 */
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(ko)
+ {
+ console.log(ko.formatDate(new Date(), {datetime:"medium"});
+ })
+})
+</pre>
+ <p>For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md" target="_blank">date-formatter</a>.</p>
+ </li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">getCalendar()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "ko-KR";
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(ko)
+ {
+ console.log(ko.getCalendar().months.format.wide, undefined, 4));
+ })
+})
+</pre>
+ <p>The calendar format is specified in the <span style="font-family: Courier New,Courier,monospace">gregorian.json</span> file in the CLDR data.</p>
+ </li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">formatMessage()</span>:
+ <p>This method supports custom locale data.</p>
+ <ol>
+ <li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA language subtag registry</a>.
+<pre class="prettyprint">
+index.html
+locale
+ en.json
+ ko.json
+</pre>
+ </li>
+ <li>Create a JSON file for the <span style="font-family: Courier New,Courier,monospace">formatMessage</span> strings (custom locale strings) in locales paths:
+<pre class="prettyprint">
+{
+ "en":
+ {
+ "like":
+ [
+ "{0, plural, offset:1",
+ "=0 {Be the first to like this}",
+ "=1 {You liked this}",
+ "one {You and someone else liked this}",
+ "other {You and # others liked this}",
+ "}"
+ ],
+ "greeting":
+ {
+ "hello":"hello",
+ "bye":"bye"
+ },
+ "longText":
+ [
+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non",
+ "quis exercitationem culpa nesciunt nihil aut nostrum explicabo",
+ "reprehenderit optio amet ab temporibus asperiores quasi cupiditate.",
+ "Voluptatum ducimus voluptates voluptas?"
+ ]
+ }
+}
+</pre>
+ </li>
+
+ <li>Call the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method to load the custom locale files automatically:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "ko-KR";
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(ko)
+ {
+ console.log(ko.formatMessage("greeting/hello"));
+ console.log(ko.formatMessage("greeting/bye"));
+ console.log(ko.formatMessage("longText"));
+ })
+})
+</pre>
+ </li>
+ </ol>
+ </li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">messageFormatter()</span>:
+ <p>This method returns a function that formats a message using the ICU message format pattern. For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md" target="_blank">message-formatter</a>.</p>
+ <ol>
+ <li>Create a locale resource in the locales path:
+<pre class="prettyprint">
+{
+ "en":
+ {
+ "formatter":
+ {
+ "welcome":"Hello Mr. {0}",
+ "thankyou":"Bye Mr. {custom}."
+ }
+ }
+}
+</pre>
+ </li>
+
+ <li>Use the <span style="font-family: Courier New,Courier,monospace">messageFormatter()</span> method:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "en-US";
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(en)
+ {
+ var welcomeFormatter = en.messageFormatter('formatter/welcome'),
+ thankyouFormatter = en.messageFormatter('formatter/thankyou'),
+ welcomeMessageList = ["Tom"],
+ thankyouMessageList = {custom:"Tom"};
+
+ console.log(welcomeFormatter(welcomeMessageList));
+ console.log(thankyouFormatter(thankyouMessageList));
+ })
+})
+</pre>
+ </li>
+ </ol>
+ </li>
+ </ul>
+
+ <h2 id="rtl" name="rtl">Right-to-left (RTL) Language Support</h2>
+
+ <p>TAU offers 2 ways to handle right-to-left (RTL) languages:</p>
+ <ul>
+ <li>Locale-specific CSS</li>
+ <li>RTL property in a locale object</li>
+ </ul>
+ <p>When the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is called, it automatically applies a CSS class to the body element of your DOM if the given locale has an RTL direction.</p>
+ <p>The following examples show how to use the locale-specific CSS:</p>
+
+ <ul>
+ <li>The following example has ar-EG as the given locale, and the language has an RTL direction:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "ar-EG";
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(ar)
+ {
+ ...
+ })
+})
+</pre>
+ </li>
+
+ <li>The following example has a DOM of body with a locale-specific CSS named <span style="font-family: Courier New,Courier,monospace">ui-script-direction-rtl</span>:
+<pre class="prettyprint">
+<body class="ui-script-direction-rtl">
+</pre>
+ </li>
+
+ <li>The following example uses the locale-specific CSS to switch on the RTL feature for a UI component:
+<pre class="prettyprint">
+.ui-script-direction-rtl .ui-listview
+{
+ direction: rtl;
+}
+.ui-script-direction-rtl .ui-li.ui-li-static
+{
+ text-align: right;
+ unicode-bidi: bidi-override;
+}
+</pre>
+ </li>
+ </ul>
+
+ <p>The following example shows how to use the RTL property in a locale object (the <span style="font-family: Courier New,Courier,monospace">rtl</span> variable). If a given locale has an RTL direction, the variable is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+ localeId = "ar-EG";
+
+document.addEventListener('pageshow', function()
+{
+ globalize.setLocale(localeId)
+ .done(function(ar)
+ {
+ console.log(ar.rtl) /* true */
+ })
+})
+</pre>
+
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</div>
<div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#scaling">Scaling the UI</a></li>
+ <li><a href="#importTAU">Import TAU</a></li>
+ <li><a href="#customJS">Running custom JavaScript and CSS</a></li>
+ <li><a href="#fillContent">Creating Page in body</a></li>
+ </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
<div id="container"><div id="contents"><div class="content">
<h1>Hello World</h1>
- <p></p>
+ <p>In this page, we describe most basic way to make web application using TAU.<br>
+ with this guide, you can learn how to import TAU to your application and can make basic helloWorld page.</p>
+
+ <p>The following example shows a Basic TAU template:</p>
+ <pre class="prettyprint">
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
+ <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
+ <script src="myapp.js"></script>
+ <link rel="stylesheet" href="myapp.css" />
+ <title>Hello TAU</title>
+ </head>
+ <body>
+ <!-- HTML BODY CONTENT -->
+ </body>
+</html>
+</pre>
+
+ <p>From here, basic steps for making HelloWorld page.</p>
+
+ <h2 id="scaling">Scaling the UI</h2>
+ <p>The Tizen Advanced UI (TAU) -based template provides 2 scaling methods: device-width and fixed-width.</p>
+ <ul>
+ <li>Device-width scaling <p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone® and Android®. In this mode, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web apps, a 320 px screen width is assumed.</p>
+ <pre class="prettyprint"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"></pre>
+ </li>
+ <li>Fixed-width scaling <p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.</p> <p>You can also use fixed-width scaling if you do not want to scale your application, or if you want to set your own scale. In this case, declare a viewport, but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <span style="font-family: Courier New,Courier,monospace">device-width</span> as follows:</p>
+ <pre class="prettyprint lang-html"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></pre>
+ <p>To enable fixed-width scaling, the header must contain the <span style="font-family: Courier New,Courier,monospace"><meta name="viewport"></span> element:</p>
+ <pre class="prettyprint"><meta name="viewport" content="width=360, initial-scale=1, user-scalable=no"></pre>
+ </li>
+ </ul>
+
+ <h2 id="importTAU">Importing TAU</h2>
+ <p>You can import TAU with the HTML header:</p>
+ <pre class="prettyprint lang-html">
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
+ <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
+ </head>
+</html>
+</pre>
+ <p>In the header, use the following default elements:</p>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace"><script></span> and <span style="font-family: Courier New,Courier,monospace"><link></span> elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
+ <ul>
+ <li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the Web UI service.</p></li>
+ <li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
+ </ul>
+
+ <h2 id="customJS">Running custom JavaScript and CSS</h2>
+ <p>You can add an additional <span style="font-family: Courier New,Courier,monospace"><script src="<CUSTOM_LIBRARY>"></span> or <span style="font-family: Courier New,Courier,monospace"><link rel="stylesheet" src="<CUSTOM_CSS>"></span> element to include your own scripts and style sheets.
+ <br>However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace"><script></span> elements, as you can use any TAU APIs provided by the default libraries.</p>
+ <p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace"><script></span> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
+ <pre class="prettyprint"><script src="{YOUR_SCRIPT_PATH}"></script></pre>
+
+ <h2 id="fillContent">Creating Page in body</h2>
+ <p>The body section of the HTML file contains 1 or more pages. <br>
+ To creating page in <body>, you can use "ui-page" class with <div> element:</p>
+ <pre class="prettyprint lang-html">
+<body>
+ <div class="ui-page" id="main">
+ </div>
+</body>
+</pre>
+
+ <p>Each pages has a header, content(mendatory), and a footer: </p>
+ <pre class="prettyprint lang-html">
+<body>
+ <div class="ui-page" id="main">
+ <div class="ui-header">
+ <h1>Hello World</h1>
+ </div>
+ <div class="ui-content">
+ <p>Hello TAU!</p>
+ </div>
+ <div class="ui-footer">
+ <button>OK</button>
+ </div>
+ </div>
+</body>
+</pre>
+
+ <p>Here is mostly basic sample code for Hello World : </p>
+ <pre class="prettyprint lang-html">
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
+ <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
+ <script src="myapp.js"></script>
+ <link rel="stylesheet" href="myapp.css" />
+ <title>Hello TAU</title>
+ </head>
+ <body>
+ <div class="ui-page" id="main">
+ <div class="ui-header">
+ <h1>Hello World</h1>
+ </div>
+ <div class="ui-content">
+ <p>Hello TAU!</p>
+ </div>
+ <div class="ui-footer">
+ <button>OK</button>
+ </div>
+ </div>
+ </body>
+</html>
+ </pre>
+
+
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</div>
<div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#structure">Page Structure</a></li>
+ <li><a href="#createone">Creating Single Page</a></li>
+ <li><a href="#createtwo">Creating Multiple Pages in one HTML code</a></li>
+ <li><a href="#pageRouting">Page Routing</a></li>
+ </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
<div id="container"><div id="contents"><div class="content">
<h1>Managing Page</h1>
- <p></p>
+ <p>The basic building block of an application UI in the TAU library is the <span style="font-family: Courier New,Courier,monospace">Page</span> element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. </p>
+
+ <h2 id="structure">Page Structure</h2>
+ <p>The page consist of:</p>
+ <ul>
+ <li>Header area
+ <p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
+ <li>Content area
+ <p>Contains the main application content. The content area has an optional scroll bar.</p></li>
+ <li>Footer area
+ <p>Contains a status line or buttons. The footer is optional.</p></li>
+ </ul>
+ <p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
+
+ <p class="figure">Figure: Page content</p>
+ <p align="center"><img src="../../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
+
+ <p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
+<pre class="prettyprint"><span>I have no page</span>
+</pre>
+ <h2 id="createone">Creating Single Page</h2>
+ <p>TAU creates it and moves the content to it:</p>
+<pre class="prettyprint"><div class="ui-page">
+ Simple page
+</div>
+</pre>
+
+
+ <p>To create a page on your own, use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value for wearable applications. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript widget implementation.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>To create a page:</p>
+ <ol>
+ <li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-header"</span> attribute:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-header">This is a header</div>
+</div>
+</pre></li>
+ <li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-footer"</span> attribute:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-footer">This is a footer</div>
+</div>
+</pre></li>
+
+ <li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-content"</span> attribute:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-header">MyApplication header</div>
+ <div class="ui-content">
+ Hello world!
+ </div>
+ <div class="ui-footer">Application status line</div>
+</div>
+</pre></li>
+ <li><p>The previous example shows a full page structure. The header and footer areas can contain multiple UI components, such as buttons or images.</p>
+ <p>The following example shows a title bar with a <strong>More Options</strong> button and an icon:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-header">
+ <h2 class="ui-title ui-icon" style="background-image: url(image.png);">Title</h2>
+ <button type="button" class="ui-more ui-icon-overflow">More Options</button>
+ </div>
+ <div class="ui-content">MyApplication content</div>
+</div>
+</pre>
+ </li>
+ <li>
+ <p>You can also create a popup for your page:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-header">Popup Open Page</div>
+ <div class="ui-content">
+ <a href="#popup" class="ui-btn" data-rel="popup">Popup Open</a>
+ </div>
+
+ <div id="popup" class="ui-popup">
+ <div class="ui-popup-header">Popup Page</div>
+ <div class="ui-popup-content">Popup Content</div>
+ </div>
+</div>
+</pre>
+ <p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information see <a href="#basic_page_routing">Managing Page Routing</a>.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note"><p>Not all profiles contain same UI components, for example, the popup component is only implemented in wearable applications.</p></td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ </ol>
+
+ <h2 id="createtwo">Creating Multiple Pages in one HTML code</h2>
+ <p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in the application <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+ <p>In the multi-page layout, the main page is defined with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class. If no page has the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
+ <p>
+ <pre class="prettyprint">
+<body>
+ <div class="ui-page ui-page-active" id="first">
+ <div class="ui-content">
+ <!--CONTENT-->
+ </div>
+ </div>
+
+ <div class="ui-page" id="two">
+ <div class="ui-content">
+ <!--CONTENT-->
+ </div>
+ </div>
+</body>
+</pre>
+
+ <h2 id="pageRouting" name="basic_page_routing">Page Routing</h2>
+
+ <p>TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-screen applications. The mechanics behind page routing are simple, and works without any additional JavaScript code. If necessary, you can use the API to get more powerful page routing functionalities.</p>
+
+ <p>To manage page routing:</p>
+
+ <h3>Routing with href</h3>
+ <p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
+ <p>TAU uses every <span style="font-family: Courier New,Courier,monospace"><a></span> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has an <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
+<pre class="prettyprint"><!--pageOne.html-->
+<div class="ui-page ui-page-active" id="first">
+ <div class="ui-content">
+ <a href="pageTwo.html">Go to page two</a>
+ </div>
+</div>
+
+<!--pageTwo.html-->
+<div class="ui-page" id="two">
+ <div class="ui-content">
+ <a href="pageOne.html">Go to page one</a>
+ </div>
+</div>
+</pre>
+ <p>With Multiple pages in one HTML code, you can use only id of page in href attribute:</p>
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="first">
+ <div class="ui-content">
+ <a href="#two">Go to page two</a>
+ </div>
+</div>
+
+<div class="ui-page" id="two">
+ <div class="ui-content">
+ <a href="#first">Go to page one</a>
+ </div>
+</div>
+</pre>
+
+ <h3>Routing using the API</h3>
+ <p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
+<pre class="prettyprint"><!--pageTwo.html-->
+<div class="ui-page ui-page-active" id="first">
+ <div class="ui-content">
+ You are viewing the first page of the example.
+ <button id="first-button">Click here to change to page two</button>
+ </div>
+ <script>
+ var el1 = document.getElementById("first-button");
+ el1.addEventListener("click", function ()
+ {
+ tau.changePage("pageTwo.html");
+ });
+ </script>
+</div>
+
+<!--pageTwo.html-->
+<div class="ui-page" id="second">
+ <div class="ui-content">
+ This is the second page of the example.
+ <button id="second-button">Click here to change to page one</button>
+ </div>
+ <script>
+ var el2 = document.getElementById("second-button");
+ el2.addEventListener("click", function ()
+ {
+ tau.changePage("pageOne.html");
+ });
+ </script>
+</div>
+</pre>
+
+
+ <h3>Loading pages from external resources</h3>
+ <p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <span style="font-family: Courier New,Courier,monospace">base</span> element's <span style="font-family: Courier New,Courier,monospace">href</span> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
+ <p>To load pages from external resources, define the proper local address in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute of the link:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-content">
+ <a href="external_text.html">Change to external</a>
+ </div>
+</div>
+</pre>
+ <p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel="external"</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax="false"</span>, or <span style="font-family: Courier New,Courier,monospace">target="_self"</span> attribute:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-content">
+ <a href="external_text.html" target="_self">Change to external</a>
+ </div>
+</div>
+</pre>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
div.table {
/* overflow: auto; */
-}
\ No newline at end of file
+}
+
+#tau tr {
+ height: 45px;
+}
+#tau td {
+ vertical-align: middle;
+}
<h1>Globalization
</h1>
-<p>Please fill the description for globalization
-
<h2>Table of Contents</h2>
-
<ol class="toc">
- <li><a href="#">contents list</a></li>
+
+ <li><a href="#methods-list">Methods</a>
+
+ <ol class="toc">
+
+ <li><a href="#method-getCalendar">getCalendar</a>
+ </li>
+
+ <li><a href="#method-getLocale">getLocale</a>
+ </li>
+
+ <li><a href="#method-importModule">importModule</a>
+ </li>
+
+ <li><a href="#method-setLocale">setLocale</a>
+ </li>
+
+ </ol>
+
+ </li>
+
</ol>
+
+
+
+
+
+
+<h2><a id="methods-list"></a>Methods</h2>
+
+<h3>Summary</h3>
+<table class="informaltable">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint">Object <a href="#method-getCalendar">getCalendar</a> ( ) </pre>
+ </td>
+ <td><p>Get gregorian calendar.</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint">string <a href="#method-getLocale">getLocale</a> ( ) </pre>
+ </td>
+ <td><p>Get Locale.</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-importModule">importModule</a> ( string fileName ) </pre>
+ </td>
+ <td><p>Put the module into module array of core.util.globalize</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint">Deferred <a href="#method-setLocale">setLocale</a> ( string localeId ) </pre>
+ </td>
+ <td><p>Set Locale. This API is Async API.<br />Please use deferred callback functions which are returned( .done(), .then() .etc)</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+<dl>
+
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-getCalendar">getCalendar</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Get gregorian calendar.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">Object getCalendar ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+ <table>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Object</td>
+ <td>gregorian calendar data given locale.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ </div>
+
+ </dd>
+
+
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-getLocale">getLocale</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Get Locale.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">string getLocale ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+ <table>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>string</td>
+ <td>Current locale</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ </div>
+
+ </dd>
+
+
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-importModule">importModule</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Put the module into module array of core.util.globalize</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">importModule ( string fileName) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">fileName</span></td>
+ <td>string</td>
+ <td>required</td>
+ <td></td>
+ <td></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ </dd>
+
+
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-setLocale">setLocale</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Set Locale. This API is Async API.<br />Please use deferred callback functions which are returned( .done(), .then() .etc)</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">Deferred setLocale ( string localeId) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">localeId</span></td>
+ <td>string</td>
+ <td>required</td>
+ <td></td>
+ <td></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+ <table>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Deferred</td>
+ <td></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ </div>
+
+ </dd>
+
+
+</dl>
+<div id="footer">
+ <hr size="1" />
+ <font size="1">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>.</font>
+</div>
+
+<script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-25976949-1']);
+ _gaq.push(['_trackPageview']);
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script>
+
</body>
</html>
\ No newline at end of file
<p>The Web UI Framework (called as <b>TAU</b>; Tizen Advanced UI framework) provides rich Tizen components that are optimized for the Tizen Web browser.</p>
-<p>The following table displays the components provided by the Tizen mobile Web UI Framework service.</p>
+
+<h2>UI components list</h2>
+<p>The following table displays the components provided by the Tizen mobile Web UI Framework.</p>
<table border="1">
- <caption>Table: Tizen mobile Web UI Framework components</caption>
<tbody>
<tr>
<th>UI component</th>
</tbody>
</table>
-
+<h2>Deprecated UI components</h2>
+<p>The following table displays the components are deprecated by TAU.</p>
<table border="1">
- <caption>Table: Deprecated Tizen mobile Web UI Framework components</caption>
+
<tbody>
<tr>
<th>UI component</th>
<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>Tizen Web UI Framework Reference</title>
+ <title>Tizen Advanced UI framework Reference</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/TAU/tau.htm">Tizen Advanced UI framework (TAU): Guides</a></li>
+ </ul>
+ </div></div>
+ </div>
+
+ <div id="container"><div id="contents"><div class="content">
+ <h1>Tizen Advanced UI framework Reference</h1>
+
+ <p><b>The Web UI framework is called Tizen Advanced UI (TAU) framework.</b> It provides tools, such as UI components, events, effects, and animations, for Web application development. You can leverage these tools by just selecting the required screen elements and creating the applications.</p>
+
+ <h2 id="table_contents">Table of Contents</h2>
+ <table id="tau" border="1">
+ <tbody>
+ <tr>
+ <th>Title</th>
+ <th>Description</th>
+ </tr>
+
+ <tr>
+ <td><a href="Base/base.htm">Base</a></td>
+ <td>References of base APIs to organize and managing application.</td>
+ </tr>
+ <tr>
+ <td><a href="Mobile_UIComponents/widget_reference.htm">Mobile UI Components</a></td>
+ <td>References of UI Components for Mobile profile.</td>
+ </tr>
+ <tr>
+ <td><a href="Wearable_UIComponents/widget_reference.htm">Wearable UI Components</a></td>
+ <td>References of UI Components for Wearable profile.</td>
+ </tr>
+ <tr>
+ <td><a href="Gesture_Events/gesture.htm">Gesture Events</a></td>
+ <td>References of TAU-specific gesture event.</td>
+ </tr>
+ <tr>
+ <td><a href="Globalization/globalization.html">Globalization</a></td>
+ <td>References of Globalization utility library.</td>
+ </tr>
+
+ </tbody>
+ </table>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note <i>(important!)</i></th>
+ </tr>
+ <tr>
+ <td class="note"><strong>TAU (Tizen Advanced UI)</strong> is the new name of tizen-web-ui-fw.
+ </td>
+ </tr>
+ <tr>
+ <td class="note"><p><strong>Since 2.3,</strong> tizen-web-ui-fw has been <i><strong>deprecated</strong></i> (include tizen-web-ui-fw.js, tizen-web-ui-fw-libs.js, tizen-web-ui-fw.css). <br>So, in all documents and source code, TAU is used instead of tizen-web-ui-fw.</p>
+ <p><strong>Since 2.4</strong>, tizen-web-ui-fw <span style="color:red">will be fully deleted</span> and we will <strong>not support</strong> old version anymore.</p>
+ </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>
- <h1>Tizen Web UI Framework Reference</h1>
-
-<p>Click the profile you want:</p>
-<p><a href="mobile/index.htm"><img alt="Mobile Web" src="../images/mw_division.png"/></a> <a href="wearable/index.htm"><img alt="Wearable Web" src="../images/ww_division.png"/></a></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
projects / sdk / online-doc.git / commitdiff
