Hi, I am facing a problem in my ui.
Whenever i navigate from one page to other, the UI starts from the beginning. The results are as desired but the whole page get refreshed. I want only to refresh the content, not the main layout that is with menubar.
Please Help.
Thanks.
D.
Dilpreet, how are you navigating between views? It sounds like you are using Link components; those will indeed do a page reload.
In Vaadin, you should navigate with one of the following methods:
- using replaceComponent in root layouts, replacing one view with another
- if using the Navigator, calling Navigator.navigate(“otherView”)
thanks Thomas for the reply.
I am using the navigator. Can you help me with the refresher as i get to know that refresher might help me.
Thanks.
D.
I am almost certain that Refresher has nothing to do with your issue. Judging from your other thread, you have other layouting issues too. Without seeing your code there isn’t really much I can do.
Make sure your layouting code is correct (that everything has correct height and width).
How are you using navigator? are you changing URI fragments yourself? are you using Threads? How do you set up the Navigator?
mainView class
public void enter(ViewChangeEvent event) {
addStyleName("root");
setSizeFull();
addComponent(mainHorizontalLayout);
mainHorizontalLayout.addStyleName("main-view");
mainHorizontalLayout.setSizeFull();
//sidebarVerticalLayout which i dont want to change or get refreshed
mainHorizontalLayout.addComponent(sidebarVerticalLayout);
sidebarVerticalLayout.addStyleName("sidebar");
sidebarVerticalLayout.setWidth(null);
sidebarVerticalLayout.setHeight("100%");
//Right Layout which i want to change when i navigate.
content.addComponent(new Label(“hello Layout”));
mainHorizontalLayout.addComponent(content);
content.setSizeFull();
content.addStyleName(“view-content”);
mainHorizontalLayout.setExpandRatio(content, 1);
}
public void prepareContentLayout(CssLayout layout) {
mainHorizontalLayout.replaceComponent(content, layout);
}
in menubar i have some buttons which will navigate from one view to other.
1st view Class
public void enter(ViewChangeEvent event){
prepareContentLayout(prepareCenterComponent());
}
public CssLayout prepareCenterComponent() {
CssLayout content = new CssLayout();
content.setSizeFull();
content.addComponent(new Label(“1st View”));
}
All views are like this view.
When i navigate from 1 view to other, the url changes but the screen becomes white.
That code looks OK to me. How do you create the navigator? and could you answer the other question I had as well?
AppUI current = (AppUI) UI.getCurrent();
Navigator navigator = current.getNavigator();
navigator.navigateTo(“1stView”);
this is how i have to declare the navigator and every time i have to navigate i write the whole code
“AppUI current = (AppUI) UI.getCurrent();
Navigator navigator = current.getNavigator();
navigator.navigateTo(“1stView”);”
again so it could get the navigator.
And no, i am not using threads and as iam new to vaadin i dont know about URI fragments so i guess i am not using it.
You have to create the Navigator somewhere, it isn’t enabled by default… Where do you call the constructor of the Navigator?
i didnot called any constructor for navigator.
and how is it related to my problem?
i just tried making the navigator in the main Class and navigating through that navigator but still the same.
I you haven’t created a Navigator, then Vaadin won’t know what to do when you try to navigate, which will lead to all sorts of problems. Please see the Book of Vaadin how to create a navigator:
https://vaadin.com/book/-/page/advanced.navigator.html
you should choose the constructor you use carefully; it determines where the view is rendered.
You should define the navigator from your UI’s init callback :
// main application
public class SampleUI extends UI implements Serializable, Button.ClickListener {
CssLayout root;
CssLayout content;
Navigator nav;
CssLayout menu;
//.....
@Override
protected void init(VaadinRequest request) {
// contruct your page, sub view will render into "content"
content = new CssLayout() {
{
addStyleName("main-view");
setSizeFull();
}
};
// main layout
root = new CssLayout() {
{
addStyleName("main-content");
setSizeFull();
}
};
//.....
root.addComponent(content);
setContent(root);
//.....
// call example
root.addComponent(new NativeButton("just a menu", SampleUI.this) {
{
setData("/simpletoolbar");
}
});
// create navigator
nav = new Navigator(this, content);
nav.addView("", MainView.class);
nav.addView("/simpletoolbar", SimpleToolbarView.class);
//.....
@Override
public void buttonClick(ClickEvent event) {
UI.getCurrent().getNavigator().navigateTo((String) event.getButton().getData());
}
}
// sub view
public class MainView extends HorizontalLayout implements View {
}I can navigate from one view to the other.Thats not a problem. The problem is whenevr i navigate, i want only for the right side content to get changed with navigation and not the left side menu. whenever i navigate, the whole page is getting updated. I want it like ajax on right side content. I hope i made it clear to you what my problem is.
D.
OK, well in that case the problem is definitely the creation of the Navigator. The constructor takes two arguments, of which the first one is always the UI object. The second one is where the view should be placed. In your case, you need something like the following in your UI.init-method:
HorizontalLayout hl= new HorizontalLayout();
hl.setSizeFull();
setContent(hl);
hl.addComponent(leftSideLayout);
CssLayout wrapper=new CssLayout();
wrapper.setSizeFull();
hl.addComponent(wrapper);
hl.setExpandRatio(wrapper, 1);
Navigator n= new Navigator(this, wrapper);The navigated view will be renderd inside the wrapper layout, and your menu will stay where it is. You can replace the HL with e.g. a hirozontalSplitPanel, and the CssLayout with a Panel if you need scrolling of the content.
Thanks, i did the same already 
its working.
Thanks anyways.
D.