Close

Vaadin Support heroes in action

A typical day at Vaadin Support: tell us your problem, we give you the solution. We help with a huge variety of issues. Every customer has their specific circumstances which creates a challenge to our support heroes daily. However, we did solve a few generic problems recently and I’d like to share these with you. Maybe you’ve been struggling with these topics, too. 

Setting a 24 hr time format for PopupDateField

A customer had an issue that they had tried to solve by themselves without success. They were wondering how to set 24 hr time format for the PopupDateField irrespective of the current locale. The answer was straightforward, but to get to the solution, our expert needed to dig some source code of Vaadin Framework. Here’s how you do it. 

You need to override UI.getLocaleService() to return a custom version of LocalService where createLocaleData is overridden. Here you can set the 24 hr format on and off. 

@Override
protected LocaleData createLocaleData(Locale locale) {
    LocaleData createLocaleData = super.createLocaleData(locale);
    createLocaleData.twelveHourClock = false;
    return createLocaleData;
}

Drag’n drop in Table doesn’t behave as expected

One of our customers needed a better drag’n drop behavior for the Table component. As it happens, Table doesn’t scroll its contents properly when reordering rows by drag’n drop. Like, moving a row to the top of a long list. The customer sponsored a few hours of development time and now it’s available as an Add-on named DNDScroll. Later our support team member implemented the same functionality for the Panel component too, as a Community effort. These enhancements are now available for everyone. If this is something you need for Table or Panel, go ahead and download the DNDScroll Add-on from Vaadin Directory

File upload requirements

Our support expert got the task to enhance and customise the upload component. The EasyUploads add-on was a good basis, but lacked some of the desired features. We delivered customer specific functionality for look’n feel, document previews and localisation but also introduced enhancements that are available for everyone. Now the EasyUploads Add-on offers configuration options for limited MIME types and a maximum number of files to be uploaded. If this is what you need, please go and download the EasyUploads Add-on from Vaadin Directory

We are here to help anyone with a Vaadin related problem, big or small. If you aren’t sure if this is something for you, check out the how support saves you money below. 

Read how Support saves time and money

Vaadin + jOOQ: Implementing Business Web Applications in Plain Java

Note: This post has been updated to use Vaadin 8.

When speaking about business applications, you might find that a lot of them fall into the “data-centric” kind of application where SQL is frequently the key technology. Similarly, when speaking about web applications, you’ll end up with HTML rendered on the browser, most likely with the help of JavaScript. If we put this into the context of Java, web business applications can be implemented by directly using SQL, HTML, JavaScript, and of course Java. Vaadin and jOOQ enable you to implement data-centric web applications using only one language: Java.

This step by step guide shows you how to implement a Spring-based web application that connects to a MySQL server in order to query data that can be filtered from the UI. This guide assumes you know the very basics of Maven and Spring Framework (particularly the concept of dependency injection).

Step 1: Create a Spring-based project

Create a new Spring Boot application by going to http://start.spring.io and adding the Vaadin, jOOQ, and MySql dependencies as shown in the following figure:

Screen Shot 2016-10-04 at 14.38.32.pngClick the Generate Project button and extract the generated zip file. You should get a Maven project you can import into your favorite IDE.

Step 2: Create a MySQL database

Connect to the MySQL instance and create a new schema:

CREATE SCHEMA demo;

Create the following table:

CREATE TABLE customer(
    id SERIAL, first_name VARCHAR(255),
    last_name VARCHAR(255)
);

Add some test data, such as the following:

INSERT INTO customer(first_name, last_name) VALUES('Lukas', 'Eder');
INSERT INTO customer(first_name, last_name) VALUES('Mario', 'Fusco');
INSERT INTO customer(first_name, last_name) VALUES('Edson', 'Yanaga');
INSERT INTO customer(first_name, last_name) VALUES('Anton', 'Arhipov');
INSERT INTO customer(first_name, last_name) VALUES('Andres', 'Almiray');

Step 3: Configure the database connection

jOOQ allows you to reverse-engineer the database into a set of Java classes modeling the tables, sequences, and stored procedures, among other database objects.

Start by configuring the database connection in the application.properties file inside the src/main/resources directory:

spring.datasource.url=jdbc:mysql://localhost/demo
spring.datasource.username=user
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jooq.sql-dialect=MySQL

Remember to change the username and password used to connect to your own database.

Step 4: Reverse-engineer the database

Add the Properties Maven plugin and the jOOQ Code Generator plugin for Maven in the plugins section of the pom.xml file:

<plugin>
   <groupId>org.codehaus.mojo</groupId>
   <artifactId>properties-maven-plugin</artifactId>
   <version>1.0.0</version>
   <executions>
       <execution>
           <phase>initialize</phase>
           <goals>
               <goal>read-project-properties</goal>
           </goals>
           <configuration>
               <files>
                   <file>src/main/resources/application.properties</file>
               </files>
           </configuration>
       </execution>
   </executions>
</plugin>
<plugin>
   <groupId>org.jooq</groupId>
   <artifactId>jooq-codegen-maven</artifactId>
   <version>3.8.4</version>
   <executions>
       <execution>
           <goals>
               <goal>generate</goal>
           </goals>
       </execution>
   </executions>
   <configuration>
       <jdbc>
           <url>${spring.datasource.url}</url>
           <user>${spring.datasource.username}</user>
           <password>${spring.datasource.password}</password>
           <driver>${spring.datasource.driver}</driver>
       </jdbc>
       <generator>
           <database>
               <name>org.jooq.util.mysql.MySQLDatabase</name>
               <inputSchema>demo</inputSchema>
           </database>
           <target>
               <packageName>com.example</packageName>
               <directory>target/generated-sources/jooq</directory>
           </target>
       </generator>
   </configuration>
</plugin>

The previous snippet uses the connection properties defined in the application.properties file to avoid duplicating this configuration. Make sure the <inputSchema> element contains the name of the MySQL database you previously created.

Run the following Maven command:

    mvn clean install

This will reverse-engineer the database and generate the corresponding Java classes in the target/generated-sources/jooq/ directory.

Note that if you are using Eclipse, you have to give it an extra “hint” for it to pick the generated sources directory and not to complain about missing “m2e connectors”.

Step 5: Create a back-end service class

Create the following CustomerService class:

package com.example;

import com.example.tables.records.CustomerRecord;
import org.jooq.DSLContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.util.List;

import static com.example.Tables.*;

@Component
public class CustomerService {

    @Autowired
    private DSLContext dslContext;

    public List<CustomerRecord> searchByName(String name) {
        String filter = name + "%";
        return dslContext
            .selectFrom(CUSTOMER)
            .where(CUSTOMER.FIRST_NAME.likeIgnoreCase(filter)
            .or(CUSTOMER.LAST_NAME.likeIgnoreCase(filter)))
            .fetchInto(CustomerRecord.class);
    }
}

Spring Boot will automatically create a bean of type DSLContext that you can use to query the database using plain Java but in a way that resembles SQL. Visit the official documentation site of jOOQ for more information about the capabilities of its API.

Step 6: Implement the UI

Create a Vaadin UI by implementing the VaadinUI class:

package com.example;

import com.example.tables.records.CustomerRecord;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Grid;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@SpringUI
public class VaadinUI extends UI {

    @Autowired
    private CustomerService service;

    private Grid<CustomerRecord> grid = new Grid(CustomerRecord.class);

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        TextField filter = new TextField("Filter by name:");
        filter.addValueChangeListener(e -> updateGrid(filter.getValue()));

        VerticalLayout layout = new VerticalLayout(filter, grid);
        setContent(layout);
        updateGrid("");
        grid.setColumns("firstName", "lastName");
    }

    private void updateGrid(String filter) {
        List<CustomerRecord> customers = service.searchByName(filter);
        grid.setItems(customers);
    }

}

This class creates a UI containing a Grid component to show all the customers in the database and a filter to search by first or last name. Notice how the VaadinUI class is annotated with @SpringUI. This means we can inject the CustomerService bean in this class and use it to fetch customers.

Step 7: Run the application

Spring Initializr created the Application class with a standard main method defining the entry point of the Java application. When you run the application using this method, Spring Boot configures and runs a Tomcat server on port 8080 (all this can be configured).

Before running the application you have to build it. You can use the following command to build and run the application:

    mvn install spring-boot:run

The following is a screenshot of the application:

Screen Shot 2016-10-04 at 16.50.49.png

Check out the full jOOQ + Vaadin example from GitHub

Progressive Web Apps on the Road

Progressive Web Apps have lately been the subject of a lot of discussion in the web development world. While some tout Progressive Web Apps (PWAs) as the future of the web, others are more skeptical, while the majority of developers probably don’t even know what they are! Progressive Web Apps are an emerging technology that is already ready for business today with Vaadin Elements through a framework such as Polymer. It will certainly be the future for any framework - including Vaadin Framework in the very near future.

To further explore the world of Progressive Web Apps, my colleague Marcus and I had the great pleasure to go to a few PWA focused events in the past week, and I even got to speak about them.

What are Progressive Web Apps?

“Progressive Web Applications are a new level of caring about the quality of your user experience.”
--Chris Wilson, Developer Advocate at Google

Firstly, what are Progressive Web Apps? Progressive Web Apps are apps that use the latest web technologies to create high quality web experiences across platforms. High quality web apps are those that are reliable in all connectivity conditions, secure from end to end, and engaging to customers on all platforms and devices. The term Progressive Web App was coined by Frances Berriman and Alex Russell to describe “websites that took all the right vitamins.” These are apps that push the web further into creating great experiences. 

Learn more about Progressive Web Apps at the Google Developers site

Progressive Web Apps Roadshow

Last week, Marcus and I attended the Progressive Web Apps Roadshow, which toured the country and the world this autumn. Run by the Google developer relations team, these events were well organized and very informative. The event was split into two parts: a series of talks followed by codelabs. At Vaadin we have been closely tracking Progressive Web Apps, but we still learned a lot from this event. There was a strong focus on PWAs as -quality- applications. From the talks, we learned how to bake in security and and performance rather than leaving those as nice-to-haves. After the presentations were a series of codelabs, which were really useful, especially since we could ask follow-up questions of the facilitators.

Try the codelabs yourself at the Google Developers Codelabs page

Vaadin is committed to enabling developers to create powerful web apps, and we are going to put a lot more energy into teaching and presenting Progressive Web Apps as a better way to make web apps.

Progressive Web Apps Roadshow
Progressive Web Apps Roadshow

GDG Devfest San Francisco

The following weekend I spoke at the GDG Devfest event in San Francisco, one of a number of events happening this Autumn. It was a great event with a really diverse set of people from all levels of education, experience, and industries.

I gave a talk about Progressive Web Apps titled “Why (not) build Progressive Web Apps.” I presented the case for Progressive Web Apps as a cross platform -alternative- to native apps. PWAs are a powerful tool for building apps on all platforms, but they are not going to simply replace all native apps. When you go to build an application for multiple devices, whether you choose to build a PWA or a native app or both remains as a decision for the architect. 

Click here to view my slide deck

My talk was fairly well received, but as expected, there is still quite some confusion about what Progressive Web Apps are and why someone would build them. The Q and A session after my talk was quite lively and I took many great questions to hopefully elucidate some of the finer points of PWAs. I will also be giving my talk at the GDG Devfest event in Orlando this November, so it’ll be great to talk to even more people about Progressive Web Apps.

GDG Devfest SF
GDG Devfest SF

Progressive Web Apps Workshop

Then this past Monday, Marcus and I went to a Progressive Web App workshop hosted by Microsoft and Mozilla. While much of the conversation today about PWAs has come from Google, it was really wonderful to see the work Microsoft Edge and Mozilla Firefox teams. At the workshop we learned about service workers from some of the people who are actually on the specifications committee! Most of the workshop was codelabs, but there was plenty of time for us to mingle and make connections in the Progressive Web App world. Sometimes it’s not merely about what you learn at these events, but who you meet and can collaborate with in the future. It’ll be great to hear more about Progressive Web Apps from the Mozilla and Microsoft teams.

PWA Workshop
PWA Workshop with Mozilla and Microsoft

Progressive Web Apps and Vaadin

We’re always trying to stay up to date to help our teams at Vaadin create the most relevant and useful products that people use today. We think that Progressive Web Apps are a great new way to write high quality web apps for business, especially with Vaadin Elements and Polymer. Look forward to hearing more about Progressive Web Apps at Vaadin.

Learn more about Vaadin Elements