1

次のウィジェットを検討してください。

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.FlexTable;

public class SelectorPanel extends Composite
{
    private final FlexTable flexTable = new FlexTable();
    private final Label lbltitle = new Label("##Title");
    private final ListBox listBox = new ListBox();
    private final Label lblsearchtext = new Label( "##SearchText" );
    private final TextBox tbSearch = new TextBox();

    public SelectorPanel()
    {
        listBox.setVisibleItemCount( 10 );
        flexTable.setStyleName("SearchPanel");
        flexTable.setBorderWidth(0);

        initWidget( flexTable );
        flexTable.setSize("200px", "0px");
        lbltitle.setWordWrap( false );

        flexTable.setWidget( 0, 0, lbltitle );

        flexTable.setWidget( 1, 0, listBox );
        listBox.setWidth("100%");

        flexTable.setWidget( 2, 0, lblsearchtext );
        tbSearch.setMaxLength( 32 );

        flexTable.setWidget( 3, 0, tbSearch );
        flexTable.getCellFormatter().setHorizontalAlignment( 0, 0, HasHorizontalAlignment.ALIGN_LEFT );
        flexTable.getCellFormatter().setVerticalAlignment( 2, 0, HasVerticalAlignment.ALIGN_MIDDLE );
        flexTable.getCellFormatter().setVerticalAlignment( 1, 0, HasVerticalAlignment.ALIGN_MIDDLE );
        flexTable.getCellFormatter().setVerticalAlignment( 3, 0, HasVerticalAlignment.ALIGN_MIDDLE );
        flexTable.getCellFormatter().setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM);
        flexTable.getCellFormatter().setHorizontalAlignment(3, 0, HasHorizontalAlignment.ALIGN_CENTER);
    }

}

CSS のスペーシングとパディングをいじってみましたが (違いがわかりません)、効果がありません。CSS ツールで色を変更することもできますが、それも効果がありません。

とにかく、ウィジェットの問題は次のとおりです。

  1. タイトル テキスト "##Title" は、その下のリスト ボックスによって切り取られています。それが起こらないように、その下にスペースまたはパディングが必要です。

  2. ##SearchText ラベルがその上のリストボックスに近すぎて、その下のテキスト ボックスと重なっています。

  3. 最後に、全体がブラウザの左端に表示され、画面の端との間に少しスペースが必要です。

セルサイズなどを調整することで、これを「一種の」フォーマットにすることができます。私はそれを正しく理解することはできません。また、これは間違った方法であるに違いないと考えています。

stockwatcher アプリケーションを見ると、CSS を使用してこのようなことを行っていますが、何も起こりません。以下は私の CSS ファイルで、2 つの項目は単なる実験的なものであり、何の影響もありません。

Boxed {
    margin-top: auto;
    border: thin solid;
    background-color: Silver;
}
#test {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

これを私に説明できる人はいますか？CSSが効果がない理由や、上記の問題を解決する方法がわかりません。上記の CSS をセル、ラベル、またはその他の UI オブジェクトに適用できますが、何も起こりません。

4

1 に答える 1