Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

Getting Started with JavaFX 2.

java javafx swing

  • Please log in to reply
No replies to this topic

#1 farrell2k


    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 169 posts

Posted 01 February 2013 - 03:10 PM

JavaFX is the future of UI development with Java. JavaFX is to Java what WPF is to .Net. In this tutorial, we'll build a simple web browser to 
demonstrate some of the bascis. You need Java 1.7 u6 or later.  My intention is to easy Swing developers into JavaFX, so advanced features like binding and FXML
will not be covered.
But first, a little explanation about how JavaFX works...
The top level container for JavaFX options is the Stage, like the stage of a theater. Every Stage contains exactly one Scene. Every Scene 
contains a root Node. A Node is simply a UI widget. Like Swing, most Nodes (UI widgets) can contain other Nodes. Layout Nodes, known as layout 
Panes are Nodes specifically designed to hold other Nodes, referred to as children. There are a few types of layout panes: AnchorPane, 
BorderPane, FlowPane, GridPane, HBox, StackPane, TilePane, and VBox. If you know Swing, you can guess probably what these mean. We're going to 
be using BorderPane and HBox. 
BorderPane is similar to Swing's BorderLayout. The Pane is split into five regions (left, right, top, bottom, center), and each region can 
contain exactly one Node. Like BorderLayout, any amount of Nodes can be nested via other layout managers within any refgion of a BorderPane.
HBox is similar to Swing's BoxLayout in that nodes are laid out horizontally. 
Building JavaFX applications, as well as just about anything else in Java is easier with Netbeans, but because it is so popular let's use 
Eclipse. The first thing we need to do is create a JavaFX user library for eclipse. OPen Eclipse and create a new Java project. We can create 
and add our user library while we are creating our java project, but lets be difficult and do it later. When your Java projectis created, in 
Eclipse go Window -> Preferences, then move down to Java and expand it. Find build Path and expand that. You'll see "Classpath Variables" and 
"User LIbraries". Click User Libraries, then "New". Name your new Library "JavaFX", then clikc OK. You'll see your new JavaFX user library 
listed. Highlight is and click "Add external Jars". Browse to your Java/JDK directory or folder and in the "lib" directory, you want to add 
jfxrt.jar. Done.
Now we need to make sure we use the JavaFX library in our project. In the Eclipse Package explorer right click your project name and go to 
"properties". Click on "Java Build Path", then the "Libraries" tab. From there click "Add Library". In the next window click "User Library" -> 
Next. Select the JavaFX library and ok. Clic OK again and go back to your project.
All JavaFX application extends the Application class. The Application class handles the lifecycle of all JavaFX applications, such as starting 
the application and waiting for it to finish. Anyone who has experience with Android application development should be familiar with this.
The entry point for Java Applications is the start() method, not main(), although your JavaFX application can have a main() for compatibility 
reasons for IDEs that do not contain built-in JavaFX support, like Eclipse.
Let's get started. Expand your Java project and go to "src". W are going to create a new Java class. I named mine Main. Now that your Main 
class is created, the first thin we need to do is make sure our class extends Application.
public class Main extends Application {
Now we need to decide how we're going to build our simple web browser. What UI components will we need to construct it, and how will we lay them 
out? We're going to need a few buttons for natigation, a Textfield to input our address, and something that actually displays our web page. 
Luckily, JavaFX has a WebView component that allows us to display web pages, and we can also enable Javascript! We'll use a BorderPane and put 
our navigation controls in its top region and our webview for displaying pages in its center region. Because we can only put one Node in each 
regio of a BorderPane, we're also going to use a HBox to hold out buttons and web addres test field.
Let's start making our reference objects.
private Scene scene;
private BorderPane root;
private Button reloadButton, goButton;
private TextField addressField;
private WebView webView;
private WebEngine webEngine;
We have Our Scene object which will be displayed by our Stage. Remember, our Scene is where all the action happens. Our BorderPane will be the 
root Node of our scene, which will contain all other nodes (buttons, textfields, web views, etc). We'll use out TextField to enter our web 
sddress, our WebView will display our pages , and our Buttons will be used for navigation. WebEngine is the backend of a webView. It's not a 
UI component on screen. It's created and used by the WebView to handle all of the logic for loading pages, navigating, interpreting Javasscript, 
etc. We do interact with the WebEngine, but it's just not visible on screen.
The main entry point for JavaFX applications is is start(). In IDEs with JavaFX built in support, like Netbeans, the JavaFX runtime calls start 
and creates our Stage. Other IDEs need a main(), which just calls start through launch, anyway. - Side note: I have to look into why this is 
public void start(Stage stage) throws Exception {
public static void main(String[] args) {
Now, lets instantiate all of our objects and put everything together. 
Here is all the commented code for our web browser. anything not commented should be self-explanatory.
public class Main extends Application {
    private Scene scene;
    private BorderPane root;
    private Button reloadButton, goButton;
    private TextField addressField;
    private WebView webView;
    private WebEngine webEngine;
    public void start(Stage stage) throws Exception {
        //The vertical box that will hold our navigation buttons.
        HBox hBox = new HBox(5);
        //Our buttons for navigation.
        reloadButton = new Button("Reload");
        goButton = new Button("go");
        //Add listeners to the buttons.
        //The TextField for entering web addresses.
        addressField = new TextField("Enter Web address here...");
        addressField.setPrefColumnCount(50); //make the field at least 50 columns wide.
        //Add all out navigation nodes to the vbox.
        hBox.getChildren().addAll(reloadButton, goButton, addressField);
        //Our weiv that display ther page.
        webView = new WebView();
        //the engine that manages our pages.
        webEngine = webView.getEngine();
        //our main app layout with 5 regions.
        BorderPane root = new BorderPane();
        root.setPrefSize(1024, 768);
        //Add every node to the BorderPane.
        //Our scene is where all the action in JavaFX happens.  A scene holds all Nodes, and its root node is our BorderPane.
        scene = new Scene(root);
        //the stage manages the scene.
        stage.setTitle("JavaFX Web Browser");
    /////////////////////////////////////start event handlers for navigation///////////////////////////////
    private EventHandler<ActionEvent> reload = new EventHandler<ActionEvent>() {
        public void handle(ActionEvent event) {
    private EventHandler<ActionEvent> go = new EventHandler<ActionEvent>() {
        public void handle(ActionEvent event) {
///////////////////////////////////////end event handlers for navigation//////////////////////////////////
    //main method is required for ides without javafxpackagertool support.
    public static void main(String[] args) {

  • 2

Averageloser.com - I used to be a programmer like you, then I took a -> in the knee. 

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download