Stretch Tableview to content size - javafx

I have a TableView inside a JavaFX ScrollPane, together with some other Views parallel to it. Something like this here:
<ScrollPane maxHeight="Infinity" maxWidth="Infinity" VBox.vgrow="ALWAYS">
<GridPane maxHeight="Infinity" maxWidth="Infinity" prefWidth="1100">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="Infinity" minWidth="0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="Infinity" minWidth="0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="Infinity" minHeight="10.0" vgrow="ALWAYS" />
</rowConstraints>
<VBox GridPane.columnIndex="1" GridPane.rowSpan="2147483647">
<PieChart fx:id="amountPerState" legendVisible="false" minHeight="300" minWidth="300" />
<PieChart fx:id="amountPerComponent" legendVisible="false" minHeight="300" minWidth="300" />
</VBox>
<TableView fx:id="componentTable" maxHeight="Infinity" maxWidth="Infinity" GridPane.rowIndex="6">
<columns>
...
</columns>
</TableView>
</GridPane>
</ScrollPane>
Now this double scrolling from the ScrollPane and the TableView is ackward. When I try to scroll inside the TableView the ScrollPane also scrolls. I would love to have the TableView go as high as necessary for it's content, so that there is only the scrolling of the ScrollPane. Any Idea how I can do that? Or other ideas?
Edit: For extra clarification, I assume the TableView should have prefered size so high that all it's content is shown without any scrolling necessary. Then there are probably no scroll bars, or I can just not show them with the policy. This is how I think you would achieve this, but I don't know how to figure out the tables content hight to make it it's preferred size.
I think it will be a bit worse in performance, since TableView has this row reusing, but I know that there are not to many rows in the TableView, so that there will be no performance problems.
Edit: Both the charts and the table are to big for the windows, so they all need to be in the ScrollPane

Related

Usage of USE_COMPUTED_SIZE in TableColumn

Is it possible to use USE_COMPUTED_SIZE for the prefered width of a TableColumn? I have tried but my column then disappear.
Maybe that it is nonsense?
<TableView id="my-table" fx:id="tagTable" editable="true" stylesheets="#My_Theme.css">
<columns>
<TableColumn fx:id="typeColumn" editable="false" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="-1.0" resizable="false" sortable="false" text="Type" />
<TableColumn fx:id="contentColumn" editable="false" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="-1.0" resizable="false" text="CONTENT" />
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
<placeholder>
<Label styleClass="label-dark" text="Nothing to display">
<padding>
<Insets bottom="200.0" />
</padding>
</Label>
</placeholder>
</TableView>
How I do it, which might not be "the" way you should or want to do it is:
I set all the TableColumns to have the Min and Pref- Width set to USE_COMPUTED_SIZE while the Max Width have the default value of 5000. (I tried setting Max Width to MAX_VALUE but that just ends up with the first column taking up the entire table, and I haven't looked up why that is yet since it works and that it good enough for me :) ).
Also, for the TableView I have the Column Resize Policy set to "constrained-resize" just as you have.
In the image below you can see the results I get, which is 5 evenly sized columns:
I hope that this might be of some help, and that others may comment if there is a better way or a way in which you can set the Max Width to MAX_VALUE.
Edit: I'm using Java 8 (1.8.181).

How to make multiple HBoxes fill the size of parent container with equal distribution in javaFX - FXML

I have two hboxes nested in a vbox and I want the height of all of them to be equally distributed within the vbox. I tried üsing computed in Scene Builder 8 but that's not getting me anywhere! Here's part of the code where I want the hboxes to be distributed evenly:
<VBox prefHeight="269.0" prefWidth="1064.0"
BorderPane.alignment="CENTER">
<BorderPane.margin>
<Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
</BorderPane.margin>
<children>
<HBox prefHeight="100.0" prefWidth="200.0" />
<HBox prefHeight="100.0" prefWidth="200.0" />
</children>
</VBox>
You can add the VGrow property to the HBox and set it to ALWAYS. This will result in both the HBox always filling up the available space.
<children>
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
</children>

JavaFX Accelerator execute twice

I'm using Accelerator in my application, and when I hit the F1 key it should open a dialog just once, but when I close the dialog it appears again. The runnable is been called twice.
Does anyone know what it could be? Is it a bug? I'm using a Macbook to develop.
This is my controller:
public class Screen1Controller {
#FXML
private TextField txtCode;
#FXML
private TableView tblProducts;
#FXML
private Button buttonAskUserDecision;
#FXML
public void initialize () {
Platform.runLater(new Runnable() {
#Override
public void run() {
initializeKeyCombinations();
}
});
}
#FXML
private void executePrint (ActionEvent event) {
System.out.println("ExecutePrint");
}
public void initializeKeyCombinations() {
buttonAskUserDecision.getScene().getAccelerators().clear();
buttonAskUserDecision.getScene().getAccelerators().put(
new KeyCodeCombination(KeyCode.F1),
new Runnable() {
#Override
public void run() {
System.out.println("Executed F1");
}
}
);
}
}
This is my FXML:
<StackPane prefHeight="600.0" prefWidth="800.0" stylesheets="#../../../css/main.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Screen1Controller">
<children>
<BorderPane prefHeight="200.0" prefWidth="200.0">
<center>
<ScrollPane fitToHeight="true" fitToWidth="true" BorderPane.alignment="CENTER">
<content>
<VBox alignment="TOP_CENTER">
<children>
<GridPane hgap="10.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints fillHeight="false" minHeight="30.0" vgrow="NEVER" />
</rowConstraints>
<children>
<TextField fx:id="txtCode" GridPane.columnSpan="2" />
</children>
<VBox.margin>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</VBox.margin>
</GridPane>
<TableView fx:id="tblProducts" prefHeight="200.0" prefWidth="200.0">
<columns>
<TableColumn prefWidth="75.0" text="C1" />
<TableColumn prefWidth="75.0" text="C2" />
</columns>
</TableView>
</children>
</VBox>
</content>
</ScrollPane>
</center>
<bottom>
<ToolBar maxHeight="80.0" minHeight="80.0" prefHeight="80.0" styleClass="default-skin-pdv-toolbar" stylesheets="#../../../css/main.css">
<items>
<Button fx:id="buttonAskUserDecision" layoutX="10.0" layoutY="20.0" mnemonicParsing="false" onAction="#executePrint" prefHeight="60.0" prefWidth="69.0" styleClass="default-skin-pdv-button">
</Button>
</items>
<padding>
<Insets left="10.0" />
</padding>
</ToolBar>
</bottom>
</BorderPane>
</children>
Inside this screen I have a textfield, a tableview and a toolbar with a button.
I did some new tests. Every time I give focus on my tableview and hit the F1 button, the execution is incremented by 1. For instance, if I click on the tableview and hit F1, it prints "Executed F1" just once on the console and the focus go back to the textfield, if i give focus to the tableview again and hit F1, It prints two times the text on the console and give focus back to the textfield, and if I give focus to the tableview for the third time and press the F1 again it prints three more lines on the console, and so on.
It only happens when I use the F1 button.. When I click the button with the mouse it prints only once.
I removed the TableView from the screen and it stopped duplicating the executions.
The problem is: I need this tableView in my screen. What could be happening here?
That's my Java version details:
java version "1.8.0_25"
Java(TM) SE Runtime Environment (build 1.8.0_25-b17)
Java HotSpot(TM) 64-Bit Server VM (build 25.25-b02, mixed mode)
The problem was in a component (Dialog) from ControlsFX library.
I created a new Project and included a textfield, viewTable and a button. The duplication didn't happened.
When I included the ControlsFX Dialog, the started to happen. When I click the button, with the mouse, the dialog opens just once. But when I use the accelerator to fire the button, the dialog opens twice.
Edited:
I created my own dialog, but it happened again. Instead of using the stage.showAndWait() I tried the stage.show() and it stopped to open twice.
I searched the stackoverflow and found this answer https://stackoverflow.com/a/22463857/916804 ... When I tried to wrap the call to the Dialog with the Platform.runLater the execution happened only once.

JavaFX GridPane inside ScrollPane inside GridPane can't set ScrollPane Growing

Hi all !
I've got a simple question: I'm using FXML files and I've done this layout:
I am trying to expand the height of the Scrollpane inside the column 1 (row span 3)
With this hierarchy: (top GridPane controller is hightlighted - it is inside a VBox)
And the target ScrollPane closer view:
My problem is that I'm adding dynamically rows to the GridPane inside the ScrollPane (inside the other GridPane container); and I can't add more than 3 columns (size of the Vbox container apparently) but if I remove the scrollpane i can add as many rows that I wan't but rows are disapearing as they are outside of the Vbox/GridPane scope...
Is it possible to do what I wan't (GridPane inside ScrollPane inside mutliple GridPane rows)? I thought it will work "out of the box" but it seems that is really not :-(
Is this because of the ScrollPane Max/Min (I played with all size of containers and/or top-containers -Vbox and ScrollPane- without success...) Or is this because the GridPane parent has max height set and is blocking ScrollPane height growth ?
I have tried this post solution :How to scroll to make a Node within the content of a ScrollPane visible? without any success :-(
Any ideas ? Regards to all !
To answer the question in the middle of the post of "is it possible to do what I want (GridPane inside ScrollPane inside GridPane)" sure! here's the fxml code for it (don't mind the constants, I just threw it together in scene builder):
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children><ScrollPane prefHeight="200.0" prefWidth="200.0">
<content><GridPane prefHeight="132.0" prefWidth="297.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</content></ScrollPane>
</children>
</GridPane>
the trick to making it so you have a scrollbar with extra rows/columns without making all of the existing rows smaller, is to adjust the height of the innermost gridpane every time you dynamically add a row, this will ensure that the gridpane out-sizes the scrollpane and therefore makes it so the scrollpane 'scrolls'
ex something like (pseudo-code):
onButtonPress{
resizeGridPane(sizeOfRow+paddingBetweenRows);
AddRowInDesiredLocation(location);
}
I think that will give you the desired effect.
EDIT
After noticing your vbox which is inside the scrollpane which is inside the gridpane, you'll have to resize both the vbox and the grid pane appropriately to see the 'scrolling' effect of the scrollpane come around, if you only resize the grid pane, you'll simply get rows which are consecutively smaller and smaller.

How to merge cells in JavaFX Scene builder?

I have a gridpane looks like a KeyBoard, and I need to merge some cells to put a "Space" button.. But I cant find any option in the settings of the gridpane which would solve my problem.. Does anyone have an idea how I could achieve it?
Setup your Grid with items in it
Create a GridPane.
Place nodes in the grid.
Select a node in the grid.
It is very, very important that a node in the grid be selected at this stage . . .
After that either:
A. Use the Menu Items
Choose Modify | GridPane
Choose any of
Increase Row Span
Decrease Row Span
Increase Column Span
Decrease Column Span
B. Use the Layout Panel
Modify the Row Span or the Column Span values.
Layout Notes
To really get something to fill up the grid and span rows or columns in the way you want, you may need to modify other layout parameters of the node or it's grid constraints in the layout panel. For example a Button won't normally grow beyond it's preferred size, so set it's max height and width to MAX_VALUE. Another example is to have a Label centered across two columns, set its Hgrow to ALWAYS and its Halignment to CENTER.
Sample Screenshot
There are menu items for setting the Row and Column Span and there are also layout text fields for the same on the far right. Unfortunately, StackOverflow compresses the pic and makes it a little blurry.
Sample FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
<children>
<GridPane layoutX="116.0" layoutY="155.0">
<children>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="0" GridPane.columnSpan="2147483647" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS" />
<Label text="Label" GridPane.columnIndex="0" GridPane.rowIndex="0" />
<Label maxWidth="-1.0" text="Label" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowIndex="0" />
<Label text="Label" GridPane.columnIndex="0" GridPane.rowIndex="2" />
<Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="2" GridPane.rowSpan="2" />
<Label text="Label" GridPane.columnIndex="2" GridPane.rowIndex="2" />
<Label text="Label" GridPane.columnIndex="2" GridPane.rowIndex="3" />
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</children>
</AnchorPane>

Resources