We Keep Coding

Vaadin 8 grid editor doesn't work correctly

Vaadin 8 editor of grid doesn't work correctly when I double click on cell that I can edit.
I use the simple code for create grid and add for one column editor component.
VerticalLayout content = new VerticalLayout();
content.setMargin(false);
content.setSpacing(false);
content.setSizeFull();
setContent(content);
Grid<OrderModel> grid = new Grid(OrderModel.class);
grid.setItems(generate());
grid.setSizeFull();
grid.getEditor().setEnabled(true);
grid.getColumn("planningStatus").setEditorComponent(getCombobox());
Next I run app and start to scroll grid till column "planningStatus".
How it works:
So. What should I do or how I should fix it for correct open editor in grid?

Could your problem be related to issue reported here: https://github.com/vaadin/framework/issues/7746 ?
There exists now also add-on which fixes couple of known Editor cell sizing issues:

Vaadin 8. Resource cannot be resolved

I tried to add an overlay plugin. https://vaadin.com/directory/component/overlays
I have a problem with image overlay. Im getting that error:
The type com.vaadin.terminal.Resource cannot be resolved.
It is indirectly referenced from required .class file
problem is with this line:
io.setImage(res);
how can I fix it? I put icon-new.png to the class package folder and added into maven overlays plugin
My code:
final ImageOverlay io = new ImageOverlay(button);
Resource res = new ClassResource(this.getClass(), "../icon-new.png");
io.setImage(res);
io.setComponentAnchor(Alignment.TOP_LEFT); // Top left of the button
io.setOverlayAnchor(Alignment.MIDDLE_CENTER); // Center of the image
io.setClickListener(new OverlayClickListener() {
public void overlayClicked(CustomClickableOverlay overlay) {
Notification.show("ImageOverlay Clicked!");
}
});
layout.addComponent(io);
io.setEnabled(true);
I need to achive that on the button will show up an overlay. If the user clicked on this button and added a new content something like taht show up on the button

That's because it's compatible with Vaadin 6 only as it's indicated in the add-on page:
If you scroll to the comments section, someone is suggesting a fork of the add-on compatible with Vaadin 7, but I could not see anything related to 8:
HI ALL! You can find version 1.1.3 for Vaadin 7.6 here: https://github.com/Haulmont/vaadin-overlays/releases
YURIY ARTAMONOV
Add-ons that are compatible with multiple Vaadin versions, indicate this explicitly, and usually (but not necessarily... dev's choice) have different version numbering, eg: 1.x for Vaadin 6, 2.x For Vaadin 7, 3.x for Vaadin 8, etc:
Either way, clicking on the link for a specific Vaadin version, will select the latest add-on release compatible with it. Or, if you select an add-on release from the drop-down, the Vaadin version compatible with it will be updated accordingly.
Edit after update
You can use a regular button + the predefined BUTTON_ICON_ALIGN_RIGHT Valo style. From the javadoc:
/**
* Align the icon to the right side of the button caption. Can be combined
* with any other Button style.
*/
public static final String BUTTON_ICON_ALIGN_RIGHT = "icon-align-right";
Please note that for the best UI result, I've used 24x24 icons, but depending on your requirements you can tweak your theme for the size you need. Also if you don't have icons and don't want to spend money or time buying or creating your own icons, you can use the existing Vaadin Font Icons (list of icons and matching java enum)
public class ButtonWithIconOnTheRightComponent extends VerticalLayout {
public ButtonWithIconOnTheRightComponent() {
// text filed to specify icon URL
TextField urlField = new TextField("Icon URL", "http://files.softicons.com/download/toolbar-icons/status-icons-set-by-iconleak/png/16x16/30.png");
// button which updates its icon using the URL specified in the text field above
Button button = new Button("Update icon", event -> event.getButton().setIcon(new ExternalResource(urlField.getValue())));
// use valo style to align icon to the right
button.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);
// add components to the UI
addComponents(urlField, button);
setSpacing(true);
}
}

Codename one Tabs Button Styling

I'm stuck with this Codename one UI component for two days and still couldn't get a proper solution...I added tabs in my application but when I run the application, the tabs I added don't look as I expected.
The height of my tab is too big and I want to reduce it.
See the screenshot of how the tab currently looks below:
And here is the code I'm using in my application:
Tabs t = new Tabs();
Style s = UIManager.getInstance().getComponentStyle("Tab");
FontImage icon1 = FontImage.createMaterial(FontImage.MATERIAL_QUESTION_ANSWER, s);
Container container1 = BoxLayout.encloseY();
Container container2 = BoxLayout.encloseY();
t.addTab("Tab1", icon1, container1);
t.addTab("Tab2", container2);
hi.add(BorderLayout.SOUTH, t);
hi.show();

Open your GUI Builder and style the Tab Uiid to reduce the padding as necessary:
Style the Unselected, Selected and Pressed to have the same padding size, see the image below to know the key elements to touch:

refresh embedded image vaadin

I have following code to show a picture in an embedded picture in Vaadin
final Embedded currentPicture = new Embedded("Profile picture of " + strusername);
File uploadedPicture = new File(alreadyUploaded);
currentPicture.setSource(new FileResource(uploadedPicture));
This is just a small part of a larger project so this is just a snippet.
The code works fine but gives problem with caching. I know that I can counter the caching by adding a random factor to the URL of the image, but I can't seem to get it working with an embedded picture.
For instance: the value of alreadyuploaded is "/path/to/pic/user.jpg" and Vaadin shows the image as following: http://my.project/picture/APP/global/0/legacy/0/user.jpg when I check the HTML code.
When I refresh I see another picture (still not the right one) and the link is as following:
http://my.project/picture/APP/global/7/legacy/7/user.jpg
Another refresh results in:
http://my.project/picture/APP/global/9/legacy/9/user.jpg
Is there any way I can add a random element to an embedded picture? The example of the Book of Vaadin doesn't work since I don't have streamresource because I used this upload picture example on the Book of Vaadin

IE pop up window is not re-sizable

This is a pdf file opened in a pop up window. Chrome and FF work fine (obviously). But the window on EE (10 and 9) is not re-sizable. I read some posts about fixing non-resizable window problems here. They recommend putting a parameter "resizable" in window.open; but I don't use window.open in my code. The code for opening the pdf file in a new window is something this
Link pdfLink = new Link("Printable version", createFormLink(url,
member.getId().toString(), answers.get(0).getVisitorId(), surveyId, "review.pdf"),
"_blank", 500, 400, Link.TARGET_BORDER_NONE);
Its the link class from com.vaadin.ui
https://vaadin.com/api/com/vaadin/ui/Link.html
I went through the api and couldn't find any parameter that allow IE window to be re-sizable . any help and tips are appreciated

The Link component doesn't allow you to specify parameters like resizable. BrowserWindowOpener does. Use it like this:
Button pdfLink = new Button("Printable version");
pdfLink.addStyleName(BaseTheme.BUTTON_LINK);
BrowserWindowOpener windowOpener = new BrowserWindowOpener(createFormLink(...));
windowOpener.setFeatures("width=500,height=400,resizable=yes");
windowOpener.extend(pdfLink);