JavaFX Scene Builder User Guide

5 Working with the Content Panel

This chapter describes the Content panel of the JavaFX Scene Builder.

The Content panel is the rectangular area that occupies the center of the JavaFX Scene Builder window. It is your design canvas, and it contains a view of what you are designing. By default, when you create a new FXML file, the Content panel contains an AnchorPane element as the root container. This container element will contain the elements of the layout that you build.

The Content panel enables you to directly manipulate the graphical elements used in your FXML layout. One of the ways to add a UI element to the Content panel is to drag the chosen UI control from the Library panel and place them in a chosen location on the Content panel. As you drag an object onto the Content panel, the golden stroke lines appears around the drop target area, as shown in Figure 5-1. An info tip is also displayed at the bottom right corner to identify the drop target area. Guidelines help you align the component being dropped in relation to other UI elements that are already present in your FXML layout:

Figure 5-1 Dropping a Component onto the Content Panel (Click image to enlarge.)

Description of "Figure 5-1 Dropping a Component onto the Content Panel (Click image to enlarge.)"

The selected elements have special handles that enable you to scale or resize the elements. You move the selected element by using your keyboard's arrow keys or by using the mouse to drag it to a different location. Right-clicking anywhere in the Content panel displays a contextual menu of commands that can be used on the currently selected element, as shown in Figure 5-2.

Figure 5-2 Contextual Menu in Content Panel

Description of "Figure 5-2 Contextual Menu in Content Panel"

Double-clicking on a UI element in the Content panel places that element in an inline editing mode. If a UI element with a Text property is selected, pressing Return also places the element in an inline editing mode.