Composite custom components of the JavaFX GUI can be created by developing a Java-class that extends javafx.scene.Parent that is the base class of the scene graph nodes that have child nodes. Thus the class of the custom component can be adapted for use in the FXML-description of the application scene graph.
 
However, the custom JavaFX-component can also be created by dividing it into the FXML-description of the component parts and the Java-class of the controller that connects the FXML-description of the component and its logic.
To create the FXML-description of the component parts the tool Scene Builder (http://docs.oracle.com/javafx/scenebuilder/1/installation/jsbpub-installation.htm) is useful, which provides visual editing of the scene graph.
 
For example, consider the use of a custom component of the cubic form with a hyperlink.
 
After the visual creation of the FXML-description of the 3D-component by the tool Scene Builder, change the root element of the FXML-description on <fx:root>:
 
<?xml version="1.0" encoding="UTF-8"?>
 
 
 
<?import java.lang.*?>
 
<?import java.util.*?>
 
<?import javafx.geometry.*?>
 
<?import javafx.scene.*?>
 
<?import javafx.scene.control.*?>
 
<?import javafx.scene.layout.*?>
 
<?import javafx.scene.shape.*?>
 
<?import javafx.scene.text.*?>
 
 
 
<fx:root type="javafx.scene.Group" xmlns:fx="http://javafx.com/fxml" >   
 
      <children>      
 
 <Rectangle fill="DARKBLUE" height="50.0" rotate="90.0" translateX="-25.0" translateY="-50.0" width="100.0">
 
          <rotationAxis>
 
            <Point3D x="1.0" />
 
          </rotationAxis>
 
</Rectangle>
 
<Rectangle fill="DARKBLUE" height="50.0" rotate="90.0" translateX="-50.0" translateY="-25.0" width="50.0">
 
          <rotationAxis>
 
            <Point3D y="1.0" />
 
          </rotationAxis>
 
</Rectangle>
 
<Rectangle fill="DARKBLUE" height="50.0" rotate="90.0" translateX="50.0" translateY="-25.0" width="50.0">
 
          <rotationAxis>
 
            <Point3D y="1.0" />
 
          </rotationAxis>
 
</Rectangle>
 
<Rectangle fill="DARKBLUE" height="50.0" rotate="90.0" translateX="-25.0" width="100.0">
 
          <rotationAxis>
 
            <Point3D x="1.0" />
 
          </rotationAxis>
 
</Rectangle>
 
<Rectangle fx:id="backface"  fill="DARKBLUE" height="50.0" translateX="-25.0" translateY="-25.0" translateZ="25.0" width="100.0"/>     
 
      <StackPane id="StackPane" translateX="-25.0" translateY="-25.0" translateZ="-25.0">
 
          <children>
 
            <Rectangle fill="BLUE" height="50.0" width="100.0" />
 
            <Hyperlink fx:id="link" textFill="WHITE">
 
              <font>
 
                <Font name="Georgia" size="18.0" />
 
              </font>
 
            </Hyperlink>
 
          </children>
 
        </StackPane>
 
      </children>     
 
</fx:root>
 
Create the Java-class loading the FXML-description of the component and determining its behavior:
 
package javafxogwebfxmlscenebuilder;
 
 
 
import java.io.IOException;
 
import javafx.animation.Animation;
 
import javafx.animation.KeyFrame;
 
import javafx.animation.KeyValue;
 
import javafx.animation.Timeline;
 
import javafx.event.EventHandler;
 
import javafx.fxml.FXML;
 
import javafx.fxml.FXMLLoader;
 
import javafx.scene.Group;
 
import javafx.scene.control.Hyperlink;
 
import javafx.scene.input.MouseEvent;
 
import javafx.scene.transform.Rotate;
 
import javafx.util.Duration;
 
 
 
public class MenuContainer extends Group{   
 
   
 
     @FXML private Hyperlink link;
 
      final Rotate rx = new Rotate(0,Rotate.X_AXIS);
 
      final Rotate ry = new Rotate(0,Rotate.Y_AXIS);
 
      final Rotate rz = new Rotate(0,Rotate.Z_AXIS);
 
   
 
    public MenuContainer(){
 
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("MenuContainer.fxml"));
 
        fxmlLoader.setRoot(this);
 
        fxmlLoader.setController(this);
 
 
 
        try {
 
            fxmlLoader.load();
 
        } catch (IOException exception) {
 
            throw new RuntimeException(exception);
 
        }
 
         final Group group=this;       
 
            rx.setAngle(15);
 
            ry.setAngle(15);
 
            rz.setAngle(0);
 
            this.getTransforms().addAll(rz, ry, rx);
 
 
 
        final   Timeline animation = new Timeline();
 
            animation.getKeyFrames().addAll(
 
                new KeyFrame(Duration.ZERO, new KeyValue(rx.angleProperty(), 15d)),                      
 
                new KeyFrame(new Duration(1000), new KeyValue(rx.angleProperty(), 375d))                      
 
                );
 
        animation.setCycleCount(Animation.INDEFINITE);
 
      
 
            group.setOnMouseDragged(new EventHandler<MouseEvent>() {
 
                @Override
 
             public void handle(MouseEvent event) {         
 
              animation.play();   
 
             double x= event.getSceneX();
 
             double y = event.getSceneY();        
 
             group.setLayoutX(x);
 
             group.setLayoutY(y);
 
             group.setOnMouseReleased(new EventHandler<MouseEvent>() {
 
                   @Override
 
                 public void handle(MouseEvent event) {
 
                      animation.stop();
 
                    rx.angleProperty().set(15);
 
                 }
 
            });
 
             } });
 
    }
 
   
 
public String getLabel(){
 
    return link.textProperty().get();   
 
}
 
public void setLabel(String value){
 
    link.textProperty().setValue(value);
 
}
 
}
 
Now created component can be used in the FXML-description of the application scene graph:
 
<?xml version="1.0" encoding="UTF-8"?>
 
 
 
<?import java.lang.*?>
 
<?import java.util.*?>
 
<?import javafx.scene.*?>
 
<?import javafx.scene.control.*?>
 
<?import javafx.scene.layout.*?>
 
<?import javafxogwebfxmlscenebuilder.*?>
 
 
 
<AnchorPane id="AnchorPane" prefHeight="600" prefWidth="800" xmlns:fx="http://javafx.com/fxml" >
 
    <children>
 
        <MenuContainer layoutX="50" layoutY="50" label="Home" />
 
        <MenuContainer layoutX="160" layoutY="50" label="Services" />
 
        <MenuContainer layoutX="270" layoutY="50" label="Blog" />
 
        <MenuContainer layoutX="380" layoutY="50" label="Contacts" />          
 
    </children>
 
</AnchorPane>
 
 
 
import javafx.application.Application;
 
import javafx.fxml.FXMLLoader;
 
import javafx.scene.Parent;
 
import javafx.scene.Scene;
 
import javafx.scene.paint.Color;
 
import javafx.stage.Stage;
 
 
 
public class JavaFXOGWebFXMLSceneBuilder extends Application {
 
   
 
    @Override
 
    public void start(Stage stage) throws Exception {
 
        Parent root = FXMLLoader.load(getClass().getResource("OGWeb.fxml"));
 
       
 
        Scene scene = new Scene(root);
 
        scene.setFill(Color.BLACK);
 
        stage.setScene(scene);
 
        stage.show();
 
    }
 
  
 
    public static void main(String[] args) {
 
        launch(args);
 
    }
 
}
 
 

Our services

Our developments are at the forefront of high technologies

We design and develop web sites

Individual site design
Creating dynamic sites
Website layout and programming

We develop information systems

Automation of business processes for small and medium business
Collection, storage and processing of data
Using cloud technologies

We create mobile apps

Integration with a Web site
Creating mobile versions of web sites
Using Augmented Reality and Computer Vision

About us

NOV Tech Solutions specializes in developing services for operational management of business, creating web and mobile applications on order

NOV Tech Solutions is a team of highly qualified professionals working for the result

We work quickly and efficiently, using the most modern technologies

We appreciate and take care of our customers, constantly improving the service and expanding the list of services

Our partners

Contacts