Una aplicación Desktop / Móvil que se adapta a la pantalla

Este ejemplo hace algo bastante simple, pero útil:

- Detecta el profile en que se está ejecutando (si es una aplicación móvil o de escritorio)
- Dependiendo de eso, obtiene las dimensiones de la pantalla (en caso de ser móvil) o define un tamaño inicial para la aplicación de escritorio.
- En caso de tratarse de una aplicación de escritorio, resta al tamaño de la ventana el borde de la misma, de manera de conocer el area útil (en la que puede desplegar información o gráficos).
- En el caso de una aplicación de escritorio, ajusta lo desplegado al tamaño de la ventana, en caso que se cambie el tamaño a la ventana.



Aquí está el código:

package mobilescreen;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.animation.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

var dx: Number=2;
var dy: Number=3;
var x: Number;
var y: Number;
var realW:Number;
var realH:Number;

var profile = FX.getProperty("javafx.me.profiles");
var isMobile = profile != null and 
               profile.indexOf("MIDP") >= 0;

var w: Number on replace {
  if (w == 0) then w = 300;
  realW = w - (if (isMobile) 0 else 16);
  x = realW / 2 ;
};

var h: Number on replace {
  if (h == 0) then h = 400;
  realH = h - (if (isMobile) 0 else 36);
  y = realH / 2 ;
};

Timeline {
  repeatCount: Timeline.INDEFINITE
  keyFrames: [
      KeyFrame {
          time: 0.02s
          action: function () {
              x += dx;
              y += dy;
              if (x < 0 or x > realW )
              dx = -dx;
              if (y < 0 or y > realH)
              dy = -dy;
          }
      }
  ]
}.play();

Stage {
    width: bind w with inverse
    height: bind h with inverse
  scene: Scene {
      content: [
          Text {
              font: Font { size: 16 }
              x: 10, y: 30
              content: bind
              "width: {w}\nheight:{h}\nis mobile: {isMobile}"
          },
          Rectangle {
              x: 10, y: 10
              width: bind realW - 20
              height: bind realH - 20
              fill: Color.BLUE
              opacity: 0.5
          },
          Circle {
              centerX: bind x,
              centerY: bind y
              fill: Color.RED,
              opacity: 0.5
              radius: 40
          }
      ]
  }
};

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 Stage "controller" / Un "controlador" de Stage

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

This class allows you to "attach" some automatic behaviors to your app window (Stage). For example, you can make the window to stick to the edges of the screen with a simple... stickyBorders:true ... or select the borders you want to make sticky... ie. stickyLeft:true

You can persist the position and/or size of the window (with a simple persist:true, persistPosition:true or persistSize:true). You can anchor the window to the borders too (ie. anchorBottom:true). Enforce minimum and maximum sizes or enforce a specific size for the window or keep it in the middle of the screen, etc.

It can trigger two events: onResize and onMove... so, your app can obtain it screen position and size at any moment (demo, handling events).

There are many options and combinations.

Enjoy it ;)

Actualización: Ahora el Controlador de Stage es capaz de mantener la posición y/o tamaño de la ventana de la aplicación entre sesiones.

Esta clase permite definir comportamientos automáticos para la ventana de tu aplicación. Por ejemplo, puedes hacer que la ventana se "pegue" a los bordes de la pantalla con un simple... stickyBorders:true ... o seleccionar los bordes que quieres que sean "pegajosos"... ej. stickyLeft:true

Puedes hacer que la aplicación recuerde su posición y/o tamaño entre sesiones de uso (con un simple persist:true, persistPosition:true o persistSize:true). Puedes "anclar" la ventana a los bordes también (ej. anchorBottom:true). Forzar tamaños mínimos y máximos o un tamaño específico para la ventana... o mantener la ventana en el centro de la pantalla.

También puede gatillar dos eventos: onResize (si cambia el tamaño de la ventana) y onMove (si cambia de posición la ventana en la pantalla)... de esa manera la aplicación puede saber -en todo momento- en que área de la pantalla está localizada o que tamaño tiene (demo, manejando los eventos).

Hay muchas opciones y combinaciones.

Ojalá sea útil ;)

How to use it / Cómo se usa...

/** Stage controller */
var cs = controlStage { //persistFile: "testStage.persist"
initialPosition:controlStage.RIGHT + controlStage.TOP, persist:true
checkMinWidth:true, minWidth:440, checkMinHeight:true, minHeight:270,
stickyBorders:true

    onResize: function(e):Void {
  println("resize to {e.width},{e.height} at {e.minX},{e.minY}");
}
onMove: function(e):Void {
  println("moved to {e.minX},{e.minY} with {e.width},{e.height}")
};

};

Stage {
// bind Stage (window) to the controller
    width: bind cs.width with inverse
height: bind cs.height with inverse
x: bind cs.x with inverse
y: bind cs.y with inverse

// on stage close, stores last position and size
onClose: function() { cs.persistStage() };

scene: Scene {  ....

Descargar el proyecto Netbeans 6.5.... DOWNLOAD the Netbeans 6.5 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 ;
 }
};

}

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
        }
    }
}
}