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/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!


wtorek, 12 kwietnia 2016

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.

czwartek, 3 marca 2016

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!




sobota, 16 stycznia 2016

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.

wtorek, 5 stycznia 2016

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!