Package com.vaadin.flow.data.renderer

Class LitRenderer<SOURCE>

    • Method Detail

      • of

        public static <SOURCE> LitRenderer<SOURCE> of​(String templateExpression)
        Creates a new LitRenderer based on the provided template expression. The expression accepts content that is allowed inside JS template literals, and works with the Lit data binding syntax.

        The template expression has access to:

        Examples: 

         
 // Prints the `name` property of a person
 LitRenderer.<Person> of("<div>Name: ${item.name}</div>")
          .withProperty("name", Person::getName);

 // Prints the index of the item inside a repeating list
 LitRenderer.of("${index}");
        Type Parameters:
        SOURCE - the type of the input object used inside the template
        Parameters:
        templateExpression - the template expression used to render items, not null
        Returns:
        an initialized LitRenderer
        See Also:
        withProperty(String, ValueProvider), withFunction(String, SerializableConsumer)

      • render

        @Deprecated
public Rendering<SOURCE> render​(Element container,
                                DataKeyMapper<SOURCE> keyMapper,
                                Element contentTemplate)
        Deprecated.
        LitRenderer doesn't support <template> elements. Don't use.
        Description copied from class: Renderer
        Handles the rendering of the model objects by using the given <template> element in the given container.

        Subclasses of Renderer usually override this method to provide additional features.

        Overrides:
        render in class Renderer<SOURCE>
        Parameters:
        container - the element in which the template will be attached to, not null
        keyMapper - mapper used internally to fetch items by key and to provide keys for given items. It is required when either event handlers or DataGenerator are supported
        contentTemplate - the <template> element to be used for rendering in the container, not null
        Returns:
        the context of the rendering, that can be used by the components to provide extra customization

      • render

        public Rendering<SOURCE> render​(Element container,
                                DataKeyMapper<SOURCE> keyMapper)
        Sets up rendering of model objects inside a given Element container element. The model objects are rendered using the Lit template literal provided when creating this LitRenderer instance, and the Vaadin-default JS renderer function name.
        Overrides:
        render in class Renderer<SOURCE>
        Parameters:
        container - the DOM element that supports setting a renderer function
        keyMapper - mapper used internally to fetch items by key and to provide keys for given items. It is required when either functions or DataGenerator are supported
        Returns:
        the context of the rendering, that can be used by the components to provide extra customization

      • render

        public Rendering<SOURCE> render​(Element container,
                                DataKeyMapper<SOURCE> keyMapper,
                                String rendererName)
        Sets up rendering of model objects inside a given Element container element. The model objects are rendered using the Lit template literal provided when creating this LitRenderer instance, and a given String rendererName JS renderer function.
        Parameters:
        container - the DOM element that supports setting a renderer function
        keyMapper - mapper used internally to fetch items by key and to provide keys for given items. It is required when either functions or DataGenerator are supported
        rendererName - name of the renderer function the container element accepts
        Returns:
        the context of the rendering, that can be used by the components to provide extra customization

      • withProperty

        public LitRenderer<SOURCE> withProperty​(String property,
                                        ValueProvider<SOURCE,​?> provider)
        Makes a property available to the template expression. Each property is referenced inside the template by using the ${item.property} syntax.

        Examples: 

         
 // Regular property
 LitRenderer.<Person> of("<div>Name: ${item.name}</div>")
          .withProperty("name", Person::getName);

 // Property that uses a bean. Note that in this case the entire "Address" object will be sent to the template.
 // Note that even properties of the bean which are not used in the template are sent to the client, so use
 // this feature with caution.
 LitRenderer.<Person> of("<span>Street: ${item.address.street}</span>")
          .withProperty("address", Person::getAddress);

 // In this case only the street field inside the Address object is sent
 LitRenderer.<Person> of("<span>Street: ${item.street}</span>")
          .withProperty("street", person -> person.getAddress().getStreet());
        Any types supported by the JsonSerializer are valid types for the LitRenderer.
        Parameters:
        property - the name of the property used inside the template expression, not null
        provider - a ValueProvider that provides the actual value for the property, not null
        Returns:
        this instance for method chaining

      • withEventHandler

        public LitRenderer<SOURCE> withEventHandler​(String eventHandlerName,
                                            SerializableConsumer<SOURCE> handler)
        Deprecated.
        Use withFunction(String, SerializableConsumer) instead.
        Adds an event handler that can be called from within the template expression.

        Examples: 

         
 // Standard event
 LitRenderer.of("<button @click=${handleClick}>Click me</button>")
          .withEventHandler("handleClick", object -> doSomething());
        The name of the event handler used in the template expression should be the name used at the eventHandlerName parameter. This name must be a valid JavaScript function name.
        Parameters:
        eventHandlerName - the name of the event handler used inside the template expression, must be alphanumeric and not null, must not be one of the JavaScript reserved words (https://www.w3schools.com/js/js_reserved.asp)
        handler - the handler executed when the event handler is called, not null
        Returns:
        this instance for method chaining
        See Also:
        https://lit.dev/docs/templates/expressions/#event-listener-expressions

      • withFunction

        public LitRenderer<SOURCE> withFunction​(String functionName,
                                        SerializableConsumer<SOURCE> handler)
        Adds a function that can be called from within the template expression.

        Examples: 

         
 // Standard event
 LitRenderer.of("<button @click=${handleClick}>Click me</button>")
          .withFunction("handleClick", object -> doSomething());
        The name of the function used in the template expression should be the name used at the functionName parameter. This name must be a valid JavaScript function name.
        Parameters:
        functionName - the name of the function used inside the template expression, must be alphanumeric and not null, must not be one of the JavaScript reserved words (https://www.w3schools.com/js/js_reserved.asp)
        handler - the handler executed when the function is called, not null
        Returns:
        this instance for method chaining
        See Also:
        https://lit.dev/docs/templates/expressions/#event-listener-expressions

      • withFunction

        public LitRenderer<SOURCE> withFunction​(String functionName,
                                        SerializableBiConsumer<SOURCE,​elemental.json.JsonArray> handler)
        Adds a function that can be called from within the template expression. The function accepts arguments that can be consumed by the given handler.

        Examples: 

         
 // Standard event
 LitRenderer.of("<button @click=${handleClick}>Click me</button>")
          .withFunction("handleClick", item -> doSomething());

 // Function invocation with arguments
 LitRenderer.of("<input @keypress=${(e) => handleKeyPress(e.key)}>")
          .withFunction("handleKeyPress", (item, args) -> {
              System.out.println("Pressed key: " + args.getString(0));
          });
        The name of the function used in the template expression should be the name used at the functionName parameter. This name must be a valid Javascript function name.
        Parameters:
        functionName - the name of the function used inside the template expression, must be alphanumeric and not null, must not be one of the JavaScript reserved words (https://www.w3schools.com/js/js_reserved.asp)
        handler - the handler executed when the function is called, not null
        Returns:
        this instance for method chaining
        See Also:
        https://lit.dev/docs/templates/expressions/#event-listener-expressions