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

JavaFX: Limita el tamaño de la ventana (mínimo y máximo) - Bind with inverse

Esta es una variación del ejemplo anterior, que detectaba el tamaño de la ventana para ajustar el contenido (cómo descubrir el tamaño de la ventana). En este caso, fuerza dimensiones mínimas y máximas para la ventana.



Como vimos en el ejemplo anterior, la instrucción 'bind with inverse' permite iniciar el tamaño de la ventana unas ciertas dimensiones (300x300 pixeles), pero luego, las variables 'w' y 'h' reciben las variaciones del tamaño de la ventana, a través del mismo 'bind with inverse'. Esto, sumado a la instrucción 'on replace' (al definir las variables para el tamaño de la ventana), permite gatillar la validación del tamaño de la ventana.... y forzar su tamaño dentro de límites al asignar nuevos valores para las variables 'w' y 'h'.

En otras palabras, las variables 'w' y 'h' se hacen BIDIRECCIONALES... pues al modificar su valor, se afecta el tamaño de la ventana.... y al modificar el tamaño de la ventana, se actualiza los valores de las variables, con las nuevas dimensiones.

package experimentsize;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.geometry.Rectangle2D;

// borde horizontal de la ventana
var bh=16.0;
// borde vertical de la ventana (incluye titulo)
var bv=36.0;
// dimension minima de la ventana
var minSize=Rectangle2D{width:200 height:200};
// dimension maxima de la ventana
var maxSize=Rectangle2D{width:500 height:500};

// valida dimensiones de la ventana
function validateSize():Void {
   if (w<minSize.width) then w=minSize.width;
   if (h<minSize.height) then h=minSize.height;
   if (w>maxSize.width) then w=maxSize.width;
   if (h>maxSize.height) then h=maxSize.height;
   println("ajusto ventana a {w} x {h}");
}

// tamaño inicial de la ventana
var w=300.0 on replace {validateSize()};
var h=300.0 on replace {validateSize()};

Stage {
title: "Ajusta a dimension de ventana"
width: bind w with inverse
  height: bind h with inverse
scene: Scene {
    content: {
        Circle {
            translateX: bind (w-bh)/2
            translateY: bind (h-bv)/2
            radius:bind if (w<h) then
                        (w-50)/2
                    else
                        (h-80)/2
            fill:Color.RED
        }
    }
}
}

JavaFX: Bind with inverse. Ajusta tamaño de círculo a tamaño de la ventana

La instrucción BIND es una de las cosas interesantes de JavaFX Script. Esta permite declarar la DEPENDENCIA entre una variable y otros elementos del programa. Por ejemplo, si al declarar un circulo, se define que el color de este dependerá de una variable X, al cambiar el color asignado a X se produce la actualización automática del círculo en pantalla, sin necesidad de ordenar al programa que repinte.

Circle {
 radius:20
 fill:bind colorcirculo
}

Ahora bien, la instrucción BIND puede ir acompañada de la instrucción WITH INVERSE, por ejemplo:

var a=bind b with inverse;

Esto significa que cuando se cambie el valor de 'b' en algún lugar del programa, se asignará el nuevo valor de 'b' a 'a', pero también quiere decir que cuando se modifique el valor de 'a' también se traspasará el valor de 'a' a 'b'.

¿Qué utilidad puede tener esta instrucción? ... pues, por ejemplo, se puede usar para ajustar el tamaño de un círculo al tamaño de la ventana que lo contiene... o para conocer las medidas de la ventana y cuando se cambia su tamaño.

En el siguiente ejemplo, se usa 'bind with inverse' para asignar el tamaño inicial de la ventana (300x300 pixeles)... pero luego, cuando se ajusta manualmente el tamaño de la ventana, la misma instrucción 'bind with inverse' pasa de regreso el tamaño actualizado de la ventana a las variables 'h' y 'w' que originalmente definieron su tamaño (h=height=alto y w=width=ancho).

package experimentsize;

import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import java.lang.System;

// tamaño inicial de la ventana
var w=300.0 on replace {
    println("ajusto ancho de la ventana a {w}");
};
var h=300.0 on replace {
    println("ajusto alto de la ventana a {h}");
};

// borde horizontal de la ventana
var bh=16.0;
// borde vertical de la ventana (incluye titulo)
var bv=36.0;

Stage {
title: "Ajusta al tamaño de ventana"
width: bind w with inverse
    height: bind h with inverse
scene: Scene {
    content: {
        Circle {
            translateX: bind (w - bh) / 2
            translateY: bind (h - bv) / 2
            radius:bind 
                if (w < h) then (w - 50) / 2 else ( h - 80) / 2
            fill:Color.RED
        }
    }
}
}