Ok, so I have an accordion which doesn't close properly when it's a child of a Tab Pane but works as expected outside it. I don't know where the problem stems from.
Also, I just found out that resizing the window causes the layout to display properly.
Is there a way to fix this?
Here is the FXML:
<AnchorPane maxWidth="350" minWidth="350.0" prefWidth="350.0">
<TabPane fx:id="tabPane" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0"
AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0">
<Tab text="Friends">
<AnchorPane>
<Accordion fx:id="accordion2" AnchorPane.bottomAnchor="45" AnchorPane.leftAnchor="0"
AnchorPane.rightAnchor="0"
AnchorPane.topAnchor="0" expandedPane="$friendsPane">
<panes>
<TitledPane fx:id="friendsPane" animated="false" styleClass="myClass" text="Friends">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" AnchorPane.bottomAnchor="0"
AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0"
AnchorPane.topAnchor="0">
<VBox fx:id="friends" fillWidth="true" styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</TitledPane>
<TitledPane fx:id="groupsPane" animated="true" styleClass="myClass" text="Groups">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" AnchorPane.bottomAnchor="0"
AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0"
AnchorPane.topAnchor="0">
<VBox fx:id="groups" fillWidth="true" styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</TitledPane>
</panes>
</Accordion>
<Button fx:id="activateCheck" mnemonicParsing="true" onAction="#activateCheck" text="New Group"
AnchorPane.bottomAnchor="10" AnchorPane.leftAnchor="10"/>
<Button fx:id="createGroup" mnemonicParsing="false" onAction="#createGroup" text="Create Group"
visible="false" AnchorPane.bottomAnchor="10" AnchorPane.leftAnchor="10"/>
</AnchorPane>
</Tab>
<Tab text="Received Requests">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" prefHeight="200.0" prefWidth="200.0">
<VBox fx:id="requestsRecv" minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0"
styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</Tab>
<Tab text="Sent Requests">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" prefHeight="200.0" prefWidth="200.0">
<VBox fx:id="requestsSent" minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0"
styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</Tab>
</TabPane>
</AnchorPane>
Here is what it looks like:
It was caused by a conflict between setting tab pane max and min width and having the controller set up a listener forcing the split pane that contained the tab pane divider to a set position.
Related
I am using javaFX and FXML file to create a UI. Here is the fxml file.
<VBox alignment="CENTER" prefHeight="720.0" prefWidth="1080" spacing="20.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fi.tuni.prog3.sisu.PrimaryController">
<children>
<TabPane fx:id="tabPane" prefHeight="650.0" prefWidth="828.0" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab text="Aloitus">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="202.0" prefWidth="289.0">
<children>
<TextField id="nimi" fx:id="nimi" layoutX="475.0" layoutY="198.0" />
<TextField id="opnro" fx:id="opnro" layoutX="475.0" layoutY="236.0" />
<Label layoutX="424.0" layoutY="203.0" text="Nimi:" />
<Label layoutX="346.0" layoutY="241.0" text="Opiskelijanumero:" />
<ComboBox id="box" fx:id="box" layoutX="400.0" layoutY="278.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="27.0" prefWidth="241.0" />
<Button fx:id="EIKU" layoutX="491.0" layoutY="315.0" mnemonicParsing="false" onAction="#EIKUPressed" prefHeight="27.0" prefWidth="60.0" text="EIKU" />
<Button layoutX="491.0" layoutY="352.0" mnemonicParsing="false" onAction="#buttonPressed" text="Valmis" />
</children>
<padding>
<Insets bottom="1.0" left="1.0" right="1.0" top="1.0" />
</padding>
</AnchorPane>
</content>
</Tab>
<Tab id="tab2" fx:id="tab2" text="Koulutus">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<SplitPane dividerPositions="0.5" layoutX="-1.0" layoutY="-1.0" prefHeight="573.0" prefWidth="828.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<TreeView id="puu" fx:id="puu" layoutX="6.0" prefHeight="571.0" prefWidth="404.0" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="486.0" prefWidth="456.0" />
</items>
</SplitPane>
</children></AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</VBox>
My problem is the fact that the fields and buttons stay in the same place when resizing the window. So they eventually will disappear if I minimize the window a lot, and if I expand the window, they will stay the same distance away from the left and top of the window as initially.
I would like them to stay in the same place compared to all 4 sides, so that they would remain in the center of the window. How can I implement that? I've been searching for the answer and honestly feel a bit dumb for not finding it.
Thanks to #jewelsea. Using stackPane with margins solved my problem perfectly. I used SceneBuilder and added contents one by one, and edited each component's margin so that it took the desired place.
So I've been searching the internet for about 2 hours now without getting anywhere. I've seen multiple posts already regarding this issue and I tried some of the solutions provided but none seemed to work... or I was just too incompetent to implement them properly...
Anyways, how can I make it so that the elements/controls adjust when the user maximizes the window?
Here's the whole FXML-File:
<GridPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="percolationapplication.controllers.Percolation">
<!-- CUSTOM WINDOW CONTROLS -->
<ToolBar fx:id="toolbar" onMousePressed="#moveableWindowOnMousePressed" onMouseDragged="#moveableWindowOnMouseDragged" prefHeight="25" minHeight="25" maxHeight="25" GridPane.columnIndex="0" GridPane.rowIndex="0">
<ImageView fitWidth="15" fitHeight="15" smooth="true">
<image>
<Image url="/resources/icon.png"/>
</image>
</ImageView>
<Text styleClass="customWindowTitle" text="Percolation Simulation"/>
<Pane HBox.hgrow="ALWAYS" />
<Button fx:id="applicationMinimize" onAction="#minimizeWindow" text="_" styleClass="customWindowButtons"/>
<Button fx:id="applicationMaximize" onAction="#maximizeWindow" text="O" styleClass="customWindowButtons"/>
<Button fx:id="applicationClose" onAction="#closeWindow" text="X" styleClass="customWindowButtons"/>
</ToolBar>
<GridPane hgap="10" GridPane.columnIndex="0" GridPane.rowIndex="1">
<!-- CANVAS -->
<Canvas fx:id="canvas" height="700" width="1100" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<!-- CONTROLS -->
<GridPane hgap="10" vgap="10" GridPane.columnIndex="1" GridPane.rowIndex="0">
<Label text="Number Of Sites:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<TextField fx:id="quantityInput" text="25" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
<Label text="Probability:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
<TextField fx:id="probabilityInput" text="0.6" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
<Label text="Algorithms:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
<HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="2">
<fx:define>
<ToggleGroup fx:id="algs"/>
</fx:define>
<RadioButton fx:id="algNormal" text="Normal" selected="true" toggleGroup="$algs"/>
<RadioButton fx:id="algStack" text="Stack" toggleGroup="$algs"/>
</HBox>
<Label text="System Percolates:" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
<Label fx:id="outputPerc" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
<Button fx:id="perc" onAction="#handlePerc" text="Go" GridPane.columnIndex="0" GridPane.rowIndex="4"/>
</GridPane>
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
</GridPane>
<stylesheets>
<URL value="#/resources/style.css"/>
</stylesheets>
</GridPane>
Here's the window in normal sized mode:
Here's the window in maximized mode. All elements should "grow" to the right and only the canvas should reach the bottom:
You can try this template. You may need to set the height on your ToolBar. You also might need to set your min, max and preferred width to the same number on your right Panel
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<AnchorPane style="-fx-background-color: green;">
<children>
<Label alignment="CENTER" text="Remove this label and put your toolbar here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" HBox.hgrow="ALWAYS">
<children>
<Label alignment="CENTER" layoutX="58.0" layoutY="50.0" text="Remove this label and put your picture here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane maxWidth="200.0" minWidth="200.0" prefWidth="200.0" style="-fx-background-color: yellow;">
<children>
<Label alignment="CENTER" layoutY="40.0" text="Remove this label and put your right panel here" textAlignment="CENTER" wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</children>
</HBox>
</children>
</VBox>
I'm trying to center a view on top of another view essentially in an anchor pane.
Here is my code:
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<ListView fx:id="list" prefHeight="750.0" prefWidth="300.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<ProgressIndicator fx:id="bar" />
</children>
</AnchorPane>
This is what it looks like:
This is my goal:
EDIT:
Updated code to include a stackpane
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<StackPane prefHeight="150.0" prefWidth="200.0">
<children>
<ListView fx:id="list" />
<ProgressIndicator fx:id="bar" />
</children>
</StackPane>
</children>
</AnchorPane>
Try this:
The key to filling the StackPane is to set the ListView's maxHeight and maxWidth to Double.MAX_VALUE.
<children>
<StackPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<ListView maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" />
<ProgressIndicator maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" progress="0.44">
<StackPane.margin>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</StackPane.margin>
</ProgressIndicator>
</children>
</StackPane>
The prefHeight and prefWidth for the StackPane and ListView may not reflect what you have in your original post. You can change these values to suit your needs. I also set Constraints on the StackPane so that it fills its Parent AnchorPane.
SceneBuilder Images:
You may need to set the preferred side of ProgressIndicator
I have some problem with screen builder.
For some fxml it creash after load. I wwas trying many time to run it, but it block, and I must kill process.
The fxml is OK, the content is correctly displaying in my application. Here is the example of my FXML that cause crash of scene builder.
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXTabPane?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import java.lang.String?>
<?import java.net.URL?>
<AnchorPane xmlns:fx="http://javafx.com/fxml/1" id="mainApplicationWindow" fx:id="mainApplicationWindow"
styleClass="mainAnchorPane, gt-screen" xmlns="http://javafx.com/javafx/8.0.112-ea"
fx:controller="com.genealogytree.client.desktop.controllers.implementation.PaneMainApplicationWindowController">
<stylesheets>
<URL value="#/layout/style/gentree.css"/>
</stylesheets>
<children>
<SplitPane dividerPositions="0.2809364548494983" layoutX="139.0" layoutY="78.0" orientation="VERTICAL"
prefHeight="200.0" prefWidth="160.0" styleClass="gt-splitpane" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane maxHeight="220.0" minHeight="220.0" prefHeight="220.0">
<children>
<JFXTabPane fx:id="gtMainTabPane" AnchorPane.bottomAnchor="10" AnchorPane.leftAnchor="20"
AnchorPane.rightAnchor="20" AnchorPane.topAnchor="10">
<tabs>
</tabs>
</JFXTabPane>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<SplitPane dividerPositions="0.22690763052208834" layoutX="55.0" layoutY="46.0"
prefHeight="160.0" prefWidth="200.0" styleClass="gt-splitpane"
AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane id="splitPaneHorizontal" maxWidth="250.0" minWidth="250.0"
prefWidth="250.0">
<children>
<TableView fx:id="gtFamilyMemberTable" layoutX="20.0" layoutY="12.0"
onMouseClicked="#showInfoMember" prefHeight="200.0" prefWidth="200.0"
AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="10.0"
AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="5.0">
<columns>
<TableColumn fx:id="simNameColumn" maxWidth="110.0" minWidth="110.0"
prefWidth="-1.0" text="%simName"/>
<TableColumn fx:id="simSurnameColumn" maxWidth="110.0" minWidth="110.0"
prefWidth="-1.0" text="%simSurname"/>
</columns>
<styleClass>
<String fx:value="firstTypeTable"/>
<String fx:value="tableMembersAndRelations"/>
</styleClass>
</TableView>
<TableView id="gtFamilyRelationTable" fx:id="gtFamilyRelationTable"
layoutX="20.0" layoutY="12.0" onMouseClicked="#showInfoRelation"
prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="50.0"
AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0"
AnchorPane.topAnchor="5.0">
<columns>
<TableColumn fx:id="relationSimLeftColumn" maxWidth="85.0"
minWidth="85.0" prefWidth="-1.0" text="%relation_sim"/>
<TableColumn fx:id="relationTypeColumn" maxWidth="50.0" minWidth="50.0"
prefWidth="-1.0" text="%relation_type"/>
<TableColumn fx:id="relationSimRightColumn" maxWidth="85.0"
minWidth="85.0" prefWidth="-1.0" text="%relation_sim"/>
</columns>
<styleClass>
<String fx:value="firstTypeTable"/>
<String fx:value="tableMembersAndRelations"/>
</styleClass>
</TableView>
<AnchorPane id="anchorToogleButtons" prefHeight="25.0"
AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10"
AnchorPane.rightAnchor="10.0">
<ToggleButton id="buttonShowMemberTable" fx:id="buttonShowMemberTable"
layoutX="23.0" mnemonicParsing="false"
prefWidth="114.0" styleClass="toogleButtonShowTable"
text="Members" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0"/>
<ToggleButton id="buttonShowRelationTable" fx:id="buttonShowRelationTable"
layoutX="125.0" layoutY="12.0" mnemonicParsing="false"
prefWidth="114.0"
styleClass="toogleButtonShowTable" text="Relations"
AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0"/>
</AnchorPane>
</children>
</AnchorPane>
<AnchorPane fx:id="workAnchorPane">
<children>
<AnchorPane fx:id="workAnchorPaneContent" AnchorPane.bottomAnchor="50.0"
AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="20.0"
AnchorPane.topAnchor="5.0">
</AnchorPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
Try opening SceneBuilder as an administrator first before opening the file up in your IDE. Not sure why this works but it got me up and running.
I have a fxml file containing a ScrollPanel, that I use to display an image, inside a TabPanel:
<Tab text="Example" fx:id="liveTab" fx:controller="me.example.ExampleController" xmlns:fx="http://javafx.com/fxml">
<content>
<HBox prefHeight="600.0" prefWidth="1200.0">
<children>
<FlowPane prefHeight="600.0" prefWidth="400.0">
<children>
<ScrollPane prefHeight="580.0" prefWidth="200.0">
<content>
<ListView fx:id="listView" prefHeight="580.0" prefWidth="190.0">
<items>
<FXCollections fx:factory="observableArrayList">
</FXCollections>
</items>
</ListView>
</content>
</ScrollPane>
<ScrollPane prefHeight="580.0" prefWidth="200.0">
<content>
<ListView prefHeight="580.0" prefWidth="190.0">
<items>
<FXCollections fx:factory="observableArrayList">
</FXCollections>
</items>
</ListView>
</content>
</ScrollPane>
<HBox alignment="BOTTOM_RIGHT" prefHeight="20.0" prefWidth="400.0" spacing="10.0" GridPane.columnIndex="0" GridPane.rowIndex="2">
<Button text="Add"/>
<Button text="Remove"/>
</HBox>
</children>
</FlowPane>
<VBox>
<children>
<ScrollPane fitToHeight="true" fitToWidth="true">
<content>
<ImageView fx:id="imageContainer" pickOnBounds="true" preserveRatio="true">
<Image url="file:/C:/Users/Public/Pictures/Sample%20Pictures/Koala.jpg" preserveRatio="true" />
</ImageView>
</content>
</ScrollPane>
</children>
</VBox>
</children>
</HBox>
</content>
</Tab>
I want the ImageView to take all the remaining space of the containing tab, I have tried to use fitToHeight="true" fitToWidth="true", and change from a FlowPane to a VBox but I keep getting this:
Does
<ScrollPane fx:id="scrollPane" fitToHeight="true" fitToWidth="true">
...
help?
Ok, I figured out how to get the desired behavior. Using AnchorPane one can force the children nodes to take the space relative to the parent. I share the code just in case someone finds it useful:
<Tab text="Example" fx:id="liveTab" fx:controller="me.example.ExampleController" xmlns:fx="http://javafx.com/fxml">
<content>
<AnchorPane prefHeight="600.0" prefWidth="1200.0">
<children>
<FlowPane prefHeight="600.0" prefWidth="400.0">
<children>
<ScrollPane prefHeight="580.0" prefWidth="200.0">
<content>
<ListView fx:id="listView" prefHeight="580.0" prefWidth="190.0">
<items>
<FXCollections fx:factory="observableArrayList">
</FXCollections>
</items>
</ListView>
</content>
</ScrollPane>
<ScrollPane prefHeight="580.0" prefWidth="200.0">
<content>
<ListView prefHeight="580.0" prefWidth="190.0">
<items>
<FXCollections fx:factory="observableArrayList">
</FXCollections>
</items>
</ListView>
</content>
</ScrollPane>
<HBox alignment="BOTTOM_RIGHT" prefHeight="20.0" prefWidth="400.0" spacing="10.0" GridPane.columnIndex="0" GridPane.rowIndex="2">
<Button text="Add"/>
<Button text="Remove"/>
</HBox>
</children>
</FlowPane>
<AnchorPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="400.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<ScrollPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<ImageView fx:id="imageContainer" pickOnBounds="true" preserveRatio="true">
<Image url="file:/C:/Users/Public/Pictures/Sample%20Pictures/Koala.jpg" preserveRatio="true" />
</ImageView>
</content>
</ScrollPane>
</AnchorPane>
</children>
</AnchorPane>
</content>
</Tab>
and the result: