2012-05-04 19 views
12

フィールドが空のときにフィールド内にメッセージを表示するGoogle Web Toolkitテキスト入力ウィジェットを知っていますか?GWTテキスト入力フィールドにプレースホルダを追加する方法

など。 「あなたの名字を入力してください」と言う最初の名前フィールドがあり、ユーザーが入力を開始すると、入力されたテキストが表示されます。

どうやってこれをやりますか?

ダニエル

答えて

31

これは、テキストエリアでの私のための作業を行います。

yourInputField.getElement().setPropertyString("placeholder", "enter your first name"); 

私はそれがHTML5の機能だと思います。あなたは、バインダーXMLに追加のプロパティを定義することができます。このソリューションにより

+0

驚くばかりです。完璧に動作します。 – supercobra

1

ソリューション:

public class MorePropertiesTextArea extends TextArea { 
    private String moreProperties; 

    public MorePropertiesTextArea() {} 

    public void setMoreProperties(String moreProperties) { 
     for (Entry<String, String> entry : parse(moreProperties).entrySet()) { 
      getElement().setAttribute(entry.getKey(), entry.getValue()); 
     } 
     this.moreProperties = moreProperties; 
    } 


    public String getMoreProperties() { 
     return moreProperties; 
    } 

    private Map<String, String> parse(String moreProperties) { 
     String[] pairStrings = moreProperties.split(";"); 
     HashMap<String, String> map = new HashMap<>(); 
     for (String pairString : pairStrings) { 
      String[] pair = pairString.split("="); 
      if(pair.length != 2) 
       throw new IllegalArgumentException("at " + pair + " while parsing " + moreProperties + 
         ". Use format like: 'spellcheck=false; placeholder=Write something here...'"); 
      map.put(pair[0].trim(), pair[1]); 
     } 
     return map; 
    } 

} 

UIバインダーのxml:

<p2:MultiLineTextArea ui:field="taMultiLine" styleName="form-control muliLine" 
      moreProperties="spellcheck=false; placeholder=Write something here... " /> 

結果のhtml:

<textarea class="form-control muliLine" spellcheck="false" placeholder="Write something here..."></textarea> 
1

私はあなたのためにこれをすべて(そしてもっと)行うUIフレームワークに行きます。私はすべての私のプロジェクトでGWT-ブートストラップ3を使用しています

はそれについてより幸せを午前:https://github.com/gwtbootstrap3/gwtbootstrap3

あなたはそれをすぐにどのように今ようbootstrap3の書籍を通過するのが最善であるブートストラップわからない場合グリッドシステムと他のものが動作します。 gwt-bootstrap 3を使用しているときに頭が揃っているよりも。

もう1つはhttps://github.com/GwtMaterialDesign/gwt-materialです。これはGoogleマテリアルのラッパーです。自分では使っていませんが、悪い選択ではないと思います。

+0

場所ホルダーにはGWT素材が付属しています。 –

関連する問題