JavaFX 1.2 incluye APIs para gráficos (charts)

Este es el código para agregar un gráfico de Pie en JavaFX

package piechartsample;

import javafx.scene.chart.*;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

var name = ["Java", "JavaFX", "MySQL", "Netbeans", "Others"];
var val = [20, 12, 25, 22, 30];


var r :  PieChart.Data[] = [];
for(i in [0..4]) {
insert  PieChart.Data {
 action: function() {
     print("Name   ::  {name[i]}");
 }
 label  : name[i] value : val[i] } into r; }


var chart = PieChart3D {
            data : r
            pieLabelFont: Font.font("dialog", FontWeight.REGULAR, 8);
            pieLabelVisible: true
            pieValueVisible: true
            pieToLabelLineOneLength: 3
            pieToLabelLineTwoLength : 6

         }

         var st = Stage {
            height: 420
             width: 480
             title:"Pie Chart 3D"
             scene: Scene {
                 content: [
                     chart
                  ]
             }
         }

Este es el código para un gráfico de "burbujas":

package bubblechart;

import javafx.scene.chart.*;
import javafx.scene.chart.part.*;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
var x: Number[] = [30, 60, 10, 100,50];
var y: Number[] = [40,20,90,40,23];
var radius: Number[] = [10,13,7,10,5];

var x1: Number[] = [13, 20, 100, 30,50];
var y1: Number[] = [100,80,60,40,20];
var radius1: Number[] = [7,13,10,6,12];

var r :  BubbleChart.Data[] = [];
var r1:  BubbleChart.Data[] = [];
for(i in [0..4]) {
insert  BubbleChart.Data {fill: Color.YELLOWGREEN xValue : x[i] yValue : y[i] radius: radius[i] }into r;
insert  BubbleChart.Data {fill: Color.RED xValue : x1[i] yValue : y1[i] radius: radius1[i] }into r1;

}
var s1 : BubbleChart.Series =  BubbleChart.Series{data: [r,r1]};
var BubbleChartData : BubbleChart.Series[] = [s1];
var chart = BubbleChart {
              title : "BubbleChart"
              xAxis : NumberAxis{
                  lowerBound: 0
                  upperBound : 150
                  label: "SomeX"
                  visible: true
                  axisStrokeWidth: 1
                  tickUnit : 20
                  tickLabelsVisible: true

              }
              yAxis : NumberAxis{
                  lowerBound: 0
                  upperBound : 150
                  tickUnit: 20
                  label: "SomeY"
                  visible: true
                  tickLabelsVisible: true
             }
              data : BubbleChartData
          }

          var st = Stage {
             height: 520
              width: 640
              title:"Bubble Chart"
              scene: Scene {
                  content: [
                      chart
                   ]
              }
          }

Como crear juegos para móvil con Netbeans 6.5

Realmente, es increible lo fácil que resulta crear un juego para teléfono con Netbeans 6.5. De hecho, este tutorial demuestra como crear uno en ¡10 minutos! Vale la pena verlo y tenerlo en cuenta.

Blogger no me permite incrustar el video aquí, así que ahí les va el enlance (se ve mejor a pantalla completa): CLICK AQUI

- Crea tu propio juego para móvil. Hands on Lab6400 (pdf)
- Mobile Game Project.zip
- Guía para el GameBuilder de Netbeans

JavaFX: Stage "controller" demo - Demo "controlador" de Stage

This small code demostrates how easy is to handle the onResize and onMove events implemented by the Stage controller (Stage Controller).

Este pequeño código demuestra lo fácil que es manejar los eventos onResize y onMove implementados por el controlador de Stage (Controlador de Stage)



Here's the code / Aquí está el código:

var img = Image { url: "{__DIR__}myimage.jpg" };
var rect:Rectangle;
var sw:Integer;
var sh:Integer;

var cs = controlStage {
  timeToCallFunctions:0.001s
  timeToCheckPosSize:0.001s
  initialPosition:controlStage.CENTER, persist:true
  checkMinWidth:true, minWidth:270,
  checkMinHeight:true, minHeight:270,
  stickyBorders:true
    onResize: function(e) { clip(e) }
    onMove: function(e) { clip(e) }
};

// screen resolution
sw = cs.maxScrWidth;
sh = cs.maxScrHeight;

function clip(r:Rectangle2D) {
  rect = Rectangle {
      x: r.minX - (sw - img.width) / 2
      y: r.minY - (sh - img.height) /2
      width: r.width, height: r.height
  }
};

Stage {
    width: bind cs.width with inverse
    height: bind cs.height with inverse
    x: bind cs.x with inverse
    y: bind cs.y with inverse
    onClose: function() { cs.persistStage() };

  scene: Scene { content:
      ImageView {
          translateX: bind -rect.x
          translateY: bind -rect.y
          image: img
          clip: rect
      }
  }
};

Download the Netbeans 6.5 project, here. Descarga el proyecto Netbeans 6.5, aquí.

JavaFX: a Knob control - Un control "de perilla"

Update: Stage Controller hosted on Google Code, includes documentation for using the class. Click Here for a Java Web Start example.

English: Please, visit the Google Code hosted project

JavaFX me está convirtiendo realmente en una fábrica de componentes... este control lo desarrollé en menos de un día. Como verán es bastante sofisticado. No voy a entrar en detalles por ahora, pero el código del programa de ejemplo explota varias de sus funcionalidades.



Una de las cosas que dejo pendiente de demostrar, es cómo se pueden agregar nuevos tipos de perillas... basta con crear la gráfica en Adobe Illustrator y luego crear una clase que herede de la clase basicKnob (update: ver orangeKnob.fx). En esa nueva clase, pueden incluir detalles propios de la gráfica asociada... entre otras cosas, el nombre del archivo que contiene la grafica, las dimensiones de la nueva perilla (ancho y alto) y el radio inicial y final de las lineas del dial (la distancia al radio de la perilla), de manera que el componente pueda dibujar las lineas que le solicite el usuario y que estas lineas coincidan con la gráfica importada (update: ahora también incluye el radio inicial y final de las líneas cortas en el dial).

Aquí va el código fuente del componente, el programa demostrativo, los archivos de gráficos, etc. Sólo tienen que abrirlo en Netbeans 6.5 y ejecutarlo ;D

¡Ah! un detalle que me dió dolor de cabeza, hasta que recordé que lo había leído antes... si se fijan en el código, por cada control instancio la gráfica de la perilla ( ui: orangeKnob{} )... esto es así, porque si creo una sóla instancia y luego la enlazo desde varios lugares, solo queda activo el último enlace.... quizás debería ver si se puede crear algo como una versión "estática" con la gráfica... pero eso tengo que investigarlo y luego probar si funciona.

Descarga el proyecto completo de Netbeans 6.5... Download the complete Netbeans project... CLICK HERE.

JavaFX: Objetos que se devuelven a su origen si no caen en el destino

Esta es una versión modificada del ejercicio anterior. Si se arrastra un objeto y este no cae dentro del destino, entonces rebota hacia el punto de origen.



Lo único que agregué fue que al crear el objeto guarda su posicion inicial en las variables original_x y original_y, y si detecta que no cae dentro del destino, ejecuta un Timeline que lo hace volver a su posición de origen.

Adicionalmente, hice algunos pequeños cambios para reemplazar el destino circular por un cuadrado de esquinas redondeadas.

Aquí hay una copia completa del proyecto Netbeans 6.5 (Download Complete Project)

JavaFX: Objetos arrastrables con "efectos"

Este ejemplo incluye 3 clases:

1) Una clase (SpringInterpolator) que define un nuevo tipo de "interpolador" que genera un movimiento "elástico" (de resorte)

2) Una clase (DraggableObj) que permite que los elementos asignados sean "arrastrables" (drag and drop).

3) La clase principal (Main) que implementa la aplicación y que agrega 4 elementos para arrastrar por la ventana.



archivo SpringInterpolator.fx

package DraggableClass;

import javafx.animation.SimpleInterpolator;
import java.lang.Math;

public class SpringInterpolator extends SimpleInterpolator {
    // amplitud de la onda
    // controla que tan lejos puede llegar el objeto desde su punto final
    public-init var amplitude:Number = 1.0;
    // determina el peso del objeto
    // hace el movimiento de la onda mas grande y llega mas lejos
    public-init var mass:Number = 0.058;
    // rigidez del movimiento de la onda o resolte
    // hace la onda mas corta o ceñida
    public-init var stiffness:Number = 12.0;
    // hace la onda de fase, de modo que el objeto
    // no acabe en el lugar de descanso.
    // esta variable generalmente no cambia
    public-init var phase:Number = 0.0;

    // si actua como un resorte normal o rebota
    public-init var bounce:Boolean = false;

    // usado para calculos internos
    var pulsation:Number;

    init {
        this.pulsation = Math.sqrt(stiffness / mass);
    }

    // ecuacion del resorte
    override public function curve(t: Number) : Number {
        var t2 = -Math .cos(pulsation   *   t   +   phase   +   Math.PI) * (1 - t) * amplitude ;
        // usa el valor absoluto de la distancia si rebota
        if(bounce) {
            return 1 - Math.abs(t2);
        } else {
            return 1 - t2;
        }
    }
}

archivo DraggableObj.fx

package DraggableClass;

import javafx.scene.Group;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.animation.Timeline;
import javafx.animation.Timeline.*;
import javafx.animation.Interpolator;
import javafx.animation.Interpolator.*;


public class DraggableObj extends CustomNode {

public var content: Node[];

var endX = 0.0;
var endY = 0.0;
var startX = 0.0;
var startY = 0.0;

var op:Number=100;
var scale:Number=100;

// produce un parpadeo rapido al
// al soltar los objetos arrastrados
var t = Timeline {
repeatCount: 3
keyFrames: [
at (0s) { op => 100.0 },
at (0.05s) { op => 0.0 }
]
}

// instancia el interpolador de resorte
def spring = SpringInterpolator { bounce: true};

// escala objetos con efecto de resorte
var s = Timeline {
keyFrames: [
at (1.5s) { scale => 100.0 tween spring},
]
};

// escala objectos de tamano original
// a tamano 50% mas grande al hacer
// click sobre ellos
var i = Timeline {
keyFrames: [
at (0s) { scale => 100.0 },
at (0.3s) { scale => 150.0},
]
};


override function create() : Node {

// produce una variacion constante en la
// opacidad de los elementos arrastrables
Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) { op => 70.0 },
  at (0.3s) { op => 100.0 tween Interpolator.EASEBOTH}
]
}.play();

Group {
translateX: bind endX
translateY: bind endY
content: bind content
  opacity: bind op/100.0
  scaleX: bind scale/100.0
  scaleY: bind scale/100.0

onMouseDragged: function(e) {
  endX = e.dragX-startX;
  endY = e.dragY-startY;
}
onMousePressed: function(e) {
  startX = e.dragX-endX;
  startY = e.dragY-endY;
      s.stop();
      i.playFromStart();
}
onMouseReleased: function(e) {
      t.playFromStart();
      s.time=0s;
      s.play();
}
};
}

}

archivo Main.fx

package DraggableClass;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.input.MouseEvent;


var newCircle=DraggableObj{
translateX:700
translateY:200
content: Circle {
        radius: 100
        fill: Color.RED
        opacity:0.75
    }
};

// este objeto incluye un ARRAY (arreglo) de figuras
var newCircle2=DraggableObj{
translateX:200
translateY:200
content: [
 Circle {
     opacity:0.5
     fill:Color.BLUE
     radius:70
 },
 Rectangle {
     translateX:-50
     translateY:-50
     width:100
     height:100
     rotate:45
     fill:Color.GREEN
     opacity:0.5
 }
]
};

var newImage=DraggableObj{
translateX:200
translateY:500
content: ImageView {
 opacity:0.8
 preserveRatio:true
 fitWidth:200
 image: Image {
//            url: "file:/C:/Users/myuser/Pictures/2008a.png"
     url: "http://www.google.com/intl/en_ALL/images/logo.gif"
 }
}
}

var newRect=DraggableObj{
translateX:700
translateY:500
content: Rectangle {
 width:100
 height:100
 rotate:45
 fill:Color.PURPLE
 opacity:0.5
}
};


Stage {
title: "Application title"
width: 1200
height: 750
scene: Scene {
   // Incluye un ARRAY de objetos
   content: [
       newCircle,
       newCircle2,
       newImage,
       newRect
   ]
}
}

JavaFX: La rueda de la fortuna

Este ejemplo genera una "rueda" de colores de distinta intensidad y que gira... el ejemplo original viene incluido con Netbeans 6.5, yo sólo le agregué el giro. Pueden modificar la velocidad del giro cambiando el tiempo en el Timeline (0.5s, o medio segundo para una vuelta completa).

Básicamente, lo único que agregué fue un rotate: bind angle; asociado a la rueda ya generada incluida en la escena (Scene) y una "linea de tiempo" (Timeline) que incrementa el ángulo entre 0º y 360º, en el tiempo especificado. Una vez que llega a 360º, comienza por el ángulo 0º. Así queda la impresión que la ruega gira indefinidamente.

package color;

import javafx.scene.Group;

import javafx.scene.CustomNode;

import javafx.scene.Node;

import javafx.scene.paint.Color;

import javafx.scene.shape.Arc;

import javafx.scene.shape.ArcType;

import javafx.stage.Stage;

import javafx.scene.Scene;

import javafx.animation.Timeline;

import javafx.lang.FX;

class ColorWheelNode extends CustomNode {

var segments : Number = 12;

var steps : Number = 6;

var radius : Number = 95;

var stripes : Arc[];

override function create() : Node {

return Group {

content: bind stripes

};

}

init {

// Set radius

var r = radius;

var rStep = radius / steps;

var colors : Color[];

for( i in [1..

segments + 1] ) {

insert Color.rgb( 255, 255, 0 ) into colors;

}

for( i in [0..

steps - 1] ) {

colors[1] = Color.rgb( 255 - ( 255 / steps * i ), 255 - ( 255 / steps * i ), 0 );

colors[2] = Color.rgb( 255 - ( 255 / steps ) * i, ( 255 / 1.5 ) - (( 255 / 1.5 ) / steps ) * i, 0 );

colors[3] = Color.rgb( 255 - ( 255 / steps ) * i, ( 255 / 2 ) - ( ( 255 / 2 ) / steps ) * i, 0 );

colors[4] = Color.rgb( 255 - ( 255 / steps ) * i, ( 255 / 2.5 ) - (( 255 / 2.5 ) / steps ) * i, 0 );

colors[5] = Color.rgb( 255 - ( 255 / steps ) * i, 0, 0 );

colors[6] = Color.rgb( 255 - ( 255 / steps ) * i, 0, ( 255 / 2 ) - (( 255 / 2 ) / steps ) * i );

colors[7] = Color.rgb( 255 - ( 255 / steps ) * i, 0, 255 - ( 255 / steps ) * i );

colors[8] = Color.rgb(( 255 / 2 ) - (( 255 / 2 ) / steps ) * i, 0, 255 - ( 255 / steps ) * i );

colors[9] = Color.rgb( 0, 0, 255 - ( 255 / steps ) * i );

colors[10] = Color.rgb( 0, 255 - ( 255 / steps ) * i, ( 255 / 2.5 ) - (( 255 / 2.5 ) / steps ) * i );

colors[11] = Color.rgb( 0 , 255 - ( 255 / steps ) * i, 0 );

colors[12] = Color.rgb(( 255 / 2 ) - (( 255 / 2 ) / steps ) * i, 255 - ( 255 / steps ) * i, 0 );

for( j in [1..segments] ) {

var c = colors[

j.intValue()];

insert Arc {

centerX: 100,

centerY: 100

radiusX: r ,

radiusY: r

startAngle: 360 / segments * ( segments - j - 0.5)

length: 360 / segments

fill: c

type: ArcType.ROUND

} into stripes;

}

r -= rStep;

}

}

}

var angle:Integer;

Timeline {

repeatCount: Timeline.INDEFINITE

autoReverse: false

keyFrames: [

at (0s) {angle => 0},

at (0.5s) {angle => 360},

]

}.play();

Stage {

scene: Scene {

fill: Color.GRAY

content: ColorWheelNode {

rotate: bind angle;

}

}

width: 216

height: 232

title: "Color Wheel"

}