Important: This first post is discussed on JavaHispano.org

This series of posts is not intended to demonstrate the superiority of one language over others, the aim is to find the best way to write code snippets that a GUIs developer faces daily. When i said “the best way“, i mean a proper balance between flexibility and readability, which in my view, defines the quality of a language. The idea is that if you knows a language that allows to improve the way of codifying the snippet shown here (surely you knows), then you published that piece of code here, and then we will evaluate the best. As well are welcomes improved versions of the ones I have posted, and of course, comments in general.

The main reason why i choose JavaFX, is frankly because of i think that is the language that gives more agility to work with graphics (at the moment).

This first part aims to show how to bind two objects, in this case, the color of an object is determined by the text of a text field. If the text inside the text field is ‘aeiou’ then the circle will be filled with the green color, otherwise will be filled with the red color.

Note that understanding the processTheText function as the “controller”, so you can notice the complete separation between the view and the logic.

/*
 * DoItBetter1.fx
 *
 */

package doitbetter;

import javafx.scene.control.TextBox;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

var theText = "";

Stage {
    title: "Binding between GUI controls"
    width: 400
    height: 200
    scene: Scene {
        content: HBox {
            spacing: 10
            content: [                
                TextBox{                    
                    text: bind theText with inverse
                }
                Circle{                    
                    radius: 10 centerY: 10
                    fill: bind processTheText(theText)
                }
            ]
        }
    }
}

function processTheText(auxText){
    if(auxText == "aeiou") Color.GREEN else Color.RED
}