The JavaFX 1.3 release is a significant update that contains:

• New and enhanced support for UI controls, CSS, and programmatic layout
• Performance improvements in the JavaFX Runtime
• A native JavaFX font family called Amble
• Support for the development of TV applications, including a new TV emulator
• Enhancements for mobile applications, including the Mobile Emulator for the Mac
• Support and improved editing features in NetBeans IDE 6.9
• New features and enhanced performance in JavaFX Production Suite

UI Controls and CSS

CSS is a way to add style to user interface controls. CSS gives you an easy and powerful way to customize the look of your controls, either individually or as an entire theme. JavaFX 1.3 significantly improves CSS and programmatic layout, making it faster, smaller, and much more powerful. The existing user interface controls (such as Button and ListView) were rewritten to take advantage of the new CSS support, resulting in simpler and more powerful UI controls.

This release also changes the semantics of programmatic layout Containers. In previous releases, there were two different layout paradigms: using layout containers and using absolute layout by manually positioning and binding the sizes of scenegraph nodes. This release combines the semantics for the two styles of layout. All Resizable nodes (including all Controls) are now automatically resized to their preferred size whether placed in a Group or a Container or any other kind of Parent node. The mechanism for defining whether a Node should be autosized or "managed" by its Parent is also consistent across both styles of layout by using the new managed variable on Node. Groups can be instructed not to automatically size their children by setting the autoSizeChildren variable on a Group.

JavaFX 1.3 also provides improvements to the UI controls. Several important new controls were added, such as ChoiceBox (a non editable ComboBox), ToolTip, ScrollView, Separator, and PasswordBox. The existing TextBox control can now accept multiple lines of input text. The ListView control was significantly improved by the addition of a comprehensive and powerful Cell API that enables easy customization of the ListView visuals. The ListView control can now be presented in horizontal or vertical modes.

This release also contains "preview" controls and APIs, enabling you to have early access to the APIs that are being developed. This lets you contribute to the development process by suggesting use cases or improvements to the APIs. There are a number of preview controls available in JavaFX 1.3; they include MenuBar, ToolBar, Menu, PopupMenu, TreeView, and many more. This release also includes a preview of a Grid layout container. The preview APIs are available in the SDK in the com.javafx.preview.control and com.javafx.preview.layout packages. The API for these preview controls and layouts may change from this release to the next and will change packages when they are no longer preview controls. Do not rely on the preview API for shipping applications.

New Controls

The ChoiceBox class is used to create a list of choices. The ChoiceBox class contains an items instance variable that defines the options or menu items of the choice box. By default, the choice box is collapsed, and the first item is selected, which is reflected by the selectedIndex and selectedItem instance variables.

Figure 1: Choice Box UI Control

The PasswordBox class implements a specialized text field that accepts a password. The characters typed by a user are hidden by displaying an echo string as the user enters a password. Its columns instance variable defines the horizontal width of the field, specified as the number of characters it is expected to display at one time. This control can be used with a label, or you can set its promptText instance variable to display a particular prompt string. The typed value can be obtained through the text instance variable. By default, the echo character is "*", however, the echoChar instance variable defines a different symbol, "#". The hideDelay instance variable sets a delay in milliseconds for a newly typed character to be displayed before the echoChar hides it. This delay provides the user with an opportunity to verify the typed characters before continuing.

Figure 2: Password Box UI Control

The ScrollView class is used to create a scrollable view of the UI controls. The ScrollView class enables the user to scroll the content by panning the viewport or by using scrollbars. Its node instance variable defines a node that is used as the content of the scroll view. By default, scrollbars are shown when a dimension of the contents exceeds the corresponding dimension of the scroll view. However, you can change this behavior. The ScrollView class provides the scrollbar policy, which determines when scrollbars are displayed: always, never, or only when required. Use the hbarPolicy and vbarPolicy instance variables to specify the scrollbar policy for the horizontal and vertical scrollbars respectively. The ScrollView class also enables developers to retrieve and set the current, minimum, and maximum values of the contents in both the horizontal and vertical directions.

Figure 3: Scroll View UI Control

The Separator class is used to create a horizontal or vertical separator line. By default, the separator is horizontal. However, you can change its orientation by using the vertical instance variable. You can set the separator's opacity to 0.0, creating an empty space to divide the buttons. A separator uses the full horizontal or vertical space allocated to it. Use the layoutInfo instance variable to set a particular width or height of the separator. The hpos instance variable defines the horizontal position of the separator within the allocated space for vertical separators. The vpos instance variable specifies the vertical position of the separator line within the allocated space for the horizontal separator.

Figure 4: Separator UI Control

The Tooltip class is used to display additional information about a particular UI control. The tooltip is shown when the mouse cursor hovers over the UI control. The tooltip is assigned to the UI control by using the tooltip instance variable, which all the UI controls inherit from the Control class. You can add text or graphical content to the tooltip, or you can add both types of content. A tooltip has two different states: activated and showing. When the tooltip is in the activated state, it means that the mouse moves over a control. When the tooltip is in the showing state, it means that the tooltip can be seen. A shown tooltip is also activated. The text instance variable defines the text caption for the control. Because the Tooltip class is an extension of the Labeled class, you can specify a text caption, an image, or both an image and text.

Figure 5:
Examples of Tooltip UI Controls With a Button, a Password, and a List

Improved Controls

The ListView class displays a horizontal or vertical list of items from which the user can select or with which the user can interact. A ListView is built from a sequence of items, that can be any type of domain data object. For example, it may be a sequence of Strings, Numbers, or Customers. It can even be a sequence of Nodes, although this is uncommon. You can populate the list through the items instance variable or generate the list by applying the cellFactory function. The layoutInfo instance variable can be applied to set the specific size of a ListView object. A ListView can also be oriented horizontally by setting the vertical instance variable to false.

Figure 6: Examples of the ListView UI Control
for a Vertical and Horizontal List

The TextBox class implements a UI control that displays and accepts the input of text. The TextBox class enables you to create a multiline text field or receive only one line of text input from a user. Along with another text input control, PasswordBox, this class extends the TextInputControl class, a superclass for all the text controls available through the JavaFX API. Typically, a TextBox is used in combination with a Label to indicate the type of content to be typed in the field. Its columns instance variable defines the horizontal size of the TextBox, specified as the number of characters to be displayed at one time. There is also a promptText instance variable that displays a prompt when no text is entered into a text box. You can use this feature to save UI space in your application.

Figure 7: TextBox UI Control

The Slider class is used to create a control that displays and interacts with a range of numeric values. The Slider control consists of a track and a draggable knob, and can also be represented visually by tick marks and tick labels that indicate numeric values of the range. Sliders are typically accompanied by labels to prompt the type of values to interact with. The min and max instance variables define the minimum and the maximum numeric values represented by the slider. The value instance variable defines the current value of the slider, which is always less than the max value and more than the min value. You can also use the value instance variable to set a particular value and define the position of the knob when the application starts. The value of a slider can be changed either by dragging the knob or by clicking the track. Dragging the knob changes the value variable gradually; clicking the track changes it discretely. The blockIncrement instance variable defines the amount of the value change if the track is clicked. This instance variable is used if the clickToPosition instance variable is set to false. Two Boolean variables, showTickMarks and showTickLabels, define the visual appearance of the slider. The labelFormatter is another instance variable of the Slider class; it represents a function to generate a label for the major ticks.

Figure 8: Slider UI Control

Preview Controls

The following are links to the API documentation for the JavaFX 1.3 preview controls:

com.javafx.preview.control

• CheckMenuItem
• CustomMenuItem
• Menu
• MenuBar
• MenuButton
• MenuItem
• MenuItemBase
• PopupMenu
• RadioMenuItem
• SplitMenuButton
• ToolBar
• TreeCell
• TreeItem
• TreeItemBase
• TreeView

com.javafx.preview.layout

• Grid
• GridLayout
• GridRow

Performance

The JavaFX 1.3 release includes the following performance improvements:

• Bind performance: 2–3 times faster
• Applet start-up time: 20% faster (with Java SE 6 Update 18+)
• Text animation: 5–10 times faster (frames per second)
• Highly complex animations: up to 10 times faster (frames per second)
• Memory usage: 20–33% reduction (real-world applications, with Java SE 6 Update 18+)
• UI Controls: 50% faster, 33–50% less memory (typical)

For more information about performance enhancements, see JavaFX 1.3 Released, Improves User Experiences.

Amble Font Family

The JavaFX 1.3 SDK and Runtime have several embedded fonts that are available to all JavaFX applications. As shown in the following figure, the Amble font family for JavaFX includes the following fonts:

Figure 9: Amble Font Family

The Amble font family is the default font family for the JavaFX UI controls. It helps to create a distinctive look within your JavaFX applications. The use of these fonts improves visual consistency, both within applications and across platforms.

Characteristics of the Amble Font Family

Amble was designed to be used as a screen font, and careful attention was paid to details that ensure its onscreen legibility. Considerations were made for multiple screen sizes, pixel bit depth, variable lighting situations, a range of viewing distances, and rendering quality, all of which affect usability and readability.

• Compact: Designed with a compact width for economy of screen space
• Readable: Created with a generous x-height and eased letter spacing to enhance readability
• Versatile: Designed with TrueType outlines for scaling to varying sizes
• Timeless: Created in a classic style for sophistication and longevity

Font Format Details

The embedded Amble fonts contain glyphs used for most Latin 1 and Eastern European languages. The following languages are supported:

• MS Windows 1252 Western
• MS Windows 1252 Central European
• MS Windows 1254 Turkish
• MS Windows 1257 Baltic
• ISO Latin 1 (Western)
• ISO Latin 2 (Central Europe)
• ISO Latin 3 (Tu, Malt, Gal, Esp)
• ISO Latin 4 (Baltic)
• ISO Latin 5 (Turkish)
• ISO Latin 6 (Scandinavian)
• ISO Latin 7 (Baltic 2)
• ISO Latin 9

TV Support

JavaFX 1.3 provides support to develop TV applications and has a new TV emulator. Support for JavaFX TV is based on the common profile. Most applications for the desktop can also be ported to the TV environment.

The new JavaFX TV emulator runs on the Windows operating system. Use the JavaFX TV emulator to show how JavaFX applications that are developed and compiled for TV will run in an emulated television environment.

For more information about compiling and running applications for TV, see the JavaFX TV Getting Started Guide. In addition, you can explore TV applications in the JavaFX Samples Gallery. All samples that compile and run on TV are marked with the TV Ready icon, shown at the left.

 

Mobile Enhancements

JavaFX 1.3 provides enhanced mobile support that includes new and improved UI controls and CSS skinning mechanism. JavaFX 1.3 also introduces the mobile emulator for the Mac, in addition to the Windows platform. The JavaFX 1.3 Mobile Emulator has a number of improvements, including better performance, improved text support, support for TrueType fonts and the Amble font family, and a customizable startup screen.

For more information about compiling and running mobile applications, see the README file in the top level of the JavaFX SDK directory. In addition, you can explore mobile applications in the JavaFX Samples Gallery. All samples that compile and run on mobile are marked with the Mobile Ready icon, shown at the left.

NetBeans IDE 6.9 for JavaFX 1.3

JavaFX 1.3 ships with NetBeans IDE 6.9, which includes the JavaFX Composer, a visual editor for form-like user interfaces. NetBeans IDE 6.9 also provides improved stability and performance, a rich set of UI components, and enhancements to the JavaFX editor. Enhancements to the JavaFX editor include better support for refactoring, improved debugging, and improved profiling. See the JavaFX downloads page for information about downloading and installing NetBeans IDE 6.9 for JavaFX 1.3.

Figure 10: JavaFX Composer

Production Suite

JavaFX 1.3 Production Suite includes a number of new features, with several enhancements to the FXD textual format, improvements in the conversion from Adobe Illustrator and Adobe Photoshop, and support for new features in the JavaFX platform, as described in the following sections. If you are a designer, you can learn about JavaFX Production Suite in Getting Started with JavaFX Production Suite. If you are a developer, you can find more information about using JavaFX graphics in your applications in JavaFX Production Suite Graphics for Developers.

Figure 11: JavaFX Production Suite Export From Adobe Photoshop

FXD Specification

There is a new specification for the FXD format. This specification helps you to create and edit FXD content descriptions of graphics.

FXD Schema

An FXD schema was created for this release. The schema validates FXD descriptions, which helps you edit FXD descriptions or create your own. See the FXD Schema and the section Basics of FXD Format in the FXD specification.

New FXD Constructs

As of JavaFX 1.3, the FXD format supports the following constructs:

• User-defined metadata
• References
• Extensions
• Libraries
• Animations
• More complex queries

For more information, see the FXD Specification.

FXD Support for New JavaFX APIs

FXD descriptions support the JavaFX 1.3 changes to the JavaFX APIs for UI controls, layouts, and 3D objects.

Support for the Amble Font Family

JavaFX 1.3 Production Suite installs the family of JavaFX Amble fonts to be compatible with the Amble fonts bundled with the JavaFX 1.3 SDK. Because Amble fonts are available to all JavaFX applications at runtime, they are not embedded in the JavaFX graphics (FXZ) file during export, even if the Embed Fonts option is selected.

Adobe Illustrator and Adobe Photoshop Plug-ins

• The plug-ins for Adobe Illustrator and Adobe Photoshop conversion to JavaFX format now use the new libraries, references, and extensions in the FXD descriptions.
  
  
• The preview screen is now written in the JavaFX Script programming language, and the preview UI was updated. Preview and Save options are now grouped apart from each other.
  
  
• The Adobe Photoshop plug-in has two additional save options:
  
  
  • Rasterize Vector Masks: Selecting this option creates a PNG file for each Photoshop vector mask. Clearing this option creates an FXD description of the vector mask.
  • Embed Fonts: To enable the Embed Fonts option in the UI, you must select the Rasterize Texts option during the export from Adobe Photoshop. Selecting this option results in the fonts being embedded in the FXZ archive.
  
  
• The Adobe Photoshop plug-in now supports conversion of the following gradient types:
  
  
  • Gradient overlays are exported as an effect, which means the Export Effects check box must be selected as a Save option.
  • Gradient fill layers are always exported as gradients, whether or not the Export Effects checkbox is selected.
  • Gradient layer blends and other types of gradients are exported in PNG files.
  
  
• The Adobe Illustrator plug-in has the following improvements:
  
  
  • There is improved export of texts and blendings.
  • Symbols and gradients are exported as references to a library, which saves space if the symbol or gradient is used more than once.
  
  
• Conversion performance is improved.

JavaFX API Changes for JavaFX Production Suite

• The new FXD-format constructs are supported.
• Background loading performance is improved.
• There is added query support for FXD content with a new select(String) function in the FXDContent class.