Quick Image Gallery using Tiles and ScrollView

Tiles and scrollview in javaFx can be used to develop a simple image gallery. Using Tile layout, we can easily specify the number of rows and columns we want to display images in image gallery along with the spacing between rows and columns. ScrollView can be used in image gallery to scroll up and down or left and right when the contents (image Thumbs) to be displayed take more space than the size of the screen specified. The basic idea is to load the images in a sequence type (More about sequence type: http://mxshrestha.wordpress.com/2011/02/08/duration-types-and-sequence-types-in-javafx/) then create a thumb for the images and then display it in the screen using the Tile layout.

Example:

public class gallery

{
     //reading the image location as string and storing it in sequence imageList
     //for the sake of example my images are named 0-10, so that i can easily read
     //it using a for loop. You can load the images as you want
     def imageList:String[] = for (cnt in [0..10])
                     {
                         {"{__DIR__}Images/{cnt}.jpg"};
                     }

     //placeholder to be displayed when image is being loaded
     var imagePlaceHolder: Image = Image
     {
          url: "{__DIR__}Images/placeholder.jpg"
     }

     var thumbNails: Group[] =
     for(image:String in imageList)
     {
         //background to place the thumbnail on. just to make it look better
         var bgRect: Rectangle = Rectangle
         {
             width: 210
             height: 235
             fill: Color.WHEAT
             arcHeight:20
             arcWidth:20
         }

        //creates a thumbnail of the image of size 200*200
         var thumbImage:Image = Image
         {
             url: image
             width: 200;
             height: 200;
             placeholder: imagePlaceHolder
             backgroundLoading:true
         }
         //creates a image view to be displayed of the image
         var thumb:ImageView = ImageView
         {
             image: thumbImage
         }
        //gets the filename of the image.
         var imgLabel: String =
         {
             var offset = {image.lastIndexOf("/") + 1}
             image.substring(offset)
         }
         //title of tht image thumb
         var title: Label = Label
         {
             width:20
             text: imgLabel;
         }
        //to create a thumb with image and the title below the image
         var imageThumb: VBox = VBox
         {
             spacing: 5
             nodeHPos: HPos.CENTER
             content:
             [
                thumb,
                title
             ]
                 //to center the thumb within the bgRect that we created earlier
             layoutX:bind (bgRect.layoutBounds.width - imageThumb.layoutBounds.width)/2;
             layoutY:bind (bgRect.layoutBounds.height - imageThumb.layoutBounds.height)/2;
         }

        //group the bgRect and the thumb together
         var thumbGrp:Group = Group
         {
             blocksMouse=true;
             content:
             [
                 bgRect,
                 imageThumb
             ]

            //scale the image thumb when mouse is entered
             onMouseEntered: function(e: MouseEvent): Void
             {
                 thumbGrp.scaleX = 1.2;
                 thumbGrp.scaleY = 1.2;
             }
             //scale out the image thumb when mouse is removed
             onMouseExited: function(e: MouseEvent): Void
             {
                 thumbGrp.scaleX = 1.0;
                 thumbGrp.scaleY = 1.0;
             }


             onMousePressed: function(e: MouseEvent): Void
             {
                //  showFullImage(image);//implementation is not shown.
                                      //just create an imageView and
                                     //center it in the screen using the
                                    //center formula as above for the rectangle
                                    //and  the thumb
                                    //uncomment and write function to implement it.
             }
         }
     }

      var imageTile:Tile = Tile
      {
         layoutX: bind (galleryScrollView.layoutBounds.width - imageTile.layoutBounds.width)/2;
         layoutY: bind (galleryScrollView.layoutBounds.minY + 10);

         hgap:30//gap between columns
         vgap:40//gap between rows


        //235 = 200 for image + 5 for spacing + 30 hgap
        //245 = 200 for image + 5 for spacing + 30 vgap
        //dynamically calculate row columns according to the screen size
         columns: bind (galleryScrollView.layoutBounds.width) / 240 as Integer;//typecasting in integer
         rows: bind (galleryScrollView.layoutBounds.height) /275 as Integer;//typecasting in integer

         content:bind thumbNails
      }

      var galleryScrollView: ScrollView = ScrollView
      {
           //screenWidth and screenHeight is the desired width and height of the screen.
           //screenWidth and screenHeight changes as the user changes the size of the screen.
           translateX: bind (screenWidth - galleryScrollView.layoutBounds.width)/2;
           translateY: bind (screenHeight - galleryScrollView.layoutBounds.height)/2;

           //layout info of scrollview
           layoutInfo:LayoutInfo
           {
              width:bind screenWidth
              height:bind screenHeight
           }

           node:imageTile

           //handles the scrollbar policy
           //scrollbars are displayed only when needed
           hbarPolicy: ScrollBarPolicy.AS_NEEDED
           vbarPolicy: ScrollBarPolicy.AS_NEEDED
     }
}

var stage: Stage = Stage
{
 title: "Image Gallery"

 width: Screen.primary.bounds.width //gets the width of monitor
 height:Screen.primary.bounds.height //gets the height of monitor

 fullScreen:true; //changes the display to fullscreen

 scene: Scene
 {
       width: 800 //width of the scene
       height: 800 /height of the scene

       content:
       [
           galleryScrollView
       ]
  }
}

var screenWidth = bind stage.scene.width;
var screenHeight = bind stage.scene.height;