I managed to solve the issue after toying with the code for some time. What I did was to create the GUI using Scene Builder and linking it with the Java code using a controller. Below are the fxml files:
tingiGUI.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="202.0" prefWidth="325.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ting.TingiCont">
<children><Button fx:id="si" layoutX="137.0" layoutY="112.0" mnemonicParsing="false" onAction="#Onyesha" text="Show" /><Label fx:id="lbi" layoutX="100.0" layoutY="70.0" prefHeight="17.0" prefWidth="124.0" />
</children></Pane>
tinGUI.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0" prefWidth="325.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ting.TinCont">
<children><Button fx:id="bb" layoutX="137.0" layoutY="88.0" mnemonicParsing="false" onAction="#Boom" text="BOOM" /><Label fx:id="lbx" layoutX="84.0" layoutY="147.0" prefHeight="17.0" prefWidth="157.0" />
</children></Pane>
tingGUI.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="219.0" prefWidth="323.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ting.TingCont">
<children><Button fx:id="cmb" layoutX="127.0" layoutY="126.0" mnemonicParsing="false" onAction="#clicked" text="Click me..." /><Label fx:id="lb" layoutX="93.0" layoutY="80.0" prefHeight="17.0" prefWidth="121.0" />
</children></AnchorPane>
Below are the controllers. They extend the Main java class.
TinCont.java
package ting;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import jfxtras.labs.scene.control.window.CloseIcon;
import jfxtras.labs.scene.control.window.Window;
public class TinCont extends Main implements Initializable{
@FXML
private Button bb;
@FXML
private Label lbx;
/**
* Initializes the controller class.
*/
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
@FXML
void Boom(ActionEvent event) throws IOException {
lbx.setText("KAMIKAZE!!!!!!");
Pane coco = FXMLLoader.load(getClass().getResource("tingiGUI.fxml"));
Window x = new Window("TINGI WINDOW");
// set the window position to 10,10 (coordinates inside canvas)
x.setLayoutX(10);
x.setLayoutY(10);
// define the initial window size
x.setPrefSize(330, 210);
x.setResizableWindow(false);
// either to the left
x.getRightIcons().add(new CloseIcon(x));
// add some content
x.getContentPane().getChildren().add(coco);
anchor.getChildren().add(x);
}
}
TingiCont.java
package ting;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.event.ActionEvent;
/**
* Created by Udeman on 2/1/14.
*/
public class TingiCont {
@FXML
private Label lbi;
@FXML
private Button si;
@FXML
void Onyesha(ActionEvent event) {
lbi.setText("You made it...");
}
}
TingCont.java
package ting;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import jfxtras.labs.scene.control.window.CloseIcon;
import jfxtras.labs.scene.control.window.Window;
public class TingCont extends Main implements Initializable{
@FXML
private Label lb;
@FXML
private Button cmb;
@Override
public void initialize(URL url, ResourceBundle resourceBundle) {
}
@FXML
void clicked(ActionEvent event) throws IOException {
lb.setText("I've been clicked...");
Pane balou = FXMLLoader.load(getClass().getResource("tinGUI.fxml"));
Window w = new Window("TIN WINDOW");
// set the window position to 10,10 (coordinates inside canvas)
w.setLayoutX(10);
w.setLayoutY(10);
// define the initial window size
w.setPrefSize(330, 210);
//w.setResizableWindow(false);
// either to the left
w.getRightIcons().add(new CloseIcon(w));
// add some content
w.getContentPane().getChildren().add(balou);
anchor.getChildren().add(w);
//((Node)(event.getSource())).getScene().getWindow().hide();
}
}
And this is the Main Class. Main.java
package ting;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import jfxtras.labs.scene.control.window.CloseIcon;
import jfxtras.labs.scene.control.window.Window;
public class Main extends Application {
public static AnchorPane anchor = new AnchorPane();
@Override
public void start(Stage primaryStage) throws Exception{
Pane sunda = FXMLLoader.load(getClass().getResource("tingGUI.fxml"));
sunda.setLayoutX(130);
sunda.setLayoutY(60);
anchor.getChildren().add(sunda);
primaryStage.setTitle("TING");
primaryStage.setScene(new Scene(anchor, 600, 400));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
To be able to properly align elements it is best to use the Scene builder. Since I was planning on using internal frames I downloaded JFXtras 8 labs jar file from the JFxtras team. JavaFx8 does not currently support internal frames.
In the Main java class, I created a static anchorpane which the other controllers could inherit because they extend the Main class. From there, I created a JFXtras window and loaded the contents of my fxml file using an fxml loader on a pane. I added the pane to the Jfxtras window and lastly added the window to the anchorpane which was created from the Main class.
In summary, to properly align GUI elements one is best of using scene builder. In order to share the same anchorpane its best to create a static anchorpane in one class and the rest of the controllers to inherit from that class.
It is now possible to add custom UI elements to the current Scene Builder but one is limited on how to use them from the scene builder. You cannot only drag and drop the custom controls but not modify them from Scene Builder
A quick remark, jfxtras window is currently the closest way to have internal frames in JavaFx8. Oracle have not implemented internal frames in Javafx8. However, jfxtras windows for one reason or the other blow out of proportion GUI elements from the fxml file. Well, am going to take a break from coding with Javafx8 until internal frames are introduced. I heavily rely on them. Am returning to c# for now....