Presentation from GWT.create 2015 EU Auto-GWT (auto-gwt.org) is a library for the Google Web Toolkit, that frees your code from unneccessary and complicated boilerplate and at the same time pushes the IDE capabilities to a new level. Auto-GWT is based on Xtend (xtendlang.org). Xtend is a modern programming language that is 100% compatibly with existing Java libraries and even translates to readable Java source code. With it's slick syntax and powerful features such as lambdas, operator overloading and compile-time macros you can turn any verbose piece of Java code into a small and elegant piece of expressive Xtend code. In this session we will show how Xtend can be used to program GWT applications and how well the typical GWT idioms are supported by the language.

1. AUTO-GWT
Better GWT Programming with Xtend
Anton Kosyakov (@akosyakov), Sven Efftinge (@svenefftinge)
itemis

2. Java Interoperability
Low Signal-To-Noise Ratio
Powerful Concepts

3. Java Interoperability
• Familiar Syntax
• Compiles to readable Java source code
• Uses JDK (no own collection types)
• No messing with generics, primitives, nullable
• Integrates with Java Tools

4. Low Signal-To-Noise Ratio
• Type Inference
• property access
• good defaults
• sweet Lambdas
• optional parenthesis
• optional semicolons

5. Powerful Concepts
• Macros
• Extension Methods
• Enhanced Switch
• Template Expressions
• operator overloading
• Dispatch methods

6. Demo

8. clearCompletedButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
List<Todo> result = new ArrayList<Todo>();
for (Todo t : getTodos()) {
if (!t.isDone()) {
result.add(t);
}
}
setTodos(result);
}
});
Clearing Completed Tasks

9. clearCompletedButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
List<Todo> result = new ArrayList<Todo>();
for (Todo t : getTodos()) {
if (!t.isDone()) {
result.add(t);
}
}
setTodos(result);
}
});
clearCompletedButton.addClickHandler [
]
todos = todos.filter[!done].toList

10. Client Server Communication

11. public class TodoServiceImpl extends RemoteServiceServlet implements TodoService {
public List<Todo> load(final String name) {
return (List<Todo>) getMemcacheService().get(name);
}
public void save(final List<Todo> todos, final String name) {
getMemcacheService().put(name, todos);
}
}
@RemoteServiceRelativePath("todoService")
public interface TodoService extends RemoteService {
public List<Todo> load(final String name);
public void save(final List<Todo> todos, final String name);
}
public interface TodoServiceAsync {
public void load(final String name, final AsyncCallback<List<Todo>> result);
public void save(final List<Todo> todos, final String name,
final AsyncCallback<Void> result);
}
1) Server-Side Service Implementation
2) Server-Side Service Interface
3) Client-Side Async-Interface
GWT-RPC in Java

12. 1) Server-Side Service Implementation
GWT-RPC in Xtend
@GwtService
class TodoServiceImpl {
override List<Todo> load(String name) {
return memcacheService.get(name) as List<Todo>
}
override void save(List<Todo> todos, String name) {
memcacheService.put(name, todos)
}
}
@GwtService adds the needed boilerplate during compilation.

13. Building UIs Programmatically
with Xtend

14. FlowPanel view = new FlowPanel();
view.setStyleName("view");
...
Label label = new Label();
label.setText(todo.getText());
view.add(label);
Button button = new Button();
button.setStyleName("destroy");
view.add(button);
button.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
deleteTodo(todo);
}
});
Imperative UIs in Java

15. flowPanel [
styleName = 'view'
...
label [
text = todo.text
]
button [
styleName = 'destroy'
onClick [
deleteTodo(todo)
]
]
]
Declarative UIs in Xtend
That’s a so called Builder API

16. Declarative UI Design
using

17. <section id="todoapp">
<header id="header">
<h1>todos</h1>
<g:TextBox ui:field="todoText"/>
</header>
<section ui:field="mainSection">
<input ui:field="toggleAll" type="checkbox"></input>
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<g:FlowPanel ui:field="todoPanel"></g:FlowPanel>
</ul>
</section>
<footer ui:field="todoStatsContainer">
<span id="todo-count">
<strong class="number" ui:field="remainingTodosCount"></strong>
<span class="word" ui:field="remainingTodosLabel"></span>
left.
</span>
<g:Button ui:field="clearCompleted">
Clear completed (<span class="number-done" ui:field="clearTodosCount"></span>)
</g:Button>
</footer>
</section>
The XML

18. public class ToDoView extends Composite {
interface ToDoViewUiBinder extends UiBinder<Widget,ToDoView> {
}
private static ToDoViewUiBinder uiBinder =
GWT.create(ToDoViewUiBinder.class);
@UiField
protected SpanElement clearTodosCount;
@UiField
protected SpanElement remainingTodosLabel;
@UiField
protected FlowPanel todoPanel;
@UiField
protected InputElement toggleAll;
@UiField
protected Element remainingTodosCount;
@UiField
protected Button clearCompleted;
@UiField
protected TextBox todoText;
@UiField
protected Element mainSection;
@UiField
protected Element todoStatsContainer;
// ... actual implementation
}
Here’s the boilerplate!

19. Active Annotations Once More
@WithUiBinding
class ToDoView extends Composite {
// ... actual implementation
}
@WithUiBinding looks up the XML and
adds the boilerplate for you.

20. Xtend - xtendlang.org
auto-gwt - auto-gwt.org
todomvc - github.com/DJCordhose/todomvc-xtend-gwt
Questions?