Creating your first Javafx Program

The conventional way of starting is "Hello world!!!". Lets not do it and start off with something that just helps us going forward. 

I'll be using Eclipse for all my projects. Needless to mention, that the basics should be the same for any editor of your choice. Also, I'll be creating my projects using fxml (an xml representation of your UI). But this does not mean that you are limited to using the same. Javafx offers the very familiar swingy way of creating UI's as well. Why I prefer fxml is different story altogether. 

Create a JavaFX project in your eclipse. If you have downloaded e(fx)clipse you'll be able to view it in the new project wizard. You can refer to this post if you want to do the same. However, if not downloaded and you do not intend to as well then just create a java application and add jfxrt.jar in your project. You should find it in your jdk installation. if you don't want to include it in each and every time you create a project then you can default it in your eclipse.
  

Project Structure

My Project Structure looks something like this. 

Select Main Class

Go to src folder and right click to view the select wizard. Select Javafx Main Class as shown. Fill up a name and click finish. You should see a class created in the src folder. 

After you have finished with the wizard, you will see a class file with the same skeleton structure as shown on the left. If you don't have e(fx)clipse installed the simply create a class and add the code as shown on the left. 

Creating the Main class

---------------------------------------------------------------------------------

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class First extends Application {

@Override
public void start(Stage primaryStage) throws IOException {

//loading the fxml
Pane pane = FXMLLoader.load(getClass().getResource(""));

//creating and initializing the scene.
Scene scene = new Scene(pane);
primaryStage.setScene(scene);

//setting the height and width of stage.
primaryStage.setWidth(1024);
primaryStage.setHeight(768);

//setting the App title
primaryStage.setTitle("My first program");

//display the stage
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}

}

-----------------------------------------------------------------------

You should see an error when you try to run this. This is because you have not supplied the name of fxml when you are trying to load the fxml. Change the line to 

Pane pane = FXMLLoader.load(getClass().getResource("first.fxml"));

Now you should be creating the fxml file. 
Right click on the src folder and select the Javafx wizard in the same way you did above. Select New fxml document. Add a name to the fxml document you wish to create and supply the same name to the FXML loader in the main class. 

Creating the fxml file

---------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.BorderPane?>

<BorderPane xmlns:fx="http://javafx.com/fxml">

<!-- TODO Add Nodes -->

</BorderPane>

---------------------------------------------------------------------------------

Now your set to go. Run you main class and you should be able to see the stage. Your stage should be something like this

First Stage

That's it. This looks very simple as compared to a lot many programs that I have written for the same purpose.  My choice was fxml, but if you want you code your ui in the classes as well. Simple yet powerful and that is what Javafx2 is all about.