Create Project for Example Component Files

## Tutorial: Vertical Label Component - Create Project for Example Component Files

First create a General Project:

1. Select File > New > Project...
2. Select Project in the General folder.
3. Click Next and continue with wizard setup by specifying a project name, workspace location, and referenced projects (if applicable).
4. On last page of wizard click Finish to create the simple project.

The project will appear in the Project Explorer view. Select the project and right-click to display the context menu. Select Show in Explorer from the list of menu options. Grab the example zip file from {Carbide_Installation_Dir}\plugins\com.nokia.sdt.series60.componentlibrary_version\templates\tutorials\example_components\example_components.zip, where version is the current version of UI Designer, and unzip the Vertical Label example files into your new simple project folder. The files include:

- example_verticallabel.rh
- layoutImage.png
- VerticalLabel1.component
- VerticalLabel1.properties
- VerticalLabel2.component
- VerticalLabel2.properties
- VerticalLabel.cpp
- VerticalLabel.h
- VerticalLabel.js
- VerticalLabel.png
- VerticalLabel_layout.png
- VerticalLabel_sm.png

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.

##### Step 2 of 5

Enable Components Menu