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