--- /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>Designing UIs with the Component Designer</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="#ui">UI Layout</a></li>
+ <li><a href="#group">Group Navigation</a></li>
+ <li><a href="#part">Part/program Navigation</a></li>
+ <li><a href="#workspace">Workspace</a></li>
+ <li><a href="#properties">Properties</a></li>
+ <li><a href="#managers">Managers</a></li>
+ <li><a href="#shortcuts">Shortcuts</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Designing UIs with the Component Designer</h1>
+
+<p>The Component Designer is a rich graphical tool that provides a UI for the EDC markup. It is aimed to simplify the creation and editing of UI component styles, avoiding the need to learn the EDC syntax.</p>
+<p>The Component Designer was designed with the idea that target users are not just programmers, but also designers. Besides styles, the Component Designer is also able to create and edit custom layouts.</p>
+
+<p class="figure">Figure: Component Designer</p>
+<p align="center"><img alt="Component Designer" src="../images/comp_des_com_des.png" /></p>
+
+<h2 id="ui">UI Layout</h2>
+
+<p>The Component Designer contains a few different blocks, which interact with each other to show, for example, groups, parts, and EDJ collections.</p>
+<p>In the following figure:</p>
+
+<ul>
+ <li>Block in the middle (yellow rectangle) is a workspace. It is used to show group parts.</li>
+ <li>Blocks on the left (green and blue) are navigation blocks.
+ <p>The top one contains a list of groups, while the bottom one usually shows parts, programs, data, and other things related to the group (group usually consist of parts, programs working with and sometimes manipulating a part, and some simple data).</p>
+ <p>All navigation controls are represented by tree-view lists. While the group navigation at the top mostly represents all groups inside a project and allows manipulating them (such as deleting, copying, and creating), the part/program navigation at the bottom has some behavior. The part/program list depends on the currently loaded group (selected from the group list), the type of the group, and the workspace mode.</p>
+</li>
+ <li>Block on the right is <strong>Property</strong>. It shows the properties of the item currently selected in the navigation bottom block, and it can be a part, program, or data.</li>
+ <li>Violet bar at the top contains tabs. Each tab has its own workspace.</li>
+ <li>Red bar at the bottom of the window is a status bar.
+ <p class="figure">Figure: Component Designer window blocks</p>
+<p align="center"><img alt="Component Designer window blocks" src="../images/comp_des_window_blocks.png" /></p>
+</li>
+</ul>
+
+<h2 id="group">Group Navigation</h2>
+
+<p>The list of groups is located on the left side of the Component Designer, and holds all groups from the loaded project, with items sorted alphabetically.</p>
+
+<p class="figure">Figure: Group navigation</p>
+<p align="center"><img alt="Group navigation" src="../images/comp_des_group_navigation.png" /></p>
+<p>On the top of the navigation bar, 2 icons allow you to add a new group into the project or delete an existing group. If you add a new group, a simple dialog wizard opens, and sets a name for new group and selects a source group, if one is required to create a copy or alias.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Copy and alias are different entities. A copied group is an independent group with all parameters copied from the source group. An alias, on the other side, is just a link. The alias group has a specific icon (<img alt="Link" src="../images/comp_des_icon_link.png" />) and the opened alias group does not allow you to work with the part/program navigation or with parts on the workspace.</td>
+ </tr>
+ </tbody>
+ </table>
+<p>The group list structure is based on splitting the group name by tokens that are separated from each other by the \ character. This creates a clear tree view. For example, the default Elementary theme contains a lot of groups with styles for elementary components. By splitting the root tokens from component styles (for example, <strong>elm</strong>/check/base/default), all groups related to Elementary can be organized below the <strong>elm</strong> entity. On the next level, the splitting happens based on the component names (for example, elm/<strong>check</strong>/base/default). And finally, the lowest level leafs of this tree are the styles names (for example, elm/check/base/<strong>default</strong>).</p>
+<p>For comfortable visual navigation, the tree leafs have a "document" icon, and the nodes are represented by a "folder" icon.</p>
+<h2 id="part">Part/program Navigation</h2>
+
+<p>The Component Designer provides a navigation bar for primitives that are stored inside groups. The primitives are parts, programs, and data. They are placed on the right side of main work area as 2 root nodes.</p>
+<p class="figure">Figure: Part/program navigation</p>
+<p align="center"><img alt="Part/program navigation" src="../images/comp_des_part.png" /></p>
+
+<p>The controls placed at the top of the navigation bar make it possible to add new primitives or change the order of the parts inside the group. Click the <strong>+</strong> icon to see the names of the available primitive types. Depending on the selected context, some of the entities can be disabled.</p>
+<p class="figure">Figure: Available primitive types</p>
+<p align="center"><img alt="Available primitive types" src="../images/comp_des_part_2.png" /></p>
+<p>For example, to add a new state for an existing part:</p>
+ <ol>
+ <li>Select the part name in the list and add a new state by clicking the <strong>+</strong> icon.</li>
+ <li>A special wizard guides you through the adding of new primitives with necessary attributes, according to the type of the selected primitive.</li>
+ <li>Select the primitive item in the list to update its attributes properties.
+By double-clicking the state name you can switch the part state. The state is updated in the workspace view.</li>
+ </ol>
+<p>To manage primitives:</p>
+<ul>
+ <li>Parts<p>There is an eye icon (<img alt="Eye" src="../images/comp_des_icon_eye.png" />) on the left side of the part name. If the group has too many parts, and it is too complicated to work with them on the workspace, you can hide some parts by clicking the eye icon. To show the part again, click the empty check that replaces the eye icon.</p><p>To identify the part type in the tree, an icon representing the part type is shown on the right side of the part name. The following table shows the currently available part types.</p>
+
+ <table>
+<caption>Table: Part types</caption>
+<tbody>
+<tr>
+ <th>Icon</th>
+ <th>Type</th>
+ <th>Icon</th>
+ <th>Type</th>
+</tr>
+ <tr>
+ <td><p align="center"><img alt="Rectangle" src="../images/comp_des_icon_rectangle.png" /></p></td>
+ <td>Rectangle</td>
+ <td><p align="center"><img alt="Text" src="../images/comp_des_icon_text.png" /></p></td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td><p align="center"><img alt="Image" src="../images/comp_des_icon_image.png" /></p></td>
+ <td>Image</td>
+ <td><p align="center"><img alt="Swallow" src="../images/comp_des_icon_swallow.png" /></p></td>
+ <td>Swallow</td>
+ </tr>
+ <tr>
+ <td><p align="center"><img alt="Textblock" src="../images/comp_des_icon_textblock.png" /></p></td>
+ <td>Textblock</td>
+ <td><p align="center"><img alt="Group" src="../images/comp_des_icon_group.png" /></p></td>
+ <td>Group</td>
+ </tr>
+ <tr>
+ <td><p align="center"><img alt="Box" src="../images/comp_des_icon_box.png" /></p></td>
+ <td>Box</td>
+ <td><p align="center"><img alt="Table" src="../images/comp_des_icon_table.png" /></p></td>
+ <td>Table</td>
+ </tr>
+ <tr>
+ <td><p align="center"><img alt="Proxy" src="../images/comp_des_icon_proxy.png" /></p></td>
+ <td>Proxy</td>
+ <td><p align="center"><img alt="Spacer" src="../images/comp_des_icon_spacer.png" /></p></td>
+ <td>Spacer</td>
+ </tr>
+ </tbody></table>
+
+Some parts can contain items in addition to states, for example, a box or table. Such items are shown as a different list, which is expandable and shows the number of items already inside the part. When such item (box or table) is selected, you can add new items to it. You cannot add any items to any other part type.
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">To explore the tree, double-click a node or press the right arrow icon.</td>
+ </tr>
+ </tbody>
+ </table></li>
+<li>Programs<p>
+The parts/programs list only allows you to add or remove programs. By clicking a program name, the properties are updated to the program parameters available to be modified.</p></li>
+<li>Data items<p>
+Data items contain raw data information (data name and raw value) that is encased inside the current group. Sometimes, the data item information is really important (for example, genlist items contain data items important for setting the text and content). You can add and delete data items by using the controls on top of the navigation bar.</p></li>
+</ul>
+<h2 id="workspace">Workspace</h2>
+
+<p>The workspace is placed in the middle of the Component Designer window. It shows a visual representation of the group being edited.</p>
+<p class="figure">Figure: Workspace</p>
+<p align="center"><img alt="Workspace" src="../images/comp_des_workspace.png" /></p>
+<p>You can open multiple groups at the same time, and switch between them using the tab bar placed above the workspace.</p>
+<p>Each workspace has a history (for undo and redo actions).</p>
+<p>The workspace component can demonstrate 2 possible behaviors: normal and demo.</p>
+<h3>Group View</h3>
+<p>The workspace group view is a scrollable view where the background is preset by using certain tools. It contains a visual representation of the group, showing its parts and applied properties:</p>
+<ul>
+<li>Parts stay within a specific container that can be resized.</li>
+<li>Parts can be manipulated by a mouse pointer.</li>
+<li>Parts can be selected and highlighted, and by using the highlight, resized.</li>
+</ul>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Clicking a part selects it and loads the part properties. Clicking an already selected part switches between the part state and the part (and switches their properties as well).</td>
+ </tr>
+ </tbody>
+ </table>
+<p>If you right-click the group view background, a context menu opens. You can select actions, such as undo, redo, and show/hide rulers and certain scales (or both). The group view also contains rulers to show the relative and absolute sizes.</p>
+<h3>Tools</h3>
+<p>Workspace has various tools to allow you to manipulate it:</p>
+<ul>
+<li>The size of the previewed group can be changed through the container border. The container has a small rectangle in the right bottom corner: use it to change the size with the mouse.
+<p>Another way is to use the spinners placed at the beginning of the toolbar to set the container size. The chain between the spinners determines whether the width and height changes are made simultaneously. The toggle on the left blocks all size changes.</p>
+<p>In the following figure, the setting at the bottom blocks all size changes, and the width and height changes are not linked. At the top, the size changes are not blocked, and the width and height changes are linked.</p>
+<p class="figure">Figure: Container size</p>
+<p align="center"><img alt="Container size" src="../images/comp_des_container_size.png" /></p>
+<p align="center"><img alt="Container size" src="../images/comp_des_container_size_2.png" /></p>
+</li>
+<li>If the group is too small or too big, you can zoom in and out with a slider. To set an accurate zoom value, use the zoom spinner.
+<p class="figure">Figure: Zooming</p>
+<p align="center"><img alt="Zooming" src="../images/comp_des_zooming.png" /></p>
+</li>
+<li>To fit the group view with the currently opened group, use the <img alt="Size" src="../images/comp_des_icon_size.png" /> icon. It makes the group smaller or larger, as needed, to fit the size of the group view.
+<p>When the fit is selected, it blocks all size changes until the fit is unselected.</p></li>
+<li>You can undo and redo all changes that happen during group editing. The change history is cleared when you close the tab of the edited group in the workspace.
+<p class="figure">Figure: Undo and redo</p>
+<p align="center"><img alt="Undo and redo" src="../images/comp_des_undo_redo.png" /></p>
+</li>
+<li>A combo box allows fast access to the resource libraries. All available libraries are shown in the drop-down list.
+<p class="figure">Figure: Resource library access</p>
+<p align="center"><img alt="Resource library access" src="../images/comp_des_resource_library.png" /></p>
+</li>
+</ul>
+<h3>Highlight</h3>
+
+<p>When working with parts on a workspace and setting certain min, max, or other attributes, you can simply change the sizes and aligns in the group view directly. There are a few highlights available in the group view to help you.</p>
+<p>If you click a part, a highlight with the same size as the clicked part appears, with handlers in each corner. By dragging the handlers, you can change the size of the selected part.</p>
+<p class="figure">Figure: Click highlight</p>
+<p align="center"><img alt="Click highlight" src="../images/comp_des_highlight.png" /></p>
+<p>Remember that the part changes its size and position related to the parts aligns. In addition, the part size cannot reduce lower than its min values, or grow above the object area size.</p>
+<p>The object area is the area between relative points set in the part properties. There are 2 relative points (starting and ending one) and the part is positioned between those points. The relative points are usually the main opened group or any other part. A highlight that shows the object area looks like a shaded rectangle.</p>
+<p class="figure">Figure: Object area highlight</p>
+<p align="center"><img alt="Object area highlight" src="../images/comp_des_highlight2.png" /></p>
+
+<p>To show or hide the object area in the group view, go to <strong>View</strong> > <strong>Show object area</strong> in the menu.</p>
+<p>When the object area is selected to be shown, the part highlight has another handler in its middle. By dragging that handler, you can change the align of the selected part.</p>
+<h3>Modes</h3>
+<p>The workspace can demonstrate 2 possible behaviors:</p>
+<ul>
+<li>Normal
+<p>This mode is used to manipulate the group primitives in the development stage. All parts are represented on the workspace, including containers and spacers. Each of the non-visible primitive types has their own pattern and color. This makes it possible to understand the markup of the group and the dependencies between primitives. Text parts are bordered to show the area from the left top to right bottom corners. In addition, text parts set the part name as content if there is no preset text in that part (it can be set in the text block in the properties).</p>
+<p>You can select primitives directly on the workspace in this mode. You can also select parts inside the part/program navigation panel, as usual. The selected part is covered by the resizing control element, which shows highlights that change the maximum size of the primitive.</p>
+<p class="figure">Figure: Normal mode</p>
+<p align="center"><img alt="Normal mode" src="../images/comp_des_mode_normal.png" /></p></li>
+<li>Demo
+<p>While the normal mode is used during the implementation process, the demo mode is used to see the end result. Objects displayed in this mode look the same as in the runtime application.</p>
+<p>You can type text into texts part and set container part content. Predefined components (such as button, check, slider, entry, and progress bar) can be used as content. You can also use a simple rectangle or an image file stored in the file system as content. You can set different colors and minimum/maximum sizes for content.</p>
+<p>The demo mode can also emit signals to objects. When the programs inside a group are created, you want to check how the objects react to those signals. The list of signals that can be emitted in the demo mode exclude the programs that depend on mouse events, because it is easier to click (or mouse in/out, double-click) on a real object.</p>
+<p class="figure">Figure: Demo mode</p>
+<p align="center"><img alt="Demo mode" src="../images/comp_des_mode_demo.png" /></p></li>
+</ul>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Important</th>
+ </tr>
+ <tr>
+ <td class="note">Most Elementary components are loaded as fully functional UI components. This means that the behavior of the loaded component depends on the Elementary source code. The group is loaded with a usual layout, in case the group has no Elementary component style or is a still unsupported component.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Rulers</h3>
+
+<p>Rulers are parts of the group view, which can be used to show the part sizes and their relatives. Both vertical and horizontal rulers have an indicator that shows the current mouse position, and can be used to make some general measurements of the part size and position. Zooming the group view in or out also changes the rulers, showing zoomed sizes.</p>
+<p class="figure">Figure: Rulers</p>
+<p align="center"><img alt="Rulers" src="../images/comp_des_rulers.png" /></p>
+<p>To hide the rulers, click the group view background and clear the <strong>Show rulers</strong> option.</p>
+<p>You can show 2 scales on rulers:</p>
+<p class="figure">Figure: Ruler scales</p>
+<p align="center"><img alt="Ruler scales" src="../images/comp_des_ruler.png" /></p>
+<ul>
+<li>Absolute scale (gray text and dashes): rulers show the decent sizes in pixels of the entire group shown and loaded into the container.</li>
+<li>Relative scale (blue bubble with value inside): rulers show the relatives of the selected part (or the entire group if a part is not selected). The relative scale works well with the object area, showing all relatives of the current object on a group view.</li>
+</ul>
+<p>You can use and show both scales on rulers.</p>
+<h2 id="properties">Properties</h2>
+
+<p>The panel on the right side of the Component Designer window can be used to modify the properties and parameters of the current context (such as an opened group, workspace mode, or selected part, state, or program). You can see and modify the values of a large number of properties, such as min, relative, map, part name, and content type (for demo).</p>
+<p class="figure">Figure: Properties</p>
+<p align="center"><img alt="Properties" src="../images/comp_des_properties.png" /></p>
+<p>All general properties that can be modified are described in the following sections. There are different properties for an opened group, demo mode, selected items, data, program, state, and part. Some user-friendly general behaviors, such as list filtering (hide other controls on certain values), popups, and highlights are covered as well.</p>
+<h3>Property Controls</h3>
+<p>Properties consist of different controls:</p>
+<ul>
+<li>The properties are generally grouped into a tree structure containing the attributes (controls) and related values together. For example, the <strong>Color</strong> block contains the color classes and general color, while the <strong>Position</strong> block contains all controls to work with relatives (such as relative to and offsets).</li>
+<li>Most properties have a description (title) text, which is highlighted with bold when it has a non-default value. Every property has 1 or 2 controls (like min and max in the <strong>Picture</strong> property), and the property can show a subparam (subtitle) and measure (for example, px).
+<p class="figure">Figure: Property title and value</p>
+<p align="center"><img alt=" Property title and value" src="../images/comp_des_property_controls.png" /></p></li>
+<li>If the attribute can have a value within a range, a spinner control is used. These attributes can be, for example, offsets (which can be up to 9999 pixels), borders, and sizes.</li>
+<li>Some attributes can be negative and positive, while some are positive only. All of that depends on the attribute characteristics described by <a href="https://docs.enlightenment.org/efl/current/edcref.html" target="_blank">Edje Data Collection reference</a>.
+
+</li>
+<li>If the attribute can be only in ON or OFF state (such as <strong>Visible</strong>, <strong>Smooth</strong>, and <strong>Map</strong>), a check control is used to show them.
+<p class="figure">Figure: Check control</p>
+<p align="center"><img alt="Check control" src="../images/comp_des_visible.png" /></p>
+
+</li>
+<li>If the attribute has a constant number of text-based values, a combo box control is used. It is commonly used for, for example, <strong>Aspect preference</strong>, <strong>Clip to</strong>, and <strong>Relative</strong>. That control is also widely used for those attributes which require you to select one of the parts existing inside the opened group.
+<p class="figure">Figure: Combo box</p>
+<p align="center"><img alt="Combo box" src="../images/comp_des_aspect_preference.png" /></p>
+
+</li>
+<li>If the attribute defines a color, a button that shows a color palette is used. This is widely used inside the textblock style library. If you click the button, a popup is shown. After you select the color, it is immediately applied to the selected part.
+<p class="figure">Figure: Color palette</p>
+<p align="center"><img alt="Color palette" src="../images/comp_des_color.png" /></p>
+
+</li>
+<li>Entry control is commonly used to set up text attributes, such as name, text, and fonts. Sometimes the entry is modified, for example, the image path has an entry control with a button. If you click it, an image selector (similar to the color selector) is shown, with a grid of all images added through the image manager and already existing in the project. Select the image by double-clicking it.
+<p class="figure">Figure: Entry</p>
+<p align="center"><img alt="" src="../images/comp_des_entry.png" /></p>
+
+</li>
+<li>The <strong>Tween</strong> block has a variable set of images. You can add images by clicking the <strong>+</strong> button, or delete all selected images with the - button. The <strong>+</strong> button shows a list of images, and you can select any number of them before clicking <strong>OK</strong>. All selected images are added to the tween.
+<p class="figure">Figure: Tween</p>
+<p align="center"><img alt="Tween" src="../images/comp_des_tween.png" /></p></li>
+</ul>
+<h3>Non-default Highlight</h3>
+
+<p>The property highlights to show non-default values in bold. The highlight makes it easier to look at the entire set of properties and see which of them have been changed and differ from the default values. Whenever a non-default value is changed back to its default, the description text of that property is unbolded.</p>
+<p class="figure">Figure: Non-default highlight</p>
+<p align="center"><img alt="Non-default highlight" src="../images/comp_des_non_default.png" /></p>
+<h3>Group Block Properties</h3>
+
+<p>The <strong>Group</strong> block shows itself only when a group is loaded and its tab is activated, but nothing is selected yet. It contains just a few properties, such as the group name (which is unedited for now) and some general group min and max sizes.</p>
+<p class="figure">Figure: Group block properties</p>
+<p align="center"><img alt="Group block properties" src="../images/comp_des_group_block.png" /></p>
+<h3>Part Block Properties</h3>
+
+<p>The <strong>Part</strong> block is usually the same for most part types. More properties are available for the text and textblock types, and the source for the part type called <strong>GROUP</strong>. Generally, the block contains some general part attributes, such as mouse pointer attributes (pointer mode, events repeating), scale, and draggable attributes.</p>
+<p class="figure">Figure: Part block properties</p>
+<p align="center"><img alt="Part block properties" src="../images/comp_des_part_block.png" /></p>
+<h3>State Block Properties</h3>
+<p>The <strong>State</strong> block is huge. It differs depending on the selected state of a certain part type. Generally all part types contain 4 blocks:</p>
+<ul>
+<li><strong>Colors</strong> (selected color class for this state or general color)</li>
+<li><strong>Size</strong> (such as min, max, and aspects)</li>
+<li><strong>Position</strong> (relatives, offsets, and align)</li>
+<li><strong>Map</strong> (everything related to map, perspective, colors, and rotations)</li>
+</ul>
+<p>Some types have specific blocks in their states. The image part has the <strong>Image</strong> block (properties, such as tweens, image, and borders) and the <strong>Fill</strong> block. The text and textblock parts have some text attributes inside every state. The container parts (box and table) have some container attributes (such as align and weight).</p>
+<h3>Program Block Properties</h3>
+
+<p>The program usually has 1 important block that contains some attributes, such as the program name, action type, signal, source, and filters. Usually, it also contain a list of after's - programs that are run together with the selected program in a certain queue.</p>
+<p class="figure">Figure: Program block properties</p>
+<p align="center"><img alt="Program block properties" src="../images/comp_des_program_block.png" /></p>
+<p>Based on the program action type, the block can contain more attributes. For example, the <strong>Action params</strong> can have a state name and value for the <strong>STATE_SET</strong> program type, or it can be a sample, channel, and duration for <strong>SOUND_SAMPLE</strong>.
+For programs like <strong>STATE_SET</strong>, there is also a block used to set <strong>Targets</strong> (for example, the <strong>STATE_SET</strong> program applies changes to the parts listed in the <strong>Targets</strong> block).</p>
+<h3>Item Block Properties</h3>
+
+<p>The item properties are shown only when the items of the box or table part are selected. They have simple attributes, such as the source group to be loaded into item, some sizes, and positions, and paddings.</p>
+<p class="figure">Figure: Item block properties</p>
+<p align="center"><img alt="Item block properties" src="../images/comp_des_items_block.png" /></p>
+<h3>Data Item Block Properties</h3>
+
+<p>The <strong>Data item</strong> block contains only a key and value pair.</p>
+<p class="figure">Figure: Data item block properties</p>
+<p align="center"><img alt="Data item block properties" src="../images/comp_des_data_item.png" /></p>
+<h3>Demo Block Properties</h3>
+<p>The <strong>Demo</strong> block appears only when the workspace is in the demo mode, and the navigation list of parts contains only signals, text, textblock, and swallow parts. The demo properties differ depending on what kind of part or signal is selected:</p>
+<ul>
+<li>For selected signals, information is shown about the signal, such as the emitter, signal, and type of program to be called.</li>
+<li>For selected text and textblock parts, simple property attributes are shown, such as uneditable part name and content. By typing text into content, the text is sent to the demo object, showing how the loaded demo object acts when certain text gets into the text parts.</li>
+<li>For selected swallows, more attributes are shown. If you use the swallow properties, you can set up different objects into the selected swallow, and see the resulting layout.
+<p>The demo mode shows how the end result looks like when a specific component or layout is used inside different programs or as a theme.</p></li>
+</ul>
+<p>The <strong>Demo</strong> properties allows you to set a rectangle (and its color), image (with a path to the image file to load the picture from the system), or UI component (predefined list of components to put into the swallow, for example, check, button, and gengrid). In addition, you can set up a certain style for the selected component, from inside the group.</p>
+<p>For any kind of content (UI component, image, or rectangle), you can set up the min and max size, which also helps to determine the resulting behavior of the loaded group.</p>
+
+<table>
+<caption>Table: Demo block properties</caption>
+<tbody>
+<tr>
+ <th>Content type</th>
+ <th>Properties</th>
+</tr>
+ <tr>
+ <td>Rectangle</td>
+ <td><p align="center"><img alt="Rectangle" src="../images/comp_des_demo_block_1.png" /></p></td>
+ </tr>
+ <tr>
+ <td>Image</td>
+ <td><p align="center"><img alt="Image" src="../images/comp_des_demo_block_2.png" /></p></td>
+ </tr>
+ <tr>
+ <td>UI component</td>
+ <td><p align="center"><img alt="UI component" src="../images/comp_des_demo_block_3.png" /></p></td>
+ </tr>
+</tbody>
+</table>
+
+<h2 id="managers">Managers</h2>
+<p>Component styles in one theme usually share a lot of common resources. These include images, sounds, text styles, and color classes. The Component Designer provides a set of resource managers that allow you to add, view, edit, and delete existing resources.</p>
+<h3>Images</h3>
+
+<p>The image manager shows all images in the project as a grid. Unused images are marked with an exclamation mark <img alt="Exclamation" src="../images/comp_des_icon_exclamation.png" />. When you select an image, you can see its preview and basic info (name, type, location, and size compression type and rate).</p>
+<p class="figure">Figure: Images</p>
+<p align="center"><img alt="Images" src="../images/comp_des_images.png" /></p>
+<p>To add an image into the project, click the <strong>+</strong> button and select it in the file selector. You can add multiple images at once by holding the <strong>Shift</strong> key.</p>
+<p>To delete the selected images, press the <strong>-</strong> button. Only unused images can be deleted, because deleting used images damages all styles where they are used.</p>
+<h3>Sounds</h3>
+
+<p>The sound manager is very similar to the image manager. It shows all sounds and tones in the project and allows adding and removing them. Instead of an image preview, there is a simple sound player.</p>
+<p class="figure">Figure: Sounds</p>
+<p align="center"><img alt="Sounds" src="../images/comp_des_sounds.png" /></p>
+
+<h3>Textblock Styles</h3>
+
+<p>The style manager shows all textblock styles in the project. You can expand the style to see all its elements.</p>
+<p class="figure">Figure: Textblock styles</p>
+<p align="center"><img alt="Textblock styles" src="../images/comp_des_textblock.png" /></p>
+<p><strong>DEFAULT</strong> is a virtual element that defines the properties of the text not enclosed in any element. The element's attributes can be edited after selecting it. In the left side, you can see how the selected element affects the text in the textblock.</p>
+<h3>Colorclasses</h3>
+
+<p>Color classes are designed to simplify color adjustment in your theme. Changing colors in the color class manager affects all parts in all styles that are using it.</p>
+<p class="figure">Figure: Colorclasses</p>
+<p align="center"><img alt="Colorclasses" src="../images/comp_des_colorclasses.png" /></p>
+<p>For most part types, only the first color matters. Only the text parts can use all 3 colors.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">If you want some part to have a slightly different color, you can specify both a color and color class. In this case, their values are multiplied. For example, if you have a background color class with the green main color (255, 0, 0, 255) and a part with this color class and a half-transparent white color (255, 255, 255, 127) resulting part color is (255, 0, 0, 127).</td>
+ </tr>
+ </tbody>
+ </table>
+<h2 id="shortcuts">Shortcuts</h2>
+
+<p>The following table lists the shortcut keys available for the Component Designer.</p>
+
+<table>
+<caption>Table: Shortcuts</caption>
+<tbody>
+<tr>
+ <th>Key</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <th colspan="2">Global</th>
+</tr>
+ <tr>
+ <td><strong>F1</strong></td>
+ <td>Show the shortcut list</td>
+ </tr>
+ <tr>
+ <td><strong>F2</strong></td>
+ <td>Normal mode</td>
+ </tr>
+ <tr>
+ <td><strong>F3</strong></td>
+ <td>Code mode</td>
+ </tr>
+ <tr>
+ <td><strong>F4</strong></td>
+ <td>Demo mode</td>
+ </tr>
+ <tr>
+ <td><strong>F7</strong></td>
+ <td>Open the image manager</td>
+ </tr>
+ <tr>
+ <td><strong>F8</strong></td>
+ <td>Open the sound manager</td>
+ </tr>
+ <tr>
+ <td><strong>F9</strong></td>
+ <td>Open the style manager</td>
+ </tr>
+ <tr>
+ <td><strong>F10</strong></td>
+ <td>Open the colorclass manager</td>
+ </tr>
+ <tr>
+ <td><strong>Ctrl + Q</strong></td>
+ <td>Quit</td>
+ </tr>
+<tr>
+ <th colspan="2">Workspace</th>
+</tr>
+ <tr>
+ <td><strong>Ctrl + s</strong></td>
+ <td>Save</td>
+ </tr>
+ <tr>
+ <td><strong>Ctrl + z</strong></td>
+ <td>Undo</td>
+ </tr>
+ <tr>
+ <td><strong>Ctrl + y</strong></td>
+ <td>Redo</td>
+ </tr>
+ <tr>
+ <td><strong>Ctrl + n</strong></td>
+ <td>Add a new group</td>
+ </tr>
+ <tr>
+ <td><strong>q</strong></td>
+ <td>Add a new part</td>
+ </tr>
+ <tr>
+ <td><strong>w</strong></td>
+ <td>Add a new state</td>
+ </tr>
+ <tr>
+ <td><strong>e</strong></td>
+ <td>Add a new item</td>
+ </tr>
+ <tr>
+ <td><strong>r</strong></td>
+ <td>Add a new program</td>
+ </tr>
+ <tr>
+ <td><strong>t</strong></td>
+ <td>Add a new data item</td>
+ </tr>
+ <tr>
+ <td><strong>Delete</strong></td>
+ <td>Delete the selected part, state, item, program, or data item</td>
+ </tr>
+ <tr>
+ <td><strong>S</strong></td>
+ <td>Select the next state of the active part</td>
+ </tr>
+ <tr>
+ <td><strong>z</strong></td>
+ <td>Select the previous part</td>
+ </tr>
+ <tr>
+ <td><strong>x</strong></td>
+ <td>Select the next part</td>
+ </tr>
+ <tr>
+ <td><strong>ESC</strong></td>
+ <td>Unselect</td>
+ </tr>
+ <tr>
+ <td><strong>o</strong></td>
+ <td>Show or hide the object area</td>
+ </tr>
+ <tr>
+ <td><strong>Ctrl + Wheel Up</strong></td>
+ <td>Zoom in</td>
+ </tr>
+ <tr>
+ <td><strong>Ctrl + Wheel Down</strong></td>
+ <td>Zoom out</td>
+ </tr>
+ <tr>
+ <td><strong>KP_DIV</strong></td>
+ <td>Set the zoom to 100%</td>
+ </tr>
+ <tr>
+ <th colspan="2">Tabs</th>
+</tr>
+ <tr>
+ <td><strong>Ctrl + w</strong></td>
+ <td>Close the tab</td>
+ </tr>
+ <tr>
+ <td><strong>Ctrl + num</strong></td>
+ <td>Switch to tab 1-10</td>
+ </tr>
+ <tr>
+ <td><strong>(Tab or Ctrl) + Page Down</strong></td>
+ <td>Switch to the next tab</td>
+ </tr>
+ <tr>
+ <td><strong>Shift + (Tab or Ctrl) + Page Up</strong></td>
+ <td>Switch to the previous tab</td>
+ </tr>
+ <tr>
+ <th colspan="2">Popups</th>
+</tr>
+ <tr>
+ <td><strong>Enter</strong></td>
+ <td>OK</td>
+ </tr>
+ <tr>
+ <td><strong>ESC</strong></td>
+ <td>Cancel</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>
+
+<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
