Personal tools
Vaadin: installation, use and integration with Lotus Domino

Thinking of U and I...

Oct 15, 2014

Vaadin: installation, use and integration with Lotus Domino

Vaadin is an open source Web application framework for rich Internet applications. I'll show you a brief example of integration with Lotus Domino in Eclipse environment

I discovered Vaadin accidentally and I think that could be a good framework especially if you are a Java developer and want to create web application quickly.

From Wikipedia:

"The framework incorporates event-driven programming and widgets, which enables a programming model that is closer to GUI software development than traditional web development with HTML and JavaScript."

A very impressive starting point is that demo, and also this tutorial.

Being a Lotus Domino developer, and working with Java, I immediately tried to integrate Vaadin with it; in the next section, I will explain how to install Vaadin plugin into Eclipse "step-by-step" and make a simple application that exposes some data from a Lotus Domino view directly into a Vaadin application.

Eclipse installation

First, you need to install Vaadin plugin directly from marketplace:

After that, a brand new wizard type is available from the list:

Let's start the project...

In this example, I'll show how to get people data from Domino names.nsf and put into a Table Vaadin object.

First, initialize the table object:

Table table = new Table("People");

Now, establish a DIIOP connection to Domino server:

Session s = NotesFactory.createSession("10.0.0.171:60148","username","password");
Database db = s.getDatabase("server/domain", "names.nsf");
if (db==null) {
	System.out.println("Database not found!");
	return;
}
if (!db.isOpen()) {
	db.open();
}

Next, create two columns into table (which labels will be Name and Surname):

table.addContainerProperty("Name", String.class, null);
table.addContainerProperty("Surname", String.class, null);

Last thing, iterate through names and add each person data into columns:

View v = db.getView("People");
if (v!=null) {
	Document doc = v.getFirstDocument();	
	while (doc != null) {
		Document tmp = doc;

		Object newItemId = table.addItem();
		Item row1 = table.getItem(newItemId);
                row1.getItemProperty("Name").setValue(tmp.getItemValueString("FirstName"));					
                row1.getItemProperty("Surname").setValue(tmp.getItemValueString("LastName"));
		row1 = table.addItem(newItemId);
					
		doc = v.getNextDocument(tmp);
		if(tmp != null)
			tmp.recycle();
	}
        table.setSelectable(true);
}

Run...

Simply "Run" button into Eclipse: in this case, Vaadin starts a stand-alone server running on localhost:8080. To see the application in action type the following URL (My_vaadin_project is the name of the Eclipse project):

http://localhost:8080/My_vaadin_project

This is the result:

Columns are sortable, and this is automatically provided by Vaadin table widget.

Tip: automatically restart the application without stop and start appending ?restartApplication in URL

Composite

Vaadin provides a very useful object, Vaadin Composite, that can be created by New → Select a wizard step, select VaadinVaadin Composite.

You can observe that it's a component that you can edit with the visual editor. It has two tabs at the bottom of the view: Source and Design. These tabs allow switching between the source view and the visual design view.

This is how design view looks like:

Here you can drag&drop components from the right panel (accordion, button, label, checkbox ecc.) into the left grid, setting properties like position, width, caption and so on: java code is automatically generated for these objects (if you are a Domino developer, this looks like component panel provided by XPages....).

Back to the project

In this quick example, we'll connect a Composite object (let's call it Viewer, that contains only a label, as you can see from the picture above) with our table, on every row selection event.

First, we create Viewer with Vaadin Composite wizard, switch to design, insert a label dragging it from components panel, name this label as label

In the main application, instantiate the viewer with the table:

Viewer viewer = new Viewer(table);

and in Viewer constructor, set its datasource with it:

public Viewer(Property document) {
     ...
     label.setPropertyDataSource(document);
}

Now, selecting a table row, Viewer will show the row value:

Quick tip...

Vaadin visual editor (design view) couldn't be available in some cases into Eclipse. To fix it, download XULrunner, install, and put this line into eclipse.ini.

-Dorg.eclipse.swt.browser.XULRunnerPath=<your_xulrunner_installation_path>\xulrunner.exe

Just restart Eclipse.

Documentation

Vaadin provides a very useful, complete, example-based documentation.

And then?

Enjoy with it! There are a lot of visual tutorial, demo and articles related to Vaadin that show its ease of use. The best way to learn it is to use it!

comments powered by Disqus