Updates from April, 2011 Toggle Comment Threads | Keyboard Shortcuts

  • mxshrestha 1:40 am on April 20, 2011 Permalink | Reply
    Tags: keyframes, keyframes in javaFx, timeline, timeline in javaFx   

    Using Timeline and KeyFrames in javaFx 

    JavaFx  provides timeline and key frames to  process actions in a specific order in time. Within timelines there can exists multiple key frames where the actual actions to be taken at a specific time can be specified.  Once specified timeline can be executed by calling the play() or playFromStart() method for the timeline.  Repetition of timeline can be specified by setting value for the repeatCount variable. By setting the value of repeatCount to Timeline.INDEFINITE, we can run the timeline repeatedly until the stop() function is called. Timeline can also be paused by calling the pause() function.

    KeyFrame is where we specify what action to take at what time within the timeline. A KeyFrame has an action (function type) which is executed at the specified time in the time variable. A timeline can have multiple KeyFrames. These key frames are executed once the timeline is started by a play() or playFromStart() function.

    ex:

    
    var timeLine = Timeline
    {
       var contents = hltNodes
       var interval:Duration = 0s;
       repeatCount: 4
    
       keyFrames:
       [
          for (nodes in contents)
          {
             var frame:KeyFrame = KeyFrame
             {
               time: 0s + interval;
    
               action:function():Void
               {
                  nodes.requestFocus();
               }
             }
    
             interval = interval + 5s;
             frame;
          },
          KeyFrame
          {
             time: interval;
          }
       ]
    }
    
    

    This code calls the requestFocus() for all the nodes inside the sequence hltNode in 5 second intervals. After each 5 second, the requestFocus() is moved on to the next node. This timeline is executed 4 times because the value for the repeatCount variable is specified as 4.

     
  • mxshrestha 4:24 am on April 13, 2011 Permalink | Reply
    Tags: container, customnode, , extending custom node in JavaFx, , javaFx container custom node, JavaFX customNode, JavaFX extending Container, JavaFX extending custom node   

    Why use Custom Node and Container? 

    JavaFx has many predefined nodes and layout containers made readily available for use. Also, JavaFx provides the facility to extend custom node to create user defined node and container to create user defined layout.  Predefined nodes like imageview, rectangle, circle, groups, HBox, VBox, e.t.c are great and easy to use and provides lot of flexibility with predefined functions for the nodes. So, when to create a user defined node or user defined container?

    Creating a user defined node by extending custom node allows user to add more flexibility and customization on a node.Consider a group node which has a rectangle node and a ImageView node centered within the rectangle. Now, lets say we have five such group nodes within a VBox node and the visibility of rectangle on all group within the VBox is set to false. Now using the functions defined for VBox, we can easily select each group node within it and request focus for each group node but it would be very tedious or impossible to turn the visibility of rectangle inside the group to true. This is where extending custom node comes to play. We can create a custom node with the group and rectangle and the VBox with the group and rectangle within it. Now in the custom node we can define a function which can turn the visibility of rectangle to true and false. Now using this custom node instead of just the VBox that we used  earlier, we can set the visibility of rectangle to true or false at any point or any where in the code.

    Similarly a user defined container by extending container class allows user to add more flexibility and customization for laying out nodes. Using predefined layout containers like HBox, Tiles, VBox, e.t.c it is possible to create attractive and interesting layouts but the layouts are constrained. Lets say we want to develop an image gallery such that the first row displays one image, second row displays two image, third row displays three image and so on.  It is possible to create such image gallery using HBox, Tiles, or VBox but the code would look nasty and would be tedious to do so. However, by extending a container and creating a custom layout we can do so easily using the positionNode() and layoutNode() methods provided. We can easily use a for loop and within it use the positionNode() function to position the images. Also, for resizable nodes we can resize the nodes within the container.

    From my perspective, extending customNode and container provides great flexibility and customization,but it is always good to use predefined nodes unless creating custom node or container is really required. It keeps the code simple and manageable. While extending custom Node or container, it is always required to override the create() function and the doLayout() function respectively.

     
  • mxshrestha 4:23 am on April 6, 2011 Permalink | Reply
    Tags: fullscreen in javaFx, , 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.

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