CS 213 SOFTWARE METHODOLOGY
LILY CHANG ASSOCIATE TEACHING PROFESSOR DEPARTMENT OF COMPUTER SCIENCE RUTGERS UNIVERSITY – NEW BRUNSWICK FALL 2021
More on JavaFX UI Controls
Copyright By PowCoder代写 加微信 powcoder
JavaFX GUI Components Revisited
JavaFX UI Controls Revisited
JavaFX Scene
• The JavaFX scene graph is a hierarchical tree of nodes that represents all the visual elements of the application’s user interface
• A single element in a scene graph is called a node. Each node has an ID, style class, and bounding volume; except for the root node of a scene graph, each node in a scene graph has a single parent and zero or more children.
• It can also have the following:
• Effects,suchasblursandshadows
• Transforms
• Eventhandlers(suchasmouse,keyandinputmethod) • Anapplication-specificstate
The Node class
• Each item in the scene graph is called a Node, which is the base class for scene graph nodes.
• Branch nodes are of type Parent, whose concrete subclasses are Group, Region, and Control, or
subclasses thereof.
• Leaf nodes are classes such as Rectangle, Text, ImageView, MediaView, or other such leaf
classes which cannot have children. Only a single node within each scene graph tree will have no
parent, which is referred to as the “root” node.
• A node may occur at most once anywhere in the scene graph.
• The scene graph must not have cycles.
• If a program adds a child node to a Parent (including Group, Region, etc.) and that node is
already a child of a different Parent or the root of a Scene, the node is automatically (and
silently) removed from its former parent.
• It is possible to rearrange the structure of the scene graph, for example, to move a subtree from
one location in the scene graph to another.
The Node class
The Node class defines a traditional computer graphics “local” coordinate system in which the x axis increases to the right and the y axis increases downwards.
Any Node can have transformations applied to it. These include translation, rotation, scaling, or shearing.
• A translation transformation is one which shifts the origin of the node’s coordinate space along either the x or y axis; for example, applying a Translate with a shift of 10 along the x axis (0, 0) à (10, 0)
• A rotation transformation is one which rotates the coordinate space of the node about a specified “pivot” point, causing the node to appear rotated; for example, apply a Rotate with a 90 degree rotation (angle=90) and a pivot at the origin (pivotX=0, pivotY=0).
• A scaling transformation causes a node to either appear larger or smaller depending on the scaling factor; for example, apply
a Scale with scale factors (x=2.0, y=2.0) and a pivot at the origin (pivotX=0, pivotY=0), the node will grow double in size
• A shearing transformation, sometimes called a skew, effectively rotates one axis so that the x and y axes are no longer perpendicular.
JavaFX UI Control Classes Relevant to Project 4
• Class Image
• Class ImageView
• Enum SelectionMode
• Class ComboBox
• Class ListView
• Interface ObservableList
• The Image class represents graphical images and is used for loading images from a specified URL.
• file://
• http://
• Supported image formats are: • BMP, GIF, JPEG and PNG
• Images can be resized as they are loaded (for example to reduce the amount of memory consumed by the image). The application can specify the quality of filtering used when scaling, and whether to preserve the original image’s aspect ratio.
• All URLs supported by URL can be passed to the constructor. If the passed string is not a valid URL, but a path instead, the Image is searched on the classpath in that case.
• Use ImageView for displaying images loaded with this class. The same Image instance can be displayed by multiple ImageViews.
Class Image
• ImporttheJavaFXPackage–javafx.scene.image.Image;
• Thereare6constructors,belowisoneofthem
Image(String url) – Constructs an Image with content loaded from the specified url.
• Forexample,
//file in default package of the classpath, background loading is true
Image image1 = new Image(“/flower.png”, true); Image image2 = new Image(“file:flower.png”);
//file in project folder
Image image3 = new Image(file:///Users/MyName/Documents/eclipse/Project4/deluxe.jpeg);
Class ImageView
• The ImageView is a Node used for painting images loaded with Image class.
• This class allows resizing the displayed image (with or without preserving the original aspect ratio) and specifying a viewport into the source image for restricting the pixels displayed by this ImageView.
• Reference the Javadoc for the properties of this class by following the link below
https://openjfx.io/javadoc/17/javafx.graphic s/javafx/scene/image/ImageView.html
Class ImageView
• For example,
Image image = new Image(“flower.png”);
ImageView iv1 = new ImageView();
iv1.setImage(image); //display the image as is on the ImageView
You can call the setter methods to set the properties of an ImageView, or set the properties in the Scene Builder
Image Button
• In SceneBuilder
• Add a Button to the Scene Graph
• Add an ImageView as the child node of the Button • set the Button property “content display”
• Without SceneBuilder
Button imageButton = new Button(“order Deluxe”);
ImageView imview = new ImageView(“file:deluxe.bmp”); imageButton.setContentDisplay(ContentDisplay.TOP); imageButton.setGraphic(imview);
Enum SelectionMode
• An enumeration used to specify how many items may be selected in a MultipleSelectionModel (a class in JavaFX)
• For example, specifying single or multiple selection mode in a ComboBox or ListView
Class ComboBox
Class ComboBox
An implementation of the ComboBoxBase abstract class for the most common form of ComboBox, where a dropdown list is shown to users providing them with a choice that they may select from.
On top of ComboBoxBase, the ComboBox class introduces additional API. Most importantly, it adds an items property that works in much the same way as the ListView items property. In other words, it is the content of the items list that is displayed to users when they click on the ComboBox button.
Class ComboBox
• The value property is not constrained to items contained within the items list – it can be anything as long as it is a valid value of type T.
• By default, when the popup list is showing, the maximum number of rows visible is 10, but this can be changed by modifying the visibleRowCount property. If the number of items in the ComboBox is less than the value of visibleRowCount, then the items size will be used instead so that the dropdown list is not exceedingly long.
• It is possible to modify the selection model that is used, although this is likely to be rarely changed, because the ComboBox enforces the need for a SingleSelectionModel instance, and it is not likely that there is much need for alternate implementations.
Class ComboBox
ObservableList
FXCollections.observableArrayList(“Red”, ”Green”, “Blue”); ComboBox
• Another example
ComboBox
Color.RED, Color.GREEN, Color.BLUE);
Class ComboBox
String selected = combobox.getSelectionModel().getSelectedItem(); combobox.setValue(”rectangle”); //set the default selected item
Class ListView
Class ListView
• A ListView displays a horizontal or vertical list of items from which the user may select, or with which the user may interact.
• Populating a ListView
• The ObservableList is automatically observed by the ListView, such that any changes that occur inside the ObservableList will be automatically shown in the ListView itself.
• For example
ObservableList
“Julia”, “Ian”, “Sue”, “Matthew”, “Hannah”, “Stephan”, “Denise”); ListView
Class ListView
• ListViewSelection
• Totrackselectionandfocus,itisnecessarytobecomefamiliar
with the SelectionModel classes.
• AListViewhasatmostoneinstanceofthisclass
• ThedefaultSelectionModelusedwheninstantiatingaListView is an implementation of the MultipleSelectionModel abstract class; however, the selectionMode property, the default value is SelectionMode.SINGLE.
• ToenablemultipleselectioninadefaultListViewinstance,you can do the following:
listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
Class ListView
• Other useful methods of class ListView
listview.getSelectionModel().getSelectedItems();
//remove item from the listview
listview.getItems().remove(item);
//add item to the listview
listview.getItems().add(item);
Package javafx.collections
Class FXCollections
• Utility class that consists of static methods that are 1:1 copies of java.util.Collections methods.
• The wrapper methods (like synchronizedObservableList or emptyObservableList) has exactly the same functionality as the methods in Collections, with exception that they return ObservableList and are therefore suitable for methods that require ObservableList on input.
• The utility methods are here mainly for performance reasons. All methods are optimized in a way that they yield only limited number of notifications.
Package javafx.Collections
A LIST THAT ALLOWS LISTENERS TO TRACK CHANGES WHEN THEY OCCUR.
Interface ObservableList
Interface Initializable
Controller initialization interface.
NOTE, this interface has been superseded by automatic injection of location and resources properties into the controller.
FXMLLoader will now automatically call any suitably annotated no-arg initialize() method defined by the controller.
It is recommended that the injection approach be used whenever possible.
• Called to initialize a controller after its root element has been completely processed.
Interface Initializable
Initialize() method
public class Controller implements Initializable { …
//location – used to resolve relative paths for the root object, or null if the location is not known. //resources – used to localize the root object, or null if the root object was not localized.
public void initialize(URL location, ResourceBundle resource) {
//any statements included here will be executed first when the controller is first invoked
//or simply have an initialize() method in the controller; this method will be performed when the controller is invoked
In general, we would like to have one controller for each .fxml file (GUI layout file)
We need to share data among controllers in a software system
• Call the methods in another controller or share the object references between controllers
• For example, user login GUI controller passes the username and password to the other controller for the next step
• In Project 4, sharing the references to an order object and the instance of a list of orders.
When the FXLLoader loaded the .fxml, the associated controller is also instantiated
To get the references of the objects defined in the controller, you need to get the reference to the controller first
Once you get the reference to the controller, you can call the public methods provided in that controller
Sharing Data between Controllers
Sharing data between Controllers
//For example, in MainController, you load pizzaView.fxml
FXMLLoader loader = new FXMLLoader(getClass().getResource(”PizzaView.fxml”));
PizzaController pizzaView = loader.getController(); //get the reference of the controller defined in PizzaView …
pizzaView.setMainController(this); //pass the reference through a setter method in PizzaController
//In PizzaController
private MainController mainController;
public void setMainController(MainController controller) {
mainController = controller; //now you can reference any private data items through mainController
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com