vaadin/web-components

Vaadin has a high quality component set for building mobile and desktop web applications in modern browsers

Giovanni Lovato

@heruan

I have a Glitch replicating if you want to take a look.

Kari Söderholm

@Haprog

Please share. Not sure if I will take a look (at least maybe not today) but someone else also might.

Giovanni Lovato

@heruan

Thanks! This is the Glitch: https://glitch.com/~difficult-wanderer

Basically, what I’m trying to do here is to create a custom text-field with an additional slot (label-suffix). I’m using the technique of template-injection I’ve seen in the Vaadin’s text-field elements, but I guess I’m missing something: when importing the custom element, original elements break.

Giovanni Lovato

@heruan

This is much simpler: https://glitch.com/~mewing-ragamuffin

It’s just a custom element extending TextFieldElement: the styles get lost in the original field.

Oooooh I get it now: if you load the src/vaadin-text-field.js before the styles, styles don’t get applied!

Rubber ducking on Gitter always works :slight_smile:

Leho Kraav

@lkraav

@heruan I'm fairly certain we discovered something about the specific order requirements of style loading as well with cc @chanar

Not sure where the archive of those findings and discussion are. If I find them, I'll post them later

Adexe Rivera Martín

@adexerivera

Hello, how can I access the spring security context within a Vaadin listener. In more detail, I'm using an upload component and the uploaded content should be send to a REST-service. I use a SucceededListener to get informed about a file upload. Within the method of that listener, I want to get the SecurityContext in order to get authentication information. With the listener method I have no access to the SecurityContext of the spring application. How can I get access to that context?

MemoryBuffer buffer = new MemoryBuffer();
Upload upload = new Upload(buffer);
upload.addSucceededListener(e -> {
    SecurityContext context = SecurityContextHolder.getContext();
    context.getAuthentication(); // null
});

Pekka Maanpää

@pekam

Hi @adexerivera! You might have better chance of finding an answer in the Flow channel: https://gitter.im/vaadin/flow
This channel focuses on frontend development with our HTML/JavaScript components.

sdyalor

@sdyalor

spreadsheet?

I need support

Diego Cardoso

@DiegoCardoso

Hi, @sdyalor. How may we help you?

Danuta97

@Danuta97

hi, how can i apply a decimal format on a text field to make this accept just numbers and display with given format e.g # ###.## ? Thanks! p.s I`m using vaadin 14 :D

Diego Cardoso

@DiegoCardoso

Hi, @Danuta97. There's no support for it currently. There are two open tickets regarding what you are asking: vaadin/vaadin-text-field#407 and vaadin/vaadin-text-field#408

Tomi Virkki

@tomivirkki

Note that there is also the following add-on https://vaadin.com/directory/component/textfield-formatter

sdyalor

@sdyalor

How can i use vaadin spreadsheet with my student membership

Diego Cardoso

@DiegoCardoso

For Spreadsheet and other V8- pro components, you should go to https://vaadin.com/pro/licenses and download the desired license to you home folder.

Walter Laurito

@lauritowal

Hi guys! Is there actually a npm / js version of the material design theme? https://cdn.vaadin.com/vaadin-material-styles/1.2.3/demo/#1-install Or is using bower and the html files the only way to include and use the material design theme for the vaadin web components? :)

Tomi Virkki

@tomivirkki

Hi @lauritowal Looks like that documentation is quite lacking and has outdated information. The correct way to import for example the MD <vaadin-text-field> would be import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';. Note that you shouldn't mix Lumo and Material themed Vaadin components on the same page.

Walter Laurito

@lauritowal

ah alright. Thanks for the information! I'll try that out

(By the way you guys are great. Always really helpful. Keep up the great work :D)

Tomi Virkki

@tomivirkki

Thanks :)

Anders Forsell

@andersforsell

Can dark mode be used with Vaadin web components material theme ?

Diego Cardoso

@DiegoCardoso

@andersforsell yes. Take a look here https://cdn.vaadin.com/vaadin-material-styles/1.2.3/demo/colors.html#dark-palette

There's a typo on the docs. The style to include is material-color-light instead of material-light-color.

MatthiasJakob

@MatthiasJakob

Hi there! I've a small question concerning vaadin charts - scatter 3d ...

If my dataset is larger, the chart says no data ... see https://demo.vaadin.com/charts/#Basic3DScatter, do:

private void fillSeries(DataSeries higherX, DataSeries higherY,
DataSeries higherZ) {
Random random = new Random(7);
for (int i = 0; i < 5000; i++) {
double lng = random.nextDouble() 2 Math.PI;
double lat = random.nextDouble() Math.PI - Math.PI / 2;
double x = Math.cos(lat) Math.sin(lng);
double y = Math.sin(lat);
double z = Math.cos(lng) * Math.cos(lat);

        DataSeriesItem3d point = new DataSeriesItem3d(x, y, z);
        if (x > y && x > z) {
            higherX.add(point);
        } else if (y > x && y > z) {
            higherY.add(point);
        } else {
            higherZ.add(point);
        }
    }

}

5000 points boom, does not work ... any ideas? Tank you!

Guille

@alvarezguille

Hi @MatthiasJakob , I'm not sure what version of Charts you're using, but you should be able to fix that by setting turboThreshold to 0. You can do it for all the series by changing it in PlotOptionsSeries
https://vaadin.com/api/platform/14.0.10/com/vaadin/flow/component/charts/model/PlotOptionsSeries.html#setTurboThreshold-java.lang.Number-

MatthiasJakob

@MatthiasJakob

That was the problem! Thank you Guille so much !!!! Great!

Giovanni Lovato

@heruan

Hi! I’m trying to add a custom theme to Vaadin-rich-text-editor so I’ve created a theme-for module, but it does not get applied. Looking in the Chrome inspector, seems like some styles gets truncated from the <style> tag, but I’m not sure if it’s just as Chrome displays it:

Giovanni Lovato

@heruan

How can I debug to see if my theme gets applied?

Leho Kraav

@lkraav

Add a clear id attribute to your theme style tag, so you can clearly search and identify it in the browser Inspector tool

Giovanni Lovato

@heruan

Thank you @lkraav for the suggestion: what’s adding the id to the stlye tag for?

AFAIK the content of the theme module is teleported to the web component style tag, thus losing the id.

Leho Kraav

@lkraav

No, the ID stays

Giovanni Lovato

@heruan

Cool, then! I tried, but I still see the content truncated in the inspector.

Nevermind, I found it.

Leho Kraav

@lkraav

Are you using the new registerStyles() API? You should: https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript

Giovanni Lovato

@heruan

Found it, and it’s empty :frowning:

I’m not using registerStyles(), I wasn’t aware of that! Let’s look at it right now :smile:

Giovanni Lovato

@heruan

Using registerStyles it works! Thank you @lkraav for pointing me to that as I didn’t know about it. Finally it’s time to ditch all the boilerplate for custom themes in ES6 :smiley:

Tony Dark

@tonydarkOFF_twitter

Hey guys

Can anyone explain me what's wrong with the v14?

java.io.UncheckedIOException: java.nio.file.DirectoryNotEmptyException: C:\Users\SIS017\eclipse-workspace\SQLapp\sqlapp\node_modules\@polymer

Every single time I modify a starter project and run spring-boot:run I get this error

Where communities thrive

People

Repo info

Activity