How can I make this? https://vaadin.com/book/-/page/advanced.urifu.html#figure.advanced.urifu
I would like to use a label (e.g. like in this page "Figure 11.12, Application State Management with URI Fragment Utility") and if the user click on it, then the browser focuses that paragraph.
One way is to use method UI.scrollIntoView(Component) after receiving UriFragmentChangedEvent . Another way would be to use JavaScript. SSCCE (MainUI class):
VerticalLayout layout = new VerticalLayout();
Label up = new Label("Up");
Label middle = new Label("Middle");
Label down = new Label("Down");
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = QwertUI.class)
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
Button buttonUp = new Button("Up");
Button buttonMiddle = new Button("Middle");
Button buttonDown = new Button("Down");
buttonUp.addClickListener(this);
buttonMiddle.addClickListener(this);
buttonDown.addClickListener(this);
up.setHeight("666px");
middle.setHeight("666px");
down.setHeight("666px");
layout.addComponents(buttonUp, buttonMiddle, buttonDown, up, middle, down);
setContent(layout);
getPage().addUriFragmentChangedListener(
new UriFragmentChangedListener() {
public void uriFragmentChanged(
UriFragmentChangedEvent source) {
enter(source.getUriFragment());
}
});
enter(getPage().getUriFragment());
}
private void enter(String uriFragment){
UI ui = up.getUI();
if(uriFragment != null){
switch(uriFragment){
case "Up": ui.scrollIntoView(up);; break;
case "Middle": ui.scrollIntoView(middle); break;
case "Down": ui.scrollIntoView(down); break;
}
}
}
#Override
public void buttonClick(ClickEvent event)
{
getPage().setUriFragment(event.getButton().getCaption());
}
Related
I defined a custom FieldEditorPreferencePage. In createFieldEditors method I construct a simple interface with a custom FieldEditor that holds button that loads a file. When a user loads the file the interface region (where the button stands) need to change and show other specific gui. How to invalidate the FieldEditorPreferencePage? I used the layout() method of the parent composite but nothing happens. What am I doing wrong here?
public class MyPage extends FieldEditorPreferencePage {
...
private Composite fieldEditorParent;
private boolean fileLoaded = false;
#Override
protected void createFieldEditors() {
fieldEditorParent = this.getFieldEditorParent();
MyFieldEditor compositeFieldEditor = new MyFieldEditor(fieldEditorParent) {
if(fileLoaded) {
//draw file content
} else {
Button chooseButton = new Button(buttonsComposite, SWT.NONE);
chooseButton.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(SelectionEvent e) {
//choose file
fileLoaded = true;
//invalidate page <-- THIS DOES NOT WORK!
fieldEditorParent.layout(true, true);
}
}
}
}
}
i cannot get a navigator to run within my project.
i always get the Error
"Component must be attached to a session when getConnectorId() is called for the first time"
i followed several examples where it ran out of the box with nealy the exact same setup but i cannot get it to run within my environment and i don't know why.
This is my MainUI
#SpringUI
public class MainUI extends UI implements View{
HorizontalLayout root;
#Override
protected void init(VaadinRequest request) {
root = new HorizontalLayout();
VerticalLayout menu = this.createMenuBar();
menu.setWidth("20%");
root.addComponents(menu);
Panel viewPanel = new Panel();
root.addComponentsAndExpand(viewPanel);
setContent(root);
final Navigator navigator = new Navigator(this, viewPanel);
navigator.addView("Food", FoodView.class);
navigator.addView("Meal", MealView.class);
navigator.addView("", MainView.class);
// even with
//navigator.addView("Main", MainView.class);
//navigator.navigateTo("Main");
// i get the same error
}
#Override
public void enter(ViewChangeEvent event) {
// TODO
}
private VerticalLayout createMenuBar() {
VerticalLayout menuBar = new VerticalLayout();
for(String s: new String[] {"Food", "Meal"}) {
menuBar.addComponents(this.createNavigationButton(s, this.getNavigator()));
}
return menuBar;
}
private Button createNavigationButton(final String state, final Navigator navigator) {
return new Button("Go go" + state, new Button.ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
navigator.navigateTo(state);
}
});
}
}
This is my Main/Food/Meal View, they are only stumps with only a label because i just wanted to test a Multipage example
#SpringView(name = MainView.VIEW_NAME)
public class MainView extends UI implements View {
public static final String VIEW_NAME = "Main";
#Override
protected void init(VaadinRequest request) {
VerticalLayout root = new VerticalLayout();
setContent(root);
Label lbl = new Label("MainView");
root.addComponent(lbl);
}
#Override
public void enter(ViewChangeEvent event) {
}
}
I need to "emulate" this:
document.getElementsByTagName("body")[0].onclick = function gameOver() { ...}
in vaadin 7, to display a dialog box when the user clicks anywhere on the web page
My code:
//...
#Override
protected void init(VaadinRequest request) {
Label labelH1 = new Label("<span style=\"color:SteelBlue;\">M</span>atching "
+ "<span style=\"color:Purple;\">G</span>ame!", ContentMode.HTML);
labelH1.setStyleName("h2");
Label labelH4 = new Label("Click on the extra smiling face on the <span>left</span>.",
ContentMode.HTML);
labelH4.setStyleName("h4");
CssLayout layout = new CssLayout();
AbsoluteLayout leftLayout = new AbsoluteLayout();
leftLayout.setId("leftSide");
AbsoluteLayout rightLayout = new AbsoluteLayout();
rightLayout.setId("rightSide");
layout.addComponent(labelH1);
layout.addComponent(labelH4);
layout.addComponent(leftLayout);
layout.addComponent(rightLayout);
setContent(layout);
}
You can use the click listener on the current UI. As following:
UI.getCurrent().addClickListener(new ClickListener()
{
#Override
public void click(com.vaadin.event.MouseEvents.ClickEvent event)
{
// You can show the dialouge box or any other of your desired task here ...!!!
System.out.println("UI is clicked");
}
});
I have a menubar in my vaadin application and want to add an item to open a pdf-file is a new tab of the browser. I found some solutions to open files with a button, but I have to use an MenuItem...
MenuBar.Command commandHandler = new MenuBar.Command() {
#Override
public void menuSelected(MenuItem selectedItem) {
if (selectedItem.equals(menu_help)) {
openHelp();
}
}
};
...
menu_help = menuBar
.addItem("", WebImageList.getImage(ImageList.gc_helpIcon),
commandHandler);
...
private void openHelp() {
// open pdf-file in new window
}
Thanks for help!
SOLUTION:
private void openHelp() {
final String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
Resource pdf = new FileResource(new File(basepath + "/WEB-INF/datafiles/help.pdf"));
setResource("help", pdf);
ResourceReference rr = ResourceReference.create(pdf, this, "help");
Page.getCurrent().open(rr.getURL(), "blank_");
}
Attention: This code works, but the the structure of code is not perfect ;-) Better is to store "basepath" and "pdf" as attribute...
There is a similar problem described here: How to specify a button to open an URL?
One possible solution:
public class MyMenuBar extends MenuBar {
ResourceReference rr;
public MyMenuBar() {
Resource pdf = new FileResource(new File("C:/temp/temp.pdf"));
setResource("help", pdf);
rr = ResourceReference.create(pdf, this, "help");
}
private void openHelp() {
Page.getCurrent().open(rr.getURL(), "blank_");
}
...
}
The setResource method of AbstractClientConnector is protected, so this is you need to extend some Vaadin component to make it work. This is why Im creating the class MyMenuBar here. If you are using an external resource you don't need to attach it to any component with setResource and then this is not nessecary.
I used the following code to do something similar:
private Component buildUserMenu() {
final MenuBar settings = new MenuBar();
settings.addStyleName("user-menu");
final User user = getCurrentUser();
settingsItem = settings.addItem("", new ThemeResource(
"img/logo.png"), null);
updateUserName(null);
settingsItem.addItem(Lang.getMessage("menu.edit"), new Command() {
#Override
public void menuSelected(final MenuItem selectedItem) {
ProfilePreferencesWindow.open(user, false);
}
});
settingsItem.addSeparator();
settingsItem.addItem(Lang.getMessage("menu.help"), new Command() {
#Override
public void menuSelected(final MenuItem selectedItem) {
Window help = new Window();
help.setWidth("90%");
help.setHeight("90%");
BrowserFrame e = new BrowserFrame("PDF File", new ThemeResource("pdf/ayuda.pdf"));
e.setWidth("100%");
e.setHeight("100%");
help.setContent(e);
help.center();
help.setModal(true);
UI.getCurrent().addWindow(help);
}
});
settingsItem.addSeparator();
settingsItem.addItem(Lang.getMessage("menu.logout"), new Command() {
#Override
public void menuSelected(final MenuItem selectedItem) {
BarsEventBus.post(new UserLoggedOutEvent());
}
});
return settings;
}
I have created a view as below:
The menu Layout or the left vertical layout does not have the entire Layout filled in Blue color. Its only Blue till the respective Buttons are present.
I need to have the entire Menu Layout in Blue Color and retain the Buttons in same position as it is now. So, to achieve it I uncommented the below code in the view
menuLayout.setSizeFull();
But the entire menu layout becomes very bad to look as below. please see the below snapshot
Could someone please help on this?
The code used is as below:
public class AppointmentView extends CustomComponent implements View,Button.ClickListener {
private static final long serialVersionUID = 1L;
public static final String NAME = "Appointment";
private VerticalLayout mainLayout = new VerticalLayout();
private VerticalLayout upperSection = new VerticalLayout();
private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();
private Button newContact = new NativeButton("Add contact");
private Button search = new NativeButton("Search");
private Button share = new NativeButton("Share");
private Button help = new NativeButton("Help");
private NavigationTree tree = new NavigationTree();
public AppointmentView() {
setSizeFull();
upperSection.addComponent(new Label(""));
menuLayout.addComponent(new Label(""));
contentLayout.addComponent(new Label(""));
menuLayout.setSpacing(true);
//menuLayout.setSizeFull();
menuLayout.setStyleName(Reindeer.LAYOUT_BLUE);
lowerSection.addComponent(menuLayout);
lowerSection.addComponent(contentLayout);
lowerSection.setSizeFull();
upperSection.setStyleName(Reindeer.LAYOUT_BLUE);
upperSection.addComponent(createToolbar());
lowerSection.setSplitPosition(30);
menuLayout.addComponent(createVerticalToolbar());
mainLayout.addComponent(upperSection);
mainLayout.addComponent(lowerSection);
mainLayout.setSizeFull();
mainLayout.setExpandRatio(lowerSection, 1);
setCompositionRoot(mainLayout);
}
private Component createToolbar() {
HorizontalLayout layout = new HorizontalLayout();
Embedded em = new Embedded("", new ClassResource("../../com/image/logo.png"));
layout.addComponent(em);
layout.setComponentAlignment(em, Alignment.MIDDLE_RIGHT);
layout.setExpandRatio(em, 1);
layout.setStyleName("toolbar");
layout.setMargin(true);
layout.setSpacing(true);
layout.setWidth("100%");
return layout;
}
#SuppressWarnings("deprecation")
private Component createVerticalToolbar() {
VerticalLayout lo = new VerticalLayout();
newContact.setStyleName("img");
newContact.setWidth("100%");
newContact.setIcon(new ClassResource("../../com/image/document-add.png"));
newContact.addListener((Button.ClickListener) this);
lo.addComponent(newContact);
search.setIcon(new ClassResource("../../com/image/folder-add.png"));
search.addListener((Button.ClickListener) this);
search.setWidth("100%");
lo.addComponent(search);
share.setIcon(new ClassResource("../../com/image/users.png"));
share.addListener((Button.ClickListener) this);
share.setWidth("100%");
lo.addComponent(share);
help.setIcon(new ClassResource("../../com/image/help.png"));
help.addListener((Button.ClickListener) this);
help.setWidth("100%");
lo.addComponent(help);
lo.setMargin(true);
lo.setSpacing(true);
lo.setWidth("100%");
lo.setSizeFull();
return lo;
}
public void buttonClick(ClickEvent event) {
final Button source = event.getButton();
if (source == search) {
Notification.show("Search hit");
} else if (source == newContact) {
Notification.show("New contact");
} else if (source == help) {
Notification.show("Help");
} else if (source == share) {
Notification.show("Share");
}
}
#Override
public void enter(ViewChangeEvent event) {
// TODO Auto-generated method stub
}
}
You nested two VerticalLayouts for the left menu.
When you wish to fill the whole height, then setting the height to 100% is the correct way to do it.
A VerticalLayout usually distributes the space between the components.
If you don't wish this, then you can set expansionratios to tell it which component should use how much space.
In the constructor change the line calling the createVerticalToolbar to this:
.....
createVerticalToolbar(menuLayout);
.....
private void createVerticalToolbar(VerticalLayout lo) {
newContact.setStyleName("img");
newContact.setWidth("100%");
newContact.setIcon(new ClassResource("../../com/image/document-add.png"));
newContact.addListener((Button.ClickListener) this);
lo.addComponent(newContact);
search.setIcon(new ClassResource("../../com/image/folder-add.png"));
search.addListener((Button.ClickListener) this);
search.setWidth("100%");
lo.addComponent(search);
share.setIcon(new ClassResource("../../com/image/users.png"));
share.addListener((Button.ClickListener) this);
share.setWidth("100%");
lo.addComponent(share);
help.setIcon(new ClassResource("../../com/image/help.png"));
help.addListener((Button.ClickListener) this);
help.setWidth("100%");
lo.addComponent(help);
// Add new component which uses up the remaining space
Label lbl= new Label("About");
lo.addComponent(lbl);
lo.setExpandRatio(help, 20);
lo.setMargin(true);
lo.setSpacing(true);
lo.setWidth("100%");
lo.setSizeFull();
return lo;
}