Vaadin+ // Theme Variants, Composites, Custom Components & Templates

General
1

GitHub

Demo
https://v-herd.eu/jonte-vaadinplus

Always interested in hearing what people need. Feel free to request stuff here or by creating an issue in the GitHub repo.

24 Likes
2

This is covering 98% of the mostly used/required/requested components. Thanks for putting all the components with a demo and the github link. My weekend will be to explore each component code you’ve in git and understand how you’ve used/created here. Thanks again for this great work and helping others.

3

This is great stuff. I wish I could like it more than once :heart:

2 Likes
4

That’s very cool and I’m sure I can use many of those in my new modernization project starting in summer.

You can expect my contributions coming soon :wink:

6 Likes
5

Anything to achieve like this ? Showing NavItem as icons ?

image
image39Ă—874 3.25 KB

6

This is really great! I can say just wow! Will be this published as Vaadin addon?

1 Like
7

Do you know if it is possible to use the SideBar in another project ? I can’t do it, I don’t know why it doesn’t render.

I am not able to use the SideBar in another project, I don’t know why I can’t render it.

image
image1567Ă—719 25.1 KB

8

Rubén, you shouldn’t need anything special to get it running; it should work out of the box. Which version of Flow are you using? If you inspect your page, is the sidebar at least present in the DOM?

9

what I have tried is to copy all the css and java code of this SideBar to another project with no result, it doesn’t render.

10

Is it present in the DOM?

11

No :face_with_spiral_eyes: is not present The Sidebar depends on more classes, not just that one.

@anezthes I will upload my example to a branch on github and let you know thanks.

Wow, dammnn, it’s works

image
image1908Ă—978 189 KB

12

@anezthes That SideBar if that works possibly had not compiled well the frontend or whatever lmao…

Is it possible a component inside the content that is like a SideNav ? like

image
image1372Ă—865 102 KB

What I see is that almost always inside the content, can another navigation menu go inside, is it possible ?

Thank you…

It would be very interesting a component like a Dialog with a Menu inside plus the navigable content.

image
image1385Ă—905 50.5 KB

13

@anezthes Vaadin+ can build with Vaadin flow 23.5 ?

14

Not sure. If anything’s broken then it’s probably due to missing utility classes.

15

Why is this not reachable/discoverable from vaadin official pages? I only found this by pure luck.

16

It’s not an official Vaadin product. I’ll be changing the name soon to avoid confusion.

17

Really nice stuff.

I was looking for a way to have a component specific loading indicator.
I have some GridPro stuff with potentially a lot of rows, I’m testing it with 10000 rows.
Basically it works and performs OK considering it all runs locally on my development pc.
It works even when using Flow components in the columns and the standard Vaadin loading indicator runs along the top.

Nevertheless it would be nice if the specific grid somehow had a local indicator that runs during the load/display cycle, simply because that’s where users are focusing.

I’m unsure if it is beyond your scope, if so just say.

References:

18

You can do that already with 2-3 lines of CSS and using @Push.

  • add classname once loading is starting
  • Do your slow DB query within push
  • Once DB is finished publish the result and remove loading classname
1 Like
19

Interesting, I didn’t think of that. I will se if I can adapt to a @Push configuration, not sure how much I have to change.

20

Sure above that progress indicator is the one Vaadin uses by default, but you are blocking the main thread, you can offer a better user experience, without doing that…

When you see that bar for a long time, it is an indication of a long blocking operation… better avoid it.

The push annotation is easy… I usually place it where the @SpringBootApplication annotation goes

You can test it, show a ProgressBar at the beginning of the load too, and then hide it when the operation is finished.

Clearly you should at least use a Thread, with CompletableFuture for example, and the access method to push the result to the UI.

Where do you want to do this ? in this repo GitHub - MikaelFiil/vaadin-gridpro-generator ?