234

INSTITUTO TECNOLÓGICO Y DE ESTUDIOS SUPERIORES DE MONTERREY

Carlos Pinedo 269607 Ricardo Aguilera 997726

Campus Saltillo

Gonzalo Cisneros 997750

3er Parcial SISTEMAS OPERATIVOS Aplicación JavaFX Mobile

¿Qué es JavaFX? JavaFX amplía su experiencia web al proporcionarle medios y contenidos ricos para todas las pantallas que visite. Como usuario, podrá ejecutar las aplicaciones de JavaFX en un explorador o arrastrarlas y colocarlas en el escritorio. Es una interfaz perfecta. JavaFX cuenta con la tecnología Java: JavaFX amplia la potencia de Java al permitir que los desarrolladores puedan utilizar todas las librerías de Java en las aplicaciones de JavaFX. De esta forma, los desarrolladores pueden ampliar su capacidades en Java y utilizar la revolucionaria tecnología de presentación que suministra JavaFX para crear experiencias visuales atractivas. Puntos destacados de JavaFX: % Permite que los usuarios puedan ver las aplicaciones de JavaFX en un navegador o que puedan abandonar el navegador arrastrando y soltando la misma aplicación en el escritorio Permite un flujo de trabajo de diseñador a desarrollador eficaz con Project Nile: los diseñadores pueden trabajar con las herramientas que prefieran y colaborar con los creadores de scripts web que utilizan NetBeans IDE con JavaFX Amplia la tecnología Java al permitir el uso de todas las bibliotecas de Java en una aplicación de JavaFX Permite que los desarrolladores puedan integrar gráficos vectoriales, animaciones y activos web de vídeo y audio en una aplicación real, interactiva y muy completa.

¿Qué podemos construír en JavaFX? •

Animaciones. * Juegos de entretenimiento. * Aplicaciones para móviles. * Aplicaciones para computadora. * Diseño de herramientas. * Elementos para TV.

La plataforma de JavaFx en combinación con el lenguaje JavaFX Script que cuenta con un conjunto de herramientas de desarrollo, gráficos, multimedia, librerías de soporte de audio y ambientes de desarrollo, asegura que as aplicaciones puedan proveer una apariencia consistente en diferentes dispositivos .

Las herramientas principales para el desarrollo en la plataforma JavaFX son: NetBeans IDE 6.5 para JavaFX 1.1 JavaFX 1.1 Production Suite

Las aplicaciones de JavaFX 1.1 pueden ser desplegadas utilizando: a) Plugin Java: Una herramienta utilizada para desplegar applets de Java en páginas Web. b) Java Web Start: Es una herramienta utilizada para desplegar aplicaciones en el escritorio utilizando JNLP (Java Network Launching Protocol).

c) Java FX 1.1 Mobil Emulator: Herramienta para desplegar las aplicaciones tal y como lucirán en el dispositivo móvil. El siguiente link muestra de una manera muy sencilla y práctica la manera de realizar tu primer programa en JavaFX. TUTORIAL: app.jsp

http://javafx.com/docs/gettingstarted/javafx/create-first-javafx-

Programa: Visor de Imágenes. Para nuestro tercer examen parcial optamos por desarrollar una aplicación capaz de implementarse en algún dispositivo móvil con soporte para este lenguaje. package carousel; import java.lang.Math; import javafx.scene.Cursor; import javafx.scene.CustomNode; import javafx.scene.Group; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.Node; /** * @author Gonzalo Cisneros */ public var y=0; public var speed=5; public def radius=100; public var xcenter=70; public var ycenter=80; public var zcenter=100; public var radius_y = 60; public var fl=100;

public var shift = Math.PI / 2; public var image_gap = Math.PI / 3; public var angle; public var angle_rad=angle * Math.PI / 180; public class Carousel extends CustomNode { public var X: Number; public var Y: Number; public var Z: Number; public var image: Image; public var scale: Number; public var color_top: Number = 204; public var color_bottom: Number = 204; public override function create(): Node { return Group { content: [ ImageView { x: bind X y: bind Y scaleX: bind scale scaleY: bind scale opacity: bind scale image: bind image cursor: Cursor.DEFAULT blocksMouse: true } ] } } public function update(i:Number,angle: Number): Void { Z=Math.sin(angle+ i * image_gap + shift) * radius + zcenter ; X= Math.cos(angle+ i * image_gap + shift) * radius + xcenter; Y= -Math .sin(angle+ i +5 * image_gap + shift) * radius_y + ycenter; scale = fl / (fl + Z); } }

package carousel; import carousel.Carousel; import java.lang.Math; import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.lang.Duration; import javafx.lang.FX; import javafx.scene.Cursor; import javafx.scene.Group; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.input.*; import javafx.scene.paint.*; import javafx.scene.Scene; import javafx.scene.shape.*; import javafx.stage.Stage; import javafx.stage.StageStyle; /** * @author Gonzalo Cisneros */ var carousel: Carousel[]; var im:String[] = ["{__DIR__}im1.PNG", "{__DIR__}im2.PNG","{__DIR__}im3.PNG","{__DIR__}im4.PNG","{__DIR__}i m5.PNG","{__DIR__}im6.PNG"]; var s:String; var s_left:Image = Image {url: "{__DIR__}leftlight.png"}; var s_leftglow:Image = Image {url: "{__DIR__}left.png"}; var s_right:Image = Image {url: "{__DIR__}rightlight.png"}; var s_rightglow:Image = Image {url: "{__DIR__}right.png"}; var s_right_d = s_right; var s_left_d = s_left; var dur: Duration = 15ms;

// inserting the initial value for(i in [0..5]) { insert Carousel { var valor = Carousel.angle+ i * Carousel.image_gap + Carousel.shift; var valor2 = Carousel.angle+ i +5 * Carousel.image_gap + Carousel.shift; X: Math.cos(valor) * Carousel.radius + Carousel.xcenter; Y: -Math.sin(valor2) * Carousel.radius_y + Carousel.ycenter ; Z: Math.sin(valor) * Carousel.radius + Carousel.zcenter scale: Carousel.fl / (Carousel.fl + Math.sin(valor) * Carousel.radius + Carousel.zcenter) image: bind Image {url: im[i]} } into carousel } // timeline for clockwise rotation var timeline = Timeline { repeatCount: 20 keyFrames: [ KeyFrame { time: dur action: function() { Carousel.angle_rad = Carousel.angle_rad + Math.PI / 60; for(i in [0..5]) carousel[i].update(i,Carousel.angle_rad); } } ] } var timeline_rev = Timeline { repeatCount: 20 keyFrames: [ KeyFrame { time: dur action: function() { Carousel.angle_rad = Carousel.angle_rad - Math.PI / 60; for(i in [0..5]) carousel[i].update(i,Carousel.angle_rad);

} } ] } var gp = Group { onKeyPressed:function(e:KeyEvent):Void { if(e.code == KeyCode.VK_LEFT) timeline_rev.play(); if(e.code == KeyCode.VK_RIGHT) timeline.play(); if(e.code == KeyCode.VK_Q) FX.exit(); } translateX: bind (ancho - 240) * 0.5; translateY: bind (alto - 320) * 0.25; content:carousel } var scene:Scene = Scene { fill:{ LinearGradient { startX : 0.0 startY : 0.0 endX : 0.0 endY : 1.0 stops: [ Stop { color : Color.DARKSLATEBLUE offset: 0.0 }, Stop { color : Color.BLACK offset: 1.0 } ] } } content: [ Rectangle { x: 0, y: bind alto - 30

width: bind ancho, height: 25 arcHeight:5 arcWidth:5 fill: LinearGradient { startX: 0.0 startY: 0.0 endX: 0.0 endY: 1.0 proportional: true stops: [ Stop { offset: 0.0 color: Color.GRAY } Stop { offset: 0.5 color: Color.BLACK } Stop { offset: 1.0 color: Color.CADETBLUE } ] } opacity:0.5 } ImageView { x: 40 y: bind alto - 30 image: bind s_left cursor: Cursor.HAND onMouseClicked: function( e: MouseEvent ):Void { s_left = s_leftglow; timeline_rev.play(); } onMouseMoved: function( e: MouseEvent ):Void {s_left = s_leftglow; } onMouseExited: function( e: MouseEvent ):Void {s_left = s_left_d; } } ImageView { x: bind ancho - 70 y: bind alto - 30

image: bind s_right cursor: Cursor.HAND onMouseClicked: function( e: MouseEvent ):Void { s_right = s_rightglow; timeline.play(); } onMouseMoved: function( e: MouseEvent ):Void {s_right = s_rightglow; } onMouseExited: function( e: MouseEvent ):Void { s_right = s_right_d; carousel} } ] } var ancho:Number = bind scene.width; var alto:Number = bind scene.height; insert gp into scene.content; var stage = Stage{ title: "Visor de Imagenes" width: 240 height: 320 style: StageStyle.TRANSPARENT scene: scene } gp.requestFocus(); stage;

Conclusión. Tras la realización de este proyecto nos pudimos dar cuenta de los alcances que nos brinda esta plataforma para la realización de aplicaciones diversas. Es importante el conocimiento de diversos lenguajes de programación en el área de sistemas, esto con el fin de gozar de un amplio repertorio de recursos que nos ayuden a realizar diferentes tareas dependiendo del tipo de aplicación que deseemos desarrollar. Hablando exclusivamente de JavaFX aprendimos que es un recurso muy robusto y con muchas aplicaciones para una amplia variedad de dispositivos, promoviendo un ambiente gráfico interesante e interactivo.