Posts tagged jfxbest

JavaFX: Side-scrolling

Feb 20th

An side-scrolling game attempt.

an plane

I used two images, this mountain background made with Gimp (xcf sources here) and that ship above made with Inkscape (svg sources here).

import javafx.ui.*;
import javafx.ui.canvas.*;
 
var scroll;
scroll = [1..800] dur 60000 linear continue if true;
 
var mountains = Clip{
    transform: bind translate(-scroll,0)
    shape: Rect {x:bind scroll, y:0, width:400, height:200}
    content: [ImageView {
            transform: translate(0,0)
            image: Image { url: "http://silveiraneto.net/downloads/mountains.png"}
        },
        ImageView {
            transform: translate(800,0)
            image: Image { url: "http://silveiraneto.net/downloads/mountains.png"}
        }
    ]
};
 
var h = 50;
 
var ship = ImageView {
    cursor: HAND
    transform: bind translate(0,h)
    image: Image { url: "http://silveiraneto.net/downloads/jfx_plane.png"}
    onMouseDragged: operation(e) {
        h += e.localDragTranslation.y;
    }
};
 
Canvas {
    content: [mountains, ship]
}

en, english, game, game development, JavaFX, jfx, jfxbest, mountains, programming, RIA, ship, side scrolling

JavaFX: Color picker

Feb 19th

Posted by Silveira in english

2 comments

An simple color picker that can be also used as a gadget.

import javafx.ui.*;
import javafx.ui.canvas.*;

var colors = [red:Color, orange:Color, yellow:Color, green:Color,
     cyan:Color,blue:Color, magenta:Color, gray:Color];

var chosenColor: Paint;
chosenColor = black:Color;

var x = 120;
var y = 70;

Canvas{
    content: Group{
        transform: bind translate(x,y)
        content: [Star{
            points: sizeof colors
            rin: 30
            rout: 50
            fill: bind chosenColor
            onMouseDragged: operation(e) {
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;
            }
        },
        foreach (i in [1..sizeof colors]) Circle {
            var: self
            transform: [rotate(i*360/sizeof colors,0,0), translate(50,0)]
            radius: 10
            fill: colors[i%sizeof colors]
            onMouseClicked: operation (e){
                chosenColor = self.fill;
            }
        }]
    }
}

color, color picker, colors, draggable, JavaFX, jfx, jfxbest, netbeans, openjfx, screencast, script, vídeo

Draggable and Growable Ball in JavaFX

Feb 16th

Posted by Silveira in english

2 comments

Two simple JavaFX code handling onMouseDragged event.

import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    content: Circle {
        var x = 50
        var y = 50
        transform: bind translate(x, y)
        radius: 30
        fill: red
        onMouseDragged: operation(e) {
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;

        }
    }
}

import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    content: Circle {
        var x = 50
        var y = 50
        var radius = 30
        transform: bind translate(x, y)
        radius: bind radius
        fill: red
        onMouseDragged: operation(e) {
            if (e.button == 1){
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;
            }
            if (e.button == 3) {
                radius += e.localDragTranslation.x;
            }
        }
    }
}

import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    content: [
    Rect {x: 50, y: 50, width: 50, height: 50, fill: orange },
    Circle {
        var x = 50
        var y = 50
        var radius = 30
        var color = red:Color
        transform: bind translate(x, y)
        radius: bind radius
        fill: bind color
        onMouseDragged: operation(e) {
            if (e.button == 1){
                x += e.localDragTranslation.x;
                y += e.localDragTranslation.y;
            }
            if (e.button == 3) {
                radius += e.localDragTranslation.x;
            }
        }
        onMousePressed: operation(e){
            color = Color {blue: 0.0, green: 0.0, red: 1.0, opacity: 0.5};
        }
        onMouseReleased: operation(e){
            color = red:Color;
        }
    }]
}

You can test this examples with thhe JavaFX Pad or using Netbeans with the JavaFX Plugin.

ball, código, draggable, event, growable, Java, JavaFX, jfx, jfxbest, openjfx, Programação, red ball, script, vídeo

JavaFX Wheel of Fortune

Feb 9th

Posted by Silveira in english

5 comments

Disclaimer: from now on I will occasionally post in English too.

A first release of an Wheel of Fortune made with JavaFX. There’s still has a lot of bugs but is already usable. Let’s say that version is 0.8. :)

Read the rest of this entry »

english, fortune wheel, Java, JavaFX, jfxbest, roda da fortuna, wheel of fortune

Gato em JavaFX, versão 2

Feb 6th

Posted by Silveira in Uncategorized

4 comments

Lembra daquele nosso gato em Java FX? Agora ele move os olhos com cliques em botões.

Código fonte:

import javafx.ui.canvas.*;
import javafx.ui.*;
 
class Cat extends CompositeNode{
    attribute look: Number; // -1.0 to 1.0
    operation lookLeft();
    operation lookCenter();
    operation lookRight();
}
 
attribute Cat.look = 0; // 0 = middle
 
operation Cat.lookLeft(){
    look = [look, look - 0.1 .. -1.0] dur 1000;
}
 
operation Cat.lookCenter(){
    var step = if look < 0 then 0.1 else -0.1;
    look = [look, look+step .. 0.0] dur 1000;
}
 
operation Cat.lookRight(){
    look = [look, look + 0.1 .. 1.0] dur 1000;
}
 
function Cat.composeNode(){
    var head =  Ellipse {cx:100, cy:100, radiusX:100, radiusY:50, fill:black };
    var rightEar =  Arc {x:100, y:10, height:150, width:100,
                       startAngle:-20, length:90, closure:PIE, fill:black};
    var leftEar = Arc {x:000, y:10, height:150, width:100,
                     startAngle:110, length:90, closure:PIE, fill:black};
    var leftEye = Ellipse { cx:60, cy:100, radiusX:30, radiusY:15, fill:white};
    var rightEye = Ellipse { cx:140, cy:100, radiusX:30, radiusY:15, fill:white};
    var nose = Arc { x:85, y:110, height:20, width:30,
                     startAngle:45, length:90, closure:PIE, fill:white};
 
    var rightIris = Ellipse { cx: bind 140+look*20, cy:100,
                     radiusX:5, radiusY:15, fill:black};
    var leftIris = Ellipse { cx: bind 60+look*20, cy:100,
                     radiusX:5, radiusY:15, fill:black};
 
    return Group{content: [head, rightEar, leftEar, leftEye,
                     leftIris, rightEye, rightIris, nose]};
}
 
var myCat = Cat{};
 
var myCatControl = View {
            transform: [translate(0, 150)]
            content: GroupPanel {
                cursor: DEFAULT
                var row = Row {alignment: BASELINE}
                var column1 = Column { }
                var column2 = Column { }
                var column3 = Column { }
                var column4 = Column { }
                var column5 = Column { }
                rows: [row]
                columns: [column1, column2, column3, column4]
                content:
                [SimpleLabel {
                    row: row
                    column: column1
                    text: "Look:"
                },
                Button {
                    row: row
                    column: column2
                    mnemonic: L
                    text: "Left"
                    action: operation() {
                        myCat.lookLeft();
                    }
                },
                Button {
                    row: row
                    column: column3
                    mnemonic: C
                    text: "Center"
                    action: operation() {
                        myCat.lookCenter();
                    }
                },
                Button {
                    row: row
                    column: column4
                    mnemonic: R
                    text: "Right"
                    action: operation() {
                        myCat.lookRight();
                    }
                }]
                }
            };
 
Canvas {
    content: [myCatControl, myCat]
}

Downloads:

Código-fonte: cat_ver2.fx
Vídeo: moving_eyes_cat.ogg

animação, cat, gato, Java, JavaFX, jfxbest, netbeans, RIA, vídeo

JavaFX, Exemplos Básicos

Feb 6th

Posted by Silveira in Uncategorized

11 comments

Alguns exemplo básicos de JavaFX usando a construção de interfaces de forma declarativa.
Para testa-los eu recomendo o JavaFX Pad ou o plugin JavaFX para Netbeans.

import javafx.ui.*;
 
Frame {
    title: "Label JavaFX"
    width:  300
    height: 50
    content: Label {
            text: "Olá Mundo!"
    }
    visible: true
}

JavaFX label

import javafx.ui.*;
import java.lang.System;
 
Frame {
    title: "Botão JavaFX"
    width:  300
    height: 100
    content: Button {
           text: "Clique-me"
           action: operation(){
              System.out.println("Botão pressionado");
           }
    }
    visible: true
}

Botão em JavaFX

import javafx.ui.*;
import java.lang.System;
 
Frame {
  title: "Menu JavaFX"
  width:  300
  height: 100
  menubar: MenuBar {
    menus: Menu {
      text: "Menu"
      items:  foreach (name in ["Menu1", "Menu2", "Menu3"])
              MenuItem {
                text: name
                action: operation() {
                  System.out.println("MenuItem: {name}");
                }
             }
     }
  }
    visible: true
}

JavaFX Menu

import javafx.ui.*;
import java.lang.System;
 
var N = 4;
 
Frame {
    title: "Tabela JavaFX"
    width:  300
    height: 150
    onClose: operation(){ System.exit(0); }
    content: Table {
        columns: [
        TableColumn {
            text: "numero"
        },
        TableColumn {
            text: "quadrado"
        },
        TableColumn {
            text: "cubo"
        }]
 
        cells: bind foreach(n in [1..N])[
        TableCell {
            text: "{n}"
        },
        TableCell {
            text: bind "{n * n}"
        },
        TableCell {
            text: bind "{n * n * n}"
        },
        ]
    }
    visible: true
}

JavaFX Tabela

import javafx.ui.*;
 
var selectedTab = 0;
 
Frame{
    title: "Tab Example"
    width: 300
    height: 120
    content: BorderPanel{
        top: Label { text: bind "Selected tab: {selectedTab + 1}" }
        center: TabbedPane{
            selectedIndex: bind selectedTab
            tabs: foreach(i in [1..5])
            Tab {
                title: "Tab{i}"
                content: Label{ text: "Label{i} "}
            }
        }
    }
    visible: true
}

JavaFX abas

import javafx.ui.*;
 
Frame {
    title: "FlowPanel JavaFX"
    width:  300
    height: 100
    content: FlowPanel{
        content: [
        Label{ text: "Label1" },
        Label{ text: "Label2" },
        Label{ text: "Label3" },
        ]
    }
    visible: true
}

JavaFX FlowPanel

import javafx.ui.*;
 
Frame {
    title: "BorderPanel JavaFX"
    width:  400
    height: 200
    content: BorderPanel{
        top   :  Button{ text: "Topo" }
        center:  Button{ text: "Centro" }
        bottom:  Button{ text: "Fundo" }
        left  :  Button{ text: "Esquerda" }
        right :  Button{ text: "Direita" }
    }
    visible: true
}