vaadin / board Goto Github PK

I want to change the default transition sizes using Java.

I have two components places next to each other, and they become under each others only when the width is too small (600px). I want to be able to let them slip under each others starting at 900px.

The CVAL header in each source file refers to the file licensing.html distributed with this software, but no such file can be found in any Maven artefact. There is a LICENSE.txt in the GitHub repository, but that's not the name referred to in the source file header, nor is it "distributed with this software".

If Vaadin component height depends on its content, setting relative height for this component makes them very small. You need to set the height of the component in pixels or set its content to have fixed size.
This issue happens for Grid, Tree, GridTree, GridLayout, Spreadsheet.

Currently it's possible to compile and run an application with having only the vaadin-board maven dependency. If you forget to add the precompiled module, you get only weird client-side exceptions and strange behavior in the app, but no clear message/warning why this might be happening. Some helpful guiding message at least in runtime would be appreciated.

Flash component inside Vaadin Board does not resize correctly.
You can see an example in CompatBasicComponents.FlashUI.

1.0.0-alpha5

Here is the code:

        CssLayout l1 = new CssLayout();
        l1.addStyleName("red");
        l1.setSizeFull();
        CssLayout l2 = new CssLayout();
        l2.addStyleName("blue");
        l2.setSizeFull();

        Board b = new Board();
        b.addRow(l1, l2).setSizeFull();
        b.setSizeFull();

        setContent(b);

And theme:

  .red {
    background-color: red;
  }

  .blue {
    background-color: blue;
  }

When screen size is small enough, l2 disappears totally.

I am using the default bakery demo project
vaadin board 1.1.0-beta1 or 1.0.1 or 1.0
vaadin 8.1.6 or 8.2.0beta
IE version 11.0.9600.18816
1920x1080 windows screen

The same demo runs perfectly in chrome or firefox.
I have contact vaadin sales ppl, they asked me register an issue here.

Board Version: 1.1.0-beta1 with Vaadin Framework 8.6.1

Test UI:

public class MyUI extends UI {

	@Override
	protected void init(VaadinRequest vaadinRequest) {
		final VerticalLayout layoutwithBoard = new VerticalLayout();

		Board board = new Board();
		Row row = new Row();
		final CheckBox cbx = new CheckBox("Just Another Box");
		RadioButtonGroup<String> single = new RadioButtonGroup<>("Single Selection");
		single.setItems("Single", "Sola", "Yksi");
		board.addRow(row);
		layoutwithBoard.addComponents(cbx, single, board);
		setContent(layoutwithBoard);
	}

	@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
	@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
	public static class MyUIServlet extends VaadinServlet {
	}
}

Any components here are not reacting as expected when accessing the page on an iPad with Safari, as soon as a Board is added to the layout (even an empty one). Especially radio buttons and checkboxes are only randomly selectable with a value change not always arriving in the backend.

The issue is present on iOS with Safari (iOS 12.1), Firefox (14.0), Chrome (70.0.3538.75) as well as all others since iOS requires apps to solely use Apple's WebKit engine. On Android with Firefox (63.0.2) the issue is also present.

Using the Java API, on Firefox the log shows this upon login (so upon Board constructor being invoked):
Oct 05, 2017 12:45:13 AM com.vaadin.server.VaadinServlet serveStaticResourcesInVAADIN INFO: Requested resource [/VAADIN/frontend/es6/webcomponentsjs/webcomponents-lite.js] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

When selecting the View that contains the Board, the browser hangs and the page is never displyed.

Using Chrome, the page is displayed, but there are more logs:
Oct 05, 2017 12:47:49 AM com.vaadin.server.VaadinServlet serveStaticResourcesInVAADIN INFO: Requested resource [/VAADIN/frontend/es6/vaadin-board/vaadin-board.html] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder. Oct 05, 2017 12:47:49 AM com.vaadin.server.VaadinServlet serveStaticResourcesInVAADIN INFO: Requested resource [/VAADIN/frontend/es6/vaadin-board/vaadin-board-row.html] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

It's currently not possible to deploy vaadin-board on an OSGi based server, such as Liferay 7.x

I defined 4 rows with 3 components each.
Unfortunately it displays all 12 components in 2 rows.
If the components fit in 2 rows, it doesn't care that I divided them into 4 rows?

When running a clean build with mvn clean install it fails with the following error:

ERROR] bower                                     ECONFLICT Unable to find suitable version for webcomponentsjs
[ERROR] error Command failed with exit code 1.
[INFO] info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 11.088 s
[INFO] Finished at: 2017-07-17T11:42:40+03:00
[INFO] Final Memory: 9M/245M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.4:yarn (yarn install) on project vaadin-board-precompiled: Failed to run task: 'yarn ' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [Help 1]

To reproduce the issue, manually delete the precompiled/src/main/frontend/bower_components folder (if exists). mvn clean does not delete it automatically.

More of an enhancement than an issue really...

But feel it would be useful to be able to have a board.setSpacing method, which has similar functionality to layout setSpacing methods, essentially automatically adding some padding.

At the moment, when you have 2 grid side by side, or 2 similar charts side by side, they seem to blend into one, and its hard to know where one starts and the next begins.

Current version 1.0.0 references version 0.2.snapshot of webcomponents-helper

There are a lot of exceptions in the console, starting from

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

This is most likely caused by serving es5 to Chrome, as the user agent indicates Safari 9 and should be fixed by vaadin/webcomponents-helper#2

Vaadin TabSheet does not resize correctly when going from small viewport size to a big one
Here is an example:

Board board = new Board();
       board.setSizeFull();
       TabSheet tabsheet = new TabSheet();

       // Create the first tab
       tabsheet.addTab(new Label("FOO"), "FOO");
       tabsheet.addTab(new Label("BAR"),"BAR");
       tabsheet.addTab(new Label("BAx")," BAx");
       tabsheet.addTab(new Label("BAz")," BAz");

       TabSheet tabsheet2 = new TabSheet();

       // Create the first tab
       tabsheet2.addTab(new Label("FOO"),"FOO");
       tabsheet2.addTab(new Label("BAR"),"BAR");

       TabSheet tabsheet3 = new TabSheet();
       tabsheet3.addTab(new Label("FOO"),"FOO");
       tabsheet3.addTab(new Label("BAR"),"BAR");

       TabSheet tabsheet4 = new TabSheet();
       tabsheet4.addTab(new Label("FOO"),"FOO");
       tabsheet4.addTab(new Label("BAR"),"BAR");

       board.addRow(tabsheet,tabsheet2, tabsheet3, tabsheet4);

       setContent(board);

Console shows error:

SyntaxError: Cannot declare a let variable twice: 'a'.

Reported Polymer/polymer-cli#946

Disabling js minify seems to fix it but that would penalize all other es6 browsers.
This could be fixed from framework side by serving ES5 to safari10

I didn't find board-cols in docs until I did a find on the page. If you just skim the document, then it looks like that feature doesn't exist. Nested rows have an own header, column spans could also.

@rogozinds wrote:

"Basic use " describes the basic API usage. So it assumes, you know stuff about polymer, you have app running, you want to use vaadin-board in it.

This info should be in the doc itself, to make it clear to the reader what is expected from them.

Vaadin Framework 8.1.0.rc1
Vaadin Board 1.0.0.beta1

When creating a demo Vaadin (Java) application using the Row Types example, the boxes' layout is wrong on IE11.

Both vaadin-board and vaadin-board-precompiled are a dependency.

The results are similar to the following pictures.
On IE:

On FF:

Vaadin TwinColSelect does not resize correctly, the second row of the component sometimes rendered at the bottom, instead of to the right of the first row.

1. It's not clear right now, should user use nested rows or nested boards. In WC you should use nested rows, (you can use nested boards, but the result will be the same, except extra html tag in the DOM).

2. The exception is thrown in both cases (when using nested rows or nested boards).

Example:

        Board board = new Board();
        board.setWidth(700, Unit.PIXELS);
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        board.addRow(btn1, btn2, btn3, btn4);
        setContent(board);

Should be two rows with two items in them. Works as expected in FF and Chrome.
In IE 11 has 4 items in one row.

Also has problems with other configurations.

Running
mvn clean install
on a newly cloned project does not work.

There are a lot of

Running com.vaadin.addon.board.testbenchtests.RowRemoveIT
java.io.FileNotFoundException: config/testbench.properties (No such file or directory)
	at java.io.FileInputStream.open0(Native Method)
	at java.io.FileInputStream.open(FileInputStream.java:195)
	at java.io.FileInputStream.<init>(FileInputStream.java:138)
	at com.vaadin.addon.board.testUI.UIFunctions.readProperties(UIFunctions.java:18)
	at com.vaadin.addon.board.testUI.UIFunctions.readTestbenchProperties(UIFunctions.java:31)
	at com.vaadin.addon.board.testbenchtests.AbstractParallelTest.setUp(AbstractParallelTest.java:32)

It would be great to use the board functionality to create reports that could be exported to PDF, or printed.

Is this currently possible? Are stylings and links preserved during say a PDF print in chrome?

When adding a component to a row with a caption, the caption isn't added and displayed (doesn't seem to appear in the dom either.

To recreate:
`board = new Board();

Label l = new Label("Test Label Value");
l.setCaption("Test Label Caption");

Row row = new Row();
row.addComponent(l);

board.addRow(row);`

The components caption is not added along with the component itself.
When browsing through the generated html, the caption element doesn't appear to be added at all.

Use Case:
When adding components to the board (grids, maps, etc) it would be helpful to be able to caption them.

Polyfill script tag should be after meta tag. Otherwise is ignored in IE11. If IE11 is set in compatibility mode, it will not drop from compatibility mode and application will not work.

The problematic code seems to be this: https://github.com/vaadin/webcomponents-helper/blob/master/src/main/java/com/vaadin/webcomponentshelper/polyfill/LoadPolyfill.java#L50