--- /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>Developing Applications Using Databinding</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"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen Studio 1.2 and Higher</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#datasource">Adding Data Sources</a></li>
+ <li><a href="#datamodel">Adding Data Models</a></li>
+ <li><a href="#databinding">Creating Data Bindings</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Developing Applications Using Databinding</h1>
+
+<p>Databinding helps you to manage application-specific data sources and models along with data bindings. You can manage databinding in the <strong>UI Builder</strong> perspective using the <strong>Data Binding</strong> view, which allows you to bind JSON and XML data sources to your application UI.</p>
+
+<p>In the <strong>Data Binding</strong> view, you can, for example, add data sources, create data models from those sources, and bind data elements to UI components in the <strong>Design</strong> tab. The view displays all the data sources that you have added to your application. Along with the data sources, you can also see the "data element – UI component" bindings that you have created.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ Databinding is supported for 2.4 and higher mobile applications, and 3.0 and higher wearable applications.
+ <p>When creating the application, you must use the <a href="project_wizard_n.htm">Project Wizard</a> and select a native UI Builder template (any template with the "UI Builder" prefix).</p>
+</div>
+
+<p>The <strong>Data Binding</strong> view opens by default when you switch to the <strong>UI Builder</strong> perspective. The UI Builder templates in the Project Wizard do not have any data sources by default.</p>
+
+<h2 id="datasource">Adding Data Sources</h2>
+
+<p>To add a new data source:</p>
+
+<ol>
+<li>Right-click in the <strong>Data Source</strong> panel of the <strong>Data Binding</strong> view and select <strong>Add</strong>.
+<p>Alternatively, you can click the <strong>ADD</strong> icon in the toolbar.</p>
+<p align="center"><img alt="Adding a data source" src="../images/databind_add_source.png" /></p>
+<p>The new data source appears in the <strong>Data Source</strong> panel.</p>
+<p align="center"><img alt="New data source" src="../images/databind_new_source.png" /></p>
+</li>
+<li>Right-click the new data source and select <strong>Edit</strong>.
+<p>Alternatively, you can click the <strong>EDIT</strong> icon in the toolbar.</p>
+<p align="center"><img alt="Editing the data source" src="../images/databind_edit_source.png" /></p>
+</li>
+<li>You can create static (default) and remote data sources:
+<ul><li>To create a static data source:
+<ol type="a">
+<li>Set the type as <strong>JSON</strong> or <strong>XML</strong>.</li>
+<li>Add static JSON or XML data in the text area.
+<p>The data source schema populates the side panel.</p></li>
+<li>Click <strong>OK</strong>.</li>
+</ol>
+<p align="center"><img alt="Static data source" src="../images/databind_static_source.png" /></p>
+</li>
+<li>To create a remote data source:
+
+<ol type="a">
+<li>Change the data type from <strong>Static</strong> to <strong>Remote Call</strong>.</li>
+<li>Add the URL of the remote data source.
+<p>You can also add query parameters, if required.</p>
+<p>If the data is retrieved successfully, the data source schema populates the side panel.</p></li>
+<li>Click <strong>OK</strong>.
+<p align="center"><img alt="Remote data source" src="../images/databind_remote_source.png" /></p></li>
+<li>If the application requires privileges, a popup window appears asking you to add them.
+<p>Click <strong>OK</strong>.</p>
+<p align="center"><img alt="Remote data privileges" src="../images/databind_remote_privileges.png" /></p></li>
+</ol>
+</li>
+</ul></li>
+</ol>
+
+<h2 id="datamodel">Adding Data Models</h2>
+
+<p>Data models are created from the added data sources. A newly created data model is the exact replica of the data source from which the model is created. You can modify the data model according to your application’s needs. For example, to de-clutter, you can remove unnecessary data elements from the data model and keep just the relevant portion of the data source in your data model.</p>
+
+<p>To add a data model:</p>
+<ol>
+<li>Drag and drop a data source from the <strong>Data Source</strong> panel to the <strong>Data Model</strong> panel.
+<p>Alternatively, you can select a data source from the drop-down list in the <strong>Data Model</strong> panel.</p>
+<p align="center"><img alt="Adding a data model" src="../images/databind_add_model.png" /></p></li>
+<li>To remove any unnecessary data elements, right-click the element and select <strong>Remove</strong>.</li>
+</ol>
+
+<h2 id="databinding">Creating Data Bindings</h2>
+
+<p>To bind a data element with a UI component present in the <strong>Design</strong> tab:</p>
+
+<ol>
+<li>Expand the data model and select the data element which you want to bind to a UI component.
+<p align="center"><img alt="Expanding the data model" src="../images/databind_binding_expand.png" /></p></li>
+<li>Drag the data element and drop it on the UI component in the <strong>Design</strong> tab.
+<p align="center"><img alt="Dragging the data" src="../images/databind_binding_drag.png" /></p></li>
+<li>When you drop the data element on the UI component, the available binding types (<strong>text</strong> and <strong>foreach</strong>) are displayed in a popup window. Select the binding type you want.
+<p>The binding information is displayed in the <strong>Binding Information</strong> panel of the <strong>Data Binding</strong> view.</p>
+<p align="center"><img alt="Binding information" src="../images/databind_binding_info.png" /></p></li>
+</ol>
+
+<h3 id="datafilter">Adding Filters For Data Bindings</h3>
+
+<p>In certain scenarios based on the structure of the data received from the data source, you can apply filters to the data element while binding.</p>
+
+<p>For example, if you have a data source which has information about restaurants in different places within a city (such as “Suwon”) and you only want to list the restaurants present around a particular place (such as “Hwaseong Fortress”), you can use filtering to achieve this:</p>
+
+<ol>
+<li>Drag the <strong>restaurants</strong> data element to the list UI component in the <strong>Design</strong> tab.
+<p>Because direct mapping is not possible in this case, a filtering window appears.</p></li>
+<li>Add “Hwaseong Fortress” as a filter value for the <strong>places</strong> data element.</li>
+<li>Click <strong>OK</strong>.</li>
+</ol>
+
+<p>When you run the application, the list component shows all the restaurants around Hwaseong Fortress in Suwon.</p>
+<p align="center"><strong>Figure: Filtering a data binding</strong></p>
+<p align="center"><img alt="Filtering a data binding" src="../images/databind_binding_filter.png" /></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>
\ No newline at end of file
projects / sdk / online-doc.git / commitdiff
