Vaadin8 Declarative not working as expected with NativeSelect

Question

I used the following 4 lines of code setting up a NativeSelect in a vaadin java web application successfully and the NativeSelect menu was created and populated by my enum (ApplicationStatus).

When I tried to do the same thing in a declarative file, the NativeSelect menu shows up and is empty.

class Application extends VerticalLayout
{
public Application()
{
..
    //ApplicationStatus is an enum, these exact four lines of code work fine without declarative

    private NativeSelect<ApplicationStatus> categorySelect = new NativeSelect<ApplicationStatus>("Application Status");

    categorySelect.setItems( ApplicationStatus.values());
    categorySelect.setItemCaptionGenerator( ApplicationStatus::getName );
    categorySelect.setSelectedItem(ApplicationStatus.ACTIVE);

..
}

Here is the Declarative HTML FILE (ATTEMPT1) //the menu shows up empty

...

    <row>
      <column><vaadin-label><strong>Decline Reason</strong></vaadin-label></column>
    <column><v-native-select _id="categorySelect"></v-native-select></column>
    </row>

...

**Here is the Declarative  HTML FILE  (ATTEMPT2)** //I tried populating it inline but the result was that the menu now has the word "Duplicate" showing 5 times.
...
        <row>
         <column><vaadin-label><strong>Change Category</strong></vaadin-label></column>
         <column><vaadin-native-select _id="categorySelect">
                <option value="D">Decline</option>
                <option value="W">Waitlist</option>
                <option value="R">Rejected by VCS</option>
                <option value="P">Prospect</option>
                <option value="C">Duplicate</option>
                </vaadin-native-select></column>
        </row>

...

score 0 · Answer 1 · answered Oct 05 '17 at 22:21

You didn't include the Java source for the declarative implementation, so just going to take a stab at it.

Declare the NativeSelect variable in the class object used to define the layout where it lives. Let the design bind the variable to the declarative using the _id you provided. Then populate the control with the enums and specify a default as you did previously.

NativeSelect<ApplicationStatus> categorySelect;

public DemoView()
{
    Design.read( "DemoView.html", this );

    categorySelect.setItems( ApplicationStatus.values() );
    categorySelect.setSelectedItem( ApplicationStatus.ACTIVE );

This produces a select control with the desired captions and enum mappings.

I traced some of the Vaadin code, and I'm not sure there is a way to populate the control with enums purely using the declarative method.

Vaadin8 Declarative not working as expected with NativeSelect

1 Answers1