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.

    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;
    
    
     
    • Francois 4:44 am on September 13, 2013 Permalink | Reply

      Hi,

      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
     {
       content:
       [
         Stack
         {
            content:
             [
               bgRect,
               pageTxt
             ]
         }
       ]
     }
    

    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.

     

     

     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel