Java Programming Hello FX

Transcription

1 Java Programming Hello FX Alice E. Fischer Feb 16, 2015 Java Programming - Hello FX... 1/22

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

3 Example: Winter Introduction to fx Text and Fonts Color Applications, Stages, and Scenes start() Setting the Scene Java Programming - Hello FX... 3/22

4 Introduction to fx An fx Application is a GUI program that presents a window. To use the GUI system, derive a class from Application. Inside the application window is a Stage, on which you can display one Scene or another. You can put text, shapes, and controls on the stage. Fonts and colors can be created and used. Java Programming - Hello FX... 4/22

5 Application, Stage, and Scene Title bar Title Application Window Content S t a g e A Scene with two Panes Panes Controls Java Programming - Hello FX... 5/22

6 Java Packages and Classes we Need 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; Layouts allow you to arrange the display elements in Panes: import javafx.scene.layout.*; 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

7 An FX program is derived from Application It does not have a main function or a constructor. Instead, you override start(). An Application creates a window with a title bar. The part of the window below the title bar is called thestage. We create Scenes and put them on the stage. We create Panes and pack them into a Scene. The items we want to display are packed into the Panes. When all the parts are packed into a Scene, we put the Scene on the Stage: st.setscene(scene1). Then we make the window visible: st.show(). Java Programming - Hello FX... 7/22

8 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

9 Colors Colors are defined as class members. Color c1 = new Color(.3,.3,.8, 1 ); // Hyacinth The parameters to the Color constructor are the Red, Green, and Blue components of the color and the Opacity. All are double numbers between 0 and 1. Opacity = 1 means fully opaque. 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

10 Colors Colors r= 1 g= 0 b= 0 r= 1 g=.5 b= 0 r= 1 g=.5 b=.5 r= 0 g= 1 b= 0 r= 0 g= 1 b=.5 r=.5 g= 1 b=.5 r= 0 g= 0 b= 1 r=.5 g= 0 b= 1 r=.7 g=.7 b= 1 r=.3 g=.3 b=.8 r=.3 g=.8 b=.3 r=.8 g=.3 b=.3 r= 1 g= 1 b=.5 r= 1 g=.5 b= 1 r=.5 g= 1 b= 1 r= 1 g= 1 b= 1 r=.5 g=.5 b=.5 r= 0 g= 0 b= 0 Java Programming - Hello FX... 10/22

11 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. This line is set in Kokonor 12-point font. Java Programming - Hello FX... 11/22

12 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); FontWeight.BOLD, FontWeight.NORMAL, FontWeight.LIGHT gives boldface or ordinary non-boldface or light gray text. FontPosture.ITALIC FontPosture.REGULAR gives slanted code or code that stands straight up. Java Programming - Hello FX... 12/22

13 Fonts Messages are type Text A Text object has several properties: A message. A position, in xy coordinates. Position (0,0) is the upper left corner of the Stage. A Font. A Color. Some properties can be set by the constructor, some by later calls on set functions. Java Programming - Hello FX... 13/22

14 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

15 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

16 Fonts Application An FX program is created by extending Application. There is no main function. Instead, you override start( Stage st ) An Application creates a window with a title bar. The part of the window below the title bar is called the Stage. We create Scenes and put them on the stage. We create Panes and pack them into a Scene. The items we want to display are packed into the Panes. When all the parts are packed into a Scene, we put the Scene on the Stage: st.setscene(scene1). Then we make the window visible: st.show(). Java Programming - Hello FX... 16/22

17 Fonts The import commands. 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; Layouts allow you to arrange the display elements in Panes: import javafx.scene.layout.*; The paint package allows us to use colors: import javafx.scene.paint.*; The text package allows us to use fonts: import javafx.scene.text.*; Java Programming - Hello FX... 17/22

18 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

19 Circle Demo: Review This program uses the following familiar things: Application, Stage, Scene, Pane. settitle(), setscene(), and show() Color grayblue = new Color(.4,.4,.8, 1 ); Three predefined colors: Color.WHITE, Color.BLUE, and Color.BLACK Java Programming - Hello FX... 19/22

20 Circle Demo: New features This program uses the following new things: javafx.scene.shape.circle; Circle c1 = new Circle(100, 100, 50, grayblue) The first two parameters in the circle constructor are the x and y coordinates of the center of the circle. The third parameter is the radius and last is the color. 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

21 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. In this program, demo is a pane. 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() Then we add new parts to the end of the list: demo.getchildren().addall( c1, c2, c3, c4 ); The first things added can be covered up by things added later. The last thing shows. Java Programming - Hello FX... 21/22

22 Make the Stage Visible At this point, we have constructed all of the objects that will be in the scene. We create a new Scene with the desired dimensions. We set the Scene on the stage. Then we make it all visible. }... Scene sn = new Scene( demo, 200, 200 ); st.setscene(sn); st.show(); Java Programming - Hello FX... 22/22