Auto-GWT : Better GWT Programming with Xtend
-
Upload
sven-efftinge -
Category
Technology
-
view
3.985 -
download
3
Transcript of Auto-GWT : Better GWT Programming with Xtend
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?