Package com.vaadin.flow.data.renderer

Class LitRenderer<SOURCE>

java.lang.Object
com.vaadin.flow.data.renderer.Renderer<SOURCE>
com.vaadin.flow.data.renderer.LitRenderer<SOURCE>
Type Parameters:
SOURCE - the type of the model object used inside the template expression
All Implemented Interfaces:
Serializable
Direct Known Subclasses:
ComponentRenderer
@JsModule("./lit-renderer.ts") public class LitRenderer<SOURCE> extends Renderer<SOURCE>
LitRenderer is a Renderer that uses a Lit-based template literal to render given model objects in the components that support the JS renderer functions API. Mainly it's intended for use with Grid, ComboBox and VirtualList, but is not limited to these.
Since:
22.0.
Author:
Vaadin Ltd
See Also:

  • Method Details

    • 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:

    • render

      public Rendering<SOURCE> render(Element container, DataKeyMapper<SOURCE> keyMapper, String rendererName)
      Description copied from class: Renderer
      Registers a renderer function with the given name to the given container element. Creates the setup to handle rendering of individual data items as requested by the renderer function invocation.
      Specified by:
      render in class Renderer<SOURCE>
      Parameters:
      container - the element which accepts the renderer function on the client.
      keyMapper - mapper used internally to fetch items by key and to provide keys for given items.
      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

    • getTemplateExpression

      protected String getTemplateExpression()
      Returns the Lit template expression used to render items.
      Returns:
      the template expression

    • 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

    • 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:

    • 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:

    • getValueProviders

      public Map<String,ValueProvider<SOURCE,?>> getValueProviders()
      Gets the property mapped to ValueProviders in this renderer. The returned map is immutable.
      Returns:
      the mapped properties, never null