Why is my vaadin button not displaying correctly?

Question

Pretty much the title ,i've looked everywhere for an answer but i either missed something in setup, spring did, gradle f'ed up or i cant read.

I think my page should be a nice blue button or something (i know i deleted grid), i followed https://www.baeldung.com/spring-boot-vaadin but instead im getting this, here's my build.gradle and the relevant code:

build.gradle:

plugins {
    id 'org.jetbrains.kotlin.plugin.jpa' version '1.3.21'
    id 'org.springframework.boot' version '2.1.3.RELEASE'
    id 'org.jetbrains.kotlin.jvm' version '1.3.21'
    id 'org.jetbrains.kotlin.plugin.spring' version '1.3.21'
    id 'com.devsoap.vaadin-flow' version '1.0'
    //id 'org.gretty' version '2.3.1'
    id 'java'
    // solves the problem with long classpath using JAR instead of classpath on command line
    id "ua.eshepelyuk.ManifestClasspath" version "1.0.0"
}

vaadin {
    version '12.0.0'
}

apply plugin: 'io.spring.dependency-management'

version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

springBoot {
    mainClassName = "com.cpsc471.TheatreManagmentApplicationKt"
}

repositories {
    mavenCentral()
    maven { url "https://maven.vaadin.com/vaadin-addons" }
    vaadin.repositories()
    // Add the pre-release repository
    vaadin.prereleases()
    // Add the snapshot repository
    vaadin.snapshots()
    // Add the addons repository
    vaadin.addons()
}

ext {
    set('vaadinVersion', '13.0.1')
}

noArg{
    annotation("MappedSuperclass")
}

dependencies { 
    implementation 'org.springframework.boot:spring-boot-starter-cache'
    implementation 'org.springframework.boot:spring-boot-starter-data-rest'
    implementation 'org.springframework.boot:spring-boot-starter-jdbc'
    implementation 'org.springframework.boot:spring-boot-starter-mail'
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-validation'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-tomcat'
    implementation "org.springframework.boot:spring-boot-starter-data-jpa"
    implementation 'com.fasterxml.jackson.module:jackson-module-kotlin'
    implementation 'com.vaadin:vaadin-spring-boot-starter:13.0.2'
    implementation 'org.jetbrains.kotlin:kotlin-reflect'
    implementation 'org.jetbrains.kotlin:kotlin-stdlib-jdk8'
    implementation 'org.springframework.retry:spring-retry' 

    implementation 'com.h2database:h2'

    implementation vaadin.bom()
    implementation vaadin.platform()
    implementation vaadin.lumoTheme()
    compile vaadin.springBoot()

    compileOnly 'org.projectlombok:lombok'

    runtimeOnly 'org.springframework.boot:spring-boot-devtools'
    runtimeOnly 'org.postgresql:postgresql'

    annotationProcessor 'org.projectlombok:lombok'

    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.springframework.security:spring-security-test'
}

dependencyManagement {
    imports {
        mavenBom "com.vaadin:vaadin-bom:${vaadinVersion}"
    }
}

compileKotlin {
    kotlinOptions {
        freeCompilerArgs = ['-Xjsr305=strict']
        jvmTarget = '1.8'
    }
}

compileTestKotlin {
    kotlinOptions {
        freeCompilerArgs = ['-Xjsr305=strict']
        jvmTarget = '1.8'
    }
}

MainView:

import com.cpsc471.model.types.User;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route(value = "test")
public class MainView extends VerticalLayout {

    private EmployeeEditor editor;
    private TextField filter;
    private Button addNewBtn;

    public MainView (EmployeeEditor editor) {
        setSizeFull();
        this.editor = editor;
        this.filter = new TextField();
        this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());

        HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
        add(actions, editor);

        filter.setPlaceholder("Filter by last name");
        filter.setValueChangeMode(ValueChangeMode.EAGER);
    }
}

Custom component:

package com.cpsc471.model;

import com.cpsc471.model.types.User;
import com.vaadin.flow.component.KeyNotifier;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.spring.annotation.SpringComponent;
import com.vaadin.flow.spring.annotation.UIScope;

import javax.swing.plaf.basic.BasicMenuUI;

@SpringComponent
@UIScope
public class EmployeeEditor extends VerticalLayout implements KeyNotifier {
    private User employee;

    private TextField firstName = new TextField("First name");
    private TextField lastName = new TextField("Last name");

    private Button save = new Button("Save", VaadinIcon.CHECK.create());
    private Button cancel = new Button("Cancel");
    private Button delete = new Button("Delete", VaadinIcon.TRASH.create());

    private HorizontalLayout actions = new HorizontalLayout(save, cancel, delete);
    private Binder<User> binder = new Binder<>(User.class);
    private BasicMenuUI.ChangeHandler changeHandler;
}

spring boot application (kotlin):

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.context.annotation .Bean
import org.springframework.context.annotation .Configuration
import org.springframework.security.config.annotation .web.builders.HttpSecurity
import org.springframework.security.config.annotation .web.configuration.EnableWebSecurity
import org.springframework.security.config.annotation .web.configuration.WebSecurityConfigurerAdapter
import org.springframework.security.core.userdetails.User
import org.springframework.security.core.userdetails.UserDetailsService
import org.springframework.security.provisioning.InMemoryUserDetailsManager
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer

import org.springframework.boot.SpringApplication
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer

@SpringBootApplication
class TheatreManagmentApplication : SpringBootServletInitializer()

fun main(args: Array<String>) {
    SpringApplication.run(TheatreManagmentApplication::class.java, *args)
}

@Configuration
@EnableWebSecurity
class WebSecurityConfig : WebSecurityConfigurerAdapter() {
    @Throws(Exception::class)
    protected override fun configure(http: HttpSecurity) {
        http
                .authorizeRequests()
                .antMatchers("/", "/home","/h2/**").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
                .logout()
                .permitAll()

        http.csrf().disable()
        http.headers().frameOptions().disable()
    }

    @Bean
    override fun userDetailsService(): UserDetailsService {
        val user = User.withDefaultPasswordEncoder()
                .username("user")
                .password("password")
                .roles("USER")
                .build()

        return InMemoryUserDetailsManager(user)
    }
}

@Configuration
class MvcConfig : WebMvcConfigurer {
    override fun addViewControllers(registry: ViewControllerRegistry) {
        registry.addViewController("/home").setViewName("home")
        registry.addViewController("/").setViewName("home")
        registry.addViewController("/hello").setViewName("hello")
        registry.addViewController("/login").setViewName("login")
    }
}

Are you sure all HTTP request are made without error? Have a look in your browser development tools whether all requests to resources (HTML, CSS, scripts) were successful response 200. I guess the Spring security configuration is not sufficient but I didn't try it out. Check [this](https://stackoverflow.com/questions/53050125). — Steffen Harbich, Apr 01 '19 at 17:24

score 0 · Answer 1 · answered Dec 18 '21 at 20:18

Judging on the screenshot attached, the client-side part seems to be not initialised at all, because vaadin-button web component is rendered as a plain text and EmployeeEditor is not rendered. I observed it for a couple of times because of frontend dependencies version mismatch. I noticed two different Vaadin versions in the attached gradle config: 12.0.0 and 13.0.1. It can be a root cause of such kind of problems. After aligning these versions, please delete node_modules and package.json from your project root and re-run the project. You can also try the Vaadin starter.

Why is my vaadin button not displaying correctly?

1 Answers1