Alexey178
(Alexey B)
February 18, 2020, 8:16pm
1
Hi guys!
I have pretty odd problem. When I add combobox to layout - I can see NOTHING in browser.
Below is code adding it to layout:
private ComboBox<String> testBox = new ComboBox<>();
public TestView () {
testBox.setItems("Test 1", "Test 2", "Test 3");
testBox.setValue("Test 2");
testBox.setWidthFull();
testBox.setClearButtonVisible(true);
testBox.setRequired(true);
testBox.setReadOnly(false);
testBox.setLabel("TESTBOX");
testBox.setVisible(true);
Div testBoxDiv = new Div();
testBoxDiv.setSizeFull();
testBoxDiv.add(testBox);
splitLayout.addToSecondary(testBoxDiv);
}
I tried almost everything to make it shown.
Guys, please help - what am I misssing here???
Thanx!
Anastasia6
(Anastasia Smirnova)
February 19, 2020, 7:13am
2
Hi,
your code seems fine to me. Did you remember to add the splitLayout
to your UI as well? Do you see any errors in your server or browser console?
Could you also post the whole route that we could try to verify problem on our side?
Best regards,
Anastasia
Alexey178
(Alexey B)
February 19, 2020, 8:52am
3
Here is full class code.
Some lines commented out because I’m trying to make combobox works 1st.
@Route(value = "Search-Hero", layout = MainView.class)
@PageTitle("Search Hero")
@CssImport("styles/views/searchhero/search-hero-view.css")
@SpringComponent
public class SearchHeroView extends Div implements AfterNavigationObserver {
private final SearchHeroService searchHeroService;
private final CountyService countyService;
private final ListingService listingService;
private Grid<SearchHero> grid;
//Editor fields
private TextField title = new TextField();
private TextArea description = new TextArea();
// private ComboBox<Listing> listing = new ComboBox<>();
// private ComboBox<County> county = new ComboBox<>();
private ComboBox<String> testBox = new ComboBox<>();
private Button cancelBtn = new Button("Cancel");
private Button saveBtn = new Button("Save");
private Button newBtn = new Button("New");
private Button deleteBtn = new Button("Delete");
private Binder<SearchHero> binder;
public SearchHeroView(SearchHeroService searchHeroService, CountyService countyService, ListingService listingService) {
this.searchHeroService = searchHeroService;
this.countyService = countyService;
this.listingService = listingService;
setId("search-hero-view");
// Configure Grid
grid = new Grid<>();
grid.addThemeVariants(GridVariant.LUMO_NO_BORDER);
grid.setHeightFull();
grid.addColumn(SearchHero::getId).setHeader("ID").setWidth("10%");
grid.addColumn(SearchHero::getTitle).setHeader("Title");
grid.addColumn(SearchHero::getDescription).setHeader("Description");
grid.addColumn(searchHero -> { //
Listing l = searchHero.getListing();
return l == null ? "-" : l.getDescription();
}).setHeader("Listing Description");
grid.addColumn(searchHero -> { //
County c = searchHero.getCounty();
return c == null ? "-" : c.getName();
}).setHeader("County");
//when a row is selected or deselected, populate form
grid.asSingleSelect().addValueChangeListener(event -> populateForm(event.getValue()));
// the grid valueChangeEvent will clear the form too
cancelBtn.addClickListener(e -> grid.asSingleSelect().clear());
saveBtn.addClickListener(e -> {
saveBtnClick();
});
newBtn.addClickListener(e -> {
newBtnClick();
});
// county.setDataProvider(this.countyService::fetch, this.countyService::count);
// county.setItems(this.countyService.fetch("", 0, Integer.MAX_VALUE));
// listing.setDataProvider(this.listingService::fetch, this.listingService::count);
// Configure Form
binder = new Binder<>(SearchHero.class);
// Bind fields. This where you'd define e.g. validation rules
binder.bindInstanceFields(this);
SplitLayout splitLayout = new SplitLayout();
splitLayout.setSizeFull();
createGridLayout(splitLayout);
// createEditorLayout(splitLayout);
add(splitLayout);
testBox.setItems("Test 1", "Test 2", "Test 3");
testBox.setValue("Test 2");
testBox.setWidthFull();
testBox.setClearButtonVisible(true);
testBox.setRequired(true);
testBox.setReadOnly(false);
testBox.setLabel("TESTBOX");
testBox.setVisible(true);
Div testBoxDiv = new Div();
testBoxDiv.setSizeFull();
testBoxDiv.add(testBox);
splitLayout.addToSecondary(testBoxDiv);
}
private void createEditorLayout(SplitLayout splitLayout) {
Div editorDiv = new Div();
editorDiv.setId("editor-layout");
FormLayout formLayout = new FormLayout();
addFormItem(editorDiv, formLayout, title, "Title");
addFormItem(editorDiv, formLayout, description, "Description");
// addFormItem(editorDiv, formLayout, testBox, "TB");
// addFormItem(editorDiv, formLayout, listing, "Listing");
// addFormItem(editorDiv, formLayout, county, "County");
createButtonLayout(editorDiv);
splitLayout.addToSecondary(editorDiv);
}
private void createButtonLayout(Div editorDiv) {
HorizontalLayout buttonLayout = new HorizontalLayout();
buttonLayout.setId("button-layout");
buttonLayout.setWidthFull();
buttonLayout.setSpacing(true);
cancelBtn.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
saveBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
newBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
deleteBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
buttonLayout.add(cancelBtn, saveBtn, newBtn, deleteBtn);
editorDiv.add(buttonLayout);
}
private void createGridLayout(SplitLayout splitLayout) {
Div wrapper = new Div();
wrapper.setId("wrapper");
wrapper.setWidthFull();
splitLayout.addToPrimary(wrapper);
wrapper.add(grid);
}
private void addFormItem(Div wrapper, FormLayout formLayout,
AbstractField field, String fieldName) {
formLayout.addFormItem(field, fieldName);
wrapper.add(formLayout);
field.getElement().getClassList().add("full-width");
}
@Override
public void afterNavigation(AfterNavigationEvent event) {
// Lazy init of the grid items, happens only when we are sure the view will be
// shown to the user
updateGrid();
}
private void updateGrid() {
grid.setItems(searchHeroService.get(PageRequest.of(0, Integer.MAX_VALUE)).getContent());
}
private void populateForm(SearchHero value) {
// Value can be null as well, that clears the form
binder.readBean(value);
}
private void newBtnClick() {
populateForm(new SearchHero());
}
private void saveBtnClick() {
final SearchHero selectedSearchHero = grid.asSingleSelect().getValue();
selectedSearchHero.setDescription(description.getValue());
selectedSearchHero.setTitle(title.getValue());
searchHeroService.createOrUpdate(selectedSearchHero);
updateGrid();
}
}
Alexey178
(Alexey B)
February 19, 2020, 8:57am
4
Anastasia Smirnova:
Hi,
your code seems fine to me. Did you remember to add the splitLayout
to your UI as well? Do you see any errors in your server or browser console?
I added splitLayout
before adding Comnbobox.
No errors was found in both server & browser console.
Very odd issue.
Placing simple combobox makes process real massacre. And NO any hint why it is NOT showing
Thanx for paying attention to my problem
Anastasia6
(Anastasia Smirnova)
February 19, 2020, 9:22am
5
Unfortunately, I can’t copy-paste your code as you have custom classes there. I’ve tried to reproduce the behaviour and in the code below it seems to be working fine. How much space does grid occupy? could you share a screenshot of your view or simplify the example so I could try it locally?
Thanks in advance
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.router.Route;
@Route("splitLayoutTest")
public class SplitLayoutView extends VerticalLayout {
public SplitLayoutView(){
SplitLayout layout=new SplitLayout();
layout.setSizeFull();
add(layout);
Div primary=new Div();
primary.add(new Label("primary1"));
primary.setSizeFull();
layout.addToPrimary(primary);
layout.addToSecondary(new Label("Secondary 1"));
ComboBox<String> testBox=new ComboBox<>();
testBox.setItems("Test 1", "Test 2", "Test 3");
testBox.setValue("Test 2");
testBox.setWidthFull();
testBox.setClearButtonVisible(true);
testBox.setRequired(true);
testBox.setReadOnly(false);
testBox.setLabel("TESTBOX");
testBox.setVisible(true);
Div testBoxDiv = new Div();
testBoxDiv.setSizeFull();
testBoxDiv.add(testBox);
layout.addToSecondary(testBoxDiv);
}
}
Alexey178
(Alexey B)
February 19, 2020, 10:41am
6
Here is class without any outer inclusions.
package ie.realli.web.adminpanel.views.searchhero;
import com.vaadin.flow.component.AbstractField;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.spring.annotation.SpringComponent;
@Route(value = "TestView")
@PageTitle("TestView")
@SpringComponent
public class TestView extends VerticalLayout {
private Grid<TestRow> grid;
//Editor fields
private TextField title = new TextField();
private TextArea description = new TextArea();
private ComboBox<String> testBox = new ComboBox<>();
private Button cancelBtn = new Button("Cancel");
private Button saveBtn = new Button("Save");
private Button newBtn = new Button("New");
private Button deleteBtn = new Button("Delete");
private Binder<TestRow> binder;
public TestView() {
setId("test-view");
// Configure Grid
grid = new Grid<>();
grid.addThemeVariants(GridVariant.LUMO_NO_BORDER);
grid.setHeightFull();
grid.addColumn(TestRow::getId).setHeader("ID").setWidth("10%");
grid.addColumn(TestRow::getTitle).setHeader("Title");
grid.addColumn(TestRow::getDescription).setHeader("Description");
//when a row is selected or deselected, populate form
grid.asSingleSelect().addValueChangeListener(event -> populateForm(event.getValue()));
// the grid valueChangeEvent will clear the form too
cancelBtn.addClickListener(e -> grid.asSingleSelect().clear());
saveBtn.addClickListener(e -> {
saveBtnClick();
});
newBtn.addClickListener(e -> {
newBtnClick();
});
// county.setDataProvider(this.countyService::fetch, this.countyService::count);
// county.setItems(this.countyService.fetch("", 0, Integer.MAX_VALUE));
// listing.setDataProvider(this.listingService::fetch, this.listingService::count);
// Configure Form
binder = new Binder<>(TestRow.class);
// Bind fields. This where you'd define e.g. validation rules
binder.bindInstanceFields(this);
SplitLayout splitLayout = new SplitLayout();
splitLayout.setSizeFull();
createGridLayout(splitLayout);
// createEditorLayout(splitLayout);
add(splitLayout);
testBox.setItems("Test 1", "Test 2", "Test 3");
testBox.setValue("Test 2");
testBox.setWidthFull();
testBox.setClearButtonVisible(true);
testBox.setRequired(true);
testBox.setReadOnly(false);
testBox.setLabel("TESTBOX");
testBox.setVisible(true);
Div testBoxDiv = new Div();
testBoxDiv.setSizeFull();
testBoxDiv.add(testBox);
splitLayout.addToSecondary(testBoxDiv);
}
private void createEditorLayout(SplitLayout splitLayout) {
Div editorDiv = new Div();
editorDiv.setId("editor-layout");
FormLayout formLayout = new FormLayout();
addFormItem(editorDiv, formLayout, title, "Title");
addFormItem(editorDiv, formLayout, description, "Description");
// addFormItem(editorDiv, formLayout, testBox, "TB");
// addFormItem(editorDiv, formLayout, listing, "Listing");
// addFormItem(editorDiv, formLayout, county, "County");
createButtonLayout(editorDiv);
splitLayout.addToSecondary(editorDiv);
}
private void createButtonLayout(Div editorDiv) {
HorizontalLayout buttonLayout = new HorizontalLayout();
buttonLayout.setId("button-layout");
buttonLayout.setWidthFull();
buttonLayout.setSpacing(true);
cancelBtn.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
saveBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
newBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
deleteBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
buttonLayout.add(cancelBtn, saveBtn, newBtn, deleteBtn);
editorDiv.add(buttonLayout);
}
private void createGridLayout(SplitLayout splitLayout) {
Div wrapper = new Div();
wrapper.setId("wrapper");
wrapper.setWidthFull();
splitLayout.addToPrimary(wrapper);
wrapper.add(grid);
}
private void addFormItem(Div wrapper, FormLayout formLayout,
AbstractField field, String fieldName) {
formLayout.addFormItem(field, fieldName);
wrapper.add(formLayout);
field.getElement().getClassList().add("full-width");
}
private void updateGrid() {
grid.setItems();
}
private void populateForm(TestRow value) {
// Value can be null as well, that clears the form
binder.readBean(value);
}
private void newBtnClick() {
}
private void saveBtnClick() {
updateGrid();
}
class TestRow {
String id;
String title;
String description;
public TestRow(String id, String title, String description) {
this.id = id;
this.title = title;
this.description = description;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}
}
Alexey178
(Alexey B)
February 19, 2020, 10:47am
7
Here is screenshot which shows no combobox.
Alexey178
(Alexey B)
February 19, 2020, 11:36am
8
Actually what I did is:
Opened starter link: https://vaadin.com/start/latest
Checked SpringBoot and then clicked on Customize App link below form
In left pane changed from Pro Dashboard to MasterDetail
Clicked on download App.
Tried to insert ComboBox into right pane where Editor controls placed.
Result - combobox NOT displayed
Alexey178
(Alexey B)
February 19, 2020, 11:44am
9
Btw I tried to use code you provided - same result - combobox not shown.
Alexey178
(Alexey B)
February 20, 2020, 8:43am
10
Looks like I found source of problem.
When I opened page with Starter Project configuration - in Right pane it says:
In your IDE, run or debug the main method in Application.java.
Alternatively, you can run the Maven goal mvn spring-boot:run.
So what I did is always run project from my IDE using just it’s Run button. But when u add new components project must be re-build in order UI components to be compiled!!!
So: NEVER RUN USING IDE (Unless you know what and why you do). Use spring-boot:run !!!
I would suggest mention this on vaadin site Starter Project page.