Programmer Thoughts

In this video I demonstrate how to call a Java method that runs in the server from a JavaScript function running in the web browser:






In short, you need a Java web application with the Vaadin dependencies (you can quickly create one here), a script file in the webapp/frontend/ directory and a Java class with a method annotated with @ClientCallable that sends an Element to the JavaScript function. The JavaScript function can use the $server object in the Element instance to call the annotated Java method.

Here's the code:

MainView.java:

@JavaScript("frontend://script.js")
@Route
public class MainView extends Div {
    public MainView() {
        getElement().executeJavaScript(
                "someJavaScriptFunction($0)", getElement());
    }

    @ClientCallable
    public someJavaMethod(String message) {
        System.out.println(message);
    }
}

script.js:

function someJavaScriptFunction(element) {
    element.$server.someJavaMethod("Hello server!");
}

You can read …

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…

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…

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…

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:

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…

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…