## Tutorial: Vertical Label Component

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.

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 Component XSD Description.

The example files for the Vertical Label tutorials are provided in a zip file in the s60 components plugin located at: {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. Refer to the example files while reading this tutorial.

The goal of this tutorial focuses on the following steps:

- Step 1: Create Project for Example Component Files
- Step 2: Enable Components Menu
- Step 3: Add Custom Component to UI Designer
- Step 4: Create UI Designer Project to Test Custom Component
- Step 5: Vertical Label Component XML Details