Tagged: extending container in javafx Toggle Comment Threads | Keyboard Shortcuts

  • mxshrestha 4:24 am on April 13, 2011 Permalink | Reply
    Tags: container, customnode, extending container in javafx, 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 1:09 am on February 16, 2011 Permalink | Reply
    Tags: container in javafx, extending container in javafx, , javafx.scene.layout.container   

    Creating a node using javafx.scene.layout.Container 

    Containers can be extended to create a custom node. Extending a container helps manage and position multiple nodes. The subclass extending the Container must override the function doLayout() of the class Container. Containers provide methods to position and specify the sizes of the node. The subclass extending the container should also override the getPrefWidth and getPrefHeight methods to make sure the layout is resized correctly. Functions provided by Container class to handle position and sizes of the node are:

    • getManaged(content:Node[]):Node[]
    • resizeNode(node:Node, width:Number, height:Number):Boolean
    • positionNode(node:Node, x:Number, y:Number):Void
    • layoutNode(node:Node, x:Number, y:Number, width:Number, height:Number):Boolean

    A simple example of creating a wall of thumbnail extending container class is:

    
    import javafx.scene.layout.Container;
    
    public class ThumbNailContainer extends Container
    {
    package var imageList: String[];
    package var thumbNails: ThumbNails[]; //ThumbNails is a class that
                                             //creates a thumbnail of the image.
    
        package function generateThumbs():Void
        {
    
            thumbNails = for (images in imageList)
                        {
                           ThumbNails
                           {
                              imgUrl:images;
                           }
                        }
        }
    
    //doLayout() function overridden to create own custom layout.
     override function doLayout():Void
     {
        var x = 0;
        var y = 0;
        var temp = 0;
    
        generateThumbs();
    
        for (images in thumbNails)
        {
    
           setNodeWidth(images, 100);//sets the width of the node.
                                    //In this case the thumbnails are the node.
           setNodeHeight(images, 100);//sets the height of the node.
                                     //In this case the thumbnails are the node
          if (x < 600)
          {
              positionNode(images, x += temp, y); //positions the node
              temp = 110;
          }
          else
          {
             x = 0;
             temp = 0;
             y += 110;
          }
     }
    
     content = thumbNails;//sets the content as the sequeces of thumbnails
     }
    
    
    

    More info: http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene.layout/javafx.scene.layout.Container.html

     

     

     
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