Controls can be positioned in different ways on a drawable surface. One method is to give the coordinates directly for each control. In this way the controls can be put in arbitrary positions on the surface.

However, it is often convenient to use a separate component for the layout of controls, since the layout often has a pattern. One example of such a layout is the grid. The following example application shows an example of a grid class that can be used to position controls in an easy-to-use manner.

Download code sample>>

The first smartphone screen shot below shows the running application. In this application, there are three levels of grids, as shown by the second image. The first level has 3x4 grid cells, and position (0,1) is further divided into a 2x2 grid. In this grid, position (1,0) is also divided in a 2x2 grid. The outmost grid is larger than the screen, and therefore a CQikScrollableContainer has been used to enable scroll bars. This makes the application behave like a spreadsheet.

In this example, the grid is represented by the CGrid class. The public interface to this class includes the following methods:

void ConstructL(const TRect& rect, TInt rows, TInt cols);
TRect AddControl(CCoeControl* control, TInt row, TInt col);

The grid control is constructed using the ConstructL() method, where the number of rows and columns should be specified. When the grid has been constructed controls can be added by using the AddControl() method. This method will return a TRect, which should then be passed to the added controls SetRect();

The grid class can easily be changed to behave differently. For example, currently the grid cells are of equal size, but source code for the CGrid class can be changed so that the cells are of different size.