I made some small tweaks to the GridFieldManager - a couple of new constructors that allow you to specify (in pixels) the widths of the individual columns, and the height for the rows (so that all rows have the same height instead of them being dynamically calculated).
As usual, the latest version is available here
This makes it for example easy to do a nice looking set of right-aligned labels and fields:
setTitle("Login");
Manager gridFieldManager = new GridFieldManager(new int[] {100, 160}, 30, 0);
// Row 1
gridFieldManager.add(new LabelField("Username:", Field.FIELD_RIGHT | Field.FIELD_VCENTER));
gridFieldManager.add(new BasicEditField("", "Jimbo", 200, Field.FIELD_LEFT | Field.FIELD_VCENTER));
// Row 2
gridFieldManager.add(new LabelField("Password:", Field.FIELD_RIGHT | Field.FIELD_VCENTER));
gridFieldManager.add(new PasswordEditField("", "password123", 200, Field.FIELD_LEFT | Field.FIELD_VCENTER));
add(gridFieldManager);
add(new ButtonField("Login", Field.FIELD_HCENTER));
Gives this:
Of course you probably want to specify the 2nd column relative to the screen width and the first column (e.g. Display.getWidth()-100, instead of just 160).
16 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
download link is dead, don’t bother
Sorry about that - I updated the link in the post, it should work now.
long sought ways to implement a grid that automatically adjust the controls.
congratulations great job.
Great job!
I try to do something similar but i have a lot of problem with style…
Thanks!
Thank you for this.
We’ve tweaked it a bit to changing the behavior when it reaches the edges of the grid so that it wraps around, but all in all it is an elegant and simple solution.
You rock.
Hi, I’ve worked out how to set field font color but can’t working out how to set font type (specifically Bold). This is what I do for color. Any hints of font type?
GridFieldManager.add(new LabelField(”My Text Here”){
public void paint(Graphics graphics){
graphics.setColor(464646);
super.paint(graphics);
}
});
Hi Ben,
I’ll do a post covering this at some point, but basically you need to use graphics.setFont() (you probably figured that out).
To get a specific font, you can either derive from a known font that you have - using one of the font.derive methods (which take a size, style, etc), or get a new FontFamily using FontFamily.forName() (look at your device options under screen and keyboard for a list of names) and derive a font from that.
Anthony
Hi Anthony,
I have a problem when the field in the manager exceeds the manager height, the field below is clipped. I try to make the manager able to do vertical scroll, but it doesn’t give any change. Can you help me?
Sorry for my bad English.
I added some code to the sublayout-method that automaticcaly set the widths of columns that are manually set to a width of 0. So if you want to have a layout width two columns and only want to specify the width of the first column you can do it like that:
GridFieldManager mgrMain = new GridFieldManager(new int[] {80, 0}, 50, 0);
I added the code as “else-leaf” of “if columns==0:
if (columnWidths == null) {
columnWidths = new int[columns];
for(int i = 0; i < columns; i++) {
columnWidths[i] = width/columns;
}
} else {
//Set the width of all columns that have a width of 0 to a valuable standard-value
int widthRest = width;
int zeroColumns = 0;
for (int i=0; i<columns; i++) {
if (columnWidths[i]==0)
zeroColumns++;
else
widthRest=widthRest-columnWidths[i];
}
for (int i=0; i<columns; i++) {
if (columnWidths[i]==0)
columnWidths[i]=widthRest/zeroColumns;
}
}
In your new constructor, you should copy the columnWidths array so that the class doesn’t have any internal members that are mutable by the outside.
Just change the assignment to:
this.columnWidths = Arrays.copy(columnWidths);
and add the following import:
import net.rim.device.api.util.Arrays;
Very much appreciate the grid layout example. I’m trying to add a leftmost column that won’t receive focus and is half the width of the columns in my 10 column wide grid. I created VerticalManager1 for the label column and VerticalManager2 that has the grid itself added. When I try to add each to my mainHorizontalManager manager however, only the label column appears. The grid (VerticalManager2) does appear correctly if I don’t add VerticalManager1. Any thoughts on why a GridFieldManager doesn’t appear to be able to coexist with a VerticalFieldManager to its left within a single HorizontalFieldManager?
I figured my problem out - its necessary to limit the portion of the screen width that each VerticalFieldManager will have available:
VerticalManager1 = new VerticalFieldManager(Manager.VERTICAL_SCROLL){
protected void sublayout(int width, int height) {
super.sublayout(Display.getWidth()/3, height);
}
};
VerticalManager2 = new VerticalFieldManager(Manager.VERTICAL_SCROLL|Manager.HORIZONTAL_SCROLL){
protected void sublayout(int width, int height) {
super.sublayout((Display.getWidth()/3)*2, height);
}
};
Like Achim I added some code to autosize remaining columns (except I used negative numbers).
I also had a problem when tilting the Storm - it didn’t update the widths. This was because one run through would save the widths for whichever orientation it was on, and then tilting it, it would redraw with the other widths.
I’ve changed the class member columnWidths to givenColumnWidths and made the following changes to the sublayout method:
int[] columnWidths = new int[columns];
if (givenColumnWidths == null) {
for(int i = 0; i < columns; i++) {
columnWidths[i] = width/columns;
}
}else{
int calcWidth = 0;
int negCount = 0;
for(int i = 0; i < givenColumnWidths.length; i++){
if( givenColumnWidths[i] 0 ){
// split width with negative columns
for(int i = 0; i < givenColumnWidths.length; i++){
if( givenColumnWidths[i] < 0 ){
columnWidths[i] = (width - calcWidth)/negCount;
}else{
columnWidths[i] = givenColumnWidths[i];
}
}
}
}
Thank you.
I was even able to embed a HorizFM in a ‘cell’ of a grid and get two smaller items to fit in a column. It works fantastic.
It should have been included in the default UI tooset.
Very nice Anthony! Thanks for making this available.
Esta pagina esta cool ando programando en blacikberry y no he encontrado tantos ejemplos mi email es diego_carchipulla@hotmail.com o diego@mediaenjoy.com