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
Contributor
Posts: 24
Registered: ‎08-04-2010
My Device: Not Specified

Complex Textbox

Hi All,

I am required to come up with a textbox, similar to the one in iPhone. The requirement is to provide a (x) clear symbol (an image button) inside the textbox which is made visible to the user as he keys in a character in the textbox and on clicking the (x) clear symbol, it must clear the contents of the textbox.

I know there is so such property available (if available, please let me know ), but I'm sure, we can build one such control. I need some pointers as to how to proceed.

BB Gurus, Please help! :smileyhappy:

Regards,
Suhas

 

Prototype of the textbox:

Screenshot.png

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

Re: Complex Textbox

First of all, you'll have to create your own layout manager. It will have to place a label field ("User Name"), some text entry field (EditField) and a BitmapField (for the "x" component) at some predefined positions and sizes.

If you have a touchscreen phone, that BitmapField can be made non-focusable and react to touch events only.

 

There is a couple of knowledge base articles dealing with specialized text boxes. Both have comments which discuss further modifications - you will find those useful in giving you some ideas:

TextBoxField revisited

Scrollable one-line text input field (in particular, comment #3 has some good sample code which should give you enough food for thought. In some ways it has more than you probably need)

Custom stylish EditField - I've posted one of my UI experiments there (RoundBorderTextBoxField) which is an enhancement of "TextBoxField revisited" above.

 

All three links have examples of custom Managers and their sublayouts - look in there first.

 

Good luck!

----------------------------------------------------------
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
Posts: 102
Registered: ‎07-26-2011
My Device: Not a blackberry user

Re: Complex Textbox

[ Edited ]

 

As a matter of fact, the following implementation is not even good and also is not what you are looking for. But if you are really interested to solve your problem, this can help you understand the way a manager can do it.

In your case is just to add some extra custom fields and customize the manager to your fashion.

 

Hoping it helps, l show you this code:

 

 

import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.component.BasicEditField;

public class NumericTextBox extends Manager {
	
	//Margin default constants
	public static final int DEFAULT_TOP_MARGIN = 10;
	public static final int DEFAULT_BOTTOM_MARGIN = 10;
	public static final int DEFAULT_RIGHT_MARGIN = 5;
	public static final int DEFAULT_LEFT_MARGIN = 5;
	
	private String text;
	private int width;
	private int height;
	private BasicEditField editField;
	private int numMaxChar;
	private int verticalEmptySpace;
	//Minimum height needed to display properly the text;
	private int minHeight;
	
	public NumericTextBox(long style) {
		super(style);
		this.text = "";
		init();
	}
	
	public NumericTextBox(String text, long style) {
		super(style);
		this.text = text;
		init();
	}
	
	public NumericTextBox(String text, int width, long style) {
		super(style);
		this.text = text;
		this.width = width;
		init();
	}
	
	public NumericTextBox(String text, int width, int numMaxChar, long style) {
		super(style);
		this.text = text;
		this.width = width;
		this.numMaxChar = numMaxChar;
		init();
	}
	
	//Set properties to proper values
	public void init() {
		editField = new BasicEditField(BasicEditField.FILTER_REAL_NUMERIC | BasicEditField.NO_NEWLINE);
		setText(text);
		verticalEmptySpace = DEFAULT_BOTTOM_MARGIN + DEFAULT_TOP_MARGIN;
		//Get a minimum height required to show up the edit field 
		minHeight = getFont().getHeight() * 2;
		height = minHeight;
		//Check if there's any width set, otherwise, set to 100 as a default value
		if (width == 0) {
			width = 100;
		}
		add(editField);
	}

	protected void sublayout(int width, int height) {
		Field field = getField(0);
		//This is the method that allows no word-wrap 
		layoutChild(field, (getFont().getAdvance(getText()) > this.width) 
							? getFont().getAdvance(getText())
							: this.width, 
				this.height - verticalEmptySpace);
		setPositionChild(field, DEFAULT_LEFT_MARGIN, 
				DEFAULT_TOP_MARGIN);
		setExtent(this.width, this.height);
	}
	
	protected void paint(Graphics graphics) {
		int defaultColor = graphics.getColor();
		if (!isFocus()) {
			graphics.setBackgroundColor(Color.BEIGE);
			graphics.clear();
			graphics.setColor(Color.GRAY);
			graphics.drawRoundRect(0, 0, width, height, 5, 5);
			graphics.setColor(defaultColor);
		}
		else {
			graphics.setBackgroundColor(Color.WHITE);
			graphics.clear();
			graphics.setColor(Color.DARKORANGE);
			graphics.drawRoundRect(0, 0, width, height, 5, 5);
			graphics.setColor(defaultColor);
		}
		super.paint(graphics);
	}
	
	public String getText() {
		return editField.getText();
	}
	 
	public void setText(String text) {
		this.text = getAllowedTextFrom(text);
		editField.setText(this.text);
	}
	
	public Font getFont() {
		return editField.getFont();
	}
		
	public void setFont(Font font) {
		editField.setFont(font);
	}
	
	public int getPreferredHeight() {
		return height;
	}	
	
	public int getPreferredWidth() {
		return width;
	}
	
	//Checks the text length according to the maximum
	//number of characters allowed and returns the
	//truncated text.
	//In case the  number of character is not specified,
	//the text is returned untouched 
	private String getAllowedTextFrom(String text) {
		if (numMaxChar == 0 || text.length() < numMaxChar) {
			return text;
		}
		else {
			return text.substring(0, numMaxChar);
		}
	}
	
	public void onFocus(int direction) {
		super.onFocus(direction);
		invalidate();
	}
	
	public void onUnfocus() {
		super.onUnfocus();
		invalidate();
	}
	
	//Captures the key event and advertise about word wrapping.
	//If the key pressed referred to enter key, 
	//disable the word wrapping effect enter key has.
	protected boolean keyChar(char ch, int status, int time) {
		if (ch == Characters.ENTER){
			return true;
		}
		else {
			sublayout(width, height);
			return super.keyChar(ch, status, time);
		}
	}
}

 


Let me know if this was helpful or if you have a solution.

Johan Guzmán - In case my answer pleased you, give a press to the LIKE button, please!! Mark this post as solution if it solved your problem.
Developer
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: Complex Textbox

@johanguzman07:

That is really misguided code. Laying out the child with no regard to your own limits is bad. Calling sublayout from within keyChar is arguably worse.

 

This code tries to solve the same problem that is solved successfully in Scrollable one-line text input field I offered above. It does have a couple of good points, but you have those in the knowledge base article, only better laid out and better explained. I highly recommend reading it (along with the comments).

----------------------------------------------------------
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
Posts: 102
Registered: ‎07-26-2011
My Device: Not a blackberry user

Re: Complex Textbox

[ Edited ]

@arkadyz

 

I really appreciate your feedback without arguing and comprehen (as specified in the post) that is not the best guide to his problem.

 

I just wanted to provide any other idea about how to deal with such custom fields.

 

By the way, the regard to my limits is the linear advance of the entered text and calling sublayout... well... no excuse.

 

As you are interested on helping, I'd appreciate your help with this: http://supportforums.blackberry.com/t5/Java-Development/Custom-editfield-with-custom-cursor/td-p/122....

 

Anticipate thanks for all.

 


Let me know if this was helpful or if you have a solution.

Johan Guzmán - In case my answer pleased you, give a press to the LIKE button, please!! Mark this post as solution if it solved your problem.
Developer
Posts: 262
Registered: ‎05-18-2011
My Device: Curve 9300, BB10 Dev Alpha C, Z10

Re: Complex Textbox

Hi snarasimhan,

You may have some good reasons why you are trying to implement such a texttbox (like on iPhone). But from my point of view, there would be reasons why we do not need such a textbox. One of the reason is the Escape key, BB user are quite used to use the Escape key to clear a text box, why do we need the (x) which requires screen space and processing...?
--tom