--- /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>Combining Screens from Multiple Applications</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.1 and Higher</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#porting">Porting a Screen</a></li>
+ <li><a href="#adding">Adding a User View for the Ported View</a></li>
+ <li><a href="#designing">Designing the Ported View</a></li>
+ <li><a href="#transition">Adding View Transitions</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="ui_builder_conversion_n.htm">Migrating Projects for UI Builder</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Combining Screens from Multiple Applications</h1>
+
+<p>Due to the project migration features of the UI Builder, you can reuse the screens of your existing applications and the Tizen Studio samples by porting their screens to your new application. You can create screens by using EFL code or the UI Builder, or by porting screens from other applications. The basic principles of migrating an EFL application to the UI Builder and creating screens using the UI Builder are introduced in <a href="ui_builder_conversion_n.htm">Migrating Projects for UI Builder</a>.</p>
+
+<p>This topic shows how to add screens from other applications to existing applications. The example is based on the SettingsUIwithUIB project created in <a href="ui_builder_conversion_n.htm#convert">Converting to a UI Builder Project</a>. A screen from the <a href="https://developer.tizen.org/development/sample/native/Graphics/GLView11Cube" target="_blank">GLView11Cube sample application</a> is ported to the SettingsUIwithUIB application.</p>
+
+<p align="center"><strong>Figure: Combining screens from multiple applications</strong></p>
+<p align="center"><img src="../images/prjm_combi_intro.png" alt="Combining screens from multiple apps into one app"/></p>
+
+<h2 id="porting">Porting a Screen</h2>
+
+<p>To port a GLView11Cube project screen to the SettingsUIwithUIB project:</p>
+<ol>
+<li>
+<p>Create the GLView11Cube sample application project:</p>
+<ol>
+ <li>In the Tizen Studio, go to <strong>File > New > Tizen Project</strong>.</li>
+ <li>Select the <strong>Sample</strong> project type, <strong>Mobile v2.4</strong> profile and version, and the <strong>Native Application</strong> application type.</li>
+ <li>In the list of samples, select <strong>Graphics > GLView11Cube</strong>.
+ <p align="center"><img src="../images/prjm_combi_wizard_glview11cube.png" alt="Wizard Pages of the GLView11Cube" /></p>
+ </li>
+ <li>Click <strong>Next</strong>, give the project a name and ID, and click <strong>Finish</strong>.</li>
+</ol>
+</li>
+<li>
+<p>Port the GLView11Cube screen to the SettingsUIwithUIB project:</p>
+<ol>
+ <li>Copy the related files in the <code>inc</code>, <code>src</code>, and <code>res</code> subfolders.
+ <p align="center"><img src="../images/prjm_combi_copyfiles.png" alt="Copying files from the GLView11Cube project" /></p>
+ </li>
+ <li>Set hardware acceleration on in the SettingsUIwithUIB project's manifest file as it is in the GLView11Cube project.
+ <p align="center"><img src="../images/prjm_combi_apply_manifest_hw_accel.png" alt="Apply the hardware acceleration attribute" /></p>
+ </li>
+</ol>
+</li>
+</ol>
+
+<h2 id="adding">Adding a User View for the Ported View</h2>
+
+<p>To add a user view for the ported GLView11Cube application screen through the <strong>User View Manager</strong>:</p>
+
+<ol>
+<li>Right-click the <strong>SettingsUIwithUIB</strong> project in the <strong>Project Explorer</strong> view and select <strong>User View Manager</strong>.</li>
+<li>Add a <strong>glview11cube</strong> view.
+<p align="center"><img src="../images/prjm_combi_user_view_mng.png" alt="User View Manager" /></p>
+ <ol type="a">
+ <li>Enter <strong>glview11cube</strong> in the field as a name for the new user view.</li>
+ <li>Click <strong>Add</strong>.</li>
+ <li>Click <strong>Finish</strong>.</li>
+ </ol>
+</li>
+</ol>
+
+<div class="note">
+ <strong>Note</strong>
+ <p>The pencil (<img src="../images/prjm_combi_pencil.png" alt="Existing user view" />) icon in the list refers to an existing user view. If you remove an existing user view, the logic based on that view is also removed. This cannot be undone.</p>
+</div>
+
+<h2 id="designing">Designing the Ported View</h2>
+
+<p>The following figure shows the new view structure when the core UI components of the GLView11Cube screen are changed to those of the UI Builder.</p>
+<p align="center"><strong>Figure: GLView11Cube view structure</strong></p>
+<p align="center"><img src="../images/prjm_combi_structure_glview11cube.png" alt="Structure of the GLView11Cube" /></p>
+<p>The GLView11Cube application (single screen) does not have the naviframe in the core UI component layer. Thus, the UI components that make up the screen are connected to the first elementary window object. Similarly, the UI Builder view system also creates the <code>root_container</code> through the window; however, it defines the structure to manage the view in the naviframe of the window object.</p>
+
+<p>To design the ported view, you must modify the ported source file (<code>SettingsUIwithUIB/src/glview11cube.c</code>) and the new user view file (<code>SettingsUIwithUIB/src/user_view/uib_glview11cube_view.c</code>).</p>
+<p>To modify the ported file (<code>SettingsUIwithUIB/src/glview11cube.c</code>):</p>
+
+<ol>
+ <li>In the <strong>Project Explorer</strong> view, open the <code>glview11cube.c</code> file.</li>
+ <li>To use the <code>app_create()</code> function as the constructor of the <code>root_container</code>, make the following change to the function prototype.
+ <p align="center"><img src="../images/prjm_combi_edit_glview11cube_app_create.png" alt="Editing GLView11Cube's app_create function" /></p>
+ </li>
+ <li>To use the UI Builder window object, remove the creation part of the core UI component in the <code>glview11cube_create()</code> function.
+ <p align="center"><img src="../images/prjm_combi_remove_core_comps.png" alt="Removing Core UI Components" /></p>
+ </li>
+ <li>Add a conditional statement that prevents the <code>root_container</code> from being duplicated, which happens when you transition between the views in the UI Builder view system.</li>
+ <li>Change the return value from the <code>bool</code> type <code>true</code> to the <code>Evas_Object*</code> type <code>table</code>.</li>
+ <li>Remove the <code>main()</code> function from the <code>glview11cube.c</code> file, as it is not needed anymore.
+ <p align="center"><img src="../images/prjm_combi_remove_main_func.png" alt="Removing main function" /></p>
+ </li>
+</ol>
+<p>The following figure shows the modified definition of the <code>glview11cube_create()</code> function.</p>
+<p align="center"><strong>Figure: Modified glview11cube_create() function</strong></p>
+<p align="center"><img src="../images/prjm_combi_definition_glview11cube_create_func.png" alt="Definition the of glview11cube_create function" /></p>
+
+<p>To modify the new user view file (<code>SettingsUIwithUIB/src/user_view/uib_glview11cube_view.c</code>):</p>
+<ol>
+ <li>Include the <code>glview11cube.h</code> file for referencing the UI component structure (<code>appdata_s</code>).</li>
+ <li>Define the <code>appdata_s</code> structure as <code>ad</code> to be used in the <code>glview11cube_create()</code> function.</li>
+ <li>Add a declaration for calling an external function.</li>
+ <li>Assign the UI Builder's window object to the <code>ad</code> structure.</li>
+ <li>Pass the UI Builder's window object as a parameter to the <code>glview11cube_create()</code> function and assign the created <code>glview</code> object to the view context's <code>root_container</code>. At runtime, the GLView11Cube screen is displayed through the <code>root_container</code>.</li>
+</ol>
+
+<p align="center"><strong>Figure: Designing the GLView11Cube view</strong></p>
+<p align="center"><img src="../images/prjm_combi_designing_glview11cube.png" alt="Designing the GLView11Cube view" /></p>
+
+
+
+<h2 id="transition">Adding View Transitions</h2>
+
+<p>To implement view transitions to and from the ported view:</p>
+<ul>
+<li>
+<p>To switch from the GLView11Cube view to the SettingsUI view (start-up view):</p>
+<p align="center"><strong>Figure: Transitioning from the ported view</strong></p>
+<p align="center"><img src="../images/prjm_combi_view_transition_glview11cube_to_settingsui.png" alt="Switching from glview11cube view to settingsui view" /></p>
+
+<ol>
+ <li>Include the <code>uib_util.h</code> header file at the top of the <code>glview11cube.c</code> file.
+ <p align="center"><img src="../images/prjm_combi_inc_uib_util_h.png" alt="Include uib_util.h file" /></p>
+ </li>
+ <li>Modify the <code>_close_cb()</code> function by replacing the <code>ui_app_exit()</code> function with the <code>uib_util_push_view()</code> function.
+ <p>The <code>uib_util_push_view()</code> function is a view transition function provided by the UI Builder view system.</p>
+ <p align="center"><img src="../images/prjm_combi_modify_close_cb.png" alt="Modifing close_cb function" /></p>
+
+ </li>
+</ol>
+</li>
+<li>
+<p>To switch from view2 to the GLView11Cube view:</p>
+<p align="center"><strong>Figure: Transitioning to the ported view</strong></p>
+<p align="center"><img src="../images/prjm_combi_view_transition_view2_to_glview11cube.png" alt="Switching from view2 view to glview11cube view" /></p>
+
+<ol>
+ <li>In the UI Builder <strong>Outline</strong> view, select the <strong>button2</strong> item.
+ <p align="center"><img src="../images/prjm_combi_click_button2_outline.png" alt="Outline view" /></p>
+ </li>
+
+ <li>In the <strong>Properties</strong> view, click <img alt="Plus button" src="../images/prjm_combi_event_plus.png"/> and <img alt="Arrow button" src="../images/prjm_combi_event_arrow_btn.png"/> to add a new <code>clicked</code> event.
+ <p align="center"><img src="../images/prjm_combi_add_clicked_event.png" alt="Add clicked event" /></p>
+ <p>The <code>uib_view2_event_handler.c</code> file is opened.</p>
+ </li>
+ <li>In the <code>view2_button2_onclicked()</code> function, call the <code>uib_util_push_view()</code> function to switch to the GLView11Cube view.
+ <p align="center"><img src="../images/prjm_combi_add_code_event_handler.png" alt="Add event handler code" /></p>
+ </li>
+</ol>
+</li>
+</ul>
+
+<p align="center"><strong>Figure: SettingsUIwithUIB event flow</strong></p>
+<p align="center"><img src="../images/prjm_combi_behavior.png" alt="Behavior flow of SettingsUIwithUIB application" /></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
