1
<Insert Picture Here> Visual Development of JavaFX Applications David Kaspar Software Engineer
JavaOne and Oracle Develop Latin America 2010 December 7–9, 2010 3
JavaOne and Oracle Develop Beijing 2010 December 14–16, 2010 4
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. 5
Goal 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. 6
Program Agenda • Introduction <Insert Picture Here> • Concept of States • Concept of Data Sources • Embedding Graphics • Summary 7
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 8
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 9
<Insert Picture Here> Demo First Project 10
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 11
<Insert Picture Here> Demo State-based Hello World 12
Multiple State Variables 1. state variable controls the wizard page The rest happens automatically 2. state variable controls side-bar visibility 13
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 14
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 15
<Insert Picture Here> Demo Yahoo! Search 16
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 3 rd party graphic tools – Converters for 3 rd party graphic formats – New FXD/FXZ graphic file formats – Import and manipulation tools for developers – Allows separation of graphics and code by UI contract 17
Designer/Developer Collaboration Workflow Content authoring Content Graphic Final and logic Deployment prototype application iterations Business logic development 18
Content Authoring 19
Content Export 20
Content Export Options 21
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 22
<Insert Picture Here> Demo JavaFX Production Suite Integration 23
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/ 24
25
26
Recommend
More recommend