Versions Compared

Old Version 3

changes.mady.by.user Robert Novotny

Saved on

compared with

New Version 4

changes.mady.by.user Robert Novotny

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

when this page renders, the letter B will be selected because it is the object inside the drop down's model.

-Igor

Wiki Markup
\[Taken from a wicket-user posting - [Gwyn|User__Gwynevans] 22:57, 9 Apr 2006 (BST)\]

Suppose you have an HTML snippet

Code Block
html
html

<select wicket:id="connective">
  <option value="&">AND</option>
  <option value="|">OR</option>
</select>

and your model object has to be either '&' or '|' according to the selected option.

At first, we will create a helper class which will hold the key-value pairs for the options in the DropDownChoice.

Code Block
titleClass representing the key-value pair

public class SelectOption {
  private String key;
  private String value;
  
  public SelectOption(String key, String value) {
    this.key = key;     
    this.value = value;   
  }
}

Then we create an instance of DropDownChoice with appropriate ChoiceRenderer.

Code Block

SelectOption[] options = new Option[] {new Option("&", "AND"), new Option("|", "OR")};
ChoiceRenderer choiceRenderer = new ChoiceRenderer("value", "key");
add(new DropDownChoice("connective", model, Arrays.asList(options), choiceRenderer);

The ChoiceRenderer will use the value of the 'key' property of SelectOption object in the 'value' attribute in the rendered HTML (e. g. 'key' property value will be used as the option id). The 'value' property will be used as a display value for the given option.

Note

See also the JavaDoc for the ChoiceRenderer. Another example of custom ChoiceRenderer can be found in the DropDownChoice component reference in the Wicket Library.

These are taken from a working app, but cut & pasted, etc, so there may be issues that mean that they won't compile directly - we'll have to see...

...

Code Block
   private DropDownChoice _phoneModelDDC;
   private MyModel _myModel = new MyModel();

   public MyPage(PageParameters parameters) {
        Form form = new Form("form", new CompoundPropertyModel(_myModel));
        add(form);

        addPhoneVendor(form);
        _phoneModelDDC = addPhoneModel(form);
    }

    private void addPhoneVendor(final Form form) {
        ArrayList phoneVendors = new ArrayList(getMySession().getTerminalVendors());
        form.add(new DropDownChoice("phoneVendor", phoneVendors) {
            /**
             * Whether this component's onSelectionChanged event handler should called using
             * javascript if the selection changes. 
             *
             * @return True if this component's onSelectionChanged event handler should
             *         called using javascript if the selection changes
             */
            protected boolean wantOnSelectionChangedNotifications() {
                return true;
            }

            /**
             * Called when a option is selected of a dropdown list that wants to be
             * notified of this event.
             *
             * @param newSelection The newly selected object of the backing model
             */
            protected void onSelectionChanged(final Object newSelection) {
                String phoneVendor = (String) newSelection;
                _myModel.setPhoneModel(null);   // Reset the phone model when the vendor changes
                phoneModelDDC.setChoices(getTerminalsByVendor(phoneVendor));
            }
        });
    }

    private DropDownChoice addPhoneModel(Form form) {
        List list = Collections.EMPTY_LIST;
        String phoneVendor = _myModel.getPhoneVendor();
        if (phoneVendor != null) {
            list = getTerminalsByVendor(phoneVendor);
        }

        DropDownChoice phoneModelDDC = new DropDownChoice("phoneModel", list) {
            protected boolean wantOnSelectionChangedNotifications() {
                return true;
            }
        };
        form.add(phoneModelDDC);
        return phoneModelDDC;
    }
Code Block
   private DropDownChoice _phoneVendorDDC, _phoneModelDDC;
   private MyModel _myModel = new MyModel();

   public MyPage(PageParameters parameters) {
        Form form = new Form("form", new CompoundPropertyModel(_myModel));
        add(form);

        _phoneVendorDDC = getPhoneVendorDDC(form);
        _phoneModelDDC = getPhoneModelDDC(form);

        form.add(_phoneVendorDDC);
        form.add(_phoneModelDDC);
    }

    private DropDownChoice getPhoneVendorDDC(final Form form) {
        ArrayList phoneVendors = new ArrayList(getMySession().getTerminalVendors());
        DropDownChoice phoneVendorDDC = new DropDownChoice("phoneVendor", phoneVendors);
        // Add Ajax Behaviour...
        phoneVendorDDC.add(new AjaxFormComponentUpdatingBehavior("onchange") {
            protected void onUpdate(AjaxRequestTarget target) {
                // Reset the phone model dropdown when the vendor changes
                _myModel.setPhoneModel(null);
                _phoneModelDDC.setChoices(getTerminalsByVendor(_myModel.getPhoneVendor()));
                target.addComponent(_phoneModelDDC);
            }
        });
        return phoneVendorDDC;
    }

    private DropDownChoice getPhoneModelDDC(Form form) {
        List list = Collections.EMPTY_LIST;
        String phoneVendor = _myModel.getPhoneVendor();
        if (phoneVendor != null) {
            list = getTerminalsByVendor(phoneVendor);
        }
        DropDownChoice phoneModelDDC = new DropDownChoice("phoneModel", list);
        phoneModelDDC.setOutputMarkupId(true);  // Needed for Ajax to update it
        return phoneModelDDC;
    }

...