web-dev-qa-db-fra.com

Comment ajouter une barre de défilement à la disposition Vaadin

J'ai trouvé de nombreuses questions où les gens demandent comment masquer les barres de défilement dans les dispositions Vaadin, mais mon problème est que Vaadin ne m'affiche aucune barre de défilement. Par exemple, je peux avoir ce code:

HorizontalLayout layout = new HorizontalLayout();
layout.setSizeUndefined(); // I also tried setSizeFull()
for(Integer i = 1; i <= 15; i++) {
    layout.addComponent(new Button("Test button #" + i.toString());
}

Mais lorsque j'exécute ce code, les boutons de la page sont simplement coupés lorsque la fenêtre du navigateur est trop petite pour les afficher tous. Aucune barre de défilement n'apparaîtra jamais.

J'ai également essayé de créer le panneau, puis d'ajouter ma disposition à ce panneau. J'ai testé à la fois - panel.addComponent(foo) et aussi panel.setContent(foo), et j'ai essayé de définir panel.setScrollable(true) aussi. Sans succès.

Existe-t-il un moyen d'ajouter une barre de défilement à une sorte de disposition Vaadin? J'utilise Vaadin 6.8.7. Merci d'avance!


Il y a mon code complet:

private ComponentContainer openZoomifyLayout() {
    Panel panel = new Panel();
    Panel panel2 = new Panel();

    middlePanel = new MiddlePanel();

    VerticalLayout mw = new VerticalLayout();
    mw.setSizeFull();

    HorizontalLayout sp = new HorizontalLayout();
    Panel photos = new Panel();
    photos.setSizeUndefined();

    mw.addComponent(panel);
    mw.addComponent(panel2);
    mw.addComponent(sp);

    mw.setExpandRatio(sp, 99);
    mw.setExpandRatio(panel, 0);
    mw.setExpandRatio(panel2, 0);

    panel2.addComponent(middlePanel);

    mw.setComponentAlignment(panel, Alignment.TOP_CENTER);
    mw.setComponentAlignment(panel2, Alignment.TOP_CENTER);

    photos.setContent(table);
    photos.setScrollable(true);
    sp.addComponent(photos);
    sp.addComponent(createMainDetail());

    return mw;
}

Cette méthode est utilisée dans la classe qui étend Window, et donc au moment de l'initialisation est là: setContent(openZoomifyLayout());

18
Firzen

Votre spHorizontalLayout et votre photosPanel doivent être de taille normale.

Comme vous pouvez le lire dans le chapitre du livre Vaadin 6.6.1

Normalement, si un panneau a une taille indéfinie dans une direction, comme il l'a par défaut verticalement, il s'adaptera à la taille du contenu et augmentera à mesure que le contenu se développera. Cependant, s'il a une taille fixe ou proportionnelle et que son contenu devient trop grand pour tenir dans la zone de contenu, une barre de défilement apparaîtra pour la direction particulière. Les barres de défilement dans un Panel sont gérées nativement par le navigateur avec la propriété overflow: auto en CSS.

19
nexus

Vous aurez besoin d'un panneau. Vous devez également vous assurer que la taille du panneau est fixe et non "naturelle". Si sa taille est "naturelle", le panneau sera agrandi jusqu'à ce que son contenu puisse être entièrement affiché. La taille par défaut des panneaux est naturelle, et c'est la raison pour laquelle vous ne voyez aucune barre de défilement.

5
blubb

Suivez ces étapes:

  • la disposition extérieure nécessite une taille fixe ou proportionnelle dans la direction appropriée (par exemple, VerticalLayout nécessite une hauteur fixe ou proportionnelle)
  • la disposition intérieure a besoin d'une taille indéfinie dans cette direction
  • la mise en page externe nécessite un nom de style v-scrollable

par exemple.

public class SomeView extends CustomComponent implements View
{
        this.addStyleName("v-scrollable");
        this.setHeight("100%");
        VerticalLayout content = new VerticalLayout();
        // content has undefined height by default - just don't set one
        setCompositionRoot(content);
...
}

Cela fera que CustomComponent affichera une barre de défilement tandis que content grossira au besoin.

4
geert3