Updates from February, 2011 Toggle Comment Threads | Keyboard Shortcuts

  • mxshrestha 10:41 pm on February 22, 2011 Permalink | Reply
    Tags: , HBox javaFx, , 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.

    Advertisements
     
  • mxshrestha 10:06 pm on February 22, 2011 Permalink | Reply
    Tags: , 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.

     

     

     
  • mxshrestha 1:09 am on February 16, 2011 Permalink | Reply
    Tags: 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

     

     

     
  • mxshrestha 5:02 pm on February 8, 2011 Permalink | Reply
    Tags: bind, bind keyword, , javaFX bind, javafx on replace, on replace, on replace clause, on replace trigger   

    Data binding using bind and on replace in JavaFx 

    Data binding using bind and on replace:
    bind:
    bind is a keyword used to bind a value of a variable to some other expression.
    For example:

    var a = 64;
    var b = bind {a/8};
    

    The value of variable b in the above expression is bound to the value of variable a.
    In the case above the value of b is 8.

    var a = 64;
    var b = bind {a/8};
    a = 64 * 8;
    println("value of b  is :{b}"};
    

    When the above code is executed the value of variable b will be printed as 64. So, the value of variable b changes accordingly every time the value of variable a changes.

    on replace:
    on replace is usually used when certain actions need to be taken once the value of the variable is changed.
    For example:

    var a = 64;
    var b = bind {a/8} on replace { if (a > 64) a = 10};
    a = 64 * 8;
    println("value of b  is :{b}"};
    

    The above block of code replaces the value of variable a from 64*8 to 64 once the value of b is printed from the last line. When the second line is executed the value of variable a remains unchanged because variable a has the value of 64. However when the last line is executed the value of variable at that moment is 64 * 8 which is greater than 64. So, when variable b gets the value 64 the value of variable a is also changed to 10.

     
  • mxshrestha 4:39 pm on February 8, 2011 Permalink | Reply
    Tags: delete expression, duration type, insert expression, , javaFx duration type, javaFX sequence type, javaFX types, Sequence type   

    Duration Types and Sequence Types in JavaFx 

    Two interesting data types introduced in JavaFX are duration type and sequence type.

    Duration Types:

    Duration types are used in JavaFX to specify the time duration. The time units can be specified in ms, s, m, or h.  For example:

    
    var timeDuration = 10s;
    
    

    The variable timeDuration is assigned 10 seconds. The duration type variables can be very useful when animating an object.

    Sequence Types:
    Sequence types in JavaFX  is a data type that holds a sequence of object values. The interesting thing about sequence types is they can be specified as ranges and also have insert and delete features like that of a list in java.
    A simple sequence construction would be:

    var numbers = [1,2,3,4,5,6,7,8,9,10];
    

    The same assignment can also be performed as:

    var numbers = [1..10];
    

    Keep in mind that the sequence can hold any objects.

    var stringsExample = ['this','is','an','example'];
    

    we can also specify datatypes:

    var numbers:Number[] = [1..10]
    

    This assignment is the same as the above assignments for numbers variable except in this we specify that the variable numbers carry the Number data type only. Specifying data types are usually useful when sequence of different objects have to be created.
    insert expression can be  used with sequence to add an object to the sequence. For example:

    insert 11 into numbers;
    

    This statement will add the number 11 to the end of the sequence. So, the range of sequence now is from 1 to 11. We can also specify where we want to add the object.

    insert 0 before numbers[0];
    

    This statement adds the number 0 before 1 in the sequence so the range of sequence now is 0 to 10.

    insert ['a', 'JavaFx'] after stringExample[2];
    

    This statement adds the sequence [‘a’,’JavaFx’] after ‘an'(index 2 of stringExample) in the sequence stringsExample. so the resulting sequence will be:

    stringsExample = ['this', 'is', 'an', 'a', 'JavaFx', 'example']
    
    

    Similarly delete operation can be performed from a sequence.

     

    delete 'a' from stringsExample;
    

    This statement will delete the value ‘a’ from the sequence stringsExample. If there are multiple ‘a’ in the sequence then all occurrence will be deleted.

    delete stringExamples[0..2];
    
    

    This statement will delete the values in the sequence from index 0 to index 2. So the resulting stringsExample sequence have values [‘a’, ‘JavaFx’, ‘example’];

     

    </p>
    delete numbers[0];
    

    This statement will delete the value in index 0 of the sequence numbers.

    delete numbers;
    

    This statement will delete all the values of the sequence numbers. So, the sequence number is empty sequence after this operation.

     
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