--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/book.css	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/book.css	Tue Jul 27 15:28:19 2010 -0500
@@ -10,7 +10,7 @@
 	}
 
 /* 20091007 added verdana and ariel to list to match SFO website fonts choices */
-body, p, table {
+body, p, table, li {
 	font-family: Verdana, Ariel, Helvetica, sans-serif;
 	font-size: 0.9em;
 	font-weight: normal;
@@ -90,18 +90,18 @@
 	}
 
 table	{
-	border: solid #999 1px;
+	border: solid #C9D2C9 1px;
 	table-layout: auto;
 	}
 
 td, th	{
-	border: solid #999 1px;
+	border: solid #C9D2C9 1px;
 	padding: 5px;
 	vertical-align:top;
 	}
 	
 th	{
-	background-color: #ffd62c;
+	background-color: #C9D2C9;
 	}
 
 div.ol.p	{

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/cc_architecture.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/cc_architecture.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,41 +1,41 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Custom Component Architecture</title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-<style type="text/css">
-<!--
-.style1 {font-size: 12px}
--->
-</style>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Custom Component Architecture</h2>
-<h3>Component System</h3>
-<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>
-<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>
-<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>
-<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,  &quot;com.nokia.sdt.series60.CAknForm&quot;. 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>
-<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>
-<h3>Data Model</h3>
-<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>
-<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>
-<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>
-<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>
-<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 &quot;style&quot; 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 &quot;double large&quot; style to a &quot;double time&quot; style to a  &quot;single text&quot; style and back without losing any list item information.</p>
-<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>
-<h3>Display Model</h3>
-<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>
-<p>A component also provides the applicable layout  configurations (screen sizes and portrait/landscape orientations),  which supply &quot;look and feel&quot; 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 &quot;IVisualAppearance&quot;  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>
-<h3>Editor</h3>
-<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>
-<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 &quot;Palette filtering&quot; 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>
-<h5>Related concepts</h5>
-<ul>
-  <li><a href="cc_new_components.htm">Developing New Components</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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>
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Custom Component Architecture</title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+<style type="text/css">
+<!--
+.style1 {font-size: 12px}
+-->
+</style>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Custom Component Architecture</h2>
+<h3>Component System</h3>
+<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>
+<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>
+<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>
+<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,  &quot;com.nokia.sdt.series60.CAknForm&quot;. 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>
+<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>
+<h3>Data Model</h3>
+<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>
+<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>
+<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>
+<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>
+<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 &quot;style&quot; 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 &quot;double large&quot; style to a &quot;double time&quot; style to a  &quot;single text&quot; style and back without losing any list item information.</p>
+<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>
+<h3>Display Model</h3>
+<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>
+<p>A component also provides the applicable layout  configurations (screen sizes and portrait/landscape orientations),  which supply &quot;look and feel&quot; 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 &quot;IVisualAppearance&quot;  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>
+<h3>Editor</h3>
+<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>
+<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 &quot;Palette filtering&quot; 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>
+<h5>Related concepts</h5>
+<ul>
+  <li><a href="cc_new_components.htm">Developing New Components</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/cc_new_components.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/cc_new_components.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,30 +1,30 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Developing New Components</title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Developing New Components</h2>
-<p>Components are defined within component libraries. The UI  Designer supports two types of component libraries:</p>
-<ul>
-  <li>Eclipse plugins</li>
-  <li>Custom  component projects<br />
-  </li>
-</ul>
-<p>The components shipped with the UI Designer are in an  Eclipse plugin project. The designer uses the extension point com.nokia.sdt.component.symbian.componentLibrary  to locate plugins containing Symbian components. The com.nokia.sdt.series60.componentlibrary  plugin implements this extension point. New plugins can be created in the same  manner to expose new components.</p>
-<p>Another  approach is to use a custom component  project. This is an Eclipse project containing one or more components. A  key advantage to this approach is that components can easily be developed  within your current workspace. Note that custom component projects are <em>not</em> Carbide.c++ projects. They are  either simple Eclipse projects or Java projects. These projects do  not use the Carbide.c++ build system.</p>
-<p>The files pertaining to components are:</p>
-<ul>
-  <li>The .component file, for example <span class="code">mylabel.component</span>.  These are XML files following the schema defined for components.</li>
-  <li>Zero  or more .properties files containing user interface strings that should be  localized for different languages. These files are named after the component  and follow the pattern used for Java localization. If the component file is  mylabel.component, then mylabel.properties is the default localization file. The .properties files may be created or omitted as desired, with strings defined where appropriate. For example, a country-specific file could define just a few strings, leaving most to be defined in the language-specific file.<br />
-    Strings that correspond to display text in the component file can be localized by prefacing the string with a % character. For example, <span class="code">friendlyName=&quot;%friendlyName&quot;</span> would have a corresponding entry in the .properties file, such as <span class="code">friendlyName=My Label</span>.</li>
-  <li>Zero or more image files, referenced from the .component file. These may be in PNG, JPEG, GIF, or BMP format.</li>
-  <li>Zero or more JavaScript files, referenced from the .component file. They may have any name with a  .js extension.</li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Developing New Components</title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Developing New Components</h2>
+<p>Components are defined within component libraries. The UI  Designer supports two types of component libraries:</p>
+<ul>
+  <li>Eclipse plugins</li>
+  <li>Custom  component projects<br />
+  </li>
+</ul>
+<p>The components shipped with the UI Designer are in an  Eclipse plugin project. The designer uses the extension point com.nokia.sdt.component.symbian.componentLibrary  to locate plugins containing Symbian components. The com.nokia.sdt.series60.componentlibrary  plugin implements this extension point. New plugins can be created in the same  manner to expose new components.</p>
+<p>Another  approach is to use a custom component  project. This is an Eclipse project containing one or more components. A  key advantage to this approach is that components can easily be developed  within your current workspace. Note that custom component projects are <em>not</em> Carbide.c++ projects. They are  either simple Eclipse projects or Java projects. These projects do  not use the Carbide.c++ build system.</p>
+<p>The files pertaining to components are:</p>
+<ul>
+  <li>The .component file, for example <span class="code">mylabel.component</span>.  These are XML files following the schema defined for components.</li>
+  <li>Zero  or more .properties files containing user interface strings that should be  localized for different languages. These files are named after the component  and follow the pattern used for Java localization. If the component file is  mylabel.component, then mylabel.properties is the default localization file. The .properties files may be created or omitted as desired, with strings defined where appropriate. For example, a country-specific file could define just a few strings, leaving most to be defined in the language-specific file.<br />
+    Strings that correspond to display text in the component file can be localized by prefacing the string with a % character. For example, <span class="code">friendlyName=&quot;%friendlyName&quot;</span> would have a corresponding entry in the .properties file, such as <span class="code">friendlyName=My Label</span>.</li>
+  <li>Zero or more image files, referenced from the .component file. These may be in PNG, JPEG, GIF, or BMP format.</li>
+  <li>Zero or more JavaScript files, referenced from the .component file. They may have any name with a  .js extension.</li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/cc_overview.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/cc_overview.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,29 +1,29 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Creating Custom Components</title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-<style type="text/css">
-<!--
-.style1 {font-size: 12px}
--->
-</style>
-</head>
-<body bgcolor="#FFFFFF">
-<h1>Creating Custom Components</h1>
-<p>The following section provides information on creating your own custom components that appear in the UI Designer and can be used when creating a UI design for your application. First some background information is provided about the basic design of components and how they interact with the UI Designer.</p>
-<h2>Overview</h2>
-<p>A UI designer project contains a set of .uidesign files. There is one for each design &quot;view&quot;, for example the top-level visual container. There is also a .uidesign file (application.uidesign) for the application as a whole, which includes the AppUi.</p>
-<p>A .uidesign  file represents a data model and contains the configuration of a single container or form. The contents of each data model are the persistent state of a set of component instances. Each component instance can have properties, event bindings, and localized strings. Component instances come from the set of available components for a project; based on the selected SDK. Components are listed in the Palette of the UI Designer. Additional component instances are added as the user edits a UI design. Custom components created by a user will also appear in the UI Designer Palette.</p>
-<p>Much of the functionality of the UI Designer is built on components, including determining compatibility across containers, rendering the simulated UI appearance, and generating source code.  At the very least, components can be defined by property values, a source code template, and  containment rules. Code may also be provided, either in JavaScript or Java, to implement user-defined behavior. However, more complex designs can be implemented into the creation of components.</p>
-<h5>Related Topics</h5>
-<ul>
-  <li><a href="cc_architecture.htm">Custom Component Architecture</a></li>
-  <li><a href="cc_new_components.htm">Developing New Components</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Creating Custom Components</title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+<style type="text/css">
+<!--
+.style1 {font-size: 12px}
+-->
+</style>
+</head>
+<body bgcolor="#FFFFFF">
+<h1>Creating Custom Components</h1>
+<p>The following section provides information on creating your own custom components that appear in the UI Designer and can be used when creating a UI design for your application. First some background information is provided about the basic design of components and how they interact with the UI Designer.</p>
+<h2>Overview</h2>
+<p>A UI designer project contains a set of .uidesign files. There is one for each design &quot;view&quot;, for example the top-level visual container. There is also a .uidesign file (application.uidesign) for the application as a whole, which includes the AppUi.</p>
+<p>A .uidesign  file represents a data model and contains the configuration of a single container or form. The contents of each data model are the persistent state of a set of component instances. Each component instance can have properties, event bindings, and localized strings. Component instances come from the set of available components for a project; based on the selected SDK. Components are listed in the Palette of the UI Designer. Additional component instances are added as the user edits a UI design. Custom components created by a user will also appear in the UI Designer Palette.</p>
+<p>Much of the functionality of the UI Designer is built on components, including determining compatibility across containers, rendering the simulated UI appearance, and generating source code.  At the very least, components can be defined by property values, a source code template, and  containment rules. Code may also be provided, either in JavaScript or Java, to implement user-defined behavior. However, more complex designs can be implemented into the creation of components.</p>
+<h5>Related Topics</h5>
+<ul>
+  <li><a href="cc_architecture.htm">Custom Component Architecture</a></li>
+  <li><a href="cc_new_components.htm">Developing New Components</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/customcomponents.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/customcomponents.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,31 +1,31 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Custom Components</title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-<style type="text/css">
-<!--
-.style1 {font-size: 12px}
--->
-</style>
-</head>
-<body bgcolor="#FFFFFF">
-<h1>Custom Components</h1>
-<p>This section provides information on how to create your own custom components. Tutorials are provided; along with an explanation of how they were created. More detailed information for the related XML elements used in building a component definition file is also provided.</p>
-<p>Related Custom Component reference information and XML schema details are also available:</p>
-<ul>
-  <li><a href="../reference/CustomComponents/cc_refoverview.htm">Custom Component Reference</a></li>
-  <li><a href="../reference/component.xsd doc/index.html">Custom Component XML Schema Documentation</a></li>
-</ul>
-<p>A <a href="menu_force_save.htm">component menu</a> is provided to support standard and custom components. If not visible in the main menu bar, you can enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
-<p>Major topics  include:</p>
-<ul>
-  <li><a href="cc_overview.htm">Creating Custom Components</a></li>
-  <li><a href="tutorials/tutorials.htm">Tutorials</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Custom Components</title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+<style type="text/css">
+<!--
+.style1 {font-size: 12px}
+-->
+</style>
+</head>
+<body bgcolor="#FFFFFF">
+<h1>Custom Components</h1>
+<p>This section provides information on how to create your own custom components. Tutorials are provided; along with an explanation of how they were created. More detailed information for the related XML elements used in building a component definition file is also provided.</p>
+<p>Related Custom Component reference information and XML schema details are also available:</p>
+<ul>
+  <li><a href="../reference/CustomComponents/cc_refoverview.htm">Custom Component Reference</a></li>
+  <li><a href="../reference/component.xsd doc/index.html">Custom Component XML Schema Documentation</a></li>
+</ul>
+<p>A <a href="menu_force_save.htm">component menu</a> is provided to support standard and custom components. If not visible in the main menu bar, you can enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
+<p>Major topics  include:</p>
+<ul>
+  <li><a href="cc_overview.htm">Creating Custom Components</a></li>
+  <li><a href="tutorials/tutorials.htm">Tutorials</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_configure_sourcegen.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_configure_sourcegen.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,20 +1,20 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Select Custom Component Projects... </title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Configure SourceGen Debugging... </h2>
-<p>Use the <strong>Configure SourceGen Debugging&hellip;</strong> menu item to  select components and specify an output directory to place a debug script generated by the UI Designer. A script is generated for the selected components' sourceGen elements in addition to any elements with the debug=&quot;true&quot; attribute.</p>
-<h5>Related items</h5>
-<ul>
-  <li><a href="menu_force_save.htm">Force Save</a></li>
-  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
-  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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>
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Select Custom Component Projects... </title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Configure SourceGen Debugging... </h2>
+<p>Use the <strong>Configure SourceGen Debugging&hellip;</strong> menu item to  select components and specify an output directory to place a debug script generated by the UI Designer. A script is generated for the selected components' sourceGen elements in addition to any elements with the debug=&quot;true&quot; attribute.</p>
+<h5>Related items</h5>
+<ul>
+  <li><a href="menu_force_save.htm">Force Save</a></li>
+  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
+  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_custom_comp_projects.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_custom_comp_projects.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,20 +1,20 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Select Custom Component Projects... </title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Select Custom Component Projects... </h2>
-<p>Use the <strong>Select Custom Component Projects&hellip;</strong> menu item to  specify one or more projects that UI Designer searches to locate custom components.</p>
-<h5>Related items</h5>
-<ul>
-  <li><a href="menu_force_save.htm">Force Save</a></li>
-  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
-  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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></body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Select Custom Component Projects... </title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Select Custom Component Projects... </h2>
+<p>Use the <strong>Select Custom Component Projects&hellip;</strong> menu item to  specify one or more projects that UI Designer searches to locate custom components.</p>
+<h5>Related items</h5>
+<ul>
+  <li><a href="menu_force_save.htm">Force Save</a></li>
+  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
+  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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></body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_force_save.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_force_save.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,20 +1,20 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Force Save</title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Force Save </h2>
-<p>Use the <strong>Force Save</strong> menu item to  save the active UI designer document. If the active document is not from the UI designer then this command saves all open UI designer documents. This is helpful for testing source code generation, allowing you to repeatedly save without making changes to the document.</p>
-<h5>Related items</h5>
-<ul>
-  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
-  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
-  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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></body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Force Save</title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Force Save </h2>
+<p>Use the <strong>Force Save</strong> menu item to  save the active UI designer document. If the active document is not from the UI designer then this command saves all open UI designer documents. This is helpful for testing source code generation, allowing you to repeatedly save without making changes to the document.</p>
+<h5>Related items</h5>
+<ul>
+  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
+  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
+  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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></body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_overview.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_overview.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,21 +1,21 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Component menu</title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Component Menu</h2>
-<p>A component menu is provided to support standard and custom components. If not visible in the main menu bar, you can enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
-<h5>Menu Items</h5>
-<ul>
-  <li><a href="menu_force_save.htm">Force Save</a></li>
-  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
-  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
-  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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></body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Component menu</title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Component Menu</h2>
+<p>A component menu is provided to support standard and custom components. If not visible in the main menu bar, you can enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
+<h5>Menu Items</h5>
+<ul>
+  <li><a href="menu_force_save.htm">Force Save</a></li>
+  <li><a href="menu_refresh_comp.htm">Refresh Components</a></li>
+  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
+  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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></body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_refresh_comp.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/menu_refresh_comp.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,20 +1,20 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Refresh Components</title>
-<link rel="StyleSheet" href="../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Refresh Components </h2>
-<p>Use the <strong>Refresh Components</strong> menu item to reload all components from all libraries.  This option allows you to make changes to any of your component and script files without having to restart the IDE. JavaScript code is also refreshed, just be sure to save the JavaScript files before refreshing.</p>
-<h5>Related items</h5>
-<ul>
-  <li><a href="menu_force_save.htm">Force Save</a></li>
-  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
-  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
-</ul>
-<div id="footer">Copyright &copy; 2009 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>
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Refresh Components</title>
+<link rel="StyleSheet" href="../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Refresh Components </h2>
+<p>Use the <strong>Refresh Components</strong> menu item to reload all components from all libraries.  This option allows you to make changes to any of your component and script files without having to restart the IDE. JavaScript code is also refreshed, just be sure to save the JavaScript files before refreshing.</p>
+<h5>Related items</h5>
+<ul>
+  <li><a href="menu_force_save.htm">Force Save</a></li>
+  <li><a href="menu_custom_comp_projects.htm">Selecting Custom Component Projects...</a></li>
+  <li><a href="menu_configure_sourcegen.htm">Configure SourceGen Debugging</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/equal_container/equalcontainer_tutorial.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/equal_container/equalcontainer_tutorial.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,25 +1,25 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Tutorial: Equal Container</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Equal Container</h2>
-<p>This tutorial explains how to create a top-level container component based on CCoeControl that consists of a simple layout behavior and shows up in the design wizard. The example files for the Equal Container tutorial are provided in a zip file in the s60 components plugin located at: <span class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</span>, where <i>version</i> is the current version of UI Designer. Refer to the EqualContainer example files while reading this tutorial.</p>
-<p>Please refer to the component XML schema  documentation for all the XML element details. Detailed documentation on the schema can be  found in the reference section under <a href="../../../reference/component.xsd doc/index.html">Component XSD Description</a>.</p>
-<p>In CCoeControl, children are added at absolute positions and given absolute sizes. These values make it into the generated source.  This does not work well for multiple resolutions or portrait vs. landscape modes.  So you can create a custom container (EqualContainer) that dynamically calculates the coordinates and sizes for components (children) and places them at equal sizes within the container.</p>
-<p>The goal of this tutorial focuses on the following steps:</p>
-<ul>
-  <li>Step 1: <a href="equalcontainer_tutorial_01.htm">Create Project for Equal Container Example</a></li>
-  <li>Step 2: <a href="equalcontainer_tutorial_02.htm">Write the Component and Script Code</a></li>
-  <li>Step 3: <a href="equalcontainer_tutorial_03.htm">Change  CCoeControl&rsquo;s Layout Behavior to be Dynamic</a></li>
-  <li>Step 4: <a href="equalcontainer_tutorial_04.htm">Expose the New Container in the Design Wizard</a></li>
-  <li>Step 5: <a href="equalcontainer_tutorial_05.htm">Create UI Design for UI Designer Project</a></li>
-</ul>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Tutorial: Equal Container</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Equal Container</h2>
+<p>This tutorial explains how to create a top-level container component based on CCoeControl that consists of a simple layout behavior and shows up in the design wizard. The example files for the Equal Container tutorial are provided in a zip file in the s60 components plugin located at: <span class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</span>, where <i>version</i> is the current version of UI Designer. Refer to the EqualContainer example files while reading this tutorial.</p>
+<p>Please refer to the component XML schema  documentation for all the XML element details. Detailed documentation on the schema can be  found in the reference section under <a href="../../../reference/component.xsd doc/index.html">Component XSD Description</a>.</p>
+<p>In CCoeControl, children are added at absolute positions and given absolute sizes. These values make it into the generated source.  This does not work well for multiple resolutions or portrait vs. landscape modes.  So you can create a custom container (EqualContainer) that dynamically calculates the coordinates and sizes for components (children) and places them at equal sizes within the container.</p>
+<p>The goal of this tutorial focuses on the following steps:</p>
+<ul>
+  <li>Step 1: <a href="equalcontainer_tutorial_01.htm">Create Project for Equal Container Example</a></li>
+  <li>Step 2: <a href="equalcontainer_tutorial_02.htm">Write the Component and Script Code</a></li>
+  <li>Step 3: <a href="equalcontainer_tutorial_03.htm">Change  CCoeControl&rsquo;s Layout Behavior to be Dynamic</a></li>
+  <li>Step 4: <a href="equalcontainer_tutorial_04.htm">Expose the New Container in the Design Wizard</a></li>
+  <li>Step 5: <a href="equalcontainer_tutorial_05.htm">Create UI Design for UI Designer Project</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,30 +1,30 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Tutorial: Vertical Label Component</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-<style type="text/css">
-<!--
-.style1 {font-size: 12px}
--->
-</style>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component</h2>
-<p>This tutorial explains how to take an example custom component called VerticalLabel and use it in an S60 UI Designer project. The Vertical Label is an example of a custom S60 visual control component. It is similar to the standard Label component, but draws the label text vertically. The tutorial consists of two versions of the  Vertical Label component. VerticalLabel1 is the bare minimum needed  to make a functioning component. VerticalLabel2 adds JavaScript to render the component when used within a design in the UI Designer.</p>
-<p>Information is provided that explains  how to add the component to the UI Designer Palette followed by an examination of how the component was created. This tutorial explains what is relevant to the  example.  Please refer to the component XML schema  documentation for all the XML element details. Detailed documentation on the schema can be  found in the reference section under <a href="../../../reference/component.xsd doc/index.html">Component XSD Description</a>.</p>
-<p> The example files for the Vertical Label tutorials are provided in a zip file in the s60 components plugin located at: <code class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</code>, where <i>version</i> is the current version of UI Designer. Refer to the example files while reading this tutorial.</p>
-<p>The goal of this tutorial focuses on the following steps:</p>
-<ul>
-  <li>Step 1: <a href="verticallabel_tutorial_01.htm">Create Project for Example Component Files</a></li>
-  <li>Step 2: <a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></li>
-  <li>Step 3: <a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></li>
-  <li>Step 4: <a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></li>
-  <li>Step 5: <a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></li>
-</ul>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Tutorial: Vertical Label Component</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+<style type="text/css">
+<!--
+.style1 {font-size: 12px}
+-->
+</style>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component</h2>
+<p>This tutorial explains how to take an example custom component called VerticalLabel and use it in an S60 UI Designer project. The Vertical Label is an example of a custom S60 visual control component. It is similar to the standard Label component, but draws the label text vertically. The tutorial consists of two versions of the  Vertical Label component. VerticalLabel1 is the bare minimum needed  to make a functioning component. VerticalLabel2 adds JavaScript to render the component when used within a design in the UI Designer.</p>
+<p>Information is provided that explains  how to add the component to the UI Designer Palette followed by an examination of how the component was created. This tutorial explains what is relevant to the  example.  Please refer to the component XML schema  documentation for all the XML element details. Detailed documentation on the schema can be  found in the reference section under <a href="../../../reference/component.xsd doc/index.html">Component XSD Description</a>.</p>
+<p> The example files for the Vertical Label tutorials are provided in a zip file in the s60 components plugin located at: <code class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</code>, where <i>version</i> is the current version of UI Designer. Refer to the example files while reading this tutorial.</p>
+<p>The goal of this tutorial focuses on the following steps:</p>
+<ul>
+  <li>Step 1: <a href="verticallabel_tutorial_01.htm">Create Project for Example Component Files</a></li>
+  <li>Step 2: <a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></li>
+  <li>Step 3: <a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></li>
+  <li>Step 4: <a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></li>
+  <li>Step 5: <a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_01.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_01.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,39 +1,39 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Create Project for Example Component Files</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Create Project for Example Component Files</h2>
-<p>First create a General Project:</p>
-<ol>
-  <li>Select <strong>File &gt; New &gt; Project</strong>...</li>
-  <li>Select Project in the General folder.</li>
-  <li>Click Next and continue with wizard setup by specifying a project name, workspace location, and referenced projects (if applicable).</li>
-  <li>On last page of wizard click Finish to create the simple project.</li>
-</ol>
-<p>The project will appear in the Project Explorer view. Select the project and right-click to display the context menu. Select <strong>Show in Explorer</strong> from the list of menu options. Grab the example zip file from <span class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</span>, where <i>version</i> is the current version of UI Designer, and unzip the Vertical Label example files into your new simple project folder. The files include:</p>
-<ul>
-  <li>example_verticallabel.rh</li>
-  <li>layoutImage.png</li>
-  <li>VerticalLabel1.component</li>
-  <li>VerticalLabel1.properties</li>
-  <li>VerticalLabel2.component</li>
-  <li>VerticalLabel2.properties</li>
-  <li>VerticalLabel.cpp</li>
-  <li>VerticalLabel.h</li>
-  <li>VerticalLabel.js</li>
-  <li>VerticalLabel.png</li>
-  <li>VerticalLabel_layout.png</li>
-  <li>VerticalLabel_sm.png</li>
-</ul>
-<p>The difference between the VerticalLabel1 and VerticalLabel2 example is that the VerticalLabel2 example uses the implementations element to implement the IVisualAppearance class and call a JavaScript file to render the vertical label component and make it visible within the UI Designer. Code within the JavaScript file sets the background, font, size, draws the rectangle, and defines other related properties.</p>
-<h5>Step 2 of 5</h5>
-<p><a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Create Project for Example Component Files</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Create Project for Example Component Files</h2>
+<p>First create a General Project:</p>
+<ol>
+  <li>Select <strong>File &gt; New &gt; Project</strong>...</li>
+  <li>Select Project in the General folder.</li>
+  <li>Click Next and continue with wizard setup by specifying a project name, workspace location, and referenced projects (if applicable).</li>
+  <li>On last page of wizard click Finish to create the simple project.</li>
+</ol>
+<p>The project will appear in the Project Explorer view. Select the project and right-click to display the context menu. Select <strong>Show in Explorer</strong> from the list of menu options. Grab the example zip file from <span class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</span>, where <i>version</i> is the current version of UI Designer, and unzip the Vertical Label example files into your new simple project folder. The files include:</p>
+<ul>
+  <li>example_verticallabel.rh</li>
+  <li>layoutImage.png</li>
+  <li>VerticalLabel1.component</li>
+  <li>VerticalLabel1.properties</li>
+  <li>VerticalLabel2.component</li>
+  <li>VerticalLabel2.properties</li>
+  <li>VerticalLabel.cpp</li>
+  <li>VerticalLabel.h</li>
+  <li>VerticalLabel.js</li>
+  <li>VerticalLabel.png</li>
+  <li>VerticalLabel_layout.png</li>
+  <li>VerticalLabel_sm.png</li>
+</ul>
+<p>The difference between the VerticalLabel1 and VerticalLabel2 example is that the VerticalLabel2 example uses the implementations element to implement the IVisualAppearance class and call a JavaScript file to render the vertical label component and make it visible within the UI Designer. Code within the JavaScript file sets the background, font, size, draws the rectangle, and defines other related properties.</p>
+<h5>Step 2 of 5</h5>
+<p><a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_02.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_02.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,38 +1,38 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Enable Components Menu</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Enable Components Menu</h2>
-<p>If not visible in the main menu bar, enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
-<p align="center"><img src="images/comp_menu.png" alt="Component menu" width="428" height="93" /></p>
-<p align="center"><strong>Figure 1. Components Menu</strong></p>
-<p align="left">&nbsp;</p>
-<table width="541" border="1" align="center">
-  <tr>
-    <td width="184">Force Save</td>
-    <td width="341">Forces a save on one or more open design editors.</td>
-  </tr>
-  <tr>
-    <td>Refresh Components</td>
-    <td>Reloads all components and refreshes open editors.</td>
-  </tr>
-  <tr>
-    <td>Select Custom Component Projects...</td>
-    <td>Selects which projects are searched for custom components.</td>
-  </tr>
-  <tr>
-    <td>Configure SourceGen Debugging...</td>
-    <td>Controls dumping of generated JavaScript for source generation. UI Designer will write the generated script for the selected components' &lt;sourceGen&gt; elements to disk, in addition to any elements with the debug=&quot;true&quot; attribute.</td>
-  </tr>
-</table>
-<h5>Step 3 of 5</h5>
-<p><a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Enable Components Menu</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Enable Components Menu</h2>
+<p>If not visible in the main menu bar, enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
+<p align="center"><img src="images/comp_menu.png" alt="Component menu" width="428" height="93" /></p>
+<p align="center"><strong>Figure 1. Components Menu</strong></p>
+<p align="left">&nbsp;</p>
+<table width="541" border="1" align="center">
+  <tr>
+    <td width="184">Force Save</td>
+    <td width="341">Forces a save on one or more open design editors.</td>
+  </tr>
+  <tr>
+    <td>Refresh Components</td>
+    <td>Reloads all components and refreshes open editors.</td>
+  </tr>
+  <tr>
+    <td>Select Custom Component Projects...</td>
+    <td>Selects which projects are searched for custom components.</td>
+  </tr>
+  <tr>
+    <td>Configure SourceGen Debugging...</td>
+    <td>Controls dumping of generated JavaScript for source generation. UI Designer will write the generated script for the selected components' &lt;sourceGen&gt; elements to disk, in addition to any elements with the debug=&quot;true&quot; attribute.</td>
+  </tr>
+</table>
+<h5>Step 3 of 5</h5>
+<p><a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_03.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_03.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,19 +1,19 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Add Custom Component to UI Designer</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Add Custom Component to UI Designer</h2>
-<p>To add a custom component to the UI Designer, select <strong>Components &gt; Select Custom Component Projects...</strong> and check custom component projects. UI Designer will search selected projects for custom components. The components will appear in the UI Designer palette for projects that include UI Designer.</p>
-<p align="center"><img src="images/comp_palette.png" alt="Component palette" width="250" height="366" /></p>
-<p align="center"><strong>Figure 1. UI Designer Component Palette</strong></p>
-<h5>Step 4 of 5</h5>
-<p><a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Add Custom Component to UI Designer</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Add Custom Component to UI Designer</h2>
+<p>To add a custom component to the UI Designer, select <strong>Components &gt; Select Custom Component Projects...</strong> and check custom component projects. UI Designer will search selected projects for custom components. The components will appear in the UI Designer palette for projects that include UI Designer.</p>
+<p align="center"><img src="images/comp_palette.png" alt="Component palette" width="250" height="366" /></p>
+<p align="center"><strong>Figure 1. UI Designer Component Palette</strong></p>
+<h5>Step 4 of 5</h5>
+<p><a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_04.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_04.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,34 +1,34 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Create UI Designer Project to Test Custom Component</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Create UI Designer Project to Test Custom Component</h2>
-<p>Create a S60 UI Designer project to test the VerticalLabel component. For example, select <strong>File &gt; New &gt; Symbian OS C++ Project</strong> and choose the &quot;3rd Ed. GUI Application with UI Designer&quot; template. Complete the wizard by filling in required fields and selecting appropriate options on each page of the project creation wizard. On the S60 UI Design Selection page, select the Empty design. On the following page, select Basic Container (CCoeControl) as the Container type.</p>
-<p>Complete the next two pages of the wizard (Basic Settings and Project Directories) or click Finish now to accept the default settings. The project will appear in the Project Explorer view. The graphical representation of the empty UI design container (.uidesign file) will appear in the Carbide.c++ UI Design editor.</p>
-<p>Select either the Vertical Label 1 or Vertical Label 2 component in the palette's Controls group. Then click inside the empty UI design to place the new component inside the design.</p>
-<p align="center"><img src="images/comp_uiproject.png" alt="Custom Component in UI Design" width="416" height="479" /></p>
-<p align="center"><strong>Figure 1. Custom Component Placed in UI Design</strong></p>
-<p align="left" class="note"><strong>NOTE</strong> The example_verticallabel.rh file must be made accessible to the UI Designer as a system include.</p>
-<p align="left">One way would be to copy the file into an existing  &quot;System includes&quot; directory, such as the UIQ SDK's epoc32\include directory. Alternately, you could copy the file into  a &quot;User includes&quot; directory in your project (for example, inc) and add the directory as a system included directory in the MMP file.</p>
-<p align="left">To add a directory, double-click on the .mmp file in your project (in group folder by default) to open the MMP editor. Click the Options tab and select the System includes  folder  in the Compiler Settings group. Click Add to browse to and add the directory containing your .rh file. You can also click the &quot;Add a system include path&quot; link in the Overview page.</p>
-<p align="left" class="note"><strong>NOTE</strong> In your source files the &lt;&gt; brackets denote a system include path, where quotes (&quot; &quot;) indicate a user include.</p>
-<p align="center"><img src="images/include_dir.png" alt="Compiler settings" width="298" height="302"></p>
-<p align="center" class="figure">Figure 2 - Compiler Settings Group in MMP Editor</p>
-<p align="left">After placing the custom component into the UI design and saving the file, the example VerticalLabel.cpp file will be placed into the source folder (default is src) of your S60 UI Designer project. The VerticalLabel.cpp file is used to draw the VerticalLabel component on your handheld device or in the emulator at runtime. For the VerticalLabel2 example, the associated JavaScript file is used to draw the custom component only at design time in the UI design.</p>
-<p align="left">Therefore, if you design a visual component and wish to display your custom component in the UI Designer, then you must supply a JavaScript file that implements some predefined interfaces.</p>
-<p align="left">You can save all files and build and run your S60 UI Designer project in the emulator to view the component as part of the application. </p>
-<p align="left" class="note"><strong>NOTE</strong> Ensure that VerticalLabel.cpp is included (checked) in the sources to be compiled.  Open your S60 project's .mmp file (located in the group folder) in the Carbide.c++ MMP Editor and select the Sources tab.</p>
-<p align="center"><img src="images/comp_cppsource.png" alt="Include .cpp source" width="537" height="500" /></p>
-<p align="center"><strong>Figure 2. Include Custom Component .cpp file in MMP Editor</strong></p>
-<p align="left">Remember to refresh your project (F5), refresh components (Components &gt; Refresh Components),  clean your project, or perform a Components &gt; Force Save; as needed.</p>
-<h5 align="left">Step 5 of 5</h5>
-<p align="left"><a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Create UI Designer Project to Test Custom Component</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Create UI Designer Project to Test Custom Component</h2>
+<p>Create a S60 UI Designer project to test the VerticalLabel component. For example, select <strong>File &gt; New &gt; Symbian OS C++ Project</strong> and choose the &quot;3rd Ed. GUI Application with UI Designer&quot; template. Complete the wizard by filling in required fields and selecting appropriate options on each page of the project creation wizard. On the S60 UI Design Selection page, select the Empty design. On the following page, select Basic Container (CCoeControl) as the Container type.</p>
+<p>Complete the next two pages of the wizard (Basic Settings and Project Directories) or click Finish now to accept the default settings. The project will appear in the Project Explorer view. The graphical representation of the empty UI design container (.uidesign file) will appear in the Carbide.c++ UI Design editor.</p>
+<p>Select either the Vertical Label 1 or Vertical Label 2 component in the palette's Controls group. Then click inside the empty UI design to place the new component inside the design.</p>
+<p align="center"><img src="images/comp_uiproject.png" alt="Custom Component in UI Design" width="416" height="479" /></p>
+<p align="center"><strong>Figure 1. Custom Component Placed in UI Design</strong></p>
+<p align="left" class="note"><strong>NOTE</strong> The example_verticallabel.rh file must be made accessible to the UI Designer as a system include.</p>
+<p align="left">One way would be to copy the file into an existing  &quot;System includes&quot; directory, such as the UIQ SDK's epoc32\include directory. Alternately, you could copy the file into  a &quot;User includes&quot; directory in your project (for example, inc) and add the directory as a system included directory in the MMP file.</p>
+<p align="left">To add a directory, double-click on the .mmp file in your project (in group folder by default) to open the MMP editor. Click the Options tab and select the System includes  folder  in the Compiler Settings group. Click Add to browse to and add the directory containing your .rh file. You can also click the &quot;Add a system include path&quot; link in the Overview page.</p>
+<p align="left" class="note"><strong>NOTE</strong> In your source files the &lt;&gt; brackets denote a system include path, where quotes (&quot; &quot;) indicate a user include.</p>
+<p align="center"><img src="images/include_dir.png" alt="Compiler settings" width="298" height="302"></p>
+<p align="center" class="figure">Figure 2 - Compiler Settings Group in MMP Editor</p>
+<p align="left">After placing the custom component into the UI design and saving the file, the example VerticalLabel.cpp file will be placed into the source folder (default is src) of your S60 UI Designer project. The VerticalLabel.cpp file is used to draw the VerticalLabel component on your handheld device or in the emulator at runtime. For the VerticalLabel2 example, the associated JavaScript file is used to draw the custom component only at design time in the UI design.</p>
+<p align="left">Therefore, if you design a visual component and wish to display your custom component in the UI Designer, then you must supply a JavaScript file that implements some predefined interfaces.</p>
+<p align="left">You can save all files and build and run your S60 UI Designer project in the emulator to view the component as part of the application. </p>
+<p align="left" class="note"><strong>NOTE</strong> Ensure that VerticalLabel.cpp is included (checked) in the sources to be compiled.  Open your S60 project's .mmp file (located in the group folder) in the Carbide.c++ MMP Editor and select the Sources tab.</p>
+<p align="center"><img src="images/comp_cppsource.png" alt="Include .cpp source" width="537" height="500" /></p>
+<p align="center"><strong>Figure 2. Include Custom Component .cpp file in MMP Editor</strong></p>
+<p align="left">Remember to refresh your project (F5), refresh components (Components &gt; Refresh Components),  clean your project, or perform a Components &gt; Force Save; as needed.</p>
+<h5 align="left">Step 5 of 5</h5>
+<p align="left"><a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_05.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_s60/verticallabel_tutorial_05.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,154 +1,154 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>XML-Based Component File</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - XML Details</h2>
-<p>The tutorial consists of two versions of the VerticalLabel  component. VerticalLabel1 is the bare minimum needed to make a  functioning component. VerticalLabel2 uses JavaScript to display the component in the UI Designer when designing your user interface.</p>
-The  following information explains what is relevant to the tutorial. Refer to the XML component schema documentation for all the details.
-<h3>Component Definition</h3>
-<p>The root element for defining a custom component begins with the &lt;componentDefinition&gt; element as shown in the VerticalLabel1.component and VerticalLabel2.component files. It contains the necessary name space attributes,  making the component schema namespace the default.</p>
-<h3>Component</h3>
-<p>The component element defines the majority of the component properties, attributes, source mapping and souce generation declarations. The following snippet is from the example .component files:</p>
-<pre>&lt;component friendlyName=&quot;%friendlyName&quot; 
-   &nbsp;&nbsp;&nbsp;  qualifiedName=&quot;com.example.VerticalLabel1&quot;
-   &nbsp;&nbsp;&nbsp;  baseComponent=&quot;com.nokia.sdt.series60.CCoeControlBase&quot;
-   &nbsp;&nbsp;&nbsp;  category=&quot;Controls&quot; version=&quot;1.0&quot;
-   &nbsp;&nbsp;&nbsp;  instanceNameRoot=&quot;vlabel&quot;&gt;
-   &nbsp;&nbsp;&nbsp;  &lt;symbian 
-   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  sdkName=&quot;com.nokia.series60&quot; minSDKVersion=&quot;2.0&quot;
-   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
-<p>Strings prefixed with % are localized strings that are  automatically looked up in the accompanying properties files, such as VerticalLabel1.properties.</p>
-<p>Note  that this component derives from CCoeControlBase, which is a component included  with Carbide.c++. It provides much of the default behavior, including needed source code  generation.</p>
-<h3>Symbian Element</h3>
-<p>The &lt;symbian&gt; element specifies that this component is compatible with all  SDKs from 2.0 forward and the class name in the VerticalLabel.cpp file used to draw the component at run time is CVerticalLabel.</p>
-<pre>&lt;symbian sdkName=&quot;com.nokia.series60&quot; minSDKVersion=&quot;2.0&quot;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
-<p>The sdkName property identifies the Symbian OS variant with which the component is compatible. Currently the only recognized SDK name for S60 is &quot;com.nokia.series60&quot;.</p>
-<p class="note"><strong>TIP</strong> Enter <strong>devices</strong> at a command prompt (C:\&gt;devices) to display a list of installed and properly configured SDKs.</p>
-<h3>Designer Images</h3>
-<p>In the VerticalLabel1 example, the &lt;designerImages&gt; element uses one image. This is the static layout image visible in the UI design. This is used in place of writing rendering script in a JavaScript file. You will only see a static graphic in the UI designer. Since icon images have also been omitted, a default image is displayed in the palette and no image is visible in  the outline view. For example:</p>
-<pre>&lt;designerImages layoutImageFile=&quot;layoutImage.png&quot;/&gt;</pre>
-<p>In the VerticalLabel2 example, the &lt;designerImages&gt; element uses custom icon images (.png files) to represent the component in the palette and outline views. The static layout image file can be removed since JavaScript rendering code has been added to display the component in the UI design. For example:</p>
-<pre>&lt;designerImages smallIconFile=&quot;VerticalLabel_sm.png&quot; 
- largeIconFile=&quot;VerticalLabel.png&quot;/&gt;</pre>
-<h4>Image Support</h4>
-<p>Images are validated and rendered on a per-component basis.  Each component may have different restrictions or guidelines for the type or size of images that appear. Images appearing in forms and lists will be automatically scaled by the platform. This requires a reference to another interface the component system understands (IImagePropertyRenderingInfo); and can be declared as shown in the following code fragment.</p>
-<pre>&lt;implementations&gt;
- &lt;implementation&gt;
-  &lt;interface id=&quot;com.nokia.sdt.datamodel.adapter.IImagePropertyRenderingInfo&quot;/&gt;
-  &lt;script file=&quot;MyComponent.js&quot; prototype=&quot;MyComponent&quot;/&gt;
- &lt;/implementation&gt;
-&lt;/implementations&gt;</pre>
-<h3>Attributes Element</h3>
-<p>The Attributes element allows you to declare miscellaneous characteristics about your component. For example, the following snippet is from the example Vertical Label .component files.</p>
-<pre>&lt;attributes&gt;
- &lt;attribute key=&quot;cpp-class-name&quot;&gt;CVerticalLabel&lt;/attribute&gt;
- &lt;attribute key=&quot;is-ccoecontrol-content&quot;&gt;true&lt;/attribute&gt;
-&lt;/attributes&gt;</pre>
-<p>The <span class="code">cpp-class-name</span> attribute is used by  the source generation element (&lt;sourceGen&gt;) that is inherited from CCoeControlBase. This allows you to specify the  name of the C++ class to use in the generated source. The <span class="code">is-ccoecontrol-content</span> attribute specifies that this component is compatible with the CCoeControl container. This attribute is understood by the S60 CCoeControl container component because of the specifics of how its containment query script is implemented.</p>
-<p class="note"><strong>NOTE</strong> This attribute has to be defined as &quot;true&quot; for the  component to be placed in the UI Designer palette.</p>
-<h3>Properties Element</h3>
-<p>Properties are the data values you can define for a component instance.  The text property is the default text drawn by the vertical label component. Note that it is a localized string, so you may provide different values for each language added to the application. The lineWidth property determines the thickness of the border rectangle drawn around the component. A value of zero (0) indicates  no border will be drawn. Note that default, minimum, and maximum values are specified. The <span class="code">default</span> attribute  is optional and provides an initial value. The optional <span class="code">minimum</span> and <span class="code">maximum</span> attributes provide range checking for integer properties.</p>
-<pre>&lt;properties&gt;
- &lt;property name=&quot;text&quot; type=&quot;localizedString&quot; default=&quot;label&quot;/&gt;
- &lt;property name=&quot;lineWidth&quot; type=&quot;integer&quot; default=&quot;1&quot; minValue=&quot;0&quot; maxValue=&quot;5&quot;/&gt;
-&lt;/properties&gt;</pre>
-<h3>Implementations Element</h3>
-<p>The &lt;implementations&gt; element is used in the VerticalLabel2.component example in order to render the component in the UI design. The &lt;implementations&gt; element informs the UI designer that the custom component has code. Implementations can be provided in either JavaScript or Java.</p>
-<p>Each implementation declaration has a list of one or more interfaces it fulfills. In this case the IVisualAppearance interface is implemented. This allows us to render an image corresponding to the current property values and provide feedback on the appropriate sizing for the component.  The &lt;script&gt; element informs the UI designer which file has the script and the name of the JavaScript prototype object to instantiate, as shown in the following snippet.</p>
-<pre>&lt;implementations&gt; 
- &nbsp; &lt;implementation&gt; 
- &nbsp;&nbsp;&nbsp; &lt;interface  id=&quot;com.nokia.sdt.datamodel.adapter.IVisualAppearance&quot;/&gt; 
- &nbsp;&nbsp;&nbsp;&nbsp;&lt;script file=&quot;VerticalLabel.js&quot;  prototype=&quot;VerticalLabel&quot;/&gt;
- &nbsp; &lt;/implementation&gt;
-&lt;/implementations&gt;</pre>
-<h4>JavaScript</h4>
-<p>The example JavaScript file (VerticalLabel.js) contains an empty function to instantiate the JavaScript prototype. Note that the JavaScript file needs to be located as a sibling to the component file that references it.</p>
-<pre>function VerticalLabel() {
- }</pre>
-<p>The following code in the JavaScript file declares the draw method. It takes three parameters:</p>
-<ul>
-  <li>instance &ndash; the current component instance used to retrieve property values and other state data.</li>
-  <li>laf &ndash;  the look and feel object. This has objects and values that vary with the SDK and screen configuration. See the XML documentation on ILookAndFeel for more information.</li>
-  <li>graphics &ndash; the graphics used for drawing. This is a wrapper around an SWT GC object.</li>
-</ul>
-<pre>VerticalLabel.prototype.draw  = function(instance, laf, graphics) {</pre>
-<p>The font object is obtained from the look and feel  object. Since this is a  simple example the font is hard-coded to a standard S60 font.</p>
-<pre>var font = laf.getFont(&quot;NormalFont&quot;);
- graphics.setFont(font);</pre>
-<p>The background color needs to be set since anti-aliased text with a  transparent background is drawn. In the UI Designer, each component is rendered into a bitmap with 'transparent pixel' support.  The bitmap does not have an alpha channel.  Thus, if the background color is not set, the 'transparent pixel' would be blended with the antialiased text, resulting in an orange border.</p>
-<pre>graphics.setBackground(laf.getColor(&quot;EEikColorControlBackground&quot;));</pre>
-<p>Next a rectangular border and the text within the border is drawn. The bounds and position of the text are calculated accordingly.</p>
-<pre> var properties = instance.properties;
- var lineWidth = properties.lineWidth;
- var halfLineWidth = lineWidth/2;
- var textBounds = new Rectangle(halfLineWidth, halfLineWidth, 
- properties.size.width - halfLineWidth, 
- properties.size.height - halfLineWidth);
- var x = lineWidth + 1;
- var y = properties.size.height - lineWidth - 1;</pre>
-<p>The rotated text is then drawn.</p>
-<pre>graphics.drawRotatedString(properties.text, textBounds, x, y, -1.57, true);</pre>
-<p>If requested, the border is drawn.</p>
-<pre>if (lineWidth &gt; 0) {
- graphics.setLineWidth(lineWidth);
- x = y = halfLineWidth;
- 
- graphics.drawRectangle(x, y, 
- properties.size.width-lineWidth, 
- properties.size.height-lineWidth);
- }</pre>
-<p>The getPreferredSize method is called to  calculate the initial size of the component instance. The wHint and hHint parameters will  be greater than zero when the user has dragged out a rectangle to specify the  initial component size. That should be respected, unless that size is inappropriate for your component. The example script respects the requested size and  specifies defaults, if necessary.</p>
-<pre>VerticalLabel.prototype.getPreferredSize = function(instance, laf, wHint, hHint) {
- var width = wHint &gt; 0? wHint : 20;
- var height = hHint &gt; 0? hHint : 100;
- return new Point(width, height);
- }</pre>
-<h3>Source Mapping Element</h3>
-<p>The Vertical Label component uses an RSS include file (example_verticallabel.rh). This file defines a custom resource used to initialize the component. Since our component uses a localized string it is especially important to use a resource. The &lt;sourceMapping&gt; element contains information on how to convert from property values to RSS statements, and from RSS statements back to property values.</p>
-<p>The &lt;mapResource&gt; element tells the RSS generator to create a resource of type <span class="code">EXAMPLE_VERTICAL_LABEL</span>, and that the <span class="code">example_verticallabel.rh</span> file is needed to create compilable source code. The RSS generator has flexible support for mapping properties to resources. Only simple conversions are needed, which can be done with the &lt;mapSimpleMember&gt; element. This has attributes that indicate a given property should be used to initialize a specific resource member. Refer to the &quot;source mapping&quot; XML schema documentation for details on all available mappings. Detailed documentation on the schema can be  found in the plugins folder of your Carbide.c++ installation, for example, the default location at C:\Program Files\Nokia\Carbide.c++ v1.3\plugins\com.nokia.sdt.component.symbian_1.3.0.3. Also examine the S60 components included with the UI designer for lots of examples; located at &lt;<em>Carbide installation path</em>&gt;/plugins/com.nokia.sdt.series60.componentlibrary/components.</p>
-<pre>&lt;sourceMapping&gt;
- &lt;mapResource struct=&quot;EXAMPLE_VERTICAL_LABEL&quot; headers=&quot;example_verticallabel.rh&quot;&gt;
- &lt;mapSimpleMember property=&quot;text&quot; member=&quot;txt&quot;/&gt;
- &lt;mapSimpleMember property=&quot;lineWidth&quot; member=&quot;line_size&quot;/&gt;
- &lt;/mapResource&gt;
-&lt;/sourceMapping&gt;</pre>
-<h3>Source  Generation Element
-</h3>
-<p>The &lt;sourceGen&gt; element contains all the information needed to generate C++ code. Because this example is deriving from CCoeControlBase and generating code for an existing container (CCoeControl), there is a lot of existing infrastructure to leverage. Source code generation is performed by executing JavaScript scripts. There is a layer above raw JavaScript that creates scripts by way of template expansion, like with PHP, JPS, ASP, etc. With templates you can define variables, or escape out to arbitrary script code. The following code snippet is from the Vertical Label .component files.</p>
-<pre>&lt;sourceGen forms=&quot;Container&quot;&gt;<br />
-  &lt;useTemplateGroup ids=&quot;CLASS_CONTRIBS&quot; /&gt;
-  &lt;useTemplate ids=&quot;INIT_FROM_CONTAINER&quot; /&gt;
-  &lt;useTemplateGroup ids=&quot;CONTAINER_CHILD_CONTRIBS&quot; /&gt;
-  &lt;useTemplate ids=&quot;LAYOUT_CONTROLS&quot; /&gt;
-  &lt;inline&gt;
-    if (Engine.formMatches(form, [&quot;&quot;])) {
-     // create files if missing
-     Engine.createFromStockFile(&quot;inc&quot;, &quot;VerticalLabel.h&quot;, &quot;VerticalLabel.h&quot;);
-     Engine.createFromStockFile(&quot;src&quot;, &quot;VerticalLabel.cpp&quot;, &quot;VerticalLabel.cpp&quot;);
-    }
-    this.getCppSystemIncludes(contribs, [&quot;barsread.h&quot;, &quot;stringloader.h&quot;, &quot;eikenv.h&quot;]);
-  &lt;/inline&gt;
-  &lt;useTemplateGroup ids=&quot;GenerateCommonControlEvents GenerateStateChangedEvent&quot;/&gt;
-  &lt;useTemplateGroup ids=&quot;GenerateRequestingFocusEvent GenerateRequestingExitEvent&quot;/&gt;
-  &lt;useTemplateGroup ids=&quot;GenerateRequestingCancelEvent GenerateInteractionRefusedEvent&quot;/&gt;
-  &lt;useTemplateGroup ids=&quot;GeneratePrepareFocusTransitionEvent&quot;/&gt;
-  <br />
-  &lt;template location=&quot;MAIN_USER_INCLUDES&quot;&gt;&lt;![CDATA[#include &quot;VerticalLabel.h&quot;]]&gt;
-  &lt;/template&gt;
-&lt;/sourceGen&gt;</pre>
-<p>Since source code generation is very detailed  and specific, deriving from a component does not automatically enable source code generation. The derived component must specify what to generate, either completely  or by referencing existing templates. Templates defined in CCoeControlBase can be reused.</p>
-<p>A template group is a set of templates referenced by a  single name. The <span class="code">CLASS_CONTRIBS</span> group is the common boilerplate for defining a  member variable in the class; initializing the member and deallocating the  member.</p>
-<p>The <span class="code">INIT_FROM_CONTAINER</span> template emits the standard Symbian  code for allocating the component within a CCoeControl container. This includes  allocating the object, reading the state from a resource, and managing the  cleanup stack.</p>
-<p>The  <span class="code">LAYOUT_CONTROLS</span> template generates source to size and position the component  according to the properties set in the UI designer.</p>
-<p>The &lt;inline&gt; element inserts  JavaScript code. This example calls a predefined function to emit the  header files needed to use this component.</p>
-<p>The additional &lt;useTemplateGroup&gt; elements (after the inline element) references existing templates  in order to support events. Since the VerticalLabel example is a subclass of  CCoeControl you want to support all the events in a  CCoeControl container. Since the example inherits from CCoeControlBase, the appropriate event declarations and templates have already been   inherited.</p>
-<p>The final &lt;template&gt; element in this snippet is used to define a new template in order to insert the  <span class="code">#include &quot;VerticalLabel.h&quot;</span> statement for the class header file.</p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>XML-Based Component File</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - XML Details</h2>
+<p>The tutorial consists of two versions of the VerticalLabel  component. VerticalLabel1 is the bare minimum needed to make a  functioning component. VerticalLabel2 uses JavaScript to display the component in the UI Designer when designing your user interface.</p>
+The  following information explains what is relevant to the tutorial. Refer to the XML component schema documentation for all the details.
+<h3>Component Definition</h3>
+<p>The root element for defining a custom component begins with the &lt;componentDefinition&gt; element as shown in the VerticalLabel1.component and VerticalLabel2.component files. It contains the necessary name space attributes,  making the component schema namespace the default.</p>
+<h3>Component</h3>
+<p>The component element defines the majority of the component properties, attributes, source mapping and souce generation declarations. The following snippet is from the example .component files:</p>
+<pre>&lt;component friendlyName=&quot;%friendlyName&quot; 
+   &nbsp;&nbsp;&nbsp;  qualifiedName=&quot;com.example.VerticalLabel1&quot;
+   &nbsp;&nbsp;&nbsp;  baseComponent=&quot;com.nokia.sdt.series60.CCoeControlBase&quot;
+   &nbsp;&nbsp;&nbsp;  category=&quot;Controls&quot; version=&quot;1.0&quot;
+   &nbsp;&nbsp;&nbsp;  instanceNameRoot=&quot;vlabel&quot;&gt;
+   &nbsp;&nbsp;&nbsp;  &lt;symbian 
+   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  sdkName=&quot;com.nokia.series60&quot; minSDKVersion=&quot;2.0&quot;
+   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
+<p>Strings prefixed with % are localized strings that are  automatically looked up in the accompanying properties files, such as VerticalLabel1.properties.</p>
+<p>Note  that this component derives from CCoeControlBase, which is a component included  with Carbide.c++. It provides much of the default behavior, including needed source code  generation.</p>
+<h3>Symbian Element</h3>
+<p>The &lt;symbian&gt; element specifies that this component is compatible with all  SDKs from 2.0 forward and the class name in the VerticalLabel.cpp file used to draw the component at run time is CVerticalLabel.</p>
+<pre>&lt;symbian sdkName=&quot;com.nokia.series60&quot; minSDKVersion=&quot;2.0&quot;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
+<p>The sdkName property identifies the Symbian OS variant with which the component is compatible. Currently the only recognized SDK name for S60 is &quot;com.nokia.series60&quot;.</p>
+<p class="note"><strong>TIP</strong> Enter <strong>devices</strong> at a command prompt (C:\&gt;devices) to display a list of installed and properly configured SDKs.</p>
+<h3>Designer Images</h3>
+<p>In the VerticalLabel1 example, the &lt;designerImages&gt; element uses one image. This is the static layout image visible in the UI design. This is used in place of writing rendering script in a JavaScript file. You will only see a static graphic in the UI designer. Since icon images have also been omitted, a default image is displayed in the palette and no image is visible in  the outline view. For example:</p>
+<pre>&lt;designerImages layoutImageFile=&quot;layoutImage.png&quot;/&gt;</pre>
+<p>In the VerticalLabel2 example, the &lt;designerImages&gt; element uses custom icon images (.png files) to represent the component in the palette and outline views. The static layout image file can be removed since JavaScript rendering code has been added to display the component in the UI design. For example:</p>
+<pre>&lt;designerImages smallIconFile=&quot;VerticalLabel_sm.png&quot; 
+ largeIconFile=&quot;VerticalLabel.png&quot;/&gt;</pre>
+<h4>Image Support</h4>
+<p>Images are validated and rendered on a per-component basis.  Each component may have different restrictions or guidelines for the type or size of images that appear. Images appearing in forms and lists will be automatically scaled by the platform. This requires a reference to another interface the component system understands (IImagePropertyRenderingInfo); and can be declared as shown in the following code fragment.</p>
+<pre>&lt;implementations&gt;
+ &lt;implementation&gt;
+  &lt;interface id=&quot;com.nokia.sdt.datamodel.adapter.IImagePropertyRenderingInfo&quot;/&gt;
+  &lt;script file=&quot;MyComponent.js&quot; prototype=&quot;MyComponent&quot;/&gt;
+ &lt;/implementation&gt;
+&lt;/implementations&gt;</pre>
+<h3>Attributes Element</h3>
+<p>The Attributes element allows you to declare miscellaneous characteristics about your component. For example, the following snippet is from the example Vertical Label .component files.</p>
+<pre>&lt;attributes&gt;
+ &lt;attribute key=&quot;cpp-class-name&quot;&gt;CVerticalLabel&lt;/attribute&gt;
+ &lt;attribute key=&quot;is-ccoecontrol-content&quot;&gt;true&lt;/attribute&gt;
+&lt;/attributes&gt;</pre>
+<p>The <span class="code">cpp-class-name</span> attribute is used by  the source generation element (&lt;sourceGen&gt;) that is inherited from CCoeControlBase. This allows you to specify the  name of the C++ class to use in the generated source. The <span class="code">is-ccoecontrol-content</span> attribute specifies that this component is compatible with the CCoeControl container. This attribute is understood by the S60 CCoeControl container component because of the specifics of how its containment query script is implemented.</p>
+<p class="note"><strong>NOTE</strong> This attribute has to be defined as &quot;true&quot; for the  component to be placed in the UI Designer palette.</p>
+<h3>Properties Element</h3>
+<p>Properties are the data values you can define for a component instance.  The text property is the default text drawn by the vertical label component. Note that it is a localized string, so you may provide different values for each language added to the application. The lineWidth property determines the thickness of the border rectangle drawn around the component. A value of zero (0) indicates  no border will be drawn. Note that default, minimum, and maximum values are specified. The <span class="code">default</span> attribute  is optional and provides an initial value. The optional <span class="code">minimum</span> and <span class="code">maximum</span> attributes provide range checking for integer properties.</p>
+<pre>&lt;properties&gt;
+ &lt;property name=&quot;text&quot; type=&quot;localizedString&quot; default=&quot;label&quot;/&gt;
+ &lt;property name=&quot;lineWidth&quot; type=&quot;integer&quot; default=&quot;1&quot; minValue=&quot;0&quot; maxValue=&quot;5&quot;/&gt;
+&lt;/properties&gt;</pre>
+<h3>Implementations Element</h3>
+<p>The &lt;implementations&gt; element is used in the VerticalLabel2.component example in order to render the component in the UI design. The &lt;implementations&gt; element informs the UI designer that the custom component has code. Implementations can be provided in either JavaScript or Java.</p>
+<p>Each implementation declaration has a list of one or more interfaces it fulfills. In this case the IVisualAppearance interface is implemented. This allows us to render an image corresponding to the current property values and provide feedback on the appropriate sizing for the component.  The &lt;script&gt; element informs the UI designer which file has the script and the name of the JavaScript prototype object to instantiate, as shown in the following snippet.</p>
+<pre>&lt;implementations&gt; 
+ &nbsp; &lt;implementation&gt; 
+ &nbsp;&nbsp;&nbsp; &lt;interface  id=&quot;com.nokia.sdt.datamodel.adapter.IVisualAppearance&quot;/&gt; 
+ &nbsp;&nbsp;&nbsp;&nbsp;&lt;script file=&quot;VerticalLabel.js&quot;  prototype=&quot;VerticalLabel&quot;/&gt;
+ &nbsp; &lt;/implementation&gt;
+&lt;/implementations&gt;</pre>
+<h4>JavaScript</h4>
+<p>The example JavaScript file (VerticalLabel.js) contains an empty function to instantiate the JavaScript prototype. Note that the JavaScript file needs to be located as a sibling to the component file that references it.</p>
+<pre>function VerticalLabel() {
+ }</pre>
+<p>The following code in the JavaScript file declares the draw method. It takes three parameters:</p>
+<ul>
+  <li>instance &ndash; the current component instance used to retrieve property values and other state data.</li>
+  <li>laf &ndash;  the look and feel object. This has objects and values that vary with the SDK and screen configuration. See the XML documentation on ILookAndFeel for more information.</li>
+  <li>graphics &ndash; the graphics used for drawing. This is a wrapper around an SWT GC object.</li>
+</ul>
+<pre>VerticalLabel.prototype.draw  = function(instance, laf, graphics) {</pre>
+<p>The font object is obtained from the look and feel  object. Since this is a  simple example the font is hard-coded to a standard S60 font.</p>
+<pre>var font = laf.getFont(&quot;NormalFont&quot;);
+ graphics.setFont(font);</pre>
+<p>The background color needs to be set since anti-aliased text with a  transparent background is drawn. In the UI Designer, each component is rendered into a bitmap with 'transparent pixel' support.  The bitmap does not have an alpha channel.  Thus, if the background color is not set, the 'transparent pixel' would be blended with the antialiased text, resulting in an orange border.</p>
+<pre>graphics.setBackground(laf.getColor(&quot;EEikColorControlBackground&quot;));</pre>
+<p>Next a rectangular border and the text within the border is drawn. The bounds and position of the text are calculated accordingly.</p>
+<pre> var properties = instance.properties;
+ var lineWidth = properties.lineWidth;
+ var halfLineWidth = lineWidth/2;
+ var textBounds = new Rectangle(halfLineWidth, halfLineWidth, 
+ properties.size.width - halfLineWidth, 
+ properties.size.height - halfLineWidth);
+ var x = lineWidth + 1;
+ var y = properties.size.height - lineWidth - 1;</pre>
+<p>The rotated text is then drawn.</p>
+<pre>graphics.drawRotatedString(properties.text, textBounds, x, y, -1.57, true);</pre>
+<p>If requested, the border is drawn.</p>
+<pre>if (lineWidth &gt; 0) {
+ graphics.setLineWidth(lineWidth);
+ x = y = halfLineWidth;
+ 
+ graphics.drawRectangle(x, y, 
+ properties.size.width-lineWidth, 
+ properties.size.height-lineWidth);
+ }</pre>
+<p>The getPreferredSize method is called to  calculate the initial size of the component instance. The wHint and hHint parameters will  be greater than zero when the user has dragged out a rectangle to specify the  initial component size. That should be respected, unless that size is inappropriate for your component. The example script respects the requested size and  specifies defaults, if necessary.</p>
+<pre>VerticalLabel.prototype.getPreferredSize = function(instance, laf, wHint, hHint) {
+ var width = wHint &gt; 0? wHint : 20;
+ var height = hHint &gt; 0? hHint : 100;
+ return new Point(width, height);
+ }</pre>
+<h3>Source Mapping Element</h3>
+<p>The Vertical Label component uses an RSS include file (example_verticallabel.rh). This file defines a custom resource used to initialize the component. Since our component uses a localized string it is especially important to use a resource. The &lt;sourceMapping&gt; element contains information on how to convert from property values to RSS statements, and from RSS statements back to property values.</p>
+<p>The &lt;mapResource&gt; element tells the RSS generator to create a resource of type <span class="code">EXAMPLE_VERTICAL_LABEL</span>, and that the <span class="code">example_verticallabel.rh</span> file is needed to create compilable source code. The RSS generator has flexible support for mapping properties to resources. Only simple conversions are needed, which can be done with the &lt;mapSimpleMember&gt; element. This has attributes that indicate a given property should be used to initialize a specific resource member. Refer to the &quot;source mapping&quot; XML schema documentation for details on all available mappings. Detailed documentation on the schema can be  found in the plugins folder of your Carbide.c++ installation, for example, the default location at C:\Program Files\Nokia\Carbide.c++ v1.3\plugins\com.nokia.sdt.component.symbian_1.3.0.3. Also examine the S60 components included with the UI designer for lots of examples; located at &lt;<em>Carbide installation path</em>&gt;/plugins/com.nokia.sdt.series60.componentlibrary/components.</p>
+<pre>&lt;sourceMapping&gt;
+ &lt;mapResource struct=&quot;EXAMPLE_VERTICAL_LABEL&quot; headers=&quot;example_verticallabel.rh&quot;&gt;
+ &lt;mapSimpleMember property=&quot;text&quot; member=&quot;txt&quot;/&gt;
+ &lt;mapSimpleMember property=&quot;lineWidth&quot; member=&quot;line_size&quot;/&gt;
+ &lt;/mapResource&gt;
+&lt;/sourceMapping&gt;</pre>
+<h3>Source  Generation Element
+</h3>
+<p>The &lt;sourceGen&gt; element contains all the information needed to generate C++ code. Because this example is deriving from CCoeControlBase and generating code for an existing container (CCoeControl), there is a lot of existing infrastructure to leverage. Source code generation is performed by executing JavaScript scripts. There is a layer above raw JavaScript that creates scripts by way of template expansion, like with PHP, JPS, ASP, etc. With templates you can define variables, or escape out to arbitrary script code. The following code snippet is from the Vertical Label .component files.</p>
+<pre>&lt;sourceGen forms=&quot;Container&quot;&gt;<br />
+  &lt;useTemplateGroup ids=&quot;CLASS_CONTRIBS&quot; /&gt;
+  &lt;useTemplate ids=&quot;INIT_FROM_CONTAINER&quot; /&gt;
+  &lt;useTemplateGroup ids=&quot;CONTAINER_CHILD_CONTRIBS&quot; /&gt;
+  &lt;useTemplate ids=&quot;LAYOUT_CONTROLS&quot; /&gt;
+  &lt;inline&gt;
+    if (Engine.formMatches(form, [&quot;&quot;])) {
+     // create files if missing
+     Engine.createFromStockFile(&quot;inc&quot;, &quot;VerticalLabel.h&quot;, &quot;VerticalLabel.h&quot;);
+     Engine.createFromStockFile(&quot;src&quot;, &quot;VerticalLabel.cpp&quot;, &quot;VerticalLabel.cpp&quot;);
+    }
+    this.getCppSystemIncludes(contribs, [&quot;barsread.h&quot;, &quot;stringloader.h&quot;, &quot;eikenv.h&quot;]);
+  &lt;/inline&gt;
+  &lt;useTemplateGroup ids=&quot;GenerateCommonControlEvents GenerateStateChangedEvent&quot;/&gt;
+  &lt;useTemplateGroup ids=&quot;GenerateRequestingFocusEvent GenerateRequestingExitEvent&quot;/&gt;
+  &lt;useTemplateGroup ids=&quot;GenerateRequestingCancelEvent GenerateInteractionRefusedEvent&quot;/&gt;
+  &lt;useTemplateGroup ids=&quot;GeneratePrepareFocusTransitionEvent&quot;/&gt;
+  <br />
+  &lt;template location=&quot;MAIN_USER_INCLUDES&quot;&gt;&lt;![CDATA[#include &quot;VerticalLabel.h&quot;]]&gt;
+  &lt;/template&gt;
+&lt;/sourceGen&gt;</pre>
+<p>Since source code generation is very detailed  and specific, deriving from a component does not automatically enable source code generation. The derived component must specify what to generate, either completely  or by referencing existing templates. Templates defined in CCoeControlBase can be reused.</p>
+<p>A template group is a set of templates referenced by a  single name. The <span class="code">CLASS_CONTRIBS</span> group is the common boilerplate for defining a  member variable in the class; initializing the member and deallocating the  member.</p>
+<p>The <span class="code">INIT_FROM_CONTAINER</span> template emits the standard Symbian  code for allocating the component within a CCoeControl container. This includes  allocating the object, reading the state from a resource, and managing the  cleanup stack.</p>
+<p>The  <span class="code">LAYOUT_CONTROLS</span> template generates source to size and position the component  according to the properties set in the UI designer.</p>
+<p>The &lt;inline&gt; element inserts  JavaScript code. This example calls a predefined function to emit the  header files needed to use this component.</p>
+<p>The additional &lt;useTemplateGroup&gt; elements (after the inline element) references existing templates  in order to support events. Since the VerticalLabel example is a subclass of  CCoeControl you want to support all the events in a  CCoeControl container. Since the example inherits from CCoeControlBase, the appropriate event declarations and templates have already been   inherited.</p>
+<p>The final &lt;template&gt; element in this snippet is used to define a new template in order to insert the  <span class="code">#include &quot;VerticalLabel.h&quot;</span> statement for the class header file.</p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,30 +1,30 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Tutorial: Vertical Label Component</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-<style type="text/css">
-<!--
-.style1 {font-size: 12px}
--->
-</style>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component</h2>
-<p>This tutorial explains how to take an example custom component called VerticalLabel and use it in an UIQ UI Designer project. The Vertical Label is an example of a custom visual control component. It is similar to the standard Label component, but draws the label text vertically. The tutorial consists of two versions of the  Vertical Label component. VerticalLabel1 is the bare minimum needed  to make a functioning component. VerticalLabel2 adds JavaScript to render the component when used within a design in the UI Designer.</p>
-<p>Information is provided that explains  how to add the component to the UI Designer Palette followed by an examination of how the component was created. This tutorial explains what is relevant to the  example.  Please refer to the component XML schema  documentation for all the XML element details. Detailed documentation on the schema can be  found in the reference section under <a href="../../../reference/component.xsd doc/index.html">Component XSD Description</a>.</p>
-<p> The example files for the Vertical Label tutorials are provided in a zip file in the s60 components plugin located at: <span class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</span>, where <i>version</i> is the current version of UI Designer. Refer to the example files while reading this tutorial.</p>
-<p>The goal of this tutorial focuses on the following steps:</p>
-<ul>
-  <li>Step 1: <a href="verticallabel_tutorial_01.htm">Create Project for Example Component Files</a></li>
-  <li>Step 2: <a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></li>
-  <li>Step 3: <a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></li>
-  <li>Step 4: <a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></li>
-  <li>Step 5: <a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></li>
-</ul>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Tutorial: Vertical Label Component</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+<style type="text/css">
+<!--
+.style1 {font-size: 12px}
+-->
+</style>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component</h2>
+<p>This tutorial explains how to take an example custom component called VerticalLabel and use it in an UIQ UI Designer project. The Vertical Label is an example of a custom visual control component. It is similar to the standard Label component, but draws the label text vertically. The tutorial consists of two versions of the  Vertical Label component. VerticalLabel1 is the bare minimum needed  to make a functioning component. VerticalLabel2 adds JavaScript to render the component when used within a design in the UI Designer.</p>
+<p>Information is provided that explains  how to add the component to the UI Designer Palette followed by an examination of how the component was created. This tutorial explains what is relevant to the  example.  Please refer to the component XML schema  documentation for all the XML element details. Detailed documentation on the schema can be  found in the reference section under <a href="../../../reference/component.xsd doc/index.html">Component XSD Description</a>.</p>
+<p> The example files for the Vertical Label tutorials are provided in a zip file in the s60 components plugin located at: <span class="code">{Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_<i>version</i>\templates\tutorials\example_components\example_components.zip</span>, where <i>version</i> is the current version of UI Designer. Refer to the example files while reading this tutorial.</p>
+<p>The goal of this tutorial focuses on the following steps:</p>
+<ul>
+  <li>Step 1: <a href="verticallabel_tutorial_01.htm">Create Project for Example Component Files</a></li>
+  <li>Step 2: <a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></li>
+  <li>Step 3: <a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></li>
+  <li>Step 4: <a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></li>
+  <li>Step 5: <a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></li>
+</ul>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_01.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_01.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,39 +1,39 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Create Project for Example Component Files</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Create Project for Example Component Files</h2>
-<p>First create a General Project:</p>
-<ol>
-  <li>Select <strong>File &gt; New &gt; Project</strong>...</li>
-  <li>Select Project in the General folder.</li>
-  <li>Click Next and continue with wizard setup by specifying a project name, workspace location, and referenced projects (if applicable).</li>
-  <li>On last page of wizard click Finish to create the simple project.</li>
-  </ol>
-<p>The project will appear in the Project Explorer view. Select the project and right-click to display the context menu. Select <strong>Show in Explorer</strong> from the list of menu options. Grab the example zip file from {Carbide_Installation_Dir}\plugins\com.nokia.carbide.cpp.uiq.components_1.3.0.x\templates\tutorials\example_components\example_components.zip and unzip the Vertical Label example files into your new simple project folder. The files include:</p>
-<ul><li>example_verticallabel.hrh</li>
-  <li>example_verticallabel.rh</li>
-  <li>layoutImage.png</li>
-  <li>VerticalLabel_layout.png</li>
-  <li>VerticalLabel_sm.png</li>
-  <li>VerticalLabel.cpp</li>
-  <li>VerticalLabel.h</li>
-  <li>VerticalLabel.js</li>
-  <li>VerticalLabel.png</li>
-  <li>VerticalLabel1.component</li>
-  <li>VerticalLabel1.properties</li>
-  <li>VerticalLabel2.component</li>
-  <li>VerticalLabel2.properties</li>
-</ul>
-<p>The difference between the VerticalLabel1 and VerticalLabel2 example is that the VerticalLabel2 example uses the implementations element to implement the IVisualAppearance class and call a JavaScript file to render the vertical label component and make it visible within the UI Designer. Code within the JavaScript file sets the background, font, size, draws the rectangle, and defines other related properties.</p>
-<h5>Step 2 of 5</h5>
-<p><a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Create Project for Example Component Files</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Create Project for Example Component Files</h2>
+<p>First create a General Project:</p>
+<ol>
+  <li>Select <strong>File &gt; New &gt; Project</strong>...</li>
+  <li>Select Project in the General folder.</li>
+  <li>Click Next and continue with wizard setup by specifying a project name, workspace location, and referenced projects (if applicable).</li>
+  <li>On last page of wizard click Finish to create the simple project.</li>
+  </ol>
+<p>The project will appear in the Project Explorer view. Select the project and right-click to display the context menu. Select <strong>Show in Explorer</strong> from the list of menu options. Grab the example zip file from {Carbide_Installation_Dir}\plugins\com.nokia.carbide.cpp.uiq.components_1.3.0.x\templates\tutorials\example_components\example_components.zip and unzip the Vertical Label example files into your new simple project folder. The files include:</p>
+<ul><li>example_verticallabel.hrh</li>
+  <li>example_verticallabel.rh</li>
+  <li>layoutImage.png</li>
+  <li>VerticalLabel_layout.png</li>
+  <li>VerticalLabel_sm.png</li>
+  <li>VerticalLabel.cpp</li>
+  <li>VerticalLabel.h</li>
+  <li>VerticalLabel.js</li>
+  <li>VerticalLabel.png</li>
+  <li>VerticalLabel1.component</li>
+  <li>VerticalLabel1.properties</li>
+  <li>VerticalLabel2.component</li>
+  <li>VerticalLabel2.properties</li>
+</ul>
+<p>The difference between the VerticalLabel1 and VerticalLabel2 example is that the VerticalLabel2 example uses the implementations element to implement the IVisualAppearance class and call a JavaScript file to render the vertical label component and make it visible within the UI Designer. Code within the JavaScript file sets the background, font, size, draws the rectangle, and defines other related properties.</p>
+<h5>Step 2 of 5</h5>
+<p><a href="verticallabel_tutorial_02.htm">Enable Components Menu</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_02.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_02.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,38 +1,38 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Enable Components Menu</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Enable Components Menu</h2>
-<p>If not visible in the main menu bar, enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
-<p align="center"><img src="images/comp_menu.png" alt="Component menu" width="428" height="93" /></p>
-<p align="center"><strong>Figure 1. Components Menu</strong></p>
-<p align="left">&nbsp;</p>
-<table width="541" border="1" align="center">
-  <tr>
-    <td width="184">Force Save</td>
-    <td width="341">Forces a save on one or more open design editors.</td>
-  </tr>
-  <tr>
-    <td>Refresh Components</td>
-    <td>Reloads all components and refreshes open editors.</td>
-  </tr>
-  <tr>
-    <td>Select Custom Component Projects...</td>
-    <td>Selects which projects are searched for custom components.</td>
-  </tr>
-  <tr>
-    <td>Configure SourceGen Debugging...</td>
-    <td>Controls dumping of generated JavaScript for source generation. UI Designer will write the generated script for the selected components' &lt;sourceGen&gt; elements to disk, in addition to any elements with the debug=&quot;true&quot; attribute.</td>
-  </tr>
-</table>
-<h5>Step 3 of 5</h5>
-<p><a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Enable Components Menu</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Enable Components Menu</h2>
+<p>If not visible in the main menu bar, enable the Components menu. Select <strong>Window &gt; Customize Perspective...</strong> and select the Commands tab. In the list of Available command groups, check <strong>Carbide.c++ UI Designer Components</strong> and click OK to close the dialog box. The Components menu will appear between the Project and Run menus.</p>
+<p align="center"><img src="images/comp_menu.png" alt="Component menu" width="428" height="93" /></p>
+<p align="center"><strong>Figure 1. Components Menu</strong></p>
+<p align="left">&nbsp;</p>
+<table width="541" border="1" align="center">
+  <tr>
+    <td width="184">Force Save</td>
+    <td width="341">Forces a save on one or more open design editors.</td>
+  </tr>
+  <tr>
+    <td>Refresh Components</td>
+    <td>Reloads all components and refreshes open editors.</td>
+  </tr>
+  <tr>
+    <td>Select Custom Component Projects...</td>
+    <td>Selects which projects are searched for custom components.</td>
+  </tr>
+  <tr>
+    <td>Configure SourceGen Debugging...</td>
+    <td>Controls dumping of generated JavaScript for source generation. UI Designer will write the generated script for the selected components' &lt;sourceGen&gt; elements to disk, in addition to any elements with the debug=&quot;true&quot; attribute.</td>
+  </tr>
+</table>
+<h5>Step 3 of 5</h5>
+<p><a href="verticallabel_tutorial_03.htm">Add Custom Component to UI Designer</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_03.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_03.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,19 +1,19 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Add Custom Component to UI Designer</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Add Custom Component to UI Designer</h2>
-<p>To add a custom component to the UI Designer, select <strong>Components &gt; Select Custom Component Projects...</strong> and check custom component projects. UI Designer will search selected projects for custom components. The components will appear in the UI Designer palette.</p>
-<p align="center"><img src="images/comp_palette.png" alt="custom components" width="186" height="344"></p>
-<p align="center"><strong>Figure 1. UI Designer Component Palette</strong></p>
-<h5>Step 4 of 5</h5>
-<p><a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Add Custom Component to UI Designer</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Add Custom Component to UI Designer</h2>
+<p>To add a custom component to the UI Designer, select <strong>Components &gt; Select Custom Component Projects...</strong> and check custom component projects. UI Designer will search selected projects for custom components. The components will appear in the UI Designer palette.</p>
+<p align="center"><img src="images/comp_palette.png" alt="custom components" width="186" height="344"></p>
+<p align="center"><strong>Figure 1. UI Designer Component Palette</strong></p>
+<h5>Step 4 of 5</h5>
+<p><a href="verticallabel_tutorial_04.htm">Create UI Designer Project to Test Custom Component</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_04.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_04.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,30 +1,30 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>Create UI Designer Project to Test Custom Component</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - Create UI Designer Project to Test Custom Component</h2>
-<p>Create a UIQ UI Designer project to test the VerticalLabel component. For example, select <strong>File &gt; New &gt; Symbian OS C++ Project</strong> and choose the &quot;3.x GUI Application with UI Designer&quot; template. Complete the wizard by filling in required fields and selecting appropriate options on each page of the project creation wizard.</p>
-<p>Complete the last two pages of the wizard (Basic Settings and Project Directories) or click Finish at the UIQ UI Design Properties page to accept the default settings. The project will appear in the Project Explorer view. The graphical representation of the selected view (.uidesign file) will appear in the Carbide.c++ UI Design editor.</p>
-<p>Select either the Vertical Label 1 or Vertical Label 2 component in the palette's Custom Controls group. Then click inside the empty UI design to place the new component inside the design.</p>
-<p align="center"><img src="images/comp_palette_custom.png" alt="custom component" width="650" height="432"></p>
-<p align="center"><strong>Figure 1. Custom Component Placed in UI Design</strong></p>
-<p align="left" class="note"><strong>NOTE</strong> The example_verticallabel.rh and example_verticallabel.hrh files must be made accessible to the UI Designer as system includes.</p>
-<p align="left">One way would be to copy these files into an existing  &quot;System includes&quot; directory, such as the UIQ SDK's epoc32\include directory. Alternately, you could copy them into  a &quot;User includes&quot; directory in your project (for example, inc) and add the directory as a system included directory in the MMP file.</p>
-<p align="left">To add a directory, double-click on the .mmp file in your project (in group folder by default) to open the MMP editor. Click the Options tab and select the System includes  folder  in the Compiler Settings group. Click Add to browse to and add the directory containing your .rh and .hrh files. You can also click the &quot;Add a system include path&quot; link in the Overview page.</p>
-<p align="left" class="note"><strong>NOTE</strong> In your source files the &lt;&gt; brackets denote a system include path, where quotes (&quot; &quot;) indicate a user include.</p>
-<p align="center"><img src="../verticallabel_s60/images/include_dir.png" alt="compiler settings" width="298" height="302"></p>
-<p align="center" class="figure">Figure 2 - Compiler Settings Group in MMP Editor</p>
-<p align="left">After placing the custom component into the UI design and saving the file, the example VerticalLabel.cpp file will be placed into the source folder (default is src) of your UI Designer project. The VerticalLabel.cpp file is used to draw the VerticalLabel component on your handheld device or in the emulator at runtime. For the VerticalLabel2 example, the associated JavaScript file is used to draw the custom component only at design time in the UI design. Therefore, if you design a visual component and wish to display your custom component in the UI Designer, then you must supply a JavaScript file that implements some predefined interfaces.</p>
-<p align="left">You can save all files and build and run your UI Designer project in the emulator to view the component as part of the application.</p>
-<p align="left">Remember to refresh your project (F5), refresh components (Components &gt; Refresh Components),  clean your project, or perform a Components &gt; Force Save; as needed.</p>
-<h5 align="left">Step 5 of 5</h5>
-<p align="left"><a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>Create UI Designer Project to Test Custom Component</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - Create UI Designer Project to Test Custom Component</h2>
+<p>Create a UIQ UI Designer project to test the VerticalLabel component. For example, select <strong>File &gt; New &gt; Symbian OS C++ Project</strong> and choose the &quot;3.x GUI Application with UI Designer&quot; template. Complete the wizard by filling in required fields and selecting appropriate options on each page of the project creation wizard.</p>
+<p>Complete the last two pages of the wizard (Basic Settings and Project Directories) or click Finish at the UIQ UI Design Properties page to accept the default settings. The project will appear in the Project Explorer view. The graphical representation of the selected view (.uidesign file) will appear in the Carbide.c++ UI Design editor.</p>
+<p>Select either the Vertical Label 1 or Vertical Label 2 component in the palette's Custom Controls group. Then click inside the empty UI design to place the new component inside the design.</p>
+<p align="center"><img src="images/comp_palette_custom.png" alt="custom component" width="650" height="432"></p>
+<p align="center"><strong>Figure 1. Custom Component Placed in UI Design</strong></p>
+<p align="left" class="note"><strong>NOTE</strong> The example_verticallabel.rh and example_verticallabel.hrh files must be made accessible to the UI Designer as system includes.</p>
+<p align="left">One way would be to copy these files into an existing  &quot;System includes&quot; directory, such as the UIQ SDK's epoc32\include directory. Alternately, you could copy them into  a &quot;User includes&quot; directory in your project (for example, inc) and add the directory as a system included directory in the MMP file.</p>
+<p align="left">To add a directory, double-click on the .mmp file in your project (in group folder by default) to open the MMP editor. Click the Options tab and select the System includes  folder  in the Compiler Settings group. Click Add to browse to and add the directory containing your .rh and .hrh files. You can also click the &quot;Add a system include path&quot; link in the Overview page.</p>
+<p align="left" class="note"><strong>NOTE</strong> In your source files the &lt;&gt; brackets denote a system include path, where quotes (&quot; &quot;) indicate a user include.</p>
+<p align="center"><img src="../verticallabel_s60/images/include_dir.png" alt="compiler settings" width="298" height="302"></p>
+<p align="center" class="figure">Figure 2 - Compiler Settings Group in MMP Editor</p>
+<p align="left">After placing the custom component into the UI design and saving the file, the example VerticalLabel.cpp file will be placed into the source folder (default is src) of your UI Designer project. The VerticalLabel.cpp file is used to draw the VerticalLabel component on your handheld device or in the emulator at runtime. For the VerticalLabel2 example, the associated JavaScript file is used to draw the custom component only at design time in the UI design. Therefore, if you design a visual component and wish to display your custom component in the UI Designer, then you must supply a JavaScript file that implements some predefined interfaces.</p>
+<p align="left">You can save all files and build and run your UI Designer project in the emulator to view the component as part of the application.</p>
+<p align="left">Remember to refresh your project (F5), refresh components (Components &gt; Refresh Components),  clean your project, or perform a Components &gt; Force Save; as needed.</p>
+<h5 align="left">Step 5 of 5</h5>
+<p align="left"><a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>

--- a/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_05.htm	Tue Jul 27 15:20:28 2010 -0500
+++ b/carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_05.htm	Tue Jul 27 15:28:19 2010 -0500
@@ -1,199 +1,199 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
-<meta http-equiv="Content-Style-Type" content="text/css" />
-<title>XML-Based Component File</title>
-<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
-</head>
-<body bgcolor="#FFFFFF">
-<h2>Tutorial: Vertical Label Component - XML Details</h2>
-<p>The tutorial consists of two versions of the VerticalLabel  component. VerticalLabel1 is the bare minimum needed to make a  functioning component. VerticalLabel2 uses JavaScript to display the component in the UI Designer when designing your user interface.</p>
-The  following information explains what is relevant to the tutorial. Refer to the XML component schema documentation for all the details.
-<h3>Component Definition</h3>
-<p>The root element for defining a custom component begins with the &lt;componentDefinition&gt; element as shown in the VerticalLabel1.component and VerticalLabel2.component files. It contains the necessary name space attributes,  making the component schema namespace the default.</p>
-<h3>Component</h3>
-<p>The component element defines the majority of the component properties, attributes, source mapping and souce generation declarations. The following snippet is from the example .component files:</p>
-<pre>&lt;component friendlyName=&quot;%friendlyName&quot; 
-   &nbsp;&nbsp;&nbsp;  qualifiedName=&quot;com.example.uiq.VerticalLabel1&quot;
-   &nbsp;&nbsp;&nbsp;  baseComponent=&quot;com.nokia.carbide.uiq.ControlCollectionItemBase&quot;
-   &nbsp;&nbsp;&nbsp;  category=&quot;Custom Controls&quot; version=&quot;1.0&quot;
-   &nbsp;&nbsp;&nbsp;  instanceNameRoot=&quot;vlabel&quot;&gt;
-   &nbsp;&nbsp;&nbsp;  &lt;symbian 
-   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  sdkName=&quot;com.uiq&quot; minSDKVersion=&quot;3.0&quot;
-   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
-<p>Strings prefixed with % are localized strings that are  automatically looked up in the accompanying properties files, such as VerticalLabel1.properties.</p>
-<p>Note  that this component derives from ControlCollectionItemBase, which is a component included  with Carbide.c++. It provides some of the source code generation, as well as allowing it to behave like the other UIQ controls in the UI designer in that they are used in a design's different layout configurations as references in the control collection.</p>
-<h3>Symbian Element</h3>
-<p>The &lt;symbian&gt; element specifies that this component is compatible with all SDKs from 3.0 forward and the class name in the VerticalLabel.cpp file used to draw the component at run time is CVerticalLabel.</p>
-<pre>&lt;symbian sdkName=&quot;com.uiq&quot; minSDKVersion=&quot;3.0&quot;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
-<p>The sdkName property identifies the Symbian OS variant with which the component is compatible. Currently the only recognized SDK name for UIQ is &quot;com.uiq&quot;.</p>
-<p class="note"><strong>TIP</strong> Enter <strong>devices</strong> at a command prompt (C:\&gt;devices) to display a list of installed and properly configured SDKs.</p>
-<h3>Designer Images</h3>
-<p>In the VerticalLabel1 example, the &lt;designerImages&gt; element uses one image. This is the static layout image visible in the UI design. This is used in place of writing rendering script in a JavaScript file. You will only see a static graphic in the UI designer and its sizing by the current layout manager will not be defined by the component. Since icon images have also been omitted, default images are displayed in the palette and in the outline view. For example:</p>
-<pre>&lt;designerImages layoutImageFile=&quot;layoutImage.png&quot;/&gt;</pre>
-<p>In the VerticalLabel2 example, the &lt;designerImages&gt; element uses custom icon images (.png files) to represent the component in the palette and outline views. The static layout image file can be removed since JavaScript rendering code has been added to display the component in the UI design. For example:</p>
-<pre>&lt;designerImages smallIconFile=&quot;VerticalLabel_sm.png&quot; 
- largeIconFile=&quot;VerticalLabel.png&quot;/&gt;</pre>
-<h4>Image Support</h4>
-<p>Images are validated and rendered on a per-component basis.  Each component may have different restrictions or guidelines for the type or size of images that appear. Images appearing in forms and lists will be automatically scaled by the platform. This requires a reference to another interface the component system understands (IImagePropertyRenderingInfo); and can be declared as shown in the following code fragment.</p>
-<pre>&lt;implementations&gt;
- &lt;implementation&gt;
-  &lt;interface id=&quot;com.nokia.sdt.datamodel.adapter.IImagePropertyRenderingInfo&quot;/&gt;
-  &lt;script file=&quot;MyComponent.js&quot; prototype=&quot;MyComponent&quot;/&gt;
- &lt;/implementation&gt;
-&lt;/implementations&gt;</pre>
-<h3>Attributes Element</h3>
-<p>The Attributes element allows you to declare miscellaneous characteristics about your component. For example, the following snippet is from the example Vertical Label .component files.</p>
-<pre>&lt;attributes&gt;
- &lt;attribute key=&quot;cpp-class-name&quot;&gt;CVerticalLabel&lt;/attribute&gt;
- &lt;attribute key=&quot;rss-control-type-enum&quot;&gt;EVerticalLabel&lt;/attribute&gt;
-&lt;/attributes&gt;</pre>
-<p>The <span class="code">cpp-class-name</span> attribute is used by  the source generation element (&lt;sourceGen&gt;) that is inherited from ControlCollectionItemBase. This allows you to specify the  name of the C++ class to use in the generated source. The <span class="code">rss-control-type-enum</span> attribute specifies the type identifier used in the QIK_CONTROL resource generated for the control in the control collection resource.</p>
-<h3>Properties Element</h3>
-<p>Properties are the data values you can define for a component instance.  The text property is the default text drawn by the vertical label component. Note that it is a localized string, so you may provide different values for each language added to the application. The lineWidth property determines the thickness of the border rectangle drawn around the component. A value of zero (0) indicates  no border will be drawn. Note that default, minimum, and maximum values are specified. The <span class="code">default</span> attribute  is optional and provides an initial value. The optional <span class="code">minimum</span> and <span class="code">maximum</span> attributes provide range checking for integer properties.</p>
-<pre>&lt;properties&gt;
- &lt;property name=&quot;text&quot; type=&quot;localizedString&quot; default=&quot;label&quot;/&gt;
- &lt;property name=&quot;lineWidth&quot; type=&quot;integer&quot; default=&quot;1&quot; minValue=&quot;0&quot; maxValue=&quot;5&quot;/&gt;
-&lt;/properties&gt;</pre>
-<h3>Implementations Element</h3>
-<p>The &lt;implementations&gt; element is used in the VerticalLabel2.component example in order to render the component in the UI designer and provide its preferred size to be used by the layout manager. The &lt;implementations&gt; element informs the UI designer that the custom component has code. Implementations can be provided in either JavaScript or Java.</p>
-<p>Each implementation declaration has a list of one or more interfaces it fulfills. In this case the IVisualAppearance interface is implemented. This allows us to render an image corresponding to the current property values and provide feedback on the appropriate sizing for the component.  The &lt;script&gt; element informs the UI designer which file has the script and the name of the JavaScript prototype object to instantiate, as shown in the following snippet.</p>
-<pre>&lt;implementations&gt; 
- &nbsp; &lt;implementation&gt; 
- &nbsp;&nbsp;&nbsp; &lt;interface  id=&quot;com.nokia.sdt.datamodel.adapter.IVisualAppearance&quot;/&gt; 
- &nbsp;&nbsp;&nbsp;&nbsp;&lt;script file=&quot;VerticalLabel.js&quot;  prototype=&quot;VerticalLabel&quot;/&gt;
- &nbsp; &lt;/implementation&gt;
-&lt;/implementations&gt;</pre>
-<h4>JavaScript</h4>
-<p>The example JavaScript file (VerticalLabel.js) contains an empty function to instantiate the JavaScript prototype. Note that the JavaScript file needs to be located as a sibling to the component file that references it.</p>
-<pre>function VerticalLabel() {
- }</pre>
-<p>The following code in the JavaScript file declares the draw method. It takes three parameters:</p>
-<ul>
-  <li>instance &ndash; the current component instance used to retrieve property values and other state data.</li>
-  <li>laf &ndash;  the look and feel object. This has objects and values that vary with the SDK and screen configuration. See the XML documentation on ILookAndFeel for more information.</li>
-  <li>graphics &ndash; the graphics used for drawing. This is a wrapper around an SWT GC object.</li>
-</ul>
-<pre>VerticalLabel.prototype.draw  = function(instance, laf, graphics) {</pre>
-<p>The font object is obtained from the look and feel  object. Since this is a  simple example the font is hard-coded to a standard Symbian font.</p>
-<pre>var font = laf.getFont(&quot;NormalFont&quot;);
- graphics.setFont(font);</pre>
-<p>The background color needs to be set since anti-aliased text with a  transparent background is drawn. In the UI Designer, each component is rendered into a bitmap with 'transparent pixel' support.  The bitmap does not have an alpha channel.  Thus, if the background color is not set, the 'transparent pixel' would be blended with the antialiased text, resulting in an orange border.</p>
-<pre>graphics.setBackground(laf.getColor(&quot;EEikColorControlBackground&quot;));</pre>
-<p>Next a rectangular border and the text within the border is drawn. The bounds and position of the text are calculated accordingly.</p>
-<pre> var properties = instance.properties;
- var lineWidth = properties.lineWidth;
- var halfLineWidth = lineWidth/2;
- var textBounds = new Rectangle(halfLineWidth, halfLineWidth, 
- properties.size.width - halfLineWidth, 
- properties.size.height - halfLineWidth);
- var x = lineWidth + 1;
- var y = properties.size.height - lineWidth - 1;</pre>
-<p>The rotated text is then drawn.</p>
-<pre>graphics.drawRotatedString(properties.text, textBounds, x, y, -1.57, true);</pre>
-<p>If requested, the border is drawn.</p>
-<pre>if (lineWidth &gt; 0) {
- graphics.setLineWidth(lineWidth);
- x = y = halfLineWidth;
- 
- graphics.drawRectangle(x, y, 
- properties.size.width-lineWidth, 
- properties.size.height-lineWidth);
- }</pre>
-<p>The getPreferredSize method is called by the layout manager to get the size of the component instance. If its text property is null, it will return an empty size, otherwise it will calculate the width of the text to use as its height, and return its parent's width as its width.</p>
-<pre>VerticalLabel.prototype.getPreferredSize = function(instance, laf, wHint, hHint) {
-	var text = instance.properties.text;
-	if (text == null)
-		return new Point(0, 0);
-		
-	var font = laf.getFont("NormalFont");
-	var extent = TextRendering.formattedStringExtent(font, text, new Point(1000, 1000), 0, 0);
-	var lineWidth = instance.properties.lineWidth;
-	var parentBounds = instance.parent.getLayoutBounds();
-	
-	return new Point(parentBounds.width, extent.x + lineWidth + 1);
-}
-</pre>
-<h3>Source Mapping Element</h3>
-<p>The Vertical Label component uses an RSS include file (example_verticallabel.rh). This file defines a custom resource used to initialize the component. Since our component uses a localized string it is especially important to use a resource. The &lt;sourceMapping&gt; element contains information on how to convert from property values to RSS statements, and from RSS statements back to property values.</p>
-<p>The &lt;mapResource&gt; element tells the RSS generator to create a resource of type <span class="code">EXAMPLE_VERTICAL_LABEL</span>, and that the <span class="code">example_verticallabel.rh</span> file is needed to create compilable source code. The RSS generator has flexible support for mapping properties to resources. Only simple conversions are needed, which can be done with the &lt;mapSimpleMember&gt; element. This has attributes that indicate a given property should be used to initialize a specific resource member. Refer to the &quot;source mapping&quot; XML schema documentation for details on all available mappings. Detailed documentation on the schema can be  found in the plugins folder of your Carbide.c++ installation, for example, the default location at C:\Program Files\Nokia\Carbide.c++ v1.3\plugins\com.nokia.sdt.component.symbian_1.3.0.3. Also examine the UIQ components included with the UI designer for lots of examples; located at &lt;<em>Carbide installation path</em>&gt;/plugins/com.nokia.carbide.cpp.uiq.components/components.</p>
-<pre>&lt;sourceMapping&gt;
- &lt;mapResource struct=&quot;EXAMPLE_VERTICAL_LABEL&quot; headers=&quot;example_verticallabel.rh&quot;&gt;
- &lt;mapSimpleMember property=&quot;text&quot; member=&quot;txt&quot;/&gt;
- &lt;mapSimpleMember property=&quot;lineWidth&quot; member=&quot;line_size&quot;/&gt;
- &lt;/mapResource&gt;
-&lt;/sourceMapping&gt;</pre>
-<h3>Source  Generation Element
-</h3>
-<p>The &lt;sourceGen&gt; element contains all the information needed to generate C++ code. Because this example is deriving from ControlCollectionItemBase, there is a lot of existing infrastructure to leverage. Source code generation is performed by executing JavaScript scripts. There is a layer above raw JavaScript that creates scripts by way of template expansion, like with PHP, JPS, ASP, etc. With templates you can define variables, or escape out to arbitrary script code. The following code snippet is from the Vertical Label .component files.</p>
-<pre>
-&lt;sourceGen&gt;
-	&lt;useTemplateGroup ids="makeVisible"/&gt;		
-	&lt;templateGroup id="0" form="InstanceGen"&gt;
-	&lt;expandMacro name="SetupControlInstanceVariable"  Type="${this.getCppClassName(instance)}"
-		InstanceMemberName="${instanceMemberName}" InstanceTitle="${instanceName$title}"
-		Headers="barsread.h eikenv.h"/&gt;		
-	&lt;/templateGroup&gt;
-	&lt;inline&gt;
-if (Engine.formMatches(form, [""])) {
-	// create files if missing
-	Engine.createFromStockFile("inc", "VerticalLabel.h", "VerticalLabel.h");
-	Engine.createFromStockFile("src", "VerticalLabel.cpp", "VerticalLabel.cpp");
-}
-	&lt;/inline&gt;
-	&lt;template phase="MainUserIncludes"&gt;&lt;![CDATA[
-#include "VerticalLabel.h"
-#include "example_verticallabel.hrh"
-]]&gt;&lt;/template&gt;
-	&lt;template location="VIEWDIALOGBASE_HEADER_OWNED_SYSTEM_INCLUDES"&gt;&lt;![CDATA[
-#include &lt;QikControlProvider.h&gt;
-]]&gt;&lt;/template&gt;
-	&lt;templateGroup id="ControlFactory"&gt;
-	&lt;template id="VerticalLabelControlFactory" phase="ClassPrivateOwnedMethods"&gt;&lt;![CDATA[
-class TVerticalLabelControlFactory : public MQikControlFactory
-	{
-public:
-	CCoeControl* CreateByTypeL( 
-		TInt aType,
-		TInt& aDefaultFlags )
-	{
-	if ( aType == EVerticalLabel )
-		{
-		aDefaultFlags = EQikCtrlFlagIsNonFocusing;
-		return new(ELeave) CVerticalLabel;
-		}
-	return NULL;
-	}
-	CCoeControl* ConstructCustomControlL( 
-		TInt aUniqueHandle,
-		TInt aType,
-		TInt aResourceId,
-		TInt aItemFlags,
-		const CCoeControl& aParent )
-	{
-	return NULL;
-	}
-	};
-TVerticalLabelControlFactory iVerticalLabelControlFactory;
-]]&gt;&lt;/template&gt;
-	&lt;template id="InstallControlFactory" phase="PreConstructFromResourceL"&gt;&lt;![CDATA[
-// Install this factory in the control providers list
-ControlProvider()-&gt;AddControlFactoryL( iVerticalLabelControlFactory );	
-]]&gt;&lt;/template&gt;
-	&lt;template id="RemoveControlFactory" phase="Destroy"&gt;&lt;![CDATA[
-// Remove this factory from the control providers list
-ControlProvider()-&gt;RemoveControlFactory( iVerticalLabelControlFactory );	
-]]&gt;&lt;/template&gt;
-	&lt;/templateGroup&gt;
-&lt;/sourceGen&gt;
-</pre>
-<p>Since source code generation is very detailed  and specific, deriving from a component does not automatically enable source code generation. The derived component must specify what to generate, either completely  or by referencing existing templates. Templates defined in ControlCollectionItemBase can be reused.</p>
-<p>The <code>makeVisible</code> template group does some standard initialization. Macros are groups of parametrized templates. The <code>SetupControlInstanceVariable</code> macro generates code to setup a member variable for the vertical label control's instance.</p>
-<p>The &lt;inline&gt; element inserts  JavaScript code. This example calls a predefined function to copy the stock versions of VerticalLabel.cpp and VerticalLabel.h that contain the runtime code implementing the vertical label control.</p>
-<p>There is a &lt;template&gt; element in this snippet that is used to define a new template in order to insert the  <span class="code">#include &quot;VerticalLabel.h&quot;</span> and <span class="code">#include &quot;example_verticallabel.hrh&quot;</span> statements for the required header files.</p>
-<p>The final &lt;templateGroup&gt; element embodies a set of templates used to generate and install a custom control factory to translate the custom control type identifier, <code>EVerticalLabel</code> used in the control collection resource into a CVerticalLabel object.</p>
-<p><img src="../../../img/nokia_copyright.png" alt="copyright" width="280" height="21"></img></p>
-
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<title>XML-Based Component File</title>
+<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
+</head>
+<body bgcolor="#FFFFFF">
+<h2>Tutorial: Vertical Label Component - XML Details</h2>
+<p>The tutorial consists of two versions of the VerticalLabel  component. VerticalLabel1 is the bare minimum needed to make a  functioning component. VerticalLabel2 uses JavaScript to display the component in the UI Designer when designing your user interface.</p>
+The  following information explains what is relevant to the tutorial. Refer to the XML component schema documentation for all the details.
+<h3>Component Definition</h3>
+<p>The root element for defining a custom component begins with the &lt;componentDefinition&gt; element as shown in the VerticalLabel1.component and VerticalLabel2.component files. It contains the necessary name space attributes,  making the component schema namespace the default.</p>
+<h3>Component</h3>
+<p>The component element defines the majority of the component properties, attributes, source mapping and souce generation declarations. The following snippet is from the example .component files:</p>
+<pre>&lt;component friendlyName=&quot;%friendlyName&quot; 
+   &nbsp;&nbsp;&nbsp;  qualifiedName=&quot;com.example.uiq.VerticalLabel1&quot;
+   &nbsp;&nbsp;&nbsp;  baseComponent=&quot;com.nokia.carbide.uiq.ControlCollectionItemBase&quot;
+   &nbsp;&nbsp;&nbsp;  category=&quot;Custom Controls&quot; version=&quot;1.0&quot;
+   &nbsp;&nbsp;&nbsp;  instanceNameRoot=&quot;vlabel&quot;&gt;
+   &nbsp;&nbsp;&nbsp;  &lt;symbian 
+   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  sdkName=&quot;com.uiq&quot; minSDKVersion=&quot;3.0&quot;
+   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
+<p>Strings prefixed with % are localized strings that are  automatically looked up in the accompanying properties files, such as VerticalLabel1.properties.</p>
+<p>Note  that this component derives from ControlCollectionItemBase, which is a component included  with Carbide.c++. It provides some of the source code generation, as well as allowing it to behave like the other UIQ controls in the UI designer in that they are used in a design's different layout configurations as references in the control collection.</p>
+<h3>Symbian Element</h3>
+<p>The &lt;symbian&gt; element specifies that this component is compatible with all SDKs from 3.0 forward and the class name in the VerticalLabel.cpp file used to draw the component at run time is CVerticalLabel.</p>
+<pre>&lt;symbian sdkName=&quot;com.uiq&quot; minSDKVersion=&quot;3.0&quot;  className=&quot;CVerticalLabel&quot;/&gt;</pre>
+<p>The sdkName property identifies the Symbian OS variant with which the component is compatible. Currently the only recognized SDK name for UIQ is &quot;com.uiq&quot;.</p>
+<p class="note"><strong>TIP</strong> Enter <strong>devices</strong> at a command prompt (C:\&gt;devices) to display a list of installed and properly configured SDKs.</p>
+<h3>Designer Images</h3>
+<p>In the VerticalLabel1 example, the &lt;designerImages&gt; element uses one image. This is the static layout image visible in the UI design. This is used in place of writing rendering script in a JavaScript file. You will only see a static graphic in the UI designer and its sizing by the current layout manager will not be defined by the component. Since icon images have also been omitted, default images are displayed in the palette and in the outline view. For example:</p>
+<pre>&lt;designerImages layoutImageFile=&quot;layoutImage.png&quot;/&gt;</pre>
+<p>In the VerticalLabel2 example, the &lt;designerImages&gt; element uses custom icon images (.png files) to represent the component in the palette and outline views. The static layout image file can be removed since JavaScript rendering code has been added to display the component in the UI design. For example:</p>
+<pre>&lt;designerImages smallIconFile=&quot;VerticalLabel_sm.png&quot; 
+ largeIconFile=&quot;VerticalLabel.png&quot;/&gt;</pre>
+<h4>Image Support</h4>
+<p>Images are validated and rendered on a per-component basis.  Each component may have different restrictions or guidelines for the type or size of images that appear. Images appearing in forms and lists will be automatically scaled by the platform. This requires a reference to another interface the component system understands (IImagePropertyRenderingInfo); and can be declared as shown in the following code fragment.</p>
+<pre>&lt;implementations&gt;
+ &lt;implementation&gt;
+  &lt;interface id=&quot;com.nokia.sdt.datamodel.adapter.IImagePropertyRenderingInfo&quot;/&gt;
+  &lt;script file=&quot;MyComponent.js&quot; prototype=&quot;MyComponent&quot;/&gt;
+ &lt;/implementation&gt;
+&lt;/implementations&gt;</pre>
+<h3>Attributes Element</h3>
+<p>The Attributes element allows you to declare miscellaneous characteristics about your component. For example, the following snippet is from the example Vertical Label .component files.</p>
+<pre>&lt;attributes&gt;
+ &lt;attribute key=&quot;cpp-class-name&quot;&gt;CVerticalLabel&lt;/attribute&gt;
+ &lt;attribute key=&quot;rss-control-type-enum&quot;&gt;EVerticalLabel&lt;/attribute&gt;
+&lt;/attributes&gt;</pre>
+<p>The <span class="code">cpp-class-name</span> attribute is used by  the source generation element (&lt;sourceGen&gt;) that is inherited from ControlCollectionItemBase. This allows you to specify the  name of the C++ class to use in the generated source. The <span class="code">rss-control-type-enum</span> attribute specifies the type identifier used in the QIK_CONTROL resource generated for the control in the control collection resource.</p>
+<h3>Properties Element</h3>
+<p>Properties are the data values you can define for a component instance.  The text property is the default text drawn by the vertical label component. Note that it is a localized string, so you may provide different values for each language added to the application. The lineWidth property determines the thickness of the border rectangle drawn around the component. A value of zero (0) indicates  no border will be drawn. Note that default, minimum, and maximum values are specified. The <span class="code">default</span> attribute  is optional and provides an initial value. The optional <span class="code">minimum</span> and <span class="code">maximum</span> attributes provide range checking for integer properties.</p>
+<pre>&lt;properties&gt;
+ &lt;property name=&quot;text&quot; type=&quot;localizedString&quot; default=&quot;label&quot;/&gt;
+ &lt;property name=&quot;lineWidth&quot; type=&quot;integer&quot; default=&quot;1&quot; minValue=&quot;0&quot; maxValue=&quot;5&quot;/&gt;
+&lt;/properties&gt;</pre>
+<h3>Implementations Element</h3>
+<p>The &lt;implementations&gt; element is used in the VerticalLabel2.component example in order to render the component in the UI designer and provide its preferred size to be used by the layout manager. The &lt;implementations&gt; element informs the UI designer that the custom component has code. Implementations can be provided in either JavaScript or Java.</p>
+<p>Each implementation declaration has a list of one or more interfaces it fulfills. In this case the IVisualAppearance interface is implemented. This allows us to render an image corresponding to the current property values and provide feedback on the appropriate sizing for the component.  The &lt;script&gt; element informs the UI designer which file has the script and the name of the JavaScript prototype object to instantiate, as shown in the following snippet.</p>
+<pre>&lt;implementations&gt; 
+ &nbsp; &lt;implementation&gt; 
+ &nbsp;&nbsp;&nbsp; &lt;interface  id=&quot;com.nokia.sdt.datamodel.adapter.IVisualAppearance&quot;/&gt; 
+ &nbsp;&nbsp;&nbsp;&nbsp;&lt;script file=&quot;VerticalLabel.js&quot;  prototype=&quot;VerticalLabel&quot;/&gt;
+ &nbsp; &lt;/implementation&gt;
+&lt;/implementations&gt;</pre>
+<h4>JavaScript</h4>
+<p>The example JavaScript file (VerticalLabel.js) contains an empty function to instantiate the JavaScript prototype. Note that the JavaScript file needs to be located as a sibling to the component file that references it.</p>
+<pre>function VerticalLabel() {
+ }</pre>
+<p>The following code in the JavaScript file declares the draw method. It takes three parameters:</p>
+<ul>
+  <li>instance &ndash; the current component instance used to retrieve property values and other state data.</li>
+  <li>laf &ndash;  the look and feel object. This has objects and values that vary with the SDK and screen configuration. See the XML documentation on ILookAndFeel for more information.</li>
+  <li>graphics &ndash; the graphics used for drawing. This is a wrapper around an SWT GC object.</li>
+</ul>
+<pre>VerticalLabel.prototype.draw  = function(instance, laf, graphics) {</pre>
+<p>The font object is obtained from the look and feel  object. Since this is a  simple example the font is hard-coded to a standard Symbian font.</p>
+<pre>var font = laf.getFont(&quot;NormalFont&quot;);
+ graphics.setFont(font);</pre>
+<p>The background color needs to be set since anti-aliased text with a  transparent background is drawn. In the UI Designer, each component is rendered into a bitmap with 'transparent pixel' support.  The bitmap does not have an alpha channel.  Thus, if the background color is not set, the 'transparent pixel' would be blended with the antialiased text, resulting in an orange border.</p>
+<pre>graphics.setBackground(laf.getColor(&quot;EEikColorControlBackground&quot;));</pre>
+<p>Next a rectangular border and the text within the border is drawn. The bounds and position of the text are calculated accordingly.</p>
+<pre> var properties = instance.properties;
+ var lineWidth = properties.lineWidth;
+ var halfLineWidth = lineWidth/2;
+ var textBounds = new Rectangle(halfLineWidth, halfLineWidth, 
+ properties.size.width - halfLineWidth, 
+ properties.size.height - halfLineWidth);
+ var x = lineWidth + 1;
+ var y = properties.size.height - lineWidth - 1;</pre>
+<p>The rotated text is then drawn.</p>
+<pre>graphics.drawRotatedString(properties.text, textBounds, x, y, -1.57, true);</pre>
+<p>If requested, the border is drawn.</p>
+<pre>if (lineWidth &gt; 0) {
+ graphics.setLineWidth(lineWidth);
+ x = y = halfLineWidth;
+ 
+ graphics.drawRectangle(x, y, 
+ properties.size.width-lineWidth, 
+ properties.size.height-lineWidth);
+ }</pre>
+<p>The getPreferredSize method is called by the layout manager to get the size of the component instance. If its text property is null, it will return an empty size, otherwise it will calculate the width of the text to use as its height, and return its parent's width as its width.</p>
+<pre>VerticalLabel.prototype.getPreferredSize = function(instance, laf, wHint, hHint) {
+	var text = instance.properties.text;
+	if (text == null)
+		return new Point(0, 0);
+		
+	var font = laf.getFont("NormalFont");
+	var extent = TextRendering.formattedStringExtent(font, text, new Point(1000, 1000), 0, 0);
+	var lineWidth = instance.properties.lineWidth;
+	var parentBounds = instance.parent.getLayoutBounds();
+	
+	return new Point(parentBounds.width, extent.x + lineWidth + 1);
+}
+</pre>
+<h3>Source Mapping Element</h3>
+<p>The Vertical Label component uses an RSS include file (example_verticallabel.rh). This file defines a custom resource used to initialize the component. Since our component uses a localized string it is especially important to use a resource. The &lt;sourceMapping&gt; element contains information on how to convert from property values to RSS statements, and from RSS statements back to property values.</p>
+<p>The &lt;mapResource&gt; element tells the RSS generator to create a resource of type <span class="code">EXAMPLE_VERTICAL_LABEL</span>, and that the <span class="code">example_verticallabel.rh</span> file is needed to create compilable source code. The RSS generator has flexible support for mapping properties to resources. Only simple conversions are needed, which can be done with the &lt;mapSimpleMember&gt; element. This has attributes that indicate a given property should be used to initialize a specific resource member. Refer to the &quot;source mapping&quot; XML schema documentation for details on all available mappings. Detailed documentation on the schema can be  found in the plugins folder of your Carbide.c++ installation, for example, the default location at C:\Program Files\Nokia\Carbide.c++ v1.3\plugins\com.nokia.sdt.component.symbian_1.3.0.3. Also examine the UIQ components included with the UI designer for lots of examples; located at &lt;<em>Carbide installation path</em>&gt;/plugins/com.nokia.carbide.cpp.uiq.components/components.</p>
+<pre>&lt;sourceMapping&gt;
+ &lt;mapResource struct=&quot;EXAMPLE_VERTICAL_LABEL&quot; headers=&quot;example_verticallabel.rh&quot;&gt;
+ &lt;mapSimpleMember property=&quot;text&quot; member=&quot;txt&quot;/&gt;
+ &lt;mapSimpleMember property=&quot;lineWidth&quot; member=&quot;line_size&quot;/&gt;
+ &lt;/mapResource&gt;
+&lt;/sourceMapping&gt;</pre>
+<h3>Source  Generation Element
+</h3>
+<p>The &lt;sourceGen&gt; element contains all the information needed to generate C++ code. Because this example is deriving from ControlCollectionItemBase, there is a lot of existing infrastructure to leverage. Source code generation is performed by executing JavaScript scripts. There is a layer above raw JavaScript that creates scripts by way of template expansion, like with PHP, JPS, ASP, etc. With templates you can define variables, or escape out to arbitrary script code. The following code snippet is from the Vertical Label .component files.</p>
+<pre>
+&lt;sourceGen&gt;
+	&lt;useTemplateGroup ids="makeVisible"/&gt;		
+	&lt;templateGroup id="0" form="InstanceGen"&gt;
+	&lt;expandMacro name="SetupControlInstanceVariable"  Type="${this.getCppClassName(instance)}"
+		InstanceMemberName="${instanceMemberName}" InstanceTitle="${instanceName$title}"
+		Headers="barsread.h eikenv.h"/&gt;		
+	&lt;/templateGroup&gt;
+	&lt;inline&gt;
+if (Engine.formMatches(form, [""])) {
+	// create files if missing
+	Engine.createFromStockFile("inc", "VerticalLabel.h", "VerticalLabel.h");
+	Engine.createFromStockFile("src", "VerticalLabel.cpp", "VerticalLabel.cpp");
+}
+	&lt;/inline&gt;
+	&lt;template phase="MainUserIncludes"&gt;&lt;![CDATA[
+#include "VerticalLabel.h"
+#include "example_verticallabel.hrh"
+]]&gt;&lt;/template&gt;
+	&lt;template location="VIEWDIALOGBASE_HEADER_OWNED_SYSTEM_INCLUDES"&gt;&lt;![CDATA[
+#include &lt;QikControlProvider.h&gt;
+]]&gt;&lt;/template&gt;
+	&lt;templateGroup id="ControlFactory"&gt;
+	&lt;template id="VerticalLabelControlFactory" phase="ClassPrivateOwnedMethods"&gt;&lt;![CDATA[
+class TVerticalLabelControlFactory : public MQikControlFactory
+	{
+public:
+	CCoeControl* CreateByTypeL( 
+		TInt aType,
+		TInt& aDefaultFlags )
+	{
+	if ( aType == EVerticalLabel )
+		{
+		aDefaultFlags = EQikCtrlFlagIsNonFocusing;
+		return new(ELeave) CVerticalLabel;
+		}
+	return NULL;
+	}
+	CCoeControl* ConstructCustomControlL( 
+		TInt aUniqueHandle,
+		TInt aType,
+		TInt aResourceId,
+		TInt aItemFlags,
+		const CCoeControl& aParent )
+	{
+	return NULL;
+	}
+	};
+TVerticalLabelControlFactory iVerticalLabelControlFactory;
+]]&gt;&lt;/template&gt;
+	&lt;template id="InstallControlFactory" phase="PreConstructFromResourceL"&gt;&lt;![CDATA[
+// Install this factory in the control providers list
+ControlProvider()-&gt;AddControlFactoryL( iVerticalLabelControlFactory );	
+]]&gt;&lt;/template&gt;
+	&lt;template id="RemoveControlFactory" phase="Destroy"&gt;&lt;![CDATA[
+// Remove this factory from the control providers list
+ControlProvider()-&gt;RemoveControlFactory( iVerticalLabelControlFactory );	
+]]&gt;&lt;/template&gt;
+	&lt;/templateGroup&gt;
+&lt;/sourceGen&gt;
+</pre>
+<p>Since source code generation is very detailed  and specific, deriving from a component does not automatically enable source code generation. The derived component must specify what to generate, either completely  or by referencing existing templates. Templates defined in ControlCollectionItemBase can be reused.</p>
+<p>The <code>makeVisible</code> template group does some standard initialization. Macros are groups of parametrized templates. The <code>SetupControlInstanceVariable</code> macro generates code to setup a member variable for the vertical label control's instance.</p>
+<p>The &lt;inline&gt; element inserts  JavaScript code. This example calls a predefined function to copy the stock versions of VerticalLabel.cpp and VerticalLabel.h that contain the runtime code implementing the vertical label control.</p>
+<p>There is a &lt;template&gt; element in this snippet that is used to define a new template in order to insert the  <span class="code">#include &quot;VerticalLabel.h&quot;</span> and <span class="code">#include &quot;example_verticallabel.hrh&quot;</span> statements for the required header files.</p>
+<p>The final &lt;templateGroup&gt; element embodies a set of templates used to generate and install a custom control factory to translate the custom control type identifier, <code>EVerticalLabel</code> used in the control collection resource into a CVerticalLabel object.</p>
+<div id="footer">Copyright &copy; 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>
+</body>
+</html>