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
Posts: 468
Registered: ‎08-07-2009
My Device: Curve, Bold, Storm
My Carrier: Blackberry Developer

Re: Probably the simplest question ever

For scroll bar...use VERTICAL_SCROLLBAR

 

 

VerticalFieldManager fieldManager2 = new VerticalFieldManager(VerticalFieldManager.VERTICAL

_SCROLL | VerticalFieldManager.VERTICAL _SCROLLBAR);

 

 

Thanks

Ekansh

----------------------------------------------------------
feel free to press the kudos button on the left side to thank the user that helped you.
please mark posts as solved if you found a solution.
Developer
Posts: 2,268
Registered: ‎07-08-2009
My Device: various
My Carrier: various

Re: Probably the simplest question ever

It's funny you asked this question because I have recently written three articles in the knowledge base addressing most of your questions.

 

Here are the links:

TextBoxField revisited

This article provides a text box - with border and scrollable.  For background, override protected paintBackground(Graphics g) method, as per Simon's suggestion:

 

private VerticalFieldManager vfm = new VerticalFieldManager(VERTICAL_SCROLL | VERTICAL_SCROLLBAR | USE_ALL_WIDTH | USE_ALL_HEIGHT) {
  protected void paintBackground(Graphics g) {
    g.setBackgroundColor(Color.WHITE); // use your own
    g.clear();
  }
};

 You will also need to add setText() method to it:

 

    public void setText(String newText) {
	editField.setText(newText);
    }

and make the editField inside READONLY.

 

For your bottom (text entry) field, you might want to use this:

Sample Code - Scrollable one-line text input field

Adding border to it is easy in 4.6.0+ OS.  To get an idea of how to do it on older phones, take a look at border painting in the first article (TextBoxField revisited).

 

Finally, if you want a good-looking scrollbar, replace vfm = new VerticalFieldManager(...) in TextBoxField with vfm = new VerticalScrollManager(...).  The code for the latter is in

Implementing a standard style scrollbar on a Blackberry device

 

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: 100
Registered: ‎06-21-2010
My Device: Not Specified

Re: Probably the simplest question ever

Hi arkadyz,

 

Thanks for your comprehensive help, your reply is a very strong candidate for this threads solution Smiley Happy however, i tried the 1st article and nothing came up on the screen, its just empty. I had for buttons "send" and "quit" and now they are not even FOCUSABLE, i dont know what is going but if you have an i dea please let me know.: this is my code:

 

 

public class ChatScreen extends MainScreen{

public ChatScreen(){
    TextBoxField text = new TextBoxField(8,10);
		
    ChatButton send = new ChatButton("send",ButtonField.CONSUME_CLICK|ButtonField.FIELD_HCENTER|Field.USE_ALL_WIDTH|Field.FIELD_VCENTER,Display.getWidth() / 2);

    ChatButton quit = new ChatButton("quit",ButtonField.CONSUME_CLICK|ButtonField.FIELD_HCENTER|Field.USE_ALL_WIDTH|Field.FIELD_VCENTER,Display.getWidth() / 2);

    text.setText("Hi this the chat");
		
    add(text);
    text.append("this is another chat message\n");
    add(send);
    text.append("this is a third message");
    add(quit);		
    }
}


public class WelcomeScreen extends MainScreen{
    BitmapField bitmapField;
	
    public WelcomeScreen(UiApplication agent) {
    Bitmap logoBitmap = Bitmap.getBitmapResource("resources/tivoli.png");
		bitmapField = new BitmapField(logoBitmap, Field.FIELD_HCENTER);
		add(bitmapField);
		
    VerticalFieldManager buttonManager = new VerticalFieldManager(Field.USE_ALL_HEIGHT|Field.USE_ALL_WIDTH);
		
    ChatButton chatButton = new ChatButton("Chat",ButtonField.CONSUME_CLICK|ButtonField.FIELD_HCENTER|Field.USE_ALL_WIDTH|Field.FIELD_VCENTER,Display.getWidth() / 2);

    ChatButton quitButton = new ChatButton("Quit",ButtonField.CONSUME_CLICK|ButtonField.FIELD_HCENTER|Field.USE_ALL_WIDTH|Field.FIELD_VCENTER,Display.getWidth() / 2);
		
		
    FieldChangeListener chatListener = new FieldChangeListener() {   
			public void fieldChanged(Field field, int context) {   
		   
	Dialog.alert("Chat Button Clicked!!!"); 	
	ChatScreen cs = new ChatScreen(); //<--------------------THIS IS WHERE THE CHAT SCREEN IS INVOKED
	agent.pushScreen(cs);
        }   
   };   
   chatButton.setChangeListener(chatListener);
			
   buttonManager.add(new HeaderField("Blackberry PROGRAM"));
		
   buttonManager.add(chatButton);

   add(buttonManager);
		
	}
}


public class Agent extends UiApplication{
	
	public Agent (){
		WelcomeScreen wcr = new WelcomeScreen(this);
		pushScreen(wcr);
	}
	
	public static void main(String[] args) {
		Agent blackberryAgent = new Agent();
		blackberryAgent.enterEventDispatcher();
	}

 

 

I really do not have a clue whats wrong now. The ChatScreen does not show any border or text field. I can only see the buttons send and quit and they are both not FOCUSABLE..help please!!

 

Thanks

Developer
Posts: 100
Registered: ‎06-21-2010
My Device: Not Specified

Re: Probably the simplest question ever

revision *****

 

 

In the ChatScreen clas, I moved  the add(text) to after add(quit). This makes the buttons to be focusable again. I think the TextBoxField is there but its invisble? i thought there was supposed to be at least a boarder? All my texts are not being placed in it, even the title or default text is not being appended to the editField.

 

Cheers !

 

Dan

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

Re: Probably the simplest question ever

Hi,

glad you decided to take a look at my articles.

 

Here are some comments on your post:

 

1. TextBoxField gets the dimensions in pixels, not lines and character positions.  If you want it in lines and columns, change setting the dimensions inside the TextBoxField's main (int, int, long) constructor like this:

 

managerWidth = width * getFont().getAdvance("W") + 2; // or any wide char
managerHeight = height * getFont().getHeight() + 2;

Otherwise your (8, 10) will become (6, 8) in pixels for the inner editField - I don't think any text will fit there Smiley Wink.  Still, I would first change that to something like (120, 80) and see if it works better, then work on the smaller details.

By the way, try catching exceptions and see if there is any IllegalArgumentException during text creation.  This can happen if a field is given too little room for layout. If this is the case, the result will be quite unpredictable.

 

2. Add some propagation of style parameter to the editField so that you can specify, say, READONLY and/or [NON_]FOCUSABLE and have it affect the text inside.   Something along the lines of:

 

    TextBoxField(int width, int height, long style) {
        super(style | NO_VERTICAL_SCROLL | NO_HORIZONTAL_SCROLL);
        long innerStyle = style & (READONLY | FOCUSABLE_MASK); // at least
	managerWidth = width;
	managerHeight = height;
        editField = new EditField("", "", EditField.DEFAULT_MAXCHARS, innerStyle);
		
	add(vfm);
	vfm.add(editField);
    }

 

3. I gather you have added append method to the TextBoxField - good for you!  One of the actions in append might be (I'd have that, anyway) shifting editField's cursor to the end of the text (so that most recently added messages are visible).  Like this:

 

public void append(String addedText) {
  String newText = editField.getText() + addedText;
  editField.setText(newText);
  editField.setCursorPosition(newText.length());
}

 

 

 

 

4. I think text being FOCUSABLE is beneficial as you can then get there and scroll through the previous messages.  However, in order for it not to receive focus immediately add this to your ChatScreen:

 

protected void onUiEngineAttached(boolean on) {
  if (on) { // just displayed
    send.setFocus();
  }
}

5. You have some custom ChatButton class - I don't see what's inside but I'd check their handling of isFocusable() if I were you. However, first give TextBoxField bigger size to make sure you don't get exceptions there during layout and see if that fixes anything. (see my remark #1)

 

 

----------------------------------------------------------
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: 100
Registered: ‎06-21-2010
My Device: Not Specified

Re: Probably the simplest question ever

Arkadyz, thanks for your help again !

 

I very much appreciate it.

 

The suggestions you gave however have not resulted in any change. The screen below is still what i get instead. I think the textboxfield  is beneath the quitbutton but its just come how not visible:

 

2809iF237A56F1AFB10AA

 

Here is my revision to the code based on your suggestion:

 

 

 

public class ChatScreen extends MainScreen{

    public ChatScreen(){
	TextBoxField text = null;
	try{
         	text = new TextBoxField(120,80);
		System.out.println("no exception caught");
	}catch (Exception ex){
		System.out.println(ex.toString());
	}
				
		
        ButtonField send = new ChatButton("send " , ButtonField.CONSUME_CLICK|ButtonField.FIELD_HCENTER|Field.USE_ALL_WIDTH|Field.FIELD_VCENTER,Display.getWidth() / 2);
	
        ButtonField quit = new ChatButton("quit" , ButtonField.CONSUME_CLICK|ButtonField.FIELD_HCENTER|Field.USE_ALL_WIDTH|Field.FIELD_VCENTER,Display.getWidth() / 2);
		
	text.append("this is another chat message\n");
	add(send);
	text.append("this is a third message");
	add(quit);
	add(text);
    }
}

 

 

1) In the ChatScreen class, I have:

a) added a try/catch clause but there is no excpetion caught

b) Changed the width and height parameters

c) replaced my custom button ChatButton with the conventional ButtonField  Class

 

 

 

public class TextBoxField extends Manager{
    private int width;
    private int height;
	
    private VerticalFieldManager vfm = new VerticalFieldManager(VERTICAL_SCROLL | VERTICAL_SCROLLBAR |USE_ALL_HEIGHT|USE_ALL_WIDTH);

    private EditField editField;
	
    TextBoxField (int width, int height, long style){
	super(style | VERTICAL_SCROLL | HORIZONTAL_SCROLL);
	long innerStyle = style & (READONLY|FOCUSABLE_MASK);
	this.width = width;
	this.height = height;
	editField = new EditField ("Chat Window","New editField ", EditField.DEFAULT_MAXCHARS, innerStyle);
		
	add(vfm);
	vfm.add(editField);
     }
	
     TextBoxField(int width, int height) {
	  this(width, height, 0L);
     }

     public String getText(){
	return editField.getText();
     }
	
     public void setText (String s){
	editField.setText(s);
     }
	
     public void append (String s){
	editField.setText(editField.getText()+s);
	editField.setCursorPosition(editField.getTextLength());
     }
	
     public int getPreferredWidth(){
	return width;
     }
	
     public int getPreferredHeight(){
	return height;
     }
	
     protected void sublayout(int width, int height) {
	if(this.width == 0){
            this.width = width;
        }
		
	if(this.height == 0){
	    this.height = height;
	}
		
	int actWidth = Math.min(this.width, width);
	int actHeight = Math.min(this.height, height);
	layoutChild(vfm, actWidth-2, actHeight-2); //-2 is used to make space for the text area borders
	setPositionChild(vfm, 1, 1);
		
    }
	
    protected void paint(Graphics g){
 	super.paint(g);
	int prevColor = g.getColor();
	g.setColor(Color.BLACK);
	g.drawRect(0, 0, getWidth(), getHeight()); //this draws the rectangular border needed for the chat area
	g.setColor(prevColor);
    }
	
    protected void paintBackground(Graphics g){
	g.setBackgroundColor(Color.RED); 
        g.clear();

    }
}

 

 

The above is my code (well not mine, mostly yours) for the TextBoxField class, I have changed some things here based on your recommendation but still there seems to be no difference.

 

I think the TextBoxField is below the quitbutton becuse when i scroll down (press the down arrow key), the quitbutton loses focus.

 

ps: Thanks for your contribution if you could still point out any areas that maybe wrong with my code that would be super..

 

Thanks,

 

Dan

 

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

Re: Probably the simplest question ever

Too bad I can't yet see your image - I'm still not sure how those are handled here in the forums, as some of the images have a tendency to suddenly "materialize" later.  I'll take a look at your code later today.

 

By the way, FIELD_HCENTER and USE_ALL_WIDTH don't make sense together, so use one and not the other (if you think about it, you'll see why) Smiley Happy.

----------------------------------------------------------
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: 100
Registered: ‎06-21-2010
My Device: Not Specified

Re: Probably the simplest question ever

just incase the previous image never  "materializes", I have tried adding a new one (saved as .jpg. instead of .png as previously did). this is it:

 

 

2811i953DF85F5492AF5D

 

 

Thanks again !

 

 

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

Re: Probably the simplest question ever

Strange - I just tried some code and it's working perfectly.  I changed append() method in TextBoxField a little, as it was not setting the scroll position properly.  Now it looks like this:

 

	public void append(String addedText) {
		String newText = editField.getText() + addedText;
		editField.setText(newText);
		editField.setCursorPosition(newText.length());
		UiApplication.getUiApplication().invokeLater(new Runnable() {
			public void run() {
				vfm.setVerticalScroll(Math.max(0, vfm.getVirtualHeight() - vfm.getVisibleHeight()));
			}
		});
	}

The full piece of code (without your ChatButtons - feel free to add them instead of plain ButtonFields) is like this:

 

    private MainScreen chatScr = new MainScreen(MainScreen.NO_VERTICAL_SCROLL | MainScreen.NO_HORIZONTAL_SCROLL) {
    	protected void onUiEngineAttached(boolean on) {
    		if (on) {
    			messageEntry.setFocus();
    		}
    	}
    };
    final TextBoxField chatBox = new TextBoxField(240, 160, TextBoxField.READONLY | TextBoxField.FOCUSABLE | TextBoxField.NO_SCROLL_RESET) {
		protected void paintBackground(Graphics g) {
			int prevBg = g.getBackgroundColor();
			g.setBackgroundColor(Color.CYAN);
			g.clear();
			g.setBackgroundColor(prevBg);
		}
		
		protected void paint(Graphics g) {
			int prevColor = g.getColor();
			g.setColor(Color.VIOLET);
			super.paint(g);
			g.setColor(prevColor);
		}
	};
    final OneLineTextField messageEntry = new OneLineTextField("Message: ", "", 200, 0L) {
		protected boolean keyChar(char c, int status, int time) {
			if (c == Characters.ENTER) {
				chatBox.append(getText() + "\n");
				setText("");
				return true;
			}
			return super.keyChar(c, status, time);
		}
	};
    ButtonField sendButton = new ButtonField("send", ButtonField.CONSUME_CLICK | ButtonField.NEVER_DIRTY | ButtonField.FIELD_HCENTER) {
		protected void fieldChangeNotify(int content) {
			chatBox.append(messageEntry.getText() + "\n");
			messageEntry.setText("");
			messageEntry.setFocus();
		}
	};
	ButtonField quitButton = new ButtonField("quit", ButtonField.CONSUME_CLICK | ButtonField.NEVER_DIRTY | ButtonField.FIELD_HCENTER) {
		protected void fieldChangeNotify(int context) {
			System.exit(0);
		}
	};
	HorizontalFieldManager chatAndButtons = new HorizontalFieldManager(HorizontalFieldManager.NO_HORIZONTAL_SCROLL);
	VerticalFieldManager chatButtons = new VerticalFieldManager(VerticalFieldManager.NO_VERTICAL_SCROLL | VerticalFieldManager.USE_ALL_WIDTH);
    {
    	chatButtons.add(sendButton);
    	chatButtons.add(quitButton);
    	chatAndButtons.add(chatBox);
    	chatAndButtons.add(chatButtons);
    	chatScr.add(chatAndButtons);
    	chatScr.add(new SeparatorField());
    	chatScr.add(messageEntry);
    }

 Everything works as it should.  I even replaced VerticalFieldManager with VerticalScrollManager inside TextBoxField and it still works (and shows a nice-looking scrollbar).  Check your custom additions.

 

Oh, and if you need to develop for pre-4.3 OS (I do), replace onUiEngineAttached() with deprecated but working onDisplay()

 

 

----------------------------------------------------------
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: 100
Registered: ‎06-21-2010
My Device: Not Specified

Re: Probably the simplest question ever

ok, now am officially confused

 

you've changed the TextBoxField Class to anonymous? it  was a normal class in your 1st article and it extended Manager. it had a g.drawRect in the paint method but your new one does not have that.

 

I am trying to understand the code. It is not my intention to blindly copy paste.  Please can you explain why everything has become anonymous and different all of a sudden?

 

lastly, which class do all of these go into? am guessing its not the main method ? or is it the ChatScreen class? if so why do you have an anonymous MainScreen chatScr inside of it? i dont even understand how it is possible to create a new MainScreen class without extending the one in the API !

 

you seemed to have written your own MainScreen with an onUiEngineAttached method. Does this implicitly extend the normal mainscreen without it being said?

 

Thanks,

 

Dan

 

ps: sorry for my newbieness maybe some of these things are obvious to you but its not to me. hope you dont see this as a criticism, I am marely confused, not used to this style of programming.