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
Developer
Iyenemi_Tyger
Posts: 132
Registered: ‎10-25-2011
My Device: Tour 9630

EditField drawbitmap as background image problem

Good day , Please i am having an issue i am trying to draw a bitmap as background in my custom editfield here is my editfield class package carniriv.components.ui; import net.rim.device.api.system.Bitmap; import net.rim.device.api.ui.Color; import net.rim.device.api.ui.Graphics; import net.rim.device.api.ui.XYEdges; import net.rim.device.api.ui.component.EditField; import net.rim.device.api.ui.decor.Border; import net.rim.device.api.ui.decor.BorderFactory; /** * * Custom class to hold information for TextField * @author Iyenemi Tyger * */ public class TextEditField extends EditField { private String draw_text; XYEdges padding = new XYEdges(2, 3, 2, 3); Border myBorder = BorderFactory.createBitmapBorder( new XYEdges(11, 11, 11, 11), Bitmap.getBitmapResource("gradient_focus_element.png")); /** * * standard constructor for using this component * @param draw_texts the auto removable text to be displayed within the textfield * @param style the drawing style of the textfield such as positioning */ public TextEditField(String draw_texts , long style) { super(TextEditField.NO_NEWLINE | style); this.draw_text = draw_texts; this.setBorder(myBorder); this.setMargin(padding); try { this.setFont(Content.getSmallMessageText()); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } } public String getText() { return super.getText(); } public void setText(String value) { super.setText(value); } protected void paint(Graphics g) { if (this.getText().length() == 0) { g.setColor(Color.GRAY); g.drawText(draw_text, 0, 0); } g.setColor(Color.BLACK); // g.clear(); super.paint(g); } /** * * paint background protected void paintBackground(Graphics graphics) { //Border currentBorder = myBorder; //Background currentBackground = myBorder.getBackground(); //graphics.clear(); //graphics.drawBitmap(0, getPreferredHeight(), getPreferredWidth(), getPreferredHeight(), Bitmap.getBitmapResource("gradient_unfocus_element.png"), 11, 11); //graphics.drawBitmap(new XYRect(0, getPreferredHeight(), getWidth(), getHeight()), Bitmap.getBitmapResource("gradient_unfocus_element.png"), 11, 11); //currentBorder.paint( graphics, new XYRect(11, 11, 11, 11)); // currentBackground.draw( graphics, new XYRect(11, 11, 11, 11)); //super.paint(graphics); // super.paint(graphics); //paint(graphics); graphics.setBackgroundColor(Color.WHITE); super.paintBackground(graphics); } **/ public int getPreferredHeight() { return 15; } /** protected void onFocus(int direction) { this.setBorder(greenBorder); this.setCursorPosition(this.getTextLength()); invalidate(); } protected void onUnfocus() { this.setBorder(myBorder); invalidate(); } **/ protected void layout(int width , int height) { //super.layout(width, height); // setExtent(Display.getWidth() - 45, getContentHeight()); width = Math.min( width, getPreferredWidth() ); height = Math.min( height, getPreferredHeight()); super.layout(width - 41, height); setExtent(width - 41, height); } } Now the problem is the image is not being drawn correctly on the background of the editfield , please any tip would be appreciated , thanks .The image is attached to this post , thanks .
Developer
simon_hain
Posts: 16,364
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport

Re: EditField drawbitmap as background image problem

please format your post.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
Iyenemi_Tyger
Posts: 132
Registered: ‎10-25-2011
My Device: Tour 9630

Re: EditField drawbitmap as background image problem

This is my code i have attached the image that should be displayed on the background , thanks,

package carniriv.components.ui;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;

/**
*
* Custom class to hold information for TextField
* @author Iyenemi Tyger
*
*/
public class TextEditField extends EditField
{

private String draw_text;
XYEdges padding = new XYEdges(2, 3, 2, 3);

Border myBorder = BorderFactory.createBitmapBorder( new XYEdges(11, 11, 11, 11), Bitmap.getBitmapResource("focus_element.png"));



/**
*
* standard constructor for using this component
* @param draw_texts the auto removable text to be displayed within the textfield
* @param style the drawing style of the textfield such as positioning
*/
public TextEditField(String draw_texts , long style)
{
super(TextEditField.NO_NEWLINE | style);
this.draw_text = draw_texts;

this.setBorder(myBorder);
this.setMargin(padding);
try {
this.setFont(Content.getSmallMessageText());
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}


public String getText()
{
return super.getText();
}

public void setText(String value)
{
super.setText(value);
}


protected void paint(Graphics g)
{


if (this.getText().length() == 0)
{
g.setColor(Color.GRAY);
g.drawText(draw_text, 0, 0);

}

g.setColor(Color.BLACK);
// g.clear();
super.paint(g);


}

/**
*
* paint background

protected void paintBackground(Graphics graphics)
{
//Border currentBorder = myBorder;
//Background currentBackground = myBorder.getBackground();
//graphics.clear();
//graphics.drawBitmap(0, getPreferredHeight(), getPreferredWidth(), getPreferredHeight(), Bitmap.getBitmapResource("gradient_unfocus_element.png"), 11, 11);
//graphics.drawBitmap(new XYRect(0, getPreferredHeight(), getWidth(), getHeight()), Bitmap.getBitmapResource("gradient_unfocus_element.png"), 11, 11);
//currentBorder.paint( graphics, new XYRect(11, 11, 11, 11));
// currentBackground.draw( graphics, new XYRect(11, 11, 11, 11));
//super.paint(graphics);

// super.paint(graphics);
//paint(graphics);
graphics.setBackgroundColor(Color.WHITE);
super.paintBackground(graphics);

}
**/


/** public int getPreferredHeight()
{

return 15;
} **/

public int getPreferredHeight()
{
return getFont().getHeight()-1;

}
/** protected void onFocus(int direction)
{

this.setBorder(greenBorder);
this.setCursorPosition(this.getTextLength());
invalidate();
}


protected void onUnfocus()
{

this.setBorder(myBorder);
invalidate();
} **/


protected void layout(int width , int height)
{
//super.layout(width, height);
// setExtent(Display.getWidth() - 45, getContentHeight());
width = Math.min( width, getPreferredWidth() );
height = Math.min( height, getPreferredHeight());
super.layout(width - 41, height);
setExtent(width - 41, height);

}

}

Developer
Iyenemi_Tyger
Posts: 132
Registered: ‎10-25-2011
My Device: Tour 9630

Re: EditField drawbitmap as background image problem

This is my code i have attached the image that should be displayed on the background , thanks,

package carniriv.components.ui;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;

/**
*
* Custom class to hold information for TextField
* @author Iyenemi Tyger
*
*/
public class TextEditField extends EditField
{

private String draw_text;
XYEdges padding = new XYEdges(2, 3, 2, 3);

Border myBorder = BorderFactory.createBitmapBorder( new XYEdges(11, 11, 11, 11), Bitmap.getBitmapResource("focus_element.png"));



/**
*
* standard constructor for using this component
* @param draw_texts the auto removable text to be displayed within the textfield
* @param style the drawing style of the textfield such as positioning
*/
public TextEditField(String draw_texts , long style)
{
super(TextEditField.NO_NEWLINE | style);
this.draw_text = draw_texts;

this.setBorder(myBorder);
this.setMargin(padding);
try {
this.setFont(Content.getSmallMessageText());
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}


public String getText()
{
return super.getText();
}

public void setText(String value)
{
super.setText(value);
}


protected void paint(Graphics g)
{


if (this.getText().length() == 0)
{
g.setColor(Color.GRAY);
g.drawText(draw_text, 0, 0);

}

g.setColor(Color.BLACK);
// g.clear();
super.paint(g);


}

/**
*
* paint background

protected void paintBackground(Graphics graphics)
{
//Border currentBorder = myBorder;
//Background currentBackground = myBorder.getBackground();
//graphics.clear();
//graphics.drawBitmap(0, getPreferredHeight(), getPreferredWidth(), getPreferredHeight(), Bitmap.getBitmapResource("gradient_unfocus_element.png"), 11, 11);
//graphics.drawBitmap(new XYRect(0, getPreferredHeight(), getWidth(), getHeight()), Bitmap.getBitmapResource("gradient_unfocus_element.png"), 11, 11);
//currentBorder.paint( graphics, new XYRect(11, 11, 11, 11));
// currentBackground.draw( graphics, new XYRect(11, 11, 11, 11));
//super.paint(graphics);

// super.paint(graphics);
//paint(graphics);
graphics.setBackgroundColor(Color.WHITE);
super.paintBackground(graphics);

}
**/


/** public int getPreferredHeight()
{

return 15;
} **/

public int getPreferredHeight()
{
return getFont().getHeight()-1;

}
/** protected void onFocus(int direction)
{

this.setBorder(greenBorder);
this.setCursorPosition(this.getTextLength());
invalidate();
}


protected void onUnfocus()
{

this.setBorder(myBorder);
invalidate();
} **/


protected void layout(int width , int height)
{
//super.layout(width, height);
// setExtent(Display.getWidth() - 45, getContentHeight());
width = Math.min( width, getPreferredWidth() );
height = Math.min( height, getPreferredHeight());
super.layout(width - 41, height);
setExtent(width - 41, height);

}

}

Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: EditField drawbitmap as background image problem

1) You don't need super.paintBackground in your paintBackground override, especially not as the last line;

2) I'm not sure whether overriding paintBackground works well with the setBorder - think about either using setBackground for your image or painting everything manually (including the border) in paintBackground.

 

Please try these two suggestions and see what changes. If the desired result is not achieved, ask here again.

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Developer
Iyenemi_Tyger
Posts: 132
Registered: ‎10-25-2011
My Device: Tour 9630

Re: EditField drawbitmap as background image problem

i have tried all possble means , pleaase can  a sample code of what u mean , thanks.

Developer
peter_strange
Posts: 19,612
Registered: ‎07-14-2008
My Device: Not Specified

Re: EditField drawbitmap as background image problem

Can you please give us a screen shot of what you are seeing?

 

Can you explain why 11 is used so frequently when setting sizes.  It does not seem to have any relation to the image you are using. 

Developer
Iyenemi_Tyger
Posts: 132
Registered: ‎10-25-2011
My Device: Tour 9630

Re: EditField drawbitmap as background image problem

im just seeing my texteditfield component without the background being painted 

Developer
peter_strange
Posts: 19,612
Registered: ‎07-14-2008
My Device: Not Specified

Re: EditField drawbitmap as background image problem

Can you create a simple field with no overrides, set the Broder as you are doing and see what happens?

 

Can you explain why you use 11 when setting things like the border edges?

Developer
Iyenemi_Tyger
Posts: 132
Registered: ‎10-25-2011
My Device: Tour 9630

Re: EditField drawbitmap as background image problem

Because that's how I draw d image border of the custom editfield , if I use a lesser value it shows the border in the wrong way