JAVAFX

GUI Design & Event Handling

Outline
•Chapter 1: Introduction (4hr) •Chapter 5: Content Providers (4hr)
1. Introduction to Android 1. Introduction to content provider
2. Android application structure 2. Query provider
3. Android UI architecture [application context, intent, activity
lifecycle] •Chapter 6: Network Communication (4hr)
4. UI Components [Text control,] 1. Introduction to web service
2. HTTP Client
•Chapter 2: Notification, Menus and Dialogs (4hr) 3. XML and JSON
1. Intents with parameter
2. Notification with status bar and toast •Chapter 7: Service (4hr)
3. Localization 1. Service Lifecycle
4. Context/option menu 2. Foreground Service
5. Alert dialog
6. Dialog as activity •Chapter 8: Publishing (2hr)
1. How to prepare for publishing
•Chapter 3: Location and Map (4hr) 2. Publishing to android market
1. How to work with Google Map
2. How to work with GPS

•Chapter 4: Working with Data Storage (4hr)

1. Shared preference
2. Working with files
3. Working with SQL light
SHORT HISTORY OF JAVA
GUI PROGRAMMING
AWT, Swing, JavaFx
AWT – Abstract Windowing Toolkit
• Java1.0 included the AWT, a toolkit for graphical user
interfaces, that had the distinction of being crossplatform.
• TheAWT had a noble idea: provide a common programming
interface for the native buttons, sliders, text fields, and so
on of various operating systems.
• But it didn’t work very well. There were subtle differences
in the functionality of the user interface controls in each
operating system, and what should have been “write once,
run anywhere” turned into “write many times, debug
everywhere.”
Swing
• Nextcame Swing. The central idea behind Swing was not to
use the native controls, but to paint its own. That way, the
user interface would look and feel the same on every
platform. Or, if users preferred, they could ask for the
native look-and-feel of their platform, and the Swing
controls would be painted to match the native ones. Of
course, all that painting was slow, and users complained.
After a while, computers got faster, and users complained
that Swing was ugly—indeed, it had fallen behind the
native controls that had been spruced up with animations
and fancy effects.
• More ominously, Flash was increasingly used to create user
interfaces with even flashier effects that didn’t use the
native controls at all.
JavaFx
• In2007, Sun Microsystems introduced a new technology, called
JavaFX, as a competitor to Flash. It ran on the Java VM but had
its own programming language, called JavaFX Script. The
language was optimized for programming animations and fancy
effects. Programmers complained about the need to learn a
new language, and they stayed away in droves. In 2011, Oracle
released a new version, JavaFX 2.0, that had a Java API and no
longer needed a separate programming language.
• Asof Java 7 update 6, JavaFX 2.2 has been bundled with the
JDK and JRE. Since it wouldn’t be a true part of Java if it didn’t
have crazy jumps in version numbers, the version
accompanying Java 8 was called JavaFX 8. JavaFX versions 9
and 10 were bundled with Java 9 and 10.
AWT vs Swing
• There are two sets of Java APIs for graphics programming:
 AWT (Abstract Windowing Toolkit) and
 Swing

• AWT API was introduced in JDK 1.0. Most of the AWT

components have become obsolete and should be replaced
by newer Swing components.
• Swing API, a much more comprehensive set of graphics
libraries that enhances the AWT, was introduced as part of
Java Foundation Classes (JFC) after the release of JDK
JavaFx
• JavaFX is a software platform for creating and delivering
desktop applications, as well as rich internet applications
(RIAs) that can run across a wide variety Of devices.
• JavaFX is intended to replace Swing as the standard GUI
library for Java SE, but both will be included for the
foreseeable future.
• FXis just a name, which is normally related with sound or
visual effects in the javafx.
• Don't ever think that Tx' means a function. It can be
quoted as Java 'special-effects
AWT vs Swing vs JavaFx
Objectives
• To distinguish between JavaFX, • To create fonts using the Font
Swing, and AWT. class.
• To write a simple JavaFX program • To create images using the Image
and understand the relationship class and to create image views
among stages, scenes, and nodes using the ImageView class.
• To create user interfaces using • To layout nodes using pane,
panes, Ul controls, and shapes Stackpane, Flowpane, Gridpane,
Borderpane, HBox, and VBox.
• To use binding properties to • To display text using the Text class
synchronize property values.
and create shapes using Line,
• To use the common properties Circle, Rectangle, Ellipse, Arc,
style and rotate for nodes. Polygon, and Polyline.
• To create colors using the Color • TO develop the reusable GUI
class. components Clockpane for
displaying an analog lock.
Our First JavaFX Application
• Text txt = new Text(75, 100, “Not a Hello World”);
• Anything that you display in JavaFX is a Node.
 This includes both shapes and user interface controls.
 You collect nodes in a Parent (a Node that can organize other
nodes) called the root node.
 If you don’t need automatic positioning of nodes, use a Pane as Simply, to write JavaFx
the root.
 It is also a good idea to set a preferred size for the pane.
GUI:
Otherwise, the pane is sized to exactly hold the shapes, without a
- You need nodes
margin. - You need a root node
- You put your nodes
Pane root = new Pane(txt);
inside parent node
root.setPrefSize(PREFERRED_WIDTH, PREFERRED_HEIGHT); - You need a scene
• Then you construct a scene from the pane. - You place your root
Scene scene = new Scene(root); node inside scene
• Next, the scene must reside in a stage, a window on a desktop
- You need a stage
- You set scene for your
stage
- You show your stage
Example
• Every JavaFx GUI application inherits from “Application”
class.
public class NotHelloWorld extends Application
{
public void start(Stage stage)
{
...
stage.setScene(scene);
stage.setTitle("NotHelloWorld");
stage.show();
}
}
Overall structure of a stage
JavaFX classes
• The UML diagram below shows the relationships between
the JavaFX classes that we use in this program.
• The figure shows relationships between core JavaFx classes
package notHelloWorld;
NOTE:
import javafx.application.*;
As you see from this example, no main
import javafx.scene.*; method is required to launch a JavaFX
import javafx.scene.layout.*; application. The java program launcher knows
import javafx.scene.text.*; about JavaFX and calls its launch method.
import javafx.stage.*; In previous versions of JavaFX, you were
public class NotHelloWorld extends Application required to include a main method of the form
{
private static final int MESSAGE_X = 75;
private static final int MESSAGE_Y = 100; public class MyApp extends
private static final int PREFERRED_WIDTH = 300; Application
private static final int PREFERRED_HEIGHT = 200;
{
public void start(Stage stage) public static void main(String[]
{ args)
Text message = new Text(MESSAGE_X, {
MESSAGE_Y,
launch(args);
"Not a Hello World program");
}
Pane root = new Pane(message);
root.setPrefSize(PREFERRED_WIDTH, ...
PREFERRED_HEIGHT); }
Scene scene = new Scene(root);
stage.setScene(scene); You can still do this if your tool chain is
stage.setTitle("NotHelloWorld"); flustered by an absence of public static
stage.show(); void main.
}
}
Drawing Shapes
• Rectangle & Line
 Rectangle rect = new Rectangle(leftX, topY, width, height);
 Line line = new Line(startX, startY, endX , endY);
 Pane root = new Pane(rect, line);

• Circle
 Circle circle = new Circle(centerX, centerY, radius);
 root.getChildren().add(circle);
 OR
 Circle circle = new Circle();
 circle.setCenterX(centerX)
 circle.setCenterY(…);
 circle.setRadius(…);
 root.getChildren().add(circle);