How to find npm module name for Add-on Starter Web-Component from component

Flow
1

I’m using Vaadin 14 and am trying to create a vaadin api to a component from webcomponents.org. I picked https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating.
The install instruction on the webcomponents.org page says

bower install --save l2t-paper-rating

The Addon-on Starter for Flow (https://vaadin.com/start/lts/component) takes a NPM module name.
I tried to enter

l2t-paper-rating

and the github url to the component, since I saw a webinar “Webinar: How to create components for Vaadin 10?” where they did exactly that (at 24:26), which is

https://github.com/Link2Twenty/l2t-paper-rating

But the textfields validator excpects: Must be of type @vaadin/vaadin-radio-button@^1.2.3

I’m trying to create a component like https://vaadin.com/directory/component/paper-rating that works with vaadin 14.
The linked one doesn’t work with 14, I think because of the @HtmlImport it uses.

2

To find npm packages you can go to npmjs.com

unfortunately the component l2t-paper-rating has not been updated to polymer3 which is required for vaadin14.
there is an old ticket about it: https://github.com/Link2Twenty/l2t-paper-rating/issues/3

you have different solution like converting to polymer3 the component or use another component.

3

Thanks for the response.

I don’t seem to be able to get any of the rating-stars’ish components from the vaadin component directory to run. With the one mentioned above I felt like I was getting close though.

I am open for recommendations :wink:

I initially wanted to use https://vaadin.com/directory/component/ratingstars but didn’t find a way to draw the component.

HorizontalLayout layout = new HorizontalLayout();
RatingStars ratingStars = new RatingStars();
layout.add(ratingStars);    <- Static code analyses shows error here

gives

java: no suitable method found for add(org.vaadin.teemu.ratingstars.RatingStars)
    method com.vaadin.flow.component.HasComponents.add(com.vaadin.flow.component.Component...) is not applicable
      (varargs mismatch; org.vaadin.teemu.ratingstars.RatingStars cannot be converted to com.vaadin.flow.component.Component)
    method com.vaadin.flow.component.HasComponents.add(java.lang.String) is not applicable
      (argument mismatch; org.vaadin.teemu.ratingstars.RatingStars cannot be converted to java.lang.String)

RatingStars is an AbstractField

The java-doc to AbstractField says

An abstract implementation of a field, or a {@code Component} allowing user
input. Implements {@link HasValue} to represent the input value. Examples of
typical field components include text fields, date pickers, and check boxes.
4

The other add-on you tried is not working with Vaadin 14 (it’s working for Vaadin 8).

Unfortunately there is no star rating Vaadin component.

You can use this javascript component: https://www.npmjs.com/package/@manufosela/stars-rating

And try to integrate in a Vaadin application.

Here is an simple integration.


@Tag("stars-rating")
@NpmPackage(value = "@manufosela/stars-rating", version = "3.3.3")
@JsModule("@manufosela/stars-rating")
public class StarsRating extends Component {

    private static final PropertyDescriptor<Integer, Integer> ratingProperty = PropertyDescriptors.propertyWithDefault("rating", 0);
    private static final PropertyDescriptor<Integer, Integer> numstarsProperty = PropertyDescriptors.propertyWithDefault("numstars", 0);
    private static final PropertyDescriptor<Boolean, Boolean> manualProperty = PropertyDescriptors.propertyWithDefault("manual", false);

    public void setRating(Integer rating) {
        ratingProperty.set(this, rating);
    }

    public Integer getRating() {
        return ratingProperty.get(this);
    }

    public void setNumstars(Integer numstars) {
        numstarsProperty.set(this, numstars);
    }

    public Integer getNumstars() {
        return numstarsProperty.get(this);
    }

    public void setManual(boolean manual) {
        manualProperty.set(this, manual);
    }

    public boolean isManual() {
        return manualProperty.get(this);
    }
}

And how to use it:

StarsRating starsRating1 = new StarsRating();
starsRating1.setRating(2);
starsRating1.setNumstars(5);
starsRating1.setManual(true);
StarsRating starsRating2 = new StarsRating();
starsRating2.setNumstars(5);
add(starsRating1, starsRating2);

And here is the official documentation if you want to update it: https://vaadin.com/docs/v14/flow/web-components/creating-java-api-for-a-web-component.html

5

Thank you, this was so helpful.

To be able to just import components with @NpmPackage and @JsModule without having to fiddle with JavaScript Dependencies and their dependencies in maven / gradle feels like such a blessing and great feature.