Styling the Flow Pane or Tile Pane

In addition to the basic set of properties for all layout panes, flow panes have properties for alignment, orientation, and spacing between the rows and columns. Tile panes have properties for alignment, orientation, spacing between the rows and columns, preferred number of rows and columns, and preferred width and height.

In the Layout Sample, either a flow pane or a tile pane can be used for the right region of Figure 3-1. The properties set in the style class are common to both types of panes, so the same style class is used in the sample. The.flow-tile style class shown in Example 3-12 sets the properties for padding and for spacing between the rows and columns.

 

Example 3-12.flow-tile Style Class   .flow-tile { -fx-padding: 10.0 3.0 5.0 0.0; -fx-hgap: 4; -fx-vgap: 4; }

The flow pane and tile pane also use the.pane style class for the background color. Example 3-13 shows how the styles are assigned to the flow pane and tile pane.

Example 3-13 Assigning Styles to the Flow Pane and Tile Pane   FlowPane flow = new FlowPane(); flow.getStyleClass().addAll("pane", "flow-tile");   TilePane tile = new TilePane(); tile.getStyleClass().addAll("pane", "flow-tile");

Styling the Anchor Pane

Anchor panes do not have any additional properties beyond the basic set of properties for all layout panes.

The anchor pane in the center region of Figure 3-1 contains a grid and an HBox pane, each of which has its own styling. The only styling applied to the anchor pane is the background color set by the.pane style class shown in Example 3-4.

Example 3-14 shows how the style is assigned to the anchor pane.

Example 3-14 Assigning a Style to the Anchor Pane   AnchorPane anchorpane = new AnchorPane(); anchorpane.getStyleClass().add("pane");

Using a Background Image

Images can be used as the background for a layout pane by setting the background image properties. You can specify the image, size, position, and repetition in a style class. Figure 3-3 shows another version of the Layout Sample user interface that uses background images for the VBox pane on the left and the HBox pane that contains the Save and Cancel buttons.

Figure 3-3 Styled with Images

Description of "Figure 3-3 Styled with Images"

Example 3-15 shows the style class definitions for adding the background images.

Example 3-15 Styles Using Background Images .vbox { -fx-background-image: url("graphics/arrow_t_up_right.png"); -fx-background-size: 96, 205; -fx-background-repeat: no-repeat; -fx-border-color: #2e8b57; -fx-border-width: 2px; -fx-padding: 10; -fx-spacing: 8; }   #hbox-custom { -fx-background-image: url("graphics/cloud.png"); -fx-background-size: 60,69; -fx-padding: 18 3 18 6; -fx-background-radius: 5.0; }   #button-custom { -fx-rotate: 45; -fx-text-alignment: center; }

Note the following:

• The images are located in the /graphics directory, which is at the same level as the class file for the application.
• The arrow image was smaller than desired and the cloud image was larger than desired, so the images were resized using the -fx-background-size property.
• To prevent the arrow from repeating in the background of the VBox pane, the -fx-background-repeat property is set to no-repeat.
• To angle the buttons, a new style class named #button-custom is defined, and the ID for the Save and Cancel buttons is set to button-custom.

Additional Resources

For more information on CSS and JavaFX, see the following documents:

• JavaFX CSS Reference Guide
• Skinning JavaFX Applications with CSS

Charts

<--Назад к Диаграммам

IntroductiontoJavaFXCharts

ThischapterprovidesanoverviewoftheJavaFXchartsavailableinthe javafx.scene.chart package. The types of charts in Figure 1-1 are currently supported: bar, area, line, bubble, scatter, and pie

Figure 1-1 Types of Charts

Description of "Figure 1-1 Types of Charts"

With the JavaFX SDK you can build such charts in your application by adding just a few lines of code.

Chart Data

When you define the data model for a particular chart, you must distinguish between two-axis charts and charts that do not use axes to display data.

The XYChart class, a super class for all two-axis charts, provides basic capabilities for building area, line, bar, scatter, and bubble charts. Use the XYChart.Data class to specify the data model for these types of charts. The xValue property defines the value of a chart element to be plotted on the X axis, and the yValue property defines the value for the Y axis. You can also set the extra value for each chart element. This value can be plotted in any way the chart needs, or it can be used to store additional information about the chart element. For example, it can be used to define a radius for bubble charts.

Unlike a two-axis chart, the pie chart does not require defining values for x and y axes. You use the PieChart.Data class to specify values for each slice in the pie.

Series of Data

For two-axis charts, you can define several series of data by using the XYChart.Series class. For example, the line chart shown in Figure 1-2 has three series of data to demonstrate the changes dynamic in three different stock portfolios.