Template model, inclusion, component mapping and class binding

New features

• Template model with support for basic types: boolean, int, double, String

public class MyTemplate extends Template {
    public interface MyModel extends TemplateModel {
        public void setHelloText(String helloText);
        public String getHelloText();
    }
    @Override
    public MyModel getModel() {
        return (MyModel) super.getModel();
    }
}

• Including a template in another template, e.g. <div>@include path/file.html@</div>
• Support for inline <script> and <style> in templates
• Class name bindings in templates, e.g.

<div [class.myclass]="myClassEnabled"></div>

public interface MyModel extends TemplateModel {
    public boolean isMyClassEnabled();
}

• Mapping template elements to components using id, e.g.

<paper-slider id="myslider">

@Id("myslider") 
private PaperSlider mySlider;

• Mapping an element to a Component using Component.from(Element)
• More basic components wrapping HTML elements: Emphasis, H1, H2, H3, H4, H5, H6, Span
• Support for using most Element features with template elements
  • Element properties
  • Synchronized properties
  • DOM event listeners
• Element.getOuterHtml to return the outer HTML for an element
• Support for boolean and int type properties in PropertyDescriptor
• Support for sending Json values from the client to the server

Fixes

• Correctly detect loading of CSS files in Safari again
• Resolver.resolve and RouterConfiguration.resolveRoute return Optional instead of null
• Propert handling of @EventHandling methods with varargs
• Hello world session size reduced from 9.23KB to 5.97KB
• RouterLink now has a getter for href
• PropertyDescriptor can be used with any Element
• An unresolvable route now returns 404 to the browser
• Replaced LGPL CSS Parser library with Apache 2 ph-css

Demos

• Web site demo updated to use template class bindings Java HTML
• Hello world using templates updated to use template model Java HTML

Tutorials

• Creating A Simple Component Using the Template API
• Binding Class Names in a Template
• Using API Helpers for Defining Component Properties
• Handling User Events in a Template

All changes

Web components and template event handlers

New features

• Server side event handlers for template, e.g.: (click)="$server.myMethod(input.value);"
• Support for HTML imports through Page.addHtmlImport()
• Support for defining dependency imports @StyleSheet, @JavaScript or @HtmlImport
• Support for Polymer DOM operations through Polymer.DOM when Polymer is loaded
• Support for setting inline styles using Element.setAttribute("style","...");
• Attach events have an isInitialAttach method which can be used to react only to the first attach event
• Attach events have an getUI() and getSession() helpers to provide easier access to the UI and Session
• Updated API for all HTML components to use correct default values and return Optional<T> for attributes which are not always present

Fixes

• Template.getParent() returns the parent instead of always throwing an exception
• ThreadLocals are no longer inheritable to avoid referring to the wrong UI in background threads and to prevent memory leaks

Demos

• Hello world using templates update to use server side template event handlers Java HTML
• Integration demo of the Progress Bubble web component Java

New tutorials

• Basic Integration of a Polymer Web Component
• Using Attributes and Properties with a Polymer Web Component
• Using Events with a Polymer Web Component
• Handling User Events in a Template

All changes

Template event handlers and error view

New features

• Defining event handlers in a template, e.g. (click)="window.alert('Hello world');"
• Setting an error view to handle all paths which are not mapped to any view
• Automatic loading of web components polyfill

Fixes

• Applications can now be serialized and deserialized properly
• Special characters in URLs are handled properly
• RouterConfiguration getParentView changed to return Optional instead of null

Demos

• The web site demo was updated to use an error view

New tutorials

• Defining an Error View

All changes

Template for loops and property bindings

New features

• For loops in templates, e.g. <a *ngFor="let item of items" class="menu-item" routerLink [href]="item.href">{{item.caption}}</a>·. It is currently not possible to nest for loops, see #701.
• Property bindings in templates, e.g. <input [value]="firstName">
• Image component based on <img>
• @HtmlTemplate annotation for specifying the HTML file for a Template, e.g. @HtmlTemplate("mytemplate.html")

Fixes

• Static class names in templates now work, e.g. <div class="foo bar">
• Comments <!-- --> can be used in templates and are ignored by the parser
• Templates can be removed from a view

Demos

• The web site demo menu was updated to use template data binding (property and for loop):
  • HTML
  • Java, still ugly because of low level API

New tutorials

• Binding Model Data in a Template
• Creating Template Contents Dynamically Based on a List of Items

All changes

Template data binding and template as a view

New features

• Data binding in text nodes, e.g. <div>{{firstName}}</div>. The binding must the the whole text node, interpolation is not yet supported.
• Adding/removing elements to/from a Template
• Using Template as a View by marking the child view position using @child@

Fixes

• Routerlinks now work together with URI fragments
• Attributes in templates are now set as attributes instead of as properties

New tutorials

• Creating A Simple Component Using the Template API
• Adding Components to a Template
• Using a Template as a Parent View

All changes

Component API

New features

• Component - a way of defining reusable classes for using an element or a collection of elements.
  • Based on a root Element, defined using @Tag
  • Component hierarchy is derived from the element hierarchy
  • Similar to Component in Vaadin 7
• Attach/detach events for Element and Component and Component.onAttach/onDetach which can be overridden
• ComponentEventBus for listening to and firing component events
  • Connecting DOM events to Component events to have the Component event fired automatically with selected DOM event data
  • Each event has information about origin (server or client)
• Built-in components
  • HTML - encapsulates a HTML fragment
  • Text - encapsulates a text in a text node
  • RouterLink - handles view navigation without page reloads
  • Composite - for wrapping existing components while hiding their API
• HTML components in a separate package
  • Div, Button, Input and more
• Using a StreamResource as an element attribute to e.g. generate dynamic images

Fixes

• API improved based on user feedback

New tutorials

• Creating A Simple Component Using the Element API
• Creating a Component Based on Many Elements
• Creating a Component Using Existing Components
• Using Events with Components
• Creating a Component with External Dependencies

All changes

Routing

New features

• Router handles navigation between different views in the application without reloading the page. The path of the browser's location is updated using the HTML5 History API – the URI fragment (#) is not used for navigation.
• <a> elements with a routerLink triggers internal navigation instead of making the browser reload the page with the new URL.
• RouterConfigurator is used to update the RouterConfiguration used by the application's Router. The configurator class to use for the application is defined with the routerConfigurator parameter in the @VaadinServletConfiguration annotation or through web.xml.
• RouterConfiguration.setRoute(String, Class<? extends View>) is used to configure a route (i.e. a path) for a view class.
• View.onLocationChange(LocationChangeEvent) is invoked for the used view when it's shown to the user for a specific URL.
• A route can contain placeholders, e.g. "product/{id}". The actual URL value used for the placeholder is accessible from LocationChangeEvent, e.g. event.getPathParameter("id").
• A route can end with a wildcard, e.g. "blog/*". The actual URL value used for the wildcard is accessible using LocationChangeEvent.getPathWildcard().
• A view can be configured to be shown inside a "parent view" that implements HasChildView, using either RouterConfiguration.setParentView(Class, Class) or as a third parameter to RouterConfiguration.setRoute.
  • This allows defining a common layout containing e.g. a header or a menu that is used for the actual views in the application.
• VaadinServlet uses only one URL and reserves /VAADIN/ for internal use. Everything else can be used for views of the actual site.
• The page has a <base href> so that relative URLs work even after navigating to some other location within the site.
• @Title can be used on a View class to make <title> update automatically when the view is shown.
  • For more control, the view can override View.getTitle(LocationChangeEvent) or the router can configured to use a custom PageTitleGenerator.
• It is no longer mandatory to have your own UI class.
• Add context:// as a special Vaadin protocol that is always relative to the context path where the app is deployed.
• Documentation has been restructured as task-focused tutorials instead a wall of description text.
• Element usability improved
  • Added Element.indexOfChild(Element).
  • Added Element.getChildren().
  • Various getters changed to return java.util.stream.Stream.
  • Helper in ClassList to toggle a class name
  • ElementFactory with static helpers for common elements

Fixes

• Inserting an element into a different position in its own parent now works.
• Replacing an element with itself is a no-op.
• Attempting to create loops in the element tree (i.e. adding a parent to its child) immediately throws instead of causing client-side exceptions
• ClassList properly handles empty class names.
• Page.addJavaScript and Page.addStyleSheet ignores duplicates.
• Directories are not served as static resources
• Text nodes can actually be removed from the DOM

New tutorials

• Application structure
  • Hello World
  • Including Style Sheets
• Element API
  • Element Properties and Attributes
  • Listening to User Events
  • Retrieving User Input
  • Dynamic Styling
• Routing and Views
  • Defining View Routes and Navigating
  • View Hierarchy and Nested Views
  • Using View Parameters
  • Updating Page Title on Navigation
• Misc
  • Executing JavaScript
  • The History API

All changes

Project basics and Element API

New features

• Set up project for development
  • Renamed from Vaadin Framework to Hummingbird
  • Mavenized build validated using Travis and quality-checked using SonarQube
  • DefaultWidgetSet renamed to ClientEngine
    • Uses GWT's single script linker so that there's only one file to download
  • Client-side is tested as pure JUnit tests and using GWTTestCase
  • Update to a pinned GWT 2.8.0 snapshot
• Introduce a low-level StateTree for all the session-specific data that is synchronised between server and client.
  • Reactive event handling on the client
• Introduce a server-side Element API
  • Properties and attributes
  • Children
  • Event handlers
    • Send event data to the server
    • Property value synchronization
  • Class list
  • Inline styles
  • Text nodes and regular elements are supported
• Simplified bootstrapping
  • Initial UIDL is included in the bootstrap HTML page
  • UI on the server is mapped directly to the <body> in the browser
• Lightweight client-side dependency injection framework
• Support adding stylesheets and javascript using Page.addDependency
• UIDL messages are built as JSON instead of by concatenating strings
• @JsInterop wrappers for native JS collections instead of using emulated Java List, Map and Set.
• Page.executeJavaScript for calling JS from the server

Fixes

• Remove legacy features
  • All component implementations
  • Shared state and RPC
  • Client-side debug window
  • Custom SuperDevModeHandling
  • com.google.gwt.dom.client.Element
  • Reduce use of com.google.gwt.user
  • Support for old browsers
  • v-* prefixes
• Tests work in all time zones

Demos

• Hello world using Element
• Minesweeper

All changes