JavaFX ScrollPane vs. TabView filling space - layout

I've placed some content inside a TabPane's tab, but the TabPane's width seems to me being equal to the longest element inside the tab (the longest element is not visible on the picture).
The TabPane is loaded to a ScrollPane via FXMLLoader.load(), that's why I would expect it to fill the whole space, not just the size of the longest element inside..
How could I make the TabPane fill all available space?
Loader:
FXMLLoader loader = new FXMLLoader();
loader.setLocation(Main.class.getResource("View.fxml"));
Node tp = loader.load();
ScrollPane sp = new ScrollPane();
sp.setContent(tp);
primaryStage.setScene(new Scene(sp, 300, 200));
primaryStage.show();
View.fxml:
<TabPane tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<tabs>
<Tab text="Untitled Tab 1">
<content>
<AnchorPane />
</content>
</Tab>
<Tab text="Untitled Tab 2">
<content>
<AnchorPane />
</content>
</Tab>
</tabs>
</TabPane>

ScrollPane sp = new ScrollPane();
sp.setContent(tp);
sp.setFitWidth(true);

Related

Dynamic x position on window resize

I am having one button. On click of that button. I am opening the stackpane which is right below it. For StackPane hard coded x layout values. So at first click the stackpane shows right below the button. The prob is when I maximize or resize the window it is not adjusting it's position(x).
FXML
<Button fx:id="searchCriteriaBtn" mnemonicParsing="false" onAction="#searchCriteriaAction" styleClass="redButton" text="Search Criteria">
<StackPane fx:id="searchCriteriaPane" alignment="TOP_RIGHT" prefHeight="150.0" prefWidth="200.0" styleClass="redBorder" translateX="239.0" translateY="-6.0" visible="false">
JAVA
#FXML
private void searchCriteriaAction(ActionEvent event){
searchCriteriaPane.visibleProperty().setValue(true);
searchCriteriaBtn.layoutXProperty().bind(searchCriteriaPane.layoutXProperty());
searchCriteriaBtn.layoutYProperty().bind(searchCriteriaPane.layoutYProperty());
}
I have found out the solution of overlay dropdown menu.
<MenuButton mnemonicParsing="false" nodeOrientation="LEFT_TO_RIGHT"
styleClass="redButton" text="Search Criteria" textFill="WHITE">
<items>
<MenuItem mnemonicParsing="false"
style="-fx-background-color: transparent; -fx-padding: 0; -fx-margin: 0;">
<AnchorPane minHeight="0.0" minWidth="0.0"
prefHeight="500.0" prefWidth="345.0" styleClass="noborder">
<children>
<HBox layoutY="156.0" minHeight="185.0" minWidth="345.0"
prefHeight="185.0" prefWidth="357.0" />
<HBox layoutX="5.0" layoutY="316.0" prefHeight="35.0"
prefWidth="348.0">
<children>
<Text layoutX="7.0" layoutY="335.0" strokeType="OUTSIDE"
strokeWidth="0.0" text="Template Name">
<HBox.margin>
<Insets right="5.0" top="9.0" />
</HBox.margin>
</Text>
<ComboBox fx:id="templateNameComboBox" layoutX="94.0"
layoutY="330.0" prefWidth="248.0" promptText="Select Template Name">
<HBox.margin>
<Insets left="7.0" />
</HBox.margin>
</ComboBox>
</children>
</HBox>
</children>
</AnchorPane>
</MenuItem>
</items>
<HBox.margin>
<Insets left="6.0" />
</HBox.margin>
<cursor>
<Cursor fx:constant="HAND" />
</cursor>
</MenuButton>

Determine maximum dimensions a Canvas could grow to?

I am using a BorderPane, where the right area is unused. In the center area I have a HBox with a Canvas and another control e.g. a Button. I want the Canvas to have the same width and height with a value of
Canvas width and height = minimum{maximum possible Canvas height, maximum possible Canvas width}
(in other words: Canvas should be a square)
My problem is: How do I determine the maximum width and the maximum height that a Canvas could grow to?
Here is my 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.*?>
<BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
<bottom>
<Label text="Bottom area" />
</bottom>
<center>
<HBox>
<children>
<Canvas width="300" height="300" />
<Button mnemonicParsing="false" text="some button next to the Canvas" />
</children>
</HBox>
</center>
<left>
<Button mnemonicParsing="false" text="Left area"/>
</left>
<top>
<MenuBar>
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" text="Close" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
</BorderPane>
Thanks for any hint!
The easiest way I can see this being done is: canvas.getwidth() and canvas.getHeight()
You have to add canvas manually, after the GUI is constructed, so you can calculate its size:
public class YourController implements Initializable {
#FXML HBox mHBox;
#FXML Button mButton;
#Override
public void initialize(final URL paramURL, final ResourceBundle paramResourceBundle) {
Platform.runLater(new Runnable() { public void run() {
double w0 = mHBox.getWidth();
double w1 = mButton.getWidth();
double h0 = mHBox.getHeight();
double size = Math.min(w0-w1, h0);
Canvas canvas = new Canvas(size, size);
mHBox.getChildren().add(0, canvas);
}});
}
}
Problem with the Canvas is that is is not resizable :(

View FXML code without saving to an file first?

In the JavaFX Scene Builder, is it somehow possible to view the FXML code for the current layout without saving to a file and view the saved file?
right click on the root node in scene builder and then choose copy . and paste it in any text editor.
out put :
<Group id="sb-clipboard" xmlns:fx="http://javafx.com/fxml">
<fx:define>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0">
<children>
<Button id="button1" layoutX="140.0" layoutY="104.0" mnemonicParsing="false" text="Button" />
<RadioButton id="radioButton1" layoutX="283.0" layoutY="172.0" mnemonicParsing="false" text="RadioButton" />
<ToggleButton id="toggleButton1" layoutX="94.0" layoutY="234.0" mnemonicParsing="false" text="ToggleButton" />
</children>
</AnchorPane>
</fx:define>
</Group>

JavaFX - TabPane/Tab How to make tab title invisible?

I'm new in JavaFX and have a little troubles:
I have an TabPane with several Tabs and I wanna make Tab titles invisible. So, user should not change Tabs by clicking on titles, but it will be changed in different way from menu..
How to make this Tab titles invisible/hidden? That's the question. I don't wanna hide whole Tabs or disable or anything like that, just titles.
Or maybe you have another, completely different idea, how to solve this in JavaFX. Maybe with another controls???
Thanks for any clue.
If you are not using Tabs then you don't need TabPane.
You can just introduce a list of content panes and switch them according to menu commands.
You can find a code example in next question: How can I implement the functionality of awt.CardLayout in my javaFX 2.0 application?
Conclusion of my research: This is not possible to do this in JavaFX. TabPane captions can be located on the top, left, right and bottom of the control, but cannot be hidden.
You can make this by wrapping TabPane in AnchorPane (root container) and setting up TabPane's topAnchor to negative number as much as needed.
Java code:
...
AnchorPane.setTopAnchor(myTabPane, -29.0);
AnchorPane.setBottomAnchor(myTabPane, 0);
AnchorPane.setLeftAnchor(myTabPane, 0);
AnchorPane.setRightAnchor(myTabPane, 0);
...
Also in FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TabPane fx:id="myTabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="-29.0">
<tabs>
<Tab fx:id="tab1" text="Tab 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Label text="Tab 1" />
<Button layoutX="35.0" layoutY="2.0" mnemonicParsing="false" text="Go to Tab 2 (non-functional currently)" />
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab2" text="Tab 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Label text="Tab 2" />
<Button layoutX="35.0" layoutY="2.0" mnemonicParsing="false" text="Go to Tab 1 (non-functional currently)" />
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</AnchorPane>

JavaFX How to set max/min window size?

Does setMinSize() work on containers such as GridPane, for example? I have found that in my program GridPane ignores min. size properties while resized manually.
Here is the FXML code:
<GridPane fx:id="gp" prefHeight="134.0" prefWidth="238.0" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication12.SampleController">
<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>
</GridPane>
and the controller class
public class SampleController implements Initializable {
#FXML
private GridPane gp;
#Override
public void initialize(URL url, ResourceBundle rb) {
gp.setMaxWidth(700);
gp.setMinSize(200, 200);
}
}
What's wrong here? Should there be some sort of a 'window' max/min size?
I am going to assume that by window, you mean a Stage (which subclasses Window).
The window size can vary from the root container size for the scene. You can think of a window or stage as an independent viewport into the scene which can be sized larger or smaller than the min and max specifications of the scene root.
To set the minimum or maximum size of the Stage, set its minHeight and minWidth or maxHeight and maxWidth properties.
Answers to additional questions
Can the Stage be set to "fit whole display" size?
stage.setFullScreen(true)
But how to make the size as same as we make size by clicking on the title bar?
stage.setMaximized(true)

Resources