For the development of my views, I use the CustomLayout and in style.css i do
.v-customlayout {
overflow: auto;
}to see all my components, but I often have trouble with scrollBar on each CustomLayout (scroll in other scroll).
I want to have a single scroll for the entire application, scroll to an entire window.
Is there a way to make a single scroll for the entire application?
Thank you for your help.
Adding scrollbars to the core components and layouts using overflow: auto is in many cases problematic because of the pixel calculations the layouts do. In most cases the layouts don’t know that they should take the extra scrollbar into account, and you end up with extra scrollbars.
To get only one scrollbar for the whole app, you just need to set the height of the root layout of your main window to undefined:
mainWindow.getContent().setHeight(null);thank you Jouni
I removed the style property
.v-customlayout {
overflow: auto;
}
and I do as you tell me[code]
mainWindow.getContent().setHeight(null);
[/code].
This is much better, but there is always a vertical scroll to the Split.
Also when I slide the horizontal scroll I can not see the whole page.
Attached is a picture I hope it helps to explain my problem.
Thank you again for your help.
Hmm, I’m not quite sure what you’re after with the layout, which part is fixed and what should scroll. Can you post a snippet of code and describe a bit more how the layout should work.
My page layout is a VerticalSplitPanel and HorizontalSplitPanel.
I do not want to set the size of CustomLayout.
By cons I am willing to fix the size of some components like my table or Label …
What I would like the Custom Split or components which are infinite in size depending on the components they contain, and I want to have a single scroll for the entire application (right and bottom of the application).
I write all the code and if you are not clear I can explain.
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package gz.vaadin;
import com.vaadin.Application;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.event.ItemClickEvent;
import com.vaadin.terminal.Sizeable;
import com.vaadin.terminal.gwt.server.WebApplicationContext;
import com.vaadin.terminal.gwt.server.WebBrowser;
import com.vaadin.ui.*;
import com.vaadin.ui.Window.Notification;
import gz.admin.custom.*;
import gz.commun.SessionManager;
import gz.ldap.PersonneGZ;
import gz.treetable.ThreadTreeTablePI;
import org.apache.log4j.Logger;
/**
*
* @author Amallek
*/
public class MySplitPanel extends VerticalLayout {
private Logger log4j = Logger.getLogger(MySplitPanel.class);
SessionManager sessionManager;
Notification notif = null;
PersonneGZ personneGZ;
WebBrowser webBrowser;
int screenWidth;
int screenHeight;
HorizontalSplitPanel horiz;
VerticalSplitPanel vert;
CustomEntete entete;
private Tree tree;
WebApplicationContext webCtx;
Application application;
CustomLayout customLayout = new CustomLayout("generic");
Label label = new Label();
public MySplitPanel(WebApplicationContext webCtx, Application application, float height) throws Exception {
this.webCtx = webCtx;
this.application = application;
sessionManager = new SessionManager(webCtx);
personneGZ = (PersonneGZ) sessionManager.getParamSession("personneGZ");
webBrowser = webCtx.getBrowser();
screenWidth = webBrowser.getScreenWidth();
screenHeight = webBrowser.getScreenHeight();
entete = new CustomEntete(webCtx);
// First a vertical SplitPanel
vert = new VerticalSplitPanel();
height = height - 10;
vert.setHeight(height + "px");
addComponent(vert);
vert.setLocked(true);
vert.setStyleName("vert");
vert.setSplitPosition(55, Sizeable.UNITS_PIXELS);
// add a label to the upper area
vert.addComponent(entete);
// Add a horizontal SplitPanel to the lower area
horiz = new HorizontalSplitPanel();
horiz.setStyleName("horiz");
horiz.setSplitPosition(150, Sizeable.UNITS_PIXELS);
vert.addComponent(horiz);
tree = new Tree("Navigation menu :");
tree.setImmediate(true);
// Create the tree nodes
tree.addItem("Supervision des contrôles");
tree.addItem("Administration");
tree.addItem("Aide");
tree.addItem("Gestion des Contrôles");
tree.addItem("Gestion des Categories");
tree.addItem("Gestion des Categories Talend");
tree.addItem("Gestion des Types de Contrôles");
tree.addItem("Gestion des Db Sources");
tree.addItem("Gestion des Requêtes");
tree.addItem("Aide genérale");
tree.addItem("Aide Tableau de bord");
tree.addItem("Aide Gestion Paramètres");
// Set the hierarchy
tree.setParent("Aide genérale", "Aide");
tree.setParent("Aide Tableau de bord", "Aide");
tree.setParent("Aide Gestion Paramètres", "Aide");
tree.setParent("Gestion des Contrôles", "Administration");
tree.setParent("Gestion des Categories", "Administration");
tree.setParent("Gestion des Categories Talend", "Administration");
tree.setParent("Gestion des Types de Contrôles", "Administration");
tree.setParent("Gestion des Db Sources", "Administration");
tree.setParent("Gestion des Requêtes", "Administration");
genererIconeTree();
addEvent();
horiz.addComponent(tree);
label.setStyleName("titre");
label.setWidth("400px");
label.setValue("Supervision des contrôles");
customLayout.addComponent(label, "label");
CustomTableauBord custom = new CustomTableauBord(webCtx, application);// This custom does not setWidth
customLayout.addComponent(custom, "custom");
horiz.addComponent(customLayout);
}
private void addEvent() {
tree.addListener(new ItemClickEvent.ItemClickListener() {
public void itemClick(ItemClickEvent event) {
String itemId = (String) event.getItemId();
if ("Administration".equals(itemId)) {
boolean expanded = tree.isExpanded(itemId);
if (expanded) {
tree.collapseItem(itemId);
} else {
tree.expandItem(itemId);
}
}
if ("Aide".equals(itemId)) {
boolean expanded = tree.isExpanded(itemId);
if (expanded) {
tree.collapseItem(itemId);
} else {
tree.expandItem(itemId);
}
}
}
});
tree.addListener(new Property.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
String sel = null;
try {
sel = event.getProperty().getValue().toString();
} catch (NullPointerException e) {
sel = "";
}
if ("Supervision des contrôles".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: Reconstruction de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped pour un nouveau Thread.");
CustomTableauBord custom = new CustomTableauBord(webCtx, application);
label.setValue("Supervision des contrôles");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Gestion des Contrôles".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomControle custom = new CustomControle(webCtx);
label.setValue("Gestion des Contrôles");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Gestion des Categories".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomCategories custom = new CustomCategories(webCtx);
label.setValue("Gestion des Categories");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Gestion des Categories Talend".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomCategoriesTalend custom = new CustomCategoriesTalend(webCtx);
label.setValue("Gestion des Categories Talend");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Gestion des Types de Contrôles".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomTypeControle custom = new CustomTypeControle(webCtx);
label.setValue("Gestion des Types de Contrôle");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Gestion des Db Sources".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomDbSource custom = new CustomDbSource(webCtx);
label.setValue("Gestion des Sources de données");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Gestion des Requêtes".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomRequete custom = new CustomRequete(webCtx);
label.setValue("Gestion des Requêtes");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Aide genérale".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomVideo custom = new CustomVideo(webCtx, application, 1);
label.setValue("");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Aide Tableau de bord".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomVideo custom = new CustomVideo(webCtx, application, 2);
label.setValue("");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
if ("Aide Gestion Paramètres".equals(sel)) {
try {
log4j.info("[" + sessionManager.getIdSession() + "]
: desactivation de la vue.");
ThreadTreeTablePI thread = (ThreadTreeTablePI) sessionManager.getParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession());
if (thread != null) {
thread.stopRefresh();
thread.stop();
}
log4j.info("[" + sessionManager.getIdSession() + "]
: thread stopped.");
CustomVideo custom = new CustomVideo(webCtx, application, 3);
label.setValue("");
customLayout.removeComponent("custom");
customLayout.addComponent(custom, "custom");
horiz.setSecondComponent(customLayout);
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: " + ex, ex);
}
}
}
});
}
private void genererIconeTree() {
tree.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
public String getStyle(Object id) {
if ("Aide".equals(id)) {
return "aide48";
}
if ("Aide genérale".equals(id)) {
return "aide32";
}
if ("Aide Tableau de bord".equals(id)) {
return "aide32";
}
if ("Aide Gestion Paramètres".equals(id)) {
return "aide32";
}
if ("Supervision des contrôles".equals(id)) {
return "bord";
}
if ("Administration".equals(id)) {
return "admin";
}
if ("Gestion des Contrôles".equals(id)) {
return "gestion";
}
if ("Gestion des Categories".equals(id)) {
return "gestion";
}
if ("Gestion des Categories Talend".equals(id)) {
return "gestion";
}
if ("Gestion des Types de Contrôles".equals(id)) {
return "gestion";
}
if ("Gestion des Db Sources".equals(id)) {
return "gestion";
}
if ("Gestion des Requêtes".equals(id)) {
return "gestion";
}
return "";
}
});
}
}
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package gz.vaadin;
import com.github.wolfie.refresher.Refresher;
import com.vaadin.Application;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.terminal.gwt.server.WebApplicationContext;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.*;
import com.vaadin.ui.Window.Notification;
import gz.commun.SessionManager;
import gz.db.services.SelectedData;
import gz.treetable.MyTreeTable;
import gz.treetable.ThreadTreeTablePI;
import java.util.Date;
import org.apache.log4j.Logger;
/**
*
* @author Amallek
*/
public class CustomTableauBord extends CustomLayout {
private Logger log4j = Logger.getLogger(CustomTableauBord.class);
Notification notif = null;
SessionManager sessionManager;
WebApplicationContext webCtx;
Application application;
private final int SLEEP_TIME_IN_MILLIS = 60000; // a second
MyTreeTable treeTable;// = new MyTreeTable();
CheckBox dernierControle = new CheckBox("Dernières exécution par contrôle");
PopupDateField date1 = new PopupDateField();
PopupDateField date2 = new PopupDateField();
Refresher refresher = new Refresher();
ThreadTreeTablePI thread;//= new ThreadTreeTable(treeTable);
ProgressIndicator pi = new ProgressIndicator();
Label label = new Label();
Button rafraichir = new Button("Rafraichir");
CheckBox depiler = new CheckBox("Développer/Réduire");
ThemeResource iconRefresh = new ThemeResource("../theme/rafraichir-bleu-32.png");
public CustomTableauBord(WebApplicationContext webCtx, Application application) throws Exception {
super("CustomTableauBord");
this.webCtx = webCtx;
this.application = application;
sessionManager = new SessionManager(webCtx);
treeTable = new MyTreeTable(webCtx);
addCaracteristiqueComposant();
addAllEvent();
placerComposant();
startRefesh();
}
private void placerComposant() {
addComponent(treeTable, "treeTable");
addComponent(dernierControle, "dernierControle");
addComponent(date1, "date1");
addComponent(date2, "date2");
addComponent(pi, "pi");
addComponent(label, "label");
addComponent(rafraichir, "rafraichir");
addComponent(depiler, "depiler");
}
private void addCaracteristiqueComposant() {
date1.setImmediate(true);
date1.setResolution(PopupDateField.RESOLUTION_DAY);
date1.setValue(new Date());
date2.setImmediate(true);
date2.setResolution(PopupDateField.RESOLUTION_DAY);
date2.setValue(new Date());
pi.setVisible(false);
dernierControle.setValue(true);
dernierControle.setImmediate(true);
rafraichir.setIcon(iconRefresh);
depiler.setValue(true);
depiler.setImmediate(true);
}
public void startRefesh() throws Exception {
thread = new ThreadTreeTablePI(treeTable, pi, label, application, sessionManager.getIdSession());
Date d1 = (Date) date1.getValue();
Date d2 = (Date) date2.getValue();
SelectedData selectedData = new SelectedData();
treeTable.alimenterTableTree1(selectedData.getExecutionControles(d1, d2, true));
thread.setFiltre(d1, d2, true);
refresher.setRefreshInterval(SLEEP_TIME_IN_MILLIS);
application.getMainWindow().addComponent(refresher);
thread.start();
thread.startRefresh();
sessionManager = new SessionManager(application);
sessionManager.putParamSession("ThreadTreeTablePI-" + sessionManager.getIdSession(), thread);
}
private void addAllEvent() {
depiler.addListener(new CheckBox.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
boolean b = depiler.booleanValue();
treeTable.developperTout(!b);
}
});
rafraichir.addListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
filtrer();
}
});
date1.addListener(new ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
filtrer();
}
});
date2.addListener(new ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
filtrer();
}
});
dernierControle.addListener(new CheckBox.ClickListener() {
public void buttonClick(ClickEvent event) {
filtrer();
}
});
}
public void filtrer() {
Date d1 = (Date) date1.getValue();
Date d2 = (Date) date2.getValue();
if (d2.before(d1)) {
date2.setValue(d1);
} else {
boolean controleUnique = dernierControle.booleanValue();
thread.setFiltre(d1, d2, controleUnique);
try {
SelectedData selectedData = new SelectedData();
treeTable.alimenterTableTree1(selectedData.getExecutionControles(d1, d2, controleUnique));
} catch (Exception ex) {
notif = new Notification("Erreur", "Pour plus de détails vérifier le log ", Notification.TYPE_WARNING_MESSAGE);
notif.setDelayMsec(1);
getApplication().getMainWindow().showNotification(notif);
log4j.error("[" + sessionManager.getIdSession() + "]
: ", ex);
}
}
}
}
Thank you for your help