Vaadin window scrolling - vaadin7

I have a vaadin window with a specific size When the browser window is small, some fields aren't visible (probably because of the size of the window). We need to enable scrolling in these cases.So I try to add the content of my window in a panel but it doesn't work .Have you any idea please?
setModal(true);
setResizable(false);
setClosable(false);
Panel mainPanel = new Panel();
VerticalLayout content = new VerticalLayout();
content.addComponent.......
content.setSizeFull();
mainPanel.setContent(content);

The solution that came to my mind, is to set both max-height and 100% height of the modal window, so that if the content has not enough space (due to browser window size) scrollbar will appear. Contrary, when browser window is big enough, max-height come into play and the modal window is centered and has predefined in ccs max-height.
Code sample that works in my app:
windowOpenButton.addClickListener(event -> {
Window window = new Window();
window.setWidth("100px");
window.setHeight("100%");
window.setModal(true);
window.setResizable(false);
window.setClosable(false);
Panel panel = new Panel();
Button close = new Button("close");
close.addClickListener(event1 -> window.close());
VerticalLayout content = new VerticalLayout(new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), close);
content.setSizeFull();
panel.setContent(content);
window.setContent(panel);
window.setStyleName("max_height");
panel.setSizeUndefined();
UI.getCurrent().addWindow(window);
});
css:
.max_height {
max-height: 350px;
}

Instead you can just use setSizeFull() in your window to achieve that
so your code will be like :
setModal(true);
setResizable(false);
setClosable(false);
setSizeFull()
Panel mainPanel = new Panel();
VerticalLayout content = new VerticalLayout();
content.addComponent.......
content.setSizeFull();
mainPanel.setContent(content);

Related

Placing buttons on opposite sides of an adjustable window in JavaFX

I have two buttons that I'd like to use in my display screen: a reset button, and a settings button.
The problem is, I want them on opposite sides of the window (reset in the top right corner and settings in the top left) while being the same height. When I expand the window, however, the buttons stay in the same place, but I want them to move with the window walls.
I first tried using setAlignment of my reset button to Pos.*TOP_RIGHT* and the settings button to top left, but it comes out with the settings button being on top of the reset button.
resetButton = new Button("Reset Gameboard");this.setTop(resetButton);
resetBox = new HBox(resetButton);
resetBox.setAlignment(Pos.TOP_RIGHT);
backButton = new Button("Back to Settings");
this.setTop(backButton);
backBox = new HBox(backButton);
backBox.setAlignment(Pos.TOP_LEFT);
resetbackBox = new HBox(backButton, resetButton);
this.setTop(resetbackBox);`
I currently am using (below) which during the initial window appears to be working and correctly spaced, but as soon as you expand the window the reset button doesn't follow it, although the settings button does.
`resetButton = new Button("Reset Gameboard");
this.setTop(resetButton);
resetBox = new HBox(resetButton);
resetBox.setAlignment(Pos.TOP_RIGHT);
backButton = new Button("Back to Settings");
this.setTop(backButton);
backBox = new HBox(backButton);
backBox.setAlignment(Pos.TOP_LEFT);
resetbackBox = new HBox(backButton, resetButton);
resetbackBox.setSpacing(380);
this.setTop(resetbackBox);`
The problem start from this line:
resetbackBox.setSpacing(380);
You have setted a fixed spacing value. To fix that you can easily add a component to HBox called Region, this component allow to set a grow area between two buttons:
Button resetButton = new Button("Reset Gameboard");
Button backButton = new Button("Back to Settings");
Region region = new Region();
HBox.setHgrow(region, Priority.ALWAYS);
HBox topHBox = new HBox(backButton, region, resetButton);
this.setTop(resetbackBox);

Display big image in QListWidget

I want to use QListWidget to display big images, e.g. 3508×4961 size in pixels, each list item will display one image. The image is set in a Qlabel and the Qlabel is set into the QListWidgetItem by setItemWidget(). When my program is running, the list item cannot display the entire image because the image is too large. It only displays the upper part of an image. When I scroll down, the list item changes to the next image immediately instead of showing the lower part of the current image gradually. Does anyone know how to show the lower part of each image by scrolling?
Here is my code,
QImage *image = new QImage("/home/sk/image1.png");
QLabel *label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
QListWidgetItem *ite = new QListWidgetItem;
auto size = label->sizeHint();
ite->setSizeHint(label->sizeHint());
size = ite->sizeHint();
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
image = new QImage("/home/sk/image2.png");
label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
ite = new QListWidgetItem;
ite->setSizeHint(label->sizeHint());
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
image = new QImage("/home/sk/image3.png");
label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
ite = new QListWidgetItem;
ite->setSizeHint(label->sizeHint());
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
have you tried changing the scroll mode to ScrollPerPixel
setVerticalScrollMode
and
setHorizontalScrollMode
ui->listWidget->setVerticalScrollMode(QListWidget::ScrollPerPixel);
and in order to change the scroll step
ui->listWidget->verticalScrollBar()->setSingleStep(10);
ui->listWidget->verticalScrollBar()->setPageStep(20);
these values will be used for scrolling

To make a pane scrollable in JavaFX

Can you please tell me, how can I make a pane scrollable? I am able to make an image scrollable, like this:
VBox root = new VBox();
ScrollPane sp = new ScrollPane();
sp.setContent(new ImageView(new Image(getClass().getResourceAsStream("test.png"))));
root.getChildren().add(sp);
But when I am trying to make a whole pane scrollable, which consists of some Buttons and a small animation, there happens nothing regarding scrollbars. There are no scrollbars. How can I solve that?
Thank you in advance.
I tried to do it by myself, and it is because your scroll pane has fixed width and height, by resizing window, your scroll pane doesn't resize on itself. You can use anchor pane so scroll pane will resize with anchor pane. You could do something like this:
ImageView image = new ImageView(new Image("wp1951596.jpg"));
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(image);
scrollPane.setPrefSize(400, 400);
AnchorPane.setTopAnchor(scrollPane, 0.);
AnchorPane.setRightAnchor(scrollPane, 0.);
AnchorPane.setBottomAnchor(scrollPane, 0.);
AnchorPane.setLeftAnchor(scrollPane, 0.);
rootPane.getChildren().add(scrollPane);
I would also recommend you using JavaFX with .fxml files. Then you can create your layout in SceneBuilder and it will make everything easier and faster.

Showing one widget over other panel

I'm working with GWT and I have a problem trying to show one VerticalPanel over other panel. I have two panels in my app: one as a menu bar and the other one as a main content. The VerticalPanel is the menu bar and when you move the mouse over it, it is opened showing you more options(widgets). The problem is that this new widgets are hidden by the panel which is below the menu bar. I want to show the whole widget even if it's partially "invading" another panel. I've tried the z-index property with CSS but I can't get it.
public class Example2 implements EntryPoint {
public void onModuleLoad()
{
//Creating the layout which one will contain two simplePanels
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
dockLayoutPanel.setStylePrimaryName("layout");
//Creating the two Simplepanels
SimplePanel menuPanel = new SimplePanel();
menuPanel.setStylePrimaryName("menuPanel");
SimplePanel mainContentPanel = new SimplePanel();
mainContentPanel.setStylePrimaryName("mainContentPanel");
//Adding panels to the DockLayoutPanel
dockLayoutPanel.addNorth(menuPanel, 10);
dockLayoutPanel.add(mainContentPanel);
VerticalPanel vPanel = new VerticalPanel();
//Creating some buttons
Button a = new Button("Button");
vPanel.add(a);
Button b = new Button("MoreButton");
vPanel.add(b);
Button c = new Button("AnotherButton");
vPanel.add(c);
Button d = new Button("ButtonButton");
vPanel.add(d);
Button e = new Button("LastButton");
vPanel.add(e);
//Adding the buttons to the menuPanel(simplePanel)
menuPanel.add(vPanel);
RootLayoutPanel rp = RootLayoutPanel.get();
rp.add(dockLayoutPanel);
}
}
And the .css
.layout{
font-size:10px;
}
.menuPanel{
background:#e8f8ff;
}
.mainContentPanel{
background:#eee9e9;
}
With this example you might see my point. I know it's a dumb one, but it shows my problem. The buttons that are added to the vPanel are shown as long as they occupy space in the menuPanel, the rest are hidden under the mainContentPanel.
It can be as simple as changing the order in which you add menu panel and main panel to their parent widget. Add main panel first, then menu panel. Obviously, it's hard to be sure without seeing your code.

Adjustment of contents in FlowPane

I have a flowpane in center and i applied a slider effect which gets invoke on a click of button on the right (so slider moves from right to left when expanded). I have followed JewelSea slider tutorial mentioned here Slider
Now i have two different flowpanes in two different nodes. Both the flowpane contains array of labels but the only difference is, One flowpane contains scrollbar and is contained in TitlePane while the other is without scrollbar and no titlepane.
So now if i click on slider the contents in the flowpane(without scrollbar & titlepane) gets automatically adjusted but its not the same case with the flowpane containing scrollbar.
Here is relevant code for flowpane with scrollbar-
public void loadCase() {
ScrollPane s = null;
if (!homeController.mainTabPane.getTabs().contains(testTab)) {
int app = 0;
if (appareaList.size() > 0) {
FlowPane fpTestmoduleContainer = new FlowPane();
FlowPane example = new FlowPane();
for (ApplicationAreas appttribute : appareaList) {
appTestTitledPane[app] = new TitledPane();
appTestTitledPane[app].setText(appttribute.getApplication_name());
appTestTitledPane[app].setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
/*Module loop start*/
fpTestmoduleContainer.setHgap(10);
fpTestmoduleContainer.setVgap(10);
// fpTestmoduleContainer.setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
List<TestModuleAttribute> testmoduleList = WSData.getTestingModuleList(appttribute.getApplication_id());
ArrayList<Label> listTestlbs = new ArrayList<Label>(testmoduleList.size());
System.out.println("testmoduleList.size()" + testmoduleList.size());
int i = 0;
for (TestModuleAttribute testmattribute : testmoduleList) {
listTestlbs.add(new Label());
listTestlbs.get(i).setText(testmattribute.getModule_name());
listTestlbs.get(i).setAlignment(Pos.CENTER);
listTestlbs.get(i).setTextAlignment(TextAlignment.CENTER);
listTestlbs.get(i).setWrapText(true);
listTestlbs.get(i).setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
listTestlbs.get(i).setId(testmattribute.getFxnode_css());
Image imgInstalled = new Image(getClass().getResourceAsStream("/upgradeworkbench/View/Icons/ok.png"));
listTestlbs.get(i).setGraphic(new ImageView(imgInstalled));
listTestlbs.get(i).setContentDisplay(ContentDisplay.BOTTOM);
Tooltip testtp = new Tooltip();
testtp.setText("Total No. Of test Cases :" + testmattribute.getTest_case());
testtp.setWrapText(true);
listTestlbs.get(i).setTooltip(testtp);
addModuleMouseClickListener(listTestlbs.get(i), testmattribute.getModule_name(), testmattribute.getFxnode_css(), testmattribute.getTest_case());
i = i + 1;
}
s = new ScrollPane();
s.setContent(fpTestmoduleContainer);
fpTestmoduleContainer.setPrefWidth(1500);
fpTestmoduleContainer.getChildren().addAll(listTestlbs);
//appTestTitledPane[app].setContent(fpTestmoduleContainer[app]);
listTestlbs.clear();
app = app + 1;
}
appareaTestmoduleContainer.getPanes().addAll(appTestTitledPane);
appareaTestmoduleContainer.setExpandedPane(appTestTitledPane[0]);
testTab.setText("Test Cases Wizard");
testTab.setText("Testing Application Foot Print");
//mainTab.setClosable(true);
// testTab.getContent().setVisible(true);
HBox hb = new HBox();
testTab.setContent(s);
}
}
}
Image of slider working as expected - before sliding
After sliding (without scrollbar) the 4 modules get to the next row as space is occupied by the slider
After adding scrollpane and embedding flowpane inside it. Slider overlaps the flowpane contents as shown
I want to know why the scrollbar causing issue in auto adjustment of contents inside the flowpane and how can i fix it ?
Here the width of your scrollpane is fixed. And then so is the width of the flow pane.You need to change the size of your scrollpane so that its content gets reset.
Use the following code.
scroll[app].setFitToHeight(true);
scroll[app].setFitToWidth(true);
This code will set the size of scrollpane according to the view. The flowpane will also adjust accordingly then.

Resources