use of com.vaadin.flow.data.renderer.TemplateRenderer in project flow-components by vaadin.
the class VirtualListViewPage method createRankedListWithEventHandling.
private void createRankedListWithEventHandling() {
VirtualList<String> list = new VirtualList<>();
list.setHeight("400px");
list.getStyle().set("border", "1px solid lightgray");
List<String> items = getLordOfTheRingsCharacters();
list.setItems(items);
/*
* The name of the event handlers defined at 'on-click' are used inside
* the 'withEventHandler' calls.
*/
list.setRenderer(TemplateRenderer.<String>of("<div style='display:flex; justify-content:space-between; padding:10px;'>" + "<div style='flex-grow:1'>#[[item.rank]]: [[item.name]]</div>" + "<div><button on-click='up' hidden='[[item.upHidden]]'>↑</button>" + "<button on-click='down' hidden='[[item.downHidden]]'>↓</button>" + "<button on-click='remove' style='color:red'>X</button></div>" + "<div>").withProperty("name", ValueProvider.identity()).withProperty("rank", item -> items.indexOf(item) + 1).withProperty("upHidden", item -> items.indexOf(item) == 0).withProperty("downHidden", item -> items.indexOf(item) == items.size() - 1).withEventHandler("up", item -> {
int previousRank = items.indexOf(item);
if (previousRank == 0) {
return;
}
String previousItem = items.set(previousRank - 1, item);
items.set(previousRank, previousItem);
list.getDataCommunicator().reset();
}).withEventHandler("down", item -> {
int previousRank = items.indexOf(item);
if (previousRank == items.size() - 1) {
return;
}
String previousItem = items.set(previousRank + 1, item);
items.set(previousRank, previousItem);
list.getDataCommunicator().reset();
}).withEventHandler("remove", item -> {
items.remove(item);
list.getDataCommunicator().reset();
}));
list.setId("using-events-with-templates");
add(new Div(new Text("Rank up/down your favorite Lord of the Rings characters")), list, new NativeButton("Reset", evt -> {
items.clear();
items.addAll(getLordOfTheRingsCharacters());
list.getDataCommunicator().reset();
}));
}
use of com.vaadin.flow.data.renderer.TemplateRenderer in project flow-components by vaadin.
the class VirtualListViewPage method createDisabledStringsList.
private void createDisabledStringsList() {
VirtualList<String> list = new VirtualList<>();
list.setHeight("400px");
list.getStyle().set("border", "1px solid lightgray");
Div removalResult = new Div();
removalResult.setId("disabled-removal-result");
DataProvider<String, ?> dataProvider = DataProvider.fromCallbacks(query -> queryStringsFromDatabase(query), query -> countStringsFromDatabase(query));
list.setDataProvider(dataProvider);
// Disable the list so that scrolling still works but events are not
// handled
list.setEnabled(false);
/*
* The name of the event handlers defined at 'on-click' are used inside
* the 'withEventHandler' calls.
*/
list.setRenderer(TemplateRenderer.<String>of("<div style='display:flex; justify-content:space-between; padding:10px;'>" + "<div style='flex-grow:1'>[[item.name]]</div>" + "<div><button on-click='removeItem' style='color:red'>X</button></div>" + "<div>").withProperty("name", ValueProvider.identity()).withEventHandler("removeItem", item -> {
removalResult.setText(item);
}));
NativeButton switchEnabled = new NativeButton("Switch enabled state", event -> list.setEnabled(!list.isEnabled()));
list.setId("disabled-list-with-templates");
switchEnabled.setId("switch-enabled-state-string-list");
add(new Div(new Text("Rank up/down your favorite Lord of the Rings characters")), list, removalResult, switchEnabled);
}
use of com.vaadin.flow.data.renderer.TemplateRenderer in project flow-components by vaadin.
the class VirtualListPage method createTemplateFromRendererWithPeople.
private void createTemplateFromRendererWithPeople() {
VirtualList<Person> list = new VirtualList<>();
list.setHeight("100px");
List<Person> people = createPeople(3);
DataProvider<Person, ?> dataProvider = DataProvider.ofCollection(people);
list.setDataProvider(dataProvider);
list.setRenderer(TemplateRenderer.<Person>of("[[item.name]] - [[item.age]] - [[item.user]]").withProperty("name", Person::getName).withProperty("age", Person::getAge).withProperty("user", person -> person.getName().toLowerCase().replace(" ", "_")));
NativeButton update = new NativeButton("Update item 1", evt -> {
Person item = people.get(0);
item.setName(item.getName() + " Updated");
list.getDataProvider().refreshItem(item);
});
list.setId("template-renderer-with-people");
update.setId("template-renderer-with-people-update-item");
add(list, update);
}
use of com.vaadin.flow.data.renderer.TemplateRenderer in project flow-components by vaadin.
the class VirtualListPage method createTemplateWithEventHandlers.
private void createTemplateWithEventHandlers() {
VirtualList<String> list = new VirtualList<>();
list.setHeight("100px");
Div message = new Div();
List<String> items = new ArrayList<>(Arrays.asList("Clickable item 1", "Clickable item 2", "Clickable item 3"));
list.setRenderer(TemplateRenderer.<String>of("<div on-click='remove' id='template-events-item-[[index]]'>[[item.label]]</div>").withProperty("label", ValueProvider.identity()).withEventHandler("remove", item -> {
items.remove(item);
list.getDataCommunicator().reset();
message.setText(item + " removed");
}));
list.setItems(items);
list.setId("template-events");
message.setId("template-events-message");
add(list, message);
}
use of com.vaadin.flow.data.renderer.TemplateRenderer in project flow-components by vaadin.
the class ComboBoxDemoPage method createComboBoxUsingTemplateRenderer.
private void createComboBoxUsingTemplateRenderer() {
Div message = createMessageDiv("template-selection-message");
ComboBox<Song> comboBox = new ComboBox<>();
List<Song> listOfSongs = createListOfSongs();
/*
* Providing a custom item filter allows filtering based on all of the
* rendered properties:
*/
ItemFilter<Song> filter = (song, filterString) -> song.getName().toLowerCase().contains(filterString.toLowerCase()) || song.getArtist().toLowerCase().contains(filterString.toLowerCase());
comboBox.setItems(filter, listOfSongs);
comboBox.setItemLabelGenerator(Song::getName);
comboBox.setRenderer(TemplateRenderer.<Song>of("<div>[[item.song]]<br><small>[[item.artist]]</small></div>").withProperty("song", Song::getName).withProperty("artist", Song::getArtist));
comboBox.addValueChangeListener(event -> {
if (event.getSource().isEmpty()) {
message.setText("No artist selected");
} else if (event.getOldValue() == null) {
message.setText("Selected artist: " + event.getValue().getArtist());
} else {
message.setText("Selected artist: " + event.getValue().getArtist() + "\nThe old selection was: " + event.getOldValue().getArtist());
}
});
comboBox.getStyle().set(ElementConstants.STYLE_WIDTH, WIDTH_STRING);
comboBox.setId("template-selection-box");
add(new Div(new H2("Using templates"), new H2("Rendering items using TemplateRenderer"), comboBox, message));
}
Aggregations