niedziela, 27 listopada 2016

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/ 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: .
    And also note that you have a full source code here.

    Have fun!