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.
• The AWT had a noble idea: provide a common programming
interface for the native buttons, sliders, text fields, and so on of
various operating systems.
• Butit 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
• Next came 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.
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 called the root node. In other words,
Parent or Root Node is a Node that can organize other nodes.
 If you don’t need automatic positioning of nodes, use a Pane as
the root.
 It is also a good idea to set a preferred size for the pane.
Otherwise, the pane is sized to exactly hold the shapes, without a
margin.

Pane root = new Pane(txt);

root.setPrefSize(PREFERRED_WIDTH, PREFERRED_HEIGHT);
• Then you construct a scene from the pane.
Scene scene = new Scene(root);
• Next, the scene must reside in a stage, a window on a desktop
Thing involved in creating JavaFX
GUI
• Simply, to write JavaFX GUI application, you do the following:
1) You need Nodes
2) You need a Root Node (or Parent Node)
3) You put your Nodes inside Parent Node
4) You need a Scene
5) You place your Root Node inside Scene
6) You need a Stage
7) You set Scene for your Stage
8) 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);