In the previous article, I described the creation of an HTML table report with AJAX filtering and user sorting of columns — using a few lines of code written into a single Java command. For this, I used the ReportBuilder class from the Ujorm framework. Today, I’d like to show you how to place formatted content into the cells of such a table, as well as a few more improvements. What will the final table look like?

Our filter now has a new input field for limiting the number of displayed rows. We can insert the first column into our table, containing the sort order number of the row. The star classification of a hotel can be displayed using a list of appropriate characters with a tooltip, and the final column contains a link to the hotel home page. The original behaviour of the table remains the same, the updated source code is here:

Java

Notes:

1. The setFormItem() method serves for the insertion of extra records into the filter form, here we add the input for the maximum line count.
2. if the table cell contains only the direct attribute of a domain object, we can use an alternative notation of the function according to the template: _Hotel::getNam_e .
3. The final column of the table contains an active link to the hotel’s webpage. Its content is implemented in the write(element, value) method of the Column interface (by a lambda expression). The first parameter of the method provides the cell element, the second provides the domain object. Implementing the content is then up to us. Because the interface is of the type @FunctionalInterface, we can use a lambda expression to assemble our class.
4. To format the header, we’ll override the write(element) method of the Injector interface. This method provides only a single argument containing the cell element. In this case we can also use a lambda expression. We could also put an image in the header using the corresponding CSS style, but this example should be enough to see the general solution.
5. The quickest way to add a simple column with the sort order number is using the method addOrder(), but here we can also provide our own implementation by using the addColumn() method.
6. The addHtmlHeader() method injects further code into the HTML header, so we’ll add an external reference to a cascading style sheet (CSS).
7. AJAX filtering is active by default, to turn it off we can use the setAjaxEnabled() method. Changes to the filter can be confirmed using the Enter key, but we can also add a new submit button to the filter items.

The TableBuilder class allows you to add your own configuration to in the constructor, and this will influence certain properties of the output HTML code. If that is not enough, you can try overriding one of the methods of the TableBuilder class.

Conclusion

Practical usage is for small projects and administration, where frontend developers are not available. Due to its small size, it can be used in embedded devices. The original inspiration for the API was the ListDataProvider class, which was added to the Ujorm project in 2014 - for the creation of tables using the Apache Wicket framework. But I liked this alternative implementation (without any dependencies) so much, that I just had to try writing my own solution for the purpose. If anyone wants to add their own code to the current solution, I recommend using the GitHub project’s issue feature.

To run the project you’ll need JDK version 8 and a web browser with support for JavaScript Vanilla ES6, but the JavaScript used here doesn’t require any further libraries. The project can be run in Windows using the run.cmd script (on Linux using the run.sh script). On first execution, the necessary libraries will be downloaded.

#java #tutorial #html #java #html