2010-02-07

JavaFX 1.2.3 SDK Release

JavaFX

Runtime に続き、ついに JavaFX SDK も 1.2.3 にバージョンアップされたみたいです。
SDK は http://javafx.com/downloads/ からダウンロードできます。

早速インストールして、バージョンを確認...

$ javafx -version
javafx 1.2.3_b36

正確なバージョンは Runtime と同じ 1.2.3_b36 みたい...

リリースノートによると、やはり起動時間の改善がされたようです。
前回の記事の内容も間違いではなかったみたい...

残念ながら『How to use CSS in JavaFX Part 6』の CSS 関連のバグはフィックスされていなかった。
今回は、性能改善がメインでバグフィックスはほとんどされていないのかな...

2010-01-23

JavaFX 1.2.3 Runtime Release

JavaFX

今日もいつものように JavaFX アプリケーションを Applet で実行...
あれ、なんかいつもより起動が早くなったような...

錯覚とは思えないほど早くなっていたので、何か変わってないか Java Preferences を確認してみた。
Snow Leopard の Java はまだ 1.6.0_18 になっていないし...
と思ったら、なんと javafx-rt (SDK ではなく...) が V1.2.2_b5 から V1.2.3_b36 にバージョンアップされていた。
しかも、この V1.2.3_b36 から macosx-universal ではなく macosx-x86_64 に名前が変更されている。
もしかして 64bit ?

まぁ、これが要因かどうかわかりませんが...
起動が早くなったのは確かだし...
JavaFX 1.2 の Runtime もいつの間にか３回もバージョンアップされてるし...
いづれにせよ、JavaFX の環境が徐々に整ってきているのは確かかな。

2010-01-20

static import in JavaFX

JavaFX

今更ながらちょっとした発見があったのでメモしておこう。

実は JavaFX でも static import を密かに？サポートしていたのです。
JavaFX Language Reference にも載っていないのに...

スクリプト関数、スクリプト変数 (JavaFX) もしくは静的メソッド、静的フィールド、Enum 定数 (Java) は

import java.lang.Math.*;
import java.lang.System.currentTimeMillis;
import java.util.Calendar.YEAR;
import java.util.concurrent.TimeUnit.SECONDS

import javafx.scene.layout.Container.*;
import javafx.geometry.VPos.TOP;

のように記述すればよいです。
Java のように static を付ける必要はありません。
普通にクラスを import するのと全く同じです。

もちろん、static import すれば、クラス名を記述しなくても

println(max(1, 2));    // Math.max(int, int)

のようにコーディングできます。

2010-01-11

How to use CSS in JavaFX Part 6

CSS JavaFX

前回までは JavaFX で CSS を利用するメリットばかりまとめてきましたが...
実は、JavaFX 1.2.1 の時点では

匿名(無名)クラスの Node が存在する場合に ID およびクラスセレクタを使うと NPE になる。
新しく生成した Node には CSS のスタイルが適用されない。

といったような既知の（しかも割と致命的な）問題があり、実際にアプリケーションで利用するのは少し厳しいかもしれない。
しかも、他にも小さな問題がありそうだし...

もちろん、既にこれらの問題は修正済みであり、次期リリース JavaFX 1.3 を待つばかりとなっている。
しかし、こんな便利なものは今すぐ使いたいというのが人情というものでしょう。

ということで...
現象と対応を少し調べてみました。
ただ、ちょっと長くなりそうなので、次回から一つずつ書くことに...
もし興味があれば、ぜひ...

2010-01-10

How to use CSS in JavaFX Part 5

CSS JavaFX

前回までで基本的な使い方を大体おさえましたが...
今回も懲りずに JavaFX で CSS...

How to use CSS in JavaFX でも紹介しましたが...
JavaFX では Node 以外にも Control の Skin の変数も CSS プロパティとして設定できるのです。
Control の Skin とは TextBox や Button 等の Control を表示するための Node を生成するためのクラスです。

実は Control の Skin のスタイルが設定できるというのが JavaFX で CSS を利用するメリットの一つでもあるのです。
カスタム Control を作ったことのある方であればわかると思いますが...
スタイルのための変数を実際にその変数を利用する Skin に定義できることは

コードがシンプルになり保守性が向上する
Control の変数が機能的なものだけにできる
Control を変更することなく、見た目が変更できる

とかなりいい感じ...

と言うことで...
早速 Control の見た目を CSS で変更してみましょう。
今回は Button の見た目を変更してみましたが、もちろん、他の Control でも可能です。
ただし、設定できるプロパティはそれぞれ異なります。

ボタンの背景を黒に変更してみる。

f:id:bluepapa32:20091217130034p:image:left

"javafx.scene.control.Button" {
    base: black;
}

ボーダーを緑に変更してみる。

f:id:bluepapa32:20091216235357p:image:left

"javafx.scene.control.Button" {
    border-fill: green;
}

ボーダーの内側のハイライト部分を黄色に変更してみる。

f:id:bluepapa32:20091216235401p:image:left

"javafx.scene.control.Button" {
    highlight-fill: yellow;
}

フォーカス時のハイライトを赤色に変更してみる。

f:id:bluepapa32:20091216235400p:image:left

"javafx.scene.control.Button" {
    focus-fill: red;
}

ボタンの影を赤色に変更してみる。

f:id:bluepapa32:20091216235403p:image:left

"javafx.scene.control.Button" {
    shadow-fill: red;
}

ボタンの文字色を赤色に変更してみる。

f:id:bluepapa32:20091216235404p:image:left

"javafx.scene.control.Button" {
    text-fill: red;
}

LinearGradient してみる。

f:id:bluepapa32:20091217130035p:image:left

"javafx.scene.control.Button" {
    border-fill:    linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
    fill:           linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
    highlight-fill: linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
}

ボタンを丸くしてみる。

f:id:bluepapa32:20091216235358p:image:left

"javafx.scene.control.Button" {
    base: black;
    corner-radius: 20.0;
    width: 20.0;
    height: 20.0;
}

丸ボタンに RadialGradient してみる。

f:id:bluepapa32:20091216235356p:image:left

"javafx.scene.control.Rectangle" {
    corner-radius: 20.0;
    width: 20.0;
    height: 20.0;
    border-fill:    radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, skyblue), (1.00, blue);
    fill:           radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, skyblue), (1.00, blue);
    highlight-fill: radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, skyblue), (1.00, blue);
}

Button の API を見てもらえば分かりますが、Button 自体にはスタイルを設定するための変数はほとんどありません。
しかし、CSS を使えば、ここまで Button の見た目を変えられるのです。
しかも、コードを変更することなく...

このサンプルを通して、少しでも CSS の良さが伝われば幸いです。

2010-01-09

How to use CSS in JavaFX Part 4

CSS JavaFX

今回もまだまだ JavaFX で CSS...

How to use CSS in JavaFX Part 2 でセレクタについて紹介しましたが、
なんと JavaFX でも疑似クラスセレクタが使えるらしい...

f:id:bluepapa32:20100110095554p:image:right

JavaFX 1.2.1 で利用できる疑似クラスセレクタは

:hover
:pressed
:focused

のようだ。説明は How to use CSS in JavaFX Part 2 の方にまとめました。

と言うことで...
今回は簡単な使用例を紹介することに...

今まで紹介してきた CSS を使えば

Stage {
  scene: Scene {
    stylesheets: "{__DIR__}style.css"
    content: [
      Rectangle { id: "bg" }
      Group {
        content: [
          Rectangle { id: "foo",  styleClass: "cell" }
          Rectangle { id: "bar",  styleClass: "cell" }
          Rectangle { id: "hoge", styleClass: "cell" }
          Rectangle { id: "boo",  styleClass: "cell" }
        ]
    }
  }
}

のようにたったこれだけで右図のような表示が可能なのです。
上のコードは構造を表すコードのみでスタイルに関するコードが全く含まれていない。
とってもいい感じ...

このサンプル、右のイメージでは分かりにくいですが、実は

コマにマウスカーソルがあたると赤色になる
コマをクリックすると青色になる
タブキーを押すと黄色の枠が次のコマに移動する

といったこともできるのです。
興味のあるかたは実際に以下のボタンをクリックして試してみてください。

で、肝心な CSS ですが、こんな感じ...
スタイルが構造から完全に分離されていてとってもいい感じ...

style.css

.cell {
    width:   100;
    height:  100;
    fill:   #222222;
    stroke: #222222;
    strokeWidth: 0;
    focusTraversable: true;
}

.cell:hover {
    fill:   red;
    stroke: red;
    strokeWidth: 0;
}

.cell:pressed {
    fill:   blue;
    stroke: blue;
    strokeWidth: 0;
}

.cell:focused {
    stroke: #FFF04F;
    strokeWidth: 3;
}

#bg {
    width:  215;
    height: 215;
    fill:   black;
    focusTraversable: false;
}

#foo {
    layoutX: 5;
    layoutY: 5;
}

#bar {
    layoutX: 5;
    layoutY: 110;
}

#hoge {
    layoutX: 110;
    layoutY: 5;
}

#boo {
    layoutX: 110;
    layoutY: 110;
}

"javafx.scene.shape.Rectangle" {
    cache:  true;
    smooth: false;
}

2010-01-08

How to use CSS in JavaFX Part 3

CSS JavaFX

今回も懲りずに JavaFX で CSS...
今回は CSS プロパティのデータ型についてです。

JavaFX 1.2.1 の CSS プロパティには

Number
String
Boolean
Font
Color
Paint
URL

といったデータ型が利用できます。
以下はそれぞれの使用例です。

Number

整数、少数どちらも指定可能です。

"javafx.scene.shape.Rectangle" {
    layoutX: 10;
    layoutY: 10;
    width:   20.5;
    height:  20.5;
}

String

任意の文字列をダブルクォートで括って指定します。

"javafx.scene.text.Text" {
    content: "HOGE";
}

でも、これってスタイル？？

Boolean

true もしくは false が指定できます。

"javafx.scene.shape.Rectangle" {
    visible: false;
}

Font

Font は

FontWeight FontPosture サイズフォント名

の順で指定します。
FontWeight と FontPosture は省略することができます。
現段階では相対サイズをサポートしていないようなので、pt で指定するのが無難かと...

"javafx.scene.text.Text".a {
    font: bold italic 14pt "Arial";
}

"javafx.scene.text.Text".b {
    font: italic 14pt "Arial";
}

"javafx.scene.text.Text".c {
    font: bold 14pt "Arial";
}

"javafx.scene.text.Text".d {
    font: 14pt "Arial";
}

Color

以下の３つの形式で指定できます。

"javafx.scene.shape.Rectangle".a {
    fill: rgb(255, 255, 0);
}

"javafx.scene.shape.Rectangle".b {
    fill: red;
}

"javafx.scene.shape.Rectangle".c {
    fill: #FFFFFF;
}

Paint

ちょっと感動ものです。CSS でグラデーションが指定できるとは...

まずは LinearGradient してみる。
書式は

linear (startX, startY) to (endX, endY) stops (offset, Color), (offset, Color), ... cycleMethod;

です。cycleMethod には reflect, repeat を指定できます。もちろん省略しても OK...

"javafx.scene.shape.Rectangle" {
    fill: linear (0%, 0%) to (0%, 100%) stops (0.00, #555555), (0.40, #000000), (0.60, #000000), (1.00, #555555);
}

お次ぎは RadialGradient してみる。
書式は

radial (centerX, centerY), 100% focus(focusX, focusY) stops (offset, Color), (offset, Color), ... cycleMethod;

です。cycleMethod には reflect, repeat を指定できます。もちろん省略しても OK...

"javafx.scene.shape.Circle" {
    fill: radial (0%, 0%) , 100% focus(25%, 25%) stops (0.00, #7777777), (1.00, #000000);
}

URL

画像の URL を指定します。URL はダブルクォートしてはいけません。
もちろん、URL ですので http:// も OK です。

"javafx.scene.image.ImageView" {
    image: url(file:/path/to/image.png)
}