Hello everyone,
I’m at step 3 of the tutorial for the migration of my app from vaadin 8 to 14. At the moment the v8 responds at http://localhost:8080/ATMProject/v8/ and the v14 at http://localhost:8080/ATMProject/. I’m on 14.3.5. When I load the v8 servlet all is fine but the v14 doesn’t load any of the webcomponents, the result is down here:
In the console this messages appear:
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UidlWriter.java:162) - * Creating response to client
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(UIInternals.java:879) - Fallback chunk is not available, skipping fallback dependencies load
DEBUG [default task-2]
(BootstrapHandler.java:792) - Initial UIDL: [object Object]
DEBUG [default task-2]
(BrowserLiveReloadImpl.java:77) - Class org.hotswap.agent.plugin.vaadin.VaadinIntegration not found, excluding HOTSWAP_AGENT
DEBUG [default task-2]
(BrowserLiveReloadImpl.java:77) - Class com.vaadin.flow.server.jrebel.JRebelInitializer not found, excluding JREBEL
DEBUG [default task-2]
(BrowserLiveReloadImpl.java:77) - Class com.vaadin.flow.spring.SpringServlet not found, excluding SPRING_BOOT_DEVTOOLS
DEBUG [default task-2]
(VaadinService.java:1332) - Closing inactive UI #3 in session jLbZSguQOlWNTuf0kaBCEMs-k1Af4ysvRLi2lIwm
DEBUG [default task-2]
(VaadinService.java:1316) - Removing closed UI 3
INFO [default task-2]
(VaadinServlet.java:817) - Requested resource
[/VAADIN/build/webcomponentsjs/webcomponents-loader.js] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
INFO [default task-2]
(VaadinServlet.java:817) - Requested resource
[/VAADIN/build/vaadin-bundle-a0b0667b27ca27849008.cache.js] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
DEBUG [default task-2]
(UidlWriter.java:162) - * Creating response to client
I tried to change version of vaadin 14 in the pom.xml, change webserver (TomCat 9 or Wildfly 20) and to remove node_modules folder and the .json/.js files but nothing works…
This is the LoginView class:
package eu.bToCode.application;
import java.io.Serializable;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Html;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.FlexLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
@Route("login")
public class LoginView extends FlexLayout {
private TextField username;
private PasswordField password;
private Button login;
private Button forgotPassword;
public LoginView() {
buildUI();
username.focus();
}
private void buildUI() {
addClassName("login-screen");
// login form, centered in the available part of the screen
Component loginForm = buildLoginForm();
// layout to center login form when there is sufficient screen space
// - see the theme for how this is made responsive for various screen
// sizes
VerticalLayout centeringLayout = new VerticalLayout();
centeringLayout.setMargin(false);
centeringLayout.setSpacing(false);
centeringLayout.setClassName("centering-layout");
/**
* Setting jusitfy conentent mdoe and align items to center for the verticallayout
* Also need to wrap the formlayout, as formlayout has align-self: stretch
*/
centeringLayout.add(new Div(loginForm));
centeringLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
centeringLayout.setDefaultHorizontalComponentAlignment(FlexComponent.Alignment.CENTER);
/** Or use margin:auto
* centeringLayout.add(loginForm);
* loginForm.getElement().getStyle().set("margin", "auto");
*/
// information text about logging in
Div loginInformation = buildLoginInformation();
add(centeringLayout);
add(loginInformation);
}
private Component buildLoginForm() {
FormLayout loginForm = new FormLayout();
loginForm.addClassName("login-form");
loginForm.setWidth("24em");
loginForm.addFormItem(username = new TextField(null, "admin", "admin"), "Username");
username.setWidth("15em");
loginForm.addFormItem(password = new PasswordField(), "Password");
password.setWidth("15em");
Div buttons = new Div();
buttons.setClassName("buttons");
loginForm.add(buttons);
buttons.add(login = new Button("Login"));
login.setDisableOnClick(true);
login.addClickListener(event -> {
try {
login();
} finally {
login.setEnabled(true);
}
});
login.addClickShortcut(Key.ENTER).listenOn(password).allowBrowserDefault();
loginForm.getElement()
.addEventListener("keypress", event -> login())
.setFilter("event.key == 'Enter'");
login.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_SUCCESS);
buttons.add(forgotPassword = new Button("Forgot password?"));
forgotPassword.addClickListener(e -> Notification.show("Hint: Try anything"));
forgotPassword.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
return loginForm;
}
private Div buildLoginInformation() {
Div loginInformation = new Div();
loginInformation.addClassName("login-information");
Html loginInfoText = new Html(
"<div><h1>Login Information</h1>"
+ "Log in as "admin" to have full access. Log in with any other username to have read-only access. For all users, any password is fine</div>");
loginInformation.add(loginInfoText);
return loginInformation;
}
private void login() {
if (username.getValue().equals("admin")&& password.getValue().equals("a")) {
getUI().ifPresent(ui->ui.navigate(MainApplicationV14.class));
} else {
Notification.show("Please check your username and password and try again.");
username.focus();
}
}
public interface LoginListener extends Serializable {
void loginSuccessful();
}
}