JavaFX8初階技術介紹 Grace 2015.04.14

Agenda 內容 1 JavaFX 2 Json 3 SQLite

JavaFX

JavaFX 簡介、架構 開發工具 技術簡介 佈署

Java R.I.A. R.I.A. : Rich Internet Application Java R.I.A. Java AWT : Heavyweight物件(取決於OS) Java Swing : Lightweight物件(執行時改變外觀,JDK1.1) Java FX Script 2007.05 JavaOne發表 MVC架構 : 使用繪圖軟體(illustrator,Photoshop)存成fx檔案，再使用Java FX Script JavaFX2.2 併入Java S.E. 7 Update 6 JavaFX 8 併入Java S.E. 8

JavaFX 2 功能 GUI類別及功能 Builder類別 : 可精簡程式長度，JavaFX 8 移除 CSS : 設定物件樣式 JavaFX Scene Builder 1.1: 將View儲存成fxml檔

JavaFX 8 與JavaFX2差異 移除各物件對應的Builder類別 Lambda Expression (JDK 8新增) JavaFX Scene Builder 2.0 新增Modena主題、DatePicker & TreeTable、Candle Stick圖表、錄音 & 錄影、支援3D、Shaders for OpenGL and Direct3D、Java S.E. Embedded、Sensor、列印、Rich Text格式、JavaScript、HTML5 Lambda Expression Anonymous Function，沒有Method Declaration、Modifier與Return Value Declaration ，程式更為精簡 運用於JavaFX 8的事件 (Event) 處理上，讓處理事件的方式更為簡單 JavaFX Scene Builder 2.0 新增JavaFX Theme預覽功能 以MVC架構來說，開發時的順暢度仍不如NetBeans、JBuilder、VS Studio 須常用到F5 Refresh，否則會未更新 與Controller Code、Model Code的互動不夠直覺

JavaFX 未來規劃 JDK8u20(Q3 2014) App bundling enhancements JDK9 Deterministic G1 Java Mission Control 6.0 Improved JRE installer App bundling enhancements JDK9 Modularity – Jigsaw Interoperability Cloud Ease of Use JavaFX JSR Optimizations 預計JDK9將JavaFX納入正式的規範(JSR,Java Specification Requests) JDK8(Q1 2014) Lambda JVM Convergence JavaScript Interop JavaFX 8 JDK8u40 2014 2015 2016 JavaFX對於行動平台的支援才剛開始發展，有待後續持續觀注 NetBeans IDE 8 JDK 8 support Scene Builder 2.0 Support Scene Builer 2.0 JavaFX 8 Support Enhanced Java IDE Support NetBeans IDE 8 JDK 9 support Scene Builder 3.0 Support Scene Builer 3.0 JavaFX 9 Support

JavaFX 架構 Write Once , Deploy Anywhere 繪圖 視窗管理 影音 Prism : Prism層處理JavaFX場景(scenes)的渲染(包含3D渲染)工作，支援硬體和軟體渲染。支援DirectX和OpenGL渲染方式， 如果執行環境並沒有可用的硬體加速功能，就會以軟體來進行渲染。對於3D圖形來說，使用硬體渲染可以有效的加速。 Glass Windowing Toolkit : JavaFX圖形架構的最底層，負責提供原生的運算服務(可能是C/C++的程式)，Ex.視窗管理、計時器。 這層用來連接不同的執行環境與JavaFX，可以使得此層上面的層級無需考慮執行的平台 (Glass toolkit之上的層級是Platform-independent，Glass toolkit與其之下的層級是Platform-dependent)。 也被用來管理EventQueue(事件)。和過去Awt的作法不同，Awt有自己的EventQueue來進行事件排程處理， 但是Glass toolkit是使用系統原生的EventQueue來做事件排程； Awt和Java本身是執行在不同的Thread上，但是Glass toolkit跟JavaFX application都是執行在同一個Thread上。 Web Engine : 支援HTML5, CSS, JavaScript, DOM, and SVG。 Quantum Toolkit : 用來將底下的Prism和Glass Windowing Toolkit兩層綁在一起，提供給上面JavaFX Public APIs and Scene Graph層使用。 Scene Graph : 建構JavaFX應用程式的起點。 - 如同一棵階層樹，每個單獨的元件都稱為節點(Node)，表示所有可以看見的元件 - 還有以下功能 : 效果(模糊、陰影)、透明度、變換(位移、縮放大小、旋轉)、事件處理(滑鼠、鍵盤) - 包含基礎圖形元件(像是矩形、文字)、UI控制項、佈局容器(Layout Containers)、多媒體。 - 可簡化製作圖形UI，連動畫也可直接透過javafx.animation API或是XML來直接完成。 - javafx.scene API允許建立以下元件的類型： 1) 節點：形狀(2D或是3D圖形)、多媒體、內嵌的網頁瀏覽器、文字、圖形控制項(如Label、TextField、Button)、圖表、 群組和容器。 2) 狀態：變換(包含位置和方向)、視覺效果。 3) 效果：模糊、陰影、顏色調整。 - 支援2D和3D的圖形，並提供圖形加速管線化的功能，就是JavaFX Public APIs and Scene Graph底下的Quantum Toolkit和Prism兩層。

JavaFX程式架構 Application class init() : 初始化JavaFX應用程式 start() : JavaFX應用程式進入點，即 Java Applet launch() : 啟動standalone的JavaFX應用程式 stop() : JavaFX應用程式結束前會呼叫的方法 http://docs.oracle.com/javase/8/javafx/api/

JavaFX MVC 程式架構(1/2) MVC架構 Invoke (調用) Observe Notify Update Get data View (FXML) Invoke (調用) Observe Notify Presenter (FXML Controller) Presentation Model Update Get data Return data http://docs.oracle.com/javase/8/javafx/api/ Service

JavaFX MVC 程式架構(2/2) Model View Controller

Java Fx 簡介、架構 開發工具 技術簡介 佈署 App應用(含SQLite)

支援JavaFX8 Eclipse 套件 1/3 http://download.eclipse.org/eclipse/downloads/

支援JavaFX8 Eclipse 套件 2/3 Help => Install New Software… => Location請輸入http://download.eclipse.org/efxclipse/updates-released/1.0.0/site

支援JavaFX8 Eclipse 套件 3/3

JavaFX Scene Builder 1/3 下載並安裝javafx_scenebuilder-2_0-windows.msi

JavaFX Scene Builder 2/3

JavaFX Scene Builder 3/3

Java Fx 簡介、架構 開發工具 技術簡介 佈署

技術簡介 Graphics User Interface Component Reference. http://docs.oracle.com/javase/8/javase-clienttechnologies.htm

Shape3D - PreDefine setSpecularColor 鏡面 setDiffuseColor 擴散 public HBox addShape3D() { HBox hbox = new HBox(); PhongMaterial redMaterial = new PhongMaterial(); redMaterial.setSpecularColor(Color.ORANGE); redMaterial.setDiffuseColor(Color.RED); PhongMaterial blueMaterial = new PhongMaterial(); blueMaterial.setDiffuseColor(Color.BLUE); blueMaterial.setSpecularColor(Color.LIGHTBLUE); PhongMaterial greyMaterial = new PhongMaterial(); greyMaterial.setDiffuseColor(Color.DARKGREY); greyMaterial.setSpecularColor(Color.GREY); Box red = new Box(400, 400, 400); red.setMaterial(redMaterial); Sphere blue = new Sphere(200); blue.setMaterial(blueMaterial); Cylinder grey = new Cylinder(5, 100); grey.setMaterial(greyMaterial); hbox.getChildren().addAll(red,blue,grey); return hbox; } setSpecularColor 鏡面 setDiffuseColor 擴散

Camera (含SubScene & Light) PhongMaterial phongMaterial = new PhongMaterial(Color.color(1.0, 0.7, 0.8)); Cylinder cylinder1 = new Cylinder(100, 200); cylinder1.setMaterial(phongMaterial); SubScene noMsaa = createSubScene("MSAA = false", cylinder1, Color.TRANSPARENT, new PerspectiveCamera(), false); hbox.getChildren().add(noMsaa); …. private static SubScene createSubScene(String title, Node node, Paint fillPaint, Camera camera, boolean msaa) { Group root = new Group(); PointLight light = new PointLight(Color.WHITE); light.setTranslateX(50); light.setTranslateY(-300); light.setTranslateZ(-400); PointLight light2 = new PointLight(Color.color(0.6, 0.3, 0.4)); light2.setTranslateX(400); light2.setTranslateY(0); light2.setTranslateZ(-400); AmbientLight ambientLight = new AmbientLight(Color.color(0.2, 0.2, 0.2)); node.setRotationAxis(new Point3D(2, 1, 0).normalize()); node.setTranslateX(180); node.setTranslateY(180); root.getChildren().addAll(setTitle(title), ambientLight, light, light2, node); SubScene subScene = new SubScene(root, 500, 400, true, msaa ? SceneAntialiasing.BALANCED : SceneAntialiasing.DISABLED); subScene.setFill(fillPaint); subScene.setCamera(camera); return subScene; } AmbientLight – 光源從四面八方來 PointLight – 光源來自定點

Image @Override public void start(Stage primaryStage) { // Create Image and ImageView objects Image image = new Image("file:resources/images/javafx-documentation.png"); ImageView imageView = new ImageView(); imageView.setImage(image); // Display image on screen StackPane root = new StackPane(); root.getChildren().add(imageView); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Image Read Test"); primaryStage.setScene(scene); primaryStage.show(); }

Canvas @Override public void start(Stage primaryStage) { primaryStage.setTitle("Drawing Operations Test"); Group root = new Group(); Canvas canvas = new Canvas(300, 250); GraphicsContext gc = canvas.getGraphicsContext2D(); drawShapes(gc); root.getChildren().add(canvas); primaryStage.setScene(new Scene(root)); primaryStage.show(); } private void drawShapes(GraphicsContext gc) { gc.setFill(Color.GREEN); gc.setStroke(Color.BLUE); gc.setLineWidth(5); gc.strokeLine(40, 10, 10, 40); gc.fillOval(10, 60, 30, 30); gc.strokeOval(60, 60, 30, 30); gc.fillRoundRect(110, 60, 30, 30, 10, 10); gc.strokeRoundRect(160, 60, 30, 30, 10, 10); gc.fillArc(10, 110, 30, 30, 45, 240, ArcType.OPEN); gc.fillArc(60, 110, 30, 30, 45, 240, ArcType.CHORD); gc.fillArc(110, 110, 30, 30, 45, 240, ArcType.ROUND); gc.strokeArc(10, 160, 30, 30, 45, 240, ArcType.OPEN); gc.strokeArc(60, 160, 30, 30, 45, 240, ArcType.CHORD); gc.strokeArc(110, 160, 30, 30, 45, 240, ArcType.ROUND); gc.fillPolygon(new double[]{10, 40, 10, 40}, new double[]{210, 210, 240, 240}, 4); gc.strokePolygon(new double[]{60, 90, 60, 90}, gc.strokePolyline(new double[]{110, 140, 110, 140}, }

技術簡介 Graphics User Interface Component

1.Layout

設定Root Layout Load View 取得Controller

Border Pane

AnchorPane

Split Pane

2.UI Controls

Label

Button 1/2 @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); GridPane gridpane = new GridPane(); gridpane.setAlignment(Pos.CENTER); gridpane.setHgap(5); gridpane.setVgap(5); //Label Label Label = new Label("My Label"); gridpane.add(Label, 0, 0); //Button Button button1 = new Button(); gridpane.add(button1, 0, 1); Button button2 = new Button("Accept"); gridpane.add(button2, 1, 1); Image imageDecline = new Image("file:resources/images/decline-button.png"); Button button3 = new Button("Decline", new ImageView(imageDecline)); gridpane.add(button3, 2, 1); Image imageAccept = new Image(getClass().getResourceAsStream("accept-button.png")); Button button4 = new Button("", new ImageView(imageAccept)); gridpane.add(button4, 3, 1); primaryStage.setScene(new Scene(gridpane)); primaryStage.show(); }

Button 2/2

RadioButton @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); FlowPane flowpane = new FlowPane(); //RadioButton ToggleGroup group = new ToggleGroup(); RadioButton rb1 = new RadioButton("Home"); rb1.setToggleGroup(group); rb1.setSelected(true); RadioButton rb2 = new RadioButton("Calendar"); rb2.setToggleGroup(group); RadioButton rb3 = new RadioButton("Contacts"); rb3.setToggleGroup(group); flowpane.getChildren().addAll(rb1,rb2,rb3); primaryStage.setScene(new Scene(flowpane)); primaryStage.setWidth(300); primaryStage.setHeight(300); primaryStage.show(); }

ToggleButton @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); FlowPane flowpane = new FlowPane(); //ToggleButton final ToggleGroup group = new ToggleGroup(); ToggleButton tb1 = new ToggleButton("Minor"); tb1.setToggleGroup(group); tb1.setSelected(true); ToggleButton tb2 = new ToggleButton("Major"); tb2.setToggleGroup(group); ToggleButton tb3 = new ToggleButton("Critical"); tb3.setToggleGroup(group); tb1.setUserData(Color.LIGHTGREEN); tb2.setUserData(Color.LIGHTBLUE); tb3.setUserData(Color.SALMON); Rectangle rect = new Rectangle(); rect.setHeight(50); rect.setFill(Color.WHITE); rect.setStroke(Color.DARKGRAY); rect.setStrokeWidth(2); rect.setArcHeight(10); rect.setArcWidth(10); //ChangeListener實作void changed(ObservableValue<? extends T> observable,T oldValue,T newValue) group.selectedToggleProperty().addListener( (ObservableValue<? extends Toggle> ov, Toggle toggle, Toggle new_toggle) -> { if (new_toggle == null) rect.setFill(Color.WHITE); else rect.setFill((Color) group.getSelectedToggle().getUserData()); }); flowpane.getChildren().addAll(tb1,tb2,tb3,rect); rect.setWidth(280); rect.setHeight(230); group.selectToggle(tb2); primaryStage.setScene(new Scene(flowpane)); primaryStage.setWidth(300); primaryStage.setHeight(300); primaryStage.show(); }

Checkbox @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); FlowPane flowpane = new FlowPane(); //CheckBox final String[] names = new String[]{"Security", "Project", "Chart"}; final CheckBox[] cbs = new CheckBox[names.length]; for (int i = 0; i < names.length; i++) { final CheckBox cb = cbs[i] = new CheckBox(names[i]); cb.setSelected((i==0)? true : false); flowpane.getChildren().add(cb); } primaryStage.setScene(new Scene(flowpane)); primaryStage.setWidth(300); primaryStage.setHeight(300); primaryStage.show();

ChoiceBox @SuppressWarnings("unchecked") @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); FlowPane flowpane = new FlowPane(); //ChoiceBox @SuppressWarnings("rawtypes") ChoiceBox cb = new ChoiceBox(); cb.setItems(FXCollections.observableArrayList( "New Document", "Open ", new Separator(), "Save", "Save as") ); cb.getSelectionModel().selectFirst(); flowpane.getChildren().addAll(cb); primaryStage.setScene(new Scene(flowpane)); primaryStage.setWidth(300); primaryStage.setHeight(300); primaryStage.show(); }

TextField & PasswordField 1/2 @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); FlowPane flowpane = new FlowPane(); //TextField Label label1 = new Label("Name:"); TextField textField = new TextField (); Button clearButton = new Button("Clear"); clearButton.setOnAction((ActionEvent e) -> { textField.clear(); }); //PasswordField PasswordField passwordField = new PasswordField(); passwordField.setPromptText("Your password:"); flowpane.getChildren().addAll(label1, textField, clearButton, passwordField); primaryStage.setScene(new Scene(flowpane)); primaryStage.setWidth(300); primaryStage.setHeight(300); primaryStage.show(); }

TextField & PasswordField 2/2

ScrollBar @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); FlowPane flowpane = new FlowPane(); //ScrollBar ScrollBar sc = new ScrollBar(); sc.setMin(0); sc.setOrientation(Orientation.VERTICAL); sc.setPrefHeight(360); sc.setMax(360); flowpane.getChildren().addAll(sc); primaryStage.setScene(new Scene(flowpane)); primaryStage.setWidth(360); primaryStage.setHeight(400); primaryStage.show(); }

ScrollPane public class Main_UIControl8 extends Application { final ScrollPane sp = new ScrollPane(); final Image[] images = new Image[5]; final ImageView[] pics = new ImageView[5]; final VBox vb = new VBox(); final Label fileName = new Label(); final String [] imageNames = new String [] {"fw1.png", "fw2.png","fw3.png", "fw4.png", "fw5.png"}; @Override public void start(Stage primaryStage) { VBox box = new VBox(); Scene scene = new Scene(box, 180, 180); primaryStage.setScene(scene); primaryStage.setTitle("Scroll Pane"); box.getChildren().addAll(sp, fileName); VBox.setVgrow(sp, Priority.ALWAYS); fileName.setLayoutX(30); fileName.setLayoutY(160); for (int i = 0; i < 5; i++) { //images[i] = new Image(getClass().getResourceAsStream(imageNames[i])); images[i] = new Image("file:resources/images/" + imageNames[i]); pics[i] = new ImageView(images[i]); pics[i].setFitWidth(100); pics[i].setPreserveRatio(true); vb.getChildren().add(pics[i]); } sp.setVmax(440); sp.setPrefSize(115, 150); sp.setContent(vb); sp.vvalueProperty().addListener((ov, old_val, new_val) -> { fileName.setText(imageNames[(new_val.intValue() - 1)/100]); }); primaryStage.show();

ListView @Override public void start(Stage primaryStage) { primaryStage.setTitle("UI Control"); FlowPane flowpane = new FlowPane(); //ListView ListView<String> list = new ListView<>(); ObservableList<String> items =FXCollections.observableArrayList ( "Single", "Double", "Suite", "Family App"); list.setItems(items); flowpane.getChildren().addAll(list); primaryStage.setScene(new Scene(flowpane)); primaryStage.setWidth(360); primaryStage.setHeight(400); primaryStage.show(); }

Table View 1/2

Table View 2/2

Table Column 1/3

Table Column 2/3 Column Mapping Model Notify View Callback<CellDataFeatures<JobConfigItem, String>, ObservableValue<String>> value

Table Column 3/3 Data初始及重新查詢

TreeView List<Employee> employees = Arrays.<Employee>asList( new Employee("Jacob Smith", "Accounts Department"),…); TreeItem<String> rootNode = new TreeItem<>("MyCompany Human Resources", rootIcon); … public void start(Stage stage) { rootNode.setExpanded(true); for (Employee employee : employees) { TreeItem<String> empLeaf = new TreeItem<>(employee.getName()); boolean found = false; for (TreeItem<String> depNode : rootNode.getChildren()) { if (depNode.getValue().contentEquals(employee.getDepartment())){ depNode.getChildren().add(empLeaf); found = true; break; } if (!found) { @SuppressWarnings("rawtypes") TreeItem depNode = new TreeItem(employee.getDepartment(), new ImageView(depIcon) ); rootNode.getChildren().add(depNode); stage.setTitle("Tree View Sample"); VBox box = new VBox(); final Scene scene = new Scene(box, 400, 300); scene.setFill(Color.LIGHTGRAY); TreeView<String> treeView = new TreeView<>(rootNode); treeView.setEditable(true); treeView.setCellFactory((TreeView<String> p) -> new TextFieldTreeCellImpl()); box.getChildren().add(treeView); stage.setScene(scene); stage.show(); }

TreeTableView List<Employee> employees = Arrays.<Employee>asList( new Employee("Ethan Williams", "ethan.williams@example.com"),…)); private final ImageView depIcon = new ImageView ( new Image(getClass().getResourceAsStream("department.jpg"),30,30,false,false) ); final TreeItem<Employee> root = new TreeItem<>(new Employee("Sales Department", ""), depIcon); public static void main(String[] args) { Application.launch(TreeTableViewSample.class, args); } … public void start(Stage stage) { root.setExpanded(true); employees.stream().forEach((employee) -> { root.getChildren().add(new TreeItem<>(employee)); }); stage.setTitle("Tree Table View Sample"); final Scene scene = new Scene(new Group(), 400, 400); scene.setFill(Color.LIGHTGRAY); Group sceneRoot = (Group) scene.getRoot(); TreeTableColumn<Employee, String> empColumn = new TreeTableColumn<>("Employee"); empColumn.setPrefWidth(150); empColumn.setCellValueFactory( (TreeTableColumn.CellDataFeatures<Employee, String> param) -> new ReadOnlyStringWrapper(param.getValue().getValue().getName()) ); TreeTableColumn<Employee, String> emailColumn = new TreeTableColumn<>("Email"); emailColumn.setPrefWidth(190); emailColumn.setCellValueFactory( new ReadOnlyStringWrapper(param.getValue().getValue().getEmail()) TreeTableView<Employee> treeTableView = new TreeTableView<>(root); treeTableView.getColumns().setAll(empColumn, emailColumn); sceneRoot.getChildren().add(treeTableView); stage.setScene(scene); stage.show(); }

ComboBox 1/2

ComboBox 2/2 初始值、各選項顯示、選取之顯示

Separator 在GridPane的第2欄第2列，span2列(垂直)繪一直線 @Override public void start(Stage stage) { Group root = new Group(); Scene scene = new Scene(root,1000, 300); stage.setScene(scene); stage.setTitle("Separator Sample"); GridPane grid = new GridPane(); grid.setPadding(new Insets(10, 10, 10, 10)); grid.setVgap(2); grid.setHgap(5); scene.setRoot(grid); Image cloudImage = new Image(getClass().getResourceAsStream("cloud.png")); Image sunImage = new Image(getClass().getResourceAsStream("sun.jpg")); caption.setFont(Font.font("Verdana", 20)); GridPane.setConstraints(caption, 0, 0); GridPane.setColumnSpan(caption, 8); grid.getChildren().add(caption); final Separator sepHor = new Separator(); sepHor.setValignment(VPos.CENTER); GridPane.setConstraints(sepHor, 0, 1); GridPane.setColumnSpan(sepHor, 7); grid.getChildren().add(sepHor); friday.setFont(Font.font("Verdana", 18)); GridPane.setConstraints(friday, 0, 2); GridPane.setColumnSpan(friday, 2); grid.getChildren().add(friday); final Separator sepVert1 = new Separator(); sepVert1.setOrientation(Orientation.VERTICAL); sepVert1.setValignment(VPos.CENTER); sepVert1.setPrefHeight(80); GridPane.setConstraints(sepVert1, 2, 2); GridPane.setRowSpan(sepVert1, 2); grid.getChildren().add(sepVert1); saturday.setFont(Font.font("Verdana", 18)); GridPane.setConstraints(saturday, 3, 2); GridPane.setColumnSpan(saturday, 2); grid.getChildren().add(saturday); … stage.show(); } 在GridPane的第2欄第2列，span2列(垂直)繪一直線 在GridPane的第0欄第1列，span7欄(平行)繪一直線

Slider final Slider opacityLevel = new Slider(0, 1, 1); final Slider sepiaTone = new Slider(0, 1, 1); final Slider scaling = new Slider (0.5, 1, 1); … @Override public void start(Stage stage) { opacityLevel.valueProperty().addListener(( ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> { cappuccino.setOpacity(new_val.doubleValue()); opacityValue.setText(String.format("%.2f", new_val)); }); GridPane.setConstraints(opacityLevel, 1, 1); grid.getChildren().add(opacityLevel); sepiaTone.valueProperty().addListener(( ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> { sepiaEffect.setLevel(new_val.doubleValue()); sepiaValue.setText(String.format("%.2f", new_val)); GridPane.setConstraints(sepiaTone, 1, 2); grid.getChildren().add(sepiaTone); … scaling.valueProperty().addListener(( ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> { cappuccino.setScaleX(new_val.doubleValue()); cappuccino.setScaleY(new_val.doubleValue()); scalingValue.setText(String.format("%.2f", new_val)); }); GridPane.setConstraints(scaling, 1, 3); grid.getChildren().add(scaling); scalingValue.setTextFill(textColor); GridPane.setConstraints(scalingValue, 2, 3); grid.getChildren().add(scalingValue); stage.show(); } 最小值,最大值,預設值

Progress Bar and Progress Indicator @Override public void start(Stage stage) { Group root = new Group(); Scene scene = new Scene(root); stage.setScene(scene); stage.setTitle("Progress Controls"); final Slider slider = new Slider(); slider.setMin(0); slider.setMax(50); final ProgressBar pb = new ProgressBar(0); final ProgressIndicator pi = new ProgressIndicator(0); slider.valueProperty().addListener( (ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> { pb.setProgress(new_val.doubleValue()/50); pi.setProgress(new_val.doubleValue()/50); }); final HBox hb = new HBox(); hb.setSpacing(5); hb.setAlignment(Pos.CENTER); hb.getChildren().addAll(slider, pb, pi); scene.setRoot(hb); stage.show(); }

Hyperlink final static String[] imageFiles = new String[]{"feib.png"}; final static String[] captions = new String[]{"Feib"}; final static String[] urls = new String[]{"http://www.feib.com.tw/"}; … @Override public void start(Stage stage) { VBox vbox = new VBox(); Scene scene = new Scene(vbox); stage.setTitle("Hyperlink Sample"); stage.setWidth(800); stage.setHeight(600); selectedImage.setLayoutX(100); selectedImage.setLayoutY(10); final WebView browser = new WebView(); final WebEngine webEngine = browser.getEngine(); for (int i = 0; i < captions.length; i++) { final Hyperlink hpl = hpls[i] = new Hyperlink(captions[i]); final Image image = images[i] = new Image(getClass().getResourceAsStream(imageFiles[i]),60,60,false,false); hpl.setGraphic(new ImageView (image)); hpl.setFont(Font.font("Arial", 14)); final String url = urls[i]; hpl.setOnAction((ActionEvent e) -> { webEngine.load(url); }); } HBox hbox = new HBox(); hbox.setAlignment(Pos.BASELINE_CENTER); hbox.getChildren().addAll(hpls); vbox.getChildren().addAll(hbox, browser); Vbox.setVgrow(browser, Priority.ALWAYS); stage.setScene(scene); stage.show();

Tooltip @Override public void start(Stage stage) { … for (int i = 0; i < rooms.length; i++) { final CheckBox cb = cbs[i] = new CheckBox(rooms[i]); final Integer rate = rates[i]; final Tooltip tooltip = new Tooltip("$" + rates[i].toString()); tooltip.setFont(new Font("Arial", 16)); cb.setTooltip(tooltip); cb.selectedProperty().addListener( (ObservableValue<? extends Boolean> ov, Boolean old_val, Boolean new_val) -> { if (cb.isSelected()) { sum = sum + rate; } else { sum = sum - rate; } total.setText("Total: $" + sum.toString()); );

HTML Editor @Override public void start(Stage stage) { stage.setTitle("HTMLEditor Sample"); stage.setWidth(650); stage.setHeight(500); Scene scene = new Scene(new Group()); VBox root = new VBox(); root.setPadding(new Insets(8, 8, 8, 8)); root.setSpacing(5); root.setAlignment(Pos.BOTTOM_LEFT); final HTMLEditor htmlEditor = new HTMLEditor(); htmlEditor.setPrefHeight(245); htmlEditor.setHtmlText(INITIAL_TEXT); final WebView browser = new WebView(); final WebEngine webEngine = browser.getEngine(); ScrollPane scrollPane = new ScrollPane(); scrollPane.getStyleClass().add("noborder-scroll-pane"); scrollPane.setStyle("-fx-background-color: white"); scrollPane.setContent(browser); scrollPane.setFitToWidth(true); scrollPane.setPrefHeight(180); Button showHTMLButton = new Button("Load Content in Browser"); root.setAlignment(Pos.CENTER); showHTMLButton.setOnAction((ActionEvent arg0) -> { webEngine.loadContent(htmlEditor.getHtmlText()); }); root.getChildren().addAll(htmlEditor, showHTMLButton, scrollPane); scene.setRoot(root); stage.setScene(scene); stage.show(); }

Titled Pane and Accordion 手風琴 final Accordion accordion = new Accordion (); for (int i = 0; i < imageNames.length; i++) { images[i] = new Image(getClass().getResourceAsStream(imageNames[i] + ".png")); pics[i] = new ImageView(images[i]); tps[i] = new TitledPane(imageNames[i],pics[i]); } accordion.getPanes().addAll(tps); accordion.expandedPaneProperty().addListener( (ObservableValue<? extends TitledPane> ov, TitledPane old_val, TitledPane new_val) -> { if (new_val != null) { label.setText(accordion.getExpandedPane().getText() + ".jpg"); }); Accordion = 手風琴

Menu Bar 1/2

Menu Bar 2/2

Color Picker @Override public void start(Stage stage) { stage.setTitle("ColorPicker"); Scene scene = new Scene(new HBox(20), 400, 100); HBox box = (HBox) scene.getRoot(); box.setPadding(new Insets(5, 5, 5, 5)); final ColorPicker colorPicker = new ColorPicker(); colorPicker.setValue(Color.CORAL); final Text text = new Text("Try the color picker!"); text.setFont(Font.font ("Verdana", 20)); text.setFill(colorPicker.getValue()); colorPicker.setOnAction((ActionEvent t) -> { }); box.getChildren().addAll(colorPicker, text); stage.setScene(scene); stage.show(); }

Date Picker private Stage stage; private DatePicker checkInDatePicker; … @Override public void start(Stage stage) { this.stage = stage; stage.setTitle("DatePickerSample "); initUI(); stage.show(); } private void initUI() { VBox vbox = new VBox(20); vbox.setStyle("-fx-padding: 10;"); Scene scene = new Scene(vbox, 400, 400); stage.setScene(scene); checkInDatePicker = new DatePicker(); GridPane gridPane = new GridPane(); gridPane.setHgap(10); gridPane.setVgap(10); Label checkInlabel = new Label("Check-In Date:"); gridPane.add(checkInlabel, 0, 0); GridPane.setHalignment(checkInlabel, HPos.LEFT); gridPane.add(checkInDatePicker, 0, 1); vbox.getChildren().add(gridPane);

Pagination Control @Override public void start(final Stage stage) throws Exception { fonts = Font.getFamilies().toArray(fonts); pagination = new Pagination(fonts.length/itemsPerPage(), 0); Pagination.getStyleClass().add(Pagination.STYLE_CLASS_BULLET); pagination.setPageFactory((Integer pageIndex) -> createPage(pageIndex)); AnchorPane anchor = new AnchorPane(); AnchorPane.setTopAnchor(pagination, 10.0); AnchorPane.setRightAnchor(pagination, 10.0); AnchorPane.setBottomAnchor(pagination, 10.0); AnchorPane.setLeftAnchor(pagination, 10.0); anchor.getChildren().addAll(pagination); Scene scene = new Scene(anchor, 400, 450); stage.setScene(scene); stage.setTitle("PaginationSample"); scene.getStylesheets().add("file:resources/Pagination.css"); stage.show(); } public int itemsPerPage() { return 15; public VBox createPage(int pageIndex) { VBox box = new VBox(5); int page = pageIndex * itemsPerPage(); for (int i = page; i < page + itemsPerPage(); i++) { Label font = new Label(fonts[i]); box.getChildren().add(font); } return box;

File Chooser final FileChooser fileChooser = new FileChooser(); final Button openButton = new Button("Open a Picture..."); final Button openMultipleButton = new Button("Open Pictures..."); openButton.setOnAction( (final ActionEvent e) -> { File file = fileChooser.showOpenDialog(stage); if (file != null) { //openFile(file); } }); openMultipleButton.setOnAction( List<File> list = fileChooser.showOpenMultipleDialog(stage); if (list != null) { list.stream().forEach((file) -> {

Dialog

3.Charts Pie Chart Line Chart Area Chart Bubble Chart Scatter Chart Bar Chart 3.Charts

Pie Chart @Override public void start(Stage stage) { Scene scene = new Scene(new Group()); stage.setTitle("Imported Fruits"); stage.setWidth(500); stage.setHeight(500); ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList( new PieChart.Data("Grapefruit", 13), new PieChart.Data("Oranges", 25), new PieChart.Data("Plums", 10), new PieChart.Data("Pears", 22), new PieChart.Data("Apples", 30)); final PieChart chart = new PieChart(pieChartData); chart.setTitle("Imported Fruits"); ((Group) scene.getRoot()).getChildren().add(chart); stage.setScene(scene); stage.show(); }

Line Chart //defining the axes final NumberAxis xAxis = new NumberAxis(); final NumberAxis yAxis = new NumberAxis(); xAxis.setLabel("Number of Month"); //creating the chart final LineChart<Number,Number> lineChart = new LineChart<Number,Number>(xAxis,yAxis); lineChart.setTitle("Stock Monitoring, 2010"); //defining a series XYChart.Series series = new XYChart.Series(); series.setName("My portfolio"); //populating the series with data series.getData().add(new XYChart.Data(1, 23)); series.getData().add(new XYChart.Data(2, 14)); … Scene scene = new Scene(lineChart,800,600); lineChart.getData().add(series);

Area Chart final NumberAxis xAxis = new NumberAxis(1, 31, 1); final NumberAxis yAxis = new NumberAxis(); final AreaChart<Number,Number> ac = new AreaChart<>(xAxis,yAxis); ac.setTitle("Temperature Monitoring (in Degrees C)"); XYChart.Series seriesApril= new XYChart.Series(); seriesApril.setName("April"); seriesApril.getData().add(new XYChart.Data(1, 4)); seriesApril.getData().add(new XYChart.Data(3, 10)); … XYChart.Series seriesMay = new XYChart.Series(); seriesMay.setName("May"); seriesMay.getData().add(new XYChart.Data(1, 20)); seriesMay.getData().add(new XYChart.Data(3, 15)); Scene scene = new Scene(ac,800,600); ac.getData().addAll(seriesApril, seriesMay);

Bubble Chart final NumberAxis xAxis = new NumberAxis(1, 53, 4); final NumberAxis yAxis = new NumberAxis(0, 80, 10); final BubbleChart<Number,Number> blc = new BubbleChart<>(xAxis,yAxis); xAxis.setLabel("Week"); yAxis.setLabel("Product Budget"); blc.setTitle("Budget Monitoring"); XYChart.Series series1 = new XYChart.Series(); series1.setName("Product 1"); series1.getData().add(new XYChart.Data(3, 35)); …. XYChart.Series series2 = new XYChart.Series(); series2.setName("Product 2"); series2.getData().add(new XYChart.Data(8, 15)); … Scene scene = new Scene(blc); blc.getData().addAll(series1, series2);

Scatter Chart Scatter 分散 final NumberAxis xAxis = new NumberAxis(0, 10, 1); final NumberAxis yAxis = new NumberAxis(-100, 500, 100); final ScatterChart<Number,Number> sc = new ScatterChart<>(xAxis,yAxis); xAxis.setLabel("Age (years)"); yAxis.setLabel("Returns to date"); sc.setTitle("Investment Overview"); XYChart.Series series1 = new XYChart.Series(); series1.setName("Option 1"); series1.getData().add(new XYChart.Data(4.2, 193.2)); series1.getData().add(new XYChart.Data(2.8, 33.6)); … sc.setPrefSize(500, 400); sc.getData().addAll(series1); final Button add = new Button("Add Series"); final Button remove = new Button("Remove Series"); add.setOnAction((ActionEvent e) -> { if (sc.getData() == null) { sc.setData(FXCollections.<XYChart.Series<Number, Number>>observableArrayList()); } ScatterChart.Series<Number, Number> series = new ScatterChart.Series<>(); series.setName("Option " + (sc.getData().size() + 1)); for (int i = 0; i < 100; i++) { series.getData().add( new ScatterChart.Data<>(Math.random() * 100, Math.random() * 500)); sc.getData().add(series); }); remove.setOnAction((ActionEvent e) -> { if (!sc.getData().isEmpty()) sc.getData().remove((int)( Math.random()*(sc.getData().size()-1))); Scatter 分散

Bar Chart final static String austria = "Austria"; final static String brazil = "Brazil"; final static String france = "France"; final static String italy = "Italy"; final static String usa = "USA"; … final CategoryAxis xAxis = new CategoryAxis(); final NumberAxis yAxis = new NumberAxis(); final BarChart<String,Number> bc = new BarChart<>(xAxis,yAxis); bc.setTitle("Country Summary"); xAxis.setLabel("Country"); yAxis.setLabel("Value"); XYChart.Series series1 = new XYChart.Series(); series1.setName("2003"); series1.getData().add(new XYChart.Data(austria, 25601.34)); series1.getData().add(new XYChart.Data(brazil, 20148.82)); series1.getData().add(new XYChart.Data(france, 10000)); series1.getData().add(new XYChart.Data(italy, 35407.15)); series1.getData().add(new XYChart.Data(usa, 12000)); XYChart.Series series2 = new XYChart.Series(); series2.setName("2004"); … XYChart.Series series3 = new XYChart.Series(); series3.setName("2005"); Scene scene = new Scene(bc,800,600); bc.getData().addAll(series1, series2, series3);

4.Handle EVENT

Event Type Hierarchy

Event Dispatch Chain

Event Sample Mouse Event Keyboard Event

Event Filter Register Event Filter Remove Event Filter // Register an event filter for a single node and a specific event type node.addEventFilter(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() { public void handle(MouseEvent) { ... }; }); // Define an event filter EventHandler filter = new EventHandler(<InputEvent>() { public void handle(InputEvent event) { System.out.println("Filtering out event " + event.getEventType()); event.consume(); } // Register the same filter for two different nodes myNode1.addEventFilter(MouseEvent.MOUSE_PRESSED, filter); myNode2.addEventFilter(MouseEvent.MOUSE_PRESSED, filter); // Register the filter for another event type myNode1.addEventFilter(KeyEvent.KEY_PRESSED, filter); // Remove an event filter myNode1.removeEventFilter(MouseEvent.MOUSE_PRESSED, filter);

Event Handler Register Event Handler Remove Event Handler // Register an event handler for a single node and a specific event type node.addEventHandler(DragEvent.DRAG_ENTERED, new EventHandler<DragEvent>() { public void handle(DragEvent) { ... }; }); // Define an event handler EventHandler handler = new EventHandler(<InputEvent>() { public void handle(InputEvent event) { System.out.println("Handling event " + event.getEventType()); event.consume(); } // Register the same handler for two different nodes myNode1.addEventHandler(DragEvent.DRAG_EXITED, handler); myNode2.addEventHandler(DragEvent.DRAG_EXITED, handler); // Register the handler for another event type myNode1.addEventHandler(MouseEvent.MOUSE_DRAGGED, handler); // Remove an event handler myNode1.removeEventHandler(DragEvent.DRAG_EXITED, handler);

Gesture & Touch Events 旋轉 滾動 刷 Gesture 手勢 放大

Java Fx 簡介、架構 開發工具 技術簡介 佈署

產生安裝檔 1/2

產生安裝檔 2/2

Deploy至tomcat 1/2

Deploy至tomcat 2/2

於Browser執行未簽署jnlp檔 之安全性設定

Chrome執行JavaFX jnlp

jnlp檔安全性 1/2 產生keystore

jnlp檔安全性 2/2

Window : 編譯成exe檔 build.fxbuild 的 Packaging Format : 選取為exe D:\Tool\JavaFX\InnoSetup

Window : 編譯成安裝檔(exe) build.fxbuild 的 Packaging Format : 選取為exe 需安裝 Inno Setup http://www.jrsoftware.org/isdl.php D:\Tool\JavaFX\InnoSetup

Window : 編譯成安裝檔(msi) build.fxbuild 的 Packaging Format : 選取為msi 需安裝Wix https://wix.codeplex.com/releases/view/115492 D:\Tool\JavaFX\InnoSetup

Android 編譯成apk檔 eclipse安裝 Eclipse執行 Command line執行 : dalvik-sdk http://dist.springsource.com/release/TOOLS/gradle Command line執行 : dalvik-sdk https://blogs.oracle.com/jfxprg/entry/how_to_build_open_javafx Eclipse 安裝 gradle : http://dist.springsource.com/release/TOOLS/gradle 在公司應該是因window防火牆設定，無法建專案…待研究

iOS : 編譯成dmg檔 build.fxbuild 的 Packaging Format : 選取為dmg 無環境可驗證

Json

JSON JSON基本格式 Java應用JSON ExtJS套件應用JSON JQuery應用JSON Chrome App應用JSON

JSON基本格式 1/2 JSON Object JSON Array 以 { 開始，以 } 結尾 每個名稱後跟著一個 : 號 每對”名稱 : 值”之間用 , 號分隔 JSON Array 以 [ 開始，以 ] 結尾 值之間用 , 號 分隔

JSON基本格式 2/2 JSON Value JSON String JSON Number 值可為String、Number、true、false、null、Object、Array JSON String 由雙引號包圍的任意Unicode字元集合 可使用反斜線 \ 來轉義 JSON Number 與一般數值相同

JSON JSON基本格式 Java應用JSON ExtJS套件應用JSON JQuery應用JSON Chrome App應用JSON

Java處理JSON套件 以javax.json (javax.json-1.0.jar)為例

Java產生JSON字串

Java處理JSON字串

JSON JSON基本格式 Java應用JSON ExtJS套件應用JSON JQuery應用JSON Chrome App應用JSON

ExtJS套件 http://www.sencha.com/products/extjs/

ExtJS套件應用JSON 1/3

ExtJS套件應用JSON 2/3

ExtJS套件應用JSON 3/3

JSON JSON基本格式 Java應用JSON ExtJS套件應用JSON JQuery應用JSON Chrome App應用JSON

JQuery應用SON

JSON JSON基本格式 Java應用JSON ExtJS套件應用JSON JQuery應用JSON Chrome App應用JSON

Chrome App設定檔 : manifest.json

Chrome App啟動Demo

Chrome App : JSON Editor

SQLite

SQLite JavaFX上存取SQLite Android App上存取SQLite

JavaFX上存取SQLite 1/3 記錄本機登入成功資料 http://stackoverflow.com/questions/23764964/can-not-create-sqlite-database-on-mac-permission-issues http://sqlitestudio.pl

JavaFX上存取SQLite 2/3 登入記錄 http://stackoverflow.com/questions/23764964/can-not-create-sqlite-database-on-mac-permission-issues http://sqlitestudio.pl

JavaFX上存取SQLite 3/3 列出訊息 http://stackoverflow.com/questions/23764964/can-not-create-sqlite-database-on-mac-permission-issues http://sqlitestudio.pl

附件 JavaFX上存取SQLite Android App上存取SQLite

Android App上存取SQLite 1/2 http://stackoverflow.com/questions/23764964/can-not-create-sqlite-database-on-mac-permission-issues http://sqlitestudio.pl

Android App上存取SQLite 2/2 http://stackoverflow.com/questions/23764964/can-not-create-sqlite-database-on-mac-permission-issues http://sqlitestudio.pl

Thank You !