Auto-GWT : Better GWT Programming with Xtend
2 likes12,923 views
The document discusses the integration of Xtend with GWT for improved programming with Java, highlighting features such as type inference, property access, and declarative UI design. It covers server-side service implementation, client-side async-interfaces, and examples of both imperative and declarative UI designs using Xtend. The document also mentions the use of annotations to reduce boilerplate code in GWT applications.
![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](https://image.slidesharecdn.com/gwtprogrammingwithxtend-150129032800-conversion-gate01/85/Auto-GWT-Better-GWT-Programming-with-Xtend-9-320.jpg)
![flowPanel [
styleName = 'view'
...
label [
text = todo.text
]
button [
styleName = 'destroy'
onClick [
deleteTodo(todo)
]
]
]
Declarative UIs in Xtend
That’s a so called Builder API](https://image.slidesharecdn.com/gwtprogrammingwithxtend-150129032800-conversion-gate01/85/Auto-GWT-Better-GWT-Programming-with-Xtend-15-320.jpg)
Auto-GWT : Better GWT Programming with Xtend
- 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
- 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
- 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?