PROGRAMMING 2CS 112LAB 9_1

TA: Nouf Al-HarbiTA: Hanan Al-mukhalfiTA: Sara Abu AlnaserTA: Nada Al-amoudi

2

LAB OBJECTIVES

GUI :•GUI Nodes

• Radio button• Checkbox

•Propereties• Background Color• Style

•Font class•HBox layout •Exercise.

1436 رجب 1

Lab10_1, Programming 2

3

1436 رجب 1

Lab10_1, Programming 2

LAB EXERCISE

4

Stage with size 600*250

5 radio buttons in Hbox Pane

2 check boxes in Hbox Pane

A TextField

A GridPane with1. Alignment: Pos.CENTER2. Horizontal gap: 103. Vertical gap: 104. Padding: Insets(5,5,5,5)

1436 رجب 1

Lab10_1, Programming 2

5

GUI Helper

1436 رجب 1

Lab10_1, Programming 2

6

THE FONT CLASSYou can create a font using the javafx.scene.text.Font class and set fonts for the components using the setFont method in the node class.

The constructor for Font is:

public Font(String name, double size);

You can :

choose a font name from SansSerif, Serif, …etc.

Specify a font size of any positive integer.

1436 رجب 1

Lab10_1, Programming 2

7

FONT CLASS

1436 رجب 1

Lab10_1, Programming 2

8

THE FONT CLASS ( CON’T)

EX: the following statements create two fonts and set one font to a button.

Font font1 = new Font("SansSerif", 16);

Font font2 = Font.font("Times New Roman", FontWeight.BOLD, FontPosture.ITALIC, 12);

Button btOK = new Button("OK");

btOK.setFont(font1);

1436 رجب 1

Lab10_1, Programming 2

9

THE FONT CLASS ( CON’T)

You can :

choose a font name from SansSerif, Serif, …etc.

Choose a FontWeight from FontWeight.BOLD, FontWeight.Extra_BOLD, FontWeight.LIGHT ….. Etc.Font.

Choose a FontPosture from FontPosture. ITALIC, FontPosture. REGULAR

Specify a font size of any positive integer.

1436 رجب 1

Lab10_1, Programming 2

10

LayoutPaneContinued( (

1436 رجب 1

Lab10_1, Programming 2

11

2 .HBOX LAYOUT

Hbox:

An HBox lays out its children in a single horizontal row.

1436 رجب 1

Lab10_1, Programming 2

12

GUI NodesContinued( (

1436 رجب 1

Lab10_1, Programming 2

13

RadioButton

1436 رجب 1

Lab10_1, Programming 2

14

CheckBox

1436 رجب 1

Lab10_1, Programming 2

15

TOGGLEGROUPTo group radio buttons, you need to create an instance of javafx.scene.control.ToggleGroup and use the setToggleGroup(group); method to add them to it, as follows:

RadioButton r1 = new RadioButton("Student");

RadioButton r2 = new RadioButton(“Teacher");

ToggleGroup group = new ToggleGroup();

r1.setToggleGroup(group);

r2.setToggleGroup(group);

1436 رجب 1

Lab10_1, Programming 2

11436 رجب 61

Lab10_1, Programming 2

11436 رجب 71

Lab10_1, Programming 2

11436 رجب 81

Lab10_1, Programming 2

11436 رجب 91

Lab10_1, Programming 2

21436 رجب 01

Lab10_1, Programming 2

21436 رجب 11

Lab10_1, Programming 2

21436 رجب 21

Lab10_1, Programming 2

21436 رجب 31

Lab10_1, Programming 2

21436 رجب 41

Lab10_1, Programming 2

21436 رجب 51

Lab10_1, Programming 2

26

THANK YOU

Any question

1436 رجب 1

Lab10_1, Programming 2