| author | fturovic <frank.turovich@nokia.com> |
| Tue, 27 Jul 2010 15:28:19 -0500 | |
| changeset 1704 | 24ac5a5cf80c |
| parent 0 | fb279309251b |
| permissions | -rw-r--r-- |
|
1704
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
2 |
<html> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
3 |
<head> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
5 |
<meta http-equiv="Content-Style-Type" content="text/css" /> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
6 |
<title>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 S60 UI Designer project to test the VerticalLabel component. For example, select <strong>File > New > Symbian OS C++ Project</strong> and choose the "3rd Ed. GUI Application with UI Designer" 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> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
12 |
<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> |
|
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 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_uiproject.png" alt="Custom Component in UI Design" width="416" height="479" /></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 file must be made accessible to the UI Designer as a system include.</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 the file into an existing "System includes" directory, such as the UIQ SDK's epoc32\include directory. Alternately, you could copy the file into a "User includes" 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 file. You can also click the "Add a system include path" 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 <> brackets denote a system include path, where quotes (" ") 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="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 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> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
23 |
<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> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
24 |
<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> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
25 |
<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> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
26 |
<p align="center"><img src="images/comp_cppsource.png" alt="Include .cpp source" width="537" height="500" /></p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
27 |
<p align="center"><strong>Figure 2. Include Custom Component .cpp file in MMP Editor</strong></p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
28 |
<p align="left">Remember to refresh your project (F5), refresh components (Components > Refresh Components), clean your project, or perform a Components > Force Save; as needed.</p> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
29 |
<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
|
30 |
<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
|
31 |
<div id="footer">Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). All rights reserved. <br>License: <a href="http://www.eclipse.org/legal/epl-v10.html">http://www.eclipse.org/legal/epl-v10.html</a></div> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
32 |
</div> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
33 |
</body> |
|
24ac5a5cf80c
updated copyright dates and fixed some css issues
fturovic <frank.turovich@nokia.com>
parents:
0
diff
changeset
|
34 |
</html> |