GWT Material for Errai - part I - getting started

This post is a kind of introduction to the series of articles about great UI solution called GWT Material, which is an implementation of Material Design - a design language introduced by Google.
It's also oriented on Errai Framework integration - a great framework for GWT which offers Java EE like solutions client-side (yes, in the browser!).
The aim of this article is to collect basic steps how to generate a new application stub and get started.
In fact setting up GMD Errai application is very easy and I could finish this article now, since there are only two simple steps:

• to call mvn archetype:generate command properly,
• and then mvn gwt:run. 

But I would like to demonstrate also that it works great and what is the expected output step by step.

So it will look a bit different than Getting Started section you will find here. 

1. Creating a stub project.
   
   
   
   You will have to answer simple questions, further the application stub will be generated.
   
   
2. Test how it works
   

   Enter to the folder gmd-errai-sandbox and run the app by typing: mvn gwt:run. 

   After a while…

   You should see hello world screen which looks like this:
3. Test Super Developement Mode Go to ./gmd-errai-sandbox/src/main/java/com/domain/sandbox/client/local/page/HomePage.java and modify the label text by changing the method below: Click browser’s Refresh button. You will see compiling message… ...and after few seconds you will see the modified text. It works! :)
4. How about the errors?
   How about the errors while implementing your app? It simply can be visible in the browser. For instance in Chrome browser you are able to see it using stadard Developer Tools and its "Console" tab (F12 or ctr+shift+I or cmd+opt+I).
   
   TODO: to be updated... some demonstration
5. The next steps
   
   Ok, it works. Nothing impressing, right? ;-) What’s now?
   The next article will show how to extend your layout...
   Please also see this great demo of GMD: gwtmaterialdesign.github.io/gwt-material-demo-errai/ .
   And also note that you have a full source code here.
   
   Have fun!

The new AdWords UI uses Dart. What does it mean for GWT?

Recently Google has announced here that the new AdWords UI has been completly rewritten using Dart. I've found the interview with Joshy Joseph (the primary technical lead) very interesting.
Then I've compared Dart with the "new" GWT 3.0.

Ok, the new AdWords UI uses Dart. So what does it mean for GWT?

feature

Dart

GWT

explanation

transpiles well to Javascript

[x]

[x]

-

switch tech stacks easily

[ ]

[x]

GWT is Java, so you have a lot of other tools avaliable, and if you want you can even easily convert your classes i.e. to Kotlin in the future.

stronger type checking

[ ]

[x]

Dart users are excited about the work on Dart Strong Mode, Java has it already.

fast edit refresh

[ ]

[x]

Dart users are looking forward to cross-browser, fast edit refresh with the upcoming Dart Dev Compiler. Does it mean they are waiting for Super Dev Mode what GWT already has?

new js interop

[x]

[x]

-

being terse

[x]

[x]

Yes, when use GWT >= 2.8 with Java 8 it's also terse; if it's not enouth, there is Lombok, but I'm not sure how about GWT compatibility, but it's all about the syntax; I can gain the most when utilize framework features and here I mean Errai.

frameworks available

[x]

[x]

For Dart we can use Angular2, if about GWT I would go for Errai; for both Dart and GWT there are a lot of frameworks and even Angular for GWT if you really need.

native apps

[ ]

[x]

Ongoing work on Flutter for Dart; if about GWT we can use already Cordova, Phonegap, Appcelerator Titanium (via Titanium4J), ...

Do you agree?
What do you think about this summary?
For me the choice is obvious... GWT.

Especially when think about the future mentioned on the gwtproject.org, gwtcreate.com sites or articles like this or this.

A supplement for Titanium4j "Getting started"

Some time ago I have planned to write my own tutorial for getting started with Titanium4j, but... :-) Simply I haven't found enough spare time to do that. Today I had a thought that I could do at least a small step in this direction and share at least a piece of this bigger thing...
...that's how I came up with the idea to write this post - supplement for the official "Getting started".

First I would like to tell you why you should use Titanium4j.
As you probably already know, it is based on Apcellerator Titanium, an excellent and popular Cross-platform mobile app development solution for Java Script. Thanks to Titanium4j, you have now the Java API to build native mobile application which is/has:

• native UI,
• 99% WORA (Write Once Run Anywhere),
• easy,
• well documented (at least indirectly through the official JS specification),
• very good portability: Android, iOS, Windows (WP8) and Blackberry,
• still maintained, a new release is coming.

So it's really worth to try this technology! Here is the promised supplement.
The "Prerequisites" section of the official getting started is not widely described and I would like to add something from my side. I had a troubles on the beginning and I solved all the issues. Here is what I did to have it fully working!

Before you start your Titanium4j Java project, you need (one time) do the following steps.

1. Install the Appcelerator Command Line Tools (CLI) according to the description here (step 1-3). It is not said there, but I also had to install Titanium CLI using the command: 

An important note! Please avoid installing nodejs from the package manager! If about Ubuntu/Mint Linux I mean: "sudo apt-get install nodejs" since you can get some issues later!

After I had some troubles with 'appc setup' I chose this method:

I didn't go for Node.js v5 to try first the lower one. It worked for me, so I kept it.

I'm not sure now whether npm is delivered with the nodejs above, because I installed it separately in the way as suggested here.

Finally these versions worked for me with Titanium SDK release 5.1.1.GA

node -v
  ⇒ v4.2.4

npm -v
  ⇒ 2.14.12

So now everything is almost ready. The next steps are pretty easy.

2. Please Download GWT SDK. 

3. An Android SDK and iOS SDK and other are also needed to use emulator. 

When you run the Titanium CLI tool for the first time, you will be nicely guided to configure the environment. You will also have to login to the Appcelerator platform (with your free account credentials).

That's it. Now you can start to follow the steps from getting started: http://titanium4j.ahome-it.com/gettingstarted/.

This is a really great technology! Have fun!

Quick start with gwt-maven-plugin and important tip for easy running

Just a short tip regarding creating a new GWT project with using gwt-maven-plugin. When you create a new project following steps from the official guide, you will run something like this:

Before run generated application with command mvn gwt:run do not forget that webapp content has to be copied.
To achieve that you can change your pom.xml by adding <copyWebapp>true</copyWebapp>.

It should looks like below:

So once I click Launch Default Browser everything works fine and app is properly compiled.

It's possible also to use webAppCreator as in example here: http://www.gwtproject.org/doc/latest/polymer-tutorial/create.html

You can import your generated app to Eclipse using this plugin: http://gwt-plugins.github.io/documentation/gwt-eclipse-plugin/Download.html .
I've successfully imported it to IntelliJ IDEA.

Also the super feature GWT Super Dev Mode works just out of the box. After I changed something in the Java code I could simply refresh browser to see the changes!
That's because -Dgwt.superDevMode parameter by default is set to true.

Android Tabs with Fragments, ViewPager and TabLayout optimized by AndroidAnnotations

Motivation

This article was inspired by the situation. I wanted to use Tabs in my application. So I had generated the skeleton using IntelliJ IDEA. But this skeleton was full of deprecated stuff (for instance things like this: http://stackoverflow.com/a/28314294). I assume the same problem would happen with Android Studio. Since I was not satisfied, I decided to make the generated skeleton more actual according to API Level: 21 (Android 5.0 LOLLIPOP). But I also decided to introduce more clean way of implementation with using AndroidAnnotations. I share the final code.

Update Gradle dependencies

Configure your Gradle to use AndroidAnnotation as described here: https://github.com/excilys/androidannotations/wiki/Building-Project-Gradle

In addition add the following dependencies:

Create activity layout

First create the activity layout layout/activity_tabset.xml :

Create fragment 

Define layout for the fragment: layout/fragment_content.xml :

Define the logic:

Implement FragmentPagerAdapter

Now implement the adapter for your ViewPager.
Note that there are classes with underscore: TabsetActivity_.PlaceholderFragment_ which are generated by AndroidAnnotations. When everything is injected, this trick is not necessary. But here I could not use the Adapter as a bean and inject Fragment into it. The full explanation is in the last section. 

The Activity

Finally we can put all together in this simple activity TabsetActivity.java class.

Since Android Annotations are used here, please remember about some necessary thing regarding AndroidManifest.xml. You need to refer to the activity name with underscore, so it looks like following:

Run

The result looks like below:

Explanation

As you can see AndroidAnnotations made code more clean and simple to read.
You can compare with this classic way: https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout .
There are lot of things in methods like onCreateView() or may lines of code to deal with argument parameters in fragment implementation. Also the activity became more clean.

I was considering what about injecting SectionsPagerAdapter. There is possiblity to inject adapters by making them @EBean. But not in this case. It has to be derived from the abstrac class FragmentPagerAdapter which has no parameterless constructor :(
You can see here: https://android.googlesource.com/platform/frameworks/support/+/refs/heads/master/v4/java/android/support/v4/app/FragmentPagerAdapter.java

In other case in the next step I would consider injecting also fragments using @FragmentById annotation.
So it looks like there is no possibility to rid off calls of the classes with underscore like: PlaceholderFragment_.builder() . In spite of this drawback, the possibility to use builder instead of classic way of implementation is still a value.

That's all.

I hope this is helpful.
Enjoy!

Modern multi-platform mobile apps in Java (technologies overview)

Motivation

After several years spent in EJB world I wanted to come back to mobile apps development with some hobby projects. So there was a need to find some free, popular and comfortable Java mobile framework. The goal was to build modern multi-platform mobile app. I've decided to do a short research to find the most popular technology. Then I've realised it's not that easy to find the most accurate answer in just five seconds.

Article Updated 2016-01-08: added section about Codename One and described license information regarding the Titanium,
Article Updated 2016-04-15: Xamarin killed RoboVM 

Below is the overview:

• GWT
• GWT-Polymer
• mGWT
• Twitter Bootstrap wrapper
• jQuer Mobile wrapper (jqm4gwt) 
• J2Objc
• RoboVM RIP :-(
• JavaFX
• LibGDX
• Titanium4j
• Touch4J (ahome-touch)
• Vaadin
• Codename One
• decision

GWT

The obvious thought was about GWT (http://www.gwtproject.org/). But pure GWT was not exactly what I wanted to use, since I have some GWT experience. I remember about some traps. In the other hand I know that this technology has been transformed from a Google project to a fully open sourced project and GWT 3.0 is on the horizon. Now the community keeps working on making the GWT better and better. At the moment GWT 2.8 supports Java 8, JsInterop, SuperDev mode, and much more… http://goo.gl/FCDBgT https://goo.gl/bRjmZY There is also built-in support for third-party open-source libraries like: Polymer and Polymer Elements.

GWT-Polymer

I think I have to look a lot closer at GWT-Polymer, what seems to be quite promising as you can see in this tutorial. It's possible to build web apps quite easy using Polymer Web Components. What more, there is also a possibility to quick-start development with one of the templates like here: http://goo.gl/4TH6h7. The Java wrapper enabling Polymer Elements to be used in GWT project is named GWT-Polymer-Elements and is being developed by Vaadin Ltd. You may want to see also this showcase.

Picture source: http://gwtmaterialdesign.github.io/gwt-material-demo/#!templates

When I started my research I was interested in rapid development. The goal was to less concentrate on GUI and Widgets and focus more on application business logic. The templates mentioned above gave me such possibility, but I decided to continue my research to get full overview and...

mGWT

...the next technology I had a look was mGWT http://www.m-gwt.com/ which makes easier to create great looking and phonegap ready GWT based mobile apps. It brings typical mobile widgets and very performant animations to GWT applications. The technology has been developed by Daniel Kurka – the person very well known in GWT world. Daniel seems to be very busy recently, but with help of other project's contributors he found time to keep it compatible with recent GWT versions. If you want to have a look how does it look like, let's see this showcase: http://mobilegwt.appspot.com/platform/. I think it's still interesting technology. More info can be found here: https://github.com/mgwt/mgwt/wiki. After I looked at the examples, I have to say that I dislike some conventions in this technology (and in GWT in general). There are lots of framework's code elements accessed in static way. But I think it should be possible to inject most of them with using GIN (Guice for GWT). My goal is to write easy to test clean-code.

Picture source: https://github.com/mgwt/mgwt/wiki

Twitter Bootstrap wrapper

There is also a wrapper for Twitter Bootstrap which is very popular (demo site). You will be able to develop responsive, mobile-first apps in GWT by using plenty of components quite similar to those from mGWT. You can start with this starter project.

If you feel bored with Java, there are other JVM languages like Kotlin. This modern language is already quite popular and there is also wrapper for Bootstrap - the framework named Yested (demo site).

Picture source: https://www.script-tutorials.com/responsive-website-using-bootstrap/

jQuer Mobile wrapper (jqm4gwt) 

Quite similar results to those obtained by mGWT and Twitter Bootstrap wrapper, can be achieved also with jqm4gwt as you can see in this showcase. It's well documented and still mainained! I see some commits pushed to the GitHub repository a few days ago!

Picture source: https://internetperformanceexpert.files.wordpress.com

J2Objc

If about the technologies around GWT or Kotlin JavaScript compiler the code will be compiled to JavaScript and then with using for instance PhoneGap can be run on the mobile device. But what about the multi-platform native app?  

Picture source: http://www.amongtech.com/best-tools-to-develop-a-mobile-app-for-android-and-ios/

There is the technology called J2Objc which provides possibility to translate Java source code to Objective-C for the iOS. So then I think is should be possible to write the cross-platform native app quite easy. The project would be split in tree parts: “android”, “ios” and “core”. So the platform specific GUI related code would be placed in the proper place and could be build with available tools like Android UI Designer or Interface Builder provided by Xcode.

There is already a technology which joins this everything in similar way named…

RoboVM

One of the main benefit's of RoboVM is that it brings iOS to the Java community.

Anything you can do in Objective-C or Swift you can do in Java using RoboVM.

Build native UI’s with full hardware access using Java. But also it lets you create native apps for both iOS & Android by sharing code between platforms. More info can be found here - Cross-Platform Basics.

In this article I decided to focus on the free and open-source technologies. In fact this is not free, but you may qualify for special pricing. Open-source developers can receive a free RoboVM license for non-commercial purposes.

The RoboVM is my choice. Although it's possible to run RoboVM Studio on Linux or Windows, but if you want to develop iOS interface related code, you need to have Mac with Xcode.

Picture source: https://robovm.com/

JavaFX

It seems be too late, but better late than never. JavaFXPorts is the open source project that brings Java and JavaFX to mobile and embedded hardware, including iPhone, iPad, Android devices, and the Raspberry Pi. JavaFX can be used with RoboVM (https://goo.gl/7RvC1X).

Picture source: http://gluonhq.com/open-source/javafxports/

LibGDX

What about game development? There is the LibGDX – the Java framework for Cross-platfrom game development. This framework provides lot of features. It's well documented. Works with RoboVM.

It's simple to get started with this technology using the stub generator.

Picture Source: https://github.com/libgdx/libgdx/wiki/Project-Setup-Gradle

Picture source: https://code.google.com/p/libgdx-texturepacker-gui/ https://github.com/libgdx/libgdx/wiki/Texture-packer

Titanium4j

There is also another technology which is worth attention. It's free and open source Titanium4j (developed by Ahomé IT) which is built on the top of Titanium Mobile. 

Appcelerator licenses Titanium under the Apache 2 license and is free for both personal and commercial use. To experience full platform power you can go for pro options. For Titanium Mobile those prices are only if you use Appcelerator platform products. 

As I discussed with Ahomé IT's guy for Titanium4j it's enough to use CLI and SDK. It's possible to use the command line tool and publish apps for free. Then it works this way. I will also write a blog post soon with the result of my own tests.
The code will be easily shared across platforms. They promise also that this technology brings lots of features that make native mobile development a pleasure.

It's worth to mention that it's possible to combine Titanium4j with other technologies, for instance with mGWT. Please see the example here.

I will take a closer look at this technology!

Picture source: http://www.appcelerator.com/

Touch4J (ahome-touch)  

The ahome-touch (also known as Touch4J) is a Java wrapper for Sencha Touch. Unfortunately the Touch4J hasn't been well documented so far (absolute lack of documentation). The GitHub repo is continuously updated and this technology is successfully used with company's internal projects. Ahomé IT developer confirmed that Touch4j works pretty well with GWT 2.7. They consider also move to the new JS Interop when adding support for 2.8.

Picture source: http://www.ahome-it.com/project/touch4j/

Vaadin

Vaadin is already very well known technology. Vaadin Framework is a Java server-side framework for building single page web applications. Even it's free, to fully use it and boost the productivity, it's worth to consider buying commercial add-ons and components.

Picture source: https://vaadin.com/framework

Codename One

The Codename One founders are engineers connected with Sun Microsystems. This technology allows you to build native apps across multiple mobile operating systems using a single code base in Java. 

Supported are: iOS, Android, Blackberry, Windows 7 and other devices.

The SDK and all the tools within it are Open Source and completely free for both commercial and private use.

There are also pro subscription or private cloud option. In the free version of for cloud/push services you are limited to 100 credits per month (for instance iOS build taking up 20 credits). Codename One is an open source project and that includes all the pieces including the native device ports, so it means there is building offline approach too. But then Codename One team doesn't provide help and you have to rely on Community Support. So the suggested approach is to use the build server which generates a native application for you without having to deal with all of the complexities of building a native app for every platform.

If about the way it works... Competitive cross-platform mobile development toolkits typically use HTML5 or heavyweight technology.

Codename One utilizes lightweight technology which translates all the code to native code or the native VM resulting in performance that matches the performance of native code.

When you have a look on this short features demo, it looks really exciting and like a great tool for Rapid Development!

It's possible to build apps with Netbeans, IntelliJ IDEA or Eclipse using the proper plugin.

Then you can simply run the app in the device simulator, debug it, record unit tests, inspect, etc. The work can be supported by the UI Designer Tool. There are also features like certificates wizards. One of the interesting features is that you doesn't need a Mac for iOS development. 

I'm really excited about this solution!

Image source: http://www.drdobbs.com/jvm/codename-one-your-mission-is-single-code/240147813

Decision

As already mentioned, I've chosen RoboVM. My decision stems from the need of access to low-level platform functions related to sound (Android's Audiotrack). But in case of the other requirements I would consider the use of GWT-Polymer, Codename One or Titanium4j.

GWT apps still crashes on iOS 6.1 Safari Mobile (10B5105c)

Unfortunately, iOS 6.1 has not brought a solution to the problem of GWT applications running on Safari Mobile.
This is related to the ClassCastException issue described in the previous article.
Tests done on iOS 6.1 simulator (available from XCode 4.6 Developer Preview). On the OS X version of Safari (6.0.2) the problem doesn't occur.

It is very possible the problem applies to all applications based on AJAX / HTML5 not only GWT.

It is interesting that when the iPad simulator 6.1 (as well as "physical" iPad 6.0.1) is connected to the Remote Web Inspector - all the problems disappear. This may mean that the cause is the optimizer used iOS6 Mobile Safari.

Solution: Compile the application with the -XdisableCastChecking gives a positive result, but I'm afraid other surprises with the new Safari Mobile.

Has anyone experienced similar problems and found a different solution?