カスタムコンポーネントでメニューを作ってみた

世の中はFlex（Flash） vs HTML5 vs Silverlightで、JavaFXなんて比較もされていませんが、どのようなRIAライフをお過ごしでしょうか？
さて、今回はグローバルナビゲーションとかタブメニューとかそんなコンポーネントのサンプルです。

いつものようにサンプルはこちらか確認できます。ソースコード類も公開しているので興味のある人はご覧ください。

解説

書式はこんな感じで定義できるようにしました。

var home:NavigationMenuItem;
var company:NavigationMenuItem;
var products:NavigationMenuItem;
var navi = NavigationMenu {
        width: 540, height: 30 // ナビゲーションバーの幅と高さ
        type: NavigationMenu.NAVI_TYPE_TAB // またはNAVI_TYPE_BUTTON
        font: Font { size: 14 }
        items: [ // メニュー
            home = NavigationMenuItem {
                text: "ホーム" // 表示テキスト
//                width: 200  // widthを指定しないと均等割
                action: function() { // クリック時のアクション定義
                    println(home.text);
                }
            }
            company = NavigationMenuItem {
                text: "会社概要"
                action: function() {
                    println(company.text);
                }
            }
            products = NavigationMenuItem {
                text: "製品"
                action: function() {
                    println(products.text);
                }
            }
        ]
};

内部ではNavigationMenu はCustomNodeで作られており、さらにHBoxで複数のボタンを横に並べる構造になっています。
ボタンはナビゲーション用にカスタムボタンを定義し、適当なグラデーションとエフェクトを適用しました。

非常に簡単に独自コンポーネントを作ることが可能で、使い方も宣言的に簡潔に記述できるように作れるのはJavaFXの大きな特徴です。