I'm struggling with the BrowserField. I would like a screen with a BrowserField at the top, and one at the bottom. I would like to point each one to a URL containing an image (and maybe HTML) - kind of how one might see an AdMob advert.
So I want to define a custom size for the BrowserField. Can that be done?
At the moment, the BrowserField is taking up the whole screen. (* see update below)
I have tried to subclass it anonymously - but it is final.
Is this a possible use case, or should I look for a different solution to the problem altogether...?
Update:
I have placed the BrowserField within a VerticalFieldManager and sized that accordingly (as per Blackberry BrowserField does not fit to screen).
(re-edit: this was the right idea, but I had made a mistake in my code that made me think it was still broken. Accepted answer below provides perfect code to accomplish exactly what I was hoping for.)
I've layouted two BrowserFields. One is aligned to top, the other is aligned to bottom. Their height is defined by TOP_BROWSER_FIELD_HEIGHT and BOTTOM_BROWSER_FIELD_HEIGHT accordingly. In the middle there is another manager that consume all the available height that is left after layouting the BrowserFields.
import net.rim.device.api.browser.field2.BrowserField;
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.component.ButtonField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.BackgroundFactory;
public class BrowserFieldScreen extends MainScreen implements FieldChangeListener {
private static final int TOP_BROWSER_FIELD_HEIGHT = Display.getHeight() / 3;
private static final int BOTTOM_BROWSER_FIELD_HEIGHT = Display.getHeight() / 3;
private BrowserField topBrowserField;
private BrowserField bottomBrowserField;
private VerticalFieldManager vfmCenter;
private ButtonField startButton;
public BrowserFieldScreen() {
super(NO_VERTICAL_SCROLL | NO_HORIZONTAL_SCROLL | USE_ALL_WIDTH | USE_ALL_HEIGHT);
final VerticalFieldManager topVfm = new VerticalFieldManager(USE_ALL_HEIGHT | USE_ALL_WIDTH);
topBrowserField = new BrowserField();
topVfm.add(topBrowserField);
final VerticalFieldManager bottomVfm = new VerticalFieldManager(USE_ALL_HEIGHT | USE_ALL_WIDTH);
bottomBrowserField = new BrowserField();
bottomVfm.add(bottomBrowserField);
vfmCenter = new VerticalFieldManager(USE_ALL_WIDTH);
vfmCenter.setBackground(BackgroundFactory.createSolidBackground(Color.GRAY));
HorizontalFieldManager hfmCenter = new HorizontalFieldManager(USE_ALL_HEIGHT | FIELD_HCENTER);
startButton = new ButtonField("START", FIELD_VCENTER);
startButton.setChangeListener(this);
hfmCenter.add(startButton);
vfmCenter.add(hfmCenter);
VerticalFieldManager vfm = new VerticalFieldManager() {
protected void sublayout(int maxWidth, int maxHeight) {
setExtent(maxWidth, maxHeight);
// layout BrowserFields first
layoutChild(topVfm, maxWidth, TOP_BROWSER_FIELD_HEIGHT);
layoutChild(bottomVfm, maxWidth, BOTTOM_BROWSER_FIELD_HEIGHT);
// layout center field manager last to make it occupy all the height left
int maxCenterHeight = maxHeight - (TOP_BROWSER_FIELD_HEIGHT + BOTTOM_BROWSER_FIELD_HEIGHT);
layoutChild(vfmCenter, maxWidth, maxCenterHeight);
int yPos = 0;
setPositionChild(topVfm, 0, yPos);
yPos += TOP_BROWSER_FIELD_HEIGHT;
setPositionChild(vfmCenter, 0, yPos);
yPos += vfmCenter.getHeight();
setPositionChild(bottomVfm, 0, yPos);
};
};
vfm.add(topVfm);
vfm.add(vfmCenter);
vfm.add(bottomVfm);
add(vfm);
}
public void fieldChanged(Field field, int context) {
if (field == startButton) {
topBrowserField.requestContent("http://www.google.com");
bottomBrowserField.requestContent("http://www.yahoo.com");
}
}
}
The result is
Related
I am an an Android Developer, developing an Blackberry application.
I have created a button of full width of screen. Getting problem in shifting the text to the center of the button area.
Used below code :
ButtonField _contactButton = new ButtonField(Constants.contactButtonTitle,Field.FIELD_HCENTER|Field.USE_ALL_WIDTH |
Field.ACTION_INVOKE | Field.FOCUSABLE | ButtonField.CONSUME_CLICK){
protected void layout(int width, int height) {
super.layout(width, height);
HARD_CODED_HEIGHT = this.getHeight()/2 + 6;
this.setExtent(contactButtonWidth, HARD_CODED_HEIGHT);
}
public int getPreferredWidth() {
return contactButtonWidth;
}
};
Now using the below code :
ButtonField _contactButton = new ButtonField(Constants.contactButtonTitle,Field.FIELD_VCENTER|Field.USE_ALL_WIDTH |
Field.ACTION_INVOKE | Field.FOCUSABLE | ButtonField.CONSUME_CLICK){
protected void layout(int width, int height) {
super.layout(getPreferredWidth(), height);
}
public int getPreferredWidth() {
return (Display.getWidth()-60);
}
};
Still getting the issue .. text of my button align to right corner. Please suggest
ButtonField appears to be a little 'broken'. But it also appears to be consistently broken in all the OS Levels that I have tested (OS 5.0 to OS 7.1), so I think we can achieve what you want by working round the broken bits and be confident the workaround will work in all levels you want.
As has been noted, ButtonField ignores USE_ALL_WIDTH, but does respect preferredWidth. So if you want to set the width of your ButtonField, then just override getPreferredWidth(). You should not do anything with width in layout.
Now you are using the styles for ButtonField already. Given that we have discarded USE_ALL_WIDTH as a useful style, I note that you also use FIELD_HCENTER. You should be aware that this is actually a directive to the Manager that is positioning this Field - telling the Manager to position the Field in the centre of the width the Manager has available. This style does not relate to how the contents of the ButtonField are drawn.
For that, you can look to use DrawStyle. By default, ButtonField uses DrawStyle.RIGHT. And it respects DrawStyle.Left - the text will be drawn on the left. It does not however, respect DrawStyle.HCENTER. So to get centred text, we need to paint the text ourselves.
There is one more complication. ButtonField passes a Context area into its paint() method, not the full Field canvas - presumably it does not pass in the edges because these are painted by a border. So to centre the text appropriately, we have to use the clipping region that has been passed in.
Here is the final, hopefully working, ButtonField. I appreciate you will have to spend some time creating a class for this, I'm sorry, I've been lazy and done in it 'in-line'. Please publish your CenteredTextButtonField class if you create one....
final String buttonText = "Test";
ButtonField _contactButton = new ButtonField(" ",
Field.ACTION_INVOKE | Field.FOCUSABLE | ButtonField.CONSUME_CLICK){
public int getPreferredWidth() {
return contactButtonWidth;
}
protected void paint(Graphics graphics) {
super.paint(graphics);
XYRect clippingRect = graphics.getClippingRect();
int centreY = (clippingRect.height - graphics.getFont().getHeight()) / 2;
graphics.drawText(buttonText, 0, centreY, DrawStyle.HCENTER, clippingRect.width);
}
};
USE_ALL_WIDTH is our instruction to the field. Surprisingly, ButtonField ignores such instructions. Even more surprisingly, it honors its own getPreferredWidth (as illogical as it sounds).
So drop that USE_ALL_WIDTH and define your ButtonField like this:
ButtonField testBtn = new ButtonField("Button") {
public int getPreferredWidth() {
return Display.getWidth();
}
};
I'm getting the following error when a screen should appear:
"WARNING: Cannot layout field, insufficient height or width".
Working with BB 5.0.
This screen es called from 3 different screen, and its shows 50% of the screen or 80%, depending on which screen is pushing it.
This one only have one banner at the top (field), some BasicEditField, one DateField, a vew ObjectChoiceField and at the end 2 buttons.
Why is this error showing up now? (2 days ago it didnt and is the same screen that worked fine before). Where should i check for errors?
Also, is there some limit of height or width that a screen can manage?
Code for the banner,
public static Field getBanner() {
Background bg = BackgroundFactory.createSolidBackground(Color.WHITE);
HorizontalFieldManager hfm = new HorizontalFieldManager(Field.USE_ALL_WIDTH | Field.FIELD_VCENTER);
final Bitmap logo = Bitmap.getBitmapResource("logo_40px.png");
BitmapField _bitmap1 = new BitmapField(logo);
int i = Display.getWidth();
i = i - logo.getWidth();
i = i / 2;
_bitmap1.setSpace(i, 5);
hfm.add(_bitmap1);
hfm.setBackground(bg);
return hfm;
}
Regards.
update:
on the screen creation i have this:
super(MainScreen.VERTICAL_SCROLL_MASK | MainScreen.VERTICAL_SCROLLBAR)
Without this, its works fine the screen. But i wont be able to scroll down, right?
You are adding both _bitmap1 and vfm to hfm, and vfm has Field.USE_ALL_WIDTH set. It would work better, I think, to add _bitmap1 to vfm.
EDIT
It may be that your logo (with the added space) is too big for the banner area on the screen. Perhaps something like this would work:
public static Field getBanner() {
Background bg = BackgroundFactory.createSolidBackground(Color.WHITE);
final Bitmap logo = Bitmap.getBitmapResource("logo_40px.png");
final BitmapField _bitmap1 = new BitmapField(logo);
_bitmap1.setSpace((Display.getWidth() - logo.getWidth()) / 2, 5);
HorizontalFieldManager hfm = new HorizontalFieldManager(Field.USE_ALL_WIDTH | Field.FIELD_VCENTER) {
protected void sublayout(int width, int height) {
super.sublayout(width, height);
setExtent(width, Math.min(_bitmap1.getPreferredHeight(), height));
}
}
hfm.add(_bitmap1);
hfm.setBackground(bg);
return hfm;
}
i wanna know, how to fit screen my tabulation bar on blackberry. because my tab is match with blackberry 9700 but for blackberry 9900, my tab is too small. i wanna my tab is fit to all device scree.
thanks in advance :)
this is the code, i got from other post. sorry:
BottomPanel class
public class BottomPanel extends VerticalFieldManager implements
FieldChangeListener {
Bitmap home_bit = Bitmap.getBitmapResource("home.png");
Bitmap home_bit_hover = Bitmap.getBitmapResource("home_h.png");
Bitmap map_bit = Bitmap.getBitmapResource("map.png");
Bitmap map_bit_hover = Bitmap.getBitmapResource("map_h.png");
Bitmap contact_bit = Bitmap.getBitmapResource("contact.png");
Bitmap contact_bit_hover = Bitmap.getBitmapResource("contact_h.png");
PictureBackgroundButtonField home_pic, map_pic, contact_pic;
HorizontalFieldManager hr;
int current_index = 0;
public BottomPanel(int current_index) {
super(FOCUSABLE);
this.current_index = current_index;
VerticalFieldManager ver = new VerticalFieldManager(USE_ALL_WIDTH
| USE_ALL_HEIGHT) {
protected void sublayout(int width, int height) {
super.sublayout(width, home_bit.getHeight());
setExtent(width, home_bit.getHeight());
}
};
hr = new HorizontalFieldManager(FIELD_HCENTER);
if (current_index == 1) {
home_pic = new PictureBackgroundButtonField(home_bit.getWidth(),
home_bit.getHeight(), Field.NON_FOCUSABLE
| Field.FIELD_VCENTER, home_bit_hover,
home_bit_hover);
} else {
home_pic = new PictureBackgroundButtonField(home_bit.getWidth(),
home_bit.getHeight(),
Field.FOCUSABLE | Field.FIELD_VCENTER, home_bit,
home_bit_hover);
}
home_pic.setChangeListener(this);
hr.add(home_pic);
if (current_index == 2) {
map_pic = new PictureBackgroundButtonField(map_bit.getWidth(),
map_bit.getHeight(), Field.NON_FOCUSABLE
| Field.FIELD_VCENTER, map_bit_hover, map_bit_hover);
} else {
map_pic = new PictureBackgroundButtonField(map_bit.getWidth(),
map_bit.getHeight(), Field.FOCUSABLE | Field.FIELD_VCENTER,
map_bit, map_bit_hover);
}
map_pic.setChangeListener(this);
hr.add(map_pic);
if (current_index == 3) {
contact_pic = new PictureBackgroundButtonField(
contact_bit.getWidth(), contact_bit.getHeight(),
Field.NON_FOCUSABLE | Field.FIELD_VCENTER,
contact_bit_hover, contact_bit_hover);
} else {
contact_pic = new PictureBackgroundButtonField(
contact_bit.getWidth(), contact_bit.getHeight(),
Field.FOCUSABLE | Field.FIELD_VCENTER, contact_bit,
contact_bit_hover);
}
contact_pic.setChangeListener(this);
hr.add(contact_pic);
ver.add(hr);
add(ver);
}
public void fieldChanged(Field field, int context) {
if (field == home_pic) {
LoadingScreen loadingScreen = new LoadingScreen(1);
UiApplication.getUiApplication().popScreen(
UiApplication.getUiApplication().getActiveScreen());
UiApplication.getUiApplication().pushScreen(loadingScreen);
loadingScreen.createGUI();
} else if (field == map_pic) {
LoadingScreen loadingScreen = new LoadingScreen(2);
UiApplication.getUiApplication().popScreen(
UiApplication.getUiApplication().getActiveScreen());
UiApplication.getUiApplication().pushScreen(loadingScreen);
loadingScreen.createGUI();
} else if (field == contact_pic) {
LoadingScreen loadingScreen = new LoadingScreen(3);
UiApplication.getUiApplication().popScreen(
UiApplication.getUiApplication().getActiveScreen());
UiApplication.getUiApplication().pushScreen(loadingScreen);
loadingScreen.createGUI();
}
}
Loading Screen class
public class LoadingScreen extends MainScreen {
private LabelField text;
private LabelField texthasil;
private VerticalFieldManager manager;
int current_index = 0;
BottomPanel bottomPanel;
public LoadingScreen(int current_index) {
this.current_index = current_index;
bottomPanel = new BottomPanel(current_index);
setStatus(bottomPanel);
}
public void createGUI() {
manager = new VerticalFieldManager(Manager.VERTICAL_SCROLL
| Manager.VERTICAL_SCROLLBAR);
setStatus(bottomPanel);
}
PictureBackgroundButtonField class
public class PictureBackgroundButtonField extends Field {
private String _label;
private int _labelHeight;
private int _labelWidth;
private Font _font;
private Bitmap _currentPicture;
private Bitmap _onPicture;
private Bitmap _offPicture;
public PictureBackgroundButtonField(int width, int height, long style,
Bitmap picture, Bitmap selectedPic) {
super(style);
_font = getFont();
_label = "";
_labelHeight = height;
_labelWidth = width;
_currentPicture = picture;
_onPicture = selectedPic;
_offPicture = picture;
}
protected void drawFocus(Graphics graphics, boolean on) {
// Do nothing
}
public int getPreferredHeight() {
return _labelHeight;
}
public int getPreferredWidth() {
return _labelWidth;
}
protected void layout(int width, int height) {
setExtent(getPreferredWidth(), getPreferredHeight());
}
protected boolean navigationClick(int status, int time) {
fieldChangeNotify(1);
return true;
}
protected void onFocus(int direction) {
_currentPicture = _onPicture;
invalidate();
}
protected void onUnfocus() {
_currentPicture = _offPicture;
invalidate();
}
protected void paint(Graphics graphics) {
graphics.drawBitmap(0, 0, getPreferredWidth(), getPreferredHeight(),
_currentPicture, 0, 0);
graphics.setFont(_font);
graphics.drawText(
_label,
4,
2,
(int) (getStyle() & DrawStyle.ELLIPSIS | DrawStyle.HALIGN_MASK),
getWidth() - 6);
}
You don't show us what kind of tab bar background you have, and the solution does depend a little on that. If you are happy having a tab bar that is always the same height (in pixels), but just changes width, then you could use something like this.
I create a Manager subclass called TabBarManager. It will span the whole width of your screen, with a fixed height. It can have Field objects added to it like any normal manager. It is intended to have button fields added to it, so that when you click the button field, something happens. Probably, you'd also want the appearance of the button fields to change, depending on which tab is selected. However, it wasn't clear that this question was about that problem, so I didn't show that code. All this code does is give you a Manager to add tab fields to, that will draw a full-width background.
The tab bar fields that you add to this should contain icon images and/or labels, that have transparent backgrounds. For example, a white silhouette icon of a globe, if the tab is a map view. The transparent background shows through to the TabBarManager background.
The technique is to draw (in Photoshop, or whatever) three images. A left, right, and center image. Think of drawing a full tab bar image. Then, crop off the left few pixels, and save as TabBar-left.png. Crop the right few pixels and save as TabBar-right.png, and then crop a few pixels out of the center, and save as TabBar-center.png. Example images are shown below the code:
/**
* A TabBarManager provides a horizontal bar of button fields, that serve as a tab bar
* header or footer, used to select between available subviews in a larger Screen.
*/
private final class TabBarManager extends HorizontalFieldManager {
private int height;
private Bitmap left;
private Bitmap center;
private Bitmap right;
public TabBarManager() {
super(HorizontalFieldManager.NO_VERTICAL_SCROLL); // tab bar itself doesn't scroll
left = Bitmap.getBitmapResource("TabBar-left.png");
right = Bitmap.getBitmapResource("TabBar-right.png");
center = Bitmap.getBitmapResource("TabBar-center.png");
height = left.getHeight();
}
public void sublayout(int width, int h) {
super.sublayout(width, height);
setExtent(width, height); // restrict height to a fixed value
}
public int getPreferredHeight() {
return height;
}
public void paint(Graphics g) {
// draw the background image for the tab bar with two sides and a center section,
// to account for the fact that different devices have different widths
int width = Display.getWidth();
g.drawBitmap(0, 0, left.getWidth(), height, left, 0, 0);
// fill in the center by repeating the center image as many times as needed
int x = left.getWidth();
int centerWidth = center.getWidth();
int leftEdgeOfRightBitmap = width - right.getWidth();
while (x < leftEdgeOfRightBitmap) {
g.drawBitmap(x, 0, centerWidth, height, center, 0, 0);
x += centerWidth;
}
// draw right side
g.drawBitmap(leftEdgeOfRightBitmap, 0, right.getWidth(), height, right, 0, 0);
// use super.paint() to draw the icons/labels on top of our background
super.paint(g);
}
}
Left, center, and right PNGs (must be same height ... width doesn't matter):
, ,
How You Use It
In the code you show, you can either replace your hr variable with an instance of my TabBarManager. Or you can rename my TabBarManager class to BottomPanel, and add the additional code you need to it ... things like the current index, and the field change listener callback.
Limitations
The above implementation will only stretch the tab bar's width. The height is fixed. For a fully stretchable tab bar, you could either mimic a 9-patch image by drawing 9 images (top-left, top-center, top-right, left, center, right, bottom-left, bottom-center, bottom-right). Or use something like this to get 9-patch stretchable images for BlackBerry
References
http://supportforums.blackberry.com/t5/Java-Development/Create-tabbed-view-screens/ta-p/444969
I'd like to generate a VerticalFieldManager that has a none-zero margin, so I create a VerticalFieldManager, and then use vfm.setMargin(10, 10, 10, 10); after that, put some fields(buttonField, ObjectChoiceField) in it.
It seems too simple, right? but strange thing happens. When I focus to the last ObjectChoiceField and press space to toggle choice of it, the ObjectChoiceField disappeared.
How can that be? here is the demo code, anyone kindly find the bug?
final class HelloWorldScreen extends MainScreen{
HelloWorldScreen() {
// just a demo to show the strange thing
String [] arr = {"a","b"};
for(int i = 0; i < 10; i++){
VerticalFieldManager vfm = new VerticalFieldManager(); // Field.USE_ALL_WIDTH
vfm.setMargin(10, 10, 10, 10);
ButtonField btn = new ButtonField(String.valueOf(i));
ObjectChoiceField ch = new ObjectChoiceField(String.valueOf(i), arr);
vfm.add(btn);
vfm.add(ch);
add(vfm);
}
}
}
Edit: screenshot of desired UI margins:
That is strange.
For the benefit of those who don't run your code, what's happening is that when you click on the object choice fields, the whole screen is scrolling a little bit vertically. After each vertical scroll, the screen loses the ability to scroll all the way down to the bottom. After many such operations, eventually much of the lower part of this screen is no longer accessible.
I don't know why this is happening. (looks like a BlackBerry bug to me)
What I observed is that if you take out the call to
vfm.setMargin(10, 10, 10, 10);
the problem goes away.
May I suggest a workaround where you use
vfm.setPadding(10, 10, 10, 10);
instead?
I know that margin and padding are not the same thing. However, depending on what your full UI design is (which I cannot see), in this case, setting a 10 pixel padding may be sufficient to do what you were trying to do.
Update: based on the screenshot of your desired UI, I was able to produce that with this workaround. Again, it shouldn't be this much work, but this additional code worked for me:
public class BugScreen extends MainScreen {
private static final int BG_COLOR = Color.LIGHTGRAY;
private static final int FG_COLOR = Color.WHITE;
private static final int BORDER_LINE_COLOR = Color.GRAY;
private static final int PAD = 10;
public BugScreen() {
super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
getMainManager().setBackground(BackgroundFactory.createSolidBackground(BG_COLOR));
// this additional call ensures that when scrolling bounces, the area "behind"
// the normal visible area is ALSO of BG_COLOR
setBackground(BackgroundFactory.createSolidBackground(BG_COLOR));
// this will establish a thin gray padding on the screen's left/right sides
// NOTE: I seem to get drawing artifacts if I try to use this for ALL sides!
getMainManager().setPadding(0, PAD, 0, PAD);
String [] arr = {"a","b"};
for(int i = 0; i < 10; i++){
VerticalFieldManager vfm = new VerticalFieldManager(Field.USE_ALL_WIDTH) {
public int getPreferredWidth() {
return Display.getWidth() - 2 * PAD;
}
public void paint(Graphics graphics) {
int oldColor = graphics.getColor();
super.paint(graphics);
graphics.setColor(BORDER_LINE_COLOR);
// draw the (1-pixel wide) border size you would like.
graphics.drawRect(0, 0, getPreferredWidth(), getHeight());
graphics.setColor(oldColor);
}
};
vfm.setBackground(BackgroundFactory.createSolidBackground(FG_COLOR));
ButtonField btn = new ButtonField(String.valueOf(i));
ObjectChoiceField ch = new ObjectChoiceField(String.valueOf(i), arr);
vfm.add(btn);
vfm.add(ch);
// add a separator field to get thin gray margin between (vfm) fields
add(new MarginField());
add(vfm);
}
// add one last margin field at the bottom
add(new MarginField());
}
private class MarginField extends Field {
public MarginField() {
super(Field.USE_ALL_WIDTH);
}
public int getPreferredHeight() { return PAD; }
protected void paint(Graphics g) {
int oldColor = g.getColor();
g.setColor(BG_COLOR);
g.fillRect(0, 0, getWidth(), getPreferredHeight());
g.setColor(oldColor);
}
protected void layout(int width, int height) {
setExtent(width, getPreferredHeight());
}
}
}
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!
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.
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 :)
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.