CustomTextbox in Blackberry - blackberry-eclipse-plugin

Question

Hi friends basically i am a android developer. i am newbie in blackberry development. i need to create the custom text box with image button.
in the right corner of the text box, i want the small image button and it's click listener the text box field should be empty.
i Can create the Custom Text box and also draw bitmap inside the text box. but i can't catch the focus and listener to the image button. please help me
Please give some idea and samples.
I tried this...
MyApp.java Class:
import net.rim.device.api.ui.UiApplication;
public class MyApp extends UiApplication {
public static void main(String[] args) {
MyApp theApp = new MyApp();
theApp.enterEventDispatcher();
}
public MyApp() {
pushScreen(new MyScreen());
}
}
MyScreen.java class:
public final class MyScreen extends MainScreen {
public MyScreen() {
super(Manager.NO_VERTICAL_SCROLL);
setTitle("MyTitle");
VerticalFieldManager vfm = new VerticalFieldManager(
Manager.USE_ALL_HEIGHT | Manager.USE_ALL_HEIGHT);
HorizontalFieldManager hfm = new HorizontalFieldManager(
Manager.USE_ALL_WIDTH);
HorizontalFieldManager hfm1 = new HorizontalFieldManager(
Manager.USE_ALL_WIDTH);
customManager ctm = new customManager(Manager.USE_ALL_WIDTH);
customManager ctm1 = new customManager(Manager.USE_ALL_WIDTH);
hfm.add(ctm);
hfm1.add(ctm1);
vfm.add(hfm);
vfm.add(hfm1);
add(vfm);
}
}
customManager.java Class:
public class customManager extends Manager implements FieldChangeListener {
private Textbox txt;
private Closebtn cls;
Bitmap bitmap;
protected customManager(long style) {
super(style);
// My Coustem TextBOX
txt = new Textbox(300, 100);
// My Coustem Button
cls = new Closebtn();
cls.setChangeListener(this);
add(txt);
add(cls);
}
protected void sublayout(int width, int height) {
setPositionChild(getField(0), 10, 10);
layoutChild(getField(0), getField(0).getPreferredWidth(), getField(0)
.getPreferredHeight());
setPositionChild(getField(1),
getField(0).getWidth() - (getField(1).getWidth()), getField(0)
.getHeight() / 2 - getField(1).getHeight() / 2);
layoutChild(getField(1), getField(1).getWidth(), getField(1)
.getHeight());
setExtent(width, height);
}
public void fieldChanged(Field field, int context) {
txt.setText("");
}
}
Textbox.java Class:
public class Textbox extends Manager {
private int managerWidth;
private int managerHeight;
private int arcWidth;
private VerticalFieldManager vfm = new VerticalFieldManager(
NO_VERTICAL_SCROLL | USE_ALL_WIDTH );
private EditField editField;
private Bitmap bagBitmap;
Textbox(int width, int height, long style) {
super(style | NO_VERTICAL_SCROLL | NO_HORIZONTAL_SCROLL);
managerWidth = width;
managerHeight = height;
long innerStyle = style & (READONLY | FOCUSABLE_MASK); // at least
if (innerStyle == 0) {
innerStyle = FOCUSABLE;
}
editField = new EditField("", "", 10, innerStyle);
arcWidth = editField.getFont().getHeight() & 0xFFFFFFFE; // make it even
EncodedImage en = EncodedImage.getEncodedImageResource("_text.png");
bagBitmap = Util.getScaledBitmapImage(en, width, height);
add(vfm);
vfm.add(editField);
}
public void setFont(Font font) {
super.setFont(font);
editField.setFont(font);
arcWidth = editField.getFont().getHeight() & 0xFFFFFFFE;
updateLayout();
}
Textbox(int width, int height) {
this(width, height, 0L);
}
public String getText() {
return editField.getText();
}
public void setText(String newText) {
editField.setText(newText);
}
public int getPreferredWidth() {
return managerWidth;
}
public int getPreferredHeight() {
return managerHeight;
}
protected void sublayout(int w, int h) {
if (managerWidth == 0) {
managerWidth = w;
}
if (managerHeight == 0) {
managerHeight = h;
}
int actWidth = Math.min(managerWidth, w);
int actHeight = Math.min(managerHeight, h);
layoutChild(vfm, actWidth - arcWidth, actHeight - arcWidth);
setPositionChild(vfm, arcWidth / 2, arcWidth / 2);
setExtent(actWidth, actHeight);
}
protected void paint(Graphics g) {
g.drawBitmap(0, 0, getWidth(), getHeight(), bagBitmap, 0, 0);
super.paint(g);
}
}
Closebtn.java Class:
public class Closebtn extends Field {
private Bitmap bitmap;
public Closebtn() {
super(Manager.FOCUSABLE);
EncodedImage en = EncodedImage.getEncodedImageResource("close.png");
bitmap = Util.getScaledBitmapImage(en, 50, 50);
}
protected void layout(int width, int height) {
setExtent(bitmap.getWidth(), bitmap.getHeight());
}
protected void paint(Graphics graphics) {
graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
bitmap, 0, 0);
}
protected void onFocus(int direction) {
bitmap = bitmap;
}
protected void onUnfocus() {
bitmap = bitmap;
}
protected boolean keyChar(char character, int status, int time) {
if (character == Characters.ENTER) {
clickButton();
return true;
}
return super.keyChar(character, status, time);
}
protected boolean navigationClick(int status, int time) {
clickButton();
return true;
}
protected boolean trackwheelClick(int status, int time) {
clickButton();
return true;
}
protected boolean invokeAction(int action) {
switch (action) {
case ACTION_INVOKE: {
clickButton();
return true;
}
}
return super.invokeAction(action);
}
public void setDirty(boolean dirty) {
}
public void setMuddy(boolean muddy) {
}
public void clickButton() {
fieldChangeNotify(0);
}
}
Util.java Class:
public class Util {
public static Bitmap getScaledBitmapImage(EncodedImage image, int width,
int height) {
if (image == null) {
return null;
}
int currentWidthFixed32 = Fixed32.toFP(image.getWidth());
int currentHeightFixed32 = Fixed32.toFP(image.getHeight());
int requiredWidthFixed32 = Fixed32.toFP(width);
int requiredHeightFixed32 = Fixed32.toFP(height);
int scaleXFixed32 = Fixed32.div(currentWidthFixed32,
requiredWidthFixed32);
int scaleYFixed32 = Fixed32.div(currentHeightFixed32,
requiredHeightFixed32);
image = image.scaleImage32(scaleXFixed32, scaleYFixed32);
return image.getBitmap();
}
}
My problem is i can't add more then one fields here Pls help me..

Answer 1

Try this custom class:
public class TextFieldWithClear extends HorizontalFieldManager {
protected HorizontalFieldManager hfmEditTextPanel;
protected LabelField lblEditText;
protected EditField textField;
protected MyImageButton bitmapFieldClear;
int mHeight;
int mWidth;
String mLabel;
public TextFieldWithClear(String label, int width, int height) {
super(FOCUSABLE);
Border border = BorderFactory
.createSimpleBorder(new XYEdges(2, 2, 2, 2));
this.setBorder(border);
Background bg = BackgroundFactory.createSolidBackground(Color.WHITE);
this.setBackground(bg);
mWidth = width;
mHeight = height;
mLabel = label;
lblEditText = new LabelField(mLabel) {
protected void paint(Graphics graphics) {
graphics.setColor(0x4B4B4B);
super.paint(graphics);
}
};
add(lblEditText);
hfmEditTextPanel = new HorizontalFieldManager(FOCUSABLE
| VERTICAL_SCROLL | VERTICAL_SCROLLBAR) {
protected void sublayout(int maxWidth, int maxHeight) {
maxWidth = mWidth - 30;
maxHeight = mHeight;
super.sublayout(maxWidth, maxHeight);
setExtent(maxWidth, maxHeight);
}
};
textField = new EditField() {
// protected void layout(int width, int height)
// {
// width = mWidth - 50;
// height=35;
// super.layout(width, height);
// //setExtent(width, height);
// }
};
hfmEditTextPanel.add(textField);
add(hfmEditTextPanel);
bitmapFieldClear = new MyImageButton(
Bitmap.getBitmapResource("btn_delete_normal.png"),
Bitmap.getBitmapResource("btn_delete_focused.png"));
bitmapFieldClear.setChangeListener(buttonListener);
add(bitmapFieldClear);
}
public String getText() {
String value = "";
if (textField.getText().length() > 0)
value = textField.getText();
return value;
}
public void setString(String value) {
if (value != null) {
textField.setText(value);
}
}
FieldChangeListener buttonListener = new FieldChangeListener() {
public void fieldChanged(Field field, int context) {
textField.clear(0);
textField.setFocus();
}
};
public void onUndisplay()
{
textField.setEditable(false);
}
public void onDisplay()
{
textField.setEditable(true);
}
}

Answer 2

This is not easy to do just overriding EditField, so this is what I'd try:
Use an horizontal manager (for instance, HorizontalFieldManager or other custom manager, perhaps with fixed column widths. This manager would have two fields inside: at left an EditField, at right a custom buttonfield.
Set a Background to the manager. The bg would draw the green background as well as the blue border. You can use an scaled bitmap (have a look at BackgroundFactory.createBitmapBackground).
Create a new EditField subclass, and override its paintBackground method so that it does nothing. If it does not work, try overriding paint so that it does only draw the text. This is the trickiest part.
Create a custom Buttonfield subclass with the cross over gray circle image. You can read a good tutorial on how to do that here. You also have available an already made BitmapButtonField in the Advanced Ui Library. When the button is clicked, it would invoke EditField.setText("") on the EditField.