En Mis primeros pasos con JavaFX habiamos descargado el compilador JavaFX y compilado el "Hola Mundo". En esta ocasión vamos a ver un poco más en detalle el código JavaFX Script y la creación de widgets (componentes UI) como Box, ColorChooser, Dialog, Menu, MenuBar, MenuItem, SimpleLabel y TextField.

  • ¿Como crear una clase?
class Model {
  attribute messageText:String;
  attribute messageColor:Color;
}

Las clases pueden contener clases, atributos y funciones y pueden ser publicas, privadas y protegidas.

  • ¿Como crear un componente UI?
var model =
  Model {
    messageText: "JavaFX Script has lots of cool UI components"
    messageColor: Color.BLUE
  }

var msgTF:TextField =
  TextField {
    value: model.messageText
    columns: 30
    background: Color.WHITE
  }

  • ¿Que atributos tiene la clase TextField?

Se pueden destacar, entre otros:

  • action: manejador de eventos (debe ser una funcion())
  • columns: ancho de la caja de texto
  • editable
  • horizontalAlignment: alineación horizontal del texto
  • onChange: manejador de eventos (debe ser una funcion())

Para más información ver el diagrama de clases que se anexa al pie del post.

  • ¿Como crear un menu y un díalogo?
menubar:
  MenuBar {
    menus: [
      Menu {
        text: "Options"
        mnemonic: KeyStroke.O
        items: [
          MenuItem {
            text: "Text..."
            mnemonic: KeyStroke.T
            accelerator:
              Accelerator {
                modifier: KeyModifier.CTRL
                keyStroke: KeyStroke.T
              }
            action:
              function():Void {
                ...some code omitted...
              }
          },
          MenuItem {
            text: "Select Color..."

            mnemonic: KeyStroke.S
            accelerator:
              Accelerator {
                modifier: KeyModifier.CTRL
                keyStroke: KeyStroke.S
              }
            action:
              function():Void {
                ...some code omitted...
              }
          },
          MenuItem {
            text: "Exit"
            mnemonic: KeyStroke.X
            action:
              function():Void {
                System.exit(0);
              }
          },
        ]
      }
    ]
  }

dlg =
  Dialog {
    modal: true
    title: "Enter Text"
    visible: true
    content:
      Box {
        orientation: Orientation.VERTICAL
        content: [
          SimpleLabel {
            text: "Text:"
          },
          msgTF
        ]
      }
    buttons: [
      Button {
        text: "OK"
        defaultButton: true
        action:
          function():Void {
            model.messageText = msgTF.value;
            dlg.hide();
          }
      },
      Button {
        text: "Cancel"

        defaultCancelButton: true
        action:
          function():Void {
            dlg.hide();
          }
      }
   ]
 };

Dejo el código a vuestra interpretación, como verán es muy intuitivo.

  • ¿Que hay acerca de Binding?

La tecnología JavaFX Script implementa el Modelo-Vista-Controlador (MVC). Así, se puede mantener la Vista (UI) y el Modelo (datos) del programa sincronizados con el uso del operador bind.Los operadores a menudo dicen "Una vez que usas binding, nunca volverás atrás).

Text {
  font:
    Font {
      face: FontFace.SANSSERIF
      style: FontStyle.BOLD;
      size: 24
    }
  x: 20
  y: 40
  stroke: bind model.messageColor
  fill: bind model.messageColor
  content: bind model.messageText
}



Esto es todo por el momento, disculpen si el nivel de detalle no fue el suficiente, pero el objetivo del post no fue desarrollar un tutorial de JavaFX Script, sino tener una mayor aproximación a la tecnología.


Anexos:

El siguiente, es el diagrama de clases de una porción de la jerarquía de clases de los compilados JavaFX Script:

Descargar el ejemplo: widget.fx

Basado en el artículo original Using UI Components in Compiled JavaFX Script Technology