JavaFXComposerNewIn69Beta

Revision as of 13:27, 14 April 2010 by Mryzl (Talk | contribs)

Contents

JavaFX 1.3 SDK

NetBeans JavaFX support is bundled with JavaFX 1.3 SDK. The Composer tool now supports new SDK as well. This includes new controls and resources. See the palette screenshot for complete list.

file: javafx-composer-palette-13.png

New Controls:

  • PasswordBox
  • ScrollView
  • Separator
  • ListCell

New experimental Controls:

  • MenuBar
  • Menu
  • Popup Menu
  • Menu Button
  • Split Menu Button
  • Menu Item
  • Check Menu Item
  • Radio Menu Item
  • Custom Menu Item
  • Tool Bar
  • Tree View
  • Tree Cell

New Resources:

  • Keystroke
  • Image Cursor
  • Parallel Camera
  • Perspective Camera
  • List Cell Factory
  • Tree Cell Factory

Menus

There are various kinds of Menus available. You can D'n'D then on the design as any other component.

The Menus has a customizer for quick creation of a menu structure including a few predefined templates.

file: javafx-composer-menu-customizer.png

Note: the customizer always deletes previous Menu structure (including all assigned actions, ...) and replaces it with the new one.

file: javafx-composer-menu-navigator.png

Cell Factory

Starting with JavaFX 1.3 SDK, the List View components has a cellFactory property that allows you to specify a factory for list cells used for rendering list items.

To use that just select a List View and press "Add" button next to the "Cell Factory" property. This ways a List Cell Factory is created including a List Cell that contains a Label to render a list item exactly the same way as it does without a custom cell factory.

file: javafx-composer-list-view-cell-factory.png

file: javafx-composer-list-cell-factory-label.png

If you want to change just the rendered text of a list item then create a custom cell factory, select its Label and edit bind code of its "Text" property.

Tree View

Tree View is a new experimantal component in JavaFX 1.3 SDK. It can be used similarly as List View. There is a "Cell Factory" property. The "Root" property allows to specify the tree items. The "Root" property editor allows to specify a tree-like structure of items using an indented text.

file: javafx-composer-tree-view-root-editor.png

Properties Improvements

Customizable Components

A customizable component i.e. Menu, Data Source, Color, Templates, JavaFX Graphics are having a "Customize..." button at the top part of the Properties window.

file: javafx-composer-properties-customize-button.png

Resource Property

Pressing "Add" button next to the property in the Properties window will create the resource and assign it to the property. Now it even selects the newly created resource so the Navigator and Properties windows are updated for it.

Color Property

The color property editor is improved to allow specifying a color using:

  1. an existing Resource (i.e. Color, Linear Gradient, Radial Gradient)
  2. creating a new one
  3. choosing a predefined value i.e. BLACK or WHITE
  4. inline typing a specific value in one of the following formats:
    1. colorname e.g. BLUE
    2. webcoolor e.g. 0xFF0080 or #8000FF
    3. r,g,b,a as float e.g. 1.0, 0.0, 0.0, 1.0 (the alpha parameter is optional)
    4. r,g,b,a as hex-numbers e.g. 0x80, 0xFF, 0x00, 0.5 (the alpha is specified as an optional float parameter)

file: javafx-composer-properties-color-inline.png

Note that Color resource now has a customizer as well.

Data Sources Improvements

Customizers

The customizer for data sources has been improved to show raw data that are read before parsing.

You may expand/collapse all items in the tree-view of the parsed-data as well as find an item with a specific value and copy it.

The expressions of child Data Sources can be edited.

file: javafx-composer-http-data-source-customizer-2.png

Query Language

The expression for specifying a child Filter Data Source has XPath-like notation.

The following document contains the Query Language specification:

http://wiki.netbeans.org/JavaFXComposerQLSpec

The following docuemnt contains examples of the Query Language:

http://wiki.netbeans.org/JavaFXComposerQLExamples

HTTP Data Source

Allows you to pass a query parameters using requestParams property.

File Data Source

The FileDataSource has been split to 3 independent datasources:

  • ClassDataSource - resources on classpath
  • FileDataSource - files on local filesystems
  • StorageDataSource - resources within Java Storage API

Properties Parser

The new Properties parser allows to parse the input stream in a Java .properties file format.

Misc

A RecordSet.dump() method has been added for easier debugging.

Data Source vs. List View

The "DataSource.recordDisplayName" property has been removed. The property has been used as a workaround for missing list-cell rendering ability. This is no longer needed since List View has "Cell Factory" property now.

If you want to specify a custom rendering of a Record in a List View, then:

  • create a List View and bind its Items to your DataSource
  • Press "Add" button next to the "Cell Factory" property
  • Select the Label component within the created cellFactory and listCell component
  • Open details property editor of the "Text" property of the label
  • Change the bind code of the property to your custom display name

List View in Templates

Commonly a List View items represents a sequence of Records from a DataSource. A List View has selectedItem property which in this case reference the actually selected Record.

A "Index Buttons" template allows your move a selected index with in the List View so its selection can be manipulated by Buttons.

Newly all existing List View components are listed in a Desktop/Mobile Form template customizer as a Data Source. This way you may create a Form that shows details of an actually selected Record in a List View.

file: javafx-composer-form-customizer-list-view.png

JavaFX FXD/Z Graphics

The JavaFX Graphics files are recognized within your project files and automatically placed into "Current Project - JavaFX Graphics Files" category in the Palette. You may D'n'D it to a design. Then a customizer dialog appears.

file: javafx-composer-graphics-customizer.png

The customizer parses the D'n'D Graphics file for elements with IDs. These elements are listed. User can check/uncheck particular elements. Note that by default the customizer always keeps current content i.e. usually you have to press "Select As Detected" button so the items detected in the file are checked only. Pressing OK will create a structure of checked elements in Navigator.

file: javafx-composer-graphics-navigator.png

You may check the Graphics component or its children and change their properties in any state. This way you may control the visualization of Graphics in your design based on states.

Note if you invoke the customizer again, it tries to parse the Graphics file again. This is useful when receiving newer version of Graphics for a designer.

Improved Component Visualization

In case you D'n'D an existing component and try to move it into a Container e.g. HBox or Tile, then additionally guidelines are shown to visualize the place or position whether the component is going to be placed.

Similarly when D'n'D-ing a new component from Palette to a Container in a Design view.

file: javafx-composer-design-container-guidelines-vbox.png

file: javafx-composer-design-container-guidelines-tile.png

Context Help

There is a context help added to all windows, views and dialogs in the tool. Look for for the 'question-mark' icon file: javafx-composer-help-icon.png or "Help" button.

Code Generator

There is not runner script file (usually Main_run.fx class) anymore. Its content has been integrated into the .fx script file of your design. This file is now runnable.

The generated code style has been aligned with the JavaFX 1.3 SDK. This means the following changes:

All components are declared using a "def" statement.

The "init" constructor is placed within the guarded-block section. If you want to execute something during initialization, use "postinit" constructor to specify your code.

The JavaFX FXD Graphics and recognized components from a .fxd/z files are loaded from a FXDContent instance. The particular initialization of properties of the these components in a master state is done in "init" constructor.

LayoutInfo instances are created and assigned whenever a component is modified in any state. The LayoutInfo is declared as a separate "def" statement and is referenced directly in generated Timelines (representing state transitions).

Cell Factories are represented as functions. Note that components within a cell factory resource does not support states, therefore no state-related code is generated.

Custom code can be specified as a function that is called from the instance block or a KeyValue to resolve the new value. The function is placed outside of the guarded-block section and can be freely modified by an user.

Bind code can be specified as a "var" variable that is bound from the instance block. The variable is placed outside of the guarded-block section and can be freely modified by an user.

file: javafx-composer-code-generator-13.png

Analyzer

Some of the properties of controls in JavaFX e.g. Node.layoutInfo.width does not have a default value. If a specific value is assigned to them in one state while leaving it as a default in the second state, then the Composer tool cannot set the particular property in the second state. This specific conditions are found be a new analyzer which shows detail analyzes.

Samples

The following sample has been added:

  • Weather and Maps (aka Location Info) - demonstrates query language, binding and multiple Data Sources
  • NetBeans Logo - which uses NetBeans Logo created in Adobe Illustrator, converted to fxd using JavaFX Production Suite and then used in various animations
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