Page 1 of 1

Getting Started with JavaFX 2 Rate Topic: -----

#1 farrell2k  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 822
  • View blog
  • Posts: 2,529
  • Joined: 29-July 11

Posted 11 January 2013 - 12:24 PM

*
POPULAR

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.

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
exactly.

public void start(Stage stage) throws Exception {

}

public static void main(String[] args) {
    launch(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;
	
	@Override
	public void start(Stage stage) throws Exception {
		System.out.println(Thread.currentThread().getName());
		
		//The vertical box that will hold our navigation buttons.
		HBox hBox = new HBox(5);
		hBox.setAlignment(Pos.CENTER);
		
		//Our buttons for navigation.
		reloadButton = new Button("Reload");
		goButton = new Button("go");
		
		//Add listeners to the buttons.
		reloadButton.setOnAction(reload);
		goButton.setOnAction(go);
		
		//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();
		webEngine.setJavascriptEnabled(true);
		webEngine.load("http://www.yahoo.com");
		
		//our main app layout with 5 regions.
		BorderPane root = new BorderPane();
		root.setPrefSize(1024, 768);
				
		//Add every node to the BorderPane.
		root.setTop(hBox);
		root.setCenter(webView);
		
		//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");
		stage.setScene(scene);
		stage.show();
	}
	
	/////////////////////////////////////start event handlers for navigation///////////////////////////////
	private EventHandler<ActionEvent> reload = new EventHandler<ActionEvent>() {
		@Override
		public void handle(ActionEvent event) {
			webEngine.reload();
		
		}
	};
	
	private EventHandler<ActionEvent> go = new EventHandler<ActionEvent>() {
		@Override
		public void handle(ActionEvent event) {
			System.out.println(addressField.getText());
			webEngine.load("http://"+addressField.getText());
		}
	};
///////////////////////////////////////end event handlers for navigation//////////////////////////////////
	
	//main method is required for ides without javafxpackagertool support.
	public static void main(String[] args) {
		launch(args);
	}

}



Is This A Good Question/Topic? 7
  • +

Replies To: Getting Started with JavaFX 2

#2 darek9576  Icon User is offline

  • D.I.C Lover

Reputation: 198
  • View blog
  • Posts: 1,682
  • Joined: 13-March 10

Posted 12 January 2013 - 10:34 AM

Good stuff. Looking forward to some more :P.
Was This Post Helpful? 0
  • +
  • -

#3 Ghlavac  Icon User is offline

  • D.I.C Addict

Reputation: 84
  • View blog
  • Posts: 519
  • Joined: 14-January 09

Posted 12 January 2013 - 02:06 PM

Pft, You only recently jumped on and immediately it gets a featured article..


I feel something you severely missed out on is the FXML and CSS configuration, as these are a tremendous part of what makes FX2 so special.

For example, made with about 200 lines of FXML+CSS

Posted Image

Can't even remotely get near that with Swing.

This post has been edited by Ghlavac: 12 January 2013 - 02:20 PM

Was This Post Helpful? 1
  • +
  • -

#4 farrell2k  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 822
  • View blog
  • Posts: 2,529
  • Joined: 29-July 11

Posted 12 January 2013 - 04:10 PM

Ghlavac, FXML is certainly nice, and it would have been easier to do in FXML, but people coding in Swing are used to doing it in code, so it seemed a better fit. I think YOU should do a tutorial on FXML, as you have submitted zero tutorials in your time here. :)
Was This Post Helpful? 0
  • +
  • -

#5 darek9576  Icon User is offline

  • D.I.C Lover

Reputation: 198
  • View blog
  • Posts: 1,682
  • Joined: 13-March 10

Posted 12 January 2013 - 04:33 PM

As far as i am aware, FXML allows for a cleaner MVC separation.
Was This Post Helpful? 0
  • +
  • -

#6 Ghlavac  Icon User is offline

  • D.I.C Addict

Reputation: 84
  • View blog
  • Posts: 519
  • Joined: 14-January 09

Posted 12 January 2013 - 09:17 PM

View Postdarek9576, on 12 January 2013 - 05:33 PM, said:

As far as i am aware, FXML allows for a cleaner MVC separation.


Correct except replace 'allows' with 'forces'

And I'll consider that, but it is just.. so frigging extensive it's difficult to consider where to start.

This post has been edited by Ghlavac: 12 January 2013 - 09:17 PM

Was This Post Helpful? 0
  • +
  • -

#7 cfoley  Icon User is offline

  • Cabbage
  • member icon

Reputation: 1940
  • View blog
  • Posts: 4,028
  • Joined: 11-December 07

Posted 13 January 2013 - 05:00 AM

From my point of view -- as someone who has never looked into javaFX -- this tutorial is pitched perfectly. I can see immediate similarities with swing which demonstrates the barrier to entry is very low.

Maybe it would have been nice to finish by mentioning some of the cooler features but the value for me is that is has persuaded me too get started down the path of java FX.
Was This Post Helpful? 2
  • +
  • -

#8 Ryano121  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1362
  • View blog
  • Posts: 3,002
  • Joined: 30-January 11

Posted 13 January 2013 - 01:33 PM

View Postcfoley, on 13 January 2013 - 01:00 PM, said:

but the value for me is that is has persuaded me too get started down the path of java FX.


Same here. Looking at some of the examples in the JavaFX documentation, this actually does look really nice. It seems as though you can finally create some nice looking GUI's now with Java.

I'd encourage everyone to download the JavaFX samples from HERE (at the bottom of the page) and run the 'Ensemble' jar. Gives you a nice idea of the kind of things you can expect to see with this. Most of which looks very nice indeed.
Was This Post Helpful? 1
  • +
  • -

#9 Ghlavac  Icon User is offline

  • D.I.C Addict

Reputation: 84
  • View blog
  • Posts: 519
  • Joined: 14-January 09

Posted 13 January 2013 - 07:54 PM

Another clever thing that FX2 allows easily is something fun, but a little difficult to get working properly; Native Packaging via a built in tool to the JDK now, you can package for OSX, Windows, and Linux.
Was This Post Helpful? 0
  • +
  • -

#10 quim  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 18
  • View blog
  • Posts: 182
  • Joined: 11-December 05

Posted 13 January 2013 - 09:45 PM

View PostGhlavac, on 12 January 2013 - 11:17 PM, said:

View Postdarek9576, on 12 January 2013 - 05:33 PM, said:

As far as i am aware, FXML allows for a cleaner MVC separation.


Correct except replace 'allows' with 'forces'

And I'll consider that, but it is just.. so frigging extensive it's difficult to consider where to start.


If you donít like markup languages (I donít), you can use JavaFX Scene Builder to create the UI, and then you can call FXMLLoader.load(resource) to load the file.
   @Override
    public void start(Stage stage) throws Exception {
       Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
    
        stage.setTitle("FXML Welcome");
        stage.setScene(new Scene(root, 300, 275));
        stage.show();
    }

Was This Post Helpful? 0
  • +
  • -

#11 Ghlavac  Icon User is offline

  • D.I.C Addict

Reputation: 84
  • View blog
  • Posts: 519
  • Joined: 14-January 09

Posted 13 January 2013 - 10:23 PM

The scene builder is terrible, but I expected as much coming from oracle.
Was This Post Helpful? 0
  • +
  • -

#12 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8325
  • View blog
  • Posts: 31,857
  • Joined: 06-March 08

Posted 01 April 2013 - 07:02 PM

When do you think Eclipse and NetBeans will have a FX generator ?
Do we really have to learn all that ?

:withstupid:
Was This Post Helpful? 0
  • +
  • -

#13 Theomi  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 88
  • Joined: 17-January 10

Posted 26 June 2013 - 01:05 PM

That's the way UI development should have been from the start, with this markup approach. That's why i love programming for android. It's much cleaner and the UI is separated from logic.
I love it :clap:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1