2011-06-20 10 views
3

私はGmailを使って簡単にメールを選択するコンボボックスのようなものを実装することに興味があります。コンボボックスの「デフォルト」選択には、すべての電子メールを選択するためにクリックできるチェックボックスがあります。それ以外の場合は、ボックスをドロップダウンして別の選択オプションを選択できます。GMail like selection comboboxがGWTに実装されました

enter image description here GWTでこれを実装するにはどうしますか?三角形のため

+1

あなたは要素が配置されているかのアイデアを得るために、その領域の周りにDOMを検査するChromeの開発者ツール(またはFirebugの)を使用することができます。そこから、UIBinderテンプレートにそのことを模倣することができます。私は具体的なアイデアはありませんが、それが私がそれに取り組む方法です。 –

答えて

6
public class SelectionComboBox extends HorizontalPanel implements ClickHandler { 
    private class ListItem extends Label implements ClickHandler { 
     String text; 
     public ListItem(String text) { 
      this.text = text; 
      this.setText(text); 
      this.addClickHandler(this); 
     } 
     @Override 
     public void onClick(ClickEvent event) { 
      selectedValue = text; 
      popup.hide(); 
     } 
    } 

    CheckBox combo; 
    FlowPanel list; 
    PopupPanel popup; 
    String selectedValue; 
    Label triangle; 

    public SelectionComboBox() { 
     list = new FlowPanel(); 
     popup = new PopupPanel(); 
     combo = new CheckBox(); 
     triangle = new Label(); 
     list.add(new ListItem("All")); 
     list.add(new ListItem("None")); 
     list.add(new ListItem("Read")); 
     list.add(new ListItem("Unread")); 
     list.add(new ListItem("Starred")); 
     list.add(new ListItem("Unstarred")); 
     popup.setWidget(list); 
     popup.setPopupPosition(this.getAbsoluteLeft(), 
      this.getAbsoluteTop() + this.getOffsetHeight()); 
     this.addDomHandler(this, ClickEvent.getType()); 
     triangle.addClickHandler(this); 
     this.add(combobox); 
     this.add(triangle); 
    } 

    public void addValueChangeHandler(ValueChangeHandler<Boolean> handler) { 
     combo.addValueChangeHandler(handler); 
    } 

    public String getSelection() { 
     return selectedValue; 
    } 

    @Override 
    public void onClick(ClickEvent event) { 
     popup.show(); 
    } 
} 

スタイル:

height:0; 
width:0; 
border-left:20px solid transparent; 
border-right:20px solid transparent; 
border-top:20px solid black; 

上記のスタイルは、あなただけのCSSを使って三角形を与えるであろう。

リストに選択項目に該当する要素がない場合、チェックボックスを選択しない機能を追加する必要があります。

(注:コードがテストされていないですが、あなたが始めるのに役立つはずです)

+0

私は似たようなことをしなければならず、同様のアプローチをとっていました。微妙なことは、キーボードが機能するようにすることです。 –

+0

私は、その合理的に近いコードを試してみましたが、主な問題は "修正する"方法が見当たりません。コードが表示されるので、チェックボックスをクリックすると選択肢がポップアップし、矢印をクリックすると選択肢が表示されます。チェックボックスをオンにすると、ポップアップが選択されていないテーブル行がすべて選択/選択解除されます。イメージなどを使用してリストボックスをトリガーしますか? – Joel

+2

この行を削除します: 'this.addDomHandler(this、ClickEvent.getType());'そして矢印をクリックするとリストをポップアップするだけです。私が提供しているスタイルで三角形という名前のラベルをスタイルすると、画像よりも小さいCSSだけを使用して矢印が表示されます。 –

関連する問題