聊天窗口設計 - 黑莓

Question

我嘗試實現一個Chat window（聊天功能工作正常&光滑）。我在設計Middle & Bottom part時遇到問題。在middle part chat messages &底部我想添加可編輯字段。如果我修改了可編輯字段對齊底部聊天消息不顯示，&如果我在底部添加可編輯字段，然後聊天消息顯示在屏幕上。我已經使用NegativeMarginVerticalFieldManager。

我想要字段附加在屏幕的底部&消息顯示中間與滾動條。在這裏，我還附上了我用於與虛擬消息聊天的聊天代碼（沒有Json數據）。由於

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

試試這個 - （我修改代碼點點。）

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); 
} 

} 

JustifiedHorizo​​ntalFieldManager.java在下面給出 -

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); 
} 



}