Custom flow component

General
1

There is a lot of information available, but it is also kinda overwhelming. How to load resources dynamically in Vaadin

I have written a pill-buttonbar using just flow, just Java code. It requires some CSS of course, and I would like to move the whole thing into a separate jar. I think I need to use CssImport and put the css src/main/resources/META-INF/resources/frontend/…, but it ain’t working. I don’t see a request for the CSS in the browser’s network tab. And then I probably need to do something with special CSS selectors.

A simple example, which one can copy and modify, would be preferable over all the documentation. At least to get started. Is there such a thing?

2

You can see this starter : GitHub - vaadin/client-server-addon-template: Client-server Vaadin add-on template using Lit.

It contains typescript and CSS.

I think the folder is the right one.

You also have other examples here without CSS: GitHub - vaadin/addon-template: Project template for generic add-ons for Vaadin. Publish your add-on in https://vaadin.com/directory

I’m not sure what you mean by “special CSS selectors”.

3

If you just have a Java File and a corresponding CSS file it’s pretty simple:

  • Java as you like
  • Add @CssImport("./my-components/my-button.css") to your java class
  • Add my-button.css in src/main/resources/META-INF/resources/frontend/my-components
4

The src/main/resources/META-INF/resources/frontend/ is correct for JAR packaged component.
Where exactly is the CSS file and how does the @CssImport definition look like?

Also, if the JAR is used as a dependency of a Spring-based project, make sure you do not have (allowed|blocked)-packages setting in application.properties that prevents class scanning for your component.

5

And here is an example of an addon with a css imported: GitHub - jcgueriaud1/addon-starter-flow: Project template for generic add-ons for Vaadin 14. Publish your add-on in https://vaadin.com/directory

6

@knoobie That is what I tried, at least you have confirmed that it is still correct (I found a Vaadin 14 example - not sure if it was still valid). Should this also work while to component is still part of the actual project? So not in a separate jar yet?

7

If the component is in a separate jar, @CssImport is the correct way to import your CSS.
If the CSS is not found then the application won’t start.
@CssImport("./the-addonsdsd.css")

  Failed to find the following css files in the `node_modules` or `/Users/jean-christophe/Documents/cf/addon-starter-flow/src/main/frontend` directory tree:
      - ./the-addonsdsd.css
  Check that they exist or are installed. If you use a custom directory for your resource files instead of the default `frontend` folder then make sure it's correctly configured (e.g. set 'vaadin.frontend.frontend.folder' property)

If it’s inside your main module, it’s easier to use the theme and import it from the theme.
Or you can use CssImport and add it in /src/main/frontend/the-addons.css
If it’s inside you project in a different module then it’s treated like a addon.

Again if it’s not found it should throw an exception.

Maybe if you have an example it would be easier to help you to find the issue.

8

That is only used in conjuction with a separate jar :) See Christophe’s answer from above

9

Thanks for the many reactions. It is a hobby project, so no time right now, but I’ll give it a try. It sure make it more clear!

10

Okay, so in my project the SelectOnePillBar looks like this

2025-04-03 17 03 33

If I move the component to a separate jar

Then it looks like this
2025-04-03 17 02 36

It is not loading or using the CSS. But it not throwing an exception either.

Don’t roast me on names, I’m still working on it. Maybe it’ll get named SelectOneBar :man_shrugging:

11

Two things:

  • your button css selector might be problematic because it would not work as you think (especially the first and last selector) - you should group all of those e.g. with a parent selector

  • did you also add @EnableVaadin(value={“org.tbee.webstack.vdn.component”, “your.main.class.package.”}) to your Application.java where you wanna use this addon?

12

Yes, I understand that I need some more work on it to make it a full custom component. For now it worked on the screen I was using it on and I just copied it over to a component, unchanged, to reduce the chance of breaking something.

No, I did not include that EnableVaadin annotation. I have in fact never used it, and I’ve written about 5 Spring based Vaadin applications, and never needed it, some mixing Thymeleaf into Vaadin even. I added it just now, and the application starts, but refused to navigate to the view annotated with @Route(“/”) with a “Could not navigate to ‘’”. Without the annotation the application runs fine. Reading the annotation’s javadoc it is a mystery that I don’t need it.

13

Turns out @StyleSheet works.