Tagged: VBox Toggle Comment Threads | Keyboard Shortcuts

  • 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, VBox   

    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;
    
    
    Advertisements
     
    • 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 4:34 am on March 23, 2011 Permalink | Reply
    Tags: , JavaFX abstract class, JavaFX pages, JavaFX screens, multiple pages in JavaFx, multiple scenes in javaFx, Multiple Screens in javaFx, pages in JavaFx, pages/screens/scenes, scenes, scenes in JavaFx, screens in JavaFx, VBox   

    Managing multiple scenes in JavaFx 

    Although JavaFx scenes are different than Java panels, they both can be used for displaying what needs to be shown in the screen at run time. Suppose that we  have a login screen that is displayed when the application runs, and after the user submits  the user name and password lets say the application directs the user to the respective page according to the user credential. Learning how this works was quite a handful and one of the approach that I found was interesting and useful was by using abstract class. Keep in mind that this can be done other ways as well.  Here, I am introducing a method using abstract class to navigate to different pages that needs to be displayed.

    Lets start with the abstract class. This class will be extended by all other pages or screens that needs to be displayed.

    
    public abstract class View extends CustomNode
    {
      protected var currentView: Node; //holds the value of the current page to be  displayed
      protected var controller:Controller;//business logic to decide what to display
    
      protected abstract function createView():Void;
    
      override function create(): Node
      {
         createView();
         return currentView
      }
    }
    
    

    The abstract class extends CustomNode and overrides the function create()
    to return the current node of interest. the currentView holds the node
    that needs to be displayed and the controller is of type Controller class
    which I will introduce now. Basically what the controller class does is
    decide on what page needs to be displayed and then forwards the page to the
    scene to be displayed.

    public class Controller
    {
        public var contents: Node;
        public var loginForm: Login; //holds login page
        public var adminScreen: AdminPage; //holds admin page
        public var guestScreen: GuestPage;//holds guest page
    
        public function showLoginScreen()
        {
           if(loginForm == null)
           {
             loginForm = Login
             {
               controller: this;
             }
           }
    
           contents = loginForm;
        }
    
        public function showAdminPage()
        {
            if(adminScreen == null)
            {
                adminScreen = AdminPage
                {
                    controller: this;
                }
            }
            contents= adminScreen;
        }
    
        public function showGuestPage()
        {
            if(guestScreen == null)
            {
                guestScreen = GuestPage
                {
                   controller: this;
                }
            }
            contents = guestScreen;
        }
    }
    
    

    Now that the hard part is over, lets introduce the Main.fx.

    
    var controller = new Controller;
    
    var stage: Stage = Stage
    {
       title: "Demo"
       scene: Scene
       {
          width: 800
          height: 800
    
          content: bind
          [
             controller.contents
          ]
       }
    }
    

    The content of the stage is bound to the contents of the controller. So,
    everytime the content of the controller changes the scene is updated with the
    new content.

    Here is a simple code for login.fx

    public class Login extends View
    {
       var userNameLbl = Label
       {
          text:"User Name:"
       }
    
       var passwordLbl = Label
       {
          text:"Password:"
       }
    
       var userNameTxt = TextBox
       {
          columns:10
       }
    
       var passwordTxt = PasswordBox
       {
          columns:10
       }
    
       var submitBtn = Button
       {
          action: function()
          {
             if((userNameTxt.text.compareTo("admin") == 0) and (passwordTxt.text.compareTo("admin") == 0))
             {
                 controller.showAdminPage();
             }
             else
             {
                 controller.showGuestPage();
             }
          }
          text:"Login"
       }
    
       var loginBox:VBox = VBox
       {
          spacing: 5
          nodeHPos: HPos.RIGHT
    
          content:
          [
              HBox
              {
                  nodeVPos: VPos.BOTTOM //bottom aligning the nodes
    
                  spacing: 2 //spacing between the two corresponding nodes
    
                 content:
                 [
                   userNameLbl,
                   userNameTxt
                 ]
              }
    
              HBox
              {
                 hpos: HPos.RIGHT //right align within the containers width
                 nodeVPos: VPos.BOTTOM //bottom align the nodes
                 spacing: 2 //spacing between the two corresponding nodes
                 content:
                 [
                    passwordLbl,
                    passwordTxt,
    
                 ]
              }
    
              submitBtn
           ]
        }
    
        //must override this function
        override function createView():Void
        {
           currentView = loginBox;
        }
    
    }
    

    Here a simple login form is created and the class extends the abstract class
    view. So, when the create() method (called automatically) of the View is called
    the createView() method of this class is called which will assign the loginBox to currentView.

    Similarly we create AdminPage class and the GuestPage class. Both extends the view class

    
    public class AdminPage extends View
    {
       /*
         write the code for what needs to be displayed in admin page
         For example: adminPageView.AdminPageView can be any node i.e.
         Group, Image, label, HBox, etc.
       */
       override function  createView():Void
       {
          currentView = adminPageView;
       }
    }
    
    public class GuestPage extends View
    {
        /*
          write the code for what needs to be displayed in guest page
          For example: guestPageView. GuestPageView can be any node i.e.
           Group, Image, label, HBox, etc.
         */
        override function createView():Void
        {
           currentView = guestPageView
        }
    }
    
     
  • mxshrestha 10:41 pm on February 22, 2011 Permalink | Reply
    Tags: , HBox javaFx, VBox, VBox javaFx   

    Using HBox and VBox in JavaFx 

    HBox:

    HBox is a container in JavaFx  and it lays out its content nodes horizontally in a single row. Spacing between the content nodes can also be specified using spacing variable.

    A simple example of HBox is:

    
    var pageBox: HBox = HBox
    
    {
    
       spacing:2;
    
       content:
    
       [
    
         for (pages in [0..noPages])
    
         {
    
            PageIndicator
    
            {
    
               pageNo: pages;
    
               changePageNo: changePageNumber;
    
            }
        }
      ]
    }
    
    

    Horizontal position of the row of nodes can also be specified by using the hPos variable  and similarly vPos variable can be used to specify the vertical positioning of the row of nodes. Vertical positioning of each nodes can be specified by using nodeVPos variable.

    The output with total no of Pages 2 is:

    More info:

    http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.2/docs/api/javafx.scene.layout/javafx.scene.layout.HBox.html

    VBox:

    VBox is a container in JavaFx  and it lays out its content nodes vertically in a single column. Similar to HBox, spacing between the content nodes can also be specified using spacing variable. The hPos and vPos variables can be used to specify the horizontal positioning of the column of nodes and the vertical positioning of the column of nodes respectively. Also as in HBox, nodeHPos variable in VBox can be used to  specify the horizontal position of each node within the layout space.

     
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