Java FX

Graphical Applications Java apps having graphical components Called GUI components GUI component An object representing a screen element Some are containers used to hold other components

Java FX Java FX New framework for developing GUI-based apps Replaces AWT and Swing Enables the development of RIA (Rich Internet Applications) Web apps with features similar to those of desktop apps Provides a multi-touch support Has built-in Animation, video and audio playback support

Anatomy of a JavaFX Application Main building blocks Stage equivalent to “JFrame” Scene equivalent of “JPanel” Nodes equivalent to “GUI components of Swing and AWT” Event handlers Timelines and transitions for animation purposes

Panes, UI controls, and Shapes

Layout Management An object Several predefined managers That determines the way components Are arranged in a container Several predefined managers Are provided by Java FX Layout managers are called Panes in Java-FX

Layout Panes

Flow Pane Example:

Grid Pane Example:

Border Pane Example:

HBox Example:

VBox Example:

Event Handling Interfaces GUI revolves around Components Events Handlers Event Represents some activity to which we may want to respond May be generated by a graphical component Event handler Defines what happens when an event occurs

A corresponding listener Events and Handlers Event Component A component object may generate an event Handler A corresponding listener object is designed to respond to the event When the event occurs, the component calls the appropriate method of the listener, passing an object that describes the event

Event handlers in Java FX A handler in JavaFX Must satisfy the following requirements It must implement the EventHandler<T extends Event> interface It must be registered with the event source

Events and Event sources

Events Details

Case Study1: Push Counter Application Displays a push button Increments a counter each time the button is pushed

Case Study2: Control Circle Application Uses two buttons to Control the size of a circle

Font Font is defined by Name, weight (bold), posture (italic/regular), and size

Color Opacity Defines the transparency of a color With the range 0.0 (completely transparent) to 1.0 (opaque)

Drawing Text Text is created using the Text class The latter is derived from the Shape super-class In the “ScatteredText” Eclipse project Text objects with random colors and positions are scattered about a Scene area

Image and ImageView The Image class The ImageView is a node Example: Represents a graphical image and Use to load an image from a specified URL The ImageView is a node For displaying an image Example:

Property binding A new concept introduced in JAVAFX, whereby A target object is bound to a source object Target object is called “binding property” and Implements “Property” interface The source object is called “Observable object” and Implements “ObservableValue” interface Binding properties are defined for primitive data types and String double/…/boolean => DoubleProperty/…/BooleanProperty String => StringProperty

Common Properties and Methods for Nodes Nodes share Style and rotate properties The style properties are similar to CSS The style is defined with a prefix –fx- Multiple style properties can be set together Example: : circle.setStyle(“-fx-stroke:black; -fx-fill: red;”); The rotate property Specifies an angle in degrees for rotating the node Example: button.setRotate(80);