Vaadin Boards

Hello

I’m working on a school project where I want to use boards and charts. I managed to add the dependencies and add the code example to my project. I can’t figure out what they use to create the “ExampleIndicator” and the “ExampleChart” from the “BoardBasic.java”. In IntelliJ they are red and the error says “Cannot resolve symbol ‘ExampleIndicator’”

Am I assuming correctly, that I have to create those classes?
If so is there some tutorial or example code?
Also what chart and indicator type is that they use with this board?

https://vaadin.com/docs/latest/components/board

Those are example content used in the demo, not something that’s part of the framework. It would be good if we could make them easier to find though.

You can find the sources of all the component demos in GitHub. Here is the ExampleIndicator file docs/src/main/java/com/vaadin/demo/component/board/ExampleIndicator.java at latest · vaadin/docs · GitHub

Thanks for noticing! I added those source files to the examples in the docs site now: https://github.com/vaadin/docs/commit/1179e8556a52fee75d7dbd93393aa6a13781ac44

@practical-rat, something to look out for and fix if you do notice some examples not including all relevant source code

Thank you. That looks promising. I will check tonight or on the weekend if I can implement it. What I also noticed is, that the ExampleChart Class is empty. How is that created? Which chart type is used for that particular one?

Right, the Java components are actually assuming that the client-side TypeScript components are loaded on the page. So you will also need them, and you should actually ensure they are imported by adding @JsModule annotations to the Java classes.

Here’s the source for example-chart: https://github.com/vaadin/docs/blob/latest/frontend/demo/component/board/example-chart.ts

And example-indicator: https://github.com/vaadin/docs/blob/latest/frontend/demo/component/board/example-indicator.ts

So I can‘t create charts with just java? Do I need to use TypeScript?

Yes, you can. Check the example code here Chart Types | Charts | Components | Vaadin Docs

Thank you Marcus :slightly_smiling_face: but for the example there is only the TypeScript?
Btw just wanted to let you know that I decided to do this project with Vaadin / Spring because of your YT video “What is Vaadin - Walkthrough”.

The page linked by Marcus contains a lot of Java examples

That’s great to hear! :slightly_smiling_face:

Here are some more Java code examples Charts for Vaadin Flow

Also, in case you didn’t notice, there’s a student pack that includes a charts license here Vaadin student pack | Vaadin

And thanks for brining to our attention that the Charts main example is missing Java code, we need to fix that. I made a ticket about it Add Java code example to Charts page · Issue #1636 · vaadin/docs · GitHub

Thanks. Yes I already applied for the license and downloaded the file. I was able to download the dependency. Still gotta work through all the info you gave me and test the code this weekend. Thanks for the great support.

Happy to help, good luck with the project!

Hi Guys
Sorry to bother you again.
I tried to get the board working although I think I didn’t install the license properly.

I’m getting an error on compilation.

It feels like the npm dependency isn’t installed because in the node_modules folder I can only see a charts folder and no board folder.
I saved the the proKey in the .vaadin folder and also tried to use the -D build parameter (btw you are missing a space in the docu there “-Dvaadin.proKey=EMAIL/KEY”)