Skip to content

Tag: RIA

JavaFX: Side-scrolling

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

Gato em JavaFX, versão 2

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:

JavaFX, Exemplos Básicos

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
}

JavaFX BorderPanel

Esses exemplos eu retirei da página de exemplos do Wiki do JavaFX (russo). Se você quiser saber mais sobre componentes de interface gráfica em JavaFX veja o tutorial
Learning More About the JavaFX Script Language (for Swing Programmers).