Building web apps in Java with Vaadin 8 (full)

Updated tutorial here: • Spring Boot Web App Tu...
This video will give you a quick introduction and hands on code example to get you started with building web apps using Vaadin.
You'll learn about the component and data binding model used in Vaadin and put these to use in building a full stack Spring Boot single page web app that uses JPA and and in-memory H2 database.
You don't need any prior Vaadin knowledge, you'll learn everything you need to get started in the video.
Source code for the example can be found on GitHub: github.com/vaadin-marcus/spri...

[@n1gr082]

Omg. What a great framework! And great presentations! Congrats!

[@marcushellberg]

Thanks Rafael! I'm glad you liked it :)

[@yashkevich]

Hello from Russia! Thank you for this tutorial! Very much helped at the beginning of dating!!!

[@adamdyderski94]

Great video!

[@Gnuoy_TicilpxE]

Very nice video. Very useful if you're just starting out.

[@marcushellberg13]

Thanks! This video is aimed at people who are new to Vaadin. There are a bunch more videos in the Vaadin 8 playlist that go into more detail on the new features in Vaadin 8 if you are a current Vaadin user.

[@sebastianmatusiak6559]

thanks for the video

[@alexdavibe]

Super, thanx :)

[@runcloudscripts]

I have a question - binder implemented here would call add Todo on change of done or text. Suppose I'm adding long text in the text area, exactly when binder update the db? Is it with each change in text or after the pre-defined interval after last change done?

[@jambub2506]

great!

[@juliencommerenc764]

Great tutorial (appart from some versions compatibility issues). It's just a shame that you skipped over the SQL part... especially since your screen doesn't show the whole code at that moment ! :)

[@cesaramadori9637]

I have follwed the code as you do on the video and the checkbox didnt work to select the todos for delete them( it almost all works less this ). When i go to the repository i realize that is not the code i had wrote. The change listener wasn´t implemented on the video. Thanks

[@kasimgul]

That is right! People who follow this tutorial should implement a click listener on the checkbox to update done status in DB before they implement the "delete completed" button click listener. Let me add some code here for new beginners. In TodoItemLayout class, add this code block to the bottom of the constructor. done.addValueChangeListener(event -> { boolean value = event.getValue(); todo.setDone(value); repository.save(todo); }); And you need to modify the constructor of this class like this. private final TodoRepository repository; public TodoItemLayout(Todo todo, TodoRepository repository) { this.repository = repository; ..... Because this is not a component annotated class, Spring will not automaticly add TodoRepository class into the application context at startup. You need to do it yourself. The easiest way to do that is that you add TodoRepository into TodoItemLayout constructor as the second argument and bind it to a field variable in that class.

[@JeevanSunkersett]

Great video and good explanation. I tried it out in eclipse but there seems to be a syntax error @ 13:57 root.addComponent(new Label(text: "My Portfolio")); //13:57 - what is that "text:" ? thanks

[@marcushellberg13]

Hey. That's IntellJ showing the parameter name, that's not part of the Java syntax. So you should just write root.addComponent(new Label("My Portfolio)); IntelliJ just added the "text:" part there to show that the string is for the parameter "text" on Label. Hope that clarifies things.

[@ztrain10289]

can we maybe get an update on this tutorial as it appears some of the methods are now deprecated?

[@RC-qf5ty]

If you edit an already added todo, how does it get saved? Great video btw!

[@marcushellberg13]

Sorry, looks like I forgot to show that. What I did was add a listener for todo changes and then save those: github.com/vaadin-marcus/spring-boot-todo/blob/master/src/main/java/com/example/TodoList.java#L42

[@Pismice]

hello im having an issue with the Todo class, the @Entity is underlined in red with the following error message: The entity has no primary key attribute defined. I wrote exaclty the same function as same as you. any idea where that could come from pls ?

[@nugibassemand4ever]

Nice easy introduction, how does he create a local variable like that at ~ 13:15?

[@TheVilkaz]

In Intellij under windows, the shortcut ist STRG + ALT + V You can check them under "right mousclick to menu -> refactor -> Extract -> Variable

[@huh_wtf]

2:03 I see what you did there! xDxD

[@juliencommerenc764]

I know, right ! :D

[@TarabUTK]

Hello ... Excellent video. One Question, when developing, I like to see the borders of my layouts. how do I add layout borders?. Again, thank you for a great video. I am sold on Vaadin.

[@marcushellberg13]

Adding borders is done in CSS. Check out our docs for an in-depth explanation: vaadin.com/docs/v8/framework/themes/themes-overview.html

[@runcloudscripts]

I have a feedback. Vaadin framework looks slow in rendering UI. I checked most of the demo on the website. It takes a lot of time to load. Open anything, simplest page even taking time. I am pretty sure it's not interacting with any backend and working with dummy data only. I also tried to register for Vaadin.com but looks like registration form also not working - Getting Authentication failed error though getting tick after clicking on reCaptcha. I need to register if want to install plugins. Get it fix.

[@VibhavChaddha]

I had used 'table' in my code but with 8.0 and above versions it is incompatible, so how to switch to 'grid'. And in your source code, I was not able to find the 'grid' implementation. Actually, the issue with my code is I was using Vaadin 7.4.0 (with spring and Mongo), but as I have already mentioned, I want to switch to the latest version, but with so many features that are depreciated, I am finding it quite hard. Some help and guidance will be really good for me, and I am only a week old in Vaadin and about 2 months old in Spring-Mongo, so not that much experienced too. And by the way, the video was really good. Thanks.

[@marcushellberg13]

There's a good list of changes in Vaadin 8 here: vaadin.com/framework/whatsnew. The easiest way to migrate is with the maven target vaadin:upgrade8. That'll get you on 8 using the legacy package for some APIs like Table and Container. From there, you can migrate piece by piece as you see fit. The biggest differences will be in data binding, so switching over to the new simpler POJO based system.

[@MyNiceguy22]

(UPDATE: use GenerationType.IDENTITY instead of GenerationType.AUTO on ur Todo) I get the following H2 exception using SpringBoot 2.0.1 RELEASE: Caused by: org.h2.jdbc.JdbcSQLException: Unique index or primary key violation: "PRIMARY KEY ON PUBLIC.TODO(ID)"; SQL statement: insert into todo (done, text, id) values (?, ?, ?) [23505-197] To me Primary key violation suggests that the ID is not getting generated properly... But idk why this is?... any help?

[@hermit597]

So how would you configure, let's say, PostgreSQL to be used with Spring Boot JPA? In the properties file?

[@marcushellberg13]

Enrique Villarreal - yes, that's right. Swap the H2 dependency in the pom to Postgres, then configure in the properties file. Something along these lines: dzone.com/articles/configuring-spring-boot-for-postgresql

[@TarabUTK]

Hello I am going through the video and I bypassed H2 altogether. I use MySql instead. You put something like this in your properties file # =============================== # = DATA SOURCE # =============================== # Set here configurations for the database connection # Connection url for the database "netgloo_blog" spring.datasource.url = jdbc:mysql://localhost:3306/todo?useSSL=false # Username and password spring.datasource.username = todouser spring.datasource.password = todouser1234## # Keep the connection alive if idle for a long time (needed in production) spring.datasource.testWhileIdle = true spring.datasource.validationQuery = SELECT 1 # =============================== # = JPA / HIBERNATE # =============================== # Use spring.jpa.properties.* for Hibernate native properties (the prefix is # stripped before adding them to the entity manager). # Show or not log for each sql query spring.jpa.show-sql = true # Hibernate ddl auto (create, create-drop, update): with "update" the database # schema will be automatically updated accordingly to java entities found in # the project spring.jpa.hibernate.ddl-auto = update # Naming strategy spring.jpa.hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy # Allows Hibernate to generate SQL optimized for a particular DBMS spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect and to initiate, instead of doing straight SQL (I could have) ... I added this. @PostConstruct void init(){ repo.deleteAll(); repo.save(new Todo(1,"Prepare Presentation", true)); repo.save(new Todo(2,"Procastration", true)); repo.save(new Todo(3,"Presentation", true)); repo.save(new Todo(4,"Celebration", true)); setTodos(repo.findAll()); } works like a charm so far.

[@Themayor1]

can you use vaadin with firebase in a web app?

[@amahdy]

Check this out: github.com/Artur-/vaadin-on-fire

[@AhmetMurati]

AJAX is published in March 1999, while first version of Vaadin in 2002 so which is older?

[@marcushellberg13]

XMLHttpRequest was indeed shipped originally in 1999, but only accessible through ActiveX on Explorer. It took a few years to get implemented in other browsers and a few more before it was available widely enough to be usable in production en.wikipedia.org/wiki/XMLHttpRequest. So, technically, the idea of AJAX is older than Vaadin, but when we got first started it was not really a feasible option yet.

[@mohamedsougrati3550]

i've tried grid.setDataProvider( (sortOrder, offset, limit) -> service.getAll(offset, limit).stream(), () -> service.count() ); but the grid doesn't fetch all data and somewhere in a grid data are duplicated. (vaadin-spring-tomcat-h2)

[@marcushellberg13]

I'm guessing that your offset/limit does not match what your backend is returning. Check vaadin.com/docs/-/part/framework/datamodel/datamodel-providers.html#datamodel.dataproviders.lazy and debug/print out the offsets and limits done by the data provider to make sure the service is returning the correct data.

[@denismugane2765]

Great video,how can u do this using designer

[@AhmedMkhinini]

can we have the exact same video with the new version. a lot of the methods are deprecated :(

[@md.kawsherhamidmazumder8245]

The method addComponents(Component...) in the type AbstractComponentContainer is not applicable for the arguments (TextField, Button)/???? what is it

[@alexdavibe]

Maybe check your imports

[@agustinernestocardeilhacba1765]

Marcus: Thanks for this video !; really helpful... Would like to know the following 2 things (really quick answers are appreciated): 1] Can I emit events from a VueJS component and catch them with a @DomEvent object ?. 2] Can I avoid, under Vaadin 24, the VueJS 3 syntax check by Vite ?.If yes, how ?. Thanks a bunch...

[@christianlucke7219]

Hi! First of all, thank you for that nice video! I noticed while testing that the CheckBox "done" is not connected to changing the databaseentry for that todo. I enabled it by adding a ValueChangeListener like this: private void setTodos(List all) { removeAllComponents(); all.forEach(todo -> { TodoItemLayout todoItem = new TodoItemLayout(todo); todoItem.getDone().addValueChangeListener(valueChangeEvent -> { editTodo(todo); }); addComponent(todoItem); }); } public void editTodo(Todo todo){ todoRepository.save(todo); update(); } Is that ok so far? Its working, but i am not sure about the conventions for adding stuff like that.

[@marcushellberg13]

Good job! Take a look at this perhaps slightly easier approach I did here by adding a custom change listener: github.com/vaadin-marcus/spring-boot-todo/blob/master/src/main/java/com/example/TodoLayout.java#L39 github.com/vaadin-marcus/spring-boot-todo/blob/master/src/main/java/com/example/TodoList.java#L42

[@MoosesValley]

@SpringUI will not resolve. manually typed in the import: import com.vaadin.spring.annotation.SpringUI; and still no good. Exited Sprint Tool Suite, and releaded project. Still no good. Deleted @SpringUI and the import and tried to recreate ==> No good. Whoops .... minutes in and the wheels are falling off. Assume this is due to differences in recent Vaadin / Spring Boot Tool Suite .... any ideas how to fix these issues ??

[@jadsalameh2931]

@Alejandro Duarte thank you sir

[@anthonywu9153]

When should I use @PostConstruct over the constructor?

[@anthonywu9153]

Nice and clear! Thanks.

[@mattitahvonen170]

Except if you use constructor injection (which you often should) and all dependencies are wired in the constructor. Then there is pretty much no reason to use a separate post construct method.

[@bharathn1059]

Does it need to be compiled to javascript ?

[@gorankuk]

Can you refresh the demo, since it is not working with version 10?

[@marcushellberg13]

Sorry, I haven't had time to do that. You can find a tutorial+video that covers similar topics here vaadin.com/tutorials/reactive-chat-app

[@Pismice]

hello, for me the setContent() method doesnt work, neither the addComponent() one i had to switch it to add(). i guess that there is another method to replace setContent() as well but i didnt find it. if someone could help me :)

[@marcushellberg13]

Hi there. This video is using Vaadin 8, whereas it sounds like you are using Vaadin 10+ which has a slightly different API. I need to update the tutorial when I get a chance. In the meantime, check out the official tutorial on vaadin.com/docs/v11/flow/introduction/tutorial-get-started-first-part.html

[@Pismice]

Marcus Hellberg ty and btw if someone is wondering the equivalent method is add(); :D

[@joyshah9143]

Why Vaadin uses scss rather than they should create something similar to android xml for the same.

[@Inquisitivekushal]

any link for integrating vaadin 8 with spring security

[@marcushellberg13]

I don't remember that we would have anything official, but I found this on Google, maybe it could be helpful? github.com/basakpie/vaadin8-spring-security-sample

[@zahidrahman2427]

You can build an application in 30 minutes if you know the APIs and the Frameworks before hand . Did it take 30 minutes to learn the APIs and frameworks ?

[@vaadinofficial]

Learning the APIs will always take time. The intent of the video is to show what the development process looks and feels like with Vaadin.

[@zahidrahman2427]

How long did it take for you be fluent in Vaadin so you can develop an app within 30 minutes ? Then we can say it takes 3 days + 30 minutes to build your first screen . But guess what you can avoid that. Ugly HTML CSS JavaScript code which is the important thing

[@vaadinofficial]

@@zahidrahman2427 If you are proficient in Java, you should be able to pick up Vaadin very quickly. I can recommend completing the free Fundamentals and Professional courses on our website. After completing those, you should be able to build an app at that speed vaadin.com/learn/training/v14

[@ElmshornBoy]

Many things are outdated. I cannot start with this tutorial and have to rework everything to Vaadin 14.

[@vaadinofficial]

You are right. Still a good video for those using Vaadin 8. Now, if you are using 14, there's something even better ;) kzbin.info/aero/PLcRrh9hGNallPtT2VbUAsrWqvkQ-XE22h Or if you prefer the text version (web or PDF): vaadin.com/learn/tutorials/modern-web-apps-with-spring-boot-and-vaadin

[@ShaunDashjian]

At 22:58 you created a new "Data" file. I don't see that option in my New menu. How could you show that?

[@ShaunDashjian]

I was able to create a template. I'm still curious how you had the file populate with inserts right away. Did you have those in the template somehow?

[@marcushellberg13]

That was just a snippet I had saved in IntelliJ to save some time typing. Just add a file named `data.sql` and add any SQL you want to run on application startup in it.

[@ShaunDashjian]

Super. Thanks, Marcus.

[@anujchaturvedi6296]

How do you set a plus icon on Vaadin 14?

[@vaadinofficial]

You can find the docs here vaadin.com/components/vaadin-icons/java-examples

[@PabloPazosGutierrez]

is this only for web or for desktop too?

[@vaadinofficial]

Vaadin is only for building web apps. Newer Vaadin versions like the current LTS 14 are PWA, which means you can also install them on your desktop with supported browsers.

[@hamzix6599]

+vaadinofficial any one have an idea how to make a spring boot application with vaadin spring security and mysql ?

[@amahdy]

Maybe you can start from here: github.com/peholmst/SpringSecurityDemo Also I found good other content like those: www.google.com/search?q=vaadin+spring+secruity

[@juliencommerenc764]

Is there a problem with later versions of Spring and Vaadin ? I've tried, but this tutorial doesn't seem to work at all with more recent versions... For instance, com.vaadin.ui.UI is not recognized, neither is @SpringUI...

[@akid5208]

use vaadin 8 not 10

[@sahilparashar8984]

try to modify your pom.xml file. same as the example pom.xml file given above by the programmer. then you will be able to do this

[@TomaVelev]

If you need more start up database vaadin ui code you could check out my tool tomavelev.com/GeneratorApp/

[@marangelomar]

pinoy?

[@amenostalgique]

I hate Vaadin with all my soul. You should never use it if you love yourself.

[@gamemak0r]

why

[@soumitripattnaik]

Why??

[@alexdavibe]

You wanna write html js css by hand lol

[@CalifornianOnEEurope]

vaadin is super messy. documentation is super poor and sloppy. it is hardly a useful and ordely framework. I used vaadin 6 an 7....vaadin 10...total chaos

[@MaxiStandUp]

1992 presentation and explanation didactic. Why is it that difficult to teach some other way? Too long, too tough....bdá.