AUTO-GWT Better GWT Programming with Xtend

Anton Kosyakov (@akosyakov), Sven Efftinge (@svenefftinge) itemis

Java Interoperability Low Signal-To-Noise Ratio

Powerful Concepts

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

Low Signal-To-Noise Ratio• Type Inference • property access • good defaults

• sweet Lambdas • optional parenthesis • optional semicolons

Powerful Concepts

• Macros • Extension Methods • Enhanced Switch

• Template Expressions • operator overloading • Dispatch methods

Demo

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

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

Client Server Communication

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

1) Server-Side Service Implementation

GWT-RPC in Xtend

@GwtServiceclass 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.

Building UIs Programmaticallywith Xtend

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

flowPanel [ styleName = 'view' ... label [ text = todo.text ] button [ styleName = 'destroy' onClick [ deleteTodo(todo) ] ]]

Declarative UIs in Xtend

That’s a so called Builder API

Declarative UI Design using

<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

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!

Active Annotations Once More

@WithUiBindingclass ToDoView extends Composite { // ... actual implementation}

@WithUiBinding looks up the XML and adds the boilerplate for you.

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

Questions?