Skip to content

Tag: JavaFX

JavaFX, getting resources of inside your JAR

br flagTradução: há uma versão em Português desse artigo.

For some classes like javafx.scene.image.Image is easy load an image from a external resource like:

ImageView {
    image: Image {
        url: "http://example.com/myPicture.png"
    }
}

or a resource inside your own Jar file with the __DIR__ constant:

ImageView {
    image: Image {
        url: "{__DIR__}/myPicture.png"
    }
}

But for other classes loading a internal resource (inside your own jarfile) is not so direct. For example, in the article Parsing a XML Sandwich with JavaFX I had to place the XML file in a temp directory. A more elegant way would be:

package handlexml;
 
import java.io.FileInputStream;
import javafx.data.pull.*;
import javafx.ext.swing.*;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
class Resource{
    function getUrl(name:String){
        return this.getClass().getResource(name);
    }
 
    function getStream(name:String){
        return this.getClass().getResourceAsStream(name);
    }
}
 
var list = SwingList { width: 600, height: 300}
 
var myparser = PullParser {
    documentType: PullParser.XML;
    onEvent: function (e: Event) {
        var item = SwingListItem {text: "event {e}"};
        insert item into list.items;
    }
    input: Resource{}.getStream("my.xml");
}
myparser.parse();
 
Stage {
    title: "Map"
    scene: Scene {
        content: list
    }
}

With a simple XML file called my.xml inside your package.

<?xml version="1.0" encoding="UTF-8"?>
<bread sesame="true">
   <catchup/>
   <hamburguer/>
   <cheese type="chedar"/>
   <maionese/>
   <lettuce/>
</bread>

fileplace

And we get the same result as before, but all files inside our Jars.

References:

Aprenda JavaFX com Paixão

Sang Shin
Sang Shin photo, credits by Raymundo Vázquez.

Nosso amigo Sang Shin do Java Passion nos avisa que está para começar a primeira turma do curso de programação de 15 semanas em JavaFX (com paixão!) está começando. O curso é online, gratuito e começa agora dia 30 de Janeiro em 2009.

java passion

Para se inscrever envie um email em branco para javafxprogramming-subscribe@googlegroups.com. É um curso mais ou menos como qualquer outro, espera-se que os estudantes façam suas lições de casa depois de estudar as apresentações e fazer alguns laboratórios práticos mas tudo isso gratuito e online.

Também há uma lista onde os estudantes podem perguntar e responder perguntas. Para maiores informações, por favor visite um dos sites abaixo:

Lembrando a todos que os cursos do Java Passion são todos em inglês.

Aproveite essa oportunidade e passe a frente a notícia.

JavaFX, easy use of tiles

Continuing my little JavaFX framework for game development, right now focused on use those tiles I’m drawing and posting here in my blog. This framework will be a group of classes for simplify and hide some complexities of common game development. Right now I wrote just a few of them.

Use

We create a tileset from the files.png file that way

var tileset = Tileset {
    cols: 15 rows: 10 height: 32 width: 32
    image: Image {
        url: "{__DIR__}tiles.png"
    }
}

tiles

Tileset are orthogonal, distributed into a grid of cols columns and rows rows. Each tile have dimensions height x width.

A Tileset is used into a Tilemap

var bg = Tilemap {
    set:tileset cols:5 rows:5
    map: [8,8,8,8,8,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]
}

That shows

bg tilemap

Each number in the map represents a tile in the tilemap. Number 0 means the first tile at the upper left corner, numbers keep growing from left to right columns, from top to bottom rows.

Another example

var things = Tilemap {
    set:tileset cols:5 rows:5
    map: [80,55,56,145,145,96,71,72,61,62,0,0,0,77,78,122,0,0,93,94,138,0,0,0,0]
}

things tileset

A tilemap can also contains more than one layer

var room = Tilemap {
    set:tileset cols:5 rows:5 layers:2
    map: [
        [8,8,8,8,8,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
        [80,55,56,145,145,96,71,72,61,62,0,0,0,77,78,122,0,0,93,94,138,0,0,0,0]
    ]
}

tileroom

Implementation

The Tileset class basically stores a Image and a collection of Rectangle2D objects, for be used as viewports in ImageView classes.

import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.geometry.Rectangle2D;
 
public class Tileset {
    public-init var      image: Image;
    public-init var      width: Integer = 32;
    public-init var     height: Integer = 32;
    public-init var       rows: Integer = 10;
    public-init var       cols: Integer = 15;
    protected   var       tile: Rectangle2D[];
 
    init {
        tile =  for (row in [0..rows]) {
            for (col in [0..cols]) {
                Rectangle2D{
                    minX: col * width, minY: row * height
                    height: width, width: height
                }
            }
        }
    }
}

The Tilemap is a CustomNode with a Group of ImageViews in a grid. The grid is mounted by iterating over the map as many layers was defined.

public class Tilemap extends CustomNode {
    public-init var   rows: Integer = 10;
    public-init var   cols: Integer = 10;
    public-init var    set: Tileset;
    public-init var layers: Integer = 1;
    public-init var    map: Integer[];
 
    public override function create(): Node {
        var tilesperlayer = rows * cols;
        return Group {
            content:
                for (layer in [0..layers]) {
                    for (row in [0..rows-1]) {
                        for (col in [0..cols-1]) {
                            ImageView {
                                image: set.image x: col * set.width y: row * set.height
                                viewport: set.tile[map[tilesperlayer*layer + row*rows+col]]
                            }
                        }
                    }
                }
        };
    }
}

Next steps

  • Integrate to a map editor
  • Support some XML map format
  • Sprite classes for animation
  • Integrate those collision detection classes I posted before

Download

Reading Twitter with JavaFX

twitter bird

Twitter is a social network and micro-blogging service that allow you to create and read tweets, 140 characters text-based posts. It’s becoming a popular tool to keep in touch with your friends, coworkers, bloggers, etc. Here we’ll create a very simple application that show us tweets related with a given word.

Twitter offers a very simple and powerfull REST API which supports XML, JSON, and the RSS and Atom formats. As we are aiming just to read tweets we’ll use just the Search API.

We do that in three steps:

  1. Query Tweets
  2. Parser the Atom result
  3. Show tweets into a GUI

Let’s see them in the order of dependence beetween them.

Displaying a Tweet

var gradient = LinearGradient {
    startX: 0.0,
    startY: 0.0,
    endX: 0.0,
    endY: 150.0
    proportional: false
    stops: [Stop {offset: 0.0 color: Color.DARKGRAY },
        Stop { offset: 1.0 color: Color.BLACK }]
}
 
public class Tweet extends CustomNode {
    public var image: Image;
    public var username: String;
    public var message: String;
    public override function create(): Node {
        var txt = Text {
            x: 65  y: 35 wrappingWidth: 150 fill: Color.WHITE
            content: "{message}"
        }
        return Group {
            content: [
                Rectangle {
                    width: 220 height: txt.boundsInLocal.height + 40
                    arcHeight: 10 arcWidth: 10 fill: gradient
                },
                ImageView {
                    x: 5 y: 20 image: image
                },
                Text {
                    x: 65  y: 20 fill: Color.BLACK content: "{username} said"
                },
                txt
            ]
        };
    }
}

For example, this tweet would become:

tweet example

Parsing ATOM result

In my last post about JavaFX I showed how to parse XML documents (and make sandwiches) with JavaFX. Here we’ll use the Atom format, but use any other would be almost the same. Parsing XML or JSON documents with JavaFX is both very simple using the javafx.data.pull.PullParser class.

A query output is a Atom XML document with several information. We are interested only in the fields that holds the avatar image, the message and the user name.

var tweets = VBox {}
def parser = PullParser {
    var avatar;
    var firstname;
    var text;
    documentType: PullParser.XML;
 
    onEvent: function(event: Event) {
        if(event.type == PullParser.START_ELEMENT){
            if(event.qname.name.equals("link")){
                if(event.getAttributeValue(QName{name: "rel"}) == "image"){
                    avatar = event.getAttributeValue(QName{name:"href"});
                }
            }
        }
 
        if(event.type == PullParser.END_ELEMENT) {
            if(event.qname.name == "title"){
                    text = event.text;
            }
            if((event.qname.name == "name")and(event.level==3)){
                var names: String[] = event.text.split(" ");
                firstname = names[0];
                insert Tweet {
                        image: Image {
                            url: avatar
                        }
                        message: text
                        username: firstname
                    } into tweets.content;
            }
        }
    }
}

Querying Tweets

We can get Atom results through url queries like that:

Notice that queries should be URL encoded. We will use a additional parameters &rpp=4 to receive only 4 results per page. To know more about search queries read the Search API Documentation. We get these results as InputStreams making asynchronous HTTP requests using the javafx.io.http.HttpRequest class, which it’s perfect to invoke RESTful Web Services.

word = "Beatles";
var request = HttpRequest {
    location: "http://search.twitter.com/search.atom?q={word}&amp;rpp=4";
    onInput: function(stream: java.io.InputStream) {
        parser.input = stream;
        parser.parse();
    }
}
request.enqueue();

Conclusion

Here is the application running for the word “House”.

twitter with javafx

Is not a complete Twitter client, as it’s not intended to be, but can show you how to handle a simple asynchronous call and handle Twitter documents. There’s already a few beta JavaFX Twitter clients like Tweetbox and Twitterfx and certanly others will appears.

Download

Sources and Netbeans project, fxtwitter.tar.bz2.

Parsing a XML Sandwich with JavaFX

delicious sandwich

Let sandwich.xml be a file at /tmp directory with the content above.

<?xml version="1.0" encoding="UTF-8"?>
 
<bread sesame="true">
   <catchup/>
   <hamburguer/>
   <cheese type="chedar"/>
   <maionese/>
   <lettuce/>
</bread>

We can open it using java.io.FileInputStream and so use it on a javafx.data.pull.PullParser. A PullParser is a event oriented parser that works with XML and YAML files. Above a general and simple parser with a GUI that show the list of events during the parse process.

import java.io.FileInputStream;
import javafx.data.pull.Event;
import javafx.data.pull.PullParser;
import javafx.ext.swing.SwingList;
import javafx.ext.swing.SwingListItem;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
var list = SwingList { width: 600 height: 300 }
 
var myparser = PullParser {
   documentType: PullParser.XML;
   onEvent: function (e: Event) {
      var item = SwingListItem {
         text: "event {e}"
      };
      insert item into list.items;
   }
   input: new FileInputStream("/tmp/sandwich.xml");
}
myparser.parse();
 
Stage {
   title: "XML Sandwich"
   scene: Scene { content: list }
}

javafx xml sandwich

The XML cheese element produce two the outputs.

type:1 typeName:START_ELEMENT level:1 qname:cheese text:” namespaces:{} attributes:{type=chedar}
type:2 typeName:END_ELEMENT level:1 qname:cheese text:” namespaces:{} attributes:{type=chedar}

Notice that white spaces like tab and escape characters like new line also produced events from type TEXT. We are not interested on them. Above a parser that looks only those events of type START_ELEMENT or END_ELEMENT, look into it’s contents, building a sandwich at runtime based on the XML file.

import java.io.FileInputStream;
import javafx.data.pull.Event;
import javafx.data.pull.PullParser;
import javafx.data.xml.QName;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
// my sandwich starts as an empty VBox
var mysandwich = VBox {}
 
// give a name and returns a ImageView with a png image like the name
function ingredient(name){
   return ImageView {
      image: Image {
         url: "{__DIR__}{name}.png"
      }
   }
}
 
// basicaly, look the event and put a ingredient at mysandwich
var myparser = PullParser {
   documentType: PullParser.XML;
   onEvent: function (e: Event) {
      // starter xml elements
      if(e.type == PullParser.START_ELEMENT){
         // bread
         if(e.qname.name.equals("bread")){
             insert ingredient("bread_top") into mysandwich.content;
         }
 
         // hamburguer
         if(e.qname.name.equals("hamburguer")){
             insert ingredient("hamburguer") into mysandwich.content;
         }
 
         // catchup
         if(e.qname.name.equals("catchup")){
             insert ingredient("catchup") into mysandwich.content;
         }
 
         // maionese
         if(e.qname.name.equals("maionese")){
             insert ingredient("maionese") into mysandwich.content;
         }
 
         // lettuce
         if(e.qname.name.equals("lettuce")){
             insert ingredient("lettuce") into mysandwich.content;
         }
 
         // cheese
         if(e.qname.name.equals("cheese")){
            var type= e.getAttributeValue(QName{name:"type"});
            if(type.equals("cheedar")){
                 insert ingredient("cheedar") into mysandwich.content;
            } else {
                insert ingredient("cheese") into mysandwich.content;
            }
         }
      }
 
      // ending xml elements (just bread)
      if(e.type == PullParser.END_ELEMENT){
         if(e.qname.name.equals("bread")){
            insert ingredient("bread_botton") into mysandwich.content;
         }
      }
   }
   input: new FileInputStream("/tmp/sandwich.xml");
}
myparser.parse();
 
Stage {
   title: "XML Sandwich"
   scene: Scene {
      height: 300
      content: mysandwich
   }
}

Here’s our sandwich.

sandwich javaFX

Just changing the XML file you got a new sandwich.

<?xml version="1.0" encoding="UTF-8"?>
<!-- double burger -->
<bread sesame="true">
   <maionese/>
   <lettuce/>
   <hamburguer/>
   <cheese type="chedar"/>
   <catchup/>
   <hamburguer/>
   <lettuce/>
</bread>

double burguer

Bon appétit.

For more details on XML and JSON parsing see the JavaFX API.