Part 2 :: The data model

Now we focus on the data we want to display and manipulate in our application. Before we start creating the UI, we need some backend classes to handle our data.

Create a new class and call it “DocumentData” (I try to use well known Notes terms as far as possible to give you a better chance to get known to this new world). This class has all properties we will read and save to our database. The corresponding getter and setter methods can be easily autogenerated with Eclipse.

package net.stephankopp;

import java.time.LocalDate;

public class DocumentData {
   private String universalId;
   private String status;
   private String topic;
   private String description;
   private LocalDate dueDate;
   private boolean changed;

   public String getUniversalId() {
      return universalId;
   }

   public void setUniversalId(String universalId) {
      this.universalId = universalId;
   }

   public String getStatus() {
      return status;
   }

   public void setStatus(String status) {
      this.status = status;
   }

   public String getTopic() {
      return topic;
   }

   public void setTopic(String topic) {
      this.topic = topic;
   }

   public String getDescription() {
      return description;
   }

   public void setDescription(String description) {
      this.description = description;
   }

   public LocalDate getDueDate() {
      return dueDate;
   }

   public void setDueDate(LocalDate dueDate) {
      this.dueDate = dueDate;
   }

   public boolean isChanged() {
      return changed;
   }

   public void setChanged(boolean changed) {
      this.changed = changed;
   }
}

We need a second class called “DatabaseConnector”. This class will handle all connections to our data store. In our case the Domino database. It has only one property at the moment, with the corresponding getter and setter method. The property “cachedData” holds a list of all DocumentData objects, we currenty have in our cache.
The @Service annotation tells Spring Boot to create a singleton service from this class which can be easily accessed from the rest of the application.

package net.stephankopp;

import java.util.List;
import org.springframework.stereotype.Service;

@Service
public class DatabaseConnector {

	private List<DocumentData> cachedData;

	public List<DocumentData> getCachedData() {
	   return cachedData;
	}
	
	public void setCachedData(List<DocumentData> cachedData) {
	   this.cachedData = cachedData;
	}
}

For the moment, we don’t want to implement the connection to our Domino database. We just focus on the Vaadin and Spring Boot application. To have something to work with, we create sample data during the start of our application. To do this, just create a function called “createSampleData” and call it from the constructor:

/**
* Constructor
*/
public DatabaseConnector() {
	createSampleData();
}

/**
* Create sample data
*/
private void createSampleData() {
	cachedData = new ArrayList<DocumentData>();
	for (int i=1; i<=100; i++) {
		DocumentData data = new DocumentData();
		data.setStatus("OPEN");
		data.setDescription("Task " + i);
		data.setDueDate(LocalDate.now().plusDays(i));
		data.setTopic("Project " + i);
		cachedData.add(data);
	}
}

Now we have some data for the UI. We have to add a grid to the UI to display the data. Add a class property named “dataGrid” and an autowired “databaseConnector”:

private Grid<DocumentData> dataGrid;
@Autowired private DatabaseConnector databaseConnector;

Replace your code of the “init” function to create the grid:

//Create a layout to contain all our components
VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
layout.setSpacing(true);

//Create a label as Header and add it to the layout
Label headerLabel = new Label("Notes Modernization Demo App");
headerLabel.setStyleName("h1");
layout.addComponent(headerLabel);

//Add a grid, which displays all our data and add it to the layout
dataGrid = new Grid<DocumentData>();
dataGrid.setWidth("100%");
dataGrid.setHeight("100%");
layout.addComponent(dataGrid);

//only the layout has to be set as content, it contains all other components
setContent(layout);

Create a new function “updateGrid” in your VaadinUI class.

/**
* Load data from database connector and update the grid
*/
private void updateGrid() {
	dataGrid.setItems(databaseConnector.getCachedData()); //Add all objects from the cache to the grid
}

At the end of your “init” function, add some lines to configure the displayed columns and call the update method:

//only the layout has to be set as content, it contains all other components
setContent(layout);

//Configure each column
dataGrid.addColumn(DocumentData::getStatus).setCaption("Status"); 
dataGrid.addColumn(DocumentData::getTopic).setCaption("Topic"); 
dataGrid.addColumn(DocumentData::getDueDate).setCaption("Due date"); 

//update grid
updateGrid();

That’s all, start your application and look at your Vaadin app:

vaadinui_gridwithsampledata

In part 3, we create a popup window, which displays all information of a single entry. This window can be used to display entries, change existing and also to create new entries.