Outline Winter Spring Circle Demo

Java Programming Hello FX

Alice E. Fischer

Feb 16, 2015

Java Programming - Hello FX. . . 1/22 Outline Winter Spring Circle Demo

Winter Colors Fonts

Spring

Circle Demo

Java Programming - Hello FX. . . 2/22 Outline Winter Spring Circle Demo

Example: Winter Introduction to fx

Text and Fonts Color Applications, Stages, and Scenes start() Setting the Scene

Java Programming - Hello FX. . . 3/22 Outline Winter Spring Circle Demo

Introduction to fx

I An fx Application is a GUI program that presents a window.

I To use the GUI system, derive a class from Application.

I Inside the application window is a Stage, on which you can display one Scene or another.

I You can put text, shapes, and controls on the stage.

I Fonts and colors can be created and used.

Java Programming - Hello FX. . . 4/22 Outline Winter Spring Circle Demo

Application, Stage, and Scene

Title bar Application Window Title

S t a Content g e

A Scene with two Panes Panes Controls

Java Programming - Hello FX. . . 5/22 Outline Winter Spring Circle Demo

Java Packages and Classes we Need

I These lines bring the names of the basic FX components into your namespace: import javafx.application.Application; import javafx.stage.Stage; import javafx.scene.Scene;

I Layouts allow you to arrange the display elements in Panes: import javafx.scene.layout.*;

I The paint and text packages allow us to use colors and fonts: import javafx.scene.paint.*; import javafx.scene.text.*;

Java Programming - Hello FX. . . 6/22 Outline Winter Spring Circle Demo

An FX program is derived from Application

I It does not have a main function or a constructor.

I Instead, you override start().

I An Application creates a window with a title bar.

I The part of the window below the title bar is called theStage.

I We create Scenes and put them on the stage.

I We create Panes and pack them into a Scene.

I The items we want to display are packed into the Panes.

I When all the parts are packed into a Scene, we put the Scene on the Stage: st.setScene(scene1) .

I Then we make the window visible: st.show() .

Java Programming - Hello FX. . . 7/22 Outline Winter Spring Circle Demo

FX programs are derived from Application

public class Winter extends Application { // Class data member declarations. Pane haiku = new Pane(); ... public void start( Stage st ){ ... } void setProps ( Text t, Font f, Color c ){ ... } }

Java Programming - Hello FX. . . 8/22 Outline Winter Spring Circle Demo

Colors Colors are defined as class members.

Color c1 = new Color( .3, .3, .8, 1 ); // Hyacinth

I The parameters to the Color constructor are the Red, Green, and Blue components of the color and the Opacity.

I All are double numbers between 0 and 1.

I Opacity = 1 means fully opaque.

I Opacity = .5 means half-transparent. That is, the color of the image underneath, on the desktop, will partly show through.

Java Programming - Hello FX. . . 9/22 Outline Winter Spring Circle Demo

Colors

Colors r= 1 r= 0 r= 0 g= 0 g= 1 g= 0 b= 0 b= 0 b= 1 r= 1 r= 0 r=.5 g=.5 g= 1 g= 0 b= 0 b=.5 b= 1 r= 1 r=.5 r=.7 g=.5 g= 1 g=.7 b=.5 b=.5 b= 1

r=.3 r= 1 r= 1 g=.3 g= 1 g= 1 b=.8 b=.5 b= 1 r=.3 r= 1 r=.5 g=.8 g=.5 g=.5 b=.3 b= 1 b=.5 r=.8 r=.5 r= 0 g=.3 g= 1 g= 0 b=.3 b= 1 b= 0

Java Programming - Hello FX. . . 10/22 Outline Winter Spring Circle Demo

Fonts

Fonts Proportional Fonts Serif fonts have hats and shoes that make the font more readable. This line is set in Times 14-point font. This line is set in Times 12-point font. This line is set in Times New Roman 12-point font. This line is set in Athelas 12-point font.

Sans-Serif fonts are simple and look modern This line is set in Arial 12-point font. This line is set in Helvetica 12-point font.

Fixed-Width Fonts Every letter in these fonts is the same width. Use for code and output. This line is set in Courier 12-point font. This line is set in Monoco 12-point font.

Special-purpose fonts This line is set in Handwriting-Dakota 12-point font. This line is set in Herculaneum 12-point font. Tis line is set in Kokonor 12-point font.

Java Programming - Hello FX. . . 11/22 Outline Winter Spring Circle Demo

Fonts Fonts are defined as class members.

Font f1 = Font.font ("Arial", FontWeight.BOLD, FontPosture.REGULAR, 24); Font f2 = Font.font ("Arial", FontWeight.NORMAL, FontPosture.ITALIC, 20);

I FontWeight.BOLD, FontWeight.NORMAL, FontWeight.LIGHT gives boldface or ordinary non-boldface or light gray text.

I FontPosture.ITALIC FontPosture.REGULAR gives slanted code or code that stands straight up.

Java Programming - Hello FX. . . 12/22 Outline Winter Spring Circle Demo

Fonts Messages are type Text

A Text object has several properties:

I A message.

I A position, in xy coordinates. Position (0,0) is the upper left corner of the Stage.

I A Font.

I A Color. Some properties can be set by the constructor, some by later calls on set functions.

Java Programming - Hello FX. . . 13/22 Outline Winter Spring Circle Demo

Fonts Things to be displayed can be defined as class members.

public class Winter extends Application { Text title = new Text(40, 40, "Winter"); Text l1 = new Text(50, 70, "Piercing cold, stiffness;"); Text l2 = new Text(50, 95, "Warmth of spring still far away,"); Text l3 = new Text(50, 120, "Many weeks to wait."); ... }

Java Programming - Hello FX. . . 14/22 Outline Winter Spring Circle Demo

Fonts A private utility function.

// Set the font and color of a line of text at the same time.

void setProps ( Text t, Font f, Color c ){ t.setFont(f); t.setFill(c); }

Java Programming - Hello FX. . . 15/22 Outline Winter Spring Circle Demo

Fonts Application An FX program is created by extending Application.

I There is no main function.

I Instead, you override start( Stage st )

I An Application creates a window with a title bar.

I The part of the window below the title bar is called the Stage.

I We create Scenes and put them on the stage.

I We create Panes and pack them into a Scene.

I The items we want to display are packed into the Panes.

I When all the parts are packed into a Scene, we put the Scene on the Stage: st.setScene(scene1).

I Then we make the window visible: st.show().

Java Programming - Hello FX. . . 16/22 Outline Winter Spring Circle Demo

Fonts The import commands.

I These lines bring the names of the basic FX components into your namespace: import javafx.application.Application; import javafx.stage.Stage; import javafx.scene.Scene;

I Layouts allow you to arrange the display elements in Panes: import javafx.scene.layout.*;

I The paint package allows us to use colors: import javafx.scene.paint.*;

I The text package allows us to use fonts: import javafx.scene.text.*;

Java Programming - Hello FX. . . 17/22 Outline Winter Spring Circle Demo

Spring

This demo program is very much like Winter.

The differences are that the code has been shortened by defining a more powerful helper function and it uses Color.GREEN instead of Color.BLUE

Java Programming - Hello FX. . . 18/22 Outline Winter Spring Circle Demo

Circle Demo: Review

This program uses the following familiar things:

I Application, Stage, Scene, Pane.

I setTitle(), setScene(), and show()

I Color grayBlue = new Color( .4, .4, .8, 1 );

I Three predefined colors: Color.WHITE, Color.BLUE, and Color.BLACK

Java Programming - Hello FX. . . 19/22 Outline Winter Spring Circle Demo

Circle Demo: New features

This program uses the following new things:

I javafx.scene.shape.Circle;

I Circle c1 = new Circle(100, 100, 50, grayBlue)

I The first two parameters in the circle constructor are the x and y coordinates of the center of the circle.

I The third parameter is the radius and last is the color.

I We set a black outline on one of the circles: c1.setStroke(Color.BLACK); The color of the shape and of its outline can be different.

Java Programming - Hello FX. . . 20/22 Outline Winter Spring Circle Demo

Placing the Parts of the Display

To see the display elements, every one must be put into a pane, and the pane into a scene, and the scene onto the stage.

I In this program, demo is a pane.

I To put the circles into demo, we first need to get the list (currently empty) of the pieces that have previously been put there: demo.getChildren()

I Then we add new parts to the end of the list: demo.getChildren().addAll( c1, c2, c3, c4 );

I The first things added can be covered up by things added later. The last thing shows.

Java Programming - Hello FX. . . 21/22 Outline Winter Spring Circle Demo

Make the Stage Visible

At this point, we have constructed all of the objects that will be in the scene.

I We create a new Scene with the desired dimensions.

I We set the Scene on the stage.

I Then we make it all visible.

... Scene sn = new Scene( demo, 200, 200 ); st.setScene(sn); st.show(); }

Java Programming - Hello FX. . . 22/22