javafx+fxml+css =java gui の次世代 many add() & setx() leaf composite xml script fxml...
TRANSCRIPT
![Page 1: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/1.jpg)
の次世代
櫻庭 祐一
JavaFX+FXML+CSS =Java GUI
Java in the Box
#jt12_s123
![Page 2: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/2.jpg)
AgendaGUI Formation
FXMLCSS
Tool
Conclusion
![Page 3: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/3.jpg)
GUIGUIStructure
Presentation
![Page 4: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/4.jpg)
StructureExternal: Layout UI PartsExternal: Layout UI Parts
Internal: Instantiation & Associate UI Parts
Internal: Instantiation & Associate UI Parts
![Page 5: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/5.jpg)
Structure
Scene GraphScene Graph
![Page 6: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/6.jpg)
GUI Structure= Tree
GUI Structure= Tree
![Page 7: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/7.jpg)
Stage
StageScene
Scene
VBox
VBox
HBox
HBox
TableView
TableView
LabelTextFieldButton
![Page 8: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/8.jpg)
SVGSVG
![Page 9: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/9.jpg)
public class Hello extends Application {
}
public static void main(String[] args) { Application.launch(args); }
@Override public void start(Stage stage) {
}SceneGraph
// コンテナ Group container = new Group(); // Scene Graph のルートを生成し、コンテナを貼る Scene scene = new Scene(container, 100, 20); stage.setScene(scene);
// ラベルを生成しコンテナに貼る Label label = new Label("Hello, World!"); container.getChildren().add(label); stage.show();
![Page 10: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/10.jpg)
Composite PatternComposite PatternComponent
CompositeLeaf
Too Many add() & setX()
![Page 11: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/11.jpg)
XML Script
FXMLGroovyFXGroovyFXScalaFXScalaFXVisageVisage
![Page 12: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/12.jpg)
FXMLXML Document for GUI Object Instantiattion & Association
Schema-less
Linkable FXML to Java Code
Scripting
![Page 13: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/13.jpg)
How to...
Class Element
Property Attribute or Element
Import statement
![Page 14: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/14.jpg)
sample.fxml<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?>
<StackPane prefHeight="200" prefWidth="320"> <children> <Label text="Hello, World!"> <font> <Font size="24" /> </font> </Label> </children></StackPane>
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?>
<StackPane prefHeight="200" prefWidth="320"> <children> <Label text="Hello, World!"> <font> <Font size="24" /> </font> </Label> </children></StackPane>
StackPane root = FXMLLoader.load( <sample.fxml の URL> );StackPane root = FXMLLoader.load( <sample.fxml の URL> );
![Page 15: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/15.jpg)
Link FXML to JavaView
Model
Controller
FXML
Java
Java?
![Page 16: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/16.jpg)
Link FXML to Java
ModelView ControllerFXML Java Java
![Page 17: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/17.jpg)
<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="View"> <children> <HBox> <children> <TextField fx:id="field" /> <Button text="Update" onAction="#handleAction" /> </children> </HBox> <Label fx:id="label" /> </children></VBox>
public class View { @FXML private TextField field; @FXML private Label label;
@FXML private void handleAction(ActionEvent event) { label.setText(field.getText()); } }
![Page 18: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/18.jpg)
Demo
![Page 19: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/19.jpg)
Presentation
Design
Application
External: Color, Font, Alignment, Mergin et al.Internal: Setting GUI Object properties
![Page 20: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/20.jpg)
Presentation
CSS
![Page 21: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/21.jpg)
CSS3 ways: Embedded in Code
Embedded in FXMLExternal File
Based on CSS 2.1, Partly CSS 3
Prefix: -fx-
![Page 22: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/22.jpg)
CSS DemoScene scene = new Scene(container, 400, 100);// スタイルシートの設定scene.getStylesheets().add("/style.css");
![Page 23: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/23.jpg)
CSS Demo
.button { -fx-font: 24pt "SansSerif"; -fx-text-fill: #006666; -fx-background-color: orange; -fx-border-radius: 20; -fx-background-radius: 20; -fx-padding: 5;}
.button { -fx-font: 16pt "SansSerif"; -fx-text-fill: #00FF33; -fx-background-color: #0066FF; -fx-border-radius: 0; -fx-background-radius: 0; -fx-padding: 20;}
![Page 24: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/24.jpg)
Tool
Logic:
Design: Scene Builder
![Page 25: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/25.jpg)
ConclusionConclusion
GUI = Structure + PresentationGUI = Structure + Presentation
FXMLFXML CSSCSS
Tool:Tool: NetBeans & Scene BuilderNetBeans & Scene Builder
![Page 26: JavaFX+FXML+CSS =Java GUI の次世代 Many add() & setX() Leaf Composite XML Script FXML GroovyFX ScalaFX Visage FXML XML Document for GUI Object Instantiattion & Association Schema-less](https://reader030.vdocuments.mx/reader030/viewer/2022013014/5b0492ae7f8b9a6c0b8e0549/html5/thumbnails/26.jpg)
櫻庭 祐一櫻庭 祐一Java in the BoxJava in the Box
の次世代
JavaFX+FXML+CSS =Java GUI