carbidesdk/com.nokia.carbide.cpp.sdk.doc.user/html/CustomComponents/tutorials/verticallabel_uiq/verticallabel_tutorial_04.htm
author fturovic <frank.turovich@nokia.com>
Tue, 27 Jul 2010 15:28:19 -0500
changeset 1704 24ac5a5cf80c
parent 0 fb279309251b
permissions -rw-r--r--
updated copyright dates and fixed some css issues
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
1704
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     2
<html>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     3
<head>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     4
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     5
<meta http-equiv="Content-Style-Type" content="text/css" />
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     6
<title>Create UI Designer Project to Test Custom Component</title>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     7
<link rel="StyleSheet" href="../../../../book.css" type="text/css"/>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     8
</head>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
     9
<body bgcolor="#FFFFFF">
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    10
<h2>Tutorial: Vertical Label Component - Create UI Designer Project to Test Custom Component</h2>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    11
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    12
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    13
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    14
<p align="center"><img src="images/comp_palette_custom.png" alt="custom component" width="650" height="432"></p>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    15
<p align="center"><strong>Figure 1. Custom Component Placed in UI Design</strong></p>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    16
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    17
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    18
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    19
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    20
<p align="center"><img src="../verticallabel_s60/images/include_dir.png" alt="compiler settings" width="298" height="302"></p>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    21
<p align="center" class="figure">Figure 2 - Compiler Settings Group in MMP Editor</p>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    22
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    23
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    24
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    25
<h5 align="left">Step 5 of 5</h5>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    26
<p align="left"><a href="verticallabel_tutorial_05.htm">Vertical Label Component XML Details</a></p>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    27
<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>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    28
</div>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    29
</body>
24ac5a5cf80c updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents: 0
diff changeset
    30
</html>