GWTの新しい書き方 JBOSS elemento

GWT ( Google Web Toolkit) の新しい書き方を勉強中です

[GWT] (http://www.gwtproject.org/terms.html)

GWTは、JavaをJavaScriptに変換してWebアプリを作るテクノロジーです。
TypeScriptはTypeScriptをJavaScriptに変換しますが、その文法を覚えなければなりません。
記憶力が衰えてしまった私には、新しい言語(TypeScript)を覚えなくて良いというのが非常に魅力的に思えてなりません。

最新情報は [Modern GWT] ( https://padlet.com/lofidewanto/gwtintro) というサイトにまとめられています。

一番左の Introduction Articlesの中に記事をみつけました。

[Modern GWT, first steps] (https://dev.to/ibaca/modern-gwt-first-steps-509k)

この長い記事の中央ぐらいに、 4.Spice it up という項目「図」があります。

今後は、Elemental2 を使うか、RxJavaを使うかのどちらかが、良いそうです。

Elementoというのは、Elemental2を使うためのライブラリです。

とりあえず、Elemento が簡単に動作できたので、しばらくはこちらを勉強することにしました。

ソースは [elemento Github] (　https://github.com/hal/elemento　)からダウンロードできます。

maven は、たぶん [ こちら ] (https://mvnrepository.com/artifact/org.jboss.elemento/elemento-core)
です。

なお、上記の　Modern GWT, first steps の書き方は、少々古い様子です。
elemento Github のサンプルの方が最新ですので、こちらを信用しましょう。

elemento Github　を一式ZIPでダウンロードして、Windows10 + AdoptOpenJDK8で
動作できました。

あらかじめ、AdoptOpenJDK8とMaven 3系をインストールしておきます。
上記ZIPを展開し、 cd samples/gwt29
pom.xmlの45行目を HEAD-SNAPSHOTから 1.0.3に変更します

pom.xml

        <!-- dependency versions -->
        <elemento.version>1.0.3</elemento.version>

あとは、同フォルダーの README.md を参考にして、以下のコマンドでコンパイルして実行できます。

CMD.EXE

mvn gwt:devmode

ApplicationElement.javaの書き方が非常に特徴的です。

elemental2 の　Javaは、自動生成によって、生成されたクラスだそうで、あまりJavaっぽくない書き方になるそうです。ですが JBOSS Elementoを使うことで、Javaっぽい書き方ができるそうです。

JBOSS Elemento の書き方は、ビルダー（デザインパターンのビルダー）です。

StringBuilderは使われたことがあると思います。

Foo.java

StringBuilder sb = new StringBuilder();
sb.append("abc");
sb.append(123);
sb.toString();

JBOSS Elemento では、以下のJavaコードにより、その下のHTMLが生成できます

Bar.java

nav().css("todoapp").element();

Bar.html

<nav  class="todoapp"></nav>

先頭の nav() が、 new StringBuilder()に相当します。

最後の .element() は、 .toString()に相当します。

先頭の nav()が、不思議な書き方ですが、これはimport 文に秘密があります

Sample.java

import static org.jboss.elemento.Elements.*;

上記Elementsクラスの中に static なメソッドが沢山定義されています。

nav() はHTMLのnav とか、table() はHTMLのtableなど、HTMLの名前と
ほぼ対応が取れているので、すぐに覚えられるでしょう。

なお、以下のコードは、本番モードでコンパイルすると、GWTがJavaからJavaScriptに
変換して、ブラウザー内で、動いている点に注意してください。

Bar.java

nav().css("todoapp").element();

今日は、ここまで。お読みいただき、ありがとうございました。