1

<Insert Picture Here>

Visual Development of JavaFX Applications

David KasparSoftware Engineer

3

JavaOne and Oracle Develop Latin America 2010

December 7–9, 2010

4

JavaOne and Oracle Develop Beijing 2010

December 14–16, 2010

5

The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions.The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.

6

You will learn how to visually develop JavaFX applications including their dynamic behaviors, connecting to data on the Internet and embedding graphics produced by creative designers.

Goal

7

<Insert Picture Here>

Program Agenda

• Introduction• Concept of States• Concept of Data Sources• Embedding Graphics• Summary

8

Introduction

• JavaFX– Technology for creating rich-client applications

• JavaFX 1.3.1 SDK– Minimal set of tools for creating JavaFX apps

• NetBeans 6.9.1 for JavaFX– Support for full development cycle– Advanced editor features– Built-in JavaFX SDK– JavaFX Production Suite integration– JavaFX Composer

9

NetBeans JavaFX Composer

• Visual development tool for JavaFX applications• Integrated into NetBeans 6.9• Targeted for developers• Allows applications to be composed using

– Standard controls from the JavaFX 1.3.1 SDK– Imported graphics files from the JavaFX Production Suite– Templates, Custom components

• Dynamic UI design• Connecting to Data Sources• Profiles, Compliance checking

10

<Insert Picture Here>

DemoFirst Project

11

Concepts of States

• State – a state of an application (appearance, behavior, internal state) at a specific time

• Switching states – changing the UI and internal state of the application

• Designing an application for individual states• States

– One Master state – useful as a template– Multiple Derived states – derived from Master

• Support for simple animations– Setting interpolation and duration for transition into each state

12

<Insert Picture Here>

DemoState-based Hello World

13

Multiple State Variables

1. state variable controls the wizard page

The rest happens automatically

2. state variable controls side-bar visibility

14

Concept of Data Sources

• Diversity– Your data are at various locations– Your data requires various APIs to access them– Your data are accessible in various data-formats

• Data Sources– Gathers data and serves them in an unified structure– Data can be connected to visual and/or internal components

• Filtering– Extracting important data sub-sets

• Meta-data– Inspecting structure at run-time

15

Data Source API

• Provided by NetBeans JavaFX Composer• Structure Types

– DataSource – the source– RecordSet – a list of Record instances– Record – a table of key/value entries where the value is an

Object, String, Record, RecordSet, ...

• Data Sources– HTTP Data Source, JDBC Data Source– File, Classpath, Storage, File System

• Parsers– XML, JSON, Properties, Lines

16

<Insert Picture Here>

DemoYahoo! Search

17

Embedding Graphics

• Enhances appearance and usability of applications• Study revealed

– Creative designers use different tools than developers– Need for designer/developer collaboration

• JavaFX Production Suite– Export plug-ins for 3rd party graphic tools– Converters for 3rd party graphic formats– New FXD/FXZ graphic file formats– Import and manipulation tools for developers– Allows separation of graphics and code by UI contract

18

Designer/Developer Collaboration Workflow

Graphicprototype

Contentauthoring

Contentand logiciterations

Businesslogic

development

Finalapplication Deployment

19

Content Authoring

20

Content Export

21

Content Export Options

22

NetBeans Integration

• Support for FXD/FXZ files– Graphics viewer– Structure navigator– Text editor

• UI stub class generator– Represents the entire graphic as a visual node– Provides access to labeled elements as instance fields

• NetBeans JavaFX Composer integration– Embedding a graphics file into a design– Manipulation with selected labeled elements

23

<Insert Picture Here>

DemoJavaFX Production Suite Integration

24

Summary

• NetBeans JavaFX Composer tool provides– Rapid visual development of JavaFX applications– Static and dynamic UI design– Connectors to your data– Graphics integration from creative designers

• More information– http://netbeans.org/features/javafx/composer.html– http://wiki.netbeans.org/JavaFXComposer

• Download– http://www.netbeans.org/downloads/

25

26