如何在选择模式“属性”中使用多个ID

Question

I've a selection component (a combobox to be specific) and have added a SQLContainer as the ContainerDataSource.

I've set the ItemCaption via .setItemCaptionPropertyId("myID") . However, I need to use two properties as the caption.

Let's say that the properties with the ID "myID" represent a string like "foo". There's also another property called "myCodeID" which represents a number like "23".

How am I able to let my ComboBox show its item's caption as "23 foo"?

I'm searching for something like .setItemCaptionPropertyIds("myId", "myCodeID") .

Answer 1

I believe there are several approaches that you could use, but at least the following 2 work:

1) Quick and dirty

How about using a "fake property", meaning that you use a property which does not physically exist on the object, there's a getter with that name. Since Vaadin will also look for getters/setters when determining the item properties, it will find it and use it for your caption.

I know it's not the most elegant having to modify your model class, but it gets you there. Additionally depending on your implementation, you could maybe decorate your Person with a PersonCaptionGenerator which contains the getCaption() method to keep things a bit separate.

Suppose you have a bean like:

public static class Person {
        private String name, surname;
        private int age;

        public Person(String name, String surname, int age) {
            this.name = name;
            this.surname = surname;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public String getSurname() {
            return surname;
        }

        public void setName(String name) {
            this.name = name;
        }

        public void setSurname(String surname) {
            this.surname = surname;
        }

        public int getAge() {
            return age;
        }

        public void setAge(int age) {
            this.age = age;
        }

        public String getCaption() {
            // getter to be used as caption
            return name + " " + surname;
        }
    }

Then you could write something like:

public class ComboBoxComponent extends VerticalLayout {
    public ComboBoxComponent() {
        BeanItemContainer<Person> dataSource = new BeanItemContainer<>(HasCaption.class);

        ComboBox comboBox = new ComboBox();
        comboBox.setItemCaptionMode(AbstractSelect.ItemCaptionMode.PROPERTY);

        // use a fake property which will get identified by the getter
        comboBox.setItemCaptionPropertyId("caption");
        addComponent(comboBox);

        comboBox.setContainerDataSource(dataSource);
        Random random = new Random();
        for (int i = 0; i < 10; i++) {
            dataSource.addBean(new Person("Name " + i, "Surname " + i, random.nextInt(99) + 1));
        }
    }
}

---

2) Extend the combo and add a caption generator

If you can't modify the model and have a somewhat generic and reusable solution, you can extend the ComboBox and override the getItemCaption() method. Please note that I've used a BeanItemContainer because it's easier since it holds the bean itself as the item ID, but it can probably be adjusted if a different container is needed.

Starting with the same Person bean, but without the getter for the fake property.

Generic contract:

public interface CaptionComposer<T> {
    String getCaption(T item);
}

Implementation for our Person bean:

private class PersonCaptionGenerator implements CaptionComposer<Person> {
    @Override
    public String getCaption(Person person) {
        return person.getName() + " " + person.getSurname();
    }
}

Custom combobox which defers the caption retrieval to the generator:

public static class MyComboBox<T> extends ComboBox {
    private CaptionComposer captionComposer;

    public MyComboBox(CaptionComposer<T> captionGenerator, BeanItemContainer<T> dataSource) {
        this.captionComposer = captionGenerator;
        setContainerDataSource(dataSource);
    }

    @Override
    public String getItemCaption(Object itemId) {
        return captionComposer.getCaption(itemId);
    }
}

And lastly, add it to the UI:

public class ComboBoxComponent extends VerticalLayout {
    public ComboBoxComponent() {
        BeanItemContainer<Person> dataSource = new BeanItemContainer<>(Person.class);

        addComponent(new MyComboBox<>(new PersonCaptionGenerator(), dataSource));

        Random random = new Random();
        for (int i = 0; i < 10; i++) {
            dataSource.addBean(new Person("Name " + i, "Surname " + i, random.nextInt(99) + 1));
        }
    }
}

---

In the end both will get you: