Some controls were omitted in the main text, because we didn’t want the book to become too lengthy. They are not unimportant, though, so we present a short introduction to them here in the appendix.
The TreeView Control
A
TreeView is a control that displays hierarchical data in a tree-like structure, as shown in Figure
A-1. You can think of a
TreeView
as displaying a tree upside down—the root of the tree being at the top. Each item in a
TreeView is an instance of the
TreeItem class.
TreeItems form parent-child relationships. In Figure
A-1, Departments, IS, and Doug Dyer are instances of a
TreeItem.
A TreeItem
is also referred to as a node. The TreeItem class does not inherit from the Node class. Therefore, a TreeItem is not a JavaFX Node, and it cannot be added to a scene graph.
A TreeItem is categorized as a branch or leaf node. If a TreeItem contains other instances of TreeItem, which are called its children, it is called a branch node. Otherwise, it is called a leaf node. In Figure A-1, Departments, IS, and Claims are examples of branch nodes, whereas Doug Dyer and Lael Boyd are examples of leaf nodes. Notice that leaf nodes are those that occur at the tips of the tree hierarchy. A leaf node has a parent but no children. A branch node has a parent as well as children, except a special branch node, which is called the root node. The root node has no parent, but children only, and it is the first node in the TreeView. Departments is the root node in Figure A-1.
A branch node can be in an expanded or collapsed state. In Figure A-1, the Departments, IS, and Claims nodes are in the expanded state, whereas the Underwriting node is in the collapsed state. A triangle, which is called a disclosure node, is used to show the expanded and collapsed state of a branch node.
A TreeItem serves
as the data model in a TreeView. Each TreeItem uses an instance of the TreeCell class to render its value. A TreeCell in a TreeView can be customized using a cell factory. By default, a TreeCell is not editable.
TreeView is a virtualized control. It creates only as many instances of TreeCell as needed to display the items for its current height. Cells are recycled as you scroll through items. Virtualization makes it possible to use TreeView for viewing very large number of items without using a large amount of memory. Note, however, that loading TreeItems always takes memory. Virtualization helps only in viewing the items by recycling the cells used in viewing them.
The first item in a TreeView that does not have a parent is known as the root node. By default, the root node is visible. Calling the setShowRoot(false) method of the TreeView hides the root node. Hiding the root node makes traversing the TreeView a little easier because the user has one less level of indentation to traverse. Hiding the root node shows its child nodes at the first level.
A TreeItem fires events as it is modified, for example, by adding or removing children or expanding or collapsing. An instance of the TreeModificationEvent class, which is a static inner class of the TreeItem class, represents all kinds of modification events.
Adding and removing TreeItems is as easy as adding or removing them in the children list of their parents. The root node does not have a parent. To delete the root node, you need to set the root property of the TreeView to null.
A TreeView uses a TreeCell to render a TreeItem. A TreeCell is an IndexedCell. You can visualize items in a TreeView from top to bottom arranged in rows. Each row has exactly one item. Each item is given a row index. The first item, which is the root item, has an index of zero. The row indices are given only to the visible items. TreeView contains a read-only expandedItemCount property that is the number of visible items. Use the getExpandedItemCount() method
to get the number of visible items. If a node above an item is expanded or collapsed, the index of the item changes to reflect new visible items. The index of a TreeCell in a TreeView and the row index of an item are the same. Use the getIndex() method of the TreeCell or the getRow(TreeItem<T> item) method of the TreeView to get the row index of an item. A TreeCell is a Labeled control. By default, it uses the following rules to render its TreeItem: If the value in the TreeItem is an instance of the Node class, the value is displayed using the graphic property of the cell. Otherwise, the toString() method
of the value is called, and the returned string is displayed using the text property of the cell.
A cell in a TreeView can be editable. An editable cell may switch between editing and nonediting mode. In editing mode, cell data can be modified by the user. For a cell to enter editing mode, the TreeView must be editable. TreeView has an editable property, which can be set to true using the setEditable(true) method. By default, TreeView is not editable. Creating a TreeView does not let you edit its cells. Cell-editing capability is provided through specialized implementations of the TreeCell class. The JavaFX library provides some of these implementations. Set the cell factory for a TreeView, which is a Callback object, to use one of the following implementations of the TreeCell to make cells in a TreeView editable: CheckBoxTreeCell, ChoiceBoxTreeCell, ComboBoxTreeCell, or TextFieldTreeCell.
TreeView lets you load all items at once or items on demand. TreeView automatically provides vertical and horizontal scrollbars when needed. TreeView uses a selection model to select one or multiple TreeItems. The selectionModel property represents the selection model. TreeView supports styling using CSS.
There are a number of examples available in the book’s download area. Watch out for classes TreeView*, TreeItem*, PathTreeItem*, and FileSystemBrowser in package com.jdojo.control.
The TreeTableView Control
The
TreeTableView
control combines the features of the
TableView and
TreeView controls. It displays a
TreeView inside a
TableView. A
TreeView is used to view hierarchical data; a
TableView is used to view tabular data. A
TreeTableView is used to view hierarchical data in a tabular form, as shown in Figure
A-2.
An instance of the TreeTableColumn class represents a column in a TreeTableView. The getColumns() method of the TreeTableView class returns an ObservableList of TreeTableColumns, which are the columns added to the TreeTableView. You need to add columns to this columns list.
TreeItems act as models in a TreeView. Each node in the TreeView derives its data from the corresponding TreeItem. Recall that you can visualize each node (or TreeItem) in a TreeView as a row with only one column. An ObservableList provides the model in a TableView. Each item in the observable list provides data for a row in the TableView. A TableView can have multiple columns. TreeTableView also uses models for its data. Because it is a combination of TreeView and TableView, it has to decide which type of model it uses. It uses the model based on TreeView. That is, each row in a TreeTableView is defined by a TreeItem in a TreeView. TreeTableView supports multiple columns. Data for columns in a row are derived from the TreeItem for that row.
An instance of the TreeTableView represents a TreeTableView control. The class takes a generic type argument, which is the type of the item contained in the TreeItems. Recall that TreeItems provide the model for a TreeTableView. The generic type of the controls and its TreeItems are the same.
The TreeTableView class provides two constructors. The default constructor creates a TreeTableView with no data. The control displays a placeholder, similar to the one shown by TableView. Like a TableView, TreeTableView contains a placeholder property, which is Node, and if you need to, you can supply your own placeholder. You can add columns and data to a TreeTableView. TreeTableView supports sorting the same way TableView supports sorting.
Showing and hiding columns in a TreeTableView work the same way they do for TableView. By default, all columns in a TreeTableView are visible. The TreeTableColumn class has a visible property to set the visibility of a column. If you turn off the visibility of a parent column, a column with nested columns, all its nested columns will be invisible.
TreeTableView lets you customize rendering of its cells, using different selection models for its cells and rows. It also allows editing data in its cells and adding and deleting rows. You can also style TreeTableView using CSS.
There are a number of examples available in the book’s download area. Watch out for classes TreeTable* in package com.jdojo.control.
The WebView Control
JavaFX
provides a web component that can be used as an embedded web browser in a JavaFX application. It is based on WebKit, which is an open source web browser engine. It supports
Viewing HTML5 content with CSS and JavaScript
Access to the DOM of the HTML content
Browsing history maintenance
Executing JavaScript code from JavaFX and vice versa
The component handles most of the work of web browsing, for example, rendering the HTML content, maintaining a history of the visited web pages, navigating to a URL when links are clicked, and displaying pop-up contents, among others. You would need to write code to handle other web-related features, for example, displaying an alert, prompt, or confirmation dialog using JavaScript. I will discuss all of the features of this component in this chapter.
The web browser component comprises a simple API consisting of a few classes in the
javafx.scene.web package:
WebView
WebEngine
WebHistory
WebHistory.Entry
WebEvent
PopupFeatures
PromptData
The WebView class inherits from the Parent class. It is a node, not a control. It is added to a scene graph for viewing web pages using local or remote URLs. A WebView displays one web page at a time, and it can be styled using a CSS.
A WebView uses a WebEngine for the core processing of its content. A WebEngine manages one web page at a time. The WebView handles user input events such as mouse and keyboard events and other tasks, for example, loading the web page content, applying a CSS, and creating a DOM, that are performed by the WebEngine. When using a WebView component, you will be working with its WebEngine most of the time.
A WebEngine maintains the browsing history of all visited web pages for a session in an instance of the WebHistory class. An instance of the inner class WebHistory.Entry represents an entry in the browsing history. An instance of the WebEvent class represents an event generated by a WebEngine while it processes a web page. Examples of such events are a resized event that occurs when JavaScript running on a web page resizes or moves the window and an alert event that occurs when JavaScript running on the web page calls the window.alert() function, among others.
When JavaScript running on a web page opens a pop-up window, an instance of the PopupFeatures class encapsulates the details of the pop-up window. The WebEngine lets you register a pop-up handler to handle the displaying of the pop-up window.
An instance of the
PromptData class encapsulates the details of a prompt window (a message and an initial value) displayed by JavaScript code using the
window.prompt() function
. The
WebEngine lets you register a prompt handler to handle the prompt. In the prompt handler, you can display a JavaFX dialog window to prompt the user for input. Figure
A-3 shows the architecture of the web browser component.
There are a number of examples available in the book’s download area. Watch out for classes in package com.jdojo.web.