## Tutorial: Equal Container

This tutorial explains how to create a top-level container component based on CCoeControl that consists of a simple layout behavior and shows up in the design wizard. The example files for the Equal Container tutorial 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 EqualContainer example files while reading this tutorial.

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.

In CCoeControl, children are added at absolute positions and given absolute sizes. These values make it into the generated source. This does not work well for multiple resolutions or portrait vs. landscape modes. So you can create a custom container (EqualContainer) that dynamically calculates the coordinates and sizes for components (children) and places them at equal sizes within the container.

The goal of this tutorial focuses on the following steps:

- Step 1: Create Project for Equal Container Example
- Step 2: Write the Component and Script Code
- Step 3: Change CCoeControl’s Layout Behavior to be Dynamic
- Step 4: Expose the New Container in the Design Wizard
- Step 5: Create UI Design for UI Designer Project