JavaFXComposerDesignArea

(Difference between revisions)
(Drag & Drop)
(Design Area Overview)
Line 5: Line 5:
=== Selection ===
=== Selection ===
-
[[File:javafx-composer-design-singleSelection.png|Single selection]]
+
[[File:javafx-composer-design-singleSelection.png|frame|left|Single selection]]
-
[[File:javafx-composer-design-multiSelection.png|Multi selection]]
+
[[File:javafx-composer-design-multiSelection.png|frame|left|Multi selection]]
-
[[File:javafx-composer-design-nonResizableSelection.png|Non-resizable selection]]
+
[[File:javafx-composer-design-nonResizableSelection.png|frame|left|Non-resizable selection]]
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.
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.

Revision as of 11:04, 14 December 2009

Contents

Design Area Overview

Design area overview

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

Selection

Single selection
Multi selection
Non-resizable selection

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 visualization

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.

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