Posts

Infinite lazy loading

Image
Here's a short excerpt of Chapter 9 Lazy Loading of my book Data-Centric Applications with Vaadin 8.
Even though we have explained lazy loading by using the Grid component, we can use the same backend service method to implement custom UI components that support lazy loading. For example, you can use a VerticalLayout to add sets of, say, 10 components any time the user clicks a load more button at the bottom of the layout. In this case, you would need to keep track of the current offset and keep incrementing it until the service method returns less than 10 items.

The following is a simple UI component that shows how to implement this type of infinite lazy loading:
public class LazyLoadingVerticalLayout extends Composite {
    private CssLayout content = new CssLayout();     private Button button = new Button("Load more...");     private int offset;     private int pageSize;
    public LazyLoadingVerticalLayout(int pageSize) {         this.pageSize = pageSize;         button.setS…

Hello, World in Vaadin 10+

Image
Vaadin is a set of tools to create web applications tailored to both, client-side and server-side developers. If you are, say, a JavaScript Developer, you can use Vaadin Components in any HTML document. If you are a Java Developer, you can use the provided Java API and forget about coding any HTML or JavaScript at all.

In this article, I'll show you how to create the famous Hello, World application using the Java Programming Language and Vaadin 12 (also valid for Vaadin 10 and 11). Get comfortable, make sure you have Maven installed, fire up your favorite IDE, and let's get started!
Start with a starter, obviously Go to https://vaadin.com/start/latest and select Project Base. This is the most straightforward project starter and serves well as an initial point. Click Download and extract the zip file. You should get a directory with a Maven project in it. Import this project into your favorite IDE (mine is IntelliJ IDEA, by the way).

You should get a directory structure that lo…

Data-Centric Applications with Vaadin 10?

Image
I recently got some hard copies of my last book about Vaadin. I love the matte colored look of the cover. Excellent job by Packt Publishing! Anyway, since the feeling of receiving a package with your own books is hard to describe with words, I decided to do it with code.

Although most of the concepts and design ideas that the book covers are valid for any version of Vaadin, I created a Git branch with all the examples migrated to Vaadin 10. At this time, there are certain features that Vaadin 10 doesn't include (yet?) such as Grid editors, Menus, and LAYOUT_COMPONENT_GROUP styles. But besides that, pretty much everything was easy to migrate.

There are some new features in Vaadin 10 that, obviously, I didn't cover in the book–things such as the new Router and the Element API. However, since the book is aimed at developers with basic Vaadin knowledge (i.e., they how to code UIs with the Vaadin Java API), the examples are useful and illustrate techniques you can use in your appl…

Responsive embedded YouTube video or playlist online maker

Image
I have to embed YouTube videos or playlists frequently, so I decided to implement this simple tool to generate the HTML code of an embedded responsive YouTube video or playlist:

YouTube video or playlist ID: Playlist Generate Code:

What's so cool about Vaadin Flow?

Image
Vaadin Flow is a free open-source web framework for Java developers. It allows you to implement a web application without having to code any JavaScript or HTML. See the following example:

@Route("")
public class MainView extends VerticalLayout {
    public MainView() {
        TextField textField = new TextField("Enter your name");
        Button button = new Button("Click me", event ->
                add(new Label("Hello from the server, " + textField.getValue())));
        add(textField, button);
    }
}

​If you deploy this to a Java server, you'll get the following:



Since the UI code runs on the server side, you can debug it using the tools that your Java IDE of your choice provides. For example, here we are adding a breakpoint in the line that gets invoked when the button is clicked:



These are some of the cool things about Vaadin Flow:

You can use one single programming language to implement a web application (Java or any other for the JVM).​Y…

New book about Vaadin 8: Data-Centric Applications with Vaadin 8

Image
I'm glad to announce that my second book about Vaadin has been published!

Due to Packt Publishing's guidelines, the space I had for acknowledgments was limited to 500 characters. However, I'd like to share the original draft I wrote for this section:

​I'd like to thank the entire team from Packt Publishing; thanks for your support and patience throughout the writing process. Thanks to all the technical reviewers and proofreaders for providing me with valuable feedback from which I have learned a lot. A special thanks to the Vaadin team and its community for producing a terrific open-source web framework and knowledge base with tons of articles and useful resources. I hope this book reciprocally contributes back to the community.

I'd like to single out Joonas Lehtinen, Sami Ekblad, Matti Tahvonen, Marcus Hellberg, and Fredrik Rönnlund, who in one way or another influenced or motivated this book. In addition, many others provided help and motivation throughout the w…

Microservices & Vaadin

Image
During the last months, I've been researching and experimenting with microservices and Vaadin applications. My goal was to test Vaadin "compatibility" with some of the techniques associated with microservices. In short, Vaadin is as compatible with microservices as any other component-based web framework. Moreover, many of the challenges you would face when implementing microservices with Vaadin you would face with any JavaScript/HTML framework.

Microservices bring advantages such as independent development and deployment of services, but they come with a cost, mainly, an increase in complexity, brilliantly explained by Dave Kerr in his article The Death of Microservice Madness in 2018, a highly recommended read for everyone evaluating microservices. One of the key technical challenges with microservices which is related to web frameworks is how to create a "mash-up" UI that combines two or more web applications.

Ignoring the fact that microservices embrace tec…