GraphicComponents

JavaFX Components

JavaFX

• _{Graphics packages}

• Combines old awt and swing libraries

• Can run in web browsers

Basics

• _{Class must extend Application class}

• Class must override and implement the start method

• _{All components attached to the main stage}

Example – SceneExample.java

• _{Example – SceneExample.java}

Application.launch(args)

• _{Launches stand-alone JavaFX applications} • Similar to main method

– _{String array as arguments}

– _{Automatically called by JVM}

• _{Do not need main method}

– _{When running from command line}

– _{JVM automatically calls launch for you} – _{Should always have main method anyway}

Start Method

• _{Will be called when the application is}

launched

• Has a stage as a parameter

– _{This is where all your components will eventually}

be attached to

JavaFX Setup

• _{Theater analogy}

• _{Stage = the window you will see}

– Everything attached to it

• _Scene

– Node parameter = what will be attached to the scene

• Usually a layout type to build more complex layouts from

– _{Width and height are optional and will be set by}

default

Scene Graph

• _{Hierarchical tree of nodes for all visual}

elements

• Applying transformations to a parent node can also apply to the child nodes

• https://

Node

• A node is any component or layout

• Nodes are attached to other nodes

• Nodes are attached to scenes

• _Examples

– _Buttons

– _Checkboxes – _Panels

• Which can contain more nodes

setScene

• _{Method of stage class}

• Sets the scene to be displayed

• Can use this to swap scenes when using multiple scenes (cool!)

show

• _{Method of stage class} • Displays the scene

• Don’t forget to call this once scene is setup

sizeToScene

• _{Method of Window class}

• Sizes the stage (window) to the size of the scene it contains

• _{Basically an auto-size feature}

setTitle

• _{Method of stage class}

• Sets the title of the window

– _{The text at the top bar of the window}

– _{mainFrame.setTitle("Title of Window");}

setTitle

Summary so far

• _{Stage = window}

– _http://

docs.oracle.com/javase/8/javafx/api/javafx/stage/St age.html

• _{Stage contains one scene at a time} • _{Scene = place to add nodes to}

– _http://

docs.oracle.com/javafx/2/api/javafx/scene/package -summary.html

• _{Node = any GUI component or panel}

– _http://

docs.oracle.com/javafx/2/api/javafx/scene/Node.ht ml

Components

• _{Image + ImageView} • _ScrollPane

Methods

Several Components Use The Same Methods

Button

• _{Button class for the buttons}

– _{Makes sense…}

• _{Typically constructed with the button text}

– _{Button button = new Button(“Button Text”);}

• _{Does nothing by default}

– _{Have implement button handlers separately}

• _http://

docs.oracle.com/javase/8/javafx/api/javafx/sce ne/control/Button.html

Example – ButtonExample.java

• ButtonExample.java

• Example corresponds to the following slides on buttons

setText

• _{Sets the text of a component}

– _{In this case a button}

• _{May need to call sizeToScene}

– _{The text changes the size of the button}

– _{The change in size might mess up formatting}

setText: Before Setting Text

setText: After Setting Text

setText: After sizeToScene

setTextFill

• _{Sets the paint of the button text} • Typically a color is used

– _{Color is a sub class of Paint}

Paint class

• Abstract class

Color class

• _{Provides several constants for colors to use} • Can make your own color object

– _{Red, Green, Blue, Opacity}

• Can play with brightness and saturation

• http://

docs.oracle.com/javafx/2/api/javafx/scene/pain t/Color.html

setTextFill

• _{button2.setTextFill(Color.BLUE);}

setTextFill

• _{button2.setTextFill(new Color(1, 0, 0, 1));}

– _{red, green, blue, opacity} – Range = 0-1

– _{Red = 1 = full red, no green or blue} – Opacity = 1 = can see it!

– Opacity = 0 = see through / transparent

.setPrefWidth

• _{Sets the width of the component}

• This width will usually be displayed

• May need to call sizeToScene

.setPrefWidth

• _{button3.setPrefWidth(200);}

.setPrefHeight

• _{Sets the height of the component}

• This height will usually be displayed

• May need to call sizeToScene

.setPrefHeight

• _{button3.setPrefHeight(200);}

setMaxWidth

• _{Sets the maximum width for the component}

– _{In this case the button}

• _{The component will never be resized larger}

than the maximum width

• Typically set all components’ max width to Double.MAX_VALUE

– _{This allows them to resize correctly}

.setMaxWidth

• _{No max width set for button 1}

.setMaxWidth

• _{button1.setMaxWidth(Double.MAX_VALUE)}

;

setMaxHeight

• _{Sets the maximum height for the component}

– _{In this case the button}

• _{The component will never be resized larger}

than the maximum height

• Typically set all components’ max height to Double.MAX_VALUE

– _{This allows them to resize correctly}

.setMaxHeight

• _{No max height set for button 6}

.setMaxHeight

• button6.setMaxHeight(Double.MAX_VALUE);

Sizes

• _{setMaxWidth = Component will never have width} larger than min width

• _{setMaxHeight = Component will never have} height larger than min height

• _{setPrefWidth = typical width of component} • _{setPrefHeight = typical height of component}

• _{setMinWidth = Component will never have width} smaller than min width

• _{setMinHeight = Component will never have} height smaller than min height

.setFont

• _{Sets the font of the button text}

– _{Type and size}

• _{Uses the Font class to choose fonts from}

• May have to call sizeToScene after changing font

.setFont

• _{button4.setFont(Font.font("Times New Roman", 20));}

.setFont

button4.setFont(Font.font

("Times New Roman", FontWeight.BOLD, 20));

.setFont

button4.setFont(Font.font

("Times New Roman", FontWeight.BOLD, FontPosture.ITALIC, 20));

.setBorder

• _{Sets the border of the component} • Need to create a Border

• Need to create a BorderStroke first

BorderStroke

• _{Type of border to display}

• Construct with a color, style, corner type, and stroke weight

• _http://

docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Borde rStroke.html

Border

• _{The border of the component}

• Constructed with a border stroke

• http://

docs.oracle.com/javase/8/javafx/api/javafx/sce ne/layout/Border.html

Border Example 1

BorderStroke borderStroke1 = new BorderStroke(Color.RED, BorderStrokeStyle.SOLID, CornerRadii.EMPTY,

BorderWidths.DEFAULT);

Border border1 = new Border(borderStroke1); button5.setBorder(border1);

mainFrame.sizeToScene();

Border Example 1

Border Example 2

BorderStroke borderStroke1 = new BorderStroke(Color.RED, BorderStrokeStyle.SOLID, CornerRadii.EMPTY, new

BorderWidths(5));

Border border1 = new Border(borderStroke1); button5.setBorder(border1);

mainFrame.sizeToScene();

Border Example 2

Border Example 3

BorderStroke borderStroke1 = new BorderStroke(Color.RED, BorderStrokeStyle.DASHED, CornerRadii.EMPTY, new

BorderWidths(5));

Border border1 = new Border(borderStroke1); button5.setBorder(border1);

mainFrame.sizeToScene();

Border Example 3

Alignment

• _{Can set position of the component if it is not set}

to fill it’s entire space

– Horizontal position

• Center

• _Left • _Right

– Vertical position

• Top

• Center

• _Bottom

Alignment

• _{Set preferred height for button3 to 200} • Set preferred width for button5 to 200

Alignment

• _{Default alignment for button6}

Alignment

• _{button6.setAlignment(Pos.CENTER);}

Alignment

• _{button6.setAlignment(Pos.TOP_LEFT);}

Alignment

• _{button6.setAlignment(Pos.BOTTOM_RIGHT)}

;

Alignment

• _{Pos enum in javafx.geometry class} • http://

docs.oracle.com/javafx/2/api/javafx/geometry/ Pos.html

Graphic

• _{Set the graphic of a button to an image} • Uses the Image and ImageView class

• Can also set the location of the graphic relative to the button text

Image + ImageView Class

• _{Load an image from a file}

• _Image

– _{Directly stores the image}

• _ImageView

– _{Can manipulate the image}

• Rotate

• _Scale • _Etc…

Image + ImageView Class

• Image – _http://

docs.oracle.com/javafx/2/api/javafx/scene/image/I mage.html

• ImageView – _http://

docs.oracle.com/javafx/2/api/javafx/scene/image/I mageView.html

Button Image

Image image = new Image("testImage.png"); ImageView imageView = new

ImageView(image);

button6.setPrefHeight(200); button6.setPrefWidth(200);

button6.setGraphic(imageView); mainFrame.sizeToScene();

Button Image

Button Image

button6.setContentDisplay(ContentDisplay.TOP);

Buttons

• _{Can do much more than mentioned} • I only showed the basics

• See javadocs for more stuff

– _{Don’t forget to look at all inherited methods}

– _{Most of the methods we use are not in the button}

class, they are inherited from other classes

• http://

docs.oracle.com/javase/8/javafx/api/javafx/sce ne/control/Button.html

TextField

• _{Standard text field you see everywhere} • Where the user types in things

• One line

– _{TextArea = multiline}

• Not scrollable by default

• http://

docs.oracle.com/javase/8/javafx/api/javafx/sce ne/control/TextField.html

Example – TextFieldExample.java

• _{TextFieldExample.java}

• Example corresponds to the following slides on text fields

TextField Image

setFont

• textField.setFont(Font.font("Arial Black", 20));

– TextField got bigger to fit the text

.setAlignment

• _{textField.setAlignment(Pos.CENTER);}

.setText and .getText

• _{textField.setText("LOWER CASE");}

• _{textField.setText(textField.getText().toLowerCase());}

.setVisible

• _{Can set components to invisible}

– _{They will not be seen}

• _{Useful when certain users should not see}

certain components

• Useful when certain options are not yet available and should be invisible

• Ex: textField.setVisible(false);

.setDisable

• _{Enables the component}

– _{Default = enabled}

• _Disabled

– _{TextField = cannot type into and text is grayed out}

• _{Useful for an output text field}

– _{Buttons = cannot click and grayed out} Ex: textField.setDisable(true);

TextArea

• _{For multi-row text} • Scrollable by default

• Not much different than a TextField

• http://

docs.oracle.com/javase/8/javafx/api/javafx/sce ne/control/TextArea.html

Example – TextAreaExample.java

• _{Example – TextAreaExample.java}

• Example corresponds to the following slides on text areas

TextArea

@Override

public void start(Stage mainFrame) {

TextArea textArea = new TextArea(); scene = new Scene(textArea);

mainFrame.setScene(scene); mainFrame.show();

}

TextArea

.setWrapText

• _{Sets whether the text will wrap or not} • textArea.setWrapText(false);

• textArea.setWrapText(true);

.setPrefRowCount

.setPrefColumnCount

• Basically setting the preferred side of the TextArea

• _{.setPrefRowCount}

– _{Number of rows to display}

• _{.setPrefColumnCount}

– _{Number of columns to display}

• _Example:

– _{textArea.setPrefRowCount(5);}

– _{textArea.setPrefColumnCount(20);}

Label

• _{Basically a disabled TextField}

• Used as labels that are not meant to be edited

• Can be images

• Uses most methods buttons do

• Label label = new Label("THIS IS A LABEL");

Example – LabelExample.java

• _{Example – LabelExample.java}

CheckBox

• _{Standard CheckBoxes you typically see}

• Can be set to selected by default

• http://

docs.oracle.com/javase/8/javafx/api/javafx/scen e/control/CheckBox.html

• CheckBox checkBox = new CheckBox("Name of Box");

Example – CheckBoxExample.java

• _{CheckBoxExample.java}

.setSelected

• _{checkBox.setSelected(true);}

Other Useful Methods

• _{.setFont = can set font of check box text}

• .isSelected = can set it to be selected or not

• .setDisable = can disable the CheckBox

• .setText = can set the text of the CheckBox

• .setGraphic = can set the image of the CheckBox

RadioButton

• _{Standard radio button you typically see} • _{Usually in groups of two or more}

– _{Usually mutually exclusive}

• Only one can be selected at a time

– _{By default they are not mutually exclusive} – _{Need to add them to a ToggleGroup}

• Mutually exclusive within the ToggleGroup

• _http://

docs.oracle.com/javase/8/javafx/api/javafx/scen e/control/RadioButton.html

Example – RadioButtonExample.java

• _{RadioButtonExample.java}

• Example corresponds to the following slides on radio buttons

RadioButton

@Override

public void start(Stage mainFrame) {

RadioButton radioButton1 = new RadioButton("B1"); RadioButton radioButton2 = new RadioButton("B2"); RadioButton radioButton3 = new RadioButton("B3");

VBox vbox = new VBox();

vbox.getChildren().add(radioButton1); vbox.getChildren().add(radioButton2); vbox.getChildren().add(radioButton3);

scene = new Scene(vbox); mainFrame.setScene(scene); mainFrame.show();

}

RadioButton

ToggleGroup

• Need RadioButton’s to function correctly – _{Only one can be selected at a time}

– _{Add all radio buttons to a toggle group} – http://

docs.oracle.com/javafx/2/api/javafx/scene/control/ ToggleGroup.html

ToggleGroup toggleGroup = new ToggleGroup(); radioButton1.setToggleGroup(toggleGroup);

radioButton2.setToggleGroup(toggleGroup);

RadioButton

ComboBox

• _{Standard drop down box} • No choices set by default

• Holds a list of items

– _{Does not have to be test}

• http://

docs.oracle.com/javafx/2/api/javafx/scene/cont rol/ComboBox.html

Example – ComboBoxExample.java

• _{ComboBoxExample.java}

• Example corresponds to the following slides on combo boxes

ComboBox Code

@Override

public void start(Stage mainFrame) {

ComboBox comboBox1 = new ComboBox();

comboBox1.getItems().addAll("Choice 1", "Choice 2", "Choice 3"); comboBox1.setMaxWidth(Double.MAX_VALUE);

comboBox1.setVisibleRowCount(10);

scene = new Scene(comboBox1); mainFrame.setScene(scene);

mainFrame.show(); }

ComboBox Image

.setVisibleRowCount(1);

• _{Sets the number of rows that can be seen at a}

time without scrolling

.getItems

• _{.getItems returns the ObservableList of items} • comboBox1.getItems().get(0)

– _{Returns the first item of the list of items}

• ObservableList – _{Has .add method} – _{Can add to the list}

comboBox2Items.add("Choice " + (i+1));

.setValue

• _{Sets the value of the ComboBox}

– _{The element to be displayed}

• _{comboBox1.setValue(comboBox1.getItems().get(0));}

ComboBox Code 2

@Override

public void start(Stage mainFrame) {

ComboBox comboBox2 = new ComboBox();

ObservableList<String> comboBox2Items = comboBox2.getItems(); comboBox2.setMaxWidth(Double.MAX_VALUE);

comboBox2.setVisibleRowCount(10);

for(int i=0; i<20; i++) {

comboBox2Items.add("Choice " + (i+1)); }

comboBox2.setValue(comboBox1.getItems().get(0)); scene = new Scene(comboBox2);

mainFrame.setScene(scene); mainFrame.show();

}

Another ComboBox Example

ScrollPane

• The typical scroll bar you see

• Can be both horizontal and vertical – _{Same scroll bar component does both}

• Can add any component to a ScrollPane to make it scrollable

– _{May be too large to display whole component} – _{Ex: A paint canvas}

• http://

docs.oracle.com/javase/8/javafx/api/javafx/sce

Example – ScrollPaneExample.java

• _{ScrollPaneExample.java}

• Example corresponds to the following slides on scroll panes

ScrollPane Code

@Override

public void start(Stage mainFrame) {

Image image = new Image("testImage2.png");

ImageView imageView = new ImageView(image);

ScrollPane scrollPane = new ScrollPane(); scrollPane.setContent(imageView);

scrollPane.setPrefSize(400, 400);

scene = new Scene(scrollPane); mainFrame.setScene(scene); mainFrame.show();

}

ScrollPane Images

ScrollBar Policies

• _{By default the scroll panes will be displayed}

when needed

– _{When needed = when the size of the object is}

larger than the preferred size of the ScrollPane

• _{Can set if/when to display ScrollPane}

– _{ALWAYS = will always display the scrollpane} – _{AS_NEEDED = will display when needed}

– _{NEVER = no scroll pane}

• _{Can be set for vertical and horizontal separately}

ScrollPane Policy

• _http://

docs.oracle.com/javase/8/javafx/api/javafx/scene/contr ol/ScrollPane.ScrollBarPolicy.html

• _{scrollPane.setHbarPolicy(ScrollBarPolicy.NEVER);}

• scrollPane.setHbarPolicy(ScrollBarPolicy.AS_NEEDED);

• scrollPane.setHbarPolicy(ScrollBarPolicy.ALWAYS);