Guide To the Design Window
The design window shows the physical layout of the selected state. (Select the state in the States window.) If the selected state is not the master state, the design window has a red border. By default the design window displays the scene, which is the entire application. However, you can select a container or certain other elements to display in the design window.
The design window provides direct feedback based on the JavaFX run-time. The IDE immediately propagates a change in a component's property to the design view.
The following sections describe the design window in more detail.
Drag & Drop
You can use the mouse to drag & drop components and templates from the palette to the design area. You can drop any element from the palette to the design area, including data sources and templates. The drag & drop function also provides snapping support and visual feedback about the target position. Almost all drops are reflected in the design area, except several resources that are only visible in the Navigator.
Select a UI component or template either by clicking on it in the Design window or by clicking on its node in the Navigator window. If the component can be resized, the IDE surrounds the component with re-size handlers. The selected component's properties open in the Properties window.
Resize a selected UI component by left-clicking and dragging the handles of the component's resize handlers. There are eight resize handlers drawn as white rectangles within the blue border surrounding the selected component. Each of this handlers re-sizes the selected component in a specified direction.
To preserve the WYSIWYG behavior of the design area, layout constraints apply during resizing. Only handlers which fit layout constraints are visible. On non-resizable elements there are no handlers at all.
To help align components with each other, the design view provides guidelines and snapping. Guidelines are based on component boundaries. The IDE places secondary (green) guidelines depending on type of the source element. The secondary guidelines are added to the outer side of the primary (red) guidelines for non-layout components and on the inner side for layout containers. Active components such as buttons, labels or lists take precedence over containers.
By default, the design area displays the "scene," which is the view of the entire JavaFX application. However, if you add a container to the application, you can display only the container in the design view. Right-click the container in the scene or in the Navigator window and select "Design container." The container opens in the design view. Its name appears in the path at the top of the design view. Click on any parent component in the path to display that component in the design view. If you have a hierarchy of embedded containers, this clickable path can be useful.
The design view displays containers as visible with a scale of 1.0, to make design easier. The zero point of the container is visualized as in the infinite pane viewport.
You can drag and drop components into a container the same way you would for the application scene. However, moving and resizing components works differently in fixed layout and free layout containers.
Fixed Layout vs Free Layout Containers
Containers such as VBox and HBox have a fixed layout. In these containers, moving components only changes their order. The position of the components is fixed against the container's zero point. (You can still move components by changing their Translate X and Y properties, however.) Other containers have a free layout. You can move and resize components the same way in free layout containers as you do in the application scene.
Moving Components By Changing Layout Properties Or Transform Properties
By default, you move a component by changing the Layout X and Layout Y properties of the component. However, you can instead move a component by changing its Translate X and Y properties. This changes the position of a component inside of whichever container it is in but leaves the layout of the container unchanged.
Changing the transform properties is the only way to move components in a fixed layout container. It can also be useful with some animations.
To move a component by changing its transform properties instead of its layout properties, hold the CTRL key down while dragging the component with the mouse.
Devices & Profiles Support
You can preview the design on several devices whose profiles are defined in the JavaFX specification. For now, we provide predefined screen sizes which are visualized using a dashed black frame. This frame represents the viewport of the device. You can clip the current design to this frame. The design view provides direct feedback on how much of design will be accessible on the selected device.
Set up the devices and profiles on the design window toolbar.
The design window toolbar has the following controls for setting up devices and profiles:
- Synchronize the scene size with the selected device viewport size. Select this button, and any change to the screen size is automatically propagated to the scene size. See below for details.
- Hide/show invisible components in the Navigator window. The Navigator window also has this control. "Invisible" components refer to components that are not visible in the currently selected state.
Synchronization of Device View-port and Scene Size
This feature lets you automatically synchronize the selected device viewport size with the screen width and height. This feature is enabled by default. Synchronization prevents unexpected behavior on several devices. It is recommended to keep this feature on. If you need just to preview how your design would fit on different devices, disable this synchronization by pressing the button next to the devices list. Then you can change the device. Disabling synchronization only prevents the device frame size from changing when you change devices, but has no impact on current scene width and height settings. Warning: Pressing the synchronization button again will force synchronization of scene sizes with the currently selected device. Before you re-enable synchronization, ensure you have the correct device selected in device list.
"Desktop Infinite" Device Display
JavaFX Composer enables you to ignore device constraints by using the Desktop Infinite editing pane. This pane is intended to develop applications for desktops without exact frames, or with various frames. Note that when you set the device display to Desktop infinite and scene width and height to unspecified, the pack behavior of JavaFX Stage/Scene applies. The infinite scene visualizes the zero point by drawing dashed lines crossing at this point. Moved or resized components are snapped to the zero point.
Designing for infinity allows you to think freely without worrying about the device viewport. Changing from the Desktop Infinite device display to a predefined device preserves the design but brings back device constraints.