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

JavaFX NetBeans

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とそれ以前はパッケージ構成が全然違うから、ネットのサンプルはあてにならないよ。