JavaFX 2.0 - Javaによるリッチクライアント基盤 (後編)

        // サウンドの再生
        String soundURL = ...;   
        Media audioMedia = new Media(soundURL);
        MediaPlayer audioPlayer = new MediaPlayer(audioMedia);
        audioPlayer.play();
 
        // ムービーの再生
        String movieURL = ...;
        Media movieMedia = new Media(movieURL);
        MediaPlayer moviePlayer = new MediaPlayer(movieMedia);        
        MediaView movieView = new MediaView(moviePlayer);
        moviePlayer.play();

        // オーディオクリップの再生
        String soundURL = ...;   
        AudioClip clip = new AudioClip(soundURL);
        clip.play();

        Scene scene = new Scene(container, 400, 100);
        // スタイルシートの設定
        scene.getStylesheets().add("/style.css");
 
        Button button1 = new Button("Button1");
        Button button2 = new Button("Button2");
        Button button3 = new Button("Button3");
        // IDを設定する
        button3.setId("button3");

.button {
    -fx-font: 14pt "SansSerif";
    -fx-text-fill: #006666;
    -fx-background-color: orange;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5;
}
 
#button3 {
    -fx-font: 14pt "Monospaced";
    -fx-text-fill: #0066DD;
    -fx-background-color: red;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5;
}

図1 CSSによる描画の変化

        Rectangle rect = new Rectangle(50, 10, 50, 30); 
        Slider slider = new Slider(50, 300, 0);

        // 四角のx座標とスライダの値をバインドさせる
        rect.xProperty().bind(slider.valueProperty());

図2 バインドによる四角とスライダの同期

        Rectangle rect = new Rectangle(50, 10, 300, 70);

        final Slider red = new Slider(0, 254, 254);
        final Slider green = new Slider(0, 254, 254);
        final Slider blue = new Slider(0, 254, 254);

        ObjectBinding<Color> binding = new ObjectBinding<Color>() {
            {
                // スライダの値とバインドする
                super.bind(red.valueProperty());
                super.bind(green.valueProperty());
                super.bind(blue.valueProperty());
            }

            @Override
            protected Color computeValue() {
                // スライダの値が変更されたら、
                // computeValueメソッドがコールされるので
                // Colorオブジェクトを生成して返す              
                return Color.rgb((int)red.getValue(),
                                 (int)green.getValue(),
                                 (int)blue.getValue());
            }
        };
        
        // 四角の色とbindingをバインドする
        rect.fillProperty().bind(binding);

        rect = new Rectangle(10, 60, 50, 30);
 
        timeline = new Timeline();
        timeline.getKeyFrames().addAll(
            new KeyFrame(Duration.ZERO, // 初期位置を設定
                         new KeyValue<Number>(rect.translateXProperty(), 0.0)),
            new KeyFrame(new Duration(1000), // 1秒後の移動量を設定
                         new KeyValue<Number>(rect.translateXProperty(), 320.0)));
        timeline.play();

        Circle circle = new Circle(100, 100, 50);
 
        FadeTransition transition 
            = new FadeTransition(new Duration(2000), circle);
        transition.setFromValue(1.0);
        transition.setToValue(0.0);
 
        transition.play();

図4 フェードの例

        String imageURL = ...;
        image = new ImageView(new Image(imageURL));
        image.setEffect(new Bloom());

        view = new ImageView();

        task = new Task<Image>() {
            @Override
            protected Image execute() {
                // バックグラウンドで行なう処理            
                String imageURL = ...;
                return new Image(imageURL);
            }
        };
        task.setOnDone(new EventHandler<TaskEvent>() {
            // executeメソッドが完了したらコールされる
            public void handle(TaskEvent event) {
                Image image = task.get();
                view.setImage(image);
            }
        });
        // バックグラウンド処理の開始
        task.start();

public class SwingJavaFXDemo extends Application {
    // シーングラフを貼るSwingコンポーネント
    private JFXPanel jfxPanel;
 
    // initSwingメソッドはSwingのスレッドで処理する
    public void initSwing() {
        JFrame frame = new JFrame("Swing-JavaFX Demo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 100);
 
        // シーングラフを貼るコンポーネントを生成
        jfxPanel = new JFXPanel();
        jfxPanel.setPreferredSize(new Dimension(280, 80));
        frame.add(jfxPanel);
 
        frame.setVisible(true);
    }
 
    // startメソッドはJavaFXのスレッドで処理する
    @Override
    public void start(Stage stage) {
        try {
            // Swingのスレッドで処理する
            SwingUtilities.invokeAndWait(new Runnable() {
                public void run() {
                    initSwing();
                }
            });
        } catch (InvocationTargetException ex) {
            return;
        } catch (InterruptedException ex) {
            return;
        }
 
        FlowPane container = new FlowPane(10, 10);
        container.setAlignment(Pos.CENTER);
        Scene scene = new Scene(container);
 
        Label label = new Label("Label");
        TextBox textBox = new TextBox("Text Box");
        Button button = new Button("Button");
        container.getChildren().addAll(label, textBox, button);
 
        // Swingにシーングラフを貼る
        jfxPanel.setScene(scene);
    }
 
    public static void main(String[] args) {
        // JavaFXのスレッドを起動
        Application.launch(SwingJavaFXDemo.class, null);
    }
}

図6 SwingとJavaFXの連携
 

class Hello extends Application {
      void start(Stage stage) {
        def scene = new Scene(
            new Group(
                new Label(
                    text: "Hello, World!",
                    font: new Font(20),
                )
            ), 100, 30);

        stage.scene = scene;
        stage.visible = true;
    }
 
    static main(args) {
        Application.launch(Hello.class, null);
    }
}