i want to place the Buttons as displayed in the image:
alt text http://www.freeimagehosting.net/uploads/413b8990b3.png
for this i am using the following code but it is not working for me can any one please help me out
topbarManager = new HorizontalFieldManager();
topbarLeftManager = new HorizontalFieldManager(Field.FIELD_LEFT);
topbarRightManager = new HorizontalFieldManager(Field.FIELD_RIGHT);
topbarCenterManager = new HorizontalFieldManager(Field.FIELD_HCENTER);
topbarLeftManager.add(new ButtonField("first"));
topbarRightManager.add(new ButtonField("second"));
topbarCenterManager.add(new ButtonField("third"));
topbarManager.add(topbarLeftManager);
topbarManager.add(topbarCenterManager);
topbarManager.add(topbarRightManager);
i am not getting the result as i required.
can any one please Help me out.
Thanks a lot
according to docs.
HorizontalFieldManager layout manager arranges UI components in a single horizontal row starting at the left side of the screen and ending at the right side of the screen. Because this layout manager arranges UI components horizontally, you cannot apply horizontal style bits to UI components (for example, Field.FIELD_LEFT, Field.FIELD_HCENTER, or Field.FIELD_RIGHT). You can apply vertical style bits (for example, Field.FIELD_TOP, Field.FIELD_BOTTOM, or Field.FIELD_VCENTER).
so if you want to see Field.FIELD_LEFT effect use
VerticalFieldManager hfm = new VerticalFieldManager(Manager.USE_ALL_WIDTH);
instead of HorizontalFieldManager, you will see the stair case like effect.
To layout UI best thing is use custom layout
HorizontalFieldManager hfm = new HorizontalFieldManager(Manager.USE_ALL_WIDTH){
protected void sublayout(int maxWidth, int maxHeight) {
Field f;
int w = Display.getWidth();
int x=0;
for (int i = 0; i < getFieldCount(); i++) {
f = getField(i);
layoutChild(f, f.getPreferredWidth(), f.getPreferredHeight());
setPositionChild(f, x, 0);
x+=(w-f.getWidth())/2;
}
setExtent(maxWidth, maxHeight);
}
};
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'm trying to make a design like at the picture:
as you can see, at the top bar of the screen there is a title at the center. I can set it to horizontal center, but how to set it to vertical center?
I allready tryed:
override RichTextField to make it custom sized. it works for widht, but not height.
override horizontal/vertical field manager to make it with custon height with vertical centrizing, but it didn't work:
VerticalFieldManager vfm = new VerticalFieldManager();
HorizontalFieldManager hfm = new HorizontalFieldManager(Field.FIELD_VCENTER){
protected void sublayout( int maxWidth, int maxHeight )
{
super.sublayout( Display.getWidth(), 50);
}
};
LabelWithCustomSize title = new LabelWithCustomSize("ENTERTAINMENT",Field.NON_FOCUSABLE,Display.getWidth(),50,30,2);
hfm.add(title);
vfm.add(hfm);
add an empty RichTextField with small text size, but fiels allways has same height.
How to set text or any other field at vertical center?
The issue that you will need to solve is "How does a Manager centre vertically and Horizontally any field that is added to it". Trying to solve this problem for N number of fields added to Manager might be a bit involved but just for one field, it must be quite easy. I suggest you try this :
VerticalFieldManager vfm = new VerticalFieldManager(){
public void sublayout( int maxWidth, int maxHeight )
{
int margin = 0;
int lheight = 0;
Field f = getField( 0 );
margin = f.getMarginBottom()+f.getMarginTop();
layoutChild(f, maxWidth-margin, maxHeight);
int w = f.getWidth();
int h = f.getHeight();
lheight = h+margin;
int x = (maxWidth - w)/2;
int y = (maxHeight -h)/2;
setPositionChild( f, x, y);
setExtent( maxWidth, lheight);
}
};
vfm.add( field);
Horizontally, I want to display two bitmaps, and between them display a label field.
The code seems straightforward, but all the fields are added on the left side of the screen.
HorizontalFieldManager hfm = new HorizontalFieldManager();
callbmp = new BitmapField(ei.getBitmap(),Field.FOCUSABLE |BitmapField.FIELD_LEFT);
LabelField NAME = new LabelField("mylable", LabelField.FIELD_HCENTER);
mailbmp = new BitmapField(mail.getBitmap(),Field.FOCUSABLE|BitmapField.FIELD_RIGHT);
hfm.add(callbmp);
hfm.add(NAME);
hfm.add(mailbmp);
add(hfm);
Manager customManager = new Manager(0)
{
protected void sublayout(int width, int height) {
setPositionChild(
getField(0),
0,
0);
layoutChild(
getField(0),
getField(0).getPreferredWidth(),
getField(0).getPreferredHeight());
setPositionChild(
getField(1),
Graphics.getScreenWidth()/2 - getField(1).getPreferredWidth()/2,
0);
layoutChild(
getField(1),
getField(1).getPreferredWidth(),
getField(1).getPreferredHeight());
setPositionChild(
getField(2),
Graphics.getScreenWidth() - getField(2).getPreferredWidth(),
0);
layoutChild(
getField(2),
getField(2).getPreferredWidth(),
getField(2).getPreferredHeight());
setExtent(width, height);
}
};
customManager.add(new BitmapField(Bitmap.getBitmapResource("image1.png")));
customManager.add(new LabelField("Hello Alignment"));
customManager.add(new BitmapField(Bitmap.getBitmapResource("image2.png")));
HorizontalFieldManager lays out the fields left-to-right in the order in which they are added. The style bits for horizontal layout are ignored.
If you want left, right and center on a horizontal line, you'll need a custom manager.
This should be your requirement:
It can be done simply by subtracting the widths of the items you are adding on your horizontal field manager. By default the leftButton or the first item you add on the HFM will be added on left. Then you can add your label(userName) and the rightButton in the following way:
LabelField userName = new LabelField("MaheshBabu");
HorizontalFieldManager horizontalBar = new HorizontalFieldManager(USE_ALL_WIDTH|Manager.NO_HORIZONTAL_SCROLL|Manager.NO_HORIZONTAL_SCROLLBAR);
horizontalBar.setBackground(BackgroundFactory.createSolidBackground(Color.BLACK));
rightButton.setMargin(0, 0, 0, Display.getWidth()-rightButton.getPreferredWidth()-leftButton.getPreferredWidth()-userName.getPreferredWidth());
horizontalBar.add(leftButton);
horizontalBar.add(userName);
horizontalBar.add(rightButton);
What I want to achieve is to have a custom popup screen with specified width and height.
On that screen I add two buttons which stay in one row and align center horizontally.
public class CustomPopupScreen extends PopupScreen {
ButtonField minimizeBf;
ButtonField cancelBf;
HorizontalFieldManager hfm;
public CustomPopupScreen() {
super(new VerticalFieldManager());
minimizeBf = new ButtonField("Minimize", FIELD_HCENTER|Field.USE_ALL_WIDTH);
cancelBf = new ButtonField("Cancel", FIELD_HCENTER|Field.USE_ALL_WIDTH);
hfm = new HorizontalFieldManager(FIELD_HCENTER|Field.USE_ALL_WIDTH);
hfm.add(minimizeBf);
hfm.add(cancelBf);
add(hfm);
//add(minimizeBf);
//add(cancelBf);
}
protected void sublayout(int width, int height) {
// TODO Auto-generated method stub
int xPos = 0;
int yPos = 0;
int sideMargin = 30;
int screenWidth = width - (2 * sideMargin);
int screenHeight = 100;
layoutDelegate(screenWidth, screenHeight);
//setPositionDelegate(0, 0);
super.sublayout(screenWidth, screenHeight);
setExtent(screenWidth, screenHeight);
xPos = (width - screenWidth) / 2;
yPos = (height - screenHeight) / 2;
setPosition(xPos, yPos);
// layout(screenWidth, screenHeight);
}
}
If I add those buttons to the screen, then it will align center horizontally, but the buttons appear on different row, while I want it to appear in the same row.
Can somebody tell me where have I code wrong ?
Try removing the USE_ALL_WIDTH flag from your HorizontalFieldManager allocation. That should do the trick.
Try putting a couple of vertical field managers, each taking half the available width, inside the horizontal manager. then add one button to each of the vertical managers.
I was just wondering the purpose of having a custom size. There is often a correct way to do something without having to modify the layout manually. If you share your end goal, we may be able to help better. Since it almost appears that you want to simply make two buttons be side to side. To add width and height you can add spacers (add(new SeparatorField())) to the field managers and specify their width/height as well as where in the manager you want them. This would allow all the fields to use their default layout patterns.
just do one
hfm = new HorizontalFieldManager(USE_ALL_WIDTH);
i think it might help you just give it a try.