Search in sources :

Example 6 with TemplateRenderer

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]]'>&uarr;</button>" + "<button on-click='down' hidden='[[item.downHidden]]'>&darr;</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();
    }));
}
Also used : ComponentRenderer(com.vaadin.flow.data.renderer.ComponentRenderer) Arrays(java.util.Arrays) Image(com.vaadin.flow.component.html.Image) ValueProvider(com.vaadin.flow.function.ValueProvider) HorizontalLayout(com.vaadin.flow.component.orderedlayout.HorizontalLayout) Div(com.vaadin.flow.component.html.Div) NativeButton(com.vaadin.flow.component.html.NativeButton) Random(java.util.Random) Supplier(java.util.function.Supplier) ArrayList(java.util.ArrayList) Route(com.vaadin.flow.router.Route) SecureRandom(java.security.SecureRandom) HashSet(java.util.HashSet) Faker(com.github.javafaker.Faker) DataProvider(com.vaadin.flow.data.provider.DataProvider) TemplateRenderer(com.vaadin.flow.data.renderer.TemplateRenderer) Text(com.vaadin.flow.component.Text) Query(com.vaadin.flow.data.provider.Query) VerticalLayout(com.vaadin.flow.component.orderedlayout.VerticalLayout) Set(java.util.Set) Serializable(java.io.Serializable) List(java.util.List) Stream(java.util.stream.Stream) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList) Collections(java.util.Collections) Div(com.vaadin.flow.component.html.Div) NativeButton(com.vaadin.flow.component.html.NativeButton) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList) Text(com.vaadin.flow.component.Text)

Example 7 with TemplateRenderer

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);
}
Also used : Div(com.vaadin.flow.component.html.Div) ComponentRenderer(com.vaadin.flow.data.renderer.ComponentRenderer) Arrays(java.util.Arrays) Image(com.vaadin.flow.component.html.Image) ValueProvider(com.vaadin.flow.function.ValueProvider) HorizontalLayout(com.vaadin.flow.component.orderedlayout.HorizontalLayout) Div(com.vaadin.flow.component.html.Div) NativeButton(com.vaadin.flow.component.html.NativeButton) Random(java.util.Random) Supplier(java.util.function.Supplier) ArrayList(java.util.ArrayList) Route(com.vaadin.flow.router.Route) SecureRandom(java.security.SecureRandom) HashSet(java.util.HashSet) Faker(com.github.javafaker.Faker) DataProvider(com.vaadin.flow.data.provider.DataProvider) TemplateRenderer(com.vaadin.flow.data.renderer.TemplateRenderer) Text(com.vaadin.flow.component.Text) Query(com.vaadin.flow.data.provider.Query) VerticalLayout(com.vaadin.flow.component.orderedlayout.VerticalLayout) Set(java.util.Set) Serializable(java.io.Serializable) List(java.util.List) Stream(java.util.stream.Stream) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList) Collections(java.util.Collections) NativeButton(com.vaadin.flow.component.html.NativeButton) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList) Text(com.vaadin.flow.component.Text)

Example 8 with TemplateRenderer

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);
}
Also used : IntStream(java.util.stream.IntStream) Text(com.vaadin.flow.component.Text) LocalDateRenderer(com.vaadin.flow.data.renderer.LocalDateRenderer) ComponentRenderer(com.vaadin.flow.data.renderer.ComponentRenderer) Arrays(java.util.Arrays) Query(com.vaadin.flow.data.provider.Query) ValueProvider(com.vaadin.flow.function.ValueProvider) LocalDateTime(java.time.LocalDateTime) Div(com.vaadin.flow.component.html.Div) NativeButton(com.vaadin.flow.component.html.NativeButton) Collectors(java.util.stream.Collectors) ArrayList(java.util.ArrayList) Route(com.vaadin.flow.router.Route) NumberRenderer(com.vaadin.flow.data.renderer.NumberRenderer) LocalDateTimeRenderer(com.vaadin.flow.data.renderer.LocalDateTimeRenderer) List(java.util.List) NativeButtonRenderer(com.vaadin.flow.data.renderer.NativeButtonRenderer) Locale(java.util.Locale) DataProvider(com.vaadin.flow.data.provider.DataProvider) TemplateRenderer(com.vaadin.flow.data.renderer.TemplateRenderer) LocalDate(java.time.LocalDate) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList) HasComponents(com.vaadin.flow.component.HasComponents) Renderer(com.vaadin.flow.data.renderer.Renderer) NativeButton(com.vaadin.flow.component.html.NativeButton) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList)

Example 9 with TemplateRenderer

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);
}
Also used : Div(com.vaadin.flow.component.html.Div) IntStream(java.util.stream.IntStream) Text(com.vaadin.flow.component.Text) LocalDateRenderer(com.vaadin.flow.data.renderer.LocalDateRenderer) ComponentRenderer(com.vaadin.flow.data.renderer.ComponentRenderer) Arrays(java.util.Arrays) Query(com.vaadin.flow.data.provider.Query) ValueProvider(com.vaadin.flow.function.ValueProvider) LocalDateTime(java.time.LocalDateTime) Div(com.vaadin.flow.component.html.Div) NativeButton(com.vaadin.flow.component.html.NativeButton) Collectors(java.util.stream.Collectors) ArrayList(java.util.ArrayList) Route(com.vaadin.flow.router.Route) NumberRenderer(com.vaadin.flow.data.renderer.NumberRenderer) LocalDateTimeRenderer(com.vaadin.flow.data.renderer.LocalDateTimeRenderer) List(java.util.List) NativeButtonRenderer(com.vaadin.flow.data.renderer.NativeButtonRenderer) Locale(java.util.Locale) DataProvider(com.vaadin.flow.data.provider.DataProvider) TemplateRenderer(com.vaadin.flow.data.renderer.TemplateRenderer) LocalDate(java.time.LocalDate) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList) HasComponents(com.vaadin.flow.component.HasComponents) Renderer(com.vaadin.flow.data.renderer.Renderer) VirtualList(com.vaadin.flow.component.virtuallist.VirtualList) ArrayList(java.util.ArrayList)

Example 10 with TemplateRenderer

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));
}
Also used : Div(com.vaadin.flow.component.html.Div) IntStream(java.util.stream.IntStream) ItemFilter(com.vaadin.flow.component.combobox.ComboBox.ItemFilter) ComponentRenderer(com.vaadin.flow.data.renderer.ComponentRenderer) VerticalLayout(com.vaadin.flow.component.orderedlayout.VerticalLayout) Div(com.vaadin.flow.component.html.Div) Label(com.vaadin.flow.component.html.Label) H2(com.vaadin.flow.component.html.H2) ComboBox(com.vaadin.flow.component.combobox.ComboBox) Collectors(java.util.stream.Collectors) Route(com.vaadin.flow.router.Route) ArrayList(java.util.ArrayList) List(java.util.List) Faker(com.github.javafaker.Faker) TemplateRenderer(com.vaadin.flow.data.renderer.TemplateRenderer) ElementConstants(com.vaadin.flow.dom.ElementConstants) ComboBox(com.vaadin.flow.component.combobox.ComboBox) H2(com.vaadin.flow.component.html.H2)

Aggregations

TemplateRenderer (com.vaadin.flow.data.renderer.TemplateRenderer)12 ArrayList (java.util.ArrayList)12 List (java.util.List)12 Div (com.vaadin.flow.component.html.Div)11 ComponentRenderer (com.vaadin.flow.data.renderer.ComponentRenderer)11 Route (com.vaadin.flow.router.Route)11 NativeButton (com.vaadin.flow.component.html.NativeButton)10 DataProvider (com.vaadin.flow.data.provider.DataProvider)9 Query (com.vaadin.flow.data.provider.Query)9 ValueProvider (com.vaadin.flow.function.ValueProvider)9 Arrays (java.util.Arrays)9 Collectors (java.util.stream.Collectors)8 Label (com.vaadin.flow.component.html.Label)6 Serializable (java.io.Serializable)6 Collections (java.util.Collections)6 IntStream (java.util.stream.IntStream)6 Faker (com.github.javafaker.Faker)5 HasComponents (com.vaadin.flow.component.HasComponents)5 VerticalLayout (com.vaadin.flow.component.orderedlayout.VerticalLayout)5 Renderer (com.vaadin.flow.data.renderer.Renderer)5