Hello everyone.
It is not that much time I use Vaadin. My problem is that I have a web page with a window with the fields and their values. In the window are buttons which when clicked should update me only the window, not the entire page. Basically I want to do a post on the window. How can I do?
Can someone help me ? My window is made as the dashboard of the example of Vaadin but unlike this when I click on a button in the footer of my window this should update the fields , but this does not happen .
I honestly don’t quite get what the problem here is.
So you are talking about a normal Vaadin application and not about an embedded webpage inside a Vaadin application right?
In the case you should have normal Vaadin Buttons and you can just use yourButton.setOnClickListener( new OnClickListener(){{…}); to react to a click on the Button and update some components in your UI/window.
If you’re having problems with a specific part of your could you post a small snippet of it (please see you can extract only the necessary code if you want to post it as code above 100 lines tends to be hard to read/understand on the forum).
Ok, Thank you.
This is my code.
@SuppressWarnings("serial")
public class ProfilePreferencesWindow extends Window {
public static final String ID = "profilepreferenceswindow";
private Label firstNameField;
private Label lastNameField;
private ProfilePreferencesWindow(final User user,
final boolean preferencesTabOpen) {
addStyleName("profile-window");
setId(ID);
Responsive.makeResponsive(this);
setModal(true);
setCloseShortcut(KeyCode.ESCAPE, null);
setResizable(false);
setClosable(false);
setHeight(90.0f, Unit.PERCENTAGE);
VerticalLayout content = new VerticalLayout();
content.setSizeFull();
content.setMargin(new MarginInfo(true, false, false, false));
setContent(content);
TabSheet detailsWrapper = new TabSheet();
detailsWrapper.setSizeFull();
detailsWrapper.addStyleName(ValoTheme.TABSHEET_PADDED_TABBAR);
detailsWrapper.addStyleName(ValoTheme.TABSHEET_ICONS_ON_TOP);
detailsWrapper.addStyleName(ValoTheme.TABSHEET_CENTERED_TABS);
content.addComponent(detailsWrapper);
content.setExpandRatio(detailsWrapper, 1f);
detailsWrapper.addComponent(buildProfileTab());
detailsWrapper.addComponent(buildPreferencesTab());
if (preferencesTabOpen) {
detailsWrapper.setSelectedTab(1);
}
content.addComponent(buildFooter());
}
private Component buildPreferencesTab() {
VerticalLayout root = new VerticalLayout();
root.setCaption("Preferences");
root.setIcon(FontAwesome.COGS);
root.setSpacing(true);
root.setMargin(true);
root.setSizeFull();
Label message = new Label("Not implemented in this demo");
message.setSizeUndefined();
message.addStyleName(ValoTheme.LABEL_LIGHT);
root.addComponent(message);
root.setComponentAlignment(message, Alignment.MIDDLE_CENTER);
return root;
}
private Component buildProfileTab() {
HorizontalLayout root = new HorizontalLayout();
root.setCaption("Profile");
root.setIcon(FontAwesome.USER);
root.setWidth(100.0f, Unit.PERCENTAGE);
root.setSpacing(true);
root.setMargin(true);
root.addStyleName("profile-form");
FormLayout details = new FormLayout();
details.addStyleName(ValoTheme.FORMLAYOUT_LIGHT);
root.addComponent(details);
root.setExpandRatio(details, 1);
firstName = new Label(user.getFistNameField);
firstNameField.setCaption("First Name");
details.addComponent(firstNameField);
lastNameField = new Label(user.getLastNameField);
lastNameField.setCaption("Last Name");
details.addComponent(lastNameField);
................
return root;
}
private Component buildFooter() {
HorizontalLayout footer = new HorizontalLayout();
footer.addStyleName(ValoTheme.WINDOW_BOTTOM_TOOLBAR);
footer.setWidth(100.0f, Unit.PERCENTAGE);
Button edit= new Button("Edit");
edit.addStyleName(ValoTheme.BUTTON_PRIMARY);
edit.addClickListener(new ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
try {
editFirstName();
[size=4]
[u]
[b]
//Here is my problem. How can I do to refresh window immediately?????????
[/b]
[/u]
[/size]
Notification success = new Notification(
"Profile updated successfully");
success.setDelayMsec(2000);
success.setStyleName("bar success small");
success.setPosition(Position.BOTTOM_CENTER);
success.show(Page.getCurrent());
MyFirstProjectEventBus.post(new ProfileUpdatedEvent());
close();
} catch (CommitException e) {
Notification.show("Error while updating profile",
Type.ERROR_MESSAGE);
}
}
});
ok.focus();
footer.addComponent(ok);
footer.setComponentAlignment(ok, Alignment.TOP_RIGHT);
return footer;
}
public static void open(final User user, final boolean preferencesTabActive) {
MyFirstProjectEventBus.post(new CloseOpenWindowsEvent());
Window w = new ProfilePreferencesWindow(user, preferencesTabActive);
UI.getCurrent().addWindow(w);
w.focus();
}
private void editFirstName(){
firstName = new Label("Edit First Name");
}I hope I was clear.
If I understand correctly what you want to do is: As soon as the Button edit in the Footer is clicked the Text of the Label firstName gets updated.
The way you do it is updating the reference variable of “firstName” but in your case it would be a lot easier to just use
private void editFirstName(){
firstName.setValue("Edit First Name");
}
This way you don’t have to refresh or update any window.
I hope that this was really your problem and not something else.
The solution is this. I do not know why I did not get there first. It was simple and there was no need to update the entire window. Thanks for the answer. 