Relógio com JavaFX

Treinando mais um pouco JavaFX fiz esse relógio…

relogio1

Voces podem executa-lo pelo JavaWebStart a partir desse link.

O problema é que não consegui faze-lo rodar no browser! =/

Já consegui rodar no browser! O problema é que eu declarei uma classe Relogio dentro de um arquivo Relogio.fx e isso dá conflito no applet. Apenas mudei o nome do arquivo para Clock.fx e funcionou! o/

E o código:

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.ext.swing.*;
import javafx.geometry.*;
import javafx.animation.*;
import javafx.scene.text.*;
import javafx.util.*;
import javafx.scene.image.*;
import javafx.scene.transform.*;
import javafx.scene.effect.*;
import javafx.scene.effect.light.*;
import java.util.*;

def SIZE = 200;//tamanho do relogio
def SIZE2 = SIZE/2;//metade do relogio
def SIZES = SIZE/6;//ponteiro dos segundos
def SIZEM = SIZE/5;//ponteiro dos minutos
def SIZEH = SIZE/4;//ponteiro das horas

class Relogio extends CustomNode{
    var segundos: Number;
    var minutos: Number;
    var horas: Number;
    public var timer: Timeline = Timeline{//animaçao
        repeatCount: Timeline.INDEFINITE
        keyFrames: [
            KeyFrame{
                time: 1s
                action: function(){
                    //pega o calendario atual e atualiza a hora
                    var calendario: GregorianCalendar = new GregorianCalendar();
                    segundos = calendario.get(Calendar.SECOND);
                    minutos = calendario.get(Calendar.MINUTE);
                    horas = calendario.get(Calendar.HOUR_OF_DAY);
                }
            }
        ]
    }
    init{//construtor
        var calendario: GregorianCalendar = new GregorianCalendar();
        segundos = calendario.get(Calendar.SECOND);
        minutos = calendario.get(Calendar.MINUTE);
        horas = calendario.get(Calendar.HOUR_OF_DAY);
    }
    override public function create(): Node{
        return Group{//grupo com efeito de luz
            content:[
                Circle{//circulo grande do relogio
                    centerX: SIZE2 centerY: SIZE2 radius: SIZE2-5
                    fill: LinearGradient{
                        startX: 0 startY: 0 endX: 0 endY: 1
                        proportional: true
                        stops: [
                            Stop{offset: 0.0 color: Color.BLUE}
                            Stop{offset: 1.0 color: Color.DARKBLUE}
                        ]
                    }
                }
                Group{//grupo com efeito de sombra 1
                    content:[
                        for(s in [0..59])//marcaçoes do relogio
                            Line{
                                transforms: [Rotate{angle: bind s * 6 pivotX: SIZE2 pivotY: SIZE2}]
                                startX: SIZE2 startY: 15 endX: SIZE2 endY: 20
                                stroke: Color.WHITE strokeWidth: if((s mod 15) == 0) 6 else if((s mod 5) == 0) 2 else 0.5
                                strokeLineCap: StrokeLineCap.ROUND
                            }
                    ]
                    effect: DropShadow{//efeito de sombra 1
                        offsetX: 1 offsetY: 1
                        radius: 5
                        spread: 0.2
                    }
                }
                Group{//grupo com efeito de sombra 2
                    content:[
                        Line{//ponteiro dos segundos
                            transforms: [Rotate{angle: bind segundos * 6 pivotX: SIZE2 pivotY: SIZE2}]
                            startX: SIZE2 startY: SIZES endX: SIZE2 endY: SIZE2
                            stroke: Color.RED strokeWidth: 2
                            strokeLineCap: StrokeLineCap.ROUND
                        }
                        Line{//ponteiro dos minutos
                            transforms: [Rotate{angle: bind minutos * 6 pivotX: SIZE2 pivotY: SIZE2}]
                            startX: SIZE2 startY: SIZEM endX: SIZE2 endY: SIZE2
                            stroke: Color.LIGHTGRAY strokeWidth: 3
                            strokeLineCap: StrokeLineCap.ROUND
                        }
                        Line{//ponteiro das horas
                            transforms: [Rotate{angle: bind horas * 30 pivotX: SIZE2 pivotY: SIZE2}]
                            startX: SIZE2 startY: SIZEH endX: SIZE2 endY: SIZE2
                            stroke: Color.LIGHTGRAY strokeWidth: 4
                            strokeLineCap: StrokeLineCap.ROUND
                        }
                        Circle{//circulo em cima do ponteiro das horas
                            centerX: SIZE2 centerY: SIZE2 radius: 4
                            fill: Color.LIGHTGRAY
                        }
                    ]
                    effect: DropShadow{//efeito de sombra 2
                        offsetX: 1 offsetY: 1
                        radius: 2
                        spread: 0.2
                    }
                }
            ]
            effect: Lighting{//efeito de luz para todos os objetos
                light: DistantLight { azimuth: -135 }
            }
        }
    }
}

var relogio: Relogio = Relogio{};
relogio.timer.play();//iniciar relogio

Stage{
    title: "Relógio"
    scene: Scene{
        width: SIZE
        height: SIZE
        content: [relogio]
    }
}

1 Response to “Relógio com JavaFX”


  1. 1 Gregory 16/10/2009 às 00:40

    Oi Raphael,

    primeiramente parabens pelo blog esta muito bom e continue postando coisas sobre JavaFX ;]
    Estou apredendo JavaJF agora e estou com uma dúvida, como eu executo esse jnpl?

    Obrigado


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s





%d blogueiros gostam disto: