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);
}
}
MultiQuote
.
| 