CODEWITHSUNDEEP
javawicket
Tapas Bose
Tapas Bose

Reputation: 29806

Wicket - Replace Label By TextField and vice versa

I am trying to replace a Label by a TextField in a ListView. I saw a similar wicket example few weeks ago over internet, but I don't remember the link. I have added AjaxEventBehavior - "onDblClick" to the ListItem by which I want to replace a Label by a TextField and also added AjaxFormComponentUpdatingBehavior - "onBlur" to the TextField such that the TextField will be replaced by Label. Somehow it is not working. The List model for the ListView contain only {"aaaaaaaaaaaaa", "bbbbbbbbbbbbbbbb", "cccccccccccccc"} [as I am testing it] so the first Label will be "aaaaaaaaaaaaa", if I double click on this Label the TextField is appearing the place of the Label "cccccccccccccc", which is unexpected. And also the "onBlur" event is not working. Hope I can explain the problems. The code is given below:

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);
        }       
    }
}

And

<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>

Any information or example code will be very helpful to me. Thank you. Edit: I found the link: example but the source code is not available.

Upvotes: 2

Views: 4653

Answers (3)

Don Roby
Don Roby

Reputation: 41127

The example you are trying to remember might be this editable label example.

Upvotes: 2

biziclop
biziclop

Reputation: 49714

You can replace an entire component, but you also have to consider that the same markup might not work for both a label and a text field. But you can always replace a fragment with another fragment, so if you wrap your field and label in a fragment each, you can switch between them anytime.

However you're better off using a dedicated component for this purpose, I seem to remember an Ajax field component in either core Wicket or Wicket Extensions that did it. It is called AjaxEditableLabel

Upvotes: 4

Juha Syrj&#228;l&#228;
Juha Syrj&#228;l&#228;

Reputation: 34261

There is a Visural Wicket library that has ViewOrEdit component. It sounds something like you are looking for.

The ListView component may not be the best basis for a form. See http://wicketinaction.com/2008/10/building-a-listeditor-form-component/

Upvotes: 1

Related Questions