Demo de TextHTML (componente de memeFX)

Aquí hay una pequeña demo del componente TextHTML en acción. Incluido el uso de LINKS en los textos de una aplicación JavaFX. También pueden ver AQUI una demo Java Web Start.



La biblioteca memeFX está AQUI

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()
        ]
    }
}

My Google Code: Knob & Stage Controller / Perilla y controlador de Stage

Two of the components I developed are now hosted at Google Code. They include documentation about how to use them.

Dos de los componentes que desarrollé están ahora hospedados en Google Code. Ellos incluyen la documentación sobre como usarlos.

Knob control / Perilla
http://code.google.com/p/javafxknob/
Java Web Start demo

Stage Controller / Controlador de Stage
http://code.google.com/p/javafxstagecontroller/
Java Web Start demo

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í.