luauf.com » JavaFX

Rich Internet Applications con JavaFX 1.0

Luciano — Thu, 01 Jan 2009 07:00:56 +0000

Finalmente, aproximadamente a los diez días del último mes del año que dejamos atrás fue liberado JavaFX 1.0, la teconología de Java para construir Rich Internet Applications y hacer frente a tecnologías como Silverlight de Microsoft o AIR de Adobe.

La noticia de la liberación vino acompañada con un lavado de cara y rediseño total del sitio web, que ahora incorpora ejemplos, tutoriales, FAQs, etc.

Lamentablemente, por ahora, solo está disponible para Windows y MAC, proximamente según promesas de SUN para Linux.

En este mismo blog ya hemos hablado y dado los primeros pasos en JavaFX por lo tanto, si ya hemos tenido la oportunidad de probarlo ¿de que nos vale la publicación oficial del mismo? Por más que ya se podía ir haciendo algo, el lanzamiento oficial marca un hito, pues a partir de ahora crecerá la comunidad, hay apoyo oficial de Sun y a la vez los principales IDEs empiezan a tenerlo en cuenta incorporando plugins, ejemplos, etc.

Vía: javaHispano

Widgets en JavaFX Scripts compilados

Luciano — Sat, 12 Apr 2008 22:11:42 +0000

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

Mis primeros pasos con JavaFX

Luciano — Fri, 11 Apr 2008 02:43:51 +0000

De la mano de Sun Microsystems, hace ya un tiempo, ha llegado JavaFX para competir en el mercado de las RIA (Rich Internet Application) con otros productos como Ms Silverlight o Adobe AIR.

Siguiendo los pasos del artículo Creating Rich Internet Applications With Compiled JavaFX Script Technology instalaremos el compilador, compilaremos y ejecutaremos el infaltable “Hola Mundo”.

Si no tenemos instalada la maquina virtual de Java, instalar el JR5 o superior
Descargar el JavaFX Script Compiler
Descomprimir archive.zip en path que desee, y agregar la variable de entorno \archive\openjfx-compiler\dist\bin (desde propiedades del sistema, o bien para la un consola ejecutando set Path=%Path%;”path\archive\openjfx-compiler\dist\bin”
Crear el archivo HolaMundo.Fx:

import javafx.ui.*;
import javafx.ui.canvas.*;

Frame {
  title: "JavaFX Rich Internet Applications"
  width: 550
  height: 200
  background: Color.WHITE
  visible: true
  content:
  BorderPanel {
    top:
      FlowPanel {
        content:
          Button {
            text: "Click aquí!"
            action:
              function(): Void {
                MessageDialog {
                  title: "JavaFX Script"
                  message: "JavaFX Script
es simple y elegante"
                  visible: true
               }
             }
         }
     }
   center:
     Canvas {
       content:
         Text {
           font:
             Font {
               faceName: "Sans Serif"
               style: FontStyle.BOLD
               size: 18
             }
             x: 30
             y: 30
             stroke: Color.BLUE 
             fill: Color.BLUE
             content: "JavaFX Script
hace el desarrollo de RIA más facil"
         } 
     }
  }
}

Compilar HolaMundo.Fx, ejecutando javafx HolaMundo.fx
Ejecutar la aplicación, javafx HolaMundo