Related
I'm using vaadin tree table, and I want to set 1st column colspan (equal to the total number of column in table) for some of the rows satisfying some business criteria. For the rest of table rows, individual columns will appear normally.
I've tried using generated columns, and by setting explicit column width, and also by having composite columns; but doing so changes the layout for all the row/columns. Kindly suggest how will we achieve this.
Thanks!
You can set the width of a column by calling TreeTable#setColumnExpandRatio(String columnName, float value).
In the example below, I've set the width of column "Name" to 75%. If you don't specify anything else, the rest of the columns will fit in the rest of the space.
ttable.setColumnExpandRatio("Name", 0.75f);
ttable.setColumnExpandRatio("Number", 0.25f); //not necessary
Try the example below that I modified from Vaadin book:
#Theme("mytheme")
public class MyUI extends UI {
#Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
layout.setSizeFull();
TreeTable ttable = new TreeTable();
ttable.addContainerProperty("Name", String.class, null);
ttable.addContainerProperty("Number", Integer.class, null);
//Add some sample data
ttable.addItem(new Object[]{"Menu", null}, 0);
ttable.addItem(new Object[]{"Beverages", null}, 1);
ttable.setParent(1, 0);
ttable.addItem(new Object[]{"Foods", null}, 2);
ttable.setParent(2, 0);
ttable.addItem(new Object[]{"Coffee", 23}, 3);
ttable.addItem(new Object[]{"Tea", 42}, 4);
ttable.setParent(3, 1);
ttable.setParent(4, 1);
ttable.addItem(new Object[]{"Bread", 13}, 5);
ttable.addItem(new Object[]{"Cake", 11}, 6);
ttable.setParent(5, 2);
ttable.setParent(6, 2);
ttable.setColumnExpandRatio("Name", 0.75f);
ttable.setColumnExpandRatio("Number", 0.25f);
ttable.setSizeFull();
layout.addComponents(ttable);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);
}
#WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
#VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
You can use com.vaadin.ui.Table.setRowGenerator:
Example with Java 8 + Vaadin 7.6.1
setRowGenerator((Table table, Object itemId) -> {
if (itemId instanceof MyClassThatIdentifiesARowToMerge) {
Table.GeneratedRow generatedRow = new Table.GeneratedRow("text-of-merged-cell");
generatedRow.setSpanColumns(true);
return generatedRow; // merge
}
return null; // doesn't merge
} );
I am trying to achieve a flat look for blackberry controls, namely objectchoicefield and buttonfield.
The following code does not seem to do the trick. (The width setting does work, but not the border setting.)
public static ObjectChoiceField GetDropdownList(String label, String[] data)
{
ObjectChoiceField ocf = new ObjectChoiceField(null, data, 0, Field.FIELD_LEFT);
ocf.setBorder(BorderFactory.createSimpleBorder(new XYEdges(0,0,0,0)));
ocf.setMinimalWidth(Display.getWidth()-61);
return ocf;
}
I get the same appearance with or without the setBorder statement. Basically I do not want any 3D look or shadow or shine or rounded corners.
Thanks
This might not do everything you want, but you can try looking at this custom ObjectChoiceField that I built for OS 4.6 and lower devices. I wanted to add a glossy, 3D look, but you could change the custom paint() code I used to make a simpler, flatter look.
Taking my example, changing the rounded corner radius to 1, and removing the call to super.paint(g) gives something like this:
public class CustomChoiceField extends ObjectChoiceField {
private int _bgWidth = 0;
private int _bgHeight = 0;
private int _numChoices = 0;
private boolean _hasFocus = false;
private static final int HIGHLIGHT_COLOR = 0xFF185AB5; // blue-ish
private static final int RADIUS = 1; // rounded corner radius in pixels
private static final int DFLT_PADDING = 20;
public CustomChoiceField(Object[] choices, int initialIndex) {
super("", choices, initialIndex);
_numChoices = choices.length;
}
public int getPreferredHeight() {
return _bgHeight;
}
public int getPreferredWidth() {
return _bgWidth;
}
protected void layout(int width, int height) {
if (_bgWidth == 0 || _bgHeight == 0) {
if (height <= Display.getHeight()) {
// probably using custom Manager to specify size
_bgWidth = width;
_bgHeight = height;
} else {
// use default sizing
_bgHeight = DFLT_PADDING + getHeightOfChoices();
for (int i = 0; i < _numChoices; i++) {
_bgWidth = Math.max(_bgWidth, DFLT_PADDING + getWidthOfChoice(i));
}
}
}
super.layout(_bgWidth, _bgHeight);
super.setExtent(_bgWidth, _bgHeight);
}
protected void applyTheme(Graphics arg0, boolean arg1) {
// do nothing
}
protected void drawFocus(Graphics g, boolean on) {
// do nothing .. handled manually in paint(g)
}
protected void onFocus(int direction) {
_hasFocus = true;
super.onFocus(direction);
invalidate();
}
protected void onUnfocus() {
_hasFocus = false;
super.onUnfocus();
invalidate(); // required to clear focus
}
protected void paint(Graphics g) {
int oldColor = g.getColor();
// field color depends on whether we have focus or not
int bgColor = (_hasFocus) ? HIGHLIGHT_COLOR : Color.BLACK;
// when the field has focus, we make it a little less transparent
int alpha = (_hasFocus) ? 0xDD : 0xBB;
g.setColor(bgColor);
g.setGlobalAlpha(alpha);
g.fillRoundRect(0, 0, _bgWidth, _bgHeight, RADIUS, RADIUS);
// draw a plain white line as a border
g.setColor(Color.WHITE);
g.setGlobalAlpha(0xFF);
g.drawRoundRect(0, 0, _bgWidth, _bgHeight, RADIUS, RADIUS);
// draw the currently selected choice's text (also in white)
String text = (String)getChoice(getSelectedIndex());
int y = (_bgHeight - getFont().getHeight()) / 2;
g.drawText(text, 0, y, DrawStyle.HCENTER | DrawStyle.TOP, _bgWidth);
g.setColor(oldColor);
}
}
And you use the CustomChoiceField like this:
private ObjectChoiceField[] ocf = new ObjectChoiceField[3];
public ObjectChoiceScreen() {
super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
Object[] choices1 = new Object[] { "one", "two", "three" };
ocf[0] = new CustomChoiceField(choices1, 0);
Object[] choices2 = new Object[] { "ichi", "ni", "san" };
ocf[1] = new CustomChoiceField(choices2, 0);
Object[] choices3 = new Object[] { "uno", "dos", "tres" };
ocf[2] = new CustomChoiceField(choices3, 0);
for (int i = 0; i < ocf.length; i++) {
ocf[i].setMargin(new XYEdges(10, 10, 10, 10));
}
getMainManager().addAll(ocf);
This isn't production code, so you'll need to test it yourself. For example, it doesn't handle changing the choices with setChoices(). But, it's a start, and will get you something like this:
You'll notice the difference in color between the first two object choice fields, and the bottom one, which is focused.
My code has the same popup for selecting choices as the normal ObjectChoiceField. So, you still may get rounded corners that way. In my case, I didn't need to change that look and feel, so I'm not sure how you might change that, too.
This is before focus state. It work fine.
This is on focusing state. It work fine.
This is after focus state. It occurred problem where the image gone.
It works fine for the top right but top left image got problem.
Here is my custom VerticalFieldManager:
public class Custom_TopField extends HorizontalFieldManager implements
FieldChangeListener {
private Bitmap bg = Bitmap.getBitmapResource("header_bar.png");
private Bitmap download = Bitmap.getBitmapResource("btn_download.png");
private Bitmap downloadactive = Bitmap
.getBitmapResource("btn_download_active.png");
private Bitmap refresh = Bitmap.getBitmapResource("icon_refresh.png");
private Bitmap refreshactive = Bitmap
.getBitmapResource("icon_refresh_active.png");
private Bitmap back = Bitmap.getBitmapResource("btn_back.png");
private Bitmap backctive = Bitmap.getBitmapResource("btn_back_active.png");
private Bitmap news = Bitmap.getBitmapResource("icon_news.png");
private Bitmap newsactive = Bitmap
.getBitmapResource("icon_news_active.png");
private Custom_ButtonField downloadbtn, refreshbtn, backbtn, newsbtn;
private Custom_LabelField title;
Custom_TopField(final MainScreen mainscreen) {
Background background = BackgroundFactory.createBitmapBackground(bg);
setBackground(background);
title = new Custom_LabelField("东方日报", DrawStyle.ELLIPSIS
| LabelField.USE_ALL_WIDTH | DrawStyle.HCENTER
| Field.FOCUSABLE, Color.WHITE) {
protected boolean navigationClick(int status, int time) {
Main.getUiApplication().pushScreen(new Main_AllLatestNews());
Main.getUiApplication().popScreen(mainscreen);
return true;
}
};
title.setFont(Font.getDefault().derive(Font.BOLD, 33));
add(title);
downloadbtn = new Custom_ButtonField(download, downloadactive,
downloadactive);
downloadbtn.setChangeListener(this);
add(downloadbtn);
refreshbtn = new Custom_ButtonField(refresh, refreshactive,
refreshactive);
refreshbtn.setChangeListener(this);
add(refreshbtn);
backbtn = new Custom_ButtonField(back, backctive, backctive);
backbtn.setChangeListener(this);
add(backbtn);
/*newsbtn = new Custom_ButtonField(news, newsactive, newsactive);
newsbtn.setChangeListener(this);
add(newsbtn);*/
}
protected void sublayout(int width, int height) {
Field field = getField(0);
layoutChild(field, 120, Font.getDefault().getHeight());
setPositionChild(field, (getPreferredWidth() - title.getWidth()) / 2,
15);
field = getField(1);
layoutChild(field, download.getWidth(), download.getHeight());
setPositionChild(field, getPreferredWidth()
- (download.getWidth() + 10),
getPreferredHeight() - (download.getHeight() + 5));
field = getField(2);
layoutChild(field, refresh.getWidth(), refresh.getHeight());
setPositionChild(field,
getPreferredWidth() - (refresh.getWidth() + 10),
getPreferredHeight() - (refresh.getHeight() + 5));
field = getField(3);
layoutChild(field, back.getWidth(), back.getHeight());
setPositionChild(field, 10, 5);
/*field = getField(4);
layoutChild(field, news.getWidth(), news.getHeight());
setPositionChild(field, 10, 5);*/
width = Math.min(width, getPreferredWidth());
height = Math.min(height, getPreferredHeight());
setExtent(width, height);
}
public int getPreferredHeight() {
return 70;
}
public int getPreferredWidth() {
return Display.getWidth();
}
public void paint(Graphics graphics) {
int rectHeight = getPreferredHeight();
int rectWidth = getPreferredWidth();
graphics.drawRect(0, 0, rectWidth, rectHeight);
super.paint(graphics);
}
public void fieldChanged(Field field, int context) {
if (field == downloadbtn) {
} else if (field == refreshbtn) {
} else if (field == backbtn) {
} else if (field == newsbtn) {
}
}
}
Here is custom button field
public class Custom_ButtonField extends ButtonField {
Bitmap mNormal;
Bitmap mFocused;
Bitmap mActive;
int mWidth;
int mHeight;
private int color = -1;
String text;
public Custom_ButtonField(Bitmap normal, Bitmap focused, Bitmap active) {
super(CONSUME_CLICK | Field.FOCUSABLE);
mNormal = normal;
mFocused = focused;
mActive = active;
mWidth = mNormal.getWidth();
mHeight = mNormal.getHeight();
setMargin(0, 0, 0, 0);
setPadding(0, 0, 0, 0);
setBorder(BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
setBorder(VISUAL_STATE_ACTIVE,
BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
}
public Custom_ButtonField(String text, Bitmap normal, Bitmap focused,
Bitmap active, int color) {
super(CONSUME_CLICK | Field.FOCUSABLE);
this.color = color;
mNormal = normal;
mFocused = focused;
mActive = active;
mWidth = mNormal.getWidth();
mHeight = mNormal.getHeight();
setMargin(0, 0, 0, 0);
setPadding(0, 0, 0, 0);
setBorder(BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
setBorder(VISUAL_STATE_ACTIVE,
BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
this.text = text;
}
protected void onFocus(int direction) {
super.onFocus(direction);
}
protected void onUnfocus() {
super.onUnfocus();
}
protected void paint(Graphics graphics) {
Bitmap bitmap = null;
switch (getVisualState()) {
case VISUAL_STATE_NORMAL:
bitmap = mNormal;
break;
case VISUAL_STATE_FOCUS:
bitmap = mFocused;
break;
case VISUAL_STATE_ACTIVE:
bitmap = mActive;
break;
default:
bitmap = mNormal;
}
graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
bitmap, 0, 0);
graphics.setFont(Font.getDefault().derive(Font.BOLD, 25));
graphics.setColor(color);
graphics.drawText(text, (mNormal.getWidth() - Font.getDefault()
.getAdvance(text)) / 2, ((mNormal.getHeight() - Font
.getDefault().getHeight()) / 2) + 10, DrawStyle.HCENTER
| DrawStyle.VCENTER);
}
public int getPreferredWidth() {
return mWidth;
}
public int getPreferredHeight() {
return mHeight;
}
protected void layout(int width, int height) {
setExtent(mWidth, mHeight);
}
}
This is the second problem just like this I've seen in the last couple weeks.
Background
To understand the solution, first you should understand the basic UI classes in BlackBerry.
First, we have the Field class. A Field is the base class of the normal UI components. If you write a UI component yourself, from scratch, then you would subclass Field:
public class MyWidget extends Field {
However, if there already exists a BlackBerry class that does almost what you need, and you just need to change its behaviour a bit, then you would subclass something else. For example:
public class MyButtonWidget extends ButtonField {
The same pattern exists for the Manager class. If you are writing a Manager from scratch, then extend Manager:
public class MyManager extends Manager {
which involves doing this, according to the BlackBerry docs:
Implementing your own layout manager
If you have particular needs, you
can implement your own manager. Extend the Manager class, and
implement sublayout, getPreferredWidth, and getPreferredHeight. For
efficiency, you may optionally override subpaint.
However, if an existing Manager subclass already does most of what you need, and you just want to customize it, then you might consider extending that subclass:
public class MyHorizontalManager extends HorizontalFieldManager {
In your case, your Custom_TopField is doing all of the required work for a fully custom Manager (see the highlighted quote above from the javadocs). So, there's not really any reason for you to extend HorizontalFieldManager. A HorizontalFieldManager is used when you just want to add() your fields, and have them all laid out horizontally. But, you do that explicitly in your sublayout() code. As it turns out, it looks like your logic is competing with the base class.
Solution
So, what you should do, is have your class just extend Manager:
public class Custom_TopField extends Manager implements FieldChangeListener {
If you do that, you will need to call a different super constructor. Something like this (you might want to pick different style constants depending on your needs):
Custom_TopField(final MainScreen mainscreen) {
super(Manager.USE_ALL_WIDTH | Manager.NO_VERTICAL_SCROLL | Manager.NO_HORIZONTAL_SCROLL);
Another alternative would be to simply not implement sublayout(), extend HorizontalFieldManager like you originally had, and then control layout with the child fields' margins and long style flags. But, since the solution I gave above requires only changing 2 lines of code, that's probably the easiest for you this time.
Other Problem(s)
I also noticed in your code, and screenshots, that the Download button doesn't show up. I don't know the exact size of all your png images, but if the refresh and download images are the same size, then your current logic is just laying out the refresh button right over the download button. So, the download button is hidden. That's probably not what you want?
I want my application to align two field, one to left and other to extreme left of the screen. For that i am using GridLayoutManager class. Here is my code
GridFieldManager gridFieldManager = new GridFieldManager(2,2, GridFieldManager.PREFERRED_SIZE_WITH_MAXIMUM);
gridFieldManager.add(new ButtonField("Button One"), Field.FIELD_HCENTER);
gridFieldManager.add(new ButtonField("Button Two"), Field.FIELD_RIGHT);
gridFieldManager.add(new ButtonField("HC", Field.FIELD_HCENTER));
gridFieldManager.add(new ButtonField("RT", Field.FIELD_RIGHT));
add(gridFieldManager);
And, here is my output in simulator
Can anyone please help me to align the Button Two to the extreme right of the screen ? Any help will be appreciated.
Basically it's all a matter of alignment flags and grid's column properties.
Changing the GridFieldManager style to Manager.USE_ALL_WIDTH and setting column properties to GridFieldManager.AUTO_SIZE makes all the available space to be divided evently among the two columns.
gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);
The following code snippet
GridFieldManager gridFieldManager = new GridFieldManager(2,2, Manager.USE_ALL_WIDTH);
gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.add(new ButtonField("Button One"), Field.FIELD_LEFT);
gridFieldManager.add(new ButtonField("Button Two"), Field.FIELD_RIGHT);
gridFieldManager.add(new ButtonField("HC"), Field.FIELD_LEFT);
gridFieldManager.add(new ButtonField("RT"), Field.FIELD_RIGHT);
add(gridFieldManager);
produces
This slightly modified code snippet
GridFieldManager gridFieldManager = new GridFieldManager(1,2, Manager.USE_ALL_WIDTH);
gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);
VerticalFieldManager vfmLeft = new VerticalFieldManager();
vfmLeft.add(new ButtonField("Button One", Field.FIELD_HCENTER));
vfmLeft.add(new ButtonField("HC", Field.FIELD_HCENTER));
gridFieldManager.add(vfmLeft, Field.FIELD_LEFT);
VerticalFieldManager vfmRight = new VerticalFieldManager();
vfmRight.add(new ButtonField("Button Two", Field.FIELD_HCENTER));
vfmRight.add(new ButtonField("RT", Field.FIELD_HCENTER));
gridFieldManager.add(vfmRight, Field.FIELD_RIGHT);
add(gridFieldManager);
produces
Finally, to illustrate what I said previously about the available space being divided evently among the two columns, the following code snippet
GridFieldManager gridFieldManager = new GridFieldManager(1,2, Manager.USE_ALL_WIDTH | Manager.USE_ALL_HEIGHT);
gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setRowProperty(0, GridFieldManager.AUTO_SIZE, 0);
VerticalFieldManager vfmLeft = new VerticalFieldManager(Manager.USE_ALL_WIDTH | Manager.USE_ALL_HEIGHT);
vfmLeft.setBackground(BackgroundFactory.createSolidBackground(Color.CYAN));
gridFieldManager.add(vfmLeft);
VerticalFieldManager vfmRight = new VerticalFieldManager(Manager.USE_ALL_WIDTH | Manager.USE_ALL_HEIGHT);
vfmRight.setBackground(BackgroundFactory.createSolidBackground(Color.GRAY));
gridFieldManager.add(vfmRight);
add(gridFieldManager);
produces two columns of equal size.
Please use this following class.
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.container.HorizontalFieldManager;
public class HFMLeftFieldRightField extends HorizontalFieldManager {
private Field leftField;
private Field rightField;
private final static int TOP_MARGIN = 0;
private final static int LEFT_MARGIN = 30;
public HFMLeftFieldRightField() {
super(USE_ALL_WIDTH);
}
public HFMLeftFieldRightField(boolean isQatari) {
super(USE_ALL_WIDTH | Field.FIELD_LEFT);
}
public void sublayout(int maxWidth, int maxHeight) {
super.sublayout(maxWidth, maxHeight);
int width = getWidth();
if (rightField != null) {
int x = width - rightField.getWidth() - LEFT_MARGIN;
int y = TOP_MARGIN;
setPositionChild(rightField, x, y);
}
if (leftField != null) {
int y = TOP_MARGIN+rightField.getHeight()/5;
int x = LEFT_MARGIN;
setPositionChild(leftField, 0, y);
}
setExtent(maxWidth, rightField.getHeight() + TOP_MARGIN * 2);
}
public void setLeftButton(Field leftField) {
this.leftField = leftField;
super.add(leftField);
}
public void setRightButton(Field rightField) {
this.rightField = rightField;
super.add(rightField);
}
}
And add field this way.
HFMLeftFieldRightField hfm = new HFMLeftFieldRightField();
hfm.setLeftButton(new EditField("Left"));
hfm.setRightButton(new EditField("Right"));
add(hfm);
More detail http://keraisureshvblackberry.blogspot.in/2012/02/there-are-very-common-there-there-are.html
Hope helpfull..
It seems like you should use JustifiedHorizontalFieldManager instead of GridFieldManager. JustifiedHorizontalFieldManager is not a standard manager included in BlackBerry SDK, but a member of a set of UI components released by RIM later to help developers build more rich UI Interfaces. You have to download the code from here, add it to your proyect and then include the following line:
JustifiedHorizontalFieldManager justifiedManager = new JustifiedHorizontalFieldManager(buttonOne, buttonTwo, false, USE_ALL_WIDTH );
Change the style parameter of your gridFieldManager constructor to
GridFieldManager.USE_ALL_WIDTH
It should be like this
GridFieldManager gridFieldManager = new GridFieldManager(2,2,GridFieldManager.USE_ALL_WIDTH );
I'm trying to move an app from using a KeywordFilterField to ListField and I'm struggling since several hours to find out, why is drawListRow() called with different y values - depending on which of these two ListField's I use:
If getRowHeight() returns 40, then the y values will be -
For KeywordFilterField are: 0; 40; 80; 120; ... (i.e. as expected)
But for Listfield I see: 9; 49; 89; 129; ... (i.e. offset by 9 for some reason)
Where is the 9 coming from? Is there a method in ListField or ListFieldCallback which I could call to get this value? I'm just trying to draw a light gray line between items of the list.
Below is my test code and the border.png (used as BasicEditField border) is attached:
package mypackage;
import java.util.*;
import net.rim.device.api.collection.*;
import net.rim.device.api.collection.util.*;
import net.rim.device.api.system.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
import net.rim.device.api.ui.decor.*;
import net.rim.device.api.util.*;
public class MyList extends UiApplication {
public static void main(String args[]) {
MyList app = new MyList();
app.enterEventDispatcher();
}
public MyList() {
pushScreen(new MyScreen());
}
}
class MyScreen extends MainScreen {
static final int EXTRA_ROWS = 2;
MyItemList myItems = new MyItemList();
ListField myList = new ListField(EXTRA_ROWS);
Border myBorder = BorderFactory.createBitmapBorder(
new XYEdges(12, 12, 12, 12),
Bitmap.getBitmapResource("border.png"));
Background myBg = BackgroundFactory.createSolidBackground(0x111111);
StringProvider myProvider = new StringProvider("Search");
BasicEditField myFind = new BasicEditField(USE_ALL_WIDTH) {
protected void paint(Graphics g) {
if (getTextLength() == 0) {
g.setColor(Color.LIGHTGRAY);
g.drawText(myProvider.toString(), 0, 0);
}
g.setColor(Color.BLACK);
super.paint(g);
}
};
public MyScreen() {
getMainManager().setBackground(myBg);
myFind.setBorder(myBorder);
setTitle(myFind);
myItems.doAdd(new MyItem(1, "Eins"));
myItems.doAdd(new MyItem(2, "Zwei"));
myItems.doAdd(new MyItem(3, "Drei"));
myItems.doAdd(new MyItem(4, "Vier"));
myList.setCallback(new MyListFieldCallback());
add(myList);
}
private class MyListFieldCallback implements ListFieldCallback {
public void drawListRow(ListField list, Graphics g, int index, int y, int width) {
System.err.println("XXX index=" + index+ ", y=" + y + ", width=" + width);
g.setColor(Color.WHITE);
if (index < EXTRA_ROWS) {
Font i = getFont().derive(Font.ITALIC);
g.setFont(i);
g.drawText("Add Item", 0, y);
return;
}
if (index >= EXTRA_ROWS) {
MyItem item = (MyItem) myItems.getAt(index - EXTRA_ROWS);
g.drawText(item.toString(), 0, y);
g.setColor(0x333333);
// XXX why do I need to subtract 9 here?
g.drawLine(0, y-9, width, y-9);
return;
}
g.drawText(list.getEmptyString(), 0, y);
}
public Object get(ListField list, int index) {
return myItems.getAt(index);
}
public int getPreferredWidth(ListField list) {
return Display.getWidth();
}
public int indexOfList(ListField list, String prefix, int start) {
return 0;
}
}
class MyItemList extends SortedReadableList {
public MyItemList() {
super(new MyItem.MyComparator());
}
protected void doAdd(Object obj) {
super.doAdd(obj);
myList.setSize(size() + EXTRA_ROWS);
}
protected boolean doRemove(Object obj) {
myList.setSize(size() - 1 + EXTRA_ROWS);
return super.doRemove(obj);
}
}
}
class MyItem {
int _num;
String _name;
public MyItem(int num, String name) {
_num = num;
_name = name;
}
public String toString() {
return _num + ": " + _name;
}
static class MyComparator implements Comparator {
public int compare(Object obj1, Object obj2) {
MyItem item1 = (MyItem) obj1;
MyItem item2 = (MyItem) obj2;
return item1.toString().compareTo(item2.toString());
}
}
static class MyProvider implements KeywordProvider {
public String[] getKeywords(Object obj) {
MyItem item = (MyItem) obj;
return new String[]{ Integer.toString(item._num), item._name };
}
}
}
The produced output is:
[ 64,890] XXX index=0, y=9, width=360
[ 64,890] XXX index=1, y=49, width=360
[ 64,898] XXX index=2, y=89, width=360
[ 64,898] XXX index=3, y=129, width=360
[ 64,906] XXX index=4, y=169, width=360
[ 64,906] XXX index=5, y=209, width=360
UPDATE in reply to jprofitt
When I try your suggestion (I use red color for your text and lines):
if (index >= EXTRA_ROWS) {
MyItem item = (MyItem) myItems.getAt(index - EXTRA_ROWS);
g.drawText(item.toString(), 0, y);
g.setColor(Color.RED);
g.drawText("XXX", 0, y + (list.getRowHeight() - list.getFont().getHeight())/2);
g.setColor(0x333333);
// XXX why do I need to subtract 9 here?
g.drawLine(0, y-9, width, y-9);
g.setColor(Color.RED);
g.drawLine(0, y, width, y);
return;
}
Then it doesn't really work - because the blue focus line does not align with your suggested (red) lines. It aligns with my (gray) lines, which means you really need to subtract -9 for some reason:
Thank you!
Alex
Yes, this is an odd behaviour. I guess this is smth OS 6 specific. Looks like in OS 6 ListField became so clever that it passes Y coordinate already prepared for direct usage in text drawing, so you don't have to do manual calculation (usually I calculate Y for text drawing in the same way jprofitt suggests). So assuming my guess is true I changed the code as follows:
if (index >= EXTRA_ROWS) {
MyItem item = (MyItem) myItems.getAt(index - EXTRA_ROWS);
g.drawText(item.toString(), 0, y);
g.setColor(0x333333);
// XXX why do I need to subtract 9 here?
// use the offset instead
int offset = (myList.getRowHeight() - getFont().getHeight()) >> 1;
g.drawLine(0, y - offset, width, y - offset);
return;
}
and it works fine (tested on all font sizes that are available in device settings).
Alright I believe I got this figured out. What is going on is that your row height is greater than the font height. So when you draw your text right at y, you are drawing it top aligned to the actual row. In my case, row height was 40 and font height was 20. Half of that difference is where your y - 9 was coming in. If you change your drawText() calls to this, it should work without needing to subtract anything when drawing the line:
g.drawText(theString, 0, y + (list.getRowHeight() - list.getFont().getHeight())/2);
You could cache the font height and row height so you don't have to do the calculations in paint(), for efficiency's sake.