Simple Colorful FlowPanes

一部APIが変更になっています。

scalafx.stage.Stage => scalafx.application.JFXApp.PrimaryStageなど

以下のようにビルド済みのjarもダウンロード可能になってます。

http://code.google.com/p/scalafx/downloads/list

scalafx_2.9.3-1.0.0-M2.jar ScalaFX 1.0.0-M2 compiled for Scala 2.9.3 Featured

scalafx_2.10-1.0.0-M2.jar ScalaFX 1.0.0-M2 compiled for Scala 2.10 Featured

scalafx_2.9.2-1.0.0-M2.jar ScalaFX 1.0.0-M2 compiled for Scala 2.9.2

scalafxのデモにあるSimpleColorfulCirclesのCircleをFlowPaneに変えるとImageViewを貼付ける事ができます。

import scalafx.scene.image.ImageView
import scalafx.scene.image.Image

imageを読み込みながらのImageView配列の宣言の仕方は以下のようになります。
imageviewtest_scalafx.resourcesというパッケージの中に画像データを置いた場合。

var imageViews: Seq[ImageView] = Seq[ImageView](
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/1.jpg"))},
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/2.jpg"))},
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/3.jpg"))}, 
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/4.jpg"))},
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/5.jpg"))}, 
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/6.jpg"))}, 
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/7.jpg"))},
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/8.jpg"))},
                     new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/9.jpg"))},
					 new ImageView{image = new Image(getClass().getResourceAsStream("/imageviewtest_scalafx/resources/10.jpg"))})

FlowPaneをfor文で10個作りながらFlowPaneにImageViewをセットします。そしてfor文で作ったFlowPaneの配列とLinearGradientの効果をつけたRectangleをSceneにセットします。
画像を20個用意できるなら”flows = for (i <- 0 until 20) yield new FlowPane {”に変更すれば良いです。

 stage = new PrimaryStage {
    
    title.value = "Simple Colorful FlowPanes"
    width = 800
    height = 600
    scene = new Scene {
    fill = BLACK
    flows = for (i <- 0 until 10) yield new FlowPane {
	  
    vgap = 8
    hgap = 4
    prefWrapLength = 122
	
    imageViews(i).preserveRatio = true
    imageViews(i).fitWidth = 122
    content = List(imageViews(i))
	
      }
    content = flows :+ new Rectangle {
      width <== scene.width
      height <== scene.height
      fill = new LinearGradient(0, 1, 1, 0, true, NO_CYCLE,
      Stops(0xf8bd55, 0xc0fe56, 0x5dfbc1, 0x64c2f8, 0xbe4af7, 0xed5fc2, 0xef504c, 0xf2660f))
      blendMode = OVERLAY
      }
    }
  }


WebViewを貼付けると。