Introduction to scalatags in Scala.js

Sun, 27 May 2018 18:34:38 +0000

Introduction

scalatags is a Scala library that allows generating dom parts or snippets in a functional style. In the same spirit as Elemento for GWT, scalatags‘s goal is to interact with the dom using clean and understandable code while keep it to the minimum. In this post, we are going to go through some examples of usage of scalatags based on the web component’s project.

Setup

To set up scalatags in a Scala.js project, the following dependency need to be added to the build.sbt:

libraryDependencies += "com.lihaoyi" %%% "scalatags" % "0.6.7"

libraryDependencies ++= Seq(
  "com.lihaoyi"       %%% "scalatags" % "0.6.7"
)

Working with the DOM

Thanks to the contribution of scalway, the web component’s example have been improved using scalatags, so the creational statements are now cleaner and more concise.

With scalatags

  val amountInput = input(*.tpe := "number", *.id := "amountInput").render
    val dateInput = input(*.tpe := "date", *.id := "dateInput").render
    val reasonInput = textarea(*.id := "reasonInput").render
    val amountLabel = label("Amount: ", *.`for` := "amountInput").render
    val dateLabel = label(*.`for` := "dateInput", "Date: ").render
    val reasonLabel = label(*.`for` := "reasonInput", "Reason: ").render

    val submitButton = button("Add", *.cls := "action-button",
      *.onclick := { () =>
        val id = UUID.randomUUID().toString
        val expense = new Expense(id, getExpenseAmount(), getExpenseDate(), getExpenseReason())
        var expenseAsJson = expense.asJson
        println(expenseAsJson)
        dom.window.localStorage.setItem(expense.id, expenseAsJson.toString())
        dom.document.dispatchEvent(new wrappers.Event("addExpense"))
      }
    ).render

Without scalatags

    val amountInput = dom.document.createElement("input").asInstanceOf[HTMLInputElement]
        amountInput.`type` = "number"
        amountInput.id = "amountInput"
        val dateInput = dom.document.createElement("input").asInstanceOf[HTMLInputElement]
        dateInput.`type` = "date"
        dateInput.id = "dateInput"
        val reasonInput = dom.document.createElement("textarea").asInstanceOf[HTMLTextAreaElement]
        reasonInput.id = "reasonInput"

        val amountLabel = dom.document.createElement("label").asInstanceOf[HTMLLabelElement]
        amountLabel.htmlFor = "amountInput"
        amountLabel.textContent = "Amount: "
        val dateLabel = dom.document.createElement("label").asInstanceOf[HTMLLabelElement]
        dateLabel.htmlFor = "dateInput"
        dateLabel.textContent = "Date: "
        val reasonLabel = dom.document.createElement("label").asInstanceOf[HTMLLabelElement]
        reasonLabel.htmlFor = "reasonInput"
        reasonLabel.textContent = "Reason: "

        val submitButton = dom.document.createElement("button").asInstanceOf[HTMLButtonElement]
        submitButton.textContent = "Add"
        submitButton.classList.add("action-button")

        submitButton.addEventListener("click", (event: Event) => {
          val id = UUID.randomUUID().toString
          val expense = new Expense(id, getExpenseAmount(), getExpenseDate(), getExpenseReason())
          var expenseAsJson = expense.asJson
          println(expenseAsJson)
          dom.window.localStorage.setItem(expense.id, expenseAsJson.toString())
          dom.document.dispatchEvent(new wrappers.Event("addExpense"))
        })


        getContainer().appendChild(amountLabel)
        getContainer().appendChild(amountInput)
        getContainer().appendChild(dateLabel)
        getContainer().appendChild(dateInput)
        getContainer().appendChild(reasonLabel)
        getContainer().appendChild(reasonInput)
        getContainer().appendChild(submitButton)

We can see that scalatags has helped in reducing boilerplate.

With scalatags

        val data = (0 until dom.window.localStorage.length).map { i =>
              val key = dom.window.localStorage.key(i)
              Option(dom.window.localStorage.getItem(key))
            }.collect {
              case Some(e) => decode[Expense](e).toSeq.last
            }

            dataTable = table(*.cls := "data-table",
              thead(tr(th("id"), th("amount"), th("date"), th("reason"))),
              data.map { expense =>
                tr(
                  td(expense.id),
                  td(expense.amount),
                  td(expense.date),
                  td(expense.reason)
                )
              }
            ).render

            getContainer().appendChild(dataTable)

Without scalatags

      dataTable = dom.document.createElement("table").asInstanceOf[HTMLTableElement]
        dataTable.classList.add("data-table")
        val tableHeader = dom.document.createElement("thead").asInstanceOf[HTMLElement]
        val idHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
        idHeaderCell.textContent = "id"
        val amountHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
        amountHeaderCell.textContent = "amount"
        val dateHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
        dateHeaderCell.textContent = "date"
        val reasonHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
        reasonHeaderCell.textContent = "reason"

        val tableHeaderRow = dom.document.createElement("tr").asInstanceOf[HTMLTableRowElement]

        tableHeaderRow.appendChild(idHeaderCell)
        tableHeaderRow.appendChild(amountHeaderCell)
        tableHeaderRow.appendChild(dateHeaderCell)
        tableHeaderRow.appendChild(reasonHeaderCell)

        tableHeader.appendChild(tableHeaderRow)
        dataTable.appendChild(tableHeader)

        for (i <- 0 until dom.window.localStorage.length) {
          val key = dom.window.localStorage.key(i)
          val expenseJsonOption = Option(dom.window.localStorage.getItem(key))
          if (expenseJsonOption.isDefined) {
            val expense = decode[Expense](expenseJsonOption.get).toSeq.last
            val row = dom.document.createElement("tr").asInstanceOf[HTMLTableRowElement]
            val idCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            idCell.textContent = expense.id
            val amountCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            amountCell.textContent = expense.amount
            val dateCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            dateCell.textContent = expense.date
            val reasonCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            reasonCell.textContent = expense.reason
            row.appendChild(idCell)
            row.appendChild(amountCell)
            row.appendChild(dateCell)
            row.appendChild(reasonCell)
            dataTable.appendChild(row)
          }
        }
        getContainer().appendChild(dataTable)

Coupled with Scala streams, the creation of the expenses table is cleaner and meaningful.

More examples can be found in this pull request.

Conclusion

scalatags can become an indispensable tool for creating and interacting with dom elements in Scala.js especially for large scale applications. scalatags can help make the codebase more maintainable by reducing the boilerplate code and improving readability.

Introduction to Kotlin (to) JavaScript

Thu, 17 May 2018 18:51:42 +0000

Introduction

Kotlin is a JVM language that borrows from Scala in an attempt to improve Java. In contrast to Java and Scala (GWT and Scala.js), in which the to-JavaScript compiler is an independent framework, Kotlin provides a to-JavaScript compiler as an integral part of its compiler. Another difference between Kotlin compiler and other frameworks is that Kotlin provides its lib in a separate file (named kotlin.js), in addition to the compiled source code. This leads to the neccessity to include both files, or find tools to concatenate them. In this post, we will go through a simple example of setting up and running Kotlin to JavaScript.

Setup

There are different ways to setup Kotlin to JavaScript based on the IDE or the used build tool (more details can be found in the official documentation). For this tutorial, we are going to choose the Maven way, as this is the build tool we use often. After spining up a simple maven project through IntelliJ, the following dependencies and plugins need to be added:

         <dependencies>
                <dependency>
                    <groupId>org.jetbrains.kotlin</groupId>
                    <artifactId>kotlin-stdlib-js</artifactId>
                    <version>${kotlin.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.jetbrains.kotlin</groupId>
                    <artifactId>kotlin-stdlib</artifactId>
                    <version>${kotlin.version}</version>
                </dependency>
            </dependencies>
            <build>
                <sourceDirectory>src/main/kotlin</sourceDirectory>
                <plugins>
                    <plugin>
                        <groupId>org.jetbrains.kotlin</groupId>
                        <artifactId>kotlin-maven-plugin</artifactId>
                        <version>${kotlin.version}</version>
                        <executions>
                            <execution>
                                <id>compile</id>
                                <phase>compile</phase>
                                <goals>
                                    <goal>js</goal>
                                    <goal>compile</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>test-compile</id>
                                <phase>test-compile</phase>
                                <goals>
                                    <goal>test-js</goal>
                                    <goal>test-compile</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-dependency-plugin</artifactId>
                        <executions>
                            <execution>
                                <id>unpack</id>
                                <phase>compile</phase>
                                <goals>
                                    <goal>unpack</goal>
                                </goals>
                                <configuration>
                                    <artifactItems>
                                        <artifactItem>
                                            <groupId>org.jetbrains.kotlin</groupId>
                                            <artifactId>kotlin-stdlib-js</artifactId>
                                            <version>${kotlin.version}</version>
                                            <outputDirectory>${project.build.directory}/js/lib</outputDirectory>
                                            <includes>*.js</includes>
                                        </artifactItem>
                                    </artifactItems>
                                </configuration>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>

the kotlin-maven-plugin compiles kotlin to byte code through the compile goal and compiles the source code to JavaScript through the js goal. The kotlin-stdlib-js is used by the maven-dependency-plugin for including the kotlin.js file which contains the JavaScript version of Kotlin’s runtime and standard library. kotlin.js is static and does not change from an application to another, so it is possible to copy it manually or to import it directly in the HTML page from a link (e.g a CDN). kotlin.js is tied to the used Kotlin version.

Example :

Let’s print a Hello world to the console and examine the generated JavaScript:

fun main(args: Array<String>) {
    println("Hello World!")
}

Generated kotlinjs-intro.js:

if (typeof kotlin === 'undefined') {
  throw new Error("Error loading module 'kotlinjs-intro'. Its dependency 'kotlin' was not found. 
                   Please, check whether 'kotlin' is loaded prior to 'kotlinjs-intro'.");
}
this['kotlinjs-intro'] = function (_, Kotlin) {
  'use strict';
  var println = Kotlin.kotlin.io.println_s8jyv4$;
  function main(args) {
    println('Hello World!');
  }
  var package$com = _.com || (_.com = {});
  var package$gwidgets = package$com.gwidgets || (package$com.gwidgets = {});
  var package$kotlinjs = package$gwidgets.kotlinjs || (package$gwidgets.kotlinjs = {});
  package$kotlinjs.main_kand9s$ = main;
  main([]);
  Kotlin.defineModule('kotlinjs-intro', _);
  return _;
}(typeof this['kotlinjs-intro'] === 'undefined' ? {} : this['kotlinjs-intro'], kotlin);

As mentionned earlier, the generated script looks for defined Kotlin runtime methods and classes and throws an error if kotlin.js is not already loaded. This may lead to issues if scripts are included in the body or have “defer” attributes because the order is important. One possible solution is to use JavaScript build tools such as Grunt or Gulp to concatenate the two scripts.

Another inconvenience is the size of the scripts. Minifying and optimizing the JavaScript code is important for production settings. While GWT and Scala.js provide the user with the option to minify the generated script or run the Closure compiler for even more optimization, Kotlin leaves this task to the developer.

For this simple example, the total size loaded is about 1.51 MB, which is not ideal compared to GWT or Scala.js or even other JavaScript frameworks (check out this comparison between different front end frameworks). After minifying and concatening both scripts, the result is:

which is is better, but still far behind GWT and Scala.js.

	Size of .js for printing a Hello World to the console
GWT	59.5 KB (.nocache.js plus the loaded module)
Scala.js	11.6 KB
Kotlin to JavaScript	1.1 MB

Ecosystem

Kotlin JavaScript seem to have several bindings for popular JavaScript Librairies (https://github.com/kodando/kodando, https://github.com/JetBrains/kotlin-wrappers, and many others) like react, jquery, and also a dom API, but the ecosystem remains small as Kotlin in itself is a niche and relatively new compared to other JVM languages.

Wrap-up

Kotlin to JavaScript is an interesting tool, but it seems like it is still in its infancy and still has a lot to learn. According to Kotlin’s documentation, Kotlin to JavaScript can be used to target both front-end and server side JavaScript. From a front-end perspective, Scala.js and GWT seem like better options. We will explore the generation of server side JavaScript in coming posts.

Reactive GWT

Wed, 09 May 2018 15:11:39 +0000

Introduction

Reactive programming’s popularity has tremendously grown over the last 4 or 5 years. This can tell us that the use case of reactive applications is now valid more than ever. The strain on backend systems has increased and accordingly the need to handle this strain with minimal resources. Reactive programming is seen as a way to increase efficiency and throughtput while reducing resource consumption. The popularity of reactive programming led to the development of reactive extensions for most of the programming languages and platforms: GWT is no exception. In this post, we will provide an example of usage for rxjava-gwt which is the reactive extension for GWT.

About rxjava-gwt

rxjava-gwt is the adaptation of RxJava to GWT, and not a wrapper for RxJs as some may believe. According to the project creator Ignacio Baca, adapating RxJava to GWT is more useful than wrapping RxJs, expecially if the Rx code is shared between the client and the server, because here the behaviour is exactly the same. Also, this introduces the possibility of sharing custom operators or Rx compositions.<h2 class=”underline-section id=”use-cases”>Use Cases</h2>

From a backend point of view, reactive programming is seen as way to increase efficiency and throughtput, and to achieve requests with the minimal resource consumption, but how about the front-end ? Well, we know that JavaScript is inherently asychronous and the usage of callbacks/Promises is common, so what does reactivity has to add? First, it can help make the application more responsive if the application is calling external datasources (e.g HTTP requests, websockets, server sent events) by transforming those sources into a stream and reacting as data pours in rather than waiting for the integrity of the data to be available. Second, reactive programming can help combine several event sources into one main stream if the action to be taken is common.

Example

Suppose we want to create a simple UI for the famous curl library. We want to have three fields (url, method, and body data), and we want our curl command to be generated as we type along. This looks like a good use case to introduce reactive programming as we have several event sources that require the same kind of processing. Using the traditional mode of programming, we would have to do the same action for every event handler.

HTML

<pre class="brush:xml"><div class="form-container">
    <label for="url">URL:</label>
    <input id="url" type="text"></input>
    <label for="method">Method: </label>
    <select id="method">
      <option selected value="GET">GET</option>
      <option value="POST">POST</option>
      <option value="PUT">PUT</option>
      <option value="DELETE">DELETE</option>
      <option value="PATCH">PATCH</option>
      <option value="HEAD">HEAD</option>
      <option value="OPTIONS">OPTIONS</option>
      <option value="CONNECT">CONNECT</option>
      <option value="TRACE">TRACE</option>
    </select>
    <label for="data">Data: </label>
    <textarea id="data"></textarea>
    <div id="result">curl <span id="generatedCommand"></span></div>
  </div>
</pre>

Code:

  HTMLInputElement urlInput = (HTMLInputElement) DomGlobal.document.getElementById("url");
  HTMLSelectElement methodInput = (HTMLSelectElement) DomGlobal.document.getElementById("method");
  HTMLTextAreaElement dataInput = (HTMLTextAreaElement) DomGlobal.document.getElementById("data");
  HTMLElement generatedCommand = (HTMLElement) DomGlobal.document.getElementById("generatedCommand");
  final String[] commands = new String[3];

    Observable<Command> urlStream = Observable.create((emitter) -> {
      urlInput.onkeyup = (event) -> {
        HTMLInputElement urlInputTarget = (HTMLInputElement) event.target;
        emitter.onNext(new Command(2, urlInputTarget.value));
        return null;
      };
    });

    Observable<Command> methodStream = Observable.create((emitter) -> {
      methodInput.onchange = (event) -> {
        HTMLSelectElement methodSelect = (HTMLSelectElement) event.target;
        emitter.onNext(new Command(1, "-X"+methodSelect.value));
        return null;
      };
    });


    Observable<Command> dataStream = Observable.create((emitter) -> {
      dataInput.onkeyup = (event) -> {
        HTMLTextAreaElement dataInputTarget = (HTMLTextAreaElement) event.target;
        emitter.onNext(new Command(3, "-d '"+dataInputTarget.value+"'"));
        return null;
      };
    });

    Observable.merge(urlStream, methodStream, dataStream).subscribe((obs) -> {
      commands[obs.position - 1] = obs.value;
      generatedCommand.textContent = String.join(" ", Stream.of(commands)
                                                            .filter(Objects::nonNull)
                                                            .collect(Collectors.toList()));
    });
  }
}

Conclusion

rxjava-gwt opens the doors to the reactive world for GWT developers. We have seen some use cases that make sens for reactive programming to be used, so it is about time for GWT developers to try the reactive model in their applications when it make sens.

Source code: https://github.com/zak905/reactive-gwt

Other examples:

Snake game https://github.com/ibaca/rxsnake-gwt
Classic breakout game https://github.com/ibaca/rxbreakout-gwt
Paint app https://github.com/ibaca/rxcanvas-gwt

Working with JSON in Scala.js

Tue, 08 May 2018 08:30:10 +0000

Introduction

Working with JSON is almost inevitable regardless of the environment. In this post, we will go through different ways of serializing/deserializing (or encoding/decoding as some may call it) objects from/to JSON in Scala.js. As of the date this post is written, there are three main tools that convert objects to/from JSON:

uPickle
Circe
scalajs-dom (using JSON.stringify() and parse())

We will use the following object for all the examples for uPickle and Circe:

case class Car(id_disqus: String, brand: String, model: String) {}

using scalajs-dom requires a slight modification to the object as only js.Object is allowed

 class Car extends js.Object {
  var id_disqus: String = _
  var brand: String = _
  var model: String = _
}

Serializing

uPickle:

Using uPickle, it is enough to create an object that configures the types to be read/written :

import upickle.default.{ReadWriter => RW, macroRW}

object Car{
  implicit def rw: RW[Car] = macroRW
}

and then:

  val mercedes = new Car("1", "Mercedes", "2015")
    
    val mercedesJSON = write[Car](mercedes)

     println(mercedesJSON)

     //result: {"id":"1","brand":"Mercedes","model":"2015"}

Circe:

Circe requires the configuration of encoders/decoders:

import io.circe.{Decoder, Encoder}
import io.circe.generic.semiauto._

object Expense {
  implicit val carDecoder: Decoder[Car] = deriveDecoder
  implicit val carEncoder: Encoder[Car] = deriveEncoder
}

and then:

   import io.circe.syntax._
    val mercedes = new Car("1", "Mercedes", "2015")

    val mercedesJSON = mercedes.asJson

    println(mercedes.asJson)
     
     //result is indented by default 🙂 for making the output oneline : .asJson.noSpaces
     /*  {
      "id": "1",
      "brand": "Mercedes",
      "model": "2015"
      }
      */

scalajs-dom:

using scalajs-dom requires the addition of scalacOptions += "-P:scalajs:sjsDefinedByDefault" to the build file, since @ScalaJSDefined is meant to be deprecated.

and then :

    val mercedes = new Car()
    mercedes.id = "10"
    mercedes.model = "1980"
    mercedes.brand = "Mercedes"
    println(JSON.stringify(mercedes))

    //result: {"id":"10","brand":"Mercedes","model":"1980"}

Deserializing

uPickle:

    val mercedesJSON = """{"id":"10","brand":"Mercedes","model":"1980"}"""
    val mercedes = read[Car](mercedesJSON)
    println(mercedes.id)
    // 10
    println(mercedes.model)
    //  1980
    println(mercedes.brand)
    // Mercedes

Circe:

     val mercedesJSON = """{"id":"10","brand":"Mercedes","model":"1980"}"""
    val mercedes = decode[Car](mercedesJSON).toTry.get
    println(mercedes.id)
    // 10
    println(mercedes.model)
    //  1980
    println(mercedes.brand)
    // Mercedes

scalajs-dom:

    val mercedesJSON = """{"id":"10","brand":"Mercedes","model":"1980"}"""
    val mercedes = JSON.parse(mercedesJSON).asInstanceOf[Car]
    println(mercedes.id)
    // 10
    println(mercedes.model)
    //  1980
    println(mercedes.brand)
    // Mercedes

Wrap up

We have walked through different libraries that allow serializing/deserializing JSON in Scala.Js. All the methods work in pretty much the same way, so there is no preferred way. The choice is left to the developer.

Introduction to using Vaadin in Spring Boot

Sat, 05 May 2018 10:05:44 +0000

Introduction

Vaadin’s way of doing things rely on server-side rendering, so it can be integrated naturally into frameworks like Spring. Vaadin’s Spring integration has been lying around for a while now, and provides tools for configuring and managing Vaadin within the Spring container, and if you are looking to use Vaadin with Spring Boot then you are in luck, because the Vaadin folks has already done the work of creating starters that autoconfigure pretty much everything so that you can get a simple UI up and running in matter of seconds. In this post, we will take a brief look on how to work with Vaadin in Spring boot.

Set up

The best way to create a Spring boot application is by using Spring Initializr. We are going to check Vaadin along with other standard Spring starters like Web and Security and click on “Generate Project”.

To create a view at the root of the context path, it is enough to create a class that extends UI and to annotate it with @SpringUI.

@SpringUI
public class Main extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        setContent(new Label("Hello"));
    }
}

If the path to be used is different than the root, the path property can be used: @SpringUI(path="/app").

UIs and Views:

Vaadin’s concept of user interfaces is similar to the concept of SPAs (Single Page Applications). A UI class is considered as the root container of several views. A view can be seen as a particular state of a UI. An application can have several UI classes, but it is recommended to have one UI with several views because it is more efficient. With the help of the Navigator, the routing can be configured from a view to another without leaving the page or the UI. To create a View, we simply need to implement the view interface and annotate it with @SpringView or if the scope (We will talk about view scopes in the future) is not really important, any Spring injection annotation would work :

@SpringView
public class Add extends Composite implements View {
    @PostConstruct
    public void init() {
        setCompositionRoot(new Label("I am a view"));
    }
}

We have used here the init() method with the @PostConstruct to make sure that Spring has finished injecting any fields (if there is any). It also possible to use the constructor in case there is no injected fields.

Example

Vaadin is a fully fledged framework, and has wide range of components that the developer can choose from (layouts, charts, grids..). It also offers the possibility to create custom components. As an example, we want to create a car collection app that allows entering and listing car models:

The Add view:

@SpringView
public class Add extends Composite implements View {

    @Autowired
    CarRepository repository;

    @Autowired
    DataProvider dataProvider;

    @PostConstruct
    public void init() {
        FormLayout formLayout = new FormLayout();
        Label title = new Label("Add new Car");
        TextField brandInput = new TextField("Brand: ");
        TextField modelInput = new TextField("Model: ");
        TextField pictureLinkInput = new TextField("Picture Link: ");
        Button button = new Button("Add", clickEvent -> {
            repository.save(new Car(brandInput.getValue(), modelInput.getValue(), pictureLinkInput.getValue()));
            Notification.show("saved");
        });
        formLayout.addComponent(title);
        formLayout.addComponent(brandInput);
        formLayout.addComponent(modelInput);
        formLayout.addComponent(pictureLinkInput);
        formLayout.addComponent(button);
        setCompositionRoot(formLayout);
    }
}

The list view:

@SpringView
public class List extends Composite implements View {

    @Autowired
    CarRepository repository;

    @Autowired
    DataProvider dataProvider;

    @PostConstruct
    public void init() {
        Grid&lt;Car&gt; carGrid = new Grid&lt;&gt;();
        carGrid.setWidth("100%");
        carGrid.setHeight("100%");
        carGrid.setDataProvider(dataProvider);
        carGrid.addColumn(Car::getId).setCaption("Id");
        carGrid.addColumn(Car::getBrand).setCaption("Brand");
        carGrid.addColumn(Car::getModel).setCaption("Model");
        carGrid.addColumn((ValueProvider&lt;Car, Object&gt;) car -&gt; 
        new ExternalResource(car.getPictureLink())).setCaption("Picture")
        .setRenderer(new ImageRenderer()).setResizable(true);
        setCompositionRoot(carGrid);
        setSizeFull();
    }
}

The Main UI:

@SpringUI(path="app")
@StyleSheet({"http://localhost:8080/styles.css"})
public class Main extends UI {

    @Autowired
    Add addView;

    @Autowired
    List listView;

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        HorizontalLayout rootLayout = new HorizontalLayout();
        rootLayout.setSizeFull();
        HorizontalLayout mainarea = new HorizontalLayout();
        mainarea.setWidth("80%");
        Navigator navigator = new Navigator(this, mainarea);
        navigator.addView("", addView);
        navigator.addView("add", addView);
        navigator.addView("list", listView);


        CssLayout sideNav = new CssLayout();
        sideNav.setSizeFull();
        sideNav.addStyleName("sidenav");
        sideNav.setId("sideNav");
        sideNav.setWidth("20%");

        Button link1 = new Button("Add", e -> navigator.navigateTo("add"));
        link1.addStyleNames(BUTTON_LINK, MENU_ITEM);
        Button link2 = new Button("List", e -> navigator.navigateTo("list"));
        link2.addStyleNames(BUTTON_LINK, MENU_ITEM);
        sideNav.addComponent(link1);
        sideNav.addComponent(link2);
        rootLayout.addComponent(sideNav);
        rootLayout.addComponent(mainarea);
        setContent(rootLayout);
    }
}

We have created two views: one form for adding cars and a grid for displaying them. The UI class wires up the two views using the navigator. The UI is composed of two parts: a side navigation bar with links to views and the main area which is the variable part. We have configured the navigator to dispatch views only in the main area, and configured the routes to each view:

        Navigator navigator = new Navigator(this, mainarea);
        navigator.addView("", addView);
        navigator.addView("add", addView);
        navigator.addView("list", listView);

it is important to have a default "" empty route because usually the route is not set on start up. As Vaadin uses its own themes and stylesheets, the @StyleSheet annotation comes handy in case custom styles are to be introduced. Our views and UIs are wired up to the Spring container, so it is possible to inject any Spring bean. For example, we injected the CarRepository which is a JpaRepository for performing database operations on Car entities.

Security

Vaadin uses its own CSRF tokens, so the Spring CSRF mechanism should be disabled for the app to work properly, if Spring Security is used. A minimal security configuration can look like:

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers("/app**").authenticated().and().formLogin().and().csrf().disable();
    }
}

Wrap up

Vaadin can be seen as an alternative for rapidly creating UIs with a Spring Boot backend. Vaadin may be easy to set up at first, but it appears that the learning curve is not that smooth when complexity increases. Another drawback that may be noticed when working with Vaadin (not only with Spring) is having to restart the whole app (Spring Container takes a while to start usually) every time a change is made, which leads to the necessity of setting up HotSwap or similar tools for hot reloading the code without having the restart application.

Source code: https://github.com/zak905/vaadin-spring-boot

Developing Web Components in Scala.js

Wed, 02 May 2018 10:31:09 +0000

Introduction

Scala.js is a compiler that allows producing JavaScript from Scala. It focuses on simplicity and the elimination of borders between the source and the destination language so that developers can write JavaScript-like code while benefiting from all the features of Scala. Scala.js seems to be quickly evolving, and is almost near the 1.0 release, which is the first production ready version. It is also catching up with the changing JavaScript syntax and APIs. For example, one interesting feature of Scala.js is the support of ES6 syntax which introduces things like classes and modules in JavaScript. ES6 syntax is required when developing Web Components based on the standard JavaScript APIs, and by supporting ES6, Scala.js offers the possibility to write reusable web components with nothing but standard JavaScript APIs. In this post, we will provide an example of writing web components in Scala.js, and how to combine web components to form a web application.

Components oriented approach

Following the modern front development paradigms, it is recommended to follow a components oriented approach or architecture when developing web applications for better modularity and separation of concerns. According to Dan Shapiro, components can be seen as a small feature that makes up a piece of the user interface. Components constitue the core functionality of several JavaScript frameworks like Angular and React. By using such frameworks, the developer can have a powerful set of tools at hand, however; this can create a lock-in and can lead to several issues in case breaking changes are introduced into the frameworks. Using the standard web component APIs can have its benefits in the way that the application has no dependencies and is somehow lightweight and easily adaptable to changes. In this example, we would like to develop an expense management application that allows adding, listing, and deleting expenses. As this is a demonstration, we want the application to use the browser’s local storage for storing the data. We can imagine the structure of our application as follows:

<app-element>
<header-bar></header-bar>
<side-nav ></side-nav>
<main-area >
    <add-section></add-section>
    <list-section></list-section>
    <delete-section></delete-section>
</main-area>
</app-element>

Accordingly, we are going to develop the above components and glue them together to make up our application.

Implementation

The setup:

In addition to the basic Scala.js setup described in the documentation, we are going to need to configure the Scala.js linker to produce ES6 (ECMAScript2015) JavaScript, so we need to add the following to the build.sbt:

scalaJSLinkerConfig ~= { _.withOutputMode(OutputMode.ECMAScript2015) }

Additionally, we need to enable Scala.js defined types (aka non native javascript types), to be exported to JavaScript by default by adding the following to the Scala build file:

scalacOptions += "-P:scalajs:sjsDefinedByDefault"

The missing pieces:

Working with web components require some APIs that are not present by default in scalajs-dom, so we will need to write facade types for those before getting started. The first one is the CustomElementsRegistry object present in the global Window :

@js.native
@JSGlobal
class Window extends dom.Window {
   val customElements: CustomElementsRegistry = js.native
}

CustomElementsRegistry definition:

  @js.native
  trait CustomElementsRegistry extends js.Any {
    def define(name: String, definition: Any ) : Unit = js.native
  }

In this way we can register our custom elements by executing window.customElements.define("add-section", js.constructorOf[AddSectionElement]), pretty much in the same way as described in the JavaScript documentation

Template and Shadow Dom are integral parts of the core specifications of web components and are important tools for developing web components. We are going to create the necessary objects and methods for enabling those as they are also missing from scalajs-dom.

@js.native
@JSGlobal
class HTMLTemplateElement extends HTMLElement {

  val content: HTMLElement = js.native
}

and as the HTMLElement object misses the attachShadow method, we are going to extend it to add it:

@js.native
@JSGlobal
class HTMLElement extends org.scalajs.dom.raw.HTMLElement {
   def attachShadow(options: js.Any) : org.scalajs.dom.raw.HTMLElement = js.native
}

We have now filled the missing gaps and we can start developing our components.

The components:

It is more convenient to use templates and slots instead of creating elements programatically.

The app-element component connects between the side navigation side-nav bar element and the main-area. It needs to detect changes when a link is clicked on the side bar and route to the corresponding section. The custom elements specification defines lifecycle callbacks that are executed when a particular event occurs. For example, we use here connectedCallback to define the logic used by the component to route from a section to another. connectedCallback is invoked when the element is connected to DOM. The general guidelines (e.g Google’s guide to Custom Elements) recommend to put all the setup code and logic inside the connectedCallback. Our app-element component looks like:

template

<template id="app-element-template">
<slot name="header-bar"></slot>
<slot name="side-nav"></slot>
<slot name="main-area"></slot>
</template>

AppElement.scala

class AppElement extends HTMLElement {


  var template: HTMLTemplateElement = dom.document.getElementById("app-element-template").asInstanceOf[HTMLTemplateElement]
  var shadow = this.attachShadow(JSON.parse("{\"mode\": \"open\"}"));
  shadow.appendChild(template.content.cloneNode(true));


  def connectedCallback(): Unit  = {
      initRouter()


    var sections = getMainArea().getAllSections()

    for (i <- 0 until sections.length) {
      var section = sections.item(i).asInstanceOf[MainAreaSectionElement]
      getSideNav().addLink(section.getName())
    }
    updateUI()
  }

  private def getSideNav(): SideNavElement = {
    return this.querySelector("side-nav").asInstanceOf[SideNavElement]
  }

  private def getMainArea(): MainAreaElement = {
    return this.querySelector("main-area").asInstanceOf[MainAreaElement]
  }


  def initRouter(): Unit = {

    dom.window.addEventListener("hashchange", (event: Event)  => {

      val hash = dom.window.location.hash.replace("#", "")
      getMainArea().select(hash)

    }, false)
  }

  def updateUI(): Unit = {
    val hash = dom.window.location.hash.replace("#", "")
    if ( !hash.isEmpty) {
      getMainArea().select(hash)
    } else {
      getMainArea().selectFirst()
    }
  }
}

Finally, for the component to work properly, it needs to be registered:

window.customElements.define("app-element", js.constructorOf[AppElement])

Components reuse:

Since Scala supports object oriented features like inheritence and polymorphism, our web components can use object orientation for better code usage and even more modularity. For example, the list-section and the delete-section both render a table with the current expenses. The difference between the two is that the delete-section needs to add a checkbox before each row to allow the user to select which expense to delete. Accordingly, we can make the delete-section inherit from the list-section element.

template

    <template id="main-area-section-template">
      <!-- styles where omitted for better readabiltiy -->
      <section> 
          <div class="container">

          </div>
      </section>
  </template>

ListSectionElement.scala

  class ListSectionElement extends MainAreaSectionElement {

    var dataTable: HTMLTableElement = null;
    setName("List")

    def connectedCallback(): Unit  = {
      renderTable()
    }

    def renderTable(): Unit = {

      dataTable = dom.document.createElement("table").asInstanceOf[HTMLTableElement]
      dataTable.classList.add("data-table")
      val tableHeader = dom.document.createElement("thead").asInstanceOf[HTMLElement]
      val idHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
      idHeaderCell.textContent = "id"
      val amountHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
      amountHeaderCell.textContent = "amount"
      val dateHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
      dateHeaderCell.textContent = "date"
      val reasonHeaderCell = dom.document.createElement("th").asInstanceOf[HTMLElement]
      reasonHeaderCell.textContent = "reason"

      val tableHeaderRow = dom.document.createElement("tr").asInstanceOf[HTMLTableRowElement]

      tableHeaderRow.appendChild(idHeaderCell)
      tableHeaderRow.appendChild(amountHeaderCell)
      tableHeaderRow.appendChild(dateHeaderCell)
      tableHeaderRow.appendChild(reasonHeaderCell)

      tableHeader.appendChild(tableHeaderRow)
      dataTable.appendChild(tableHeader)

      for (i <- 0 until dom.window.localStorage.length ) {
        val key = dom.window.localStorage.key(i)
        val expenseJsonOption = Option(dom.window.localStorage.getItem(key))
        if (expenseJsonOption.isDefined) {
        val expense = decode[Expense](expenseJsonOption.get).toSeq.last
            val row = dom.document.createElement("tr").asInstanceOf[HTMLTableRowElement]
            val idCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            idCell.textContent = expense.id
            val amountCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            amountCell.textContent = expense.amount
            val dateCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            dateCell.textContent = expense.date
            val reasonCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
            reasonCell.textContent = expense.reason
            row.appendChild(idCell)
            row.appendChild(amountCell)
            row.appendChild(dateCell)
            row.appendChild(reasonCell)
            dataTable.appendChild(row)
        }
      }
      getContainer().appendChild(dataTable)
    }

    def refreshUI(): Unit = {
      clear()
      renderTable()
    }
  }

DeleteSectionElement.scala:

class DeleteSectionElement extends ListSectionElement {

  setName("Delete")

  override def connectedCallback(): Unit  = {
       this.renderTable()
  }

  override def renderTable(): Unit = {
    super.renderTable()
    val rows = dataTable.querySelectorAll("tr")

    val headerRow = dataTable.querySelector("thead > tr").asInstanceOf[HTMLTableRowElement]
    val emptyHeaderCell = dom.document.createElement("th")
    headerRow.insertBefore(emptyHeaderCell, headerRow.firstChild)

    for (i <- 1 until rows.length) {
      val row = rows.item(i)
      val deleteCell = dom.document.createElement("td").asInstanceOf[HTMLTableDataCellElement]
      val deleteCheckBox = dom.document.createElement("input").asInstanceOf[HTMLInputElement]
      deleteCheckBox.`type` = "checkbox"
      deleteCheckBox.id = row.firstChild.textContent
      deleteCell.appendChild(deleteCheckBox)
      row.insertBefore(deleteCell, row.firstChild)
    }

    val deleteButton = dom.document.createElement("button").asInstanceOf[HTMLButtonElement]
    deleteButton.textContent = "Delete selection"
    deleteButton.classList.add("action-button")

    deleteButton.addEventListener("click", (event:Event) => {
      val rows = dataTable.querySelectorAll("tr")
      for (i <- 1 until rows.length) {
        val row = rows.item(i)
        val input = row.asInstanceOf[HTMLTableRowElement].querySelector("td > input").asInstanceOf[HTMLInputElement]
        if (input.checked) {
          dom.window.localStorage.removeItem(input.id)
        }
      }
      dom.document.dispatchEvent(new wrappers.Event("deleteExpense"))
    })

    getContainer().appendChild(deleteButton)
  }

  override def refreshUI(): Unit = {
    clear()
    renderTable()
  }
}

we can notice that DeleteSectionElement not only uses the same table used by its parent ListSectionElement, but also makes use of the render method and overrides it. Since AddSectionElement (implementation can be found in the source code), ListSectionElement, and DeleteSectionElement all constitute sections of the main-area and share the same template and the same initialization code, we can create a parent element for all of them to factorize the common initialization code and methods:

abstract class MainAreaSectionElement extends HTMLElement {
  var template: HTMLTemplateElement = dom.document.getElementById("main-area-section-template").asInstanceOf[HTMLTemplateElement]
  var shadow = this.attachShadow(JSON.parse("{\"mode\": \"open\"}"))
  shadow.appendChild(template.content.cloneNode(true))

  def getContainer(): Element = {
    return this.shadow.querySelector(".container")
  }

  def setName(name: String): Unit = {
    this.setAttribute("name", name)
  }

  def getName(): String = {
    this.getAttribute("name")
  }

  def clear(): Unit = {
    var firstChild = getContainer().firstChild
    while(firstChild != null) {
      getContainer().removeChild(firstChild)
      firstChild = getContainer().firstChild
    }
  }

}

We have made MainAreaSectionElement abstract to prevent its initiaization and force elements to inherit from it. The clear, getContainer, setName, getName, clear are used/overrided by all the child elements.

We have seen how object orientation helped us effectively design and implement all *-section elements which is something the would not have been possible with the plain JavaScript implementation.

Components communication:

Components can communicate into different ways like custom events and by invoking each others methods. For example, when adding a new expense we need to tell the list-section and the delete-section to re-render because a new element was added. Same goes for when deleting an expense. To do so, we have created custom events called addExpense and deleteExpense that we dispatch each time these events occur:

dom.document.dispatchEvent(new wrappers.Event("deleteExpense"))

At the level of the main-area element, we listen to the events and take the appropriate actions:

    dom.document.addEventListener("deleteExpense", (event: Event) => {
      getListSection().refreshUI()
      getDeleteSection().refreshUI()
    })

Another way of communication between components is by invoking each others methods. For example, the app-element listens to hash link changes and asks the main-area to select the desired section :

    dom.window.addEventListener("hashchange", (event: Event)  => {
      val hash = dom.window.location.hash.replace("#", "")
      getMainArea().select(hash)

    }, false)

Cross-Browser compatibility:

Not all browser support web components by default (Only Chrome and Opera by default). A web component polyfill needs to be added in case the app is to be run on other browsers. More details can be found in the github repository page: https://github.com/WebComponents/webcomponentsjs

Wrap up

By supporting ES6, Scala.js opens a wide range of possiblities: using web components is one of them. The possibility of using web components makes Scala.js an attractive alternative for developing web applications while staying in the confort of the Scala language and benefiting from the support of IDEs.

source code: https://github.com/gwidgets/scalajs-webcomponents-demo

Running app: https://gwidgets.github.io/scalajswebcomponents

New GWT course available

Tue, 24 Apr 2018 09:56:08 +0000

We are happy to announce the publication of our new Udemy course about GWT and how to use GWT as a complementary framework for leveraging the benefits of Java while working with JavaScript. G-Widgets is an advocate of open source, and it will remain a provider of free tutorials and tips about JVM languages to JavaScript transpiling tools. This course is aimed at new learners and developers looking for a structured course.

A walk through the GWT wrapper for Vue.js: vue-gwt

Sat, 24 Mar 2018 10:30:25 +0000

Introduction:

Vue.js is one of the most popular JavaScript frameworks, along with Angular and React. It leverages modern techniques for building front end applications, and can come handy in maintaining apps that require considerable amount of JavaScript and CSS. The perks of Vue.js are numerous, and can be found in their documentation. In this post, we would like to focus on the GWT wrapper vue-gwt which was born recently with the increasing popularity of Vue.js. It is one of the most active projects in the GWT ecosystem. In addition to the nice Vue.js features, vue-gwt brings the robustness of Java to Vue.js, and introduces compile time checks for many things like variable initialization and types. One of the main aspects that caught our attention while testing Vue.js are its simplicity and smooth learning curve. With a minimal knowledge of JavaScript frameworks, the developer can immediately approach the framework. It is recommended that the developer gets familiarized with Vue.js first before starting to develop with its GWT adaptation. For the rest of the post, we will compare the following Vue.js demo application: https://github.com/zak905/vuejs-demo with its GWT version: https://github.com/zak905/vuejs-gwt-demo.

Vue.js meets GWT:

The demo application is an expenses entry application with two main components: a form for entering expenses, and a table for displaying expenses. The App component looks like:

JavaScript Version

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <label for="vat"> VAT in %</label>
      <input id="vat" type="number" v-model="vatRate">
    </div>
     <ExpenseForm :currencies="currencies" :vatRate="vatRate" :expenses="expenses" />
     <div class="divider"></div>
     <ExpenseList :currencies="currencies" :expenses="expenses"/>
  </div>
</template>

<script>
import ExpenseForm from './components/ExpenseForm.vue'
import ExpenseList from './components/ExpenseList.vue'

export default {
  name: 'app',
  components: {
    ExpenseForm,
    ExpenseList
  },
   data: () => ({
     vatRate: 20,
    expenses: [],
    currencies: [{name: "EUR", symbol: "&euro;"}, {name: "USD", symbol: "$"}, {name: "GBP", symbol: "&pound;"}],
  }),
  
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.divider {
  height: 30px;
}
</style>

GWT version:

AppComponent.html

<div id="app">
    <img style="width: 10%" src="./assets/logo.png">
    <div>
        <label for="vat"> VAT in %</label>
        <input id="vat" type="number" v-model="vatRate">
    </div>
    <expense-form :currencies="currencies" :vatRate="vatRate" :expenses="expenses" > </expense-form>
    <div class="divider"></div>
    <expense-list :currencies="currencies" :expenses="expenses" :vatRate="vatRate"> </expense-list>
</div>

AppComponent.java

@Component(components = {ExpenseFormComponent.class, ExpenseListComponent.class})
public class AppComponent extends VueComponent  {
    @JsProperty
    double vatRate = 20;

    @JsProperty
    List<Expense> expenses = new ArrayList<>();


    @JsProperty
    List<Currency> currencies = Arrays.asList(new Currency("EUR", "&euro;"),
                                              new Currency("USD", "$"),
                                              new Currency("GBP", "&pound;"));
}

As the style tag is not supported into *.html yet (watch this issue for updates), all the styles should be included in a separate *.css for the GWT version. For the component tag names, Vue.js supports the full name, and does the tranformations itself, while in vue-gwt the convention is that the component should end with Component for the .java/.html and if the component is included as a child of any other component it should be included as a kebab-case with the word Component being removed. Example: ExpenseFormComponent is included as a child of AppComponent as expense-form.

The ExpenseForm component looks like:

JavaScript version

<template>
  <div class="expense-form">
    <label for="amount">Amount: </label>
    <input type="number" id="amount" v-model="amount"/>
    <label for="amountVAT">VAT: </label>
    <input type="number" id="amountVAT" v-model="amountVAT" disabled/>
    <label for="currency">Currency: </label>
    <select id="currency" v-model="currency">
      <option v-for="currency in currencies">  </option>  
    </select>
    <label for="date"  >Date: </label>
    <input type="date" id="date" value="2018/03/06" v-model="date"/>
    <label for="reason">Reason: </label>
    <textarea id="reason" v-model="reason" />
    <button id="append" v-on:click="submitExpense"> Add Expense </button>
  </div>
</template>

<script>
export default {
  name: 'ExpenseForm',
  methods: {
    submitExpense: function(event) {
        this.expenses.push({"amount": this.amount, "date": this.date, "reason": this.reason, "vatRate": this.vatRate, "vat": this.amountVAT, "currency": this.currency});
    }
  },
  data: () => {
      return {
      amount: 0,
      date: '',
      reason: '',
      currency: ''
      }
  },
  props: {
    currencies: Array,
    expenses: Array,
    vatRate: Number,
  },
    computed: {
      amountVAT: function() {return parseFloat(this.vatRate / 100 * this.amount).toFixed(2)}
    }
}
</script>

//..styles etc,..

GWT version
ExpenseForm.html</p>

<vue-gwt:import class="com.gwidgets.client.dto.Currency"/>
<div class="expense-form">
    <label for="amount">Amount: </label>
    <input type="number" id="amount" v-model="amount"/>
    <label for="amountVAT">VAT: </label>
    <input type="number" id="amountVAT" v-model="amountVAT" disabled/>
        <label for="currency">Currency: </label>
    <select id="currency" v-model="currency">
            <option v-for="Currency currency in currencies">  {{ currency.getName() }} </option>
        </select>
    <label for="date"  >Date: </label>
    <input type="date" id="date" value="2018/03/06" v-model="date"/>
    <label for="reason">Reason: </label>
    <textarea id="reason" v-model="reason" />
    <button id="append" v-on:click="submitExpense"> Add Expense </button>
</div>

ExpenseForm.java

@Component
public class ExpenseFormComponent extends VueComponent {
    @JsProperty
    double amount =  0;
    @JsProperty
    String date = "";
    @JsProperty
    String reason="";
    @JsProperty
    String currency="";

    @Prop
    @JsProperty
    double vatRate;

    @Prop
    @JsProperty
    List<Expense> expenses;

    @Prop
    @JsProperty
    List<Currency> currencies;

    @JsMethod
    public void submitExpense() {
        expenses.add(new Expense(amount, date, reason, getAmountVAT(), vatRate, currency));
    }

    @Computed
    public double getAmountVAT() {
        return vatRate / 100 * amount;
    }
}

The main difference between the two versions is the type enforcement in:

       <select id="currency" v-model="currency">
            <option v-for="Currency currency in currencies">  {{ currency.getName() }}  </option>
        </select>

which requires a special import tag: <vue-gwt:import class="com.gwidgets.client.dto.Currency"/> The ExpenseList component looks like:

JavaScript version</p>

  <template>
    <div class="expense-list">
        <table class="expense-table">
            <thead>
                <th>Amount</th>
                <th>Date</th>
                <th>VAT rate %</th>
                <th>VAT</th>
                <th>Reason</th>
            </thead>
            <tbody>
                <tr v-for="expense in expenses">
                    <td> {{ expense.amount + getCurrencySymbol(expense.currency, currencies)}} </td>
                    <td></td>
                    <td></td>
                    <td> {{ expense.vat + getCurrencySymbol(expense.currency, currencies)}} </td>
                    <td></td>
                </tr>

            </tbody>
        </table>
    </div>
  </template>

  <script>
  export default {
    name: 'ExpenseList',
    props: {
      currencies: Array,
      expenses: Array,
    },
    methods: {
        getCurrencySymbol: (currencyName, currencies) => {
              for (let i = 0; i < currencies.length; i++ ) {
              if (currencyName === currencies[i].name)
                return currencies[i].symbol;
            }  
            return "$"
            }
    }
  }
  </script>

GWT version:
ExpenseListComponent.html</p>

<vue-gwt:import class="com.gwidgets.client.dto.Expense"/>
<div class="expense-list">
    <table class="expense-table">
        <thead>
        <th>Amount</th>
        <th>Date</th>
        <th>VAT rate %</th>
        <th>VAT</th>
        <th>Reason</th>
        </thead>
        <tbody>
        <tr v-for="Expense expense in expenses">
            <td> {{ expense.amount + getCurrencySymbol(expense.currency)}} </td>
            <td></td>
            <td></td>
            <td> {{ expense.amountVAT + getCurrencySymbol(expense.currency)}} </td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>

ExpenseListComponent.java

@Component
public class ExpenseListComponent extends VueComponent {
    @Prop
    @JsProperty
    double vatRate;

    @Prop
    @JsProperty
    List<Expense> expenses;

    @Prop
    @JsProperty
    List<Currency> currencies;

    @JsMethod
    public String getCurrencySymbol(String currencyName) {
        return currencies.stream()
                         .filter(currency -> currency.getName().equals(currencyName))
                         .findFirst()
                         .map(Currency::getSymbol)
                         .orElse("$");
    }
}

Once again the GWT version requires the Expense type to be specified.

What do you get with GWT on the top of Vue.js:

At first sight, the code in the .java seems a lot cleaner and better structured. Moreover, vue-gwt adds many checks that can enforce the integrity of data and help avoid going into production with a broken app. One thing that is checked by vue-gwt at compile time is variables intialization. Suppose you are rendenring some lists or tables, and you forgot create the variable in the v-for. For example let’s remove currencies field from AppComponent.java. With vue-gwt, you will get a compile time error and you will not be able to build the application:

[17,8] In AppComponent.html at line 7: Couldn't find variable/method "currencies". Make sure you didn't forget the @JsProperty/@JsMethod annotation.

In the JavaScript version, the app can be built and served even with missing currencies in data. There is a message displayed in the browser console in the development mode; but off course, it maybe too late if the app is already deployed. In a small application like this, the effect may be minimal, but the repercussions may not be pleasant for a large application.

Another benefit of using vue-gwt is taking advantage of new Java 8 APIs like optionals, streams…etc. Since the 2.8.0 version, features like streams and lambda expression are supported in GWT, and this may be a saver while working on complex transformations and data processing. For example, in the ExpenseListComponent we made use of the stream API to filter the currencies object:

    @JsMethod
    public String getCurrencySymbol(String currencyName) {
        return currencies.stream()
                         .filter(currency -> currency.getName().equals(currencyName))
                         .findFirst()
                         .map(Currency::getSymbol)
                         .orElse("$");
    }

To be fair, there is also a Stream API in JavaScript, but it is not yet supported by all the browsers.

Finally, vue-gwt enforces type checks in templates as mentionned earlier: <tr v-for="Expense expense in expenses">, which can make the application even more robust and resistant to changes introduced to data objects.

Wrap up:

Vue.js is a prominent JavaScript framework, and with vue-gwt, the developer gets even more on the top of it. vue-gwt introduces a new way of developing applications in GWT, by using .html templates and their corresponding .java classes, and the result is a robust Vue.js application with a Java codebase. On the other hand, using vue-gwt in dev-mode requires setting up the IDE for to automatically building/processing annotations, which can be considered as the annoying part of getting started, but it needs only to be done once. Also, vue-gwt is its 7th beta release, so it may still have some bugs, but it is under active development and it is moving steadily towards a stable release. GWT has met Vue.js, and it seems like GWT loves Vue.Js.

Some data about 2017, and plans for 2018 !

Sat, 06 Jan 2018 15:12:00 +0000

We would like to share some 2017 data:

First of all, we would like to thank the followers of this blog for their input and feedback. We have been doing our efforts to provide quality tutorials / tips about GWT mainly. We hope all of this is handy. We know there have not been so many, and the main reason is that there were some periods where we were undertaking client projects full time and nobody from the team was available to write . The quality of posts remains our focus. The number of views can also give insight to the community and people wondering about the future of GWT. Based on the analytics data, There is a constant and regular number of readers interested in GWT, so GWT is definitely still used. Compared to other frameworks, GWT can be seen as niche market used by web applications with special requirements like the need for sharing code between the client and the server, and the need for object orientation, strong typing that can cannot be offered right away by a native javascript app. The stagnant release cycle makes us wonder thought.

For the 2018, we are exploring other technologies/frameworks like Scala.js and Kotlin to JavaScript. The rise of reactive programming make us also want to include topics about it. We are planning to diversify this blog to include those topics.
The post about Scala.js was the one that got the highest number of views, so we are looking into writing more about this topic since Scala is also a JVM language. This would allows us to draw parallels between GWT and Scala.js. Kotlin looks like a promising JVM language, and the support for the to JavaScript seems is an attractive subject that would like to explore as well. With all that being said, we would like to say thank you to all our awesome readers.

Goodbye gwt-project-generator!

Mon, 01 Jan 2018 14:38:28 +0000

After watching the community feel for the project for a while, we have decided to shutdown the project. The objective of the project was to provide help with the initial bootstrap of a GWT app, based on the concept of Spring Initializr . It seems like a new GWT project is not created that often, if compared to Spring boot which is used for microservices, and thus the need for a bootstrap helper is more compelling. gwt-project-generator did receive some good feedback from the GWT community initially, but on the long run the interest seems to decrease, and this is the reason we have decided to discontinue it. The project is still on GitHub: https://github.com/gwidgets/gwt-project-generator, but not maintained anymore.

Introduction to Errai Framework

Sun, 24 Sep 2017 13:50:59 +0000

Errai is a framework developed and maintained by Red Hat in an attempt to combine the good aspects of the GWT and JEE worlds. According to Red Hat, Errai is a GWT-based framework for building rich web applications using next-generation web technologies. Behind this simple statement there is a radically different way of developing with GWT, and in the following post we will see why.

How to set up a project:

The official documentation suggests two different ways to setup a project:

Using the demo project: A hacky way to start a new project is to clone the errai-tutorial: git clone git@github.com:errai/errai-tutorial.git and adapt it to your project needs. Actually there is also an archetype at https://github.com/errai/archetypes, but it is deprecated as of now.
Using the Errai Forge Addon: JBoss Forge could be described as a sort of CLI for scaffolding projects. It is extensible with add-ons (there are a LOT of them) so that it may be used to create almost any type of project from scratch : Spring, JEE, Vaadin, GWT, and so on.

      forge --install org.jboss.errai.forge:errai-forge-addon,4.0.2.Final 
      forge
      project-new --named errai-tutorial --topLevelPackage com.gwidgets.errai.tutorial --version
          1.0.0-SNAPSHOT --finalName "Errai Tutorial" --type war --buildSystem Maven
      errai-setup --version-select 4.0.2.Final --logical-module-name com.gwidgets.errai.tutorial --module-name ErraiTutorial

After that applying the commands, we should have an empty scaffold of an Errai project called “errai-tutorial”.

Tutorial Project:

This tutorial is based on the project here: https://github.com/gitgabrio/errai-tutorial. We will follow a step by step approach, in which each step corresponds to a branch. To move from one step to another,
the branch needs to be checked out. In this project, we made use of some classes taken from the official Errai Tutorial.

Overall architecture:

Errai framework is strongly geared towards using JBoss Application Server, currently WildFly version 10. With the default configuration, at the first run, Maven will download the WildFly zip distribution in the local repository; then, during the build, it will uncompress it in the project’ build directory (target). The application will run inside an instance of this WildFly server, so to configure it you have to provide the WildFly properties as JVM arguments to the GWT plugin:

 <properties>
    <errai.dev.context>${project.artifactId}</errai.dev.context> 
    <as.version>10.0.0.Final</as.version>
   <errai.jboss.home>${project.build.directory}/wildfly-${as.version}</errai.jboss.home>
    <listening.address>127.0.0.1</listening.address>
    </properties>

    <plugin>
     <groupId>org.codehaus.mojo</groupId>
     <artifactId>gwt-maven-plugin</artifactId>
     <version>${gwt.version}</version>
     <executions>
      <execution>
       <goals>
       <goal>
        compile
        </goal>
       </goals>
      </execution>
     </executions>
     <configuration>
     <logLevel>INFO</logLevel>
     <noServer>false</noServer>
 <extraJvmArgs>-Xmx3096m
    -XX:CompileThreshold=7000 -Derrai.jboss.home=${errai.jboss.home}
    -Derrai.dev.context=${errai.dev.context}
    -Djboss.bind.address=${listening.address}
  </extraJvmArgs>
    
<server>org.jboss.errai.cdi.server.gwt.EmbeddedWildFlyLauncher</server>
<!--other configuration properties -->
</configuration>

A walk through Errai Features:

Errai offers different functionalities that could be enabled with the so-called features. Features are just maven jars added to the pom. You could add them manually but, since some feature requires more than one single jar, it is better to copy the ones in the provided tutorial or, even better, add them with Forge, using the following command (inside the Forge console):

errai-add-features --feature-select [name of the feature]

Errai-messaging:

git checkout messaging

This feature enables the ErraiBus. ErraiBus is the backbone of the messaging system used to exchange messages from/to endpoints. Endpoints may be instantiated at client or server side and the framework makes almost no difference between them: messages may go from/to any of them. Multiple listeners of a given subject may receive the messages addressed to that subject. Endpoints registers themselves to listen to a given subject passing a callback to the MessageBus.

For example, in the tutorial project there are a couple of endpoints in the ReceiverMessagePanel class:

public static final String CLIENT_SUBJECT = "ClientSubject";
 public static final String VARIABLE_SUBJECT = "VariableSubject";

private void subscriptions() {
        subscribe(CLIENT_SUBJECT);
        subscribe(VARIABLE_SUBJECT);
    }

    private void subscribe(String subject) {
        bus.subscribe(subject, message -> {
            String messageText = message.get(String.class, "text");
            logger.debug("Received " + messageText + " on " + subject);
            showReceived(subject, messageText);
        });
    }

Whenever a message is sent to the CLIENT_SUBJECT or VARIABLE_SUBJECT, the callback will be invoked. Messages are represented by JSON-formatted String and are sent through an instance of the RequestDispatcher. To send a message, the framework provides a utility class, MessageBuilder that, with a fluent style, allows to create the message and send it to the given subject. There are multiple options, but the simplest one is the following:

                 MessageBuilder
                .createMessage()
                .toSubject(HelloServerService.SERVER_SUBJECT)
                .signalling()
                .with("text", requestTextBox.getText())
                .noErrorHandling()
                .sendNowWith(dispatcher)

With this, we are sending a message, which will have a field text with a given String value, to the HelloServerService.SERVER_SUBJECT. The message is sent immediately with the given RequestDispatcher

errai-cdi-integration:

Errai CDI contains the implementation of the JSR-299 Contexts and Dependency Injection specification. It is also – by itself – an extension of the Errai-IOC feature, so adding CDI will automatically add IOC. For this feature to work properly you must add an “ErrayApp.properties” file at the root of every directory containing classes whose existence should be known by Errai. Moreover, we will enable the CDIServiceLocator inside the web.xml:

<servlet>
    <servlet-name>ErraiServlet</servlet-name>
    <servlet-class>org.jboss.errai.bus.server.servlet.DefaultBlockingServlet</servlet-class>
    <init-param>
      <param-name>service-locator</param-name>
      <param-value>org.jboss.errai.cdi.server.CDIServiceLocator</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

This feature does not implement all the JSR-299 specification, but it adds the possibility to produce and consume Events, so that the beans may interact while being completely decoupled. Usage of Events is demonstrated by ContactStorageServiceImpl and ReceiverEventPanel. Ignoring everything else, for the moment being, let’s focus on the Event creation:

@Stateless
@Service
public class ContactStorageServiceImpl implements ContactStorageService  {

    @Inject
    @Operation(CREATE)
    private Event<ContactOperation> created;

  // other fields and methods

public Response create(final ContactOperation contactOperation) {
        // This event is delivered to call connected clients.
        created.fire(contactOperation);
    }
}

Inside this class, the Event<ContactOperation> (specific for the CREATE operation type) has been injected; inside the create method Event.fire is called, and this will push the given event inside the context.

ReceiverEventPanel:

public void onRemoteCreated(final @Observes @Operation(Operation.OperationType.CREATE) ContactOperation contactOperation) {}

The @Observes annotation causes the onRemoteCreated method to be called when an Event<ContactOperation> (with the operation type CREATE) is fired.

errai-data-binding :

 git checkout persistence

With the data-binding it is possible to automatically populate fields in the user interface with the data of a specific DTO class.To enable that, such class should be annotated with @Bindable and should have standard getter/setter for its properties. @Templated-annotated ui beans (see later) will have their fields automatically synchronized with values of these classes. In our example, the Contact class will have such annotation, so that we could have all the stack (from client-side representation to server-side persistence) implemented in one single class:

@Bindable
@Portable
@Entity
@NamedQueries({
  @NamedQuery(name = Contact.ALL_CONTACTS_QUERY, query = "SELECT c FROM Contact c ORDER BY c.id")
})
public class Contact {}

errai-navigation :

This feature allows the creation of applications with multiple bookmarkable pages. Classes may be annotated with `@Page` to indicate their role and path, like ContactListPage below, which is marked as the default page of the application:

@Page(role = DefaultPage.class, path = "/contacts")
@Templated(value = "contact-page.html#contact-list", stylesheet = "contact-page.css")
public class ContactListPage {}

Only @Templated-annotated classes, or classes implementing (directly or indirectly) IsWidget can have the @Page annotation. Other annotations are used to invoke methods at specific page-events:

@PageShown is invoked when object is attached to the NavigationPanel.

@PageHiding is invoked when object is removed from the NavigationPanel.

Navigation between pages may be implemented using the org.jboss.errai.ui.nav.client.local.Navigation class, that offers some methods for that, like:

Navigation.goTo([PAGE_NAME])

Wrap-up:

Surely Errai offers a great deals of tools to develop a full JEE application on top of GWT. Beside all the User Interface enhancements, what is really interesting is the “blurring” of the boundaries between the client-side and the server-side of the code, especially for the messaging system.Using MessageBus or Events could really help a lot in building decoupled code that, in the end, would ease the application development and maintenance. On the other hand, this come with a price, and the price is the binding with an Application Server (WildFly is provided out-of-the-box in the examples, but any other one should be work). Working with Application Servers imply an overhead in terms of architecture and complexity, and there is a cost/benefit ratio that should be taken in account. We may consider the Errai framework as the JEE counterpart of a Spring+GWT application so, at the end of the day, it all resolve to the same old question: are you a JEE or a Spring developer?

Options objects bug in gwty-leaflet is fixed now.

Sat, 23 Sep 2017 14:25:29 +0000

A member of the users community reported a bug recently related with the use of TileLayerOptions object. The reason for that is this code:

			public TileLayerOptions build(){		
				TileLayerOptions options = new TileLayerOptions();
				options.minZoom = this.minZoom;
				options.maxZoom = this.maxZoom;
				options.maxNativeZoom = this.maxNativeZoom;
				options.tileSize = this.tileSize;
				options.subdomains = this.subdomains;
				options.errorTileUrl = this.errorTileUrl;
				options.attribution = this.attribution;
				options.tms = this.tms;
				options.noWrap = this.noWrap;
				options.zoomOffset = this.zoomOffset;
				options.zoomReverse = this.zoomReverse;
				options.opacity = this.opacity;
				options.zIndex = this.zIndex;
				options.updateWhenIdle = this.updateWhenIdle;
				options.detectRetina = this.detectRetina;
				options.bounds = this.bounds;
				options.crossOrigin = this.crossOrigin;
				options.pane = this.pane;
				options.className = this.className;
				options.keepBuffer = this.keepBuffer;
				options.updateWhenZooming = this.updateWhenZooming;	 
				options.updateInterval = this.updateInterval;
				options.minNativeZoom = this.minNativeZoom;		
				return options;	
			}

In the code above, if the user only sets few options, the result will be a Js object with all the options, even the null ones. For example, if we run the map initialization code below from the Starter Guide:

		MapOptions options = new MapOptions.Builder(L.latLng(52.485611, 13.416460), 11.0, 10.0)
	    		                       .maxZoom(17.0).build();
		
		final Map map = L.map("map", options);
			
		TileLayerOptions tloptions = new TileLayerOptions.Builder().minZoom(1).maxZoom(17).build();
		L.tileLayer(MAP_URL, tloptions).addTo(map);

The created passed to the JavaScript L.setOptions(this, options) is :

This is not what leaflet expects. So the below error is thrown in the leaflet js:

TitleLayer options, and possibly options of other Leaflet objects, expects an object with only the initialized values, and any undefined value may cause an error like the one above. So the solution was to get rid of default values, which are provided in the js( no need to set them), and to change the types of objects inside the builder from primitives to wrappers. Finally, before each object build a null check is introduced to avoid setting uninitialized objects:

    public TileLayerOptions build(){
			//the ifs statement are for preventing the creation of undefined attributes => mimicking original Leaflet behavior

			TileLayerOptions options = new TileLayerOptions();
			if(this.minZoom != null)
			 options.minZoom = this.minZoom;
			if(this.maxZoom != null)
			options.maxZoom = this.maxZoom;
			if(this.maxNativeZoom != null)
			options.maxNativeZoom = this.maxNativeZoom;
			if(this.tileSize != null)
			options.tileSize = this.tileSize;
			if(this.subdomains != null)
			options.subdomains = this.subdomains;
			if(this.errorTileUrl != null)
			options.errorTileUrl = this.errorTileUrl;
			if(this.attribution != null)
			options.attribution = this.attribution;
			if(this.tms != null)
			options.tms = this.tms;
			if(this.noWrap != null)
			options.noWrap = this.noWrap;
			if(this.zoomOffset != null)
			options.zoomOffset = this.zoomOffset;
			if(this.zoomReverse != null)
			options.zoomReverse = this.zoomReverse;
			if(this.opacity != null)
			options.opacity = this.opacity;
			if(this.zIndex != null)
			options.zIndex = this.zIndex;
			if(this.updateWhenIdle != null)
			options.updateWhenIdle = this.updateWhenIdle;
			if(this.detectRetina != null)
			options.detectRetina = this.detectRetina;
			if(this.bounds != null)
			options.bounds = this.bounds;
			if(this.crossOrigin != null)
			options.crossOrigin = this.crossOrigin;
			if(this.pane != null)
			options.pane = this.pane;
			if(this.className != null)
			options.className = this.className;
			if(this.keepBuffer != null)
			options.keepBuffer = this.keepBuffer;
			if(this.updateWhenZooming != null)
			options.updateWhenZooming = this.updateWhenZooming;	 
			if(this.updateInterval != null)
			options.updateInterval = this.updateInterval;
			if(this.minNativeZoom != null)
			options.minNativeZoom = this.minNativeZoom;
			
			return options;
		}

More details can be found in the github issue: https://github.com/gwidgets/gwty-leaflet/issues/12, and the commit:

https://github.com/gwidgets/gwty-leaflet/commit/35a91a6eb2bcabd11f68fbfe6bd3bab26ce259f7

New feature in gwty-leaflet: debug/prod mode.

Mon, 28 Aug 2017 09:40:01 +0000

We have added a new feature to gwty-leaflet: choosing whether the injected script is minified or no. LeafletResources class can be used to inject leaflet js/css directly from the Java code, and we think having an uniminified script can help in debugging and tracking errors directly in the browser. The new prototype for the whenReady method is:

public static void whenReady(boolean debug, OnloadCallbackFn function)

if debug flag is set to yes then the injected script will be unminified. For example:

//will inject leaflet-src.js instead of leaflet.js
LeafletResources.whenReady(true, 
				e -> 
		             {	 
	    MapOptions options = new MapOptions.Builder(L.latLng(52.485611, 13.416460), 11.0, 10.0)
	    		                       .maxZoom(400.0).build();	
		final Map map = L.map("map", options);
		L.tileLayer(MAP_URL, null).addTo(map);	

               return null;
              });

Vaadin Tip: building UIs declaratively

Wed, 05 Jul 2017 15:10:03 +0000

If you have used GWT, then you would have probably found UiBinder quite useful to design complex UIs. In our series of posts about Vaadin, we want to draw parallels between Vaadin and GWT. Vaadin offers several tools and components out of the box for building complex and good looking UIs. One of them is the possiblity of building UIs declaratively, like UiBinder. Compared to GWT, Vaadin offers the possibility to use .html files directly.

The programmatic way :

As in GWT, Vaadin UIs can also be built programmatically. For example, let’s suppose we want to build a simple form to add a task to a todo list. One way to do it programmatically:

public class MainUI extends UI {
@Override
protected void init(VaadinRequest request) {
// TODO Auto-generated method stub

FormLayout layout = new FormLayout();
TextField taskTitle = new TextField();
taskTitle.setCaption("Title");
taskTitle.setIcon(VaadinIcons.CHEVRON_DOWN);
TextArea taskDescription = new TextArea();
taskDescription.setCaption("Description");
taskDescription.setIcon(VaadinIcons.LINES);
DateField taskDate = new DateField();
taskDate.setCaption("Date");

Button button = new Button("Add");
button.setIcon(VaadinIcons.PLUS);

layout.addComponent(taskTitle);
layout.addComponent(taskDescription);
layout.addComponent(taskDate);
layout.addComponent(button);
setContent(layout);
}
}

Result:

The declarative way :

The declarative way can be useful if the UI is complex, and has nested components. Vaadin developed HTML custom elements that can be bound to Java components. The custom elements start with vaadin-. The rest of the name of the element can extracted from the java class by separating words and making it lower case, as detailed in Vaadin’s website. The first step in creating a UI in a declarative way is to create the html file, let’s name it Form.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="vaadin-version" content="8.0.5">
</head>
<body>
<vaadin-form-layout>
<vaadin-text-field icon="fonticon://Vaadin-Icons/e7ce" caption="Task Name" _id="todoTitle">
</vaadin-text-field>
<vaadin-text-area icon="fonticon://Vaadin-Icons/e7ef" _id="todoDescription">
</vaadin-text-area>
<vaadin-date-time-field caption="Date" _id="todoDate">
</vaadin-date-time-field>
<vaadin-button icon="fonticon://Vaadin-Icons/e801"_id="todoButton">
Add
</vaadin-button>
</vaadin-form-layout>
</body>
</html>

The second step is to create a java class that will be bound to this file.

@DesignRoot
public class Form extends FormLayout {
	public Form() {
		Design.read("Form.html", this);
	}
}

now we can use it as a normal Component from our UI class:

      public class MainUI extends UI {
      @Override
      protected void init(VaadinRequest request) {
      setContent(new Form());
      }
      }

To bind fields from the .html to fields in the java class, the _id attribute need to be setup. For example, to bind our textfield:

<vaadin-text-field icon="fonticon://Vaadin-Icons/e7ce" caption="Task Name" _id="todoTitle">
</vaadin-text-field>

and then we can add it to the java file and it will be automatically bound:

  @DesignRoot
  public class Form extends FormLayout {

      TextField todoTitle;

      public Form() {
    Design.read("Form.html", this);
          //we can directly use it without initialization

          }
  }

Vaadin provides also an interesting tool for interactively designing UIs: Vaadin Designer. Vaadin designer allows designing UIs using the mouse and drag-&-drop. We have used the tool for demo purposes only, so we cannot really evaluate it. Vaadin-Designer can help increasing productivity by reducing the time to build the UIs and taking care of the “boilerplate” part. Unfortunately, Vaadin Designer is not free of charge, and its added value depends from one project to another.

Take away:

Designing UIs in a programmatic way is not always convenient. Vaading has an interesting approach towards building UIs in a declarative way. The HTML custom elements provides a way to directly link .html files to java. Maybe this is a road to explore by GWT developers, as UiBinder will be removed in the next 3.0 version.

No more JSNI for gwty-leaflet

Mon, 03 Jul 2017 09:13:50 +0000

gwty-leaflet is mainly using Jsinterop for interfacing with LeafletJs. However, we have been using a little JSNI for defining Event objects, and the reason behind that was to benefit from the .cast() method for casting from the parent Event object to other types of child objects. Now JSNI is no longer used, and gwty-leaflet is 100 % Jsinterop, thanks to the work of olivergg. This github issue provides more details about the work done: https://github.com/gwidgets/gwty-leaflet/issues/7. The next step for gwty-leaflet is to replace the used HTML elements under .elemental package with Google’s Elemental 2.