Un "acordeón" de imágenes

Este componente aun no está terminado, pero ya lo pueden probar usando el link de más abajo.

Lanzar demo Java Web Start, CLICK AQUI

Código fuente componente y demo, CLICK AQUI


El código para crear un "Acordeón de imágenes" es el siguiente:

var accordion = ImagesAccordion{
    width: 650,
    height: 350, 
    lineWidth: 1.0,
    lineColor: Color.WHITE
    images: [
        ImageItem {
            id: "moais",
            caption: "Moais"
            image: Image { url: "{__DIR__}moais.jpg"
            }
            message: "Easter Island (Rapa Nui) is a Polynesian island in the "
                     "southeastern Pacific Ocean, The island is a special "
                     "territory of Chile. Easter Island is famous  for its "
                     "monumental statues, called moai."
            messageArea: Rectangle2D {
                minX: 30,
                minY: 253,
                width: 350,
                height: 87
            }
            call: click
        },
        ImageItem {
            id: "anakena",
            caption: "Anakena"
            image: Image { url: "{__DIR__}anakena.jpg"
            }
            message: "‘Anakena is a white coral sand beach in Rapa Nui..."
            messageArea: Rectangle2D {
                minX: 20,
                minY: 233,
                width: 360,
                height: 107
            }
            messageFont: Font { size: 12
            }
            call: click
        },
        ImageItem {
            id: "glacier",
            caption: "Grey glacier"
            image: Image { url: "{__DIR__}grey.jpg"
            }
            message: "The Glacier is in the south end..."
            messageArea: Rectangle2D {
                minX: 30,
                minY: 270,
                width: 320,
                height: 70
            }
            call: click
        },
        ImageItem {
            id: "torres",
            caption: "Torres del Paine"
            image: Image { url: "{__DIR__}paine.jpg"
            }
            message: "Spectacular mountain group in Torres del Paine..."
            messageArea: Rectangle2D {
                minX: 30,
                minY: 270,
                width: 320,
                height: 70
            }
            call: click
        },
        ImageItem {
            id: "salar",
            caption: "Atacama desert"
            image: Image { url: "{__DIR__}salar.jpg"
            }
            message: "The Atacama Desert is a virtually rainless plateau in Chile..."
            messageArea: Rectangle2D {
                minX: 20,
                minY: 237,
                width: 380,
                height: 103
            }
            //            messageFont: Font { size: 12 }
            call: click
        },
        /*        ImageItem {
        id: "crayons",
         caption: "Crayones"
         message: "Recuerdos de la niñez"
         image: Image { url: "{__DIR__}crayons.jpg"}
         call: click
         },*/
        ImageItem {
            id: "chaiten",
            caption: "Chaiten"
            image: Image { url: "{__DIR__}chaiten.jpg"
            }
            message: "Hell on Earth. Chaitén is a volcanic caldera..."
            messageArea: Rectangle2D {
                minX: 20,
                minY: 270,
                width: 420,
                height: 70
            }
            call: click
        }
    ]
    effect: Reflection { fraction: 0.1,
    }

};

function click(image:ImageItem) {
    println(image.id);
}

MemeFX ... con Popup Menu (experimental)

Estuve haciendo algunos arreglos al experimento del menú flotante que desarrollé hace algún tiempo, y salvo algunos detalles, funciona sin problemas.

Acabo de subir el código de la biblioteca (memeFX), incluyendo este código y un demo, donde se aprecia como usar el menú flotante.

Para ver el demo (Java Web Start), haz CLICK AQUI

Para visitar el sitio web del proyecto, CLICK AQUI

Algo de código:

Primero, se crea un tipo de menú colgante... lo que puede incluir cambios a la apariencia del menú (colores, grosores, rotación, transparencia, esquinas redondeadas, etc.).

var popupCircle = PopupMenu{
    corner: 20,  padding: 8, borderWidth: 4,
opacity: 0.9, animate: true

    content: [
        MenuItem { text: "Animar circulo!", 
          callNode: node },
        MenuItem { text: "Mostrar nombre y posicion",
           callPosId: positionId }
    ]
};

El tipo de función declarada para el Item (la función que ejecuta al ser seleccionado un item del menú), tiene que ver con los parámetros que retorna el menú al ser seleccionada la opción:

call = no retorna parametros, la función es declarada como:

function algo():Void { ... };

callId = retorna el ID del objeto sobre el que se utilizó el menú, la función es declarada como:

function algo(id:String):Void { ... };

callPos = retorna el MouseEvent que originó la aparición del menú. Permite, por ejemplo, obtener la posición del mouse al lanzar el menú (¿qué otros datos se pueden obtener de MouseEvent?). La función es declarada como:

function algo(e:MouseEvent):Void { ... };

callNode = retorna el Nodo sobre el que se utilizó el menú flotante. Permite manipular directamente el objeto (en este ejemplo, se anima el tamaño del círculo seleccionado). Si se quiere utilizar sobre un tipo particular de nodo, es necesario hacer un casting al tipo de objeto apropiado... ejemplo, si el tipo de objeto es un campo de texto: (node as SwingTextField).text="{node.id}" . La función es declarada como:

function algo(node:Node):Void { ... };

callPosId = retorna el MouseEvent que originó la aparición del menu y el ID del objeto sobre el que se utilizó (puede ser útil para saber en que parte del objeto se hizo click). La función es declarada como:

function algo(e:MouseEvent, id:String) { ... };

callPosNode = retorna el MouseEvent que originó la aparición del menu y el Nodo sobre el que se utilizó (puede ser útil para saber en que parte y sobre que objeto se hizo click). La función es declarada como:

function algo(e:MouseEvent, node:Node) { ... };

En este ejemplo agregaré dos círculos:

var circle1 = Circle {
    id: "Cicle 1"
    centerX: 100, centerY: 100
    radius: 40, fill: Color.RED
};

var circle2 = Circle {
    id: "Cicle 2"
    centerX: 220, centerY: 300
    radius: 80, fill: Color.YELLOW
};

Los ID son opcionales, pero pueden ser usados para reconocer sobre que objeto se lanzó el menú flotante (callId y callPosId).

A continuación, enlazo el menú con los círculos:

popupCircle.to(circle1);
popupCircle.to(circle2);

Se agregan las rutinas que serán ejecutadas por las opciones del menú (el código pudo ser incluido al definir el menú colgante).

function node(node:Node):Void {
    Timeline {
        repeatCount: 4
        autoReverse: true
        keyFrames: [
            at (0s) {node.scaleX => 1.0;
        node.scaleY => 1.0 }
            at (0.2s) {node.scaleX => 1.4;
          node.scaleY => 1.4}
        ]
    }.play();
};

function positionId(e:MouseEvent, id:String):Void {
    println("Mouse at {e.x},{e.y} over {id}");
}

Finalmente, se agregan los círculos y los menús al Stage:

Stage {
    scene: Scene {
        content: [
            circle1,
            circle2
            PopupMenu.activateMenus()
        ]
    }
}

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: ¿Cuantas bolitas? (test de rendimiento gráfico)

Este ejercicio contiene 3 controles de barra que permiten ajustar:

1) El número de bolas rebotando en la ventana;
2) La transparencia de las bolas;
3) El radio de las bolas.



Cada nueva bola que se agrega, lo hace con un efecto (cambia el radio un par de veces) y luego continua rebotando entre los márgenes de la ventana. Si se aumenta el tamaño de la ventana, el area de desplazamiento aumenta, si se reduce, las bolas que se encuentran más alla del nuevo margen, regresan al centro de la ventana.

Un area de texto muestra el número de bolas en la ventana, el porcentaje de transparencia y el radio de los círculos.

Una instrucción importante es "canSkip:true", en el Timeline que actualiza la posicion de las bolas (y que por lo tanto, las redibuja). Esta instrucción evita que la CPU se sobrecargue de trabajo y solo realiza la actualización de las bolas si hay capacidad de procesamiento disponible. Intenten con unas 200 bolas y quiten el canSkip y veran como el programa se "pega".

Archivo Maix.fx

package howmany;

import javafx.scene.*;
import javafx.stage.Stage;
import javafx.ext.swing.SwingSlider;
import javafx.scene.layout.VBox;
import javafx.scene.text.*;

// si cambia tamaño de la ventana
// reposiciona los circulos mas alla del margen
var maxX=250.0 on replace { circles.resetPos() };
var maxY=250.0 on replace { circles.resetPos() };

// seleccion numero de bolas
var selector = SwingSlider {
minimum: 0
maximum: 100
value: 0
vertical: false
};

// transparencia de las bolas
var transparency = SwingSlider {
minimum: 0
maximum: 100
value: 50
vertical: false
};

// radio de las bolas
var radius = SwingSlider {
minimum: 0
maximum: 40
value: 20
vertical: false
};

// texto para desplegar valores
var total = Text {
font: Font { size: 18 }
textOrigin:TextOrigin.TOP;
};

// componente que contiene los circulos
var circles = element {
balls:bind selector.value;
radius:bind radius.value;
level:bind transparency.value / 100.0;
display: total
maxX:bind maxX
maxY:bind maxY
};

Stage {
// si cambia tamaño de la ventana
    // actualiza variables con dimensiones
width: bind maxX with inverse
height: bind maxY with inverse

scene: Scene { content: [
 circles,
 VBox { content: [
     selector,
     transparency,
     radius,
     total ]
 } ]
}
}

Archivo element.fx

package howmany;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.animation.*;
import java.lang.Math;


// clase que extiende circulos
class ball extends Circle {

// "sobreescribe" los parametros del circulo normal,
    // de manera de tener los valores en la nueva clase
override var stroke = null;
override var fill = Color.RED;
override var centerX = 100;
override var centerY = 100;
override var radius = 10;
override var scaleX;
override var scaleY;

public var incx;
public var incy;

// mueve el circulo en los incrementos de la instancia
function move():Void {
 centerX += incx;
 centerY += incy;
 if (centerX<0 or centerX>maxX) then
     incx = -incx;
 if (centerY<0 or centerY>maxY) then
     incy = -incy;
};

// efecto para cuando crea el circulo
    // cambia un par de veces de tamaño (como rebote)
var dropIn = Timeline {
 repeatCount:5
 autoReverse:true
 keyFrames: [
     at (0s) { scaleX => 2.0; scaleY => 2.0 }
     at (0.3s) { scaleX => 1.0; scaleY => 1.0 }
 ]
};

// al crear el circulo, dispara el efecto de rebote
postinit {
 dropIn.play();
};

};


// clase que contiene a todos los circulos
public class element extends CustomNode {

public var balls = 50.0;
public var display = Text { };
public var maxX;
public var maxY;
// si cambia la transparencia
public var level = 1.0 on replace {
 // actualiza la opacidad de todos los circulos
 for (obj in objs) obj.opacity = level; };
// si cambia el radio
public var radius = 10.0 on replace {
 // actualiza el radio de todos los circulos
 for (obj in objs) obj.radius = radius; };

// arreglo que contiene todos los circulos
var objs:ball[];
// colores que asigna a los circulos
var colors:Color[]=[
 Color.RED, Color.BLUE, Color.YELLOW,
 Color.PURPLE, Color.CYAN];

var i=0;

// agrega nuevo circulo al componente
function addBall():Void {
 var ix=Math.random()*15 - 7;
 var iy=Math.random()*15 - 7;
 var circ = ball {
     centerX:maxX/2
     centerY:maxY/2
     incx: ix
     incy:iy
     radius:radius
     fill: colors[i mod sizeof colors]
     opacity:level
 };
 insert circ into objs;
};


// crea el componente con los circulos
override function create():Node {

 // chequea si debe agregar o quitar circulos
 Timeline {
     repeatCount:Timeline.INDEFINITE
     keyFrames: [
         KeyFrame {
             time: 0.2s
             action: function():Void {
                 display.content=
                            "{sizeof objs} / {(level*100) as Integer}% / {radius}";
                 if (sizeof objs < balls) then {
                     addBall();
                     i++;
                 }
                 if (sizeof objs > balls) then
                     delete objs[0];
            }
         }
     ]
 }.play();

 // mueve los circulos
 Timeline {
     repeatCount:Timeline.INDEFINITE
     keyFrames: [
         KeyFrame {
             time: 0.04s
             // para evitar que se sobrecargue de trabajo
             canSkip: true
             action: function():Void {
                 for (obj in objs)
                     obj.move();
             }
         }
     ]
 }.play();

 // retorna el componente con los circulos
 Group {
     content: bind objs
 };

};

// reposicion los circulos si excende el margen
public function resetPos():Void {
 for (obj in objs) {
     var pos = obj.boundsInScene;
     if (pos.maxX > maxX) then
         obj.centerX = maxX/2 ;
     if (pos.maxY > maxY) then
         obj.centerY = maxY/2 ;
 }
};

}