EdBrowserFX開発記　AIRアプリのEdBrowserをJavaFXで焼き直すよ！

Sunの藤井さんに「EdBrowserをJavaFXで作ったら頭なでなでしてやる」と言われたのでがんばるよ！これ

とりあえずお勉強から。

開発環境を作るよ

1. NetBeans6.5JavaFX版をダウンロード
2. おしまい

勉強

• 真っ白な領域を作るのはこんな感じだよ。Stageは必須だよ。

Stage {
    title: "EdBrowserFX"
    width: 400
    height: 300
    scene: Scene {
        content: [
        //ここにコンポーネントを追加していくよ。
        ]
    }
}

• contentの中にコンポーネントを入れていくよ。まずはボタンだよ。import補完機能がまだないからがんばるんだよ。

import javafx.ext.swing.*;
//省略
        content: [
            SwingButton {
                text: "Button"
                action: function() {
            }
        }
    ]
//省略

• パレットを使ってもいいんだよ。ドラッグorダブルクリックでソースに挿入できるよ。

• 次はテキストフィールドだよ。

        content: [
            SwingButton {
                text: "Button"
                action: function() {
            }
        }
        SwingTextField {
text: "TextField"
columns: 10
editable: true
}
]

• だぶったよwww XとYで位置を指定するよ。

            SwingButton {
                text: "Button"
                translateX:100
                action: function() {
            }
        }

• 次は画像だよ。元ファイルはソースと同じディレクトリに入ってるよ。

            ImageView {
                translateX:100
                translateY:100
                image: Image {
                    url: "{__DIR__}re_shikajiro.jpg"
                }
            }

• このまま書いていくと、contentの中がいっぱいになって見づらいので、こんな感じに書いた方がいいよ。

/*
 * Main.fx
 *
 * Created on 2009/02/02, 18:17:50
 */
package edbrowserfx;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.Cursor;
import javafx.scene.image.Image;
import javafx.ext.swing.;
import javafx.geometry.;
import javafx.animation.;
import javafx.scene.image.ImageView;
import javafx.scene.input.;
var searchFild = SwingTextField {
    width:100
    columns: 10
    text: "TextField"
    editable: true
}
var searchButton = SwingButton {
    translateX:100
    text: "Button"
    action: function() {
}
}
var image = ImageView {
translateX:100
translateY:100
image: Image {
url: "{DIR}re_shikajiro.jpg"
}
}
Stage {
title: "EdBrowserFX"
width: 800
height: 600
scene: Scene {
content: [
searchButton
searchFild
image
]
}
}

今日はここまで。明日はbindとかやっちゃうよ。

感想

• 画面デザインめんどい。FlexBuilderばりになってほしいよ。
• version1.0とそれ以前はパッケージ構成が全然違うから、ネットのサンプルはあてにならないよ。