Tagged: JavaFX Toggle Comment Threads | Keyboard Shortcuts

  • mxshrestha 4:59 am on March 30, 2011 Permalink | Reply
    Tags: bounds, bounds in JavaFx, Bounds in local, Bounds In Parent, , , center the node in the screen, JavaFX, , layout Bounds, , node positioning, position node, reflection effect, rotate effect, translateX, translateY   

    More about bounds and positioning nodes 

    On my last post about bounds titled “Bounds in Java”, I introduced the different types of bounds available in JavaFx and what bounds are. This post is centered towards when to use those bounds and a simple trick to center your node in the screen. Just a quick review, bounds in JavaFx can be accessed in three different ways i.e. accessing  the layoutBounds, boundsInLocal, and boundsInParent of the nodes.  At first I really didn’t like the idea of having three different way to access the bounds and it was more confusing to me coming from a Java Swing background. However, now I think of it, I agree that it is a neat idea and gives the programmer more control and flexibility towards designing the UI. The best and easy way for me to figure out when to use which bounds is to remember this:

    layoutBounds :- node


    boundsInParent:node +effect/clip + transformations(transform/scale/translations)

    So we decide which bound variables we want to use looking at how we want the node to be displayed. Lets suppose I have a ImageView node with reflection effect and rotate(45 degrees) effect applied on it (i will provide the code below). Now, I use the layoutBounds variables if I just want to center the node in the screen. Keep in mind using layout bounds will just center the node (i.e. the image without the reflection part is centered and the reflection is positioned respectively after the node is centered). If I want to center the node along with the reflection of the node (i.e. center the whole image + its reflection) then I use the boundsInLocal variables. The case of boundsInParent is a bit unexplainable because it did not work as I thought it was supposed to be. I applied a rotate transform effect and then tried to center the node along with the reflection and the rotate effect using the boundsinParent variables but the result was not as what i expected. My guess is that boundsInParent comes in handy if we are messing around with groups. Anyways, boundsInParent and boundsInLocal are not recommended to be used.

    QuickTip on how to position nodes at the center of the screen:

    nodes can be positions at the center of the screen using this formula:

    translateX/layoutX/x = (width of screen – width of node)/2;

    translateY/layoutY/y = (height of screen – height of node)/2;

    We can get the width and height of the node using layoutBounds, BoundsInLocal and BoundsinParent variables. Like i said above, if we use laoyoutBounds then only the node without its effect and transform will be centered, and if we use BoundsInLocal then the node along with the effect will be centered. BoundsInParent case was not as expected so I still need to do more research on it (or someone please explain me).

    Here is the example I ran:

    var test: ImageView = ImageView
         image: Image
           url: "{__DIR__}Images/a10.jpg" //change this url to point to an image in your folder
           fraction: 0.75
           topOffset: 0.0
           topOpacity: 0.5
           bottomOpacity: 0.0
         rotate: 45
         //centers image only and then reflection is applied.
         translateX: bind (stage.scene.width - test.layoutBounds.width)/2;
         translateY: bind (stage.scene.height - test.layoutBounds.height)/2;
        //uncomment this one to see the boundsInLocal in action. this will center the image along with the reflection effect.
        translateX: bind (stage.scene.width - test.boundsInLocal.width)/2;
        translateY: bind (stage.scene.height - test.boundsInLocal.height)/2;
        //uncomment this one to see the boundsInParent in action. creates unexpected result in my case.
       //Please shine some light on this one to me.
       translateX: bind (stage.scene.width - test.boundsInParent.width)/2;
       translateY: bind (stage.scene.height - test.boundsInParent.height)/2;

    Below is the result of using layoutBounds, BoundsInLocal and BoundsInParent from left to right respectively on an imageview. We can clearly see that layoutBounds center the image only, BoundsInLocal center the image along with the reflection effect, and BoundsInParent is not even rotating right.(Explain!!!)

    layoutBounds, BoundsInLocal, BoundsInParent

  • mxshrestha 5:02 pm on February 8, 2011 Permalink | Reply
    Tags: bind, bind keyword, JavaFX, 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 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, 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’];


    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.

  • mxshrestha 8:01 pm on January 31, 2011 Permalink | Reply
    Tags: JavaFX, JavaFX access modifiers, JavaFX Block Expression, JavaFX class, JavaFX functions, JavaFX objects, JavaFX scripts   

    Java FX class, function, block expression and object 

    Creating a Class:
    Creating a class in JavaFX is similar to creating a class in Java.  The class declaration should start with an access modifier followed by keyword ‘class‘ and the desired classname. If no access modifier is specified JavaFX assumes the access modifier to be default access i.e. the class cannot be accessed from other FX scripts and can only be accessed in the same script where it is declared. It is similar to private access modifier in Java. Also, class members can be only  var, def, function, init, or postinit.

    More information about access modifier. (http://download.oracle.com/javafx/1.3/tutorials/core/modifiers/)

    Let’s start with an example:

    public class Name
    var title: String;
    var firstName: String;
    var middleInitial:  String;
    var lastName: String;
    var YOB: Integer;
    public var age =
    var currentYear = 2011;
    var currentAge = currentYear  - YOB; //Last expression
    public var fullName =  "{firstName}  {middleInitial}  {lastName}";
    public function getTitle(): String
    return this.title;
    public function setTitle(title:String):Void
    this.title = title;
    //Instantiating an object of class Name and assigning it to variable name1.
    var name1 = Name
    title:  "Mr";
    firstName: "Henry";
    middleInitial: "G";
    lastName: "Thomas";
    YOB: 1984;

    In the above example, the public access modifier makes the class visible and accessible to other script files. The name of the class is ‘Name’. The class contains four default access string variables title, firstName, middleInitial, and lastName and one default access Integer YOB. Since no access modifier is specified for these variables, they have default access as their access modifier. So, these variables are accessible within the class ‘Name’ only.  Suppose you create an object of the class ‘Name’ in some other script then these variables cannot be accessed from that script.

    Block Expression:
    A block expression starts  and ends with curly braces (starts with ‘{‘ and ends with ‘}’). It contains a list of declarations and expressions. The block expression returns the value of the last expression or is a Void type if no expression exists within the block. The variable ‘age’ is assigned a block expression.  The last expression within the block is currentAge which is returned and then is assigned to variable ‘age’. So the value of age is whatever the value of currentAge is calculated from the expression. Notice that the variable ‘age’ has a public access modifier. So, this variable can be accessed wherever object of the class is instantiated. Also the variable fullName is assigned a string of block expressions. {firstName} returns the value of class variable firstName, {middleInitial} returns the value of class variable middleInitial and {lastName} returns the value of class variable lastName. Keep in mind that ‘var’ declarations and ‘def’ declarations  are expressions and hence the value is returned by the block expression.

    Declaring Function:
    Function declarations start with access modifier followed by the keyword function and then the function name. The return type is followed by a colon:‘ after the function name. getTitle() and setTitle() are two functions. getTitle()  has a public access modifier and has no function parameters and returns the type String.  setTitle() also has a public access modifier with a string parameter ‘title’ and has a return type of Void i.e. nothing is returned. Multiple function parameters can be specified by separating each with a comma ‘,’.
    public function test (arg1:String, arg2:Integer):Integer
    …..some expression
    This function has two parameters arg1 which is a string and arg2 which is an integer and the return type of the function is  integer.

    Instantiating an Object:
    The variable name1 is assigned an object of the class Name.  The class members are initialized within the curly braces. So name1 object of class name has “Mr” as value for title, “Henry” as value for firstName, “G” as value for middle initial, “Thomas” as value for lastName, and 1984 as value for YOB.
    name1.getTitle() will return string value  “Mr” and name1.setTitle(“Jr”) will set the value of title to “Jr” in name1. Keep in mind that the object is instantiated in the same FXscript file and hence the default access members(title, firstName, middleInitial, lastName) are directly accessible. If the object was instantiated in some other FXscript then the default access modifiers would not be accessible and only the declarations with public access modifiers would be accessible. For example the variable ‘title’ would not be accessible but the  variable ‘fullName’ would be.

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc