Scribd
Upload
10 views

Java FX Notes

Uploaded by

ranganadh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

Java FX Notes

Uploaded by

ranganadh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

INTRODUCTION TO JAVAFX

-----------------------
What is JavaFX?
JavaFX is the latest GUI (Graphical User Interface) environment that Java uses. Its
predecessors include AWT and Swing. Swing is a GUI toolkit that made creating GUI's
with Java much easier. It is still used heavily in today's world, but is no longer
being actively developed.

According to Oracle, JavaFX is \a set of graphics and media packages that enables
de-velopers to design, create, test, debug, and deploy rich client applications
that operate consistently across diverse platforms." In other words, JavaFX is the
latest way to create GUI applications with Java.

JavaFX was created and is maintained by Oracle, but you can use it with other
languages as well, like JRuby, Scala, Jython (a of Python), Groovy, and JavaScript!
In addition, you can use the web language CSS (Cascading Style Sheets) to alter the
appearance of your GUI application without changing your code.

The following code is a very simple JavaFX application.

Notice three main things. First, that the class uses \extends Application." What
this does is tell Java that you are going to use inheritance to make this
application use JavaFX.

Next it has a required method named \start(Stage primaryStage)." The \primaryStage"


is what is going to appear. Think of the \Stage" as a stage that actors stand on
for theater productions.

Finally, we tell the Stage to appear by \primaryStage.show();" This is what makes


the application visible.

import javafx.application.Application;
import javafx.stage.Stage;
public class Ch1_1 extends Application {
public void start(Stage primaryStage) {
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Let us make the application a littler more interesting. After all, an empty
application is very boring and useless.
The following code is slightly di#erent from the one above. First, it has a label.
The label is just text that will appear on the screen. Second it has a \StackPane"
layout - which means that the the text will appear in the middle of the
application.

The next line adds the label to the StackPane. The StackPane has to then be added
to a \Scene." A \Scene" is similar to scenes in theater where the scenes can be
changed, but the stage is always the same. For example, in theater, you might have
an opening scene with a blue backdrop and a couch. Then, when the scene changes the
backdrop becomes red and a chair replaces the couch. Regardless of how many scenes
are in a play at the theater, there is only one stage where the actors always
perform.

When the \Scene" is all con


gured then it is added to the Stage.

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
public class Ch1_2 extends Application {
public void start(Stage primaryStage) {
Label label1 = new Label("I love JavaFX!"); //show text
StackPane root = new StackPane(); //create a layout
root.getChildren().add(label1); //add the Label to the
layout
Scene scene = new Scene(root,100,100); //add the StackPane
to the scene and set's the width to be 100 pixels and
the height to be 100 pixels
primaryStage.setScene(scene); //set the Scene
primaryStage.show(); //show the Stage
}
public static void main(String[] args) {
launch(args);
}
}

Two Approaches

There are two main approaches to creating Java GUI's. You can either write all the
code by hand or you can use a drag-and-drop application.

Approach 1 - Hand-Written Code


The first approach is to create the GUI completely by hand-written code. This
approach is well worth your time. You will have complete control over every aspect
of the what happens. This is what I have shown above.

However, this approach requires months of digging into documentation and is not the
approach we will take with this book. This used to be the only way to create GUI's
in the long forgotten past.

Approach 2 - Drag And Drop


The second approach is to create the GUI using a drag-and-drop application, like
Scene Builder (http://gluonhq.com/open-source/scene-builder/).

The approach that is going to take is to design the GUI in Scene Builder and
write the code in JGrasp. The reason for this approach is that it allows the
beginning student to see exactly how the GUI is put together with no magic, but
makes it easier by having to only drag-and-drop the GUI components.

I presume at this point that you already have a very fundamental knowledge of how
Java works and that you have both Java and JGrasp installed. The next step is to
install Scene Builder. With a web browser, navigate to http://gluonhq.com/open-
source/scene-builder/. Scroll down to the bottom of the page and download the
executable jar

Layouts
-------
Layouts are how GUI's are put together. The layout is how GUI controls are placed
on the screen. A GUI control, also known as a GUI widget is an interactive element
in the GUI, like a button, scrollbar, or textfield.
There are many di#erent layouts. The following are some of the more common layouts:

BorderPane - A basic layout that gives you


ve areas: top, left, right, bottom,and center.

HBox - A basic layout that orders the GUI controls in a horizontal (thus the \H")
line.

VBox - A basic layout that orders the GUI controls in a vertical (thus the \H")
line.

GridPane - A basic layout that orders the GUI controls in a grid. For example, a
grid might be 2 row by 2 columns.

StackPane - A basic layout that put all the GUI controls in a stack, in other
words, right on top of each other.

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
public class HandWrittenCode extends Application {
public void start(Stage primaryStage) {
HBox hbox1 = new HBox();
Label label1 = new Label("Multipy by 5:"); //show text
TextField myTextField = new TextField();
hbox1.getChildren().addAll(label1,myTextField);
BorderPane borderPane1 = new BorderPane();
Button myButton = new Button("Add");
borderPane1.setTop(hbox1);
borderPane1.setCenter(myButton);
int width = 300;
int height = 300;
Scene scene = new Scene(borderPane1,width,height);
primaryStage.setScene(scene);
primaryStage.show(); //show the Stage
}
public static void main(String[] args){
launch(args);
}
}

You might also like