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