vaadin / flow Goto Github PK
View Code? Open in Web Editor NEWVaadin Flow is a Java framework binding Vaadin web components to Java. This is part of Vaadin 10+.
License: Apache License 2.0
Vaadin Flow is a Java framework binding Vaadin web components to Java. This is part of Vaadin 10+.
License: Apache License 2.0
Reconnect dialog is a communication related feature which can demonstrate what you get for free with Hummingbird and not with a client side framework such as Angular. Currently the text displayed on top of the app in one corner is not very convincing
Adding 10 buttons with click listeners on a page will send the following kind of update to the client side, for each button separately
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 0,
"value": "event.button"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 1,
"value": "event.clientX"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 2,
"value": "event.clientY"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 3,
"value": "event.type"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 4,
"value": "event.altKey"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 5,
"value": "event.metaKey"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 6,
"value": "event.ctrlKey"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 7,
"value": "event.shiftKey"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 8,
"value": "event.relativeX"
},
{
"id": 6,
"type": "listInsert",
"key": "click",
"index": 9,
"value": "event.relativeY"
},
The script is currently published through rpc and eval:ed, which means there is no easy way to find the script or set breakpoints
If there is a Date object in a Model, JsonConverter.toJson() will fail because it can't encode an object of that type.
Currently BoundElementTemplate.insertChild() just throws an empty IllegalStateException() if the element has child elements; it could say something like "Can't add content to a non-empty element".
The framework right now tries to guess whether an "attribute" (as it's called on the server) can be applied as an attribute or a property. Some names are hard coded and may or may not be correct.
There should be explicit support for
Sending can be done e.g. as
If a com.vaadin.ui.Template.Model subtype maps directly a datasource's com.vaadin.data.Item, there should be a simple built-in way of mapping one to the other. This would reduce the amount of needed boilerplate code.
As a workaround for the missing array support, it would be useful to be able to use nested Lists in the model:
public List<List<Boolean>> getData();
public void setData(List<List<Boolean>> data);
<button #myId>
is automatically converted into
<button #myid>
and component binding must be done using "myid" and not "myId". This is because JSoup "normalizes" all attributes into lower case: jhy/jsoup#272
Public API should use Component and/or Element, not ever AbstractComponent
To help debugging, we should log an error if a template uses a binding to foo.bar
but foo
is not defined.
We can't do the same for bindings to just foo
, since that's a valid case evaluating to false
in a boolean context (e.g. <div [class.something]="foo">
).
The element should be configured before it is attached to the DOM and always configured using attributes. The component only reads the attributes once when it is displayed. Requires #5
@PreserveOnRefresh was removed. Portlet support is likely 100% broken because of this
Event listeners don't work in Grid. For example, with
grid..addItemClickListener( event -> { System.out.println("Clicked");});
should print "Clicked" to the console when an item is clicked.
HTML imports by design blocks rendering (paint) of the page. For apps which can be fully pre-rendered, e.g. TodoMVC, this delays showing of the UI to the user until all HTML imports have completed (not scripts inside HTML imports, these are considered deferred). Today this is a problem only in Chrome which has native support for HTML imports. Other browsers need the webcomponentsjs polyfill before starting imports, and the polyfill is loaded deferred so there is no way that HTML imports can block rendering
If there's a non-empty < script> tag in a template, TemplateParser will fail. The createTemplate method throws a RuntimeException; node type for scripts is org.jsoup.nodes.DataNode.
Example directory structure:
bower_components
----\iron-icons\
---------\iron-icons.html
---------\social-icons.html
@bower({"iron-icons"}) loads iron-icons.html fine, but any of the following don't work:
@bower({"social-icons"})
@bower({"iron-icons\social-icons"})
@bower({"iron-icons\social-icons.html"})
You can use
@html("/VAADIN/bower_components/iron-icons/social-icons.html")
to get around the problem so it's not a big issue.
It should be possible to have a template with
<vaadin-grid id="myGrid" />
and in the Java file for the template do
private Grid myGrid;
...
myGrid.setContainerDataSource(...);
Binding should be done based on id matching with fieldName or with an @Id("myGrid")
annotation if present.
The script is currently published through rpc and eval:ed, which means the browser has no way to cache the JS used e.g. to implement Grid
Currently loops through the whole template. Should store ids while parsing the template to be able to provide them instantly.
ClientEngineLinker / ClientEngine.gwt.xml is disabled because SelectionScriptLinker uses com/google/gwt/core/ext/linker/impl/computeScriptBaseOld.js
, which in turn does document.write
. This is not compatible with loading the script using defer
Fix hummingbird-client/pom.xml when resolved
Recently I seem to be getting this Jetty error in stdout (regardless of which demo project I run):
lokakuuta 20, 2015 11:36:29 AP. com.vaadin.server.DefaultErrorHandler doDefault
SEVERE:
org.eclipse.jetty.io.EofException
Everything seems to be working ok regardless.
Full stack trace in attachment
jetty-error.txt
The framework has no good way of notifying the user if the server-side implementation of a component is not compatible with the client-side version that the user has defined (or got transiently) through bower.
Based on https://github.com/vaadin/gwt-api-generator it should be possible to create a server side API generator for paper elements. Maybe also more broadly for any Polymer element. The generator would not have to be 100% perfect but provide a good starting point.
Java 8 has a new Date and Time API which should be used in all components instead of the old Date/Calendar
This message appears in standard out frequently:
com.vaadin.server.BootstrapHandler getClientEngineUrl
SEVERE: No compile.properties file found for ClientEngine
We could evaluate the module script on the server the first time it is accessed and see what it exports to the module
variable. This requires that the script doesn't do any static initialization that isn't compatible with Nashorn. The exported methods would still not be run on the server, so they could still contain anything as longs as it's syntactically correct.
RPC handling fails if an array parameter is passed to enqueueRpc.
If a put("foo","bar") and remove("foo") during the same transaction, there is no way for the optimizer to know whether it can delete the remove("foo")
change or not, as it does not know what the value of the property was before the put, or even if the property existed.
The following TransactionLogBuilderTest test should pass when this is implemented
@Test
public void addRemoveAddList() {
List<Object> l = node.getMultiValued(LIST_KEY);
l.add("bar");
l.remove("bar");
node.remove(LIST_KEY);
l = node.getMultiValued(LIST_KEY);
l.add("foo");
commit();
assertOptimizedChanges(new ListInsertChange(0,LIST_KEY,"foo"));
}
Would be handy, Polymer does not support. Angular 2 does, I think
Checkbox is currently broken because the main element has been changed to a but the value change listener tries to include "element.checked" in the event. It really wants to include the input elements "checked" state, no matter if you click on the label or the input
Currently it is only possible to render text. not even HTML
RequireJS is ugly with the define wrapper, though it enables loading the script using a script tag instead of bundling it into a UIDL response
CommonJS is not suitable for lazy loading, but has a chance of working if we inject from the response
ES6 modules probably optimal, but requires transpiling
Currently, methods with the @TemplateEventHandler annotation will not return any value to the UI. Returning values should be possible asynchronically, using for example the following syntax:
Java:
@TemplateEventHandler
String getValue() {
return "value";
}
Template html:
<button (click)="var promise = server.getValue(); promise.success(function(data) { console.log("ok response: " +data); } ).error(function(data, status) { console.log("error happened: " + status) }).finally(function(){ console.log("this always prints to the log")});"></button>
There could also be a different annotation for methods that return a promise.
When using a template html file with more than one root element, everything after the first is ignored. There should be a warning or an exception thrown if such a template is used (excluding comment blocks maybe).
You cannot use <vaadin-grid>
or <vaadin-xyz-chart>
together with a light DOM in a template. Both components will read and take into account the light DOM only when the element is upgraded, i.e. immediately when doing document.createElement("vaadin-grid");
(provided the HTML has been imported). As long as Template does createElement and then creates inner elements for it, the light DOM will be ignored. The only way I can think of to make this work would be to set the whole template contents as inner HTML to the root and then configure possibly remaining parts through JS
To create grid like structures, it would be useful to be able to use e.g.
int[][] data
in the model and something like
<span *ng-for="#rowdata of data" class="row">
<span *ng-for="#cell of rowdata" class="cell">
// render something for the cell
</span>
</span>
in the template
There are many cases where client side events are fired very often but you only want to send some of the events to the server, either with a delay or every Nth event or similar. The <trix-editor>
demo is one example, where the editor itself sends change events for every keypress and you would want to delay them a bit before sending them to the server. The required feature is the same as TextField needs to implemented TextChangeListener
https://dojotoolkit.org provides some UI components (not web components) and helpers and uses RequireJS to load its modules. We should make sure that integrating these kind of solutions is trivial
When a server.foo() function is called in JS and a @TemplateEventHandler foo() method doesn't exist in the Template class, no error is recorded on server. Only "server.foo is not a function" in UI.
Similarly to beforeClientResponse
Grid needs to know whether to send all data or only pending updates
Currently it's not possible for a Template subclass to have a (private) member Component that does not have a corresponding element in the DOM during bindComponents. Having one causes the exception IllegalStateException("No component found to bind to field " + memberField.getName());. Sometimes it would be useful to have, for example, a member subtemplate that is initialized later after something happens in the UI. Automatic initialization is still a handy feature to have, but maybe it could only happen for non-private members or members with an @id annotation.
Something like
if ('registerElement' in document
&& 'createShadowRoot' in HTMLElement.prototype
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
can be used to check whether the browser implements all needed standards. Snippet from https://customelements.io/geelen/x-gif/
Select/Tree/ComboBox should not be containers, many methods should be removed etc
We should move away from Elemental JSON because
Rows are pushed to the client only when the data source is set. If you do
g = new Grid();
g.addColumn("foo");
g.addRow("bar");
you get an empty grid. The client side does even try to fetch any rows either.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.