In JavaFX 8 is it still possible to bind a control property directly in FXML to a property of the controller?
Something like:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<GridPane xmlns:fx="http://javafx.com/fxml"
fx:controller="application.PaneController" minWidth="200">
<Label id="counterLabel" text="${controller.counter}" />
<Button translateX="50" text="Subtract 1"
onAction="#handleStartButtonAction" />
</GridPane>
The above seems not to work.
Yes this is possible assuming you implement the correct methods in the controller:
public class PaneController {
private final IntegerProperty counter = new SimpleIntegerProperty(100);
public IntegerProperty counterProperty() {
return counter;
}
// this is also required
public int getCounter() {
return counter.get();
}
public void handleStartButtonAction() {
counter.set(counter.get() - 1);
}
}
Also I'm not sure if placing both Nodes in the same cell is the best decision...
Related
I have a problem with context menus. The items in the context menu can be styled, but it doesn't work dynamic. I mean for example at the initialize I add a styleclass to the MenuItem and by an event I remove it, but the style still remains there. How can it be solved?
Here is a simple example to play with it:
Controller.java:
public class Controller implements Initializable {
private static final String STYLED = "styled";
#FXML
private ListView<String> listView;
#FXML
private Button change;
#Override
public void initialize(URL location, ResourceBundle resources) {
ContextMenu cm = new ContextMenu();
MenuItem miAdd = new MenuItem("Add");
miAdd.setOnAction(event -> listView.getItems().add("Apple"));
MenuItem miRemove = new MenuItem("Remove");
miRemove.disableProperty().bind(listView.getSelectionModel().selectedItemProperty().isNull());
miRemove.setOnAction(event -> listView.getItems().remove(listView.getSelectionModel().getSelectedItem()));
cm.getItems().addAll(miAdd, miRemove);
listView.setContextMenu(cm);
miRemove.getStyleClass().add(STYLED);
change.setOnAction(event -> {
if (!miRemove.getStyleClass().contains(STYLED)) {
miRemove.getStyleClass().add(STYLED);
} else {
miRemove.getStyleClass().remove(STYLED);
}
});
}
}
View.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="textField.Controller"
stylesheets="css/layout.css">
<VBox>
<Button fx:id="change" text="ChangeStyle"/>
<ListView fx:id="listView"/>
</VBox>
</AnchorPane>
layout.css:
.styled .text {
-fx-strikethrough: true;
}
.styled {
-fx-background-color: gray;
}
How can I manage to add/remove style to my MenuItem ?
Can you Help me how to change the Spesific pane in 1 scene.
So when i want to click the Menu A. The Content will change to content A.
And when i click the menu B. The Content will be change to Content B
i try with the 2 FXML and using normal method like load screen A an screen B
But the result only change the window. i want to change the content with 1 window only.
Is there any suggestion how to change the specific pane in 1 window?
As an option.
Make FXML and controller for any "Content" and when the some button is clicked to delete the old "Content" and upload new.
Working example below (edited according to James_D comment):
Main.java
public class Main extends Application {
Parent root;
Stage stage;
#Override
public void start(Stage primaryStage) {
try {
root = FXMLLoader.load(getClass().getResource("Main.fxml"));
stage = primaryStage;
stage.setTitle("Stage");
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
Main.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<BorderPane fx:id="mainPane" 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" fx:controller="application.Controller">
<left>
<ToolBar orientation="VERTICAL" BorderPane.alignment="CENTER">
<items>
<Button mnemonicParsing="false" onAction="#onBtnAClick" text="A" />
<Button mnemonicParsing="false" onAction="#onBtnBClick" text="B" />
<Button mnemonicParsing="false" onAction="#onBtnCClick" text="C" />
</items>
</ToolBar>
</left>
</BorderPane>
Controller.java
import javafx.fxml.FXML;
import javafx.scene.layout.BorderPane;
public class Controller {
#FXML
BorderPane mainPane;
#FXML
public void onBtnAClick(){
ContentA contentA = new ContentA();
mainPane.setCenter(contentA);
}
#FXML
public void onBtnBClick(){
ContentB contentB = new ContentB();
mainPane.setCenter(contentB);
}
#FXML
public void onBtnCClick(){
ContentC contentC = new ContentC();
mainPane.setCenter(contentC);
}
}
And some sample of Content:
ContentA.java
public class ContentA extends AnchorPane{
public ContentA(){
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("ContentA.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try {
fxmlLoader.load();
} catch (IOException e) {
e.printStackTrace();
}
}
}
ContentA.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<fx:root prefHeight="200.0" prefWidth="300.0" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<ListView layoutX="50.0" layoutY="-26.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</fx:root>
try to use this, its easy
Parent root = null;
try {
root=FXMLLoader.load(getClass().getResource("your_FXML_File.fxml"));
} catch (Exception e) {
}
borderpane.setCenter(root);
I'm trying to run the following example from FXML reference:
This example consists in declaring a String variable in a JavaScript script and using it later in the FXML with the $ operator for displaying the String in a Label.
The problem is that when I run this example with Java 8u40, the Label is empty instead of showing the declared String.
JavaFxComponent.java:
public class JavaFxComponent extends VBox {
public JavaFxComponent() throws Exception {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/JavaFxComponent.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.load();
}
}
JavaFxComponent.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?language javascript?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<fx:root type="javafx.scene.layout.VBox" xmlns="http://javafx.com/javafx/8"
xmlns:fx="http://javafx.com/fxml">
<fx:script>
var myText = "This is the text of my label.";
</fx:script>
<Label text="$myText" />
</fx:root>
JavaFxTest:
public class JavaFxTest extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setScene(new Scene(new JavaFxComponent()));
primaryStage.show();
}
public static final void main(String[] args) {
launch(args);
}
}
It seems that "var myText" doesn't create a reference in the scope where '$' performs lookup. This is probably not the answer you were looking for, however I believe it will be useful to mention alternatives for those who stumble upon the same issue, at least until this is resolved or someone sheds more light on the matter.
<fx:define>
<String fx:id="myText" fx:value="This is the text of my label." />
</fx:define>
<Label text="$myText" />
<Label fx:id="myLabel" />
<fx:script>
myLabel.text = "This is the text of my label.";
</fx:script>
Note: for 1st method to work <?import java.lang.String?> needs to be imported.
Hello I'm starting in JavaFX and I've got some problems.
I want to communicate two controlles from two diferents views. How can I do it?
I'm working with tabs and i have this two controllers and i want to do something similar like this:
Application.java:
public class JavaFXApplication6 extends Application
{
#Override
public void start(Stage primaryStage)
{
try
{
Parent root = FXMLLoader.load(getClass().getResource(
"/view/FXML_Main.fxml"));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e){
e.printStackTrace();
}
primaryStage.setTitle("Back-end GUI");
}
/**
* #param args the command line arguments
*/
public static void main(String[] args)
{
launch(args);
}
}
FXML_Main.fxml:
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0"
xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"
fx:controller="controller.FXML_MainController">
<children>
<TabPane layoutX="61.0" layoutY="30.0" prefHeight="400.0" prefWidth="600.0"
tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<tabs>
<Tab text="Untitled Tab 1">
<content>
<fx:include source="FXML_Tab1.fxml" />
</content>
</Tab>
<Tab text="Untitled Tab 2">
<content>
<fx:include source="FXML_Tab2.fxml" />
</content>
</Tab>
</tabs>
</TabPane>
</children>
</AnchorPane>
FXML_MainController.java:
public class FXML_MainController implements Initializable {
/**
* Initializes the controller class.
*/
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
FXML_Tab1.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="controller.FXML_Tab1Controller">
<children>
<Label fx:id="Label1" layoutX="282.0" layoutY="108.0" text="Label" />
<TextField fx:id="FextField1" layoutX="215.0" layoutY="146.0" />
<Button fx:id="Button1" layoutX="269.0" layoutY="197.0" mnemonicParsing="false"
onAction="#actionButton1" text="Button" />
</children>
</AnchorPane>
FXML_Tab1Controller.java:
public class FXML_Tab1Controller implements Initializable {
FXML_Tab2Controller tab2controller;
#FXML public Label Label1;
#FXML public TextField TextField1;
#FXML public Button Button1;
/**
* Initializes the controller class.
*/
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
#FXML private void actionButton1(ActionEvent event)
{
Label1.setText(tab2controller.TextField2.getText());
}
}
FXML_Tab2.fxml:
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="controller.FXML_Tab2Controller">
<children>
<Label fx:id="Label2" layoutX="282.0" layoutY="99.0" text="Label" />
<TextField fx:id="TextField2" layoutX="215.0" layoutY="149.0" />
<Button fx:id="Button2" layoutX="270.0" layoutY="200.0" mnemonicParsing="false"
onAction="#actionButton2" text="Button" />
</children>
</AnchorPane>
FXML_Tab2Controller.java:
public class FXML_Tab2Controller implements Initializable {
FXML_Tab1Controller tab1controller;
#FXML public Label Label2;
#FXML public TextField TextField2;
#FXML public Button Button2;
/**
* Initializes the controller class.
*/
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
#FXML private void actionButton2(ActionEvent event){
Label2.setText(tab1controller.TextField1.getText());
}
}
something similar like that video:
https://www.youtube.com/watch?v=XLVx46ycxco
Add an fx:id to each of your <fx:include> tags:
<tabs>
<Tab text="Untitled Tab 1">
<content>
<fx:include source="FXML_Tab1.fxml" fx:id="tab1" />
</content>
</Tab>
<Tab text="Untitled Tab 2">
<content>
<fx:include source="FXML_Tab2.fxml" fx:id="tab2" />
</content>
</Tab>
</tabs>
This will allow you to inject the corresponding controllers into your FXML_MainController:
public class FXML_MainController {
#FXML
private FXML_Tab1Controller tab1Controller ;
#FXML
private FXML_Tab2Controller tab2Controller ;
}
The variable naming is very important here: the fields must be named xController where x is the value for the fx:id attribute in the fx:include. See the Introduction to FXML documentation for details.
Now in your main controller's initialize() method, you can establish the relationship between the two controllers:
public class FXML_MainController {
#FXML
private FXML_Tab1Controller tab1Controller ;
#FXML
private FXML_Tab2Controller tab2Controller ;
public void initialize() {
tab1Controller.tab2Controller = tab2Controller ;
tab2Controller.tab1Controller = tab1Controller ;
}
}
I am using the version javafx 2 with kepler and I tried to customized a tooltip without succeed:
.tooltip{
-fx-background-color: linear-gradient(blue,lightskyblue);
-fx-background-radius: 5;
}
.page-corner {
-fx-shape: " ";
}
It is not working. Do you have any ideas ?
Update:
here an mcve :
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
public class MainApp extends Application {
#Override
public void start(Stage stage) {
AnchorPane root;
try {
root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
Scene scene = new Scene(root, 600, 400);
stage.setTitle("FXML Welcome");
stage.setScene(scene);
stage.show();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static void main(String[] args) {
Application.launch(MainApp.class, args);
}
}
Sample.fxml file :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane prefHeight="400.0" prefWidth="600.0" stylesheets="MCVE/application.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Sample">
<children>
<TextField layoutX="66.0" layoutY="49.0">
<tooltip>
<Tooltip text="tooltip message" />
</tooltip>
</TextField>
</children>
</AnchorPane>
controller :
public class Sample {
//controller
}
application.css file :
.tooltip{
-fx-background-color: linear-gradient(blue,lightskyblue);
-fx-background-radius: 5.0;
}
.page-corner {
-fx-shape: " ";
}
I think this is because the Tooltip appears in its own window (Tooltip is a subclass of PopupControl, which eventually is a subclass of Window). Because you have applied the stylesheet to the AnchorPane, it isn't seen by the Tooltip, which is outside that hierarchy.
Instead, add the stylesheet to the Scene in your MainApp class:
scene.getStylesheets().add(getClass().getResource("/mcve/application.css").toExternalForm());