Tagged: group Toggle Comment Threads | Keyboard Shortcuts

  • mxshrestha 4:23 am on April 6, 2011 Permalink | Reply
    Tags: fullscreen in javaFx, group, image gallery, image gallery using javaFx, image tiles, monitor height, monitor width, screen height using javaFx, screen width using javaFx, scrollView, tiles, tiles in javaFx, typeCasting in javaFx,   

    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: https://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.


    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])
         //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
            //creates a thumbnail of the image of size 200*200
             var thumbImage:Image = Image
                 url: image
                 width: 200;
                 height: 200;
                 placeholder: imagePlaceHolder
             //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}
             //title of tht image thumb
             var title: Label = Label
                 text: imgLabel;
            //to create a thumb with image and the title below the image
             var imageThumb: VBox = VBox
                 spacing: 5
                 nodeHPos: HPos.CENTER
                     //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
                //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
                  width:bind screenWidth
                  height:bind screenHeight
               //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
    var screenWidth = bind stage.scene.width;
    var screenHeight = bind stage.scene.height;
    • Francois 4:44 am on September 13, 2013 Permalink | Reply


      I’m trying to build an image manager in JavaFX (quite new to JavaFX and eloring the features) and I think this would solve on of my issues. I’m trying to create a new project in NetBean to run this sample and play with it but I’m unable to… This isn’t written in Java? Is it Groovy? How can I incorporate that into a working project? Many thanks!

      • mxshrestha 5:01 am on September 13, 2013 Permalink | Reply

        Hi Francois,
        The examples are in JavaFx. However the logics are commented out for some operations. Also make sure that the path for folder with the images are correct. Otherwise images will not be loaded.

  • mxshrestha 10:06 pm on February 22, 2011 Permalink | Reply
    Tags: group, group in javaFx, JavaFx group   

    Using Group in JavaFx 

    Using Group in JavaFx:
    Group in JavaFx can be used to put multiple nodes together in order and then later use it as one. Any effect applied to the group will be applied to all the children nodes.
    For example:

     var bgRect = Rectangle
       width: 20,
       height: 20,
       arcHeight: 5;
       arcWidth: 5;
       fill: Color.CYAN
     var pageTxt = Text
       font: Font
          size: 15
     content: pageString;
     var pageNoGrp = Group

    The variable pageNoGrp is a group that contains a stack of bgRect node and pageTxt node.  It will have a background rectangle of specified dimensions and the pageTxt is stacked on top of the rectangle.

    The output is looks like:

    Here the pagetext zero(0) is stacked on top of rectange.



Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc