Examples with IronList com.vaadin.flow.component.ironlist.IronList used on opensource projects

Example 6 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListView method createPeopleListWithDataProviderAndComponentRenderer.

private void createPeopleListWithDataProviderAndComponentRenderer() {
    /* IronList that uses the component above */
    IronList<Person> list = new IronList<>();
    list.setHeight("400px");
    list.getStyle().set("border", "1px solid lightgray");
    DataProvider<Person, ?> dataProvider = DataProvider.ofCollection(createListOfPeople());
    list.setDataProvider(dataProvider);
    list.setGridLayout(true);
    // Uses the constructor of the PersonCard for each item in the list
    list.setRenderer(new ComponentRenderer<>(PersonCard::new));
    // For a smooth scrolling experience use a placeholder item
    Person placeholder = new Person();
    placeholder.setFirstName("-----");
    list.setPlaceholderItem(placeholder);
    NativeButton switchEnabled = new NativeButton("Switch enabled state", event -> list.setEnabled(!list.isEnabled()));
    list.setId("list-of-people-with-dataprovider-and-component-renderer");
    switchEnabled.setId("switch-enabled-people-list");
    addCard("Using components", "List of people with DataProvider and ComponentRenderer", new Label("List of people with grid layout"), list, switchEnabled);
}

Example 7 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListView method createDisabledStringsList.

private void createDisabledStringsList() {
    IronList<String> list = new IronList<>();
    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='remove' style='color:red'>X</button></div>" + "<div>").withProperty("name", ValueProvider.identity()).withEventHandler("remove", 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");
    addCard("Using templates", "Using disabled list with templates", new Label("Rank up/down your favorite Lord of the Rings characters"), list, removalResult, switchEnabled);
}

Example 8 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListView method createRankedListWithEventHandling.

private void createRankedListWithEventHandling() {
    IronList<String> list = new IronList<>();
    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");
    addCard("Using templates", "Using events with templates", new Label("Rank up/down your favorite Lord of the Rings characters"), list, new NativeButton("Reset", evt -> {
        items.clear();
        items.addAll(getLordOfTheRingsCharacters());
        list.getDataCommunicator().reset();
    }));
}

Example 9 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListTestPage method createListWithComponentRendererWithBeansAndPlaceholder.

private void createListWithComponentRendererWithBeansAndPlaceholder() {
    IronList<Person> list = new IronList<>();
    list.setHeight("100px");
    List<Person> people = createPeople(100);
    list.setRenderer(new ComponentRenderer<Label, Person>(person -> {
        Label label = new Label(person.getName());
        label.addClassName("component-rendered");
        return label;
    }));
    list.setItems(people);
    list.setId("component-renderer-with-beans");
    Person placeholder = new Person();
    placeholder.setName("the-placeholder");
    list.setPlaceholderItem(placeholder);
    add(list);
}

Example 10 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListTestPage method createTemplateWithEventHandlers.

private void createTemplateWithEventHandlers() {
    IronList<String> list = new IronList<>();
    list.setHeight("100px");
    Label message = new Label();
    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);
}