JavaFXComposerDesignArea

Revision as of 12:29, 14 December 2009 by Moonko (Talk | contribs)

Contents

Design Area Overview

Design area overview

The central area represent final design in selected state. It provides direct feedback based on JavaFX run-time. Each change in component property has direct impact to design. Following text contains more information about features available.

Selection

Selection types overview: Single, Multiple, Non-Resizing

There is allowed single and multiple selection. The selection is synchronized with navigator on left side. Selecting in design area is possible by clicking on desired object. To select multiple objects just hold control key and click on other object. Clicking on already selected object with control key down will remove object from selection. Selection should also be decorated by re-size handlers used to simplify re-sizing of selected object. For multiple selection are handlers drawn on encapsulation of selection. Then the re-size is applied on all object with the same effect.

Moving And Resizing

Both moving are resizing are constrained by type of selection and parent container. The containers are divided into two types. In following text we will use free and non-free containers defined as follows:

Free layout
is layout which allows free positioning of children elements. (e.g: Panel).
Non-free layout
is layout which is rigid and the position of children is based on its ordering. (e.g VBox, HBox).

Moving is allowed only if parent is free layout. For moving elements just use drag gesture of mouse. To draw object in non-free layout hold down the control key. This is not recommended!

Resizing of elements on screen is performed by drag mouse gesture over re-size handlers. There are eight re-size handlers drawn as white rectangles with blue borders along selection boundary. Each of this handler re-size selected element(s) in specified direction. To keep WYSIWYG behavior of design area the layout constraints apply also in resizing. As result there are visible only handlers which fit to this constraints. On non-re-sizable elements there are no handlers at all.

Guidelines

Design auto guidelines.

To help align elements with each other the design scene automatically provide guidelines and snapping. Guidelines are based on elements boundaries. There is semi-intelligent behavior which automatically place secondary (green) guideline depending on type of the source element. The secondary guidelines are added on outer side of primary (red) guidelines for non-layouting elements and on inner side for layout containers. Active elements such as button, label or list has precedence before containers.

Drag & Drop

Drag & Drop mouse gesture

JavaFX Composer allows drag & drop mouse gesture of elements from palette to design area. During this operation is target container highlighted with orange border. This border is slightly bigger then target container allowing drop to empty, zero size, containers easily. You can drop any element from palette to design including data sources and templates. All drops are reflected in design area excluding drop of data source which only result in new data source in navigator. In non-free layouts are elements re-ordered depending on drop location. Index of element in non-free layout is based on index of element over which was drop gesture performed and adjusted by position relative to center axis of this element corresponding to layout orientation.

Devices & Profiles Support

Devices & Profiles list

Design area also provide ability to preview design on several predefined devices with specific profiles as defined in JavaFX specification. For now, we provide predefined screen sizes which are visualized using dashed black frame. This frame represents view-port of device. There is feature to clip current design to this frame and provide direct feedback how much of design will be accessible on selected device.

Design area toolbar.

This toolbar provide direct access to specifying device & profile, synchronization of device view-port size and scene size, clipping to device view-port and switching of visibility of invisible components.

Synchronization of Device View-port and Scene Size

Device and Scene synchronization

This feature allows to automatically synchronize selected device view-port size and screen width and height properties. This feature is enabled by default. Enforcing this prevent unexpected behavior on several devices. It is recommended to keep this feature on. If you need just to preview how would your design fit on different devices, just disable this synchronization by pressing button next to devices list and change the device. This will only affect device frame size to change, but has no impact on current scene width and height settings. Warning: pressing button again will force synchronization of scene sizes with current selected device. To prevent this ensure you have correct device selected in device list.

Infinite Editing Pane

Infinite pane overview.

JavaFX Composer enables you to lift of device constraints and design using infinite editing pane. This pane is intended to develop application for desktop without exact frame, or with various frame. Note that setting device to Desktop infinite and scene width and height to unspecified the pack behavior of JavaFX Stage/Scene apply. Infinite scene visualize zero point by drawing dashed lines crossing at this point. Designing for infinity allows you to think freely without chains of device. Leaving infinity keeps design and brings back device constraints to preview in real world conditions.

Edited Scope

Edited scope of scene.

Sometimes the whole picture is too disturbing to edit effectively. In this case design area allows to edit just selected scope. Double click mouse gesture over any element and its parent container became edited scope. Only containers can be set as edited scope. There is also pop-up menu action to set selected container as edited scope. After switching edited scope the edited path near Design label is updated to reflect whole path from scene to this scope allowing to easily ascent to parent containers. The container set as edited root is visualized as visible with scale of 1.0 to makes life easier. The zero point of edited scope is visualized as in infinite pane.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo