Package com.vaadin.flow.component

Class WebComponentExporter<C extends Component>

  • Type Parameters:
    C - type of the component to export
    All Implemented Interfaces:
    Serializable
    public abstract class WebComponentExporter<C extends Component>
extends Object
implements Serializable
    Exports a Component as a web component.

    By extending this class you can export a server side Component with a given tag name so that it can be included in any web page as <tag-name>. You can add properties/attributes to the element, which are synchronized with the server and you can fire events from the server, which are available as custom events in the browser.

    The tag name (must contain at least one dash and be unique on the target web page) is provided through the super constructor. Note that the exporter tag is not related to the tag used by the Component being exported and they cannot be the same.

    The component class to exported is determined by the parameter given to WebComponentExporter when extending it, e.g. extends WebComponentExporter<MyComponent>.

    If you want to customize the Component instance after it has been created, you should override configureInstance(WebComponent, Component) which is called for each created instance.

    Example of exporting MyComponent to be used as <my-component name="something">: 

     public class Exporter extends WebComponentExporter<MyComponent>() {
     public Exporter() {
         super("my-component");
         addProperty("name", "John Doe").onChange(MyComponent::setName);
     }
     protected void configureInstance(WebComponent<MyComponent> webComponent, MyComponent component) {
         // Configuration for the component instance goes here
     }
 }
    Since:
    2.0
    Author:
    Vaadin Ltd.
    See Also:
    WebComponentExporterFactory, Serialized Form

    • Constructor Detail

      • WebComponentExporter

        protected WebComponentExporter​(String tag)
        Creates a new WebComponentExporter instance and configures the tag name of the web component created based on this exporter.

        This constructor is not meant to be overridden unless the exporter can be extended. Rather, create a non-args constructor and call this constructor from it.

        Parameters:
        tag - tag name of the web component created by the exporter, cannot be null

    • Method Detail

      • addProperty

        public final PropertyConfiguration<C,​Integer> addProperty​(String name,
                                                                int defaultValue)
        Add an Integer property to the exported web component identified by name.
        Parameters:
        name - name of the property. While all formats are allowed, names in camelCase will be converted to dash-separated form, when property update events are generated, using form "property-name-changed", if the property is called "propertyName"
        defaultValue - default value of property.
        Returns:
        fluent PropertyConfiguration for configuring the property

      • addProperty

        public final PropertyConfiguration<C,​Double> addProperty​(String name,
                                                               double defaultValue)
        Add an Double property to the exported web component identified by name.
        Parameters:
        name - name of the property. While all formats are allowed, names in camelCase will be converted to dash-separated form, when property update events are generated, using form "property-name-changed", if the property is called "propertyName"
        defaultValue - default value of property.
        Returns:
        fluent PropertyConfiguration for configuring the property

      • addProperty

        public final PropertyConfiguration<C,​String> addProperty​(String name,
                                                               String defaultValue)
        Add an String property to the exported web component identified by name.
        Parameters:
        name - name of the property. While all formats are allowed, names in camelCase will be converted to dash-separated form, when property update events are generated, using form "property-name-changed", if the property is called "propertyName"
        defaultValue - default value of property.
        Returns:
        fluent PropertyConfiguration for configuring the property

      • addProperty

        public final PropertyConfiguration<C,​Boolean> addProperty​(String name,
                                                                boolean defaultValue)
        Add an Boolean property to the exported web component identified by name.
        Parameters:
        name - name of the property. While all formats are allowed, names in camelCase will be converted to dash-separated form, when property update events are generated, using form "property-name-changed", if the property is called "propertyName"
        defaultValue - default value of property.
        Returns:
        fluent PropertyConfiguration for configuring the property

      • addProperty

        public final PropertyConfiguration<C,​elemental.json.JsonValue> addProperty​(String name,
                                                                                 elemental.json.JsonValue defaultValue)
        Add an JsonValue property to the exported web component identified by name.
        Parameters:
        name - name of the property. While all formats are allowed, names in camelCase will be converted to dash-separated form, when property update events are generated, using form "property-name-changed", if the property is called "propertyName"
        defaultValue - default value of property.
        Returns:
        fluent PropertyConfiguration for configuring the property

      • configureInstance

        protected abstract void configureInstance​(WebComponent<C> webComponent,
                                          C component)
        If custom initialization for the created Component instance is needed, it can be done here. It is also possible to configure custom communication between the component instance and client-side web component using the WebComponent instance. The webComponent and component are in 1-to-1 relation.

        Note that it's incorrect to call any addProperty method within configureInstance(WebComponent, Component) method. All properties have to be configured inside the exporter's constructor.

        Parameters:
        webComponent - instance representing the client-side web component instance matching the component
        component - instance of the exported web component

      • getTag

        public final String getTag()
        The tag associated with the exported component.
        Returns:
        the tag

      • getComponentClass

        protected Class<C> getComponentClass()
        The concrete component class object. By default creates an instance of the actual type parameter.
        Returns:
        component class