Question

我正在尝试用ListView中的TextField替换Label。我几周前通过互联网看到了一个类似的wicket例子，但我不记得这个链接了。我已将AjaxEventBehavior - “onDblClick”添加到ListItem，我希望通过它将TextField替换为Label，并将AjaxFormComponentUpdatingBehavior - “onBlur”添加到TextField，以便TextField将替换为Label。不知怎的，它不起作用。 ListView的List模型只包含{“aaaaaaaaaaaa”，“bbbbbbbbbbbbbbbb”，“cccccccccccccc”} [我正在测试它]所以第一个Label将是“aaaaaaaaaaaa”，如果我双击这个Label，TextField就出现了标签“cccccccccccccc”的位置，这是意料之外的。并且“onBlur”事件也不起作用。希望我能解释一下这些问题。代码如下：

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但源代码不可用。

Answer 1

您可以替换整个组件，但您还必须考虑相同的标记可能不适用于标签和文本字段。但是你总是可以用另一个片段替换片段，所以如果你将字段和标签分别包装在一个片段中，你可以随时在它们之间切换。

但是你最好为此目的使用专用组件，我似乎记得核心Wicket或Wicket Extensions中的Ajax字段组件。它被称为AjaxEditableLabel

Answer 2

您要记住的示例可能是this editable label example。

Answer 3

有一个Visural Wicket库，其中包含ViewOrEdit个组件。这听起来像你在寻找。

ListView组件可能不是表单的最佳基础。见http://wicketinaction.com/2008/10/building-a-listeditor-form-component/

Wicket - 通过TextField替换标签，反之亦然

3 个答案: