GridFieldManager will not span the entire screen width

Question

Ok, I'm developing for the blackberry Bold 9700 and I'm trying to get a 1X4 grid (1 row, 4 columns) to span the entire width of the blackberry screen, but it keeps coming up short. I mean, the grid is aligned to the left by default, which is fine if I can get the whole grid to span the entire width (it won't matter then). Can some developer tell me what I'm doing wrong? I thought you just add GridFieldManager.USE_ALL_WIDTH in the constructor when declaring a new grid but it still won't work for me.

final class App3_MainScreen extends MainScreen {
private int numColumns, size;
// Constructor
App3_MainScreen() {
    // declare a layout manager to take care of all the layout stuff
    numColumns = 4;
    size = 4;

    VerticalFieldManager vfm = new VerticalFieldManager();
    vfm.add(new LabelField("using all width & long label...", LabelField.ELLIPSIS | Field.FIELD_HCENTER));

    int borderHeight = Display.getHeight()/2;g
    int borderWidth = Display.getWidth()/2;

    Manager gridFieldManager = new GridFieldManager(1, 4, GridFieldManager.USE_ALL_WIDTH | GridFieldManager.AUTO_SIZE);    // 1 row and 4 columns
    gridFieldManager.add(new ButtonField(""+borderHeight, Field.FIELD_HCENTER));
    gridFieldManager.add(new ButtonField("222", Field.FIELD_HCENTER));
    gridFieldManager.add(new ButtonField("333", Field.FIELD_HCENTER));
    gridFieldManager.add(new ButtonField(""+borderWidth, Field.FIELD_RIGHT));

    // set padding around each buttonField - top=0, right=5, bottom=0, left=5
    gridFieldManager.setPadding(0, 5, 0, 5);
    int gfmHeight = 48 * (size / numColumns);
    gridFieldManager.setBorder(BorderFactory.createSimpleBorder(
            new XYEdges(borderHeight/10, 0, borderHeight/10, 0), // top, right, bottom, left
            Border.STYLE_DASHED));

    add(gridFieldManager);
}}

Answer 1

I've provided an example below that does the trick. It's based on the original code you provided, but is cleaned up and made generic for clarity.

Basically, GridFieldManager doesn't explicitly support USE_ALL_WIDTH. Being a Manager, it inherits this constant, but its documentation doesn't express that it is a supported state. Your best bet is to rely on the FIXED_SIZE state and calculate the width of each of your columns based on the size of the display (displayWidth / numColumns). Then you can use GridFieldManager#setColumnProperty() to define the fixed width for the columns.

Make sure to take into account the padding applied to the columns and you're good to go.

Hope this helps.

/**
 * Shows an example implementation of how to have a GridFieldManager
 * sized to the width of the Display.
 */
final class ScreenWidthGridExample extends MainScreen
{
    /**
     * Number of rows in the grid.
     */
    private static final int NUM_ROWS = 1;

    /**
     * Number of columns in the grid.
     */
    private static final int NUM_COLUMNS = 4;

    /**
     * The grid's column padding.
     */
    private static final int COLUMN_PADDING = 5;

    /**
     * Toggle switch to show the border around the grid.
     */
    private static final boolean SHOW_BORDER = true;

    /**
     * Allocated a new instance of the ScreenWidthGridExample.
     */
    ScreenWidthGridExample() {
        // Set up the GridFieldManager
        GridFieldManager gfm =
                new GridFieldManager(NUM_ROWS, NUM_COLUMNS, 
                GridFieldManager.FIXED_SIZE);
        gfm.setColumnPadding(COLUMN_PADDING);
        if(SHOW_BORDER) {
            gfm.setBorder(BorderFactory.createSimpleBorder(
                    new XYEdges(0, 0, 0, 0), // top, right, bottom, left
                    Border.STYLE_DASHED));
        }
        add(gfm);

        // Size the columns of the GridFieldManager. Make sure to calculate
        // for the padding applied to the columns.
        int columnWidth = (Display.getWidth() / NUM_COLUMNS) - 
                gfm.getColumnPadding();
        for(int i = 0; i < NUM_COLUMNS; i++) {
            gfm.setColumnProperty(i, GridFieldManager.FIXED_SIZE, columnWidth);
        }

        // Populate the columns.
        gfm.add(new ButtonField("1", Field.FIELD_HCENTER));
        gfm.add(new ButtonField("2", Field.FIELD_HCENTER));
        gfm.add(new ButtonField("3", Field.FIELD_HCENTER));
        gfm.add(new ButtonField("4", Field.FIELD_HCENTER));
    }
}