Chat Window Design - Blackberry - blackberry

Question

I try to implement a Chat window( Chat functionality work fine & smooth). I am facing problem in designing Middle & Bottom part. In middle part chat messages & bottom i want to add editable field. If i fixed editable field align bottom chat messages not show, & if i add editable field after bottom, then chat messages shown on screen.
I have used NegativeMarginVerticalFieldManager.
I want field attached bottom of screen & messages show middle with scrollbar. Here i also attach code that i used in chat with dummy messages(without Json data). Thanks
package mypackage;
import net.rim.device.api.system.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.*;
public class ChatList extends MainScreen
{
Manager _foreground = new NegativeMarginVerticalFieldManager( USE_ALL_WIDTH | USE_ALL_HEIGHT | VERTICAL_SCROLL );
BasicEditField msg;
public ChatList() {
super( NO_VERTICAL_SCROLL );
setTitle( "Chat" );
// Set the linear background.
this.getMainManager().setBackground(
BackgroundFactory.createLinearGradientBackground(0x91e7ff,0x0099CCFF,0x00336699,0x91e7ff)
);
// Add Field Bottom
HorizontalFieldManager hfm = new HorizontalFieldManager(USE_ALL_HEIGHT | USE_ALL_WIDTH);
VerticalFieldManager vfm = new VerticalFieldManager(USE_ALL_WIDTH | FIELD_BOTTOM);
msg = new BasicEditField();
msg.setBorder(BorderFactory.createRoundedBorder(new XYEdges(3, 3, 3, 3), 0x999999, Border.STYLE_FILLED));
msg.setBackground(BackgroundFactory.createSolidBackground(0xe0e0e0));
msg.setPadding(5,0,5,0);
msg.setMargin(0,10,0,10);
vfm.add(msg);
hfm.add(vfm);
add(hfm);
}
public boolean keyDown(int keycode, int time) {
if (Keypad.KEY_ENTER == Keypad.key(keycode)) {
String message = msg.getText();
if(!message.equals(""))
{
Border rightBorder = BorderFactory.createBitmapBorder( new XYEdges( 16, 23, 27, 16 ), Bitmap.getBitmapResource( "border_bubble_right.png" ) );
Border leftBorder = BorderFactory.createBitmapBorder( new XYEdges( 16, 16, 27, 23 ), Bitmap.getBitmapResource( "border_bubble_left.png" ) );
addHeading( "Hello Adil!", leftBorder, Field.FIELD_LEFT );
addHeading( "Yeah, I see it", rightBorder, Field.FIELD_RIGHT );
addHeading( "have any update , related to this??", leftBorder, Field.FIELD_LEFT );
addHeading( "No worries, I'll finish it", rightBorder, Field.FIELD_RIGHT );
addHeading( "Middle part Messages", leftBorder, Field.FIELD_LEFT );
addHeading( "Vertically Scroll add in messages", leftBorder, Field.FIELD_LEFT );
addHeading( "have any update!", rightBorder, Field.FIELD_RIGHT );
addHeading( "Better get on that", leftBorder, Field.FIELD_LEFT );
addHeading( "No worries, I'll finish it", rightBorder, Field.FIELD_RIGHT );
addHeading( "Bottom Alignment Basic Editable Field?", leftBorder, Field.FIELD_LEFT );
addHeading( "Probably", rightBorder, Field.FIELD_RIGHT );
addHeading( "Better get on that", leftBorder, Field.FIELD_LEFT );
addHeading( "No worries, I'll finish it", rightBorder, Field.FIELD_RIGHT );
msg.setText("");
// ADD ALL FIELDS
add( _foreground );
}// if condition
else{ Dialog.alert("Please insert message");}
return true;
}
//let the system to pass the event to another listener.
return false;
}
private void addHeading( String label, Border border, long style )
{
LabelField header = new LabelField( label, Field.FOCUSABLE | style );
header.setBorder( border );
header.setMargin( 5, 5, -15, 5 );
_foreground.add( header );
}
}

Answer 1

try this - (i modified your code little bit.)
public class ChatList extends MainScreen
{
Manager _foreground = new NegativeMarginVerticalFieldManager( USE_ALL_WIDTH | USE_ALL_HEIGHT | VERTICAL_SCROLL );
BasicEditField msg;
public ChatList() {
super( NO_VERTICAL_SCROLL );
setTitle( "Chat" );
// Set the linear background.
this.getMainManager().setBackground(
BackgroundFactory.createLinearGradientBackground(0x91e7ff,0x0099CCFF,0x00336699,0x91e7ff)
);
// Add Field Bottom
HorizontalFieldManager hfm = new HorizontalFieldManager(){
protected void sublayout(int maxWidth, int maxHeight)
{
super.sublayout(Display.getWidth()/2+60,20); setExtent(Display.getWidth()/2+60,20);
}
};
msg = new BasicEditField(){
};
msg.setBorder(BorderFactory.createRoundedBorder(new XYEdges(3, 3, 3, 3), 0x999999, Border.STYLE_FILLED));
msg.setBackground(BackgroundFactory.createSolidBackground(0xe0e0e0));
// msg.setPadding(5,0,5,0);
msg.setPadding(5,0,5,0);
msg.setMargin(0,10,0,10);
hfm.add(msg);
final ButtonField b=new ButtonField("send");
JustifiedHorizontalFieldManager jfm=new JustifiedHorizontalFieldManager(hfm, b,true);
setStatus(jfm);
FieldChangeListener listener=new FieldChangeListener() {
public void fieldChanged(Field field, int context) {
if(field==b){
Border rightBorder = BorderFactory.createBitmapBorder( new XYEdges( 16, 23, 27, 16 ), Bitmap.getBitmapResource( "bubble_right.png" ) );
Border leftBorder = BorderFactory.createBitmapBorder( new XYEdges( 16, 16, 27, 23 ), Bitmap.getBitmapResource( "bubble_left.png" ) );
addHeading( "Hello Adil!", leftBorder, Field.FIELD_LEFT );
addHeading( "Yeah, I see it", rightBorder, Field.FIELD_RIGHT );
addHeading( "have any update , related to this??", leftBorder, Field.FIELD_LEFT );
addHeading( "No worries, I'll finish it", rightBorder, Field.FIELD_RIGHT );
addHeading( "Middle part Messages", leftBorder, Field.FIELD_LEFT );
addHeading( "Vertically Scroll add in messages", leftBorder, Field.FIELD_LEFT );
addHeading( "have any update!", rightBorder, Field.FIELD_RIGHT );
addHeading( "Better get on that", leftBorder, Field.FIELD_LEFT );
addHeading( "No worries, I'll finish it", rightBorder, Field.FIELD_RIGHT );
addHeading( "Bottom Alignment Basic Editable Field?", leftBorder, Field.FIELD_LEFT );
addHeading( "Probably", rightBorder, Field.FIELD_RIGHT );
addHeading( "Better get on that", leftBorder, Field.FIELD_LEFT );
addHeading( "No worries, I'll finish it", rightBorder, Field.FIELD_RIGHT );
msg.setText("");
// ADD ALL FIELDS
add( _foreground );
}
}
};
b.setChangeListener(listener);
}
private void addHeading( String label, Border border, long style )
{
LabelField header = new LabelField( label, Field.FOCUSABLE | style );
header.setBorder( border );
header.setMargin( 5, 5, -15, 5 );
_foreground.add( header );
}
}
JustifiedHorizontalFieldManager.java is given below -
public class JustifiedHorizontalFieldManager extends Manager
{
private static final int SYSTEM_STYLE_SHIFT = 32;
public Field _leftField;
public Field _rightField;
private boolean _giveLeftFieldPriority;
public JustifiedHorizontalFieldManager( Field leftField, Field rightField, boolean giveLeftFieldPriority )
{
this( leftField, rightField, giveLeftFieldPriority, Field.USE_ALL_WIDTH );
}
public JustifiedHorizontalFieldManager( Field leftField, Field rightField, boolean giveLeftFieldPriority, long style )
{
super( style );
_leftField = leftField;
_rightField = rightField;
add( _leftField );
add( _rightField );
_giveLeftFieldPriority = giveLeftFieldPriority;
}
public JustifiedHorizontalFieldManager( boolean giveLeftFieldPriority, long style )
{
super( style );
_giveLeftFieldPriority = giveLeftFieldPriority;
}
public void addLeftField( Field field )
{
if( _leftField != null ) {
throw new IllegalStateException();
}
_leftField = field;
add( _leftField );
}
public void addRightField( Field field )
{
if( _rightField != null ) {
throw new IllegalStateException();
}
_rightField = field;
add( _rightField );
}
public int getPreferredWidth()
{
return _leftField.getPreferredWidth() + _rightField.getPreferredWidth();
}
public int getPreferredHeight()
{
return Math.max( _leftField.getPreferredHeight(), _rightField.getPreferredHeight() );
}
protected void sublayout( int width, int height )
{
Field firstField;
Field secondField;
if( _giveLeftFieldPriority ) {
firstField = _leftField;
secondField = _rightField;
} else {
firstField = _rightField;
secondField = _leftField;
}
int maxHeight = 0;
int availableWidth = width;
availableWidth -= _leftField.getMarginLeft();
availableWidth -= Math.max( _leftField.getMarginRight(), _rightField.getMarginLeft() );
availableWidth -= _rightField.getMarginRight();
layoutChild( firstField, availableWidth, height - firstField.getMarginTop() - firstField.getMarginBottom() );
maxHeight = Math.max( maxHeight, firstField.getMarginTop() + firstField.getHeight() + firstField.getMarginBottom() );
availableWidth -= firstField.getWidth();
layoutChild( secondField, availableWidth, height - secondField.getMarginTop() - secondField.getMarginBottom() );
maxHeight = Math.max( maxHeight, secondField.getMarginTop() + secondField.getHeight() + secondField.getMarginBottom() );
availableWidth -= secondField.getWidth();
if( !isStyle( Field.USE_ALL_HEIGHT ) ) {
height = maxHeight;
}
if( !isStyle( Field.USE_ALL_WIDTH ) ) {
width -= availableWidth;
}
setPositionChild( _leftField, _leftField.getMarginLeft(), getFieldY( _leftField, height ) );
setPositionChild( _rightField, width - _rightField.getWidth() - _rightField.getMarginRight(), getFieldY( _rightField, height ) );
setExtent( width, height );
}
private int getFieldY( Field field, int height )
{
switch( (int)( ( field.getStyle() & FIELD_VALIGN_MASK ) >> SYSTEM_STYLE_SHIFT ) ) {
case (int)( FIELD_BOTTOM >> SYSTEM_STYLE_SHIFT ):
return height - field.getHeight() - field.getMarginBottom();
case (int)( FIELD_VCENTER >> SYSTEM_STYLE_SHIFT ):
return field.getMarginTop() + ( height - field.getMarginTop() - field.getHeight() - field.getMarginBottom() ) / 2;
default:
return field.getMarginTop();
}
}
public Field getLeftField()
{
return _leftField;
}
public Field getRightField()
{
return _rightField;
}
public void replace( Field oldField, Field newField )
{
if( oldField == newField ) {
// Nothing to do
return;
}
if( oldField == _leftField ) {
_leftField = newField;
} else if( oldField == _rightField ) {
_rightField = newField;
}
add( newField );
delete( oldField );
}
}