Bean import filters

New features

• When importing a bean to the template model, you can define that some of the bean properties should be excluded from the model
  • The same annotations are also supported on list setters, where they will apply to each item in the imported list.

public interface MyModel extends TemplateModel {
  @Exclude("id", "password") // includes all other properties
  public void setUser(User user);

  @Include("firstName", "lastName") // excludes all other properties
  public void setPerson(Person person)
}

• View instance creation is pluggable to enable integration with e.g. Spring or CDI
• Client side exception messages are shown as a floating overlay in the browser when production mode is not active
• @Id can now be used in template classes to inject Element instances. Previously only component instances could be injected.

Fixes

• Eliminated memory leak caused by redeploying Hummingbird
• The $server variable is now properly populated inside *ngFor
• @HtmlImport dependencies are now always loaded before @JavaScript
• Atmosphere dependency updated to be compatible with Jetty 9.3
• Fixed browser version check so that the embedded browser in Eclipse on OS X is no longer considered outdated
• Renamed Element methods for increased clarity:
  • getOwnTextContent renamed to getText
  • setTextContent renamed to setText
  • getTextContent renamed to getTextRecursively

Demos

• Address book demo updated to only import some parts of the bean and to support editing and saving through the form Java HTML

Tutorials

• Using Beans with a Template Model updated to show how to exclude properties
• Adding Components to a Template updated to mention @Id injection for elements
• Creating A Simple Component Using the Element API updated to mention the tag name constants in @Tag.

All changes

https://github.com/vaadin/hummingbird/issues?q=milestone%3A0.0.11

JavaScript in template bindings

New features

• Support for using JavaScript expressions in model bindings

<span>{{firstName + ' ' + lastName}}</span>
<div [class.hidden]="itemCount == 0">Items available: {{itemCount}}</div>

• Support for using multiple bindings and @include statements in the same text node

<span>Hello {{name}}</span>

<span>{{firstName}} {{lastName}}</span>

<div>
    @include header.html@
    @child@
    @include footer.html@
</div>

• Support for getting a list of beans from a model. Like with other getters, the returned list is a proxy object which can be modified to update the model

public interface EmployeesModel extends TemplateModel {
    public List<Employee> getEmployees();
}

• An error message is shown to the end user if loading of a resource (CSS/JS/HTML) fails
• Client-side "debug" mode is now only based on whether the server-side production mode setting
  • ?debug in the query string has no effect
• Low level API for importing a bean into a given part of the model

TemplateModel.importBean(String modelPath, Object bean, Predicate<String> propertyNameFilter)

• Low level API for importing a list of beans, optionally filtering what bean properties to include

TemplateModel.importBeans(String modelPath, List<T> beans, Class<T> beanType, Predicate<String> propertyNameFilter)

Fixes

• For loops in templates are optimized to only update the changed parts instead of recreating the full DOM
• Changed default push transport from long polling to websockets
• Element.getOuterHTML() no longer throws exceptions for template elements with a class attribute

Demos

• Hello world template demo updated to use JavaScript expressions Java HTML
• Address book demo updated to use the new model API Java HTML
• Web site demo updated to use the new model API Java HTML

Tutorials

• Binding Model Data in a Template updated to cover JavaScript and attribute bindings
• Creating Template Contents Dynamically Based on a List of Items updated to support modification of the list
• Basic Integration of a Polymer Web Component updated to better support developers not familiar with web components and bower

All changes

https://github.com/vaadin/hummingbird/issues?q=milestone%3A0.0.10

Beans and lists in template model

New features

• Support for beans in template model

    public interface FormModel extends TemplateModel {
        public void setPerson(Person person);
        public Person getPerson();
    }

• Getter for a bean returns a proxy object which is connected to the model (setters update the model values)
• Setter for a bean copies the bean values into the model
• Low level model API for handling beans in the model:

void TemplateModel.importBean(Object bean)
void TemplateModel.importBean(Object bean, Predicate<String> propertyNameFilter)
T TemplateModel.getProxy(String modelPath, Class<T> beanType)

• Support for setting lists of beans in the model

public interface EmployeesModel extends TemplateModel {
    public void setEmployees(List<Employee> employees);
}

• Support for setting attributes on template elements from Java
• Support for binding to attributes in templates using [attr.placeholder]="modelPart"
• Shorthand for setting boolean attributes: Element.setAttribute(String, boolean)
• Shorthand for clearing an Input value: Input.clear()
• All builds are automatically scalability tested using Gatling

Fixes

• Use of the @Id annotation has been clarified in some tutorials

Demos

• Initial version of an Address book demo Java HTML

Tutorials

• Using Beans with a Template Model
• Including Templates in Templates
• Creating Template Contents Dynamically Based on a List of Items (Using a list in a template model)

All changes

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