1. Import the required classes and interfaces.

   import net.rim.device.api.ui.*;
   import net.rim.device.api.ui.component.*;
   import net.rim.device.api.ui.container.*;
   

2. Create the application framework by extending the UiApplication class. In main(), create an instance of the new class and invoke enterEventDispatcher() to enable the application to receive events. In the application constructor, invoke pushScreen() to display the custom screen for the application. In the sample, the GridScreen class, described in step 3, represents the custom screen.

   class GridFieldManagerDemo extends UiApplication 
   {
       public static void main(String[] args)
       {
           GridFieldManagerDemo theApp = new GridFieldManagerDemo();
           theApp.enterEventDispatcher();
       }
   
       GridFieldManagerDemo() 
       {
           pushScreen(new GridScreen());
       }
   }
   

3. Create the framework for the custom screen by extending the MainScreen class.

   class GridScreen extends MainScreen
   {
   
       public GridScreen() 
       {
       }
   }
   

4. In the screen constructor, invoke setTitle() to set the text that you want to appear in the title section of the screen.

   setTitle("GridFieldManager Demo");
   

5. In the screen constructor, create an instance of the GridFieldManager class. Specify the number of rows, the number of columns, and the style of the grid (using a style inherited from net.rim.device.api.ui.Manager). Specify 0 for the style to use the default style.

   GridFieldManager grid;
   grid = new GridFieldManager(2,3,0); 
   

6. In the screen constructor, invoke GridFieldManager.add() to add fields to the grid.

   grid.add(new LabelField("one"));
   grid.add(new LabelField("two"));
   grid.add(new LabelField("three"));
   grid.add(new LabelField("four"));
   grid.add(new LabelField("five"));
   

7. In the screen constructor, invoke the GridFieldManager set() methods to specify the properties of the grid.

   grid.setColumnPadding(20);
   grid.setRowPadding(20);
   

8. In the screen constructor, invoke Screen.add() to add the grid to the screen.

   add(grid);
   

You can change the grid after you create it. For example, you can add fields, delete fields, or change the grid's properties.

Code sample: Creating a grid layout

/*
 * GridFieldManagerDemo.java
 *
 * Research In Motion Limited proprietary and confidential
 * Copyright Research In Motion Limited, 2009
 */
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;

public class GridFieldManagerDemo extends UiApplication 
{
    public static void main(String[] args)
    {
        GridFieldManagerDemo theApp = new GridFieldManagerDemo();
        theApp.enterEventDispatcher();
    }

    GridFieldManagerDemo() 
    {
        pushScreen(new GridScreen());
    }
}

class GridScreen extends MainScreen
{
    public GridScreen() 
    {
        setTitle("GridFieldManager Demo");

        GridFieldManager grid = new GridFieldManager(2,3,0); 
        
        grid.add(new LabelField("one"));
        grid.add(new LabelField("two"));
        grid.add(new LabelField("three"));
        grid.add(new LabelField("four"));
        grid.add(new LabelField("five"));

        grid.setColumnPadding(20);
        grid.setRowPadding(20);

        add(grid);
        
        // The grid looks like this:
        
        //   |  one   |  two     | three
        //   |  four  |  five    |    

        // insert a cell first row, second column 
        grid.insert(new LabelField("insert"), 0, 1);
        
        // The grid now looks like this:
        
        //   |  one   |  insert  | two
        //   |  three |  four    | five   
        
        // delete a cell second row, second column
        grid.delete(1,1);

        // The grid now looks like this:
        
        //   |  one   |  insert  | two
        //   |  three |          | five   
        
        // Add field to first unoccupied cell
        grid.add(new LabelField("new"));   
        
        // The grid now looks like this:
        
        //   |  one   |  insert  | two
        //   |  three |   new    | five

    }
}