data not binding... Building a web UI for MySQL databases (in plain Java)

Literate Aspects

Please note, the Spring Boot app will not run on Jetty (after much searching, gave up on a resolution for this one)
I have five created files:
1. BasicApplication.java (auto created and did not modify)
2. Model Class to encapsulate MySQL table data
3. Backend Service Class configuring database connection in Application Properties file
4. Backend Service Class to SELECT fields
5. Vaadin UI

I run the BasicApplication.java and it displays the Vaadin UI on localhost:8080 but no data being displayed. Please, where should I begin to fix the data connectivity?

Literate Aspects

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.5.3.RELEASE)

2017-04-27 12:56:30.203  INFO 2192 --- [           main] com.dataSQL.BasicApplication             : Starting BasicApplication on work- with PID 2192 (C:\Users\work\Desktop\Basic\target\classes started by work in C:\Users\work\Desktop\Basic)
2017-04-27 12:56:30.203  INFO 2192 --- [           main] com.dataSQL.BasicApplication             : No active profile set, falling back to default profiles: default
2017-04-27 12:56:30.250  INFO 2192 --- [           main] ationConfigEmbeddedWebApplicationContext : Refreshing org.springframework.boot.context.embedded.AnnotationConfigEmbeddedWebApplicationContext@49c43f4e: startup date [Thu Apr 27 12:56:30 PDT 2017]; root of context hierarchy
2017-04-27 12:56:30.844  WARN 2192 --- [           main] o.s.c.a.ConfigurationClassPostProcessor  : Cannot enhance @Configuration bean definition 'com.vaadin.spring.VaadinConfiguration' since its singleton instance has been created too early. The typical cause is a non-static @Bean method with a BeanDefinitionRegistryPostProcessor return type: Consider declaring such methods as 'static'.
2017-04-27 12:56:31.172  INFO 2192 --- [           main] trationDelegate$BeanPostProcessorChecker : Bean 'org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration' of type [org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration$$EnhancerBySpringCGLIB$$2fc289d2] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
2017-04-27 12:56:31.500  INFO 2192 --- [           main] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat initialized with port(s): 8080 (http)
2017-04-27 12:56:31.515  INFO 2192 --- [           main] o.apache.catalina.core.StandardService   : Starting service Tomcat
2017-04-27 12:56:31.515  INFO 2192 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet Engine: Apache Tomcat/8.5.14
2017-04-27 12:56:31.625  INFO 2192 --- [ost-startStop-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2017-04-27 12:56:31.625  INFO 2192 --- [ost-startStop-1] o.s.web.context.ContextLoader            : Root WebApplicationContext: initialization completed in 1391 ms
2017-04-27 12:56:31.751  INFO 2192 --- [ost-startStop-1] c.v.s.b.i.VaadinServletConfiguration     : Registering Vaadin servlet
2017-04-27 12:56:31.751  INFO 2192 --- [ost-startStop-1] c.v.s.b.i.VaadinServletConfiguration     : Servlet will be mapped to URLs [/vaadinServlet/*, /VAADIN/*]
2017-04-27 12:56:31.767  INFO 2192 --- [ost-startStop-1] c.v.s.b.i.VaadinServletConfiguration     : Setting servlet init parameters
2017-04-27 12:56:31.767  INFO 2192 --- [ost-startStop-1] c.v.s.b.i.VaadinServletConfiguration     : Set servlet init parameter [productionMode] = [false]
2017-04-27 12:56:31.767  INFO 2192 --- [ost-startStop-1] c.v.s.b.i.VaadinServletConfiguration     : Set servlet init parameter [resourceCacheTime] = [3600]
2017-04-27 12:56:31.767  INFO 2192 --- [ost-startStop-1] c.v.s.b.i.VaadinServletConfiguration     : Set servlet init parameter [heartbeatInterval] = [300]
2017-04-27 12:56:31.767  INFO 2192 --- [ost-startStop-1] c.v.s.b.i.VaadinServletConfiguration     : Set servlet init parameter [closeIdleSessions] = [false]
2017-04-27 12:56:31.814  INFO 2192 --- [ost-startStop-1] o.s.b.w.servlet.ServletRegistrationBean  : Mapping servlet: 'dispatcherServlet' to [/]
2017-04-27 12:56:31.814  INFO 2192 --- [ost-startStop-1] o.s.b.w.servlet.ServletRegistrationBean  : Mapping servlet: 'springVaadinServlet' to [/vaadinServlet/*, /VAADIN/*]
2017-04-27 12:56:31.814  INFO 2192 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'characterEncodingFilter' to: [/*]
2017-04-27 12:56:31.814  INFO 2192 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'hiddenHttpMethodFilter' to: [/*]
2017-04-27 12:56:31.814  INFO 2192 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'httpPutFormContentFilter' to: [/*]
2017-04-27 12:56:31.814  INFO 2192 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'requestContextFilter' to: [/*]
2017-04-27 12:56:32.219  INFO 2192 --- [           main] s.w.s.m.m.a.RequestMappingHandlerAdapter : Looking for @ControllerAdvice: org.springframework.boot.context.embedded.AnnotationConfigEmbeddedWebApplicationContext@49c43f4e: startup date [Thu Apr 27 12:56:30 PDT 2017]; root of context hierarchy
2017-04-27 12:56:32.283  INFO 2192 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/error]}" onto public org.springframework.http.ResponseEntity<java.util.Map<java.lang.String, java.lang.Object>> org.springframework.boot.autoconfigure.web.BasicErrorController.error(javax.servlet.http.HttpServletRequest)
2017-04-27 12:56:32.283  INFO 2192 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/error],produces=[text/html]}" onto public org.springframework.web.servlet.ModelAndView org.springframework.boot.autoconfigure.web.BasicErrorController.errorHtml(javax.servlet.http.HttpServletRequest,javax.servlet.http.HttpServletResponse)
2017-04-27 12:56:32.314  INFO 2192 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2017-04-27 12:56:32.314  INFO 2192 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2017-04-27 12:56:32.361  INFO 2192 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped URL path [/**/favicon.ico] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2017-04-27 12:56:32.392  INFO 2192 --- [           main] c.v.s.b.i.VaadinServletConfiguration     : Checking the application context for Vaadin UI mappings
2017-04-27 12:56:32.392  INFO 2192 --- [           main] c.v.s.b.i.VaadinServletConfiguration     : Registering Vaadin servlet of type [com.vaadin.spring.server.SpringVaadinServlet]
2017-04-27 12:56:32.408  INFO 2192 --- [           main] c.v.s.b.i.VaadinServletConfiguration     : Forwarding @SpringUI URLs from {/=org.springframework.web.servlet.mvc.ServletForwardingController@2bcec6a6}
2017-04-27 12:56:32.408  INFO 2192 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Root mapping to handler of type [class org.springframework.web.servlet.mvc.ServletForwardingController]
2017-04-27 12:56:32.595  INFO 2192 --- [           main] o.s.j.e.a.AnnotationMBeanExporter        : Registering beans for JMX exposure on startup
2017-04-27 12:56:32.642  INFO 2192 --- [           main] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080 (http)
2017-04-27 12:56:32.659  INFO 2192 --- [           main] com.dataSQL.BasicApplication             : Started BasicApplication in 2.69 seconds (JVM running for 3.01)
2017-04-27 12:56:40.202  INFO 2192 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring FrameworkServlet 'dispatcherServlet'
2017-04-27 12:56:40.202  INFO 2192 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization started
2017-04-27 12:56:40.216  INFO 2192 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization completed in 14 ms
2017-04-27 12:56:40.234  WARN 2192 --- [nio-8080-exec-1] c.v.s.DefaultDeploymentConfiguration     : 
=================================================================
Vaadin is running in DEBUG MODE.
Add productionMode=true to web.xml to disable debug features.
To show debug window, add ?debug to your application URL.
=================================================================
2017-04-27 12:56:40.263  INFO 2192 --- [nio-8080-exec-1] c.vaadin.spring.server.SpringUIProvider  : Checking the application context for Vaadin UIs
2017-04-27 12:56:40.265  INFO 2192 --- [nio-8080-exec-1] c.vaadin.spring.server.SpringUIProvider  : Found Vaadin UI [com.dataSQL.InventoryUI]
2017-04-27 12:56:40.634  INFO 2192 --- [nio-8080-exec-3] c.v.spring.navigator.SpringViewProvider  : Looking up SpringViews
2017-04-27 12:56:40.635  WARN 2192 --- [nio-8080-exec-3] c.v.spring.navigator.SpringViewProvider  : No SpringViews found
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
Thu Apr 27 12:56:40 PDT 2017 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitly disable SSL by setting useSSL=false, or set useSSL=true and provide truststore for server certificate verification.
2017-04-27 12:57:00.787  INFO 2192 --- [nio-8080-exec-8] c.v.spring.navigator.SpringViewProvider  : Looking up SpringViews
2017-04-27 12:57:00.789  WARN 2192 --- [nio-8080-exec-8] c.v.spring.navigator.SpringViewProvider  : No SpringViews found

Literate Aspects

BasicApplication.java

package com.dataSQL;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BasicApplication {

    public static void main(String[] args) {
        SpringApplication.run(BasicApplication.class, args);
    }
}

Inventory.java

package com.dataSQL;

public class Inventory {
    
    private int inventory_id;
    private String id, short_desc, long_desc, department, category, price;
    
    // constructor
    public Inventory() {
        
    }

    public Inventory(int inventory_id, String id, String short_desc, String long_desc, String department, String category,
            String price) {

    }

    public int getInventory_id() {
        return inventory_id;
    }

    public void setInventory_id(Integer inventory_id) {
        this.inventory_id = inventory_id;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getShort_desc() {
        return short_desc;
    }

    public void setShort_desc(String short_desc) {
        this.short_desc = short_desc;
    }

    public String getLong_desc() {
        return long_desc;
    }

    public void setLong_desc(String long_desc) {
        this.long_desc = long_desc;
    }

    public String getDepartment() {
        return department;
    }

    public void setDepartment(String department) {
        this.department = department;
    }

    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }
    
    @Override
    public String toString() {
        return inventory_id+"-"+id+"-"+short_desc+"-"+long_desc+"-"+department+"-"+category+"-"+price;
    }
    
}

application.properties

spring.datasource.url=jdbc:mysql://localhost/pharmacy
spring.datasource.username=root
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

basicapp.png (84.7 kB)

database.png (72.1 kB)

Literate Aspects

InventoryService.java

package com.dataSQL;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;

import java.util.List;

@Component
public class InventoryService {
    
    @Autowired
    private JdbcTemplate jdbcTemplate;
    
    public List<Inventory> findAll() {
        return jdbcTemplate.query(
                "SELECT inventory_id, id, short_desc, long_desc, department, category, price FROM inventory",
                    (rs, rownum) -> new Inventory(rs.getInt("inventory_id"),
                    rs.getString("id"),
                    rs.getString("short_desc"),
                    rs.getString("long_desc"),                            
                    rs.getString("department"),                                    
                    rs.getString("category"),                                    
                    rs.getString("price")));
    }
    
    public void update(Inventory inventorymodel) {
        jdbcTemplate.update(
                "UPDATE inventorymodel SET id=?, short_desc=?, long_desc=?, department=?, category=?, price=? WHERE inventory_id=?",
                inventorymodel.getId(), inventorymodel.getShort_desc(), inventorymodel.getLong_desc(), inventorymodel.getDepartment(), inventorymodel.getCategory(), inventorymodel.getPrice(), inventorymodel.getInventory_id());
        
        
    }

}

InventoryUI.java

package com.dataSQL;

import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.*;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@SpringUI
public class InventoryUI extends UI {
    
    
    @Autowired
    private InventoryService service;

    private Inventory inventory;
    private Binder<Inventory> binder = new Binder<>(Inventory.class);

    private Grid<Inventory> grid = new Grid<Inventory>(Inventory.class);
    private TextField id = new TextField("Internal ID");
    private TextField short_desc = new TextField("Short Desc");
    private TextField long_desc = new TextField("Long Desc");
    private TextField department = new TextField("Department");
    private TextField category = new TextField("Category");
    private TextField price = new TextField("Price");      
    private Button save = new Button("Save", e -> saveInventory());

    @Override
    protected void init(VaadinRequest request) {
        updateGrid();
        grid.setColumns("id", "short_desc", "long_desc", "department", "category", "price");
        grid.addSelectionListener(e -> updateForm());

        binder.bindInstanceFields(this);

        VerticalLayout layout = new VerticalLayout(grid, id, short_desc, long_desc, department, category, price, save);
        setContent(layout);
    }

    private void updateGrid() {
        List<Inventory> inventorys = service.findAll();
        grid.setItems(inventorys);
        setFormVisible(false);
    }

    private void updateForm() {
        if (grid.asSingleSelect().isEmpty()) {
            setFormVisible(false);
        } else {
            inventory = grid.asSingleSelect().getValue();
            binder.setBean(inventory);
            setFormVisible(true);
        }
    }

    private void setFormVisible(boolean visible) {
        id.setVisible(visible);
        short_desc.setVisible(visible);
        long_desc.setVisible(visible);
        department.setVisible(visible);
        category.setVisible(visible);
        price.setVisible(visible);        
        save.setVisible(visible);
    }

    private void saveInventory() {
        service.update(inventory);
        updateGrid();
    }
}

Alejandro Duarte

I would start by double-checking that InventoryService::findAll returns data.

Literate Aspects

Hello Alejandro,

I think I am most impressed more by your contributions to Vaadin. Yesterday, I came across your blog http://www.alejandrodu.com/
And I notiece the initial content, whereas it seems very simple:
1. JDBC Create data connectivity
2. Create Model
3. Create Service Class with findall

Then simply a Vaadin UI with the following:

PersonService service = new PersonService();
Grid<Person> grid = new Grid<>(Person.class);

Is it as simple as the above?

Literate Aspects

Alejandro Duarte: I would start by double-checking that InventoryService::findAll returns data.

Hello Alejandro,

The error was in the constructor in the Model, was able to run it as a jar using the local MySQL database.

Alejandro Duarte

Hi! Good to know you solved the problem. In the Vaadin UI you are implementing, additionally to creating the grid, you have to add the items. For example: grid.setItems(service.findAll()); And yeah, that should be it :)

Literate Aspects

Alejandro Duarte: Hi! Good to know you solved the problem. In the Vaadin UI you are implementing, additionally to creating the grid, you have to add the items. For example: grid.setItems(service.findAll()); And yeah, that should be it :)

Which of these three books would you recommend to purchase first?
I want to learn how to complete a layout using Spring and Vaadin.

vaadin buy books.png (114.4 kB)

Alejandro Duarte

First of all, all of them use Vaadin 7 (current version is 8), but all of them are really good. Also, I'm the author of one of them, so I might be biased ;)

Anyway, if you want to learn the basics of Vaadin (7) so that you can later use and easily understand the official reference documentation, articles, or tutorials to develop specific requirements, Vaadin 7 UI Design by Example is a good option. It also has the advantage (depending on what you prefer, of course) of being more easy to read, less like plain reference documentation. It even has a dialog at some point between the reader, the author, and a software component!

The other books are also valuable in the sense that they include a wider technical scope. At least Vaadin 7 cookbook has some sections about basic things with Spring in one of the chapters. They might also be a bit outdated.

As an alternative way of learning, you might want to consider is the Vaadin & Spring 1: Getting started with Vaadin Spring, My first Vaadin Spring app and Vaadin & Spring 2: Spring scopes, configuration online trainings: https://vaadin.com/training

Literate Aspects

Alejandro, does your book review the creation of forms within Spring backend, if so, I shall purchase it immediately.

I am following the tutorial that uses Spring Boot, whereas there is NO separate FORM created, and the "form" fields display vertical below the grid:
https://vaadin.com/blog/-/blogs/building-a-web-ui-for-mysql-databases-in-plain-java-

protected void init(VaadinRequest request) { updateGrid(); grid.setColumns("firstName", "lastName"); grid.addSelectionListener(e -> updateForm()); binder.bindInstanceFields(this); VerticalLayout layout = new VerticalLayout(grid, firstName, lastName, save); setContent(layout); }
Whereas, there IS a separate form in the plain Java EE tutorial.

Wouldn't I need to create a separate FORM.html BEFORE I could have it placed horizontally?
As is reviewed in Tutorial: Vaadin address book declarative
https://vaadin.com/tutorial/declarative

Alejandro Duarte

dataSQL: does your book review the creation of forms within Spring backend

It doesn't include anything related to Spring.

dataSQL: Wouldn't I need to create a separate FORM.html BEFORE I could have it placed horizontally?

Just change the VerticalLayout with a HorizontalLayout and rearrange the components. I would sugest you follow the Vaadin Tutorial to gain some basic understanding about layouts and other components before continuing with your Spring+MySQL app.

Literate Aspects

Alejandro Duarte:

dataSQL: does your book review the creation of forms within Spring backend

It doesn't include anything related to Spring.

dataSQL: Wouldn't I need to create a separate FORM.html BEFORE I could have it placed horizontally?

Just change the VerticalLayout with a HorizontalLayout and rearrange the components. I would sugest you follow the Vaadin Tutorial to gain some basic understanding about layouts and other components before continuing with your Spring+MySQL app.

Excellent, shall spend the entire evening with it. Thank you!

Alejandro Duarte

That's an evening well spent ;)

Literate Aspects

Alejandro Duarte:

dataSQL: does your book review the creation of forms within Spring backend

It doesn't include anything related to Spring.

dataSQL: Wouldn't I need to create a separate FORM.html BEFORE I could have it placed horizontally?

Just change the VerticalLayout with a HorizontalLayout and rearrange the components. I would sugest you follow the Vaadin Tutorial to gain some basic understanding about layouts and other components before continuing with your Spring+MySQL app.

So I need to create a form html to be able to add to the layout?

Alejandro Duarte

You don't need to write HTML with Vaadin. Use a VerticalLayout (or FormLayout) to put all the fields you need in your form and then add the grid and the form into a HorizontalLayout:

VerticalLayout form = new VerticalLayout(firstName, lastName, save);
HorizontalLayout layout = new HorizontalLayout(grid, form);
setContent(layout);

Literate Aspects

Alejandro... you are ONE of the ones that MAKES computing and mathematics and programming what it should be...
your contributions are noticeable to those outside of Vaadin...

The layout does not display correctly... please see attached image.

The simple understanding of the variable (word being "form") grouped the items.

VerticalLayout form = new VerticalLayout(id, short_desc, long_desc, department, category, price, grid, save);
        HorizontalLayout layout = new HorizontalLayout(grid, form);            
        setContent(layout);
        


below is the the UI code:

package com.dataSQL;

import com.vaadin.annotations.Theme;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.*;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@Theme("valo")
@SpringUI
public class inventoryui extends UI {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    @Autowired
    private basicservice service;
    private basicmodel inventory;
    private Binder<basicmodel> binder = new Binder<>(basicmodel.class);
    private Grid<basicmodel> grid = new Grid<basicmodel>(basicmodel.class);
    private TextField id = new TextField("id");
    private TextField short_desc = new TextField("short_desc");
    private TextField long_desc = new TextField("long_desc");
    private TextField department = new TextField("department");
    private TextField category = new TextField("category");
    private TextField price = new TextField("price");
    private Button save = new Button("Save", e -> savebasicmodel());

    @Override
    protected void init(VaadinRequest request) {
        
        
        updateGrid();
        grid.setCaption("INVENTORY");
        grid.setSizeFull();
        grid.setColumns("id", "short_desc", "long_desc", "department", "category", "price");
        grid.addSelectionListener(e -> updateForm());

        binder.bindInstanceFields(this);
        
//        VerticalLayout layout = new VerticalLayout(id, short_desc, long_desc, department, category, price, grid, save);        

        VerticalLayout form = new VerticalLayout(id, short_desc, long_desc, department, category, price, save);
        HorizontalLayout layout = new HorizontalLayout(grid, form);            
        setContent(layout);
        
    }

    private void updateGrid() {
        List<basicmodel> inventorys = service.findAll();
        grid.setItems(inventorys);
        setFormVisible(false);
    }

    private void updateForm() {
        if (grid.asSingleSelect().isEmpty()) {
            setFormVisible(false);
        } else {
            inventory = grid.asSingleSelect().getValue();
            binder.setBean(inventory);
            setFormVisible(true);
        }
    }

    private void setFormVisible(boolean visible) {
        id.setVisible(visible);
        short_desc.setVisible(visible);
        long_desc.setVisible(visible);
        department.setVisible(visible);
        category.setVisible(visible);
        price.setVisible(visible);
        save.setVisible(visible);
    }

    private void savebasicmodel() {
        service.update(inventory);
        updateGrid();
    }
}

short.png (6.2 kB)

Literate Aspects

Alejandro Duarte: You don't need to write HTML with Vaadin. Use a VerticalLayout (or FormLayout) to put all the fields you need in your form and then add the grid and the form into a HorizontalLayout:
VerticalLayout form = new VerticalLayout(firstName, lastName, save);
HorizontalLayout layout = new HorizontalLayout(grid, form);
setContent(layout);

buying your book now... from Amazon for the Kindle version - so I can begin immediately studying what you have been so kind to create. thank you.

https://www.useloom.com/share/9b4a58c513fe4da6b9e9225dce4269cc

buy.png (206.8 kB)

Alejandro Duarte

Haha nice to hear, thanks! Hope you enjoy the reading. Anyway... try adjusting the sizes. For example, layout.setSizeFull() and grid.setSizeFull(). I don't know how exactly is your implementation, but here there is an implementation (Vaadin 8.0.5) with a HorizontalLayout.

Literate Aspects

Thank you for creating the code at http://alejandro-du/gist:ef3f696484861cf7c2256903a989dbae Created 7 minutes ago
I do not see the setSizeFull() anywhere in your wonderful code example, but shall try to place it now: (it worked!!! - THANK YOU! -- shall spend the day studying your wonderful book, shall not bother you with minor questions, but may I please inquire AFTER completing any assignments you teach in your book? (should the need prove necessary)

package com.dataSQL;

import com.vaadin.annotations.Theme;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.*;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@Theme("valo")
@SpringUI
public class inventoryui extends UI {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    @Autowired
    private basicservice service;
    private basicmodel inventory;
    private Binder<basicmodel> binder = new Binder<>(basicmodel.class);
    private Grid<basicmodel> grid = new Grid<basicmodel>(basicmodel.class);
    private TextField id = new TextField("id");
    private TextField short_desc = new TextField("short_desc");
    private TextField long_desc = new TextField("long_desc");
    private TextField department = new TextField("department");
    private TextField category = new TextField("category");
    private TextField price = new TextField("price");
    private Button save = new Button("Save", e -> savebasicmodel());

    @Override
    protected void init(VaadinRequest request) {
        
        
        updateGrid();
        grid.setCaption("INVENTORY");
        grid.setSizeFull();
        grid.setColumns("id", "short_desc", "long_desc", "department", "category", "price");
        grid.addSelectionListener(e -> updateForm());

        binder.bindInstanceFields(this);
        
//        VerticalLayout layout = new VerticalLayout(id, short_desc, long_desc, department, category, price, grid, save);        

        VerticalLayout form = new VerticalLayout(id, short_desc, long_desc, department, category, price, save);
        HorizontalLayout layout = new HorizontalLayout(grid, form);    
        grid.setSizeFull();
        layout.setSizeFull();    
        
        setContent(layout);
        
    }

    private void updateGrid() {
        List<basicmodel> inventorys = service.findAll();
        grid.setItems(inventorys);
        setFormVisible(false);
    }

    private void updateForm() {
        if (grid.asSingleSelect().isEmpty()) {
            setFormVisible(false);
        } else {
            inventory = grid.asSingleSelect().getValue();
            binder.setBean(inventory);
            setFormVisible(true);
        }
    }

    private void setFormVisible(boolean visible) {
        id.setVisible(visible);
        short_desc.setVisible(visible);
        long_desc.setVisible(visible);
        department.setVisible(visible);
        category.setVisible(visible);
        price.setVisible(visible);
        save.setVisible(visible);
    }

    private void savebasicmodel() {
        service.update(inventory);
        updateGrid();
    }
}

purchased.png (64.4 kB)

read1.png (315.7 kB)

worked.png (159.6 kB)

Alejandro Duarte

Glad it worked!

Literate Aspects

Alejandro Duarte: Glad it worked!

Is it possible to print your book, like I did with the Book of Vaadin 8?

I need to discover GRID functions of setting focus and setting as active, as well as keyboard (key up and key down) navigations that set focus so the FORM updates as each record row is selected in the grid.

Also, I cannot seem to find HOW to layout the split FORM / GRID whereas the form occupys less (currently each is occupying half equally).

What portion of your wonderful book -- details LAYOUT and NAVIGATIONS ?

Any suggestions greatly appreciated.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

data not binding... Building a web UI for MySQL databases (in plain Java)

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.