Posts

Learning Microservices with a Practical Example

Image
Although this example application is simplistic and no one should ever use microservices to implement an application like this one, it shows you how it feels to run this kind of applications and how to implement it using Spring Cloud.

If you only want to play around with a microservices application, follow this tutorial. If you want to code the full app using Java, Eureka, Spring Cloud Config, Spring Data Rest, Hystrix, Zuul, Spring Session, and Vaadin, follow the complete 9 steps tutorial.

You'd end up with several terminals where each terminal is running a specific service:


In real-world projects, you most likely wouldn't start microservices like this. You would probably use an orchestration tool such as Docker Swarm or Kubernetes. There's a Git branch in the repository for this example application that contains Docker files you could experiment with to learn more about how to deploy microservices in production environments.

In the following sections, I describe some gui…

How to call a Java method from a JavaScript function in the browser

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 …

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…