Data-Centric Applications with Vaadin 8

Alejandro Duarte

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781783288854
• Edition: 1
• Topic: Informatica
• Subtopic: Programmazione in Java

This book teaches you everything you need to know to create stunning Vaadin applications for all your web development needs. Deep dive into advanced Vaadin concepts while creating your very own sample Vaadin application.About This Book• A one-stop book to enhance your working knowledge with Vaadin.• Explore and implement the architecture of Vaadin applications.• Delve into advanced topics such as data binding, authentication and authorization to improvise your application's performance.Who This Book Is ForIf you area Software developer with previous experience with Vaadin and would like to gain more comprehensive and advanced skills in Vaadin web development, then this book is for you.What You Will Learn• Modularize your Vaadin applications with Maven• Create high quality custom components• Implement robust and secure authentication and authorization mechanisms• Connect to SQL databases efficiently• Design robust CRUD (Create, Read, Update, Delete) views• Generate stunning reports• Improve resource consumption by using lazy loadingIn DetailVaadin is an open-source Java framework used to build modern user interfaces. Vaadin 8 simplifies application development and improves user experience. The book begins with an overview of the architecture of Vaadin applications and the way you can organize your code in modules.Then it moves to the more advanced topics about advanced topics such as internationalization, authentication, authorization, and database connectivity. The book also teaches you how to implement CRUD views, how to generate printable reports, and how to manage data with lazy loading.By the end of this book you will be able to architect, implement, and deploy stunning Vaadin applications, and have the knowledge to master web development with Vaadin.Style and approachThis book follows a hands-on approach and takes the readers through practical examples of how to create and deploy Vaadin applications. This book teaches the readers about the Vaadin architecture. It then moves on to the more advanced topics about advanced topics such as internationalization, authentication, authorization, and database connectivity. This step by step guide equips the readers with all they need to know to use Vaadin for web development.

Implementing CRUD User Interfaces

Most business applications have to deal with data manipulation. Users are able to see, change, delete, and add data. All these actions are executed according to and in the context of a set of rules dictated by the business. In its more fundamental form, business applications include graphical user interfaces to perform CRUD actions over the data. CRUD is an acronym for Create, Read, Update, and Delete. This chapter explores the design and implementation of CRUD views.

We'll start with a quick discussion about CRUD views from a User Experience (UX) perspective. Then, we will move on to how to design and implement CRUD user interfaces using two different UI designs. This chapter also explains the basics of data binding, shows how to use the Java Bean Validation API, and demonstrates how to render UI components inside Grid components.

This chapter covers the following topics:

• CRUD user interface design
• Data binding
• Validating with JSR-303
• Grid renderers
• Filtering

Technical requirements

You will be required to have Java SE Development Kit and Java EE SDK version 8 or later. You also need Maven version 3 or later. A Java IDE with Maven support, such as IntelliJ IDEA, Eclipse, or NetBeans is recommended. Finally, to use the Git repository of this book, you need to install Git.

The code files of this chapter can be found on GitHub:
https://github.com/PacktPublishing/Data-centric-Applications-with-Vaadin-8/tree/master/chapter-07

Check out the following video to see the code in action:
https://goo.gl/szGaRy

CRUD user interface design

UX in the context of user interfaces (UI) refers to the degree of quality in the interaction between the user and the UI. An application designed with UX in mind enhances the user satisfaction by improving its usability. Simplicity is key in the process of UX design, but avoid falling into a minimalistic design, which may otherwise spoil usability.

You can find more information about simplicity, minimalism, and general myths about UX design at http://uxmyths.com.

UX design may include several disciplines, including wireframing, prototyping, testing, and validating designs. In this section, we'll explore variations of typical CRUD views. Examples of this kind of views are the admin views for managing registered users, views for internal application configuration, or views used by DevOps members.

DevOps is a softwares engineering discipline that unifies software development and software operation (deployment and infrastructure management).

We'll avoid the term CRUD for more sophisticated views that might include all of the CRUD operations. In general, these views are business-specific, and developers should design them according to the particularities of each case.

CRUD views are about record editing. Records are items that are usually understood as a whole. Some are suitable for tabular presentation, while others are not; for example, events on a calendar. When designing a CRUD view, think about the following factors:

• Record complexity: How many fields does the record contain? Do the fields change depending on the state of other fields? Are there any complex fields such as maps or calendars? How complex are the validation rules?
• Editing frequency: How often do users need to edit the record? Do they need a quick way to edit certain fields?
• Context awareness: Do users need extra data when editing a record? Do they need, or would they benefit from, seeing other records when editing one?

As a rule of thumb, think about how frequently users will perform the actions on the view, and if they can benefit from seeing many records at a time or not. If the frequency is high for any operation, and they won't benefit from seeing other records in the view, don't use a generic CRUD interface. Implement the view tailored to the use case.

Let's analyze three CRUD user interface designs: in-place fields, modal pop-up windows, and hierarchical menus.

In-place fields

With this design, users can activate a field to edit a single value. Data can be presented in a tabular format, in which case...