How to make a HorizontalFieldManager clickable in BlackBerry? - blackberry

Question

I'm developing an application in BlackBerry and I have many HorizontalFieldManagers filled with components like shown in the image below:
And I have to add many HorizontalFieldManagers like these within a for loop which are dynamically populated. When taken together, it looks like a single row in a list. So far, I have been able to do this.
But the problem is, the user should be able to click a "row" like this. But as the HorizontalFieldManager is not focusable or clickable, and because it has 4 components inside it and all 4 are equally important, I have not been able to figure-out a way to do this.
So can anyone please suggest a way to do what I'm trying? Basically, the user should be able to click a "row" which is shown in the image. This "row" is made up of many components (2 HorizontalFieldManagers, 1 VerticalFieldManager, 1 BitmapField and 3 LabelFields).
Any help greatly appreciated!

Answer 1

BBdev directly answered your question, but as you noticed, the performance is quite slow. This is because using a manager to stamp out hundreds of rows like this adds a lot of overhead to the layout step of the UI. Layout will run against all of those managers, every time something changes on the screen - including each time you add a new row. This is fundamentally quadratic.
The way to speed this up is to use a ListField instead. The one pain point of a ListField is that you have to do the drawing directly, instead of relying on the standard OS fields. But the advantage is that the ListField performs very quickly - each row has a fixed height, so the ListField can quickly determine which rows are visible, and then call the paint code just for those rows.
This means the work scales with the visible size of the field, instead of the virtual size of the field. This is a very desirable property to maintain when writing UI code, as the virtual depth of a UI has no bounds, but the physical screen has a fixed number of pixels, so by scaling the work with the visible portion of the UI, you maintain good performance.

Answer 2

The below code will make your HorizontalFieldManager clickable, And add your component in this Hfm as you want.
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.TouchEvent;
import net.rim.device.api.ui.Touchscreen;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.NullField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
public class sample extends MainScreen implements FieldChangeListener{
HorizontalFieldManager logInDetailManager=null;
int background_color=0;
public sample() {
logInDetailManager = new HorizontalFieldManager(Manager.USE_ALL_WIDTH|Field.FOCUSABLE){
protected void sublayout(int maxWidth, int maxHeight) {
int height=40;
super.sublayout(Display.getWidth(), height);
setExtent(Display.getWidth(), height);
}
protected void paint(Graphics graphics) {
graphics.setBackgroundColor(background_color);
graphics.clear();
invalidate();
super.paint(graphics);
}
protected void onFocus(int direction) {
super.onFocus(direction);
background_color=Color.RED;
invalidate();
}
protected void onUnfocus() {
invalidate();
background_color=Color.GREEN;
}
protected boolean navigationClick(int status, int time) {
if(Touchscreen.isSupported()){
return false;
}else{
fieldChangeNotify(1);
return true;
}
}
protected boolean touchEvent(TouchEvent message)
{
if (TouchEvent.CLICK == message.getEvent())
{
FieldChangeListener listener = getChangeListener();
if (null != listener)
this.setFocus();
listener.fieldChanged(this, 1);
}
return super.touchEvent(message);
}
};
logInDetailManager.setChangeListener(this);
logInDetailManager.add(new LabelField("hello"));
logInDetailManager.add(new NullField(Field.FOCUSABLE));
add(logInDetailManager);
add(new LabelField("good",Field.FOCUSABLE));
}
public void fieldChanged(Field field, int context) {
if(field==logInDetailManager){
UiApplication.getUiApplication().invokeLater(new Runnable() {
public void run() {
Dialog.inform("Hi how are you?");
}
});
}
}
}
Hope this will help you . Cheers :)

Answer 3

How to handle the focus color when you have an array of horizontal fields instead?
for (int i = 0; i < listSize; i++) {
logInDetailManager[i] = new HorizontalFieldManager(
Manager.USE_ALL_WIDTH | Field.FOCUSABLE) {
Since one item of the array is always focused the whole list is all red.