4 Using the Menu Bar Commands
This chapter describes the commands that are available from the Scene Builder main Menu bar.
The Menu bar displays the menus of commands that you can perform with an FXML layout file. The following sections describe the list of subcommands available when you select a command from the Menu bar. Table 4-1 describes the subcommands for the File command.
Note:
The shortcut key shown in the tables below are for Windows platform. Replace the Ctrl key with the Cmd key to use the equivalent shortcut key for the Mac OS X platform.
Table 4-1 List of File Subcommands
| Command (Shortcut Key) | Description |
|---|---|
|
New (Ctrl+N) |
Create a new FXML file and opens it in a separate Scene Builder window. |
|
New from Template |
Create a new FXML layout using one of the available templates: Alert Dialog, Basic Application, Complex Application, Alert Dialog - CSS, Alert Dialog - Localized, Basic Application - CSS, Basic Application - Localized, Complex Application - CSS, and Complex Application - Localized layouts. |
|
Open (Ctrl+O) |
From an Open FXML dialog box, select the existing FXML file to open. |
|
Open Recent |
Select the file to open from a list of recently opened FXML files. |
|
Save (Ctrl+S) |
Save the changes made since the last Save action was performed. If it is a new FXML document, you are prompted to provide the new file name. If it is an existing FXML file, the current file name is retained. |
|
Save As (Ctrl+Shift+S) |
Save the current FXML file you are working on, with the option to save the changes to a different file. |
|
Revert to Saved |
Undo the changes made since the last Save action was performed. |
|
Reveal in Explorer (Windows), |
Open a native file browser, which displays the folder containing the current FXML file and gives you the opportunity to open the file. |
|
Import |
Import an existing image, FXML, or media file. The Import > FXML command inserts the content of the imported file into the current FXML file you are working on. An image or media file should be imported into Scene Builder from inside your project sources directory. If the image or media file you are importing is located somewhere other than your project sources directory, you need to move or copy the file. Scene Builder does not copy the imported image or media file for you. It makes a link to the imported media or image file using a path relative to the location of the FXML file currently being worked on. Consequently, if the relative location of the imported image or media file is different at runtime, then your FXML file may not load properly. You need to ensure all imported files are packaged properly by your IDE and that their relative location at runtime and edit time are the same. The simplest way to achieve this is to only import image or media files which are already located under your project sources directory and to instruct your IDE to include these files in the packaging, which is usually done by default. |
|
Include |
Insert FXML, Edit the Included File, or Reveal the Included File. Insert FXML command inserts an fx:include construct into your FXML document. Edit the Included File command allows you to edit any imported or included FXML file that is referenced by an fx:include statement defined for the selected element. When you edit an included FXML file, a new JavaFX Scene Builder window is opened. Changes you save in the included FXML file are reflected in the FXML layout file from which you opened the included FXML file. Reveal Included File command opens a native file browser to show the folder that contains the included file. |
|
Close Window (Ctrl+W) |
Close the current window. If you have any unsaved changes, you are prompted to save the file first before the window is closed. All other active windows remain open until they are closed or you exit the tool. |
|
Preferences (Ctrl+,) |
Set the preferred values to use for certain properties in the tool. You can change the default values for the root container's width and height, the image to use for the tool's background, the colors to use for the alignment guides and drop/parent rings, the theme to use for the Scene Builder tool, the default display mode to use for the Hierarchy and Library panels, the order in which the CSS Analyzer columns are displayed, and the number of files to list in the Open > Recent Items command. You can reset to the default values by clicking Reset to Built-in Default Values. |
|
Quit |
Exit the tool. All opened Scene Builder windows are closed. You are prompted to save any unsaved changes. |
Selecting the Edit command menu displays the subcommands that enable you to select the Undo or Redo command on the last action that you made in the current FXML layout. In addition, you can select the Cut, Copy, Paste, Paste Into, Duplicate, and Delete commands that you can apply to the selected elements in the Content or Hierarchy panel. The Cut, Copy, and Paste commands use the native editor and clipboard, unless a text field element is selected. This means that when you copy or cut an element and paste it on a text editor, what is actually copied and pasted is the FXML code that defines a Group element that wraps the selected element and all its children elements. If the focus is on a text field element then the select, copy, and paste commands are performed from and to the text field element. With the Paste Into command, you need to first select where you want to paste an item into before selecting the Paste Into command.
Select the Select All command to select all of the elements in your FXML layout, while the Select None command deselects any selected elements. The Select Parent command selects the parent container of the selected element. Select Next and Select Previous commands allow you to select next and previous element in the hierarchy, respectively.
Select the Trim Document to Selection command to delete all of the elements up to the selected row in the Hierarchy panel. When you select the Trim Document to Selection command and the selected element is for a container element, that selected container element becomes the new root node container of your FXML document.
Table 4-2 describes the subcommands available when you select the View command from the Menu bar.
Table 4-2 List of View Subcommands
| Command (Shortcut key) | Description |
|---|---|
|
Content (Ctrl+0) |
Place focus on the Content panel. |
|
Properties (Ctrl+1) |
Open the Properties section of the Inspector panel and place the current focus on it. |
|
Layout (Ctrl+2) |
Open the Layout section of the Inspector panel and place focus on it. |
|
Code (Ctrl+3) |
Open the Code section of the Inspector panel and place focus on it. |
|
Hide/Show Library (Ctrl+4) |
Hide or show the Library panel on the left side of the current window. If the Document panel is still visible, it automatically adjusts to occupy the entire left side of the window. If the Document panel is not visible, the Content panel adjusts to occupy the rest of the window's left side. |
|
Hide/Show Document (Ctrl+5) |
Hide or show the Document panel. If the Library panel is still visible, it is automatically adjusted to occupy the entire left side of the window. If the Library panel is not visible, the Content panel is automatically adjusted to occupy the rest of the window's left side. |
|
Show/Hide CSS Analyzer |
Show or hide the CSS Analyzer panel. The panel appears at the bottom of the window. |
|
Hide/Show Left Panel (Ctrl+7) |
Hide or show the panels on the left side of the window. Both the Library and Document panels are displayed with the Show Left command, regardless if the Document or Library panel was the only left panel active when the Hide Left Panel command was last executed. |
|
Hide/Show Right Panel (Ctrl+8) |
Hide or show the Inspector Panel on the right side of the window. |
|
Show/Hide Outlines (Ctrl+E) |
Show or hide the outline of each element in your entire layout, as shown in Figure 4-1. The outline shows the LayoutBounds property of each element. See the API documentation for more information about the |
|
Show/Hide Sample Data |
Show or hide demonstration data for those elements, such as a tree view, that have some sample data associated with them. The sample data is not saved in your FXML layout file. |
|
Disable/Enable Alignment Guides |
Disable or enable the alignment guidelines that help you align the elements with one another. |
|
Zoom |
Provides a drop-down list of percentage values into which you can zoom the current layout. |
|
Show Sample Controller Skeleton |
Open a window that displays sample skeleton code that you can use to create a controller class for the FXML layout you are building |
Select the Insert command from the Menu bar to enable you to select GUI elements, such as containers, controls, menu content, shapes, charts, custom components, 3D, and miscellaneous elements, that you can add to the current FXML layout. These are the same GUI elements available from the Library panel. If none of the existing GUI elements in the layout is selected, the insertion point for the new element is the center of the Content panel. If one of the elements is selected before selecting the Insert command, the new element being added is placed slightly off to the side, but over the selected element. The Insert submenu displays only the valid GUI controls that can be inserted to the selected element or container.
The subcommands displayed when you select Modify from the Menu bar are described in Table 4-3.
Table 4-3 List of Modify Subcommands
| Command (Shortcut Key) | Description |
|---|---|
|
Fit to Parent (Ctrl+K) |
Resize a selected element to fill the area that its parent container occupies. The element is also anchored to each of the sides of the parent. This feature is only available when the parent container is an AnchorPane element. |
|
Use Computed Sizes (Ctrl+Shift+K) |
Reset the selected element's layout property values to the default values. The USE_COMPUTED_SIZE value is used for the Min Width, Min Height, Pref Width, Pref Height, Max Width, or Max Height layout properties. (See the API documentation for the |
|
Grid Pane |
Display all the subcommands available for working with the selected Grid Pane component in your layout. You can delete, move, add, or resize rows or columns in the selected Grid Pane. |
|
Add Effect |
Apply effects, such as a drop shadow or a reflection, to the selected element or group of elements in the layout.The Effect editor allows you to set chain of effects to an object. |
|
Add Popup Control |
Add a Context Menu or a Tooltip element to the selected element in your layout. Note that the added Popup control is only selectable in the Hierarchy panel. |
|
Scene Size |
Set the screen size by selecting from the list of pre-defined dimensions. |
Use the Arrange menu, which is shown in Figure 4-2, to bring the selected element to the front, send it back, or move it forward or backward. Selecting the Wrap In subcommand places the selected elements into one of the available containers, such as an Anchor Pane, HBox, or a Grid Pane container. The Unwrap command removes the currently selected container, but leaves the GUI elements it contains untouched.
Figure 4-2 Menu Bar with Arrange Menu Opened
Description of "Figure 4-2 Menu Bar with Arrange Menu Opened"
The subcommands displayed when you select the Preview command from the Menu Bar are described in Table 4-4.
Table 4-4 List of Preview Subcommands
| Command (Shortcut Key) | Description |
|---|---|
|
Show Preview in Window (Ctrl+P) |
Display the window that lets you preview the user interface design rendered by your current FXML code when it is deployed. |
|
JavaFX Theme |
Set the JavaFX Theme to use on the FXML layout being previewed. The drop-down list shows the available selection. |
|
Scene Style Sheets |
Open a submenu that displays commands that enable you to add a new style sheet that you can apply to your current layout, remove a style sheet from the list of style sheets being used, or open an existing style sheet in a separate editor window specified for the style sheet file type. The layout is immediately updated. |
|
Internationalization |
Enables you to set, remove, or reveal a resource file in the native file browser. |
|
Preview Size |
Allows you to set the size of the Preview window to one of the predefined scene sizes as an alternative to the preferred size defined in the FXML document. |
Selecting the Window menu gives you a list of the names of the FXML file s that are currently opened in JavaFX Scene Builder windows. When you select one of the file names in the list, the name is marked with a check mark, and its corresponding Scene Builder window becomes active.
Selecting Help and then Scene Builder Help opens your default web browser and displays the web site that contains the available JavaFX Scene Builder documentation. Select the About Scene Builder command to open a window that displays the release information for the JavaFX Scene Builder you are using.
