how to do instant update in BB RIM? - blackberry

I want to manually display a field.
public class Main_NewsDetail extends MainScreen {
private Custom_FontField slider;
private boolean a;
public Main_NewsDetail() {
super(USE_ALL_WIDTH);
slider = new Custom_FontField(
Bitmap.getBitmapResource("slider_thumb_normal.png"),
Bitmap.getBitmapResource("slider_progress_normal.png"),
Bitmap.getBitmapResource("slider_base_normal.png"),
Bitmap.getBitmapResource("slider_thumb_focused.png"),
Bitmap.getBitmapResource("slider_progress_focused.png"),
Bitmap.getBitmapResource("slider_base_focused.png"),
Bitmap.getBitmapResource("slider_thumb_pressed.png"),
Bitmap.getBitmapResource("slider_progress_pressed.png"),
Bitmap.getBitmapResource("slider_base_pressed.png"), 35, 10, 5,
5, FOCUSABLE);
if(a)
add(slider);
}
public class Custom_NewsDetailBottom extends Manager implements
FieldChangeListener {
Custom_NewsDetailBottom() {
super(Manager.USE_ALL_WIDTH | Manager.NO_VERTICAL_SCROLL
| Manager.NO_HORIZONTAL_SCROLL);
Background background = BackgroundFactory
.createBitmapBackground(bg);
setBackground(background);
fontbtn = new Custom_ButtonField(font, fontactive, fontactive) {
protected boolean navigationClick(int status, int time) {
a = !a; <-- here is to control field display
return true;
}
};
fontbtn.setChangeListener(this);
add(fontbtn);
}
protected void sublayout(int width, int height) {
Field field = getField(0);
layoutChild(field, font.getWidth(), font.getHeight());
setPositionChild(field, getGap(), 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();
}
protected void paint(Graphics graphics) {
int rectHeight = getPreferredHeight();
int rectWidth = getPreferredWidth();
graphics.drawRect(0, 0, rectWidth, rectHeight);
super.paint(graphics);
}
private int getGap() {
return ((getPreferredWidth() / 4) - font.getWidth()) / 2;
}
public void fieldChanged(Field field, int context) {
if (field == sharebtn) {
} else if (field == commentbtn) {
Main.getUiApplication().pushScreen(new Main_Comments());
} else if (field == otherbtn) {
Main.getUiApplication().pushScreen(new Menu_Others());
}
}
public boolean keyDown(int keycode, int status) {
if (Keypad.key(keycode) == Keypad.KEY_ESCAPE) {
delete(slider);
return true;
}
return super.keyDown(keycode, status);
}
}
}
Above is the code that display a screen. In fontbtn, When click will change the variable true / false. However, it cannot update instant to display the field slider.
slider is something like seekbar in Android. In android, when click then can setvisibility but not blackberry RIM, so how to control it?

First of all, I would recommend not using variables with names like this if you can avoid it:
private boolean a;
Try to give it a name that's more descriptive, as that will help us understand your code better.
Next, it looks like you are testing the variable a before it ever has a chance to change, in the Main_NewsDetail constructor. So that won't work. Maybe try this in the Main_NewsDetail class:
/** separate boolean used because Field.isVisible() doesn't seem totally robust */
private boolean isSliderVisible = false;
private void setSliderVisible(boolean isVisible) {
if (isVisible != isSliderVisible) {
if (isVisible) {
add(slider);
} else {
delete(slider);
// but, we still retain the "slider" member variable, so it can be
// added again later
}
isSliderVisible = isVisible;
// I'm not actually sure that this is needed. I include it because I can't run this code right now!
invalidate();
}
}
Then, in your button click handler:
fontbtn = new Custom_ButtonField(font, fontactive, fontactive) {
protected boolean navigationClick(int status, int time) {
setSliderVisible(!isSliderVisible);
return true;
}
};
Now, this code can work because your Main_NewsDetail has only one Field in it, the slider. If there are actually multiple Field objects (which you probably will have), then you may need more complicated logic. You may want to show the slider in the same location every time. For that, you can record the index of the slider, in the list of all the Main_NewsDetails fields (for example, is the slider the 1st field, the 2nd, the 5th?). Then, instead of calling add(slider), you would do:
private void setSliderVisible(boolean isVisible) {
if (isVisible != isSliderVisible) {
if (isVisible) {
insert(slider, sliderIndex);
You might need to make Main_NewsDetail a subclass of Manager and implement the sublayout() method. That way, you can make sure that if isSliderVisible, you always lay out the slider in the same position.

Try calling Manager's invalidate-method to force a repaint for the managed area:
Marks this entire manager as requiring repainting.
Invoke this method to signal that this manager's entire region requires repainting.

Related

Blackberry scrolling doesn't redraw fields

I have a very strange problem at the moment.
Basically when I scroll in a screen, the fields don't get redrawn completely or consistently.
I have a Screen (NO_VERTICAL_SCROLL), with a manager as a titlebar. Below that I have a vertical field manager (VERTICAL_SCROLL) with labelfields. When I scroll the vfm one or two lines of the labelfields, which were already visible, get redrawn. The section I'm scrolling down to has absolutely nothing drawn.
I tried invalidate(), and calling doPaint in a scrollchangelistener, but its actually much worse. It results in the titlebar only being partially redrawn.
In the code below I used a custom FontManager, DimenManager, and ImageResourceManager to return values dependent on screen size. I used a custom BitmapButtonField and ClickableLabel in order to change the state of a field when a click is being held in.
public class BaseScreen extends MainScreen implements StringsResource
{
protected ResourceBundle resources;
public BaseScreen(long style)
{
super(style);
StandardTitleBar titlebar = new StandardTitleBar();
titlebar.addSignalIndicator();
titlebar.addClock();
titlebar.addNotifications();
setTitle(titlebar);
resources = ResourceBundle.getBundle(BUNDLE_ID, BUNDLE_NAME);
}
}
public class TandCScreen extends BaseScreen
{
final String copy_text1 = "long text here";
final String copy_text2 = "even longer text here";
ColoredLabelField label_title;
ColoredLabelField label_subtitle;
ColoredLabelField label1;
ColoredLabelField label2;
ClickableLabel label3;
public TandCScreen()
{
super(NO_VERTICAL_SCROLL | NO_VERTICAL_SCROLLBAR);
label_title = new ColoredLabelField(resources.getString(STRING_APP_NAME), Color.WHITE, DrawStyle.HCENTER | USE_ALL_WIDTH);
label_title.setBackground(BackgroundFactory.createSolidBackground(0x60223b));
label_subtitle = new ColoredLabelField(resources.getString(STRING_TANDC_TITLE), 0x58585b, DrawStyle.HCENTER | USE_ALL_WIDTH);
label1 = new ColoredLabelField(copy_text1, 0x58585b, USE_ALL_WIDTH);
label2 = new ColoredLabelField("", 0xa7a9ab, USE_ALL_WIDTH);
label3 = new ClickableLabel("Read more...")
{
protected void unclick()
{
super.unclick();
UiApplication.getUiApplication().invokeLater(new Runnable()
{
public void run()
{
ColoredLabelField label = new ColoredLabelField(copy_text2, 0xa7a9ab, 0);
label.setFont(FontManager.body());
label.setMargin(0, 0, DimenManager.interField(), 0);
label2.getManager().replace(label2, label);
label3.getManager().delete(label3);
}
});
}
};
label_title.setFont(FontManager.subtitle());
label_subtitle.setFont(FontManager.subtitle());
label1.setFont(FontManager.body());
label2.setFont(FontManager.body());
label3.setFont(FontManager.body());
BitmapButtonField button_accept = new BitmapButtonField(ImageResourceManager.buttonAccept(), ImageResourceManager.buttonAcceptHover(), FIELD_HCENTER)
{
protected void click()
{
super.click();
setImage(ImageResourceManager.buttonAcceptSelected());
setFocusImage(ImageResourceManager.buttonAcceptSelected());
}
protected void unclick()
{
super.unclick();
PersistentStoreManager.setTandCAccepted(true);
UiApplication.getUiApplication().pushScreen(new LoginScreen());
close();
}
};
BitmapButtonField button_decline = new BitmapButtonField(ImageResourceManager.buttonDecline(), ImageResourceManager.buttonDeclineHover(), FIELD_HCENTER)
{
protected void click()
{
super.click();
setImage(ImageResourceManager.buttonDeclineSelected());
setFocusImage(ImageResourceManager.buttonDeclineSelected());
}
protected void unclick()
{
super.unclick();
close();
}
};
int margin = (VariableManager.DISPLAY_WIDTH - button_accept.getPreferredWidth()) / 2;
// calculate where to put ellipsis
Font font = label2.getFont();
int max_length = (VariableManager.DISPLAY_WIDTH - margin * 2) * 2;
int i = copy_text2.length() - 1;
while (font.getAdvance(copy_text2.substring(0, i)) + font.getAdvance("...") >= max_length)
i--;
label2.setText(copy_text2.substring(0, i).trim() + "...");
VerticalFieldManager vfm = new VerticalFieldManager(VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
vfm.add(new NullField());
vfm.add(label_subtitle);
vfm.add(new Seperator());
vfm.add(label1);
vfm.add(label2);
vfm.add(label3);
vfm.add(button_accept);
vfm.add(button_decline);
vfm.setMargin(0, margin, 0, margin);
// paddings
int padding = (DimenManager.header() - label_title.getPreferredHeight()) / 2;
label_title.setPadding(padding, 0, padding, 0);
label_subtitle.setPadding(DimenManager.interField(), 0, DimenManager.interField(), 0);
label1.setMargin(DimenManager.interField(), 0, DimenManager.interField(), 0);
label3.setMargin(DimenManager.interField(), 0, DimenManager.interField(), button_accept.getPreferredWidth() - label3.getPreferredWidth());
button_decline.setMargin(DimenManager.interField(), 0, DimenManager.interButton(), 0);
add(label_title);
add(vfm);
}
protected boolean onSavePrompt()
{
return false;
}
protected void makeMenu(Menu menu, int instance)
{
if (instance == Menu.INSTANCE_CONTEXT)
{
ContextMenu contextMenu = ContextMenu.getInstance();
contextMenu.setTarget(this);
contextMenu.clear();
this.makeContextMenu(contextMenu);
menu.deleteAll();
menu.add(contextMenu);
}
else
{
super.makeMenu(menu, instance);
}
}
protected void makeContextMenu(ContextMenu contextMenu)
{
}
/**
* Clickable labelfield which changes color on down press, and fires action
* on release. Action is canceled if touch moves outside field bounds.
*
* #author kevin
*
*/
private class ClickableLabel extends LabelField
{
private boolean canceled = true;
private boolean consumed = false;
protected boolean pressed = false;
public ClickableLabel(String label)
{
super(label, LabelField.FOCUSABLE | USE_ALL_WIDTH);
setFont(FontManager.body());
}
protected void paint(Graphics g)
{
// background
if (pressed)
{
g.setColor(0x2C1721);
}
else if (isFocus())
{
g.setColor(0x993C6B);
}
else
{
g.setColor(0x60223B);
}
int padding_y = (getPreferredHeight() - getFont().getHeight()) / 2;
int padding_x = getPaddingLeft();
g.drawText(getText(), padding_x, padding_y);
}
public int getPreferredHeight()
{
return ImageResourceManager.highlight().getHeight();
}
protected void layout(int width, int height)
{
height = getPreferredHeight();
super.layout(width, height);
setExtent(width, height);
}
// --------- Highlight selected row ---------
protected void onFocus(int direction)
{
super.onFocus(direction);
invalidate();
}
protected void onUnfocus()
{
super.onUnfocus();
invalidate();
}
// --------------------------------------------
protected void drawFocus(Graphics graphics, boolean on)
{
}
/**
* Called when trackpad pressed, or touchscreen touched
*/
protected void click()
{
pressed = true;
invalidate();
}
/**
* Called when trackpad released, or touchscreen released
*/
protected void unclick()
{
cancel();
}
protected void cancel()
{
pressed = false;
invalidate();
}
protected boolean navigationClick(int status, int time)
{
if (status != 0)
{
if (consumed)
{
consumed = false;
}
else
{
click();
}
}
return true;
}
protected boolean navigationUnclick(int status, int time)
{
if (status != 0)
{
if (consumed)
consumed = false;
else
unclick();
}
return true;
}
protected boolean touchEvent(TouchEvent message)
{
int x = message.getX(1);
int y = message.getY(1);
if (x < 0 || y < 0 || x > getExtent().width || y > getExtent().height)
{
// Outside the field
if (!canceled)
{
cancel();
}
canceled = true;
return false;
}
if (message.getEvent() == TouchEvent.UP)
{
if (canceled)
cancel();
else
unclick();
consumed = true;
return true;
}
if (message.getEvent() == TouchEvent.DOWN)
{
click();
consumed = true;
canceled = false;
return true;
}
return super.touchEvent(message);
}
}
private class Seperator extends SeparatorField
{
protected void paint(Graphics graphics)
{
graphics.setColor(0xa7a9ab);
super.paint(graphics);
}
}
}
Thanks in advance for any suggestions
I don't think it is possible to do anything but guess at your problem without looking at your code. But whatever your problem is, I am confident that it is based on a misunderstanding of how to use Managers within a Screen. So I recommend that you review the following articles to improve your knowledge in this area and so hopefully resolve the problem yourself:
Start here:
UI Introduction
This provides the Background around Managers and Fields.
Then read this article:
MainScreen Explained
I suspect as a result of reading this article, you may be able to discard your 'title bar' and use setTitle() or setBanner() to provide this function.
I hope this resolves your problems.
A few other points:
In all my years of BB programming, I have never had to use doPaint() to get something painting the way I wanted. I can't think of a situation that this will in fact help. So if you think you need it, try invalidate() instead.
I have used invalidate() when I making a change to the Field that will change its on screen appearance (but not its size). I have used it in a scroll change listener. But it is a method of last resort.
Remember that LabelFields are not focusable, so in OS's before 6, that made them a problem to scroll.
Found the issue. On the labelfields, there was a setExtent(getPreferredWidth(), getPreferredHeight()); that was reducing the size of the area to redraw. Very stupid mistake.
Thanks to everyone who tried to help.

To attach a ButtonField on every row of CustomListField in BlackBerry [duplicate]

i m writing one application in which i have created custom list field for displaying listview.
my CustomListField contains one image and text in a row. i m gettiing field change listener on click of listfield row but i want to put fieldchange listener on image too..
can anyone tell me how can i do that.
here is my code.
public class CustomListField extends ListField implements ListFieldCallback {
private Vector _listData;
private int _MAX_ROW_HEIGHT = 60;
public CustomListField(Vector data) {
_listData = data;
setSize(_listData.size());
setSearchable(true);
setCallback(this);
setRowHeight(_MAX_ROW_HEIGHT);
}
protected void drawFocus(Graphics graphics, boolean on) {
XYRect rect = new XYRect();
graphics.setGlobalAlpha(150);
graphics.setColor(Color.BLUE);
getFocusRect(rect);
drawHighlightRegion(graphics, HIGHLIGHT_FOCUS, true, rect.x, rect.y, rect.width, rect.height);
}
public int moveFocus(int amount, int status, int time) {
this.invalidate(this.getSelectedIndex());
return super.moveFocus(amount, status, time);
}
public void onFocus(int direction) {
super.onFocus(direction);
}
protected void onUnFocus() {
this.invalidate(this.getSelectedIndex());
}
public void refresh() {
this.getManager().invalidate();
}
public void drawListRow(ListField listField, Graphics graphics, int index, int y, int w) {
listField.setBackground(BackgroundFactory.createBitmapBackground(Bitmap.getBitmapResource("listing_bg.png")));
ListRander listRander = (ListRander) _listData.elementAt(index);
graphics.setGlobalAlpha(255);
graphics.setFont(Font.getDefault().getFontFamily().getFont(Font.PLAIN, 24));
final int margin = 5;
final Bitmap thumb = listRander.getListThumb();
final String listHeading = listRander.getListTitle();
final Bitmap nevBar = listRander.getNavBar();
// list border
graphics.setColor(Color.GRAY);
graphics.drawRect(0, y, w, _MAX_ROW_HEIGHT);
// thumbnail border & thumbnail image
graphics.setColor(Color.BLACK);
// graphics.drawRoundRect(margin-2, y+margin-2,thumb.getWidth()+2, thumb.getHeight()+2, 5, 5);
graphics.drawBitmap(margin, y + margin, thumb.getWidth(), thumb.getHeight(), thumb, 0, 0);
// drawing texts
// graphics.setFont(Font.BOLD);
graphics.drawText(listHeading, margin + thumb.getWidth(), y + margin);
graphics.setColor(Color.GRAY);
// graphics.setFont(Font.smallFont); // graphics.drawText(listDesc, 2*margin+thumb.getWidth(), y+ margin+20); // //
// graphics.drawText(listDesc2, 2*margin+thumb.getWidth(), y+ margin+32);
// draw navigation button
final int navBarPosY = y + (_MAX_ROW_HEIGHT / 2 - nevBar.getHeight() / 2);
final int navBarPosX = Graphics.getScreenWidth() - nevBar.getWidth() + margin;
graphics.drawBitmap(navBarPosX, navBarPosY, nevBar.getWidth(), nevBar.getHeight(), nevBar, 0, 0);
}
public Object get(ListField listField, int index) {
String rowString = (String) _listData.elementAt(index);
return rowString;
}
public int indexOfList(ListField listField, String prefix, int start) {
for (Enumeration e = _listData.elements(); e.hasMoreElements();) {
String rowString = (String) e.nextElement();
if (rowString.startsWith(prefix)) {
return _listData.indexOf(rowString);
}
}
return 0;
}
public int getPreferredWidth(ListField listField) {
return 3 * listField.getRowHeight();
}
/*
protected boolean trackwheelClick(int status, int time) {
invalidate(getSelectedIndex());
Dialog.alert(" U have selected :" + getSelectedIndex());
return super.trackwheelClick(status, time);
}
*/
}
i want to put click listner on star image of listfield row
and following is output of abbove code.
I did something very similar to this on a past project:
Background
As Arhimed said in his answer, and as you can read about on the BlackBerry forums here, you can't have full-fledged Field objects within the ListField. The content of ListField rows is just drawn directly in drawListRow() as text, and Bitmaps, etc. The contents aren't Field instances, and therefore, are not focusable.
So, what I did was to replace ListField with a subclass of Manager. Originally, I used a VerticalFieldManager, but I ran into problems with that. I've also been seeing a lot of issues on stack overflow, where people subclass VerticalFieldManager, customize just one small behaviour, and everything starts breaking. It seems to me that VerticalFieldManager works well if you accept its normal behaviour, and if you need something more, just extend Manager directly. Performing layout for vertically stacked rows is pretty easy.
I then made each row its own Manager, and implemented custom layout in sublayout() to place the row's Fields where I wanted them. I could then also make the row focusable, and then a bitmap/button on the row separately focusable (like your star). Clicking the row invokes one action, and clicking the star invokes another one.
I will note, however, that in my app, performance was not an issue, because I only had 10-20 rows. Also, I did have to modify my code to match your example, so consider this code only lightly tested. However, I did build it into an app, so it should perform fine as long as my assumptions, and your description were valid.
Implementation
First, it wasn't clear to me what your ListRander is (you didn't show that code). However, in my code, I need a data class to contain details about one row. It looked like that's how you used ListRander, so that's what I used:
public class ListRander {
private String _title;
private Bitmap _thumb;
public ListRander(String title, Bitmap thumb) {
_title = title;
_thumb = thumb;
}
public String getTitle() {
return _title;
}
public Bitmap getThumb() {
return _thumb;
}
}
Then, I replaced your CustomListField class with my own:
public class CustomListField extends Manager implements FocusChangeListener {
private int _MAX_ROW_HEIGHT = 60;
private boolean _searchable = false;
private Vector _listData;
private FieldChangeListener _fieldListener;
public CustomListField(Vector data) {
super(FOCUSABLE | VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
setSearchable(true);
setEditable(false);
setListData(data);
}
public void setChangeListener(FieldChangeListener listener) {
// we need to save this listener, because we set it to listen to all new rows
_fieldListener = listener;
int numFields = getFieldCount();
for (int f = 0; f < numFields; f++) {
getField(f).setChangeListener(listener);
}
super.setChangeListener(listener);
}
public int getRowHeight() {
return _MAX_ROW_HEIGHT;
}
public void setSearchable(boolean searchable) {
_searchable = searchable;
}
public int getSelectedIndex() {
return getFieldWithFocusIndex(); // TODO??
}
public Object get(int index) {
return _listData.elementAt(index);
}
public int indexOfList(String prefix, int start) {
if (start >= _listData.size() || !_searchable) {
return -1;
} else {
int result = getSelectedIndex(); // the default result if we find no matches
for (Enumeration e = _listData.elements(); e.hasMoreElements(); ) {
String rowString = (String) e.nextElement();
if (rowString.startsWith(prefix)) {
return _listData.indexOf(rowString);
}
}
return result;
}
}
protected boolean navigationClick(int status, int time) {
CustomListRow focus = (CustomListRow) getFieldWithFocus();
if (focus != null) {
// see if the row wants to process this click
if (!focus.navigationClick(status, time)) {
// let our FieldChangeListener know that this row has been clicked
fieldChangeNotify(getFieldWithFocusIndex());
}
return true;
} else {
return false;
}
}
protected void sublayout(int width, int height) {
int w = Math.min(width, getPreferredWidth());
int h = Math.min(height, getPreferredHeight());
int rowHeight = getRowHeight();
int numRows = getFieldCount();
setExtent(w, h);
setVirtualExtent(w, rowHeight * numRows);
for (int i = 0; i < numRows; i++) {
Field f = getField(i);
setPositionChild(f, 0, rowHeight * i);
layoutChild(f, w, rowHeight);
}
}
public int getPreferredWidth() {
return Display.getWidth();
}
public int getPreferredHeight() {
return Display.getHeight();
}
public void setListData(Vector listData) {
_listData = listData;
if (listData != null) {
int listSize = listData.size();
int numRows = getFieldCount();
for (int s = 0; s < listSize; s++) {
if (s < numRows) {
// we can reuse existing CustomListRows
CustomListRow row = (CustomListRow) getField(s);
row.setData((ListRander) listData.elementAt(s));
} else {
CustomListRow row = new CustomListRow((ListRander) listData.elementAt(s));
row.setChangeListener(_fieldListener);
row.setFocusListener(this);
add(row);
}
}
if (listSize < numRows) {
// delete the excess rows
deleteRange(listSize, numRows - listSize);
}
} else {
deleteAll();
}
invalidate();
}
public void focusChanged(Field field, int eventType) {
// we handle scrolling here, when focus changes between rows
if (eventType == FOCUS_GAINED) {
if (field.getTop() < getVerticalScroll()) {
// field is off the top of the screen, so scroll up
setVerticalScroll(field.getTop());
} else if (field.getTop() >= getVerticalScroll() + getVisibleHeight()) {
// field is off the bottom of the screen, so scroll down
setVerticalScroll(field.getTop() - getVisibleHeight() + getRowHeight());
}
}
}
}
Finally, one row is represented by my CustomListRow class:
public class CustomListRow extends Manager implements FieldChangeListener {
private static final int _MAX_ROW_HEIGHT = 60;
private ListRander _data;
private BitmapField _thumb;
private LabelField _title;
private FocusableBitmapField _star;
private static final Bitmap _starImg = Bitmap.getBitmapResource("star.png");
private static final Bitmap _bgImg = Bitmap.getBitmapResource("listing_bg.png");
private SeparatorField _separator;
private int _fontColor = Color.BLACK;
private boolean _highlighted = false;
private int _width;
// subclass exists to expose focus methods (make public)
private class FocusableBitmapField extends BitmapField {
public FocusableBitmapField() {
super(_starImg, BitmapField.FOCUSABLE | BitmapField.EDITABLE);
}
public void onFocus(int direction) {
super.onFocus(direction);
}
public void onUnfocus() {
super.onUnfocus();
}
}
public CustomListRow(ListRander data) {
super(Field.FOCUSABLE | Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);
setBackground(BackgroundFactory.createBitmapBackground(_bgImg));
_width = Display.getWidth();
long labelStyle = (DrawStyle.LEFT | DrawStyle.TOP | DrawStyle.ELLIPSIS);
_title = new LabelField("", labelStyle) { // custom anonymous class to change font color
protected void paint(Graphics g) {
int c = g.getColor();
g.setColor(_fontColor);
super.paint(g);
g.setColor(c);
}
};
_title.setFont(Font.getDefault().getFontFamily().getFont(Font.PLAIN, 24));
_thumb = new BitmapField();
_star = new FocusableBitmapField();
_star.setChangeListener(this);
_separator = new SeparatorField() { // custom anonymous class to change separator color
protected void paint(Graphics g) {
int c = g.getColor();
g.setColor(Color.GRAY);
super.paint(g);
g.setColor(c);
}
};
setData(data);
add(_thumb);
add(_title);
add(_star);
add(_separator);
}
public ListRander getData() {
return _data;
}
public void setData(ListRander value) {
if (value != _data) {
_data = value;
_title.setText(value.getTitle());
_thumb.setBitmap(value.getThumb());
}
}
private void onStarClicked() {
Dialog.alert("Star has been clicked or tapped!");
}
private void onRowClicked() {
Dialog.alert("Row has been clicked or tapped!");
}
public void fieldChanged(Field field, int context) {
if (field == _star) {
onStarClicked();
}
}
public boolean navigationClick(int status, int time) {
if (_star.isFocus()) {
onStarClicked();
return true;
} /* else {
onRowClicked();
return true;
} */
return false; // we will not consume this event
}
protected void highlight(boolean onRow) {
_fontColor = onRow ? Color.WHITE : Color.BLACK; // change font color for contrast
_highlighted = onRow;
invalidate();
}
protected void onFocus(int direction) {
// called when focus first transfers to this row, from another Field
if (direction == 1) {
// coming from top to bottom, we highlight the row first, not the star
highlight(true);
} else if (direction == -1) {
// coming from bottom to top, we highlight the star button first, not the row
_star.onFocus(direction);
highlight(false);
}
}
protected void onUnfocus() {
// remove highlighting of the row, if any
highlight(false);
super.onUnfocus();
}
protected int moveFocus(int amount, int status, int time) {
// called when this row already has focus (either on row, or star button)
if (amount > 0) {
// moving top to bottom
if (!_star.isFocus()) {
// we were on the row, now move to the star button
_star.onFocus(1);
highlight(false);
amount--; // consume one unit of movement
}
} else {
// moving from bottom to top
if (_star.isFocus()) {
// we were on the star button, now move back over to the row
_star.onUnfocus();
highlight(true);
amount++; // consume one unit of movement
}
}
return amount;
}
protected boolean touchEvent(net.rim.device.api.ui.TouchEvent event) {
// We take action when the user completes a click (a.k.a. unclick)
int eventCode = event.getEvent();
if ((eventCode == TouchEvent.UNCLICK) || (eventCode == TouchEvent.DOWN)) {
// Get the touch location, within this Manager
int x = event.getX(1);
int y = event.getY(1);
if ((x >= 0) && (y >= 0) && (x < _width) && (y < _MAX_ROW_HEIGHT)) {
int field = getFieldAtLocation(x, y);
if ((field >= 0) && (getField(field) == _star)) {
// Let event propagate to (star) button field
return super.touchEvent(event);
} else {
if (eventCode == TouchEvent.UNCLICK) {
// A completed click anywhere else in this row should popup details for this selection
fieldChangeNotify(1);
onRowClicked();
} else {
// This is just a soft touch (TouchEvent.DOWN), without full click
setFocus();
}
// Consume the event
return true;
}
}
}
// Event wasn't for us, let superclass handle in default manner
return super.touchEvent(event);
}
protected void sublayout(int width, int height) {
height = Math.min(getPreferredHeight(), height);
setExtent(_width, height);
final int margin = 5;
int thumbWidth = _thumb.getPreferredWidth();
layoutChild(_thumb, thumbWidth, _thumb.getPreferredHeight());
setPositionChild(_thumb, margin, margin);
int starWidth = _star.getPreferredWidth();
int starHeight = _star.getPreferredHeight();
layoutChild(_star, starWidth, starHeight);
setPositionChild(_star, width - starWidth - margin, (height - starHeight) / 2);
// this assumes you want margin between all fields, and edges
layoutChild(_title, width - thumbWidth - starWidth - 4 * margin, _title.getPreferredHeight());
setPositionChild(_title, margin + thumbWidth /* + margin */, margin); // TODO?
}
protected void paintBackground(Graphics g) {
super.paintBackground(g);
if (_highlighted) {
// you can't override drawFocus() for a Manager, so we'll handle that here:
int oldColor = g.getColor();
int oldAlpha = g.getGlobalAlpha();
XYRect rect = new XYRect();
g.setGlobalAlpha(150);
g.setColor(Color.BLUE);
getFocusRect(rect);
drawHighlightRegion(g, HIGHLIGHT_FOCUS, true, rect.x, rect.y, rect.width, rect.height);
g.setGlobalAlpha(oldAlpha);
g.setColor(oldColor);
}
}
public int getPreferredWidth() {
return _width;
}
public int getPreferredHeight() {
return _MAX_ROW_HEIGHT;
}
}
Usage
This is how you might use the whole list field (maybe in a Screen class):
public class ListScreen extends MainScreen implements FieldChangeListener {
public ListScreen() {
try {
Vector data = new Vector();
Bitmap icon = Bitmap.getBitmapResource("list_icon.png");
for (int i = 0; i < 15; i++) {
ListRander lr = new ListRander("Product Name " + i, icon);
data.addElement(lr);
}
CustomListField list = new CustomListField(data);
add(list);
list.setChangeListener(this);
} catch (Exception e) {
e.printStackTrace();
}
}
public void fieldChanged(Field field, int context) {
if (field instanceof CustomListRow) {
CustomListRow row = (CustomListRow) field;
Dialog.alert(row.getData().getTitle() + " was selected!");
}
}
}
In my app, it made sense for the CustomListRow itself to handle the equivalent of your star click. However, for me, it did not make sense to have the row click handled that way. So, I let you set a FieldChangeListener on the CustomListField itself, which is called back when any row is selected. See the example above in my screen class. If you want to handle the row click inside the CustomListRow class, too, that's fine. I laid out a onRowClicked() method there. Search in the code for where that's commented out, and you can reactivate, an implement that method (onRowClicked()).
Issues
My app didn't require list searching. I laid out a sample implementation of that, like ListField has. But, I didn't test it. That's your job, if you need it. I just got you started with the CustomListField implementation (see indexOfList()).
I didn't see what your "nav bar" was for. A bar is usually a full-width item, like a status bar, or toolbar. I don't see anything like that in your screenshot. A nav item might be a little arrow at the right side of each row, to bring up details. But, I didn't see that in your screenshot either. So, I ignored that code. If you need a nav bar, you obviously know what it should be, and can add that to my code above.
I couldn't tell whether or not you just added the star as part of the row's background image, or if you had a separate image for that. I added a separate star.png to represent the star. I would assume that clicking the star fills it in, or highlights it, or something. But, you didn't describe that problem, so I assume you can handle that. If you need a custom field to represent the star, that can have selected and unselected images, just post that as a new question.
You had some code that appeared like it was trying to set the row width to 3x the row height, but that didn't match your screen shot. Most lists are full-screen width anyway. So, I remove that code. My CustomListRow class implements getPreferredWidth() and requests the full screen width. Change if you like.
Unlike Android's ListView the BB's ListField is not designed to have a focusable/clickable fields inside of list items. So any attempt to workaround this will have some negative side effects.
A relatively easy/quick workaround would be to switch to VerticalFieldManager (check this other stack overflow question). But if the list is too long (more than several hundreds, I believe) you risk to "eat" too much memory.
If the app is designed for touch screens only, then you can try to stay with ListField + do some manual tracking of touch event coordinates. So when you detect a list field click (in a way you would normally do it) you can check whether the touch coordinates correspond to the star image area (at least on the X axis). I am not going to invent/provide an implementation, but just giving an idea.

Unstable of Custom Edit Field

I built custom edit field because i want to change the background color.
first, second and third shown unstable, sometime display when focusing, disappear when lost focusing.
I want the result like third image where the focusing at where also static display all the field.
Here is my Custom_EditField:
public class Custom_EditField extends EditField {
private int width, row, color;
private boolean isfocus;
Custom_EditField(long style, int width, int row) {
super(style);
this.width = width;
this.row = row;
}
public int getPreferredHeight() {
return Font.getDefault().getHeight() * row;
}
public int getPreferredWidth() {
return width;
}
protected void onFocus(int direction) {
color = Color.GRAY;
isfocus = true;
}
protected void onUnfocus() {
color = Color.GOLD;
isfocus = false;
}
protected void layout(int maxWidth, int maxHeight) {
super.layout(maxWidth,
Math.min(maxHeight, Font.getDefault().getHeight() * row));
super.setExtent(maxWidth,
Math.min(maxHeight, Font.getDefault().getHeight() * row));
}
protected void paint(Graphics graphics) {
int rectHeight = getPreferredHeight();
int rectWidth = getPreferredWidth();
try {
if (isfocus) {
graphics.setBackgroundColor(color);
} else {
graphics.setBackgroundColor(color);
}
color = Color.BLACK;
graphics.setColor(color);
graphics.drawRect(0, 0, rectWidth, rectHeight);
super.paint(graphics);
} finally {
graphics.setColor(color);
}
}
}
I'm not 100% sure which problem you're asking about:
how to draw your own focus background colors for an EditField, or
how to fix the problem with fields disappearing as you move focus
1) If it's the second problem (disappearing), then I would guess that you're having the same problem as in your other question, with the Custom_TopField buttons disappearing
So, if these Custom_EditField objects are created by a manager that extends VerticalFieldManager, but also implements sublayout() itself to perform all the positioning, then try the solution I suggested in the other question (don't extend VerticalFieldManager, just extend Manager).
2) If that doesn't work, it's possible that your paint() method is not getting triggered when it should. Try adding a call to invalidate() in your focus methods, along with a call to the superclass methods onFocus() and onUnfocus():
protected void onFocus(int direction) {
color = Color.GRAY;
isfocus = true;
invalidate();
super.onFocus(direction);
}
protected void onUnfocus() {
color = Color.GOLD;
isfocus = false;
invalidate();
super.onUnfocus();
}
3) And, you might need to implement this, too:
public boolean isFocusable() {
return true;
}
But, first, check your manager class, to be sure this isn't the same problem as in your other question.
Also ...
In this class, you are basing the height of the edit field on the row number. Is this really what you want? Row 0 would be 0 size, and each row after that would get taller and taller. Is that really the UI? Normally, you would have all the rows' edit fields be the same size, and simply lay them out with a different y offset. Most likely, this class should not need to know which row it has been placed on. That information is normally the responsibilty of a manager object.
protected EditField getEditField() {
EditField edit_field = new EditField("", "", 10, EditField.NO_NEWLINE
| BasicEditField.FIELD_VCENTER) {
protected boolean navigationClick(int status, int time) {
}
protected void onFocus(int direction) {
Set the boolean during focus
}
protected void onUnfocus() {
}
protected void paintBackground(Graphics graphics_paint) {
if(that boolean is true)
{
Set your custom background during focus.
}else{
Set your custom background during unfocus.
}
}
protected void paint(Graphics graphics_paint) {
int old_color = graphics_paint.getColor();
try {
if(that boolean is true)
{
Set your custom Font color during any event like focus and click.
}else{
Set your custom background Font color during any event like unfocus.
}
super.paint(graphics_paint);
} finally {
graphics_paint.setColor(old_color);
}
}
public void layout(int width, int height) {
}
};

Custom BitmapField bug on unfocus and scroll (BlackBerry)

I have been having this annoying problem when trying to implement a picture gallery on BlackBerry 6.
Everything works, however when the focus changes from the top buttons to say the pictures further down the screen, the images seem to glitch and not paint themselves correctly. Please see the images below for an example:
(Focus is on the top of the screen(not shown))
(Focus is now on the bottom left image, note that the top image is now blank for an unknown reason)
And this happens no matter how many pictures I add to the tumbnail gallery.
Now here is my code, (a part of it concerning the drawing of the thumbnails)
public ProductImage(String productName){
super(VERTICAL_SCROLL|VERTICAL_SCROLLBAR);
currentProduct = productName;
createGUI();
}
public void createGUI(){
deleteAll();
try{
Storage.loadPicture();
}catch(NullPointerException e){
e.printStackTrace();
}
this.setTitle(new LabelField(_resources.getString(PRODUCT_IMAGE), Field.FIELD_HCENTER));
if(ToolbarManager.isToolbarSupported())
{
Toolbar tb = new Toolbar();
setToolbar(tb.createToolBar());
}
else{
Toolbar tb = new Toolbar();
add(tb.createNavBar());
}
picVector = Storage.getPicture(currentProduct);
EncodedImage enc = EncodedImage.getEncodedImageResource("camera.png");
EncodedImage sizeEnc = ImageResizer.sizeImage(enc, Display.getHeight(), Display.getHeight());
takenPicture = new BitmapField(enc.getBitmap());
vfMain = new VerticalFieldManager();
vfMain.add(logo);
vfMain.add(new SeparatorField());
add(vfMain);
prepareBmpFields();
}
private void prepareBmpFields() {
System.out.println("This is the vector size: " + picVector.getPicVector().size());
LayoutManager manager = new LayoutManager();
FieldChangeListener itemListener = new ButtonListener();
mBmpFields = new ImageButtonField[picVector.getPicVector().size()];
for (int i = 0; i < picVector.getPicVector().size(); i++) {
/*EncodedImage image = EncodedImage
.getEncodedImageResource((String)imageVector.elementAt(i));*/
byte[] data = getData((String)picVector.getPicVector().elementAt(i));
//Encode and Resize image
EncodedImage eImage = EncodedImage.createEncodedImage(data,0,data.length);
eImage = ImageResizer.resizeImage(eImage, mImgWidth, mImgHeight);
ImageButtonField currentImage = new ImageButtonField(eImage.getBitmap());
currentImage.setAssociatedPath((String)picVector.getPicVector().elementAt(i));
mBmpFields[i] = currentImage;
mBmpFields[i].setChangeListener(itemListener);
manager.add(mBmpFields[i]);
}
vfMain.add(manager);
}
private class LayoutManager extends VerticalFieldManager {
public LayoutManager() {
super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
}
protected void sublayout(int width, int height) {
int columns = mScrWidth / (mImgWidth + 2 * mImgMargin);
int scrWidth = Display.getWidth();
int rows = mBmpFields.length / columns
+ (mBmpFields.length % columns > 0 ? 1 : 0);
int counter = 0;
for (int i = 0; i < rows; i++) {
for (int j = 0; j < columns; j++) {
int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin;
int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin;
if(mBmpFields.length > counter){
Field field = mBmpFields[counter];
layoutChild(field, mImgWidth, mImgHeight);
setPositionChild(field, posX, posY);
counter++;
};
}
}
if(Display.getWidth() < Display.getHeight()){
setExtent(mScrWidth, (int)(mScrHeight*1.25));
}
else{
setExtent(mScrWidth, (int)(mScrHeight*2));
}
}
public int getPreferredWidth() {
return mScrWidth;
}
public int getPreferredHeight() {
return mScrHeight;
}
}
}
I have removed many non relevant parts of the code, but the needed code is there.
Does anyone know what could be causing this problem? Thanks for your help!
Edit: as requested, here is my implementation of ImageButtonField class:
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.BitmapField;
public class ImageButtonField extends BitmapField{
String associatedPath ="";
BitmapField image2;
public ImageButtonField(Bitmap image) {
super(image);
}
public void setAssociatedPath(String path){
associatedPath = path;
}
public String getAssociatedPath(){
return associatedPath;
}
public boolean isFocusable() {
return true;
}
protected void applyTheme(Graphics arg0, boolean arg1) {
}
protected void drawFocus(Graphics graphics, boolean on) {
}
protected void onFocus(int direction) {
// only change appearance if this button is enabled (aka editable)
if (isEditable()) {
invalidate(); // repaint
}
super.onFocus(direction);
}
public void onUnfocus() {
invalidate(); // repaint
super.onUnfocus();
}
protected boolean navigationClick(int status, int time) {
fieldChangeNotify(0);
return true;
}
protected boolean trackwheelClick(int status, int time) {
fieldChangeNotify(0);
return true;
}
protected void paint(Graphics graphics) {
super.paint(graphics);
if (isFocus()) {
graphics.setGlobalAlpha(128);
graphics.setColor(0x888888);
graphics.fillRect(0, 0, getWidth(), getHeight());
}else{
graphics.setGlobalAlpha(0);
graphics.setColor(0x000000);
graphics.fillRect(0, 0, getWidth(), getHeight());
//graphics.drawBitmap(0, 0, getWidth(), getHeight(), image2.getB, 0, 0);
}
}
protected boolean keyChar(char character, int status, int time) {
if(Characters.ENTER == character || Characters.SPACE == character) {
fieldChangeNotify(0);
return true;
}
return super.keyChar(character, status, time);
}
}
Ok, so you can disregard my first answer, but since I didn't have your ImageButtonField code at the time, I don't want to throw it out ... maybe someone else will find it useful.
In the end, I didn't need to make any changes to ImageButtonField, but I did change your LayoutManager class. The way I figured out that it was the problem was I just started replacing your custom UI classes with built-in ones. I replaced ImageButtonField with BitmapField. That didn't fix it. Then, I replaced LayoutManager with FlowFieldManager and that fixed it. So, I knew where the problem was.
My solution:
private class LayoutManager extends Manager {
public LayoutManager() {
super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
}
protected void sublayout(int width, int height) {
setExtent(width, height);
// TODO: maybe always set the same virtual extent?
if (Display.getWidth() < Display.getHeight()) {
setVirtualExtent(mScrWidth, (int) (mScrHeight * 1.25));
} else {
setVirtualExtent(mScrWidth, (int) (mScrHeight * 2));
}
int columns = mScrWidth / (mImgWidth + 2 * mImgMargin);
// int scrWidth = Display.getWidth();
int rows = mBmpFields.length / columns + (mBmpFields.length % columns > 0 ? 1 : 0);
int counter = 0;
for (int i = 0; i < rows; i++) {
for (int j = 0; j < columns; j++) {
int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin;
int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin;
if (mBmpFields.length > counter) {
Field field = mBmpFields[counter];
layoutChild(field, mImgWidth, mImgHeight);
setPositionChild(field, posX, posY);
counter++;
}
}
}
}
public int getPreferredWidth() {
return mScrWidth;
}
public int getPreferredHeight() {
return mScrHeight;
}
}
I can't say for sure that I understand why your original code wasn't working, but I can say that I wouldn't have done a few of the things in the original code:
The original code was extending VerticalFieldManager but was doing all the work itself, in sublayout(). So, I don't think there was any point extending VerticalFieldManager. I changed it to just extend Manager.
The original code was calling setExtent() with different sizes. I don't think that's what you wanted. Extent is the actual size of the Field. Virtual extent is the virtual size, which is what you want to set larger than the actual extent, in order to enable scrolling. You don't need to dynamically calculate different extents for portrait vs. landscape because the width and height parameters passed to sublayout() will already reflect that. I'm not sure you really even need to be setting different virtual extents either. I think you should probably always set the virtual extent height to the number of rows times picture height, accounting for margins.
You had an unused variable scrWidth in your original code. I commented it out above.
You also posted this question recently, right? Am I correct in assuming that the ImageButtonField you refer to here is the same one you were working on in the other question?
I can't see your full implementation of ImageButtonField, which you should probably post here, too. However, looking at the answers to your other question, I have a feeling that you're doing some custom focus handling in ImageButtonField, and maybe it's not being done quite right. In any case, that class may be where the problem is.
I have a similar Field subclass of my own, and here are the focus handling methods I define:
public class CustomButtonField extends Field {
private Bitmap _button; // the currently displayed button image
private Bitmap _on; // image for 'on' state (aka in-focus)
private Bitmap _off; // image for 'off' state (aka out-of-focus)
protected void onFocus(int direction) {
// only change appearance if this button is enabled (aka editable)
if (isEditable()) {
_button = _on;
invalidate(); // repaint
}
super.onFocus(direction);
}
protected void onUnfocus() {
_button = _off;
invalidate(); // repaint
super.onUnfocus();
}
protected void drawFocus(Graphics graphics, boolean on) {
// override superclass implementation and do nothing
}
public boolean isFocusable() {
return true;
}
I also have a custom implementation of paint(). I won't show it all here, because a lot of the code probably has nothing to do with your problem, but my paint() does include this call:
graphics.drawBitmap(_padding, _padding, _fieldWidth, _fieldHeight, _button, 0, 0);
You might not care about the fact that I have separate images for focused, and unfocused states ... maybe you show the same image at all times.
But, probably the thing to check is your onFocus() and onUnfocus() methods. You may need to add a call to invalidate() as I have.
Looking at Rupak's answer to your other question, it would also be good to check your ImageButtonField.paint() method, and make sure you aren't neglecting to do important drawing steps if the field is not in focus.

Blackberry, created a custom button and would like image to change image after it is draWN

I have created a custom button field for my BlackBerry project. I would like to change the picture displayed on the button after it is drawn, but cannot figure out how. I have code that changes the member variable that stores the bitmap, but do not know how to tell the blackberry to update it.
// CODE TO CHANGE BUTTONS Image
Bitmap image2 = Bitmap.getBitmapResource("aftera.png");
MyBut.image=image2;
// don’t know how to redraw buttn?????
// BUTTON CODE
public class cPictureButton extends Field{
public Bitmap image;
public cPictureButton( Bitmap image, long style)
{
super(style);
this.image=image;
}
public int getPreferredHeight()
{
return image.getHeight();
// return getFont().getHeight();
}
public int getPreferredWidth()
{
return image.getWidth();
// return getFont().getAdvance(label)+8;
}
protected void drawFocus(Graphics g, boolean on)
{
}
protected void paint(Graphics g)
{
int w=image.getWidth();
int h=image.getHeight();
g.drawBitmap(0, 0, w, h, image, 0, 0);
if (isFocus() )
g.drawRect(0,0,image.getWidth(), image.getHeight());
}
protected void layout(int width, int height) {
// TODO Auto-generated method stub
setExtent(Math.min(width, getPreferredWidth()),
Math.min(height, getPreferredWidth()));
}
public boolean isFocusable() {
return true;
}
protected boolean navigationClick(int status, int time)
{
fieldChangeNotify(0);
return true;
}
}
Calling invalidate() on your button field should take care of it.
Also, you still have the bug in your layout() method that I pointed out in your earlier question: Why does my rectangular bitmap get clipped to a square when I draw it?

Resources