の次世代

櫻庭 祐一

JavaFX+FXML+CSS =Java GUI

Java in the Box

#jt12_s123

AgendaGUI Formation

FXMLCSS

Tool

Conclusion

GUIGUIStructure

Presentation

StructureExternal: Layout UI PartsExternal: Layout UI Parts

Internal: Instantiation & Associate UI Parts

Internal: Instantiation & Associate UI Parts

Structure

Scene GraphScene Graph

GUI Structure= Tree

GUI Structure= Tree

Stage

StageScene

Scene

VBox

VBox

HBox

HBox

TableView

TableView

LabelTextFieldButton

SVGSVG

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();

Composite PatternComposite PatternComponent

CompositeLeaf

Too Many add() & setX()

XML Script

FXMLGroovyFXGroovyFXScalaFXScalaFXVisageVisage

FXMLXML Document for GUI Object Instantiattion & Association

Schema-less

Linkable FXML to Java Code

Scripting

How to...

Class Element

Property Attribute or Element

Import statement

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> );

Link FXML to JavaView

Model

Controller

FXML

Java

Java?

Link FXML to Java

ModelView ControllerFXML Java Java

<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()); } }

Demo

Presentation

Design

Application

External: Color, Font, Alignment, Mergin et al.Internal: Setting GUI Object properties

Presentation

CSS

CSS3 ways: Embedded in Code

Embedded in FXMLExternal File

Based on CSS 2.1, Partly CSS 3

Prefix: -fx-

CSS DemoScene scene = new Scene(container, 400, 100);// スタイルシートの設定scene.getStylesheets().add("/style.css");

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;}

Tool

Logic:

Design: Scene Builder

ConclusionConclusion

GUI = Structure + PresentationGUI = Structure + Presentation

FXMLFXML CSSCSS

Tool:Tool: NetBeans & Scene BuilderNetBeans & Scene Builder

櫻庭 祐一櫻庭 祐一Java in the BoxJava in the Box

の次世代

JavaFX+FXML+CSS =Java GUI