Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
Low Signal-To-Noise Ratio
• Type Inference
• property access
• good defaults
• sweet Lambdas
• optional parenthesis
• opti...
Powerful Concepts
• Macros
• Extension Methods
• Enhanced Switch
• Template Expressions
• operator overloading
• Dispatch ...
Demo
clearCompletedButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
List<Todo> res...
clearCompletedButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
List<Todo> res...
Client Server Communication
public class TodoServiceImpl extends RemoteServiceServlet implements TodoService {
public List<Todo> load(final String nam...
1) Server-Side Service Implementation
GWT-RPC in Xtend
@GwtService
class TodoServiceImpl {
override List<Todo> load(String...
Building UIs Programmatically
with Xtend
FlowPanel view = new FlowPanel();
view.setStyleName("view");
...
Label label = new Label();
label.setText(todo.getText());...
flowPanel [
styleName = 'view'
...
label [
text = todo.text
]
button [
styleName = 'destroy'
onClick [
deleteTodo(todo)
]
...
Declarative UI Design
using
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<g:TextBox ui:field="todoText"/>
</header>
<section ui:field="m...
public class ToDoView extends Composite {
interface ToDoViewUiBinder extends UiBinder<Widget,ToDoView> {
}
private static ...
Active Annotations Once More
@WithUiBinding
class ToDoView extends Composite {
// ... actual implementation
}
@WithUiBindi...
Xtend - xtendlang.org
auto-gwt - auto-gwt.org
todomvc - github.com/DJCordhose/todomvc-xtend-gwt
Questions?
Auto-GWT : Better GWT Programming with Xtend
Upcoming SlideShare
Loading in …5
×

Auto-GWT : Better GWT Programming with Xtend

11,412 views

Published on

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.

Published in: Technology
  • Be the first to comment

Auto-GWT : Better GWT Programming with Xtend

  1. 1. AUTO-GWT Better GWT Programming with Xtend Anton Kosyakov (@akosyakov), Sven Efftinge (@svenefftinge)
 itemis
  2. 2. Java Interoperability Low Signal-To-Noise Ratio Powerful Concepts
  3. 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. 4. Low Signal-To-Noise Ratio • Type Inference • property access • good defaults • sweet Lambdas • optional parenthesis • optional semicolons
  5. 5. Powerful Concepts • Macros • Extension Methods • Enhanced Switch • Template Expressions • operator overloading • Dispatch methods
  6. 6. Demo
  7. 7. 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
  8. 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); } }); clearCompletedButton.addClickHandler [ ] todos = todos.filter[!done].toList
  9. 9. Client Server Communication
  10. 10. 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
  11. 11. 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.
  12. 12. Building UIs Programmatically with Xtend
  13. 13. 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
  14. 14. flowPanel [ styleName = 'view' ... label [ text = todo.text ] button [ styleName = 'destroy' onClick [ deleteTodo(todo) ] ] ] Declarative UIs in Xtend That’s a so called Builder API
  15. 15. Declarative UI Design using
  16. 16. <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
  17. 17. 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!
  18. 18. Active Annotations Once More @WithUiBinding class ToDoView extends Composite { // ... actual implementation } @WithUiBinding looks up the XML and 
 adds the boilerplate for you.
  19. 19. Xtend - xtendlang.org auto-gwt - auto-gwt.org todomvc - github.com/DJCordhose/todomvc-xtend-gwt Questions?

×