jacksparrow

前回は、 flickr 等へアップした画像ファイルを表示する為の、 javafx.scene.image.ImageView と javafx.scene.image.Image の使用方法について執筆いたしました。今回は、前々回執筆した、ボタンアクションの実装例を応用して組み合わせ、 Scene に表示された画像を、ボタンアクションによって切り替える簡単な、アルバムフリップのような、簡単なアプリケーションを作成して行きたいと思います。

注意事項としては、 javafx.scene.image.Image のエレメント、 "url" は、一度初期化すると、変更できないと言う仕様の為、画像ファイルの表示切り替えを行う場合は、 javafx.scene.image.ImageView のエレメント "image" 毎置き換える様に、コードを記述する必要があると言うことです。

それでは早速、今回私は以前このブログで投稿した、お気に入りのハンバーグ＆ステーキレストランで使用した、７枚のフリッカー画像を使用して、作業を進めて行きます。

まずは、切り替えに使用する Image エレメントを、配列変数に定義します。以下のコードを参照ください。 :
var imageList = [
　　Image {
　　　　url: "My Flickr URL1"
　　},
　　Image {
　　　　url: "My Flickr URL2"
　　},
　　Image {
　　　　url: "My Flickr URL3"
　　},
　　Image {
　　　　url: "My Flickr URL4"
　　},
　　Image {
　　　　url: "My Flickr URL5"
　　},
　　Image {
　　　　url: "My Flickr URL6"
　　},
　　Image {
　　　　url: "My Flickr URL7"
　　}
];配列変数を宣言する場合は、 "=" の右辺で "[]" を記述し、各エレメントは "," でつなぎます。この記述、 Java と言うよりは、 JavaScript に近いですね。 var は特に型を持たず、 "=" の右辺に記述されたインスタンスによって、その型が決定されることを意味していることが、容易に解釈できるかと思います。これと合わせて、表示させたい Image エレメントの index 番号を管理するための変数 index を定義します。
var index = 0;そして、ボタンアクションで Image エレメントを入れ替えるため、 ImageView も変数化しておきます。コードは以下のとおり :
var imageView: ImageView = ImageView {
　　image: imageList[0];
　　x: 25
　　y: 25
}image エレメントには、画面に初期表示させたい画像を指定しています。そして表示位置についてですが、今回は Scene にボタンを実装すると言うこともあり、 Stage のサイズを、画像よりも、縦横それぞれ５０ピクセルづつ大きくし、その真ん中に画像を表示させる様にするため、それぞれ 25 ピクセルで指定しています。

そしてアクションボタンを実装した Stage と Scene のコードは以下のとおり :
Stage {
　　title: "My Favor Hamburg"
　　width: 550
　　height: 446
　　scene: Scene {
　　　　fill: Color.BLACK
　　　　content: [
　　　　　　imageView,
　　　　　　SwingButton {
　　　　　　　　translateX: 240
　　　　　　　　translateY: 400
　　　　　　　　text: "NextPic"
　　　　　　　　action: function() {
　　　　　　　　　　index++;
　　　　　　　　　　if(index>6) {
　　　　　　　　　　　　index = 0;
　　　　　　　　　　}
　　　　　　　　　　imageView.image = imageList[index]
　　　　　　　　}
　　　　　　}
　　　　]
　　}
}上記コードにて、今まで使用しなかった Scene の "fill" エレメントですが、これは、背景色を指定する為のエレメントで、 html で言うところの "bgcolor" のような物です。そして此処に色の指定をする場合は、必ず、 javafx.scene.paint.Color を利用する必要があります。他のパッケージの Color を使用すると、コンパイルエラーとなります。因に今回は、アルバムっぽくする為背景色を黒にしました。

そして content[] のネスト内に、先ほど変数宣言した、 "imageView" と、 SwingButton を実装します。 SwingButton の action: function では、 index を１づつ加算し、配列番号最大を超えたら、元に戻る様にし、算出された index を元に、 imageView の image エレメントを、ボタンがクリックされる度に置き換える様記述しています。

これで実装作業は完了です。早速動かしてみましょう。今回は、 javaws （ Web スタート）コマンドから、 NetBeans で生成された jnlp ファイル経由で実行してみました。以下のスクリーンキャストをご覧ください。




因に上記スクリーンキャストで動作させたアプリケーションは、以下のコマンドでお試し頂けます。
javaws http://www7.atpages.jp/torutuga/javafx/MyFlickr.jnlp※注）　お試用にあたっては、 JavaSE 6 update 12 をご利用ください。 Java のダウンロードとインストールはこちらからできます。

如何でしたでしょうか？　それほど難解なコードを書く事もなく、アプリケーションの作成ができてしまいますね　(*｀д´)b goo♪　これを応用すれば、プレゼンツールなんかもおちゃのこさいさいなんて方、少なくないのではないかと思います。皆さんも是非トライしてみて下さい。