Skip to content

Tag: screencast

JavaFX Overview Slides

My slides about a overview on JavaFX at our last CEJUG event.

JavaFX Overview

View SlideShare presentation or Upload your own. (tags: javafx ria)

Downloads:

Café com Tapioca na Christus

Café com Tapioca na Christus

Here a little screncast showing the live preview feature on the NetBeans JavaFX Plugin.

You can also download the orignal screencast in higher resolution netbeans_javafx_preview.ogg (15 Mb). Photos of the presentation at my Flickr album.

JavaFX, Duke Potato

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

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.

JavaFX: Color picker

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

Screencast: Novidades no editor do Netbeans 6.0

Continuando minhas aventuras no mundo dos screencast eu preparei mais um mostrando algumas das novidades no editor de código-fonte do Netbeans 6.0.

Esse screencast cobre o que eu consegui mostrar no café com tapioca de dezembro e eu ainda quero fazer outros mostrando o Matisse (editor gráfico do NB) e o Collaboration (pluggin multiusuário).

Makingoff: Eu usei o Istambul, uma ferramenta para captura de screencasts no Linux. Infelizmente eu ainda não estou conseguindo gravar áudio com ele. Depois eu converti de ogg pra flv com o memcoder e usei o Flash Media Player para criar a página que toca o vídeo.