java - Wicket:动态添加 TextField/Panel

Question

我想动态添加一些 TextField 到表单并隐藏或显示一些 onClick。

我想要实现的图像(实际上是德语，所以我解释一下):左侧是一周中的几天(星期一、星期二、...、星期日)。如果您单击带有向右箭头的按钮，则实际的一周应隐藏并显示下一周。

我存储了一个代表循环的Integer。因此，如果数据库中是 3，我需要能够单击“下周”按钮 3 次。 (注意:这个数字可以动态变化)。因此，如果我将数字 3 更改为 5，我需要 5 次此表格。

我希望我的描述是“好吧”，我的英语不是最好的。对此感到抱歉。

我读过的内容:首先，我需要一个面板，在其中添加 TextFields，其次，我需要一个获取面板列表的 ListView。但我不明白这是如何工作的..这是正确的方法吗？

表单面板:

public class FoodFieldPanel extends Panel {

public FoodFieldPanel(String id) {
    super(id);
    WebMarkupContainer foodFields = new WebMarkupContainer("foodFields");
    TextField monday = new TextField("monday");
    TextField tuesday = new TextField("tuesday");
    TextField wendnesday = new TextField("wendnesday");
    TextField thursday = new TextField("thursday");
    TextField friday = new TextField("friday");
    TextField saturday = new TextField("saturday");
    TextField sunday = new TextField("sunday");
    foodFields.add(monday);
    foodFields.add(tuesday);
    foodFields.add(wendnesday);
    foodFields.add(thursday);
    foodFields.add(friday);
    foodFields.add(saturday);
    foodFields.add(sunday);
    add(foodFields);
} 
}

页面:

public class FoodDetailPanel extends Panel {

public FoodDetailPanel(String id, final IModel<Category> catModel, boolean fieldsEnabled) {
    super(id, catModel);
    setOutputMarkupId(true);
    int cycle = 4;
    List<FoodFieldPanel> textFields = new ArrayList<FoodFieldPanel>();
    for (int a = 1; a <= cycle; a++) {
        textFields.add(new FoodFieldPanel("foodField"));
    }
    add(new ListView("test", textFields) {
        protected void populateItem(ListItem item) {
            FoodFieldPanel test = (FoodFieldPanel) item.getModelObject();
            add(test);
        }
    });
}
}

页面标记:

<wicket:panel xmlns:wicket="http://wicket.apache.org">
<span wicket:id="test">
    <div wicket:id="foodField">

    </div>
</span> 
</wicket:panel>

作为第一步，我想根据需要经常创建面板..

Answer 1

因此，鉴于您的显示是静态的，只有其背后的数据需要改变，您可以利用模型的力量。 (我无法发布完整的解决方案，它太长了，但希望它能向您展示总体思路。)

class WeekData {
   private String monday;
   private String tuesday;
   // and so on
}

class AllData {
  private final int minWeek;
  private final int maxWeek;
  private int currentWeek; // this is modified by clicking the arrows

  private Map<Integer, WeekData> weekMap;

  public IModel<WeekData> createDataModel() {
    return new IModel<WeekData>() {
       public WeekData getObject() {
         return weekMap.get( currentWeek );
       }
    }
  }

  public IModel<Integer> createWeekModel() {
    return new IModel<Integer>() {

       public Integer getObject() {
         return currentWeek;
       }
    }
  }

}

您的 FoodFieldPanel 初始化将如下所示:

public FoodFieldPanel(String id, IModel<AllData> model) {
  super(id);
  WebMarkupContainer foodFields = new WebMarkupContainer("foodFields", new CompoundPropertyModel( model.getObject().createDataModel() ) );
  TextField monday = new TextField("monday");
  TextField tuesday = new TextField("tuesday");
  //...
  foodFields.add(monday);
  foodFields.add(tuesday);
  //
  add(foodFields);
}

您还需要以类似的方式更改箭头的代码，但基本思想是，通过使用动态模型，您可以替换页面后面的数据，而显示代码甚至不知道逻辑。而且您不需要额外的 ListView。 (虽然我个人会将一周中的日子存储在 ListView 中，但我不想让我的答案进一步复杂化。)

这种显示和模型的解耦是 Wicket 最强大的功能之一，因此 it's worth learning as much about them as you can .