Auto-GWT : Better GWT Programming with Xtend

Auto-GWT : Better GWT Programming with Xtend

• 1.
  AUTO-GWT Better GWT Programmingwith Xtend Anton Kosyakov (@akosyakov), Sven Efftinge (@svenefftinge)
 itemis
• 2.
  Java Interoperability Low Signal-To-NoiseRatio Powerful Concepts
• 3.
  Java Interoperability • FamiliarSyntax • 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 publicvoid 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 publicvoid 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 TodoServiceImplextends 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 ServiceImplementation 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 withXtend
• 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:TextBoxui: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 ToDoViewextends 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 OnceMore @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?