Et-Setera

I was recently struggling to understand how to text alignment works with the BlackBerry Graphics drawText function.  Having developed for MIDP on JavaME for a number of years, I found that the way the BlackBerry API works is a bit counter-intuitive until you understand how it works.  I expected that this code would work, based on JavaME:

protected void paint(Graphics graphics) {
// Stash the current colors and invert them for the
// background fill
int currentBgColor = graphics.getBackgroundColor();
int currentFgColor = graphics.getColor();
int w = getWidth();
int h = getHeight();

graphics.setColor(currentFgColor);
graphics.fillRect(0, 0, w, h);

graphics.setColor(currentBgColor);
graphics.setBackgroundColor(currentFgColor);

// Draw the pieces of text
int midHeight = h / 2;
int midWidth = w / 2;
buffer = new StringBuffer();
buffer.setLength(0);
buffer.append(“Moves: “).append(moves);
graphics.drawText(
buffer, 0, buffer.length(), w, midHeight, Graphics.VCENTER | Graphics.RIGHT, w);

buffer.setLength(0);
buffer.append(“Score: “).append(score);
graphics.drawText(
buffer, 0, buffer.length(), midWidth, midHeight, Graphics.VCENTER | Graphics.HCENTER, w);

graphics.drawText(statusText, 0, midHeight, Graphics.VCENTER | Graphics.LEFT);
}

I had expected three pieces of text, aligned right, left and center.  Instead, I ended up with:

The Graphics#drawText methods look similar to:

public int drawText (StringBuffer text,
int offset,
int len,
int x,
int y,
int flags,
int width)

The trick with this API has to do with that last parameter.  The width parameter is used to define a bounding box.  The x and y parameters define the top-left corner of that bounding box.  Horizontal alignment flags ( HCENTER and RIGHT ) do the alignment relative to the bounding box defined by (x, y, x + width, y + height) .  To get the same behavior I had expected, I needed to set the bounding box to include the complete width and then specify those alignment flags.  The correct code now looks more like the following:


protected void paint(Graphics graphics) {
// Stash the current colors and invert them for the
// background fill
int currentBgColor = graphics.getBackgroundColor();
int currentFgColor = graphics.getColor();
int w = getWidth();
int h = getHeight();

graphics.drawText(
statusText,
padding,
midHeight,
Graphics.VCENTER | Graphics.LEFT);
}

graphics.setColor(currentFgColor);
graphics.fillRect(0, 0, w, h);

graphics.setColor(currentBgColor);
graphics.setBackgroundColor(currentFgColor);

// Draw the pieces of text
int midHeight = h / 2;
int paddedWidth = w – (2 * padding);

buffer = new StringBuffer();
buffer.setLength(0);
buffer.append(“Moves: “).append(moves);
graphics.drawText(
buffer,
0,
buffer.length(),
padding,
midHeight,
Graphics.VCENTER | Graphics.RIGHT,
paddedWidth);

buffer.setLength(0);
buffer.append(“Score: “).append(score);
graphics.drawText(
buffer,
0,
buffer.length(),
padding,
midHeight,
Graphics.VCENTER | Graphics.HCENTER,
paddedWidth);

}

This results in expected text layout: