ScrollPane inside a StackPane - text

I have the following problem:
I have a ScrollPane inside a StackPane, and I can't scroll.
To be exact:
I have a BorderPane (root of the scene). On the bottom of the borderPane, I use a StackPane. On this Stackpane, there are 3 Nodes (2 Groups and the ScrollPane). The Scrollpane has a TextFlow as content.
I see the scrollbar, but when I try to scroll, nothing happens. When I replace my StackPane with e.g. a HBox it works. Anyone here who could explain to me why this seems not to work with a StackPane? (And is there a way to make it work with the StackPane?)
StackPane stackPane = new StackPane();
StackPane.setAlignment(scrollPane, Pos.CENTER_RIGHT);
stackPane.getChildren().add(scrollPane);
Oh, by the way:
I used the StackPane because I want those 3 Nodes to get aligned differently (one on the left side, one centered, one on the right side). If there is another possibility to do that without a StackPane, I'm fine with that too.
Thank you
Edit:
I changed to a BorderPane instead of a StackPane, using the left, center and right parts to realize the alignment. Now the ScrollPane works and the alignment is also correct. But still, why does it not work with a StackPane?

Related

Vaadin 8 View: No horizontal scrollbar on window resizing

I have a Vaadin 8 application with several views.
public class ViewName extends Panel implements View {
There is a VerticalLayout as main layout in the panel.
public ViewName() {
setSizeFull();
VerticalLayout mainLayout = new VerticalLayout();
setContent(mainLayout);
Then I have many different layouts (HorizontalLayout, GridLayout) or Components such as Label being added as components to the mainLayout. For the HorizontalLayouts I often do the following to use the full width of the screen:
hLayout.setWidth("100%");
I have a lot of icons, grids etc. Everything is OK as long as I don't resize the window.
When I resize the window to a small size I get a mess (icons, text etc. on top of each other) and no horizontal scrollbar. (However, the grids get horizontal scrollbars.) I have tried many things to fix this. If I add
mainLayout.setSizeFull();
or
mainLayout.setWidth("100%");
I have a mess on the big screen already. I also tried the CSS for the mainLayout as described here. I get several scrollbars but none for the window itself!
The only component that resizes correctly is a Label added to the mainLayout, e.g.:
Label title = new Label("Some text",ContentMode.HTML);
title.setWidth(100, Unit.PERCENTAGE);
mainLayout.addComponent(title);
mainLayout.setComponentAlignment(title, Alignment.MIDDLE_CENTER);
I also noticed that anything in a GridLayout seems to stay in place after resizing but is not vissible since I have no scrollbar. However, icons in a HorizontalLayout get on top of each other.
What is wrong? Please, I need a general instruction on which layout I should use as main layout for my view panel, how to size the components and how to get ONE horizontal scrollbar for the main window if necessary.
The problem is that you are setting the width of your mainLayout to the width of your view. This means, that your mainLayouts width will never be bigger than your views width. So no scroll bar will appear.
According to the information you posted, changing your mainLayouts width to undefined should fix the problem.
mainLayout.setWidth("-1px");

Dragging and drawing an arrow from one node to another in GridPane in JavaFX?

I am working on a JavaFX application in which I have a GridPane. The GridPane consists of Panes. I intend to mouse click on any Pane from the GridPane and start drawing an arrow using CubicCurve. Later, I would release mouse when the intended Pane is reached. Hence, I want to draw an arrow between given two GridPane cells/nodes using CubicCurve. My UI looks like following:
http://i.stack.imgur.com/RWgfJ.png
http://i.stack.imgur.com/RWgfJ.png
Could anyone please suggest me how I could draw a directed arrow, for instance, from cell(2,2) to cell(4,4). I am not able to find easiest way (less code) to do it.

How to scale components with windows javafx?

My windows primary pane is an AnchorPane on top of which is a TabPane, the menu of that TabPane are the tabs you see on the picture. You see the grey "background" which is part of the TabPane, when I scale my window to a bigger size, the TabPane doesn't scale with it, it stays the same size, so extra space is blank, I would like it to scale with the window, in the width of course.
You need to tell the AnchorPane to anchor its child (the TabPane) so that it is resized automatically when the window size changes.
If you are using Scene Builder you can achieve this by selecting the TabPane, going to the layout section of the properties window and setting the anchor properties.
Click on each of the dotted lines until it looks like the image below.
The same effect can also be set in code using the setXXXAnchor methods of the AnchorPane:
pane.setLeftAnchor(tabPane, 0.0);
pane.setRightAnchor(tabPane, 0.0);
pane.setTopAnchor(tabPane, 0.0);
pane.setBottomAnchor(tabPane, 0.0);

JavaFX - Adding nodes to ScrollPane with correct scrolling direction

I have a ScrollPane in my scene and would like to add a series of Nodes to it. The exact amount must be dynamic. I've been testing the concept with Label nodes and can successfully add as many Labels as I want to the content of the ScrollPane (currently a VBox).
My problem is figuring out how to allow the user to scroll normally through the ScrollPane full of Nodes. The content matches pace with the scrollbar; that is, when I scroll down, the content moves down. I scroll up, the content scrolls up. So if I have 10 Labels, only five of which are currently visible, the instinctive action to see the other five would be to scroll down. Unfortunately, this just moves the entire content down, exposing empty space up top and hiding more of the Labels.
I can post some sample code if that helps, but the gist of my plan of attack is this:
ScrollPane sp = new ScrollPane();
VBox content = new VBox();
sp.setContent(content);
for (int i = 0; i < 10; i++)
{
Label label = new Label("Label " + i);
content.setPrefHeight(content.getPrefHeight() + label.getPrefHeight());
content.getChildren().add(label);
}
Because I use a VBox, the Labels are stacked (in the Y axis) atop one another, which is what I want. As more Labels are added, the ScrollBar needs to reflect the increased size of the VBox.
I've tried a few approaches to get this to work, including ScrollPane.setVmax() method, which is ok, but I still have the issue of the scroll direction moving the content in the wrong direction. I've also tried an EventHandler and EventFilter to modify values accordingly, still without solving the problem of scrolls not moving the content in the right direction.
The answer seems so simple, yet the it continues to evade me, even after many long hours messing around with the code.
EDIT:
jewelsea's suggestion of using a ListView solved my problem. However, I remain curious as to why using a ScrollPane did not fare so well. Additionally, I've run into odd behavior with the ListView implementation: I use a button to manually add a new Label to the view. Every now and then, the view will freeze up after adding a new Label. It locks up for a few seconds before either updating the scroll position or displaying the newly added Label. I don't know if this is because there are about 20 or so Label instances being managed by the view or if something more insidious is at play.
In regards to the scrollpane issues, I know what you're looking to do is possible because I'm doing something very similar. Based on the code snippet you gave above I would suggest trying few things...
Give the ScrollPane a preferred height and width to follow.
Don't give the content VBox any height sizing preference as it will grow with its contents. There should be no need to update its height after adding content either.
Use the VBox's setAlignment method to align its contents either TOP_LEFT, TOP_CENTER, or TOP_RIGHT.
Be cautious when using the getPrefHeight() method because if you haven't used setPrefHeight() beforehand I believe it will return -1.
Hope this helps you out!

ScrollView as subview does not respect frame boundaries

I have a UIScrollView (managed by a view controller) which I am using both full screen and as a subview. The full screen version works fine - the subview does not.
The subview is positioned so that it takes up about the bottom half of the screen, with a small - 20 pixels or so - margin at the bottom.
Initially it displays in the correct position but overwrites the bottom margin - even though the scrollview's frame is set to leave the margin.
When I scroll the view up by dragging it, the whole view moves upwards and obscures the top of the window. The frame stops moving when it hits the navigation bar at the top and starts scrolling like a normal scrollview. If I scroll it enough it eventually reveals the margin at the bottom of the screen.
I am at a loss to know what to do - I've tried every spring combination I can think of. I'm now looking at subview clipping.
Images below. The first shows the scrollview on initial page load, positioned correctly aside from lower margin overwrite. The scroll view has a white background.
The second image shows it scrolled up toward the top:
The third image shows it scrolled all the way up to the top - note that the lower margin has become visible.
I'm not 100% sure on this one, but worthy the shot: my guess is you're likely not setting the Bounds property correctly on your table.
To solve this issue, the easiest way would be to set myscrollview.clipsToBounds = true.
Something is definitely wrong here. I think what happens is that you are adding the same instance of scrollview as a subview on itself. So basically what you are left with, is one instance alone. Anything you add to the "subview", is basically added on the superview, since it is the same object.
For example, this is what I think you are doing in the view controller:
//...
private UIScrollView myScrollView;
public override void ViewDidLoad()
{
this.myScrollView = new UIScrollView();
this.View = this.myScrollView;
this.View.AddSubview(this.mySrcollView); // same instance
this.myScrollView.AddSubview(aUIButton); // "aUIButton" will be added in View also, since it is the same object
}
If this is the case, it is wrong. I suggest not changing the controller's view at all. If you want to have a controller that has a fullscreen UIScrollView, just create it and add it as a subview, making sure the AutoSizesSubviews property to true.
That's my understanding at least.

Resources