Transcript
Page 1: JavaFX for Business Application Developers

JavaFX for Business Application DevelopersMichael Heinrichs

Freitag, 8. Juni 2012

Page 5: JavaFX for Business Application Developers

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.

Freitag, 8. Juni 2012

Page 6: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 7: JavaFX for Business Application Developers

JavaFX is the evolution of the Java rich client platform, designed to provide a lightweight, hardware accelerated

UI platform that meets tomorrow’s needs.

Freitag, 8. Juni 2012

Page 8: JavaFX for Business Application Developers

JavaFX is Swing in cool!

Freitag, 8. Juni 2012

Page 9: JavaFX for Business Application Developers

• Examples

• Sample Application

• Process Overview

•Defining the View

•Hooking up Controllers

• Styling with CSS

Freitag, 8. Juni 2012

Page 10: JavaFX for Business Application Developers

Examples

Freitag, 8. Juni 2012

Page 11: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 12: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 13: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 14: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 15: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 16: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 17: JavaFX for Business Application Developers

Sample Application

Freitag, 8. Juni 2012

Page 18: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 19: JavaFX for Business Application Developers

Java EE

RESTful WS

JavaFX UI

Jersey

JavaDB

Freitag, 8. Juni 2012

Page 20: JavaFX for Business Application Developers

Process Overview

Freitag, 8. Juni 2012

Page 21: JavaFX for Business Application Developers

package com.oracle.conferenceplanner.controller;

import com.oracle.conferenceplanner.Env;import com.oracle.conferenceplanner.Messages;import com.oracle.conferenceplanner.entities.Session;import com.oracle.conferenceplanner.entities.Speaker;import com.oracle.conferenceplanner.view.GenericListCell;import com.sun.javafx.util.MessageBus;import java.net.URL;import java.util.Collection;import java.util.ResourceBundle;import javafx.animation.Animation;import javafx.animation.PauseTransitionBuilder;import javafx.beans.value.ChangeListener;import javafx.beans.value.ObservableValue;import javafx.concurrent.Service;import javafx.concurrent.Task;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.*;import javafx.scene.input.KeyEvent;import javafx.util.Callback;import javafx.util.Duration;

/** * * @author Michael Heinrichs */public class MainScreen implements Initializable {

@FXML private TextField searchField; @FXML private ToggleGroup toggleSearch; @FXML private Toggle toggleSession; @FXML private ProgressIndicator progressIndicator; @FXML private ListView searchResultList; private final Service<Collection<?>> dataFetcher = new Service<Collection<?>>() { @Override protected Task<Collection<?>> createTask() { final String currentSearchString = searchField.getText(); final boolean getSessions = toggleSearch.getSelectedToggle().equals(toggleSession); return new Task<Collection<?>>() { @Override protected Collection<?> call() throws Exception { return getSessions? Session.findLike(Env.getInstance().getWebResource(), currentSearchString) : Speaker.findLike(Env.getInstance().getWebResource(), currentSearchString); } }; } @Override

DeveloperUXDesigner

GraphicalDesigner

Java Code

Freitag, 8. Juni 2012

Page 22: JavaFX for Business Application Developers

package com.oracle.conferenceplanner.controller;

import com.oracle.conferenceplanner.Env;import com.oracle.conferenceplanner.Messages;import com.oracle.conferenceplanner.entities.Session;import com.oracle.conferenceplanner.entities.Speaker;import com.oracle.conferenceplanner.view.GenericListCell;import com.sun.javafx.util.MessageBus;import java.net.URL;import java.util.Collection;import java.util.ResourceBundle;import javafx.animation.Animation;import javafx.animation.PauseTransitionBuilder;import javafx.beans.value.ChangeListener;import javafx.beans.value.ObservableValue;import javafx.concurrent.Service;import javafx.concurrent.Task;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.*;import javafx.scene.input.KeyEvent;import javafx.util.Callback;import javafx.util.Duration;

/** * * @author Michael Heinrichs */public class MainScreen implements Initializable {

@FXML private TextField searchField; @FXML private ToggleGroup toggleSearch; @FXML private Toggle toggleSession; @FXML private ProgressIndicator progressIndicator; @FXML private ListView searchResultList; private final Service<Collection<?>> dataFetcher = new Service<Collection<?>>() { @Override protected Task<Collection<?>> createTask() { final String currentSearchString = searchField.getText(); final boolean getSessions = toggleSearch.getSelectedToggle().equals(toggleSession); return new Task<Collection<?>>() { @Override protected Collection<?> call() throws Exception { return getSessions? Session.findLike(Env.getInstance().getWebResource(), currentSearchString) : Speaker.findLike(Env.getInstance().getWebResource(), currentSearchString); } }; } @Override

DeveloperUXDesigner

GraphicalDesigner

<?xml version="1.0" encoding="UTF-8"?>

<?import com.oracle.conferenceplanner.view.*?><?import java.lang.*?><?import java.util.*?><?import javafx.geometry.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?><?import javafx.scene.paint.*?><?import javafx.scene.shape.*?>

<SplitPane dividerPositions="0.3" focusTraversable="true" xmlns:fx="http://javafx.com/fxml" fx:controller="com.oracle.conferenceplanner.controller.MainScreen"> <items> <AnchorPane> <children> <VBox spacing="10.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <children> <TextField fx:id="searchField" minHeight="-Infinity" onKeyTyped="#handleSearchBoxTyped" promptText="Search" /> <HBox spacing="10.0"> <children> <ToggleButton fx:id="toggleSession" selected="true" text="Session"> <toggleGroup> <ToggleGroup fx:id="toggleSearch" /> </toggleGroup> </ToggleButton> <ToggleButton fx:id="toggleSpeaker" text="Speaker" toggleGroup="$toggleSearch" /> </children> </HBox> <StackPane VBox.vgrow="ALWAYS"> <children> <ListView fx:id="searchResultList" /> <ProgressIndicator fx:id="progressIndicator" maxHeight="-Infinity" maxWidth="-Infinity" visible="false" /> </children> </StackPane> </children> </VBox> </children> <padding> <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> </padding> </AnchorPane> <AnchorPane> <children> <StackPane fx:id="detailsPane" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <children> <fx:include source="session_details.fxml"/> <fx:include source="speaker_details.fxml"/> </children>

.root { -fx-background-color: black; -fx-font-family: 'Impact';/* -fx-font-fill: #99C0D0;*/ -fx-font-fill: black;}.label { -fx-text-fill: #7C5FDD;}.text-area { -fx-text-fill: #7C5FDD;}.text-field { -fx-background-color: transparent; -fx-border-color: #7C5FDD; -fx-text-fill: #D99C10; -fx-prompt-text-fill: #7C5FDD; -fx-cursor: text;}

.toggle-button { -fx-background-color: #7C5FDD; -fx-background-radius: 0; -fx-text-fill: black; -fx-alignment: CENTER; -fx-content-display: LEFT;}

.toggle-button:selected { -fx-background-color: #D99C10;}

.list-view { -fx-background-color: transparent;}

.list-view:vertical .list-cell { -fx-background-insets: 0, 5 0, 10 15, 0 25; -fx-padding: 15 20;}

.list-view:horizontal .list-cell { -fx-background-insets: 0, 0 5, 5 20, 0 30; -fx-padding: 10 25;}

.list-cell { -fx-background-color: black, #7C5FDD, black, black; -fx-background-radius: 0, 10, 5, 0;}

.list-cell .label { -fx-text-fill: #7C5FDD;}

.list-cell .title { -fx-text-fill: #D99C10;

Java CodeFXML CSS

Freitag, 8. Juni 2012

Page 23: JavaFX for Business Application Developers

package com.oracle.conferenceplanner.controller;

import com.oracle.conferenceplanner.Env;import com.oracle.conferenceplanner.Messages;import com.oracle.conferenceplanner.entities.Session;import com.oracle.conferenceplanner.entities.Speaker;import com.oracle.conferenceplanner.view.GenericListCell;import com.sun.javafx.util.MessageBus;import java.net.URL;import java.util.Collection;import java.util.ResourceBundle;import javafx.animation.Animation;import javafx.animation.PauseTransitionBuilder;import javafx.beans.value.ChangeListener;import javafx.beans.value.ObservableValue;import javafx.concurrent.Service;import javafx.concurrent.Task;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.*;import javafx.scene.input.KeyEvent;import javafx.util.Callback;import javafx.util.Duration;

/** * * @author Michael Heinrichs */public class MainScreen implements Initializable {

@FXML private TextField searchField; @FXML private ToggleGroup toggleSearch; @FXML private Toggle toggleSession; @FXML private ProgressIndicator progressIndicator; @FXML private ListView searchResultList; private final Service<Collection<?>> dataFetcher = new Service<Collection<?>>() { @Override protected Task<Collection<?>> createTask() { final String currentSearchString = searchField.getText(); final boolean getSessions = toggleSearch.getSelectedToggle().equals(toggleSession); return new Task<Collection<?>>() { @Override protected Collection<?> call() throws Exception { return getSessions? Session.findLike(Env.getInstance().getWebResource(), currentSearchString) : Speaker.findLike(Env.getInstance().getWebResource(), currentSearchString); } }; } @Override

Developer

UXDesigner

GraphicalDesigner

<?xml version="1.0" encoding="UTF-8"?>

<?import com.oracle.conferenceplanner.view.*?><?import java.lang.*?><?import java.util.*?><?import javafx.geometry.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?><?import javafx.scene.paint.*?><?import javafx.scene.shape.*?>

<SplitPane dividerPositions="0.3" focusTraversable="true" xmlns:fx="http://javafx.com/fxml" fx:controller="com.oracle.conferenceplanner.controller.MainScreen"> <items> <AnchorPane> <children> <VBox spacing="10.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <children> <TextField fx:id="searchField" minHeight="-Infinity" onKeyTyped="#handleSearchBoxTyped" promptText="Search" /> <HBox spacing="10.0"> <children> <ToggleButton fx:id="toggleSession" selected="true" text="Session"> <toggleGroup> <ToggleGroup fx:id="toggleSearch" /> </toggleGroup> </ToggleButton> <ToggleButton fx:id="toggleSpeaker" text="Speaker" toggleGroup="$toggleSearch" /> </children> </HBox> <StackPane VBox.vgrow="ALWAYS"> <children> <ListView fx:id="searchResultList" /> <ProgressIndicator fx:id="progressIndicator" maxHeight="-Infinity" maxWidth="-Infinity" visible="false" /> </children> </StackPane> </children> </VBox> </children> <padding> <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> </padding> </AnchorPane> <AnchorPane> <children> <StackPane fx:id="detailsPane" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <children> <fx:include source="session_details.fxml"/> <fx:include source="speaker_details.fxml"/> </children>

.root { -fx-background-color: black; -fx-font-family: 'Impact';/* -fx-font-fill: #99C0D0;*/ -fx-font-fill: black;}.label { -fx-text-fill: #7C5FDD;}.text-area { -fx-text-fill: #7C5FDD;}.text-field { -fx-background-color: transparent; -fx-border-color: #7C5FDD; -fx-text-fill: #D99C10; -fx-prompt-text-fill: #7C5FDD; -fx-cursor: text;}

.toggle-button { -fx-background-color: #7C5FDD; -fx-background-radius: 0; -fx-text-fill: black; -fx-alignment: CENTER; -fx-content-display: LEFT;}

.toggle-button:selected { -fx-background-color: #D99C10;}

.list-view { -fx-background-color: transparent;}

.list-view:vertical .list-cell { -fx-background-insets: 0, 5 0, 10 15, 0 25; -fx-padding: 15 20;}

.list-view:horizontal .list-cell { -fx-background-insets: 0, 0 5, 5 20, 0 30; -fx-padding: 10 25;}

.list-cell { -fx-background-color: black, #7C5FDD, black, black; -fx-background-radius: 0, 10, 5, 0;}

.list-cell .label { -fx-text-fill: #7C5FDD;}

.list-cell .title { -fx-text-fill: #D99C10;

JavaFX

Freitag, 8. Juni 2012

Page 24: JavaFX for Business Application Developers

Defining the view

Freitag, 8. Juni 2012

Page 25: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 26: JavaFX for Business Application Developers

Stage

Freitag, 8. Juni 2012

Page 27: JavaFX for Business Application Developers

Stage

Scene

Freitag, 8. Juni 2012

Page 28: JavaFX for Business Application Developers

Stage

Scene

Scenegraph

Freitag, 8. Juni 2012

Page 29: JavaFX for Business Application Developers

JFrame

OK Cancel

Name

Adress

Mail

Freitag, 8. Juni 2012

Page 30: JavaFX for Business Application Developers

JFrame

JFXPanel : JComponent

OK Cancel

Name

Adress

Mail

Freitag, 8. Juni 2012

Page 31: JavaFX for Business Application Developers

JFrame

JFXPanel : JComponentScene

OK Cancel

Name

Adress

Mail

Freitag, 8. Juni 2012

Page 32: JavaFX for Business Application Developers

JFrame

JFXPanel : JComponentScene

ScenegraphOK Cancel

Name

Adress

Mail

Freitag, 8. Juni 2012

Page 33: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 34: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 35: JavaFX for Business Application Developers

Hooking up Controllers

Freitag, 8. Juni 2012

Page 36: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 37: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 38: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 39: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 40: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 41: JavaFX for Business Application Developers

Styling with CSS

Freitag, 8. Juni 2012

Page 42: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 43: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 44: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 45: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 46: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 47: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 48: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 49: JavaFX for Business Application Developers

Summary

Freitag, 8. Juni 2012

Page 50: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 51: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 52: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 53: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 54: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 55: JavaFX for Business Application Developers

Freitag, 8. Juni 2012

Page 56: JavaFX for Business Application Developers

package com.oracle.conferenceplanner.controller;

import com.oracle.conferenceplanner.Env;import com.oracle.conferenceplanner.Messages;import com.oracle.conferenceplanner.entities.Session;import com.oracle.conferenceplanner.entities.Speaker;import com.oracle.conferenceplanner.view.GenericListCell;import com.sun.javafx.util.MessageBus;import java.net.URL;import java.util.Collection;import java.util.ResourceBundle;import javafx.animation.Animation;import javafx.animation.PauseTransitionBuilder;import javafx.beans.value.ChangeListener;import javafx.beans.value.ObservableValue;import javafx.concurrent.Service;import javafx.concurrent.Task;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.*;import javafx.scene.input.KeyEvent;import javafx.util.Callback;import javafx.util.Duration;

/** * * @author Michael Heinrichs */public class MainScreen implements Initializable {

@FXML private TextField searchField; @FXML private ToggleGroup toggleSearch; @FXML private Toggle toggleSession; @FXML private ProgressIndicator progressIndicator; @FXML private ListView searchResultList; private final Service<Collection<?>> dataFetcher = new Service<Collection<?>>() { @Override protected Task<Collection<?>> createTask() { final String currentSearchString = searchField.getText(); final boolean getSessions = toggleSearch.getSelectedToggle().equals(toggleSession); return new Task<Collection<?>>() { @Override protected Collection<?> call() throws Exception { return getSessions? Session.findLike(Env.getInstance().getWebResource(), currentSearchString) : Speaker.findLike(Env.getInstance().getWebResource(), currentSearchString); } }; } @Override

DeveloperUXDesigner

GraphicalDesigner

Freitag, 8. Juni 2012

Page 57: JavaFX for Business Application Developers

package com.oracle.conferenceplanner.controller;

import com.oracle.conferenceplanner.Env;import com.oracle.conferenceplanner.Messages;import com.oracle.conferenceplanner.entities.Session;import com.oracle.conferenceplanner.entities.Speaker;import com.oracle.conferenceplanner.view.GenericListCell;import com.sun.javafx.util.MessageBus;import java.net.URL;import java.util.Collection;import java.util.ResourceBundle;import javafx.animation.Animation;import javafx.animation.PauseTransitionBuilder;import javafx.beans.value.ChangeListener;import javafx.beans.value.ObservableValue;import javafx.concurrent.Service;import javafx.concurrent.Task;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.*;import javafx.scene.input.KeyEvent;import javafx.util.Callback;import javafx.util.Duration;

/** * * @author Michael Heinrichs */public class MainScreen implements Initializable {

@FXML private TextField searchField; @FXML private ToggleGroup toggleSearch; @FXML private Toggle toggleSession; @FXML private ProgressIndicator progressIndicator; @FXML private ListView searchResultList; private final Service<Collection<?>> dataFetcher = new Service<Collection<?>>() { @Override protected Task<Collection<?>> createTask() { final String currentSearchString = searchField.getText(); final boolean getSessions = toggleSearch.getSelectedToggle().equals(toggleSession); return new Task<Collection<?>>() { @Override protected Collection<?> call() throws Exception { return getSessions? Session.findLike(Env.getInstance().getWebResource(), currentSearchString) : Speaker.findLike(Env.getInstance().getWebResource(), currentSearchString); } }; } @Override

Developer

UXDesigner

GraphicalDesigner

<?xml version="1.0" encoding="UTF-8"?>

<?import com.oracle.conferenceplanner.view.*?><?import java.lang.*?><?import java.util.*?><?import javafx.geometry.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?><?import javafx.scene.paint.*?><?import javafx.scene.shape.*?>

<SplitPane dividerPositions="0.3" focusTraversable="true" xmlns:fx="http://javafx.com/fxml" fx:controller="com.oracle.conferenceplanner.controller.MainScreen"> <items> <AnchorPane> <children> <VBox spacing="10.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <children> <TextField fx:id="searchField" minHeight="-Infinity" onKeyTyped="#handleSearchBoxTyped" promptText="Search" /> <HBox spacing="10.0"> <children> <ToggleButton fx:id="toggleSession" selected="true" text="Session"> <toggleGroup> <ToggleGroup fx:id="toggleSearch" /> </toggleGroup> </ToggleButton> <ToggleButton fx:id="toggleSpeaker" text="Speaker" toggleGroup="$toggleSearch" /> </children> </HBox> <StackPane VBox.vgrow="ALWAYS"> <children> <ListView fx:id="searchResultList" /> <ProgressIndicator fx:id="progressIndicator" maxHeight="-Infinity" maxWidth="-Infinity" visible="false" /> </children> </StackPane> </children> </VBox> </children> <padding> <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> </padding> </AnchorPane> <AnchorPane> <children> <StackPane fx:id="detailsPane" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <children> <fx:include source="session_details.fxml"/> <fx:include source="speaker_details.fxml"/> </children>

.root { -fx-background-color: black; -fx-font-family: 'Impact';/* -fx-font-fill: #99C0D0;*/ -fx-font-fill: black;}.label { -fx-text-fill: #7C5FDD;}.text-area { -fx-text-fill: #7C5FDD;}.text-field { -fx-background-color: transparent; -fx-border-color: #7C5FDD; -fx-text-fill: #D99C10; -fx-prompt-text-fill: #7C5FDD; -fx-cursor: text;}

.toggle-button { -fx-background-color: #7C5FDD; -fx-background-radius: 0; -fx-text-fill: black; -fx-alignment: CENTER; -fx-content-display: LEFT;}

.toggle-button:selected { -fx-background-color: #D99C10;}

.list-view { -fx-background-color: transparent;}

.list-view:vertical .list-cell { -fx-background-insets: 0, 5 0, 10 15, 0 25; -fx-padding: 15 20;}

.list-view:horizontal .list-cell { -fx-background-insets: 0, 0 5, 5 20, 0 30; -fx-padding: 10 25;}

.list-cell { -fx-background-color: black, #7C5FDD, black, black; -fx-background-radius: 0, 10, 5, 0;}

.list-cell .label { -fx-text-fill: #7C5FDD;}

.list-cell .title { -fx-text-fill: #D99C10;

JavaFX

Freitag, 8. Juni 2012

Page 58: JavaFX for Business Application Developers

• http://blog.netopyr.com, @net0pyr

• JavaFX Websitehttp://javafx.com

• OTN Forum http://forums.oracle.com

• Bugs and Feature Requestshttp://javafx-jira.kenai.com

• API [email protected]

Freitag, 8. Juni 2012


Top Related