Skip to content

JavaFX, Duke Potato

Do you know the toy Mr. Potato Head? Now meet the Java Potato.

[youtube]6NrUdp5XX_o[/youtube]

Duke images here from previous dukes I posted and other images from Open Clipart Project.

Java Web Start:

The code:

package dukepotato;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.input.MouseEvent;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

public class Img extends ImageView{
    public  attribute content: Node[];
    public  attribute src: String;

    private attribute endX = 0.0;
    private attribute endY = 0.0;
    private attribute startX = 0.0;
    private attribute startY = 0.0;

    override attribute translateX = bind endX;
    override attribute translateY = bind endY;
    override attribute blocksMouse = true;

    init {
        image = Image {
            url: "{__DIR__}/{src}"
        }
    }

    override attribute onMousePressed = function(e:MouseEvent):Void {
        startX = e.getDragX()-endX;
        startY = e.getDragY()-endY;
    }

    override attribute onMouseDragged = function(e:MouseEvent):Void {
        endX = e.getDragX()-startX;
        endY = e.getDragY()-startY;
    }
}

var dukesimages = ["duke1.png", "duke2.png", "duke3.png", "duke4.png"];
var dukes = for (image in dukesimages){
    Image {
        url: "{__DIR__}/{image}"
    }
}
var index = 0;
var duke = ImageView {
    x: 200, y:170
    image: bind dukes[index];
    onMouseClicked: function( e: MouseEvent ):Void {
        index = (index + 1) mod sizeof dukesimages;
    }
}

var hat = Img { src: "hat.png", x: 370 }
var partyhat = Img { src: "party_hat.png", x: 160, y: 5 }
var cap = Img { src: "cap.png", x: 230, y: 10 }
var cake = Img { src: "cake.png", x: 526, y: 190 }
var glove = Img { src: "glove.png", x: 338, y: 363 }
var baseball = Img { src: "baseball.png", x: 548, y:373 }
var pencil = Img { src: "pencil.png", x: 451, y: 365 }
var camera = Img { src: "camera.png", x: 125, y: 380 }
var coffee = Img { src: "coffee.png", x: 541, y: 114 }
var burger = Img { src: "burger.png", x: 542, y: 282 }
var diamond = Img { src: "diamond.png", x: 243, y: 383 }
var pliers = Img { src: "pliers.png", x: 20, y: 368 }
var rubikcube = Img { src : "rubikcube.png", x: 37, y: 295 }
var syringe = Img { src: "syringe.png", x: 35, y: 245 }
var hourglass = Img { src: "hourglass.png", x: 35, y: 127 }
var adventurehat = Img { src: "adventurehat.png", x: 8, y:30 }
var tie = Img { src: "tie.png", x: 547, y:35 }

Frame {
    title: "Duke Potato"
    width: 640
    height: 480
    closeAction: function() {
        java.lang.System.exit( 0 );
    }
    visible: true

    stage: Stage {
        content: [duke, hat, partyhat, cake, adventurehat, cap, glove,
            baseball, pencil, camera, coffee, burger, diamond,
            pliers, rubikcube, syringe, hourglass, tie]
    }
}
  • Lines 14 to 42 is the same dragging approach I showed in the post Draggable Nodes, but this time creating a class that inherits the behavior of ImageView.
  • Lines 44 to 57 is the Duke that changes when you click on it. It cycles over the dukesimages list.
  • Lines 59 to 75 is just instantiations of all toys and objects we will use to dress the Duke. Look how easier was to create and place a image.
  • Lines 78 to the end is just creating a Frame and putting all elements on it.

Download a package with the NetBeans project, sources, libraries and images, DukePotato.tar.gz.

Published inenglish

13 Comments

  1. Dezim Dezim

    Cara, acho que voce chegou a conhecer o chato, ou como tambem era conhecido “o cara chato”, to querendoi fazer ele em c++ mas nao sei como fazer varias opçoes para cada vez que ele seja execultado, se voce conheceu sabo o que quero dizer, se nao me avisa p eu poder te mandar para que voce entenda certo…
    meu e-mail:
    a.freitas34@yahoo.com.br
    grande abraço
    A palestra foi muito boa
    Andre Luis

  2. Ankit Ankit

    Hi
    i am not able to find the class :
    import javafx.application.Frame;
    import javafx.application.Stage;

    the netbeans ide is showing error at these lines. I downloaded the latest netbeans IDE and jdk/jre 6 Update 10.

    Can you help me in finding the problem.

  3. Andre Torensma Andre Torensma

    Hi,

    I’m getting the same error which Max reported.

    Error:
    BadFieldException[ The field href has an invalid value: launch.jnlp,launch.jnlp]
    at com.sun.javaws.jnl.XMLUtils.getAttributeURL(Unknown Source)
    at com.sun.javaws.jnl.XMLFormat.parse(Unknown Source)
    at com.sun.javaws.jnl.LaunchDescFactory.buildDescriptor(Unknown Source)
    at com.sun.javaws.jnl.LaunchDescFactory.buildDescriptor(Unknown Source)
    at com.sun.javaws.jnl.LaunchDescFactory.buildDescriptor(Unknown Source)
    at com.sun.javaws.Main.launchApp(Unknown Source)
    at com.sun.javaws.Main.continueInSecureThread(Unknown Source)
    at com.sun.javaws.Main$1.run(Unknown Source)
    at java.lang.Thread.run(Unknown Source)

    greetings,
    Andre

  4. Alessandro Alessandro

    Silveira,

    The error shown in above JNLP is possibly caused by missing value ofcodebase property in jnlp element.

    It should looks like this:

    Anyway, your examples rocks 😉
    Alessandro

  5. PEPEJOSE PEPEJOSE

    HI, Silveira.
    Please update this example to version 2 of javafx.
    I try to do something similar but in javafx 2 is no longer the same program, that’s a problem I could not solve.
    Thank you. 🙄

Leave a Reply

Your email address will not be published. Required fields are marked *