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.