i've a trouble with JavaFX and FXML.
I've a simple FXML file structured in this way:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.media.MediaView?>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="480.0" minWidth="720.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="mediaplayer.MediaPlayerControllerSplit">
<center>
<SplitPane dividerPositions="0.5" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" BorderPane.alignment="CENTER">
<items>
<AnchorPane fx:id="mediaPaneL" style="-fx-background-color: green;">
<children>
<MediaView fx:id="mediaViewL" />
</children>
</AnchorPane>
<AnchorPane fx:id="mediaPaneR" style="-fx-background-color: red;">
<children>
<MediaView fx:id="mediaViewR" />
</children>
</AnchorPane>
</items>
</SplitPane>
</center>
<bottom>
<ToolBar minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-color: black;" BorderPane.alignment="BOTTOM_CENTER">
<items>
<Button mnemonicParsing="false" onAction="#openVideo" text="Openfile" />
<Button mnemonicParsing="false" onAction="#playVideo" text=">" />
<Button mnemonicParsing="false" onAction="#pauseVideo" text="||" />
<Button mnemonicParsing="false" onAction="#stopVideo" text="stop" />
<Button mnemonicParsing="false" text="<<<" />
<Button mnemonicParsing="false" text="<<" />
<Button mnemonicParsing="false" text=">>" />
<Button mnemonicParsing="false" text=">>>" />
<Button mnemonicParsing="false" onAction="#exitVideo" text="EXIT" />
</items>
</ToolBar>
</bottom>
</BorderPane>
The controller will load 2 videos and show them in the relative 2 AnchorPanes inside the SplitView, as shown in the following image:
ClickMe
The video exceeds from width bounds of the Parent AnchorPane, how can i set them properly?
Thanks all.
I've solved this with the following line of codes in the Controller class:
mediaViewL.fitWidthProperty().bind(mediaPaneL.widthProperty());
The left (same for the right one) mediaView width has been fitted to his first Parent width (AnchorPaneL / AnchorPaneR).
Related
I have a small problem with the position / visibility of the lower scrollbar button of the BorderPanes (EBMTableView) - JavaFX Scene Builder
I want that if I minimize the window, the bottom scrollbar button is always visible.
Thank you very much
Please check the Code of GUI and the imgs down.
<?xml version="1.0" encoding="UTF-8"?>
<?import de.riconn.fx_ebm_control.gui.views.abgleich.*?>
<?import de.riconn.fx_ebm_control.gui.views.arzt_aktuell.*?>
<?import de.riconn.fx_ebm_control.gui.views.ebm.*?>
<?import de.riconn.fx_ebm_control.gui.views.frequenz.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.effect.Glow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity"
minHeight="-Infinity" minWidth="-Infinity" prefHeight="900.0"
prefWidth="1230.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="de.riconn.fx_ebm_control.gui.WpdlTxtControler">
<center>
<TabPane prefHeight="200.0" prefWidth="200.0"
tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER">
<tabs>
<Tab fx:id="tab_patient" onSelectionChanged="#tab_Patienten_Selected"
text="Patientenliste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="107.0" layoutY="53.0"
prefHeight="346.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<Button fx:id="btn_PatientenOpen" mnemonicParsing="false"
onAction="#openPatientenListe" text="Patientenliste öffnen.."
BorderPane.alignment="CENTER" />
</top>
<center>
<ArztAktuellTableView fx:id="tv_patientContainer"
prefHeight="494.0" prefWidth="829.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_frequenz" onSelectionChanged="#tab_Frequenz_Selected"
text="Frequenztabelle">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="109.0" layoutY="49.0"
prefHeight="346.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<Button fx:id="btn_FrequenzOpen" mnemonicParsing="false"
onAction="#openFrequenzFile" text="Frequenztabelle öffnen..."
BorderPane.alignment="CENTER" />
</top>
<center>
<FrequenzTableView fx:id="tv_frequenzContainer"
prefHeight="494.0" prefWidth="829.0" BorderPane.alignment="CENTER_RIGHT" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_abgleich" onSelectionChanged="#tab_Abgleich_Selected"
text="Abgleichsliste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="69.0" layoutY="51.0" prefHeight="346.0"
prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<HBox alignment="TOP_RIGHT" spacing="10.0">
<Button fx:id="btn_AbgleichToPdf" mnemonicParsing="false"
onAction="#viewAbgleichAsPdf" text="Als PDF öffnen..."
BorderPane.alignment="CENTER" />
<BorderPane.margin>
<Insets right="10.0" />
</BorderPane.margin>
</HBox>
</top>
<center>
<AbgleichTableView fx:id="tv_abgleichContainer"
prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_EBM" onSelectionChanged="#tab_EBM_Selected"
text="EBM Liste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="489.0" layoutY="229.0"
prefHeight="829.0" prefWidth="1200.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<HBox alignment="TOP_RIGHT" spacing="10.0">
<Button fx:id="btn_minus_ebm" mnemonicParsing="false"
onAction="#delete_ebm" text="-">
</Button>
<Button fx:id="btn_plus_ebm" mnemonicParsing="false"
onAction="#add_ebm" text="+">
</Button>
<BorderPane.margin>
<Insets right="10.0" />
</BorderPane.margin>
</HBox>
</top>
<center>
<EBMTableView fx:id="tv_EBMContainer" editable="true"
prefHeight="200.0" prefWidth="200.0" tableMenuButtonVisible="true"
BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</center>
<top>
<MenuBar prefHeight="0.0" prefWidth="878.0"
BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" onAction="#openFrequenzFile"
text="Frequenztabelle öffnen..." />
<MenuItem mnemonicParsing="false" onAction="#openPatientenListe"
text="Patientenliste öffnen..." />
<MenuItem mnemonicParsing="false" onAction="#close" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem fx:id="m_add_ebm" disable="true" mnemonicParsing="false" onAction="#add_ebm"
text="hinzufügen" />
<MenuItem fx:id="m_delete_ebm" disable="true" mnemonicParsing="false" onAction="#delete_ebm"
text="löschen" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Abgleich">
<items>
<MenuItem fx:id="m_viewAbgleichAsPdf" disable="true" mnemonicParsing="false"
onAction="#viewAbgleichAsPdf" text="Als PDF öffnen" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" onAction="#openAboutDialog"
text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
</BorderPane>
JavaFX Scene Builder structure
windows with scrollButton
windows without scrollButton after minimizing
Problem Solved, just change the first BorderPane Params like this ->
<BorderPane maxHeight="0" maxWidth="0"
minHeight="0" minWidth="0" prefHeight="0"
prefWidth="1230.0" xmlns="http://javafx.com/javafx/8.0.111"
xmlns:fx="http://javafx.com/fxml/1"
I am working on a chatbot project in java and for the GUI I am using JavaFX, and IDE eclipse oxygen and scene builder 8.4.1.
I am having a problem adding a background image to a text area. here is a screen shot of what I did and it just shows nothing(not even an error).
following is the fxml code generated by scene builder:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
<top>
<AnchorPane prefHeight="56.0" prefWidth="600.0" style="-fx-background-color: blue;" BorderPane.alignment="CENTER">
<children>
<ImageView fitHeight="51.0" fitWidth="79.0" layoutX="23.0" layoutY="20.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../../../Downloads/background.jpg" />
</image></ImageView>
<Label layoutX="118.0" layoutY="36.0" text="Ibot" />
</children>
</AnchorPane>
</top>
<center>
<TextArea editable="false" prefHeight="200.0" prefWidth="200.0" style="-fx-background-image: url("../../../Downloads/background.jpg"); -fx-background-repeat: stretch;" BorderPane.alignment="CENTER" />
</center>
<bottom>
<HBox BorderPane.alignment="CENTER">
<children>
<TextField prefHeight="25.0" prefWidth="476.0" promptText="Type in here" HBox.hgrow="ALWAYS">
<HBox.margin>
<Insets />
</HBox.margin>
</TextField>
<Region prefHeight="25.0" prefWidth="60.0" />
<Button mnemonicParsing="false" prefHeight="25.0" prefWidth="57.0" text="Send">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
</children>
<BorderPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</BorderPane.margin>
<padding>
<Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
</padding>
</HBox>
</bottom>
</BorderPane>
It's probably not working because as specify in JavaFX CSS Reference Guide the TextArea is a association of two substructure: a ScrollPane and a Region. You have to change the style of those.
In CSS this should work:
#text-area-id .content{
-fx-background-image : url("the_path_to_your_image")
/* others properties */
}
Edit to answer comment:
For a button you just need to set the property -fx-background-image:
#your-button{
-fx-background-image : url("the_path_to_your_image")
}
I'm using fxml in JavaFX and I want a list master/detail view. A list on the left of a fixed size, and a detail of a TextArea where the width grows with the window size.
This is my fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
<top>
<MenuBar prefWidth="671.0" BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem mnemonicParsing="false" text="Delete" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<HBox BorderPane.alignment="CENTER">
<children>
<ListView prefHeight="754.0" prefWidth="236.0" />
<TextArea />
</children>
</HBox>
</center>
</BorderPane>
This sample fxml looks like this:
You can see that the list is correct, and the textArea is showing and growing in height but not in width.
EDIT
Modified due to an answer.
This is the full code now. I only changed the max width and height of -Infinity to -1 but still no luck.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<BorderPane maxHeight="-1" maxWidth="-1" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
<top>
<MenuBar prefWidth="671.0" BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem mnemonicParsing="false" text="Delete" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<HBox BorderPane.alignment="CENTER">
<children>
<ListView prefHeight="754.0" prefWidth="236.0" />
<TextArea />
</children>
</HBox>
</center>
</BorderPane>
Set the HBox.hgrow property of the text area:
<TextArea HBox.hgrow="ALWAYS"/>
The value of negative infinity is the constant USE_PREF_SIZE, which means your BorderPane will never be larger than its preferred size (which in your case is 1280x800).
Changing the maximum width and height to USE_COMPUTED_SIZE (-1) should solve your problem. As this is the default value, you could just remove the maxHeight and maxWidth attributes.
When I increase the window, the inner elements stay at the same size.
I want that when I increase the window, that the elements also get larger/scale
Main.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane cacheHint="SCALE_AND_ROTATE" focusTraversable="true" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<TableView fx:id="finalTable" layoutX="27.0" layoutY="358.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="190.0" prefWidth="766.0" />
<Label layoutX="27.0" layoutY="21.0" prefHeight="25.0" prefWidth="149.0" text=" Quell-Datei" />
<TableView fx:id="sourceTable" editable="true" layoutX="27.0" layoutY="50.0" maxHeight="900.0" maxWidth="900.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="190.0" prefWidth="766.0" />
<Label layoutX="27.0" layoutY="329.0" prefHeight="25.0" prefWidth="149.0" text=" Konvertierte-Datei" />
<Button fx:id="linkBtn" layoutX="313.0" layoutY="282.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#linkAction" prefHeight="30.0" prefWidth="90.0" text="Verbinden" />
<Button fx:id="splitBtn" layoutX="437.0" layoutY="282.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#splitAction" prefHeight="30.0" prefWidth="90.0" text="Trennen" />
</children>
</AnchorPane>
Im working with SceneBuilder 2.0, and I have also tried to "anchor" a button
(see here: http://i.imgur.com/GZyL5xC.png)
...but the scaling is completely wrong (see here: http://i.imgur.com/hmMi1p3.png)
I searched the whole internet for an answer, but I found nothing that could help.
Well your layout is typically a VBox layout. If your Windows isn't at a fixed size this will be a good solution, because your Buttons stay at the same height and in the center of your window. The TableViews grow and shrink as you resize the window. Like you want.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<Label prefHeight="25.0" prefWidth="149.0" text=" Quell-Datei" VBox.vgrow="NEVER" />
<TableView fx:id="sourceTable" editable="true" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
<Label />
<HBox alignment="CENTER" prefHeight="61.0" prefWidth="766.0" spacing="20.0" VBox.vgrow="NEVER">
<children>
<Button fx:id="linkBtn" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" onAction="#linkAction" prefHeight="30.0" prefWidth="90.0" text="Verbinden" HBox.hgrow="NEVER" />
<Button fx:id="splitBtn" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" onAction="#splitAction" prefHeight="30.0" prefWidth="90.0" text="Trennen" HBox.hgrow="NEVER" />
</children>
</HBox>
<Label prefHeight="25.0" prefWidth="149.0" text=" Konvertierte-Datei" VBox.vgrow="NEVER" />
<TableView fx:id="finalTable" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
</children>
<padding>
<Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
</padding>
</VBox>
I have got a SplitPane in a SplitPane -- both horizontal. I would like to avoid specifying absolute width/height. When I don't specify width/height, the second SplitPane is not shown:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.Group?>
<?import javafx.scene.layout.*?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="500.0" style="-fx-background-color: cornsilk;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<left>
<ToolBar orientation="VERTICAL">
<items>
<Group>
<children>
<Button rotate="-90.0" text="Project" />
</children>
</Group>
<Group>
<children>
<Button rotate="-90.0" text="Structure" />
</children>
</Group>
</items>
</ToolBar>
</left>
<center>
<SplitPane dividerPositions="0.25" style="-fx-background-color:red;">
<items>
<AnchorPane style="-fx-background-color:darkblue;"/>
<AnchorPane style="-fx-background-color:gold;">
<children>
<SplitPane dividerPositions="0.25">
<items>
<AnchorPane style="-fx-background-color:khaki;"/>
<AnchorPane style="-fx-background-color:lime;"/>
</items>
</SplitPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</center>
</BorderPane>
Defining the SplitPane with <SplitPane dividerPositions="0.25" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"> fixes the problem, here is the MWE:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.Group?>
<?import javafx.scene.layout.*?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="700.0" style="-fx-background-color: cornsilk;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<left>
<ToolBar orientation="VERTICAL">
<items>
<Group>
<children>
<Button rotate="-90.0" text="Project" />
</children>
</Group>
<Group>
<children>
<Button rotate="-90.0" text="Structure" />
</children>
</Group>
</items>
</ToolBar>
</left>
<center>
<SplitPane dividerPositions="0.25" style="-fx-background-color:red;">
<items>
<AnchorPane style="-fx-background-color:green;"/>
<AnchorPane style="-fx-background-color:blue;">
<children>
<SplitPane dividerPositions="0.25" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<items>
<AnchorPane style="-fx-background-color:black;"/>
<AnchorPane style="-fx-background-color:aqua;"/>
</items>
</SplitPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</center>
</BorderPane>