Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Regular Contributor
sheetaloswal
Posts: 59
Registered: ‎03-06-2012
My Device: 9700
Accepted Solution

Issue in fixing the alignment

Hi,

 

  I am trying to divide the bottom bar using the following code ,the bottom bar has data like img1 string  img2 |img2 ,the issue i am facing is if the string is small the img2 and img3 gets moved to left /right based on the length of string.What is wrong below

 

HorizontalFieldManager horizontalFieldManager = new HorizontalFieldManager(
FIELD_BOTTOM | Manager.USE_ALL_WIDTH) {
public void paint(Graphics graphics) {
graphics.setBackgroundColor(0x316AC5);
graphics.clear();
super.paint(graphics);
}
};
Bitmap fadeBitmap = Bitmap
.getBitmapResource("icon_tz_faded_316AC5_35x39.png");
Bitmap clockBitmap = Bitmap
.getBitmapResource("icon_date_picker_white_316AC5_35x39.png");
Bitmap tzBitmap = Bitmap
.getBitmapResource("icon_tz_white_316AC5_35x39.png");

final ImageButtonField unfocus = new ImageButtonField("",
Field.FOCUSABLE | FIELD_LEFT, "icon_tz_faded_316AC5_35x39.png",
"icon_tz_faded_316AC5_35x39.png", 0xFFFFFF);

final ImageButtonField bitmapField = new ImageButtonField("",
Field.FOCUSABLE | ImageButtonField.FIELD_RIGHT,
"icon_date_picker_white_316AC5_35x39.png",
"icon_date_picker_selected_35x39.png", 0xFFFFFF);

final ImageButtonField bitmapField1 = new ImageButtonField("",
Field.FOCUSABLE | ImageButtonField.FIELD_RIGHT,
"icon_tz_white_316AC5_35x39.png", "icon_tz_selected_35x39.png",
0xFFFFFF);

int margin = ((Display.getWidth() - (fadeBitmap.getWidth()
+ clockBitmap.getWidth() + tzBitmap.getWidth() + timezoneTitle
.getWidth())) / 4);

unfocus.setMargin(0, 3, 0, 0);
timezoneTitle.setMargin(0, 130, 0, 0);
bitmapField.setMargin(0, 15, 0, 0);
bitmapField1.setMargin(0, 0, 0, 0);

horizontalFieldManager.add(unfocus);
horizontalFieldManager.add(timezoneTitle);
horizontalFieldManager.add(bitmapField);
horizontalFieldManager.add(bitmapField1);

this.setStatus(horizontalFieldManager);

Contributor
magnetix
Posts: 41
Registered: ‎11-11-2010
My Device: Not Specified

Re: Issue in fixing the alignment

I think the problem is that you cannot specify different alignment within the same manager without writing your own layout method. Am I right in assuming you are trying to align the image and text to the left, and the other two images to the right?

 

In this case the following class can help. I use it when I want things on either side of the screen. All you have to do is put your fields into groups (HorizontalFieldManagers) if you want to specify multiple objects for the left and right side, then pass the HorizontalFieldManager in instead of the individual fields.

 

public class SeparatedFieldManager extends HorizontalFieldManager
{
    private Field leftField;
    private Field rightField;

    public SeparatedFieldManager( Field lField, Field rField )
    {
        super( USE_ALL_WIDTH );

        leftField = lField;
        add( leftField );

        rightField = rField;
        add( rightField );
    }

    protected void sublayout( int maxWidth, int maxHeight )
    {
        super.sublayout( maxWidth, maxHeight );

        int width = getWidth();
        
        if (rightField != null && equals( rightField.getManager() ))
        {
            int x = width - rightField.getWidth();
            int y = 0;
            setPositionChild( rightField, x, y );
        }
    }
}

 

Also, your integer "margin" is not used in the code you posted. I'm not sure if this is affecting the outcome, or if it used later on for something else.

Regular Contributor
sheetaloswal
Posts: 59
Registered: ‎03-06-2012
My Device: 9700

Re: Issue in fixing the alignment

[ Edited ]

Seems to be perfect solution but i have a query i am already adding the bitmap field to HFM as above code,can u please make this clear.I am doing like below but i cannot see the right two images after using the above class

 

horizontalFieldManager.add(unfocusBitmap);
        horizontalFieldManager.add(timezoneTitle);
        horizontalFieldManager1.add(bitmapField);
        horizontalFieldManager1.add(bitmapField1);
        SeparatedFieldManager jfm=new SeparatedFieldManager(horizontalFieldManager, horizontalFieldManager1);
    vm.add(jfm);

 

I am adding the left image and string to horizontalFieldManager and third and fourth image to horizontalFieldManager1 which in turn i am passing to SeparatedFieldManagerthen adding it to vertical manager.The third and fourth images are not visible

Contributor
magnetix
Posts: 41
Registered: ‎11-11-2010
My Device: Not Specified

Re: Issue in fixing the alignment

You seem to be using it correctly. My own setup is very similar. Are you passing any style flags into the HorizontalFieldManagers when creating them? Can you post the code where you create each field? Perhaps a USE_ALL_WIDTH flag in the wrong place might be causing you problems...? Try it with a couple of labels to start off with, just to make sure it's working at all, then add fields one at a time to see which one is causing the problem. Good luck.

Regular Contributor
sheetaloswal
Posts: 59
Registered: ‎03-06-2012
My Device: 9700

Re: Issue in fixing the alignment

[ Edited ]

HorizontalFieldManager horizontalFieldManager = new HorizontalFieldManager() {
public void paint(Graphics graphics) {
graphics.setBackgroundColor(0x316AC5);
graphics.clear();
super.paint(graphics);
}
};
HorizontalFieldManager horizontalFieldManager1= new HorizontalFieldManager() {
public void paint(Graphics graphics) {
graphics.setBackgroundColor(0x316AC5);
graphics.clear();
super.paint(graphics);
}
};

Bitmap fadeBitmap = Bitmap
.getBitmapResource("icon_tz_faded_316AC5_35x39.png");
Bitmap clockBitmap = Bitmap
.getBitmapResource("icon_date_picker_white_316AC5_35x39.png");
Bitmap tzBitmap = Bitmap
.getBitmapResource("icon_tz_white_316AC5_35x39.png");

final ImageButtonField unfocus = new ImageButtonField("",
Field.FOCUSABLE | FIELD_LEFT, "icon_tz_faded_316AC5_35x39.png",
"icon_tz_faded_316AC5_35x39.png", 0xFFFFFF);

final ImageButtonField bitmapField = new ImageButtonField("",
Field.FOCUSABLE | ImageButtonField.FIELD_RIGHT,
"icon_date_picker_white_316AC5_35x39.png",
"icon_date_picker_selected_35x39.png", 0xFFFFFF);

final ImageButtonField bitmapField1 = new ImageButtonField("",
Field.FOCUSABLE | ImageButtonField.FIELD_RIGHT,
"icon_tz_white_316AC5_35x39.png", "icon_tz_selected_35x39.png",
0xFFFFFF);


horizontalFieldManager.add(unfocus);
horizontalFieldManager.add(timezoneTitle);
horizontalFieldManager1.add(bitmapField);
horizontalFieldManager1.add(bitmapField1);
SeparatedFieldManager jfm=new SeparatedFieldManager(horizontalFieldManager, horizontalFieldManager1);

        VerticalFieldManager test = new VerticalFieldManager();


test.add(jfm);

This is my complete code ,pls let me know whats wrong,still it behaving like below image,i want the blue bar as a whole,but its parting.

 

 

Contributor
magnetix
Posts: 41
Registered: ‎11-11-2010
My Device: Not Specified

Re: Issue in fixing the alignment

[ Edited ]

Edit - I noticed you wereonly asking about the complete blue bar. That is because the HorizontalFieldManagers will only take up the space they need in the absence of additional style flags. You want to paint the background of the SeparatedFieldManager, since it is the thing that occupies the whole width. Original reply continues below...

 

 

This is the code that produced the following output for me. This is the whole screen class in my test project... If your output is different, it's probably your ImageButtonField class since that's all the code I didn't have. I replaced it with a simple ButtonField.

 

screen1.jpg

 

 

 

public final class MyScreen extends MainScreen
{
    /**
     * Creates a new MyScreen object
     */
    public MyScreen()
    {        
        // Set the displayed title of the screen       
        setTitle("MyTitle");
        
        
        HorizontalFieldManager horizontalFieldManager = new HorizontalFieldManager() {
        	public void paint(Graphics graphics) {
        	graphics.setBackgroundColor(0x316AC5);
        	graphics.clear();
        	super.paint(graphics);
        	}
        	};
        	HorizontalFieldManager horizontalFieldManager1= new HorizontalFieldManager() {
        	public void paint(Graphics graphics) {
        	graphics.setBackgroundColor(0x316AC5);
        	graphics.clear();
        	super.paint(graphics);
        	}
        	};

        	Bitmap fadeBitmap = Bitmap
        	.getBitmapResource("icon_tz_faded_316AC5_35x39.png");
        	Bitmap clockBitmap = Bitmap
        	.getBitmapResource("icon_date_picker_white_316AC5_35x39.png");
        	Bitmap tzBitmap = Bitmap
        	.getBitmapResource("icon_tz_white_316AC5_35x39.png");

        	final ButtonField unfocus = new ButtonField("button1",
        	Field.FOCUSABLE | FIELD_LEFT);

        	final ButtonField bitmapField = new ButtonField("button2",
        	Field.FOCUSABLE | ButtonField.FIELD_RIGHT);

        	final ButtonField bitmapField1 = new ButtonField("button3",
        	Field.FOCUSABLE | ButtonField.FIELD_RIGHT);


        	horizontalFieldManager.add(unfocus);
        	horizontalFieldManager.add(new LabelField("testTitle"));
        	horizontalFieldManager1.add(bitmapField);
        	horizontalFieldManager1.add(bitmapField1);
        	SeparatedFieldManager jfm=new SeparatedFieldManager(horizontalFieldManager, horizontalFieldManager1);

        	        VerticalFieldManager test = new VerticalFieldManager();


        	add(jfm);
    }
    
    public class SeparatedFieldManager extends HorizontalFieldManager
    {
        private Field leftField;
        private Field rightField;

        public SeparatedFieldManager( Field lField, Field rField )
        {
            super( USE_ALL_WIDTH );

            leftField = lField;
            add( leftField );

            rightField = rField;
            add( rightField );
        }

        protected void sublayout( int maxWidth, int maxHeight )
        {
            super.sublayout( maxWidth, maxHeight );

            int width = getWidth();
            
            if (rightField != null && equals( rightField.getManager() ))
            {
                int x = width - rightField.getWidth();
                int y = 0;
                setPositionChild( rightField, x, y );
            }
        }
        
    	public void paint(Graphics graphics) {
        	graphics.setBackgroundColor(0x316AC5);
        	graphics.clear();
        	super.paint(graphics);
        	}
    }
}

 

 

Regular Contributor
sheetaloswal
Posts: 59
Registered: ‎03-06-2012
My Device: 9700

Re: Issue in fixing the alignment

[ Edited ]

 

I was abt to edit my code saying got solved before that only you have posted,ya it was because of paint method.Thanks a lot ,my problem got solved.

 

Can i pass different color to         SeparatedFieldManager jfm=new SeparatedFieldManager(horizontalFieldManager, horizontalFieldManager1,Color.BLUE) and pass to paint method ? because i am using this class at two placeswith different colors


Contributor
magnetix
Posts: 41
Registered: ‎11-11-2010
My Device: Not Specified

Re: Issue in fixing the alignment

Sure, just store the colour as a private int in the class and use that int in the paint method. Sounds like you already know what you have to do here from your SeparatedFieldManager constructor :smileywink: