| author | fturovic <frank.turovich@nokia.com> |
| Tue, 27 Jul 2010 15:28:19 -0500 | |
| changeset 1704 | 24ac5a5cf80c |
| parent 0 | fb279309251b |
| permissions | -rw-r--r-- |
|
1704
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
2 |
<html> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
3 |
<head> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
5 |
<meta http-equiv="Content-Style-Type" content="text/css" /> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
6 |
<title>Custom Component Architecture</title> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
7 |
<link rel="StyleSheet" href="../../book.css" type="text/css"/> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
8 |
<style type="text/css"> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
9 |
<!-- |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
10 |
.style1 {font-size: 12px}
|
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
11 |
--> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
12 |
</style> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
13 |
</head> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
14 |
<body bgcolor="#FFFFFF"> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
15 |
<h2>Custom Component Architecture</h2> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
16 |
<h3>Component System</h3> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
17 |
<p>The component system makes up the foundation of the UI Designer. It provides components to the UI Designer from component library plugins or user component projects in the current workspace. In the UI Designer, each component is defined by an XML file, an associated set of JavaScript files, images, and sometimes Eclipse extension points.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
18 |
<p>Each component defines its related properties, property types, events, rendering, source generation, RSS mapping, editor icon and description. A component also defines its behavior for a specific part of the target program. Each component is typically a single control (e.g. CEikEdwin) or container (e.g. CAknView or CCoeControl), but are sometimes defined for portions of such controls when it is more convenient for implementation, for example individual items of CAknListBox. Components may also refer to instances of C++ classes (like active objects) or transient dialogs (like progress dialogs).</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
19 |
<p>Components may derive from other components, allowing them to share, override, and augment key parts of another's implementation. However, only single inheritance is supported.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
20 |
<p>A component is defined by a unique ID (qualifiedName), which identifies it to other parts of the UI Designer. These are usually dotted names, for example, "com.nokia.sdt.series60.CAknForm". Components in the UI Designer are marked by an SDK vendor and version. Multiple components with the same unique ID may be defined, if each has a different SDK range. One or none will be selected for use in a design based on the baseline SDK selected, allowing the UI Designer to generate source and resources that are compatible with all SDKs in a project. Sometimes, generated source may compensate for SDK differences with #ifdefs, but this is exceedingly rare in practice.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
21 |
<p>Component definitions also include their own version, which means changes in component structure may be detected and acted upon by an update mechanism in Carbide.c++. It's important to design components strictly in accordance with the API versions they target. You want to be sure users will have compilable source no matter what SDK or combination of SDK's they select, even if they change build configurations for their project. Note that this means a component will not necessarily be available for all SDKs in use. The UI Designer can deal gracefully with components that are no longer available for a given SDK, but ample warnings are provided to prevent a design from being saved with a missing component.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
22 |
<h3>Data Model</h3> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
23 |
<p>The data model represents a design, wherein instances of components (component instances) are stored, along with their associated property settings and event bindings. The model as a whole also contains a shared language string table and source generation metadata. This design is generated into .uidesign files. The .uidesign files can be graphically displayed in the UI Designer editor or textually displayed in a text editor to reveal their generated XML structure.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
24 |
<p>The data model remembers the baseline SDK and component versions used for the last save, so it can detect when components are updated or when the related project's build configurations become incompatible with a design. This will prompt the user to take action.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
25 |
<p>The baseline SDK associated with a data model is used in conjunction with the component system to form a component set. The set is a collection of components which are valid for that configuration. The newest compatible component is selected for use in a design.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
26 |
<p>A UI design only references components by ID. This allows the structure of components to change without the UI design becoming invalid. Aside from the ID, only the names of properties and events are reflected in the design. Even types of properties are ignored and property values are stored as strings. Thus, a component may add or drop properties between versions, or add or drop events, or (within reason) change the types of properties, without rendering the UI design invalid. The data model will retain any properties that were set, even if they disappear from a component, usually allowing for a design to be converted to a newer or older component version without losing information.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
27 |
<p>Components may publish a dynamic set of properties based on runtime checks, allowing them to adapt to the requirements of other component instances. The S60 List Box, for example, uses the "style" property to control which properties are available on its child List Item component instances. Since the data model is flexible and retains properties that no longer exist, fields which relate to other styles may be swapped out without losing information. Thus, you can switch a list box from a "double large" style to a "double time" style to a "single text" style and back without losing any list item information.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
28 |
<p>When designing a component, it is important to consider how its data will be used and stored in the data model. Design for flexibility, constructing properties that are independent of each other (as much as possible) and which correspond to specific RSS member fields or C++ setter methods; so they may evolve in coordination with the APIs they are targeting. Also split components into pieces when they have a variable number of contained similar items, rather than making complex array properties.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
29 |
<h3>Display Model</h3> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
30 |
<p>A data model specifies a display model, which consists of various aspects on how the design is displayed on screen. It controls how the model is converted into a layout for use by the editor and how that layout is rendered into images. For S60, each component provides a bitmap with transparency and these are drawn on top of each other to make the composite screen. </p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
31 |
<p>A component also provides the applicable layout configurations (screen sizes and portrait/landscape orientations), which supply "look and feel" interfaces that abstract layout-dependent colors, points, rectangles, images, flags, and strings into named keys for use by components. This allows components to be written for any current or future layout. New components will need to implement the rendering interface "IVisualAppearance" to draw their contents onto a transparent bitmap, using SWT GC operations. Alternately, initial implementations can provide a static bitmap image to represent the component.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
32 |
<h3>Editor</h3> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
33 |
<p>The editor provides the user interaction with the data model and display model. It coordinates the editor document, palette, properties view, outline view, and events view. The editor's document represents the layout object tree, while the outline view represents the data model. The properties and events views show information for the currently selected item.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
34 |
<p>In the editor, the palette shows a filtered view of components available for the UI design. The containers in the model are queried for compatibility with each component (by the IQueryContainment interface) and only valid combinations are shown in the palette. This is not the full set of installed components. Thus, an important first step for developing new components is to understand how containment works and toggle the "Palette filtering" button <img src="tutorials/equal_container/images/palette_filter.png" alt="Palette filter" width="28" height="22" align="texttop" /> in the toolbar so your components show up.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
35 |
<h5>Related concepts</h5> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
36 |
<ul> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
37 |
<li><a href="cc_new_components.htm">Developing New Components</a></li> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
38 |
</ul> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
39 |
<div id="footer">Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). All rights reserved. <br>License: <a href="http://www.eclipse.org/legal/epl-v10.html">http://www.eclipse.org/legal/epl-v10.html</a></div></div> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
40 |
</body> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
41 |
</html> |