Create UI Designer Project to Test Custom Component

## Tutorial: Vertical Label Component - Create UI Designer Project to Test Custom Component

Create a S60 UI Designer project to test the VerticalLabel component. For example, select File > New > Symbian OS C++ Project 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.

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.

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.

Figure 1. Custom Component Placed in UI Design

NOTE The example_verticallabel.rh file must be made accessible to the UI Designer as a system include.

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.

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.

NOTE In your source files the <> brackets denote a system include path, where quotes (" ") indicate a user include.

Figure 2 - Compiler Settings Group in MMP Editor

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.

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.

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.

NOTE 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.

Figure 2. Include Custom Component .cpp file in MMP Editor

Remember to refresh your project (F5), refresh components (Components > Refresh Components), clean your project, or perform a Components > Force Save; as needed.

##### Step 5 of 5

Vertical Label Component XML Details