blackberry - チャットウィンドウのデザイン - ブラックベリー

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

score 2 · Accepted Answer

これを試してください-（コードを少し変更しました。）

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 を以下に示します -

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



}

blackberry - チャット ウィンドウのデザイン - ブラックベリー

1 に答える 1

Related

Reference

blackberry - チャットウィンドウのデザイン - ブラックベリー