jacksparrow

前回は、テキストラベル、テキストボックス、ボタンアクションを使った、簡単なアプリケーションについて、執筆いたしました。今回は、 JavaFX の Stage に、 flickr 等ににアップした、自分の写真を表示する、簡単なアプリケーションの作成方法について、執筆して行きたいと思います。

今回 Scene のエレメントに利用するのは、 "javafx.scene.image.ImageView" と、 " javafx.scene.image.Image" になります。 "javafx.scene.image.ImageView" は、 Scene の中に表示させる画像の位置や、フレームサイズなどを指定するエレメントで、 " javafx.scene.image.Image" は、実際に表示させる画像ファイルのソース URL や、表示サイズなどを指定するエレメントで、 html で言うところの、 <img> タグに相当するものになります。コードに実装する時は、 "javafx.scene.image.ImageView" にネストさせる形で " javafx.scene.image.Image" を実装します。

今回は、私が flickr にアップした以下の写真を表示するアプリケーションの作成を行います。



では早速、アプリケーションの作成に取りかかりたいと思います。前回作成したプロジェクトのソースパッケージに、 "myflickr" と言うパッケージを追加して、そこに新しい fx ファイルを作成します。



作成するファイル名は、 flickr からの画像を表示すると言うことで、 "MyFlickr" と言うファイル名にしました。



デフォルトで定義されている、 content : に "[]" を追記し、 "Text" エレメントを削除して、 NetBenas 右側パレットの "Basic Shapes" にある "Image" を、先ほど追記した "[]" にネストされる様にドラッグアンドドロップします。


ドラッグアンドドロップで展開されたコードは以下のとおり :
ImageView {
　　image: Image {
　　　　url: "{__DIR__}/myPicture.png"
　　}
}上記コード中、 "url: "{__DIR__}/myPicture.png"" と記述されている部分、ここは、 <img> タグで言うところの、 "src" エレメントに相当します。記述方法としては、ファイルの相対パス、あるいは "http://hogehoge/hogehoge.jpg" などの絶対パスで記述します。

そして Stage のデフォルトサイズでは、私が今回表示しようとしている５００×３７５サイズの画像がはみ出してしまうため、サイズを合わせます。横方向のピクセル値は、そのまま適用できますが、縦方向は、タイトルバー部分の２１ピクセルを加算した、３９６を指定する必要があります。修正後のコードは以下のとおり :

Stage {
　　title: "My Favor Hamburg"
　　width: 500
　　height: 396
　　scene: Scene {
　　　　content: [
　　　　　　ImageView {
　　　　　　　　image: Image {
　　　　　　　　　　url: "My Flickr URL"
　　　　　　　　}
　　　　　　}
　　　　]
　　}
}実装作業は以上で完了になります。実行結果は以下のとおりです。



如何でしたでしょうか？　一度覚えてしまえば、 html コードを書くほど、手軽に画像ファイルの表示が出来てしまいますね！　是非皆さんも一度お試しください。
(*｀д´)b goo♪