2011-04-04 3 views
2

ListViewのTextFieldでラベルを置き換えようとしています。私は数週間前にインターネット経由で同様の模型の例を見ましたが、私はそのリンクを覚えていません。 AjaxEventBehavior - "onDblClick"をListItemに追加して、TextFieldでラベルを置き換え、AjaxFormComponentUpdatingBehavior - "onBlur"をTextFieldに追加して、TextFieldをLabelに置き換えるようにしました。どういうわけか、それは動作していません。 ListViewのListモデルには{"aaaaaaaaaaaaa"、 "bbbbbbbbbbbbbbbb"、 "cccccccccccccc"}のみが含まれているので、最初のLabelは "aaaaaaaaaaaaa"になります。このラベルをダブルクリックするとTextFieldが表示されます予期せぬラベル「cccccccccccccc」の場所。また、 "onBlur"イベントは機能しません。私は問題を説明できることを願っています。コードは以下のとおりである:Wicket - TextFieldによるラベルの置き換え

public class TaskTypeSettingsPage extends BasePage implements Serializable { 
    private String val; 

    public TaskTypeSettingsPage() { 
     add(new TaskTypeSettingsForm("form")); 
    } 

    public void setVal(String val) { 
     this.val = val; 
    } 

    public String getVal() { 
     return val; 
    } 

    private class TaskTypeSettingsForm extends Form { 

     private static final long serialVersionUID = 10058L; 
     private Fragment labelFragment; 
     private Fragment textFragment; 

     public TaskTypeSettingsForm(String id) { 
      super(id); 
      setOutputMarkupId(true);    

      ListView listView = new ListView("row", Arrays.asList("aaaaaaaaaaaaa", "bbbbbbbbbbbbbbbb", "cccccccccccccc")) { 

       @Override 
       protected void populateItem(ListItem item) { 
        String str = (String) item.getModelObject(); 
        item.add(new Label("listLabel", str)); 
        item.setOutputMarkupId(true); 

        labelFragment = new Fragment("frag", "labelFragment", this.getPage()); 
        Label label = new Label("label", str); 
        label.setOutputMarkupId(true); 
        labelFragment.setOutputMarkupId(true); 
        labelFragment.add(label); 
        item.add(labelFragment); 

        textFragment = new Fragment("frag", "textFragment", this.getPage()); 
        TextField text = new TextField("text", new PropertyModel(TaskTypeSettingsPage.this, "val")); 
        text.setOutputMarkupId(true); 
        textFragment.setOutputMarkupId(true); 
        textFragment.add(text); 

        item.add(new AjaxEventBehavior("onDblClick") { 

         @Override 
         protected void onEvent(AjaxRequestTarget target) { 
           labelFragment.replaceWith(textFragment); 
          labelFragment = textFragment; 
          target.addComponent(textFragment); 
         } 
        }); 
        text.add(new AjaxFormComponentUpdatingBehavior("onBlur") { 

         @Override 
         protected void onUpdate(AjaxRequestTarget target) { 
          textFragment.replaceWith(labelFragment); 
          textFragment = labelFragment; 
          target.addComponent(labelFragment); 
         } 
        }); 
       } 
      }; 
      add(listView); 
     }  
    } 
} 

そして

<html> 
<body> 
<wicket:extend> 
<div class="heading"><wicket:message key="extras.taskType" /></div> 
<form wicket:id="form" autocomplete="off"> 
<table> 
    <tr wicket:id="row"> 
     <td> 
     <span wicket:id="frag"></span> 
    </td> 
</tr> 
</table> 

<wicket:fragment wicket:id="labelFragment"><span wicket:id="label"></span> 
</wicket:fragment> 
<wicket:fragment wicket:id="textFragment"><input type="text" wicket:id="text"> 
</wicket:fragment> 
</form> 
</wicket:extend> 
</body> 
</html> 

あらゆる情報または例のコードは、私にとって非常に参考になります。ありがとうございました。 編集:リンク:exampleが見つかりましたが、ソースコードは入手できません。

答えて

4

コンポーネント全体を置き換えることができますが、ラベルとテキストフィールドの両方で同じマークアップが機能しない可能性も考慮する必要があります。しかし、いつでもフラグメントを別のフラグメントに置き換えることができます。したがって、フィールドとラベルをそれぞれフラグメントにラップすると、いつでも切り替えることができます。

この目的のために専用のコンポーネントを使用するほうが良いですが、コアのWicketまたはWicket ExtensionsのいずれかでAjaxフィールドコンポーネントを覚えているようです。 AjaxEditableLabel

+0

ありがとうございます。私はそれを見てみましょう。 –

+1

+1:これは私が答えに載せた例で使われています。 –

+1

Wicket拡張のMaven依存関係:http://mvnrepository.com/artifact/org.apache.wicket/wicket-extensions –

関連する問題