during the previous weeks, I evaluated Vaadin 7 Alpha 3 by building a small prototype application. Finally, the prototype worked well.
Today, I tried to include the new navigation concept introduced by Vaadin 7 Alpha 3. So I changed some CustomComponents into Views and added Navigator and SimpleViewDisplay to my code. While the navigation itself works very well, I recognized a problem with missing scrollbars. When I resize my browser window (make it smaller), no (vertical in my case) scrollbar appears when the place becomes too small for the view.
I created a minimal example (my prototype is larger and more complex, with split panels,etc.) and attached it to this post.
Within the ‘init’ method, one can switch between the two “versions” (with/without Navigator). When I resize my browser window (make it smaller), I get the follow behaviour:
without Navigator: vertical scrollbar appears when window becomes too small
with Navigator: no scrollbar appears when window becomes too small.
I tried with Firefox and Internet Explorer. The results are the same!
Do I make any mistake within my code? (In my larger prototype, I also tried ‘setSizeFull’ and ‘setSizeUndefined’ without success!) Or is there a bug in the new Vaadin code?
I could reproduce the problem you describe using Chrome, IE, and Firefox. Using Firebug I, studied the generated HTML code for both cases. When the Navigator is not used, the DIV-container wrapped around the labels is relatively simple and looks like the following:
I assume this is due to the fact, that the Root’s content is a SimpleViewDisplay instead of a VerticalLayout which is rendered differently. Now the culprit for the effect you describe is CSS class v-customcomponent which is defined as
.v-customcomponent {
overflow: hidden;
}
in styles.css. If you switch off the overflow property with Firebug, the view will behave as in the case without the Navigator.
I’m not yet that particularly proficient with the new Vaadin 7 API. But I think one solution to this problem would be to write an own class that implements com.vaadin.navigator.ViewDisplay. This class could extend VerticalLayout instead of CustomComponent, for instance. You will pass that to your Navigator through Navigator’s constructor.
Your proposition sounds good. Nevertheless, I did not implement a ViewDisplay by extending a layout (e.g., Vertical Layout as you suggested). Instead, my ViewDisplay can directly use a “place” within a layout of the surrounding page. As a consequence, the resulting HTML does not contain any additional elements for the ViewDisplay itself. A disadvantage is that you need different ViewDisplay implementations depending on the “used” layouts.
Here is an example:
My page has a HorizontalSplitPanel. The second (right) component is to be used as ViewDisplay. For that purpose, I implemented class ‘AbstractSplitPanelViewDisplay’ as follows:
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewDisplay;
import com.vaadin.ui.AbstractSplitPanel;
import com.vaadin.ui.Component;
public class AbstractSplitPanelViewDisplay implements ViewDisplay {
private AbstractSplitPanel splitPanel;
private SplitPanelComponent splitPanelComponent;
public AbstractSplitPanelViewDisplay(AbstractSplitPanel splitPanel, SplitPanelComponent splitPanelComponent) {
this.splitPanel = splitPanel;
this.splitPanelComponent = splitPanelComponent;
}
public SplitPanelComponent getSplitPanelComponent() {
return splitPanelComponent;
}
@Override
public void showView(View view) {
if (!(view instanceof Component)) {
throw new IllegalArgumentException("View is not a Component: " + view);
}
switch (splitPanelComponent) {
case FIRST_COMPONENT:
splitPanel.setFirstComponent((Component) view);
break;
case SECOND_COMPONENT:
splitPanel.setSecondComponent((Component) view);
break;
}
}
public enum SplitPanelComponent {
FIRST_COMPONENT, SECOND_COMPONENT;
}
}
Now, I can use it with my HorizontalSplitPanel:
HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
ViewDisplay display = new AbstractSplitPanelViewDisplay(splitPanel, SplitPanelComponent.SECOND_COMPONENT);