Wicket：通過ListView中的TextFields更新模型

Question

我正在編寫一個簡單的面板，它使用ListView呈現上傳的圖像及其替代文本。我能夠顯示上傳的圖像以及數據庫中的替代文本，但我找不到通過TextFields更新替代文本的解決方案。

下面是用於顯示數據的模型，按預期工作：

this.listModel = new LoadableDetachableModel<Object>() { 
    protected Object load() { 
    ArrayList<SingleImage> images = SingleImageDao.getImagesByPageId(pageId); 
    return images; 
    } 
}; 

而這裏的setListView()方法：

this.setListView(new ListView("imageListItem", this.listModel) { 
    protected void populateItem(final ListItem item) { 
    final SingleImage singleImage = (SingleImage) item.getModelObject(); 

    item.add(new AttributeModifier("id", singleImage.getId())); 
    item.add(new Image("imageListItemImg", 
     new ContextRelativeResource(uploadedImgDir 
      + singleImage.getFileName()))); 

    final TextField altText = new TextField<String>("altText", new PropertyModel<String>(singleImage, "altText")); 
    item.add(altText); 
    } 
}); 
this.listView.setReuseItems(true); 

還有一個按鈕，應該保存更改：

this.saveButton = new AjaxButton("saveButton") { 
    @Override 
    protected void onSubmit(AjaxRequestTarget target, Form form) { 
    target.add(listContainer); 
    } 
}; 

listContainer是一個WebMarkupContainer包裹ListView。任何想法如何更新altText字段？

編輯：湯姆問了完整的Java類和HTML頁面。

Java類：

public class ImageListPanel extends Panel { 
    private final String uploadedImgDir = "img//uploaded//"; 
    private int pageId; 
    private IModel<?> listModel = null; 
    private ListView<?> listView = null; 
    private WebMarkupContainer imageListContainer = null; 
    private WebMarkupContainer listContainer = null; 
    private Form<?> actionButtons = null; 
    private AjaxButton saveButton = null; 

    public ImageListPanel(String id, final int pageId) { 
     super(id); 
     this.pageId = pageId; 

     this.listModel = new LoadableDetachableModel<Object>() { 
      protected Object load() { 
       ArrayList<SingleImage> images = SingleImageDao.getImagesByPageId(pageId); 
       return images; 
      } 
     }; 

     this.setListView(new ListView("imageListItem", this.listModel) { 
      protected void populateItem(final ListItem item) { 
       final SingleImage singleImage = (SingleImage) item.getModelObject(); 

       item.add(new AttributeModifier("id", singleImage.getId())); 
       item.add(new Image("imageListItemImg", 
        new ContextRelativeResource(uploadedImgDir 
         + singleImage.getFileName()))); 
       final TextField altText = new TextField<String>("altText", new PropertyModel<String>(singleImage, "altText")); 
       item.add(altText); 
      } 
     }); 

     this.listView.setReuseItems(true); 

     this.imageListContainer = new WebMarkupContainer("imageListContainer"); 
     this.listContainer = new WebMarkupContainer("listContainer"); 
     this.setActionButtons(new Form<Void>("actionButtons")); 
     this.saveButton = new AjaxButton("saveButton") { 
      @Override 
      protected void onSubmit(AjaxRequestTarget target, Form form) { 
       target.add(listContainer); 
       listContainer.add(new AttributeModifier("class", "passive")); 
      } 
     }; 
     this.imageListContainer.setOutputMarkupId(true); 
     this.listContainer.setOutputMarkupId(true); 
     add(this.imageListContainer); 
     this.imageListContainer.add(this.listContainer); 
     this.listContainer.add(this.listView); 
     this.listView.setOutputMarkupId(true); 
     this.getActionButtons().setOutputMarkupId(true); 
     this.getActionButtons().add(this.saveButton); 
     this.imageListContainer.add(this.getActionButtons()); 
    } 

    public int getPageId() { 
     return pageId; 
    } 

    public void setPageId(int pageId) { 
     this.pageId = pageId; 
    } 

    public WebMarkupContainer getListContainer() { 
     return listContainer; 
    } 

    public void setListContainer(WebMarkupContainer listContainer) { 
     this.listContainer = listContainer; 
    } 

    public ListView<?> getListView() { 
     return listView; 
    } 

    public void setListView(ListView<?> listView) { 
     this.listView = listView; 
    } 

    public Form<?> getActionButtons() { 
     return actionButtons; 
    } 

    public void setActionButtons(Form<?> actionButtons) { 
     this.actionButtons = actionButtons; 
    } 
} 

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd" 
    xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body> 
    <wicket:panel> 
     <div wicket:id="imageListContainer" id="image-list-container"> 
      <div wicket:id="listContainer" id="imagesContainer"> 
       <ul id="sortable"> 
        <li wicket:id="imageListItem" class="img-list-item"> 
         <img wicket:id="imageListItemImg" class="thumbnail" /> 
         <input wicket:id="altText" class="altText" type="text" size="40" /> 
        </li> 
       </ul> 
      </div> 
      <form wicket:id="actionButtons"> 
       <p> 
        <input wicket:id="saveButton" id="saveButton" type="submit" value="Save" /> 
       </p> 
      </form> 
     </div> 
    </wicket:panel> 
</body> 
</html> 

編輯2：更新的代碼，ListView控件現在包裹表單內。

Java類：

public class ImageListPanel extends Panel { 
private final String uploadedImgDir = "img//uploaded//"; 
private int pageId; 
private IModel<?> listModel = null; 
private ListView<?> listView = null; 
private WebMarkupContainer imageListContainer = null; 
private WebMarkupContainer listContainer = null; 

public ImageListPanel(String id, final int pageId) { 
    super(id); 
    this.pageId = pageId; 

    this.listModel = new LoadableDetachableModel<Object>() { 
     protected Object load() { 
      ArrayList<SingleImage> images = SingleImageDao.getImagesByPageId(pageId); 
      return images; 
     } 
    }; 

    this.setListView(new ListView("imageListItem", this.listModel) { 
     protected void populateItem(final ListItem item) { 
      final SingleImage singleImage = (SingleImage) item.getModelObject(); 

      item.add(new AttributeModifier("id", singleImage.getId())); 
      item.add(new Image("imageListItemImg", 
       new ContextRelativeResource(uploadedImgDir 
        + singleImage.getFileName()))); 
      final TextField altText = new TextField<String>("altText", new PropertyModel<String>(singleImage, "altText")); 
      item.add(altText); 
     } 
    }); 

    this.listView.setReuseItems(true); 
    Form formListView = new Form("formListView", this.listModel) { 
     protected void onSubmit() { 
      ArrayList<SingleImage> images = (ArrayList<SingleImage>) listModel.getObject(); 
      for (SingleImage singleImage : images) { 
       System.out.println(singleImage.getAltText()); 
      } 
     }; 
    }; 



    this.imageListContainer = new WebMarkupContainer("imageListContainer"); 
    this.listContainer = new WebMarkupContainer("listContainer"); 
    this.imageListContainer.setOutputMarkupId(true); 
    this.listContainer.setOutputMarkupId(true); 
    add(this.imageListContainer); 
    this.imageListContainer.add(this.listContainer); 
    //this.listContainer.add(this.listView); 
    this.listContainer.add(formListView); 
    formListView.add(this.listView); 
    this.listView.setOutputMarkupId(true); 
} 

public int getPageId() { 
    return pageId; 
} 

public void setPageId(int pageId) { 
    this.pageId = pageId; 
} 

public WebMarkupContainer getListContainer() { 
    return listContainer; 
} 

public void setListContainer(WebMarkupContainer listContainer) { 
    this.listContainer = listContainer; 
} 

public ListView<?> getListView() { 
    return listView; 
} 

public void setListView(ListView<?> listView) { 
    this.listView = listView; 
} 

}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd" 
    xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body> 
    <wicket:panel> 
     <div wicket:id="imageListContainer" id="image-list-container"> 
      <div wicket:id="listContainer" id="imagesContainer"> 

       <form wicket:id="formListView"> 
        <ul id="sortable"> 
         <li wicket:id="imageListItem" class="img-list-item"> 
          <img wicket:id="imageListItemImg" class="thumbnail" /> 
          <input wicket:id="altText" class="altText" type="text" size="40" /> 
         </li> 
        </ul> 
       </form> 
       <input type="submit" value="submit" /> 
      </div> 
     </div> 
    </wicket:panel> 
</body> 
</html> 

Answer 1

如果我理解正確的話，你要顯示的圖像的列表，每一個文本框來編輯它的中高音文本並將其存儲在數據庫中。在您發佈的代碼中，您必須更改以下內容：

• 用表格包圍整個列表。目前，輸入字段不是表單的一部分，因此用戶輸入不能發佈到服務器端Wicket代碼。在你的設置中，整個列表視圖將被添加到表單中，而不是父面板。
• 實現form.onSubmit（）。在onSubmit（）方法中，您可以通過singleImage.getAltText（）訪問輸入文本字段的值並將其存儲在數據庫中。