Texfields in Starter Project Login Page not rendering

I am trying to use the Login page from the Flow / Spring starter project. I am using a multi-module architecture for my project. My problem is that I am not able to use the login page because the username field, password field and Sign in button aren’t rendering. The Sign In text is visible but doesn’t look like a button and the text fields don’t show anything at all. It looks like the vaadin components aren’t rendering at all.
All I did is copy the LoginView.java to my module, copy the login-view.html into my module src/main/webapp/frontend/src/views/login folder.
Actually, the same thing happens even with the starter project. As soon as I split the project into modules where all the vaadin dependencies are in a different module, textfields break.

Any idea?

Hi,

Sounds like the front-end resources are not loaded correctly. Depending on how you structure your application and how it is build, the templates need to be put in different places. This blog post https://vaadin.com/blog/vaadin-10-and-static-resources gives a good explanation on where the templates should be placed in different situations.

-Pontus

Hi Pontus,
Thanks for the reply. I actually followed all the directions in the blog post above. In fact, what I did is simple:

  1. Downloaded the started project Flow / Spring
  2. Imported it into my Eclipse
  3. Run it. Works fine.
  4. Created a new project called common-ui to put all my reusable classes. This project has all the Vaadin dependencies + the LoginView.java.
  5. Changed the Starter project to add my common-ui dependency and removed the LoginView.java because it’s in common-ui.
  6. The project compiles fine but text fields aren’t rendering.

More weird behaviour:

  • In Safari and Firefox the login page shows a blank page. Chrome shows the login page with the blue header and project title but no textfields as explained above.
  • Login-view.html doesn’t render in Eclipse using my configuration. I get the following error in vaadin designer:
Problem accessing /flow/441f/src/main/webapp/frontend/src/views/login/login-view.html. Reason:
    java.util.NoSuchElementException

We are in the process of migrating from Vaadin 7 to Flow and a complete rewrite of our frameworks. Is Flow stable enough to be production-ready?

Here is how the page renders and the errors I am getting with Chrome Inspector.

That does sound like the templates are not found for some reason. If you check the common-ui jar, is the frontend resources there in the right place? Unfortuntely you Chrome inspector figure is accessible to me.

There is a good blog post from today about the readyness of Vaadin 10: https://vaadin.com/blog/v8-vs-v10-two-maintained-vaadin-versions-which-one-to-choose-

There are some things to consider if you have a large application:

  • The data model is completely changed compared to 7. There are no more containers, fields have also changed a lot. Vaadin 8 provides a compatibility package, but Vaadin 10 doesn’t.
  • If you have used a lot of add-ons, they probably are not availble as is in Vaadin 10 (there might be something better but different)
  • There will later (this year) be tooling for making migration to Vaadin 10 easier

-Pontus

Hi Pontus,
Thanks for the hint. It actually helped me find out and fix the issue. You’re right about the templates. Apparently the directive <webapp.directory>src/main/webapp</webapp.directory> should be placed in the pom file of the main project. My mistake was that the directive was in the module and the static files were in another project (main project).
Problem solved now.
Cheers