JavaFXComposerDesignArea

(Difference between revisions)
(Design Area Overview)
(Device & Profiles Support)
Line 34: Line 34:
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.
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.
-
=== Device & Profiles Support ===
+
=== Devices & Profiles Support ===
 +
[[File:javafx-composer-design-devicesList.png|frame|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.
 +
 
 +
[[File:javafx-composer-design-designToolBar.png|frame|none|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.
=== Infinite Editing Pane ===
=== Infinite Editing Pane ===
=== Edited Scope ===
=== Edited Scope ===

Revision as of 11:26, 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 run-time. 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 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.

Infinite Editing Pane

Edited Scope

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