FXApps

Show data in JavaFX is made easy by DataFX project

2012-01-22T12:46:00.000-08:00

A friend of mine, Teles Maciel, was scrapping a page that contains all the Islam formal prayers schedule for 2012 for who lives in São Paulo. He aims to create an app for mobile. While checking his sample XML I decided to use DataFX project to show these data, and I created an app in less than 5 minutes!

The DataFX project

It's divided in two main parts: Cell Factories and Data Sources and there is the RedFX integration.

Data Sources objective is to facilitate the access to XML/JDBC/CSV/JSON data and show in JavaFX. For example, you can read an XML file and visualize the data in a JavaFX table with a few lines of code.
Talking in code, you basically need to know the following Interfaces to use DataFX:

- DataSourceReader: Responsile for reading a source of data. Two classes that implements this interface are NetworkSource and FileSource;

- DataSource: Responsible for create the JavaFX(e.g. TableColumn, ObsevableLists) stuffs from the DataSourceReader. From this class, you can retrieve the items and the columns from the DataSourceReader. There's a Data Source implementation for each specific format, for example: XMLDataSource, ObjectDataSource, CSVDataSource and more sources are planned in future project releases.

If you want to know more about DataFX I recommend you to see the Jonathan Giles and Johan Vos presentation and read the API JavaDoc.

The "Salah Time" application

Let's start talking about this application showing the data we want to show:

 <?xml version="1.0" encoding="UTF-8"?>  
 <oracoes>  
 <oracao>  
 <nome>fajr</nome>  
 <dia>01/01</dia>  
 <horario tipo="verao">03:55</horario>  
 </oracao>  
 <oracao>  
 </oracao>  
 ...  
 </oracoes>

As you can see, we have a pretty simple XML. The "horario"(time) tag has a "tipo"(type) attribute that may have two possible values: "verao"(summer, for daylight saving time) and "comum"(common, for common time). Imagine if you would show these data the first step would parse the data and then show according the toolkit/API you are using. For example, in JavaFX you would have to create a table and its columns. It is not hard, but a repetitive task when you just want to show the data or when you have a lot of files to show and that's when DataFX starts to help you.

The first thing I had to do was load my file using FileSource:

 FileSource fs = new FileSource("oracoes.xml");

Then I created my XMLDataSource using this FileSource, the tag name ("oracao") and the columns I want to retrieve from oracao: nome, dia and horario. Here is the code (yes, one line):

 XMLDataSource<String[], Object> salatDataSource = new XMLDataSource<String[], Object>(  
 fs, "oracao", "nome", "dia", "horario");

Now the last step is simply integrate XMLDataSource with a TableView. I just had to retrieve the columns I want and add it to my TableView and the items is the DataSource itself:

 package org.salattime.main;  
 import javafx.application.Application;  
 import javafx.scene.SceneBuilder;  
 import javafx.scene.control.TableColumn;  
 import javafx.scene.control.TableView;  
 import javafx.stage.Stage;  
 import org.javafxdata.datasources.io.FileSource;  
 import org.javafxdata.datasources.protocol.XMLDataSource;  
 /**  
  *   
  * So, I want to read the data from oracoes.xml and show in a table. This class  
  * will do it  
  *   
  * @author jesuino  
  *   
  */  
 public class Main extends Application {  
      @SuppressWarnings("unchecked")  
      @Override  
      public void start(Stage stage) throws Exception {  
           stage.setTitle("Salats do ano de 2012");  
           // Just loading the file...  
           FileSource fs = new FileSource("oracoes.xml");  
           // Now creating my datasource, I just need to inform my columns and  
           // oracao, because it is the root of the columns I want  
           XMLDataSource<String[], Object> salatDataSource = new XMLDataSource<String[], Object>(  
                     fs, "oracao", "nome", "dia", "horario");  
           @SuppressWarnings("rawtypes")  
           TableView salats = new TableView();  
           TableColumn<?, ?> nomeCol = salatDataSource.getNamedColumn("nome");  
           TableColumn<?, ?> diaCol = salatDataSource.getNamedColumn("dia");  
           TableColumn<?, ?> horarioCol = salatDataSource  
                     .getNamedColumn("horario");  
           salats.getColumns().addAll(nomeCol, diaCol, horarioCol);  
           salats.setItems(salatDataSource);  
           stage.setScene(SceneBuilder.create().root(salats).build());  
           stage.show();  
      }  
      public static void main(String[] args) {  
           Application.launch(args);  
      }  
 }

Here is the result:

Further use of DataFX(the DataSource part)

This sample seems very simple, but here are some uses for DataFX you may consider:

- Visualization of a REST API result using the NetworkSource;
- Help you to show data in multiple formats with a small portion of code with FileSource and the currently available DataSources implementations (more will come in a future);
- In future, read data from database with a JDBC DataSource;

Remember this project is just getting started, there are more to come :-)

The GateIn Management/Navigation API

2012-01-14T17:34:00.000-08:00

Consuming popular APIs is very interesting and cool. You can in a few minutes seek in the web some how-to, or a sample application and create yours. After create a lot of these kind of applications I got myself bored and no motivation to keep posting. For example, a Twitter app will be only another twitter app and there's a lot of API needing clients or needing to be explored.

So I started to look new APIs to explore. One of these not well recognized, but very well designed in REST terms is GateIn Management API. GateIn is the JBoss Java Portal an it is a great tool with a big community behind it.

The GateIn 3.2 API is not hard to understand and you can learn more about it in this great documentation. Basically we have the base resource called... Resource. The Resource contains all the possible operations and their children. You can navigate by the children and find more operations. You will notice that the more notable feature of this API is the presence of HATEOAS. The API also serve data in XML and JSON formats. You can test the API, but you will need to have the GateIn running somewhere to access. Here is a sample of the response body when you access the base URL in my local installation(I'm using EPP, the enterprise product from Red Hat based in GateIn, so the context may change for pure GateIn installation):

GET on http://192.168.56.101:8080/rest/private/managed-components/
{"description": "Available operations and children (sub-resources).","children": [{"name": "mop","description": "MOP (Model Object for Portal) Managed Resource, responsible for handling management operations on navigation, pages, and sites.","link": {"rel": "child","href": "http://192.168.56.101:8080/rest/private/managed-components/mop"}}],"operations": [{"operation-name": "read-resource","operation-description": "Lists information about a managed resource, including available operations and children (sub-resources).","link": {"rel": "self","href": "http://192.168.56.101:8080/rest/private/managed-components"}}]}

I made a very simple command line app to consume this API and learn more about it. It was used RESTEasy Client API. It is important to say that this API requires authentication since it exposes information of all GateIn groups.

package org.gateinmanager.test.model;

import java.net.URI;
import java.net.URISyntaxException;
import java.util.List;
import java.util.Scanner;
import java.util.Set;

import javax.ws.rs.core.MediaType;

import org.apache.commons.httpclient.Credentials;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.UsernamePasswordCredentials;
import org.apache.commons.httpclient.auth.AuthScope;
import org.gateinmanager.model.Child;
import org.gateinmanager.model.Link;
import org.gateinmanager.model.Operation;
import org.gateinmanager.model.Resource;
import org.jboss.resteasy.client.ClientExecutor;
import org.jboss.resteasy.client.ClientRequest;
import org.jboss.resteasy.client.ClientRequestFactory;
import org.jboss.resteasy.client.core.executors.ApacheHttpClientExecutor;

/**
 * 
 * It will just test the request is being parsed to domain objects...
 * 
 * @author jesuino
 * 
 */
@SuppressWarnings("deprecation")
public class TestModel {
    private static final String USERNAME = "root";
    private static final String PASSWORD = "gtn";

    @SuppressWarnings("unchecked")
    public static void main(String[] args) throws Exception {

        ClientRequestFactory factory = createFactory(USERNAME, PASSWORD);
        Scanner sc = new Scanner(System.in);
        String in;

        Resource resource = null;
        System.out.println("\t\t*****GateIn Management API*****\n\n");

        System.out
                .println(">> Enter the HOST to start navigating or press"
                        + " Q to quit (the base URL is "
                        + "http://192.168.56.101:8080/rest/private/managed-components)\n");
        while (!(in = sc.next()).startsWith("Q")) {
            // Entered a URL, just load Resource and print it
            if (in.startsWith("http://")) {
                ClientRequest cr = factory.createRequest(in);
                cr.accept(MediaType.APPLICATION_XML);
                try {
                    System.out.println("Loading...");
                    resource = (Resource) cr.get().getEntity(Resource.class);
                    System.out.println("Resource loaded!");
                } catch (Exception e) {
                    System.out
                            .println("\n\n>>>  Something went wrong when loading your URL...\n");
                    e.printStackTrace();
                }
            } else {
                System.out
                        .println("\nPlease enter a valid URL or press Q to quit...");
            }
            if (resource != null)
                printResource(resource);
            System.out.println("\n>> Enter URL or Q to quit: ");
        }

    }

    public static ClientRequestFactory createFactory(String username,
            String password) throws URISyntaxException {
        // Setting Credentials though an HttpExecutor
        Credentials credentials = new UsernamePasswordCredentials(username,
                password);
        HttpClient httpClient = new HttpClient();
        httpClient.getState().setCredentials(AuthScope.ANY, credentials);
        httpClient.getParams().setAuthenticationPreemptive(true);
        ClientExecutor clientExecutor = new ApacheHttpClientExecutor(httpClient);

        // creating the factory
        return new ClientRequestFactory(clientExecutor, new URI(""));
    }

    public static void printResource(Resource resource) {
        System.out.println("**\t" + resource.getDescription() + "\t**\n");
        System.out.println("Possible Operations:");
        List<Operation> operations = resource.getOperations();
        if (operations != null) {
            for (Operation operation : operations) {
                Link link = operation.getOperationLink();
                System.out.println("\t* " + operation.getOperationName() + ": "
                        + operation.getOperationDescription() + "\n\t   rel: "
                        + link.getRel() + ". Located at " + link.getHref());
            }
        }

        Set<Child> children = resource.getChildren();
        if (children != null) {
            System.out.println("\nChildren:");
            for (Child child : children) {
                Link link = child.getLink();
                System.out.println("\t* " + child.getName() + ": "
                        + child.getDescription() + "\n\t   rel: "
                        + link.getRel() + ". Located at " + link.getHref());
            }
        }

    }
}

The authentication part of this code is the most boring. We need to set it in the Executor, which who will make the authentication behind RESTEasy calls. We use RESTEasy factory to create requests based on the URI supplied by the user of the application. From the response, we retrieve the body as object using the model objects from GateIn REST API source code. Here is the application running:

*****GateIn Management API*****

>> Enter the HOST to start navigating or press Q to quit (the base URL is http://192.168.56.101:8080/rest/private/managed-components)
http://192.168.56.101:8080/rest/private/managed-components
Loading...
Resource loaded!
** Available operations and children (sub-resources). **
Possible Operations:
* read-resource: Lists information about a managed resource, including available operations and children (sub-resources).
rel: self. Located at http://192.168.56.101:8080/rest/private/managed-components
Children:
* mop: MOP (Model Object for Portal) Managed Resource, responsible for handling management operations on navigation, pages, and sites.
rel: child. Located at http://192.168.56.101:8080/rest/private/managed-components/mop
>> Enter URL or Q to quit:
http://192.168.56.101:8080/rest/private/managed-components/mop
Loading...
Resource loaded!
** Available site types. **
Possible Operations:
* read-resource: Lists available site types for a portal
rel: self. Located at http://192.168.56.101:8080/rest/private/managed-components/mop
* export-resource: Exports any resources with an export operation handler registered. This operation is recursive until an operation handler is found.
rel: content. Located at http://192.168.56.101:8080/rest/private/managed-components/mop.zip
* import-resource: Imports mop data from an exported zip file.
rel: operation. Located at http://192.168.56.101:8080/rest/private/managed-components/mop
Children:
* portalsites: Management resource responsible for handling management operations on a specific site type for a portal.
rel: child. Located at http://192.168.56.101:8080/rest/private/managed-components/mop/portalsites
* usersites: Management resource responsible for handling management operations on a specific site type for a portal.
rel: child. Located at http://192.168.56.101:8080/rest/private/managed-components/mop/usersites
* groupsites: Management resource responsible for handling management operations on a specific site type for a portal.
rel: child. Located at http://192.168.56.101:8080/rest/private/managed-components/mop/groupsites
>> Enter URL or Q to quit:
Q

I have a critic to this REST API that is the use of the ".xml" in some URIs , but the API design is good for the portal management for its composite architecture (Everything is a resource and has children). I hope post something more graphical in next weeks :-D

Playing with HTML 5 Canvas: A particle generator

2011-11-27T07:34:00.000-08:00

I know this is a blog that was supposed to have JavaFX stuff, but I'm playing with HTML 5 last days due a book I bought in Amazon :).

It's been cool to play with HTML 5, and JavaScript, but after reading and creating some things with it, I realized that I like JavaFX for graphical things, because it has a lot of built in special effects and transitions. Also in JavaFX the view components can be directly handled, with no needs to get it from HTML.

What I'll show in this post is a simple particle generator which was inspired in Lucas Jordan's book JavaFX Special Effects. In charpter 2 of this book some particles systems are presented.

The code of the particle generator I created could be much better, I know that, but it was a test and If I start to improve things and add new controls I would never finish it, so I decided to put a end on it. The app is in my site and you can enjoy it. Click to see the source and all the javascript and CSS are in this single page!

The main challenge while creating this out was create more particles and set a good time interval. To create more particle I created a for in the main loop, it is not performatic, if you set a big particle life and the number of particles, sure you will see that it will start to slow down.

Other problem was related to the color. I know we have the input type color in HTML 5 but it is working only in Opera, so I decided to use three(RGB) slides to set the particle color and another three for the background color. A criticism is related to the way of Javascript deal with colors, I know it accepts a lot of color formats (rgb, rgba, #000000), but I really miss a class for color.

In my opinion Canvas is cool, sure, but It's only a "rectangle on page to paint". Sure we will need some Javascript libraries (we do have some) to make easier ti handle canvas. I still believe that Flash is necessary for the Rich WEB (even with recent adobe announcements) and JavaFX is much valid for creating rich applications ( not necessary in WEB).

VisageFX Label First Test

2011-08-29T19:20:00.001-07:00

var img = Image{url: "http://www.celgeek.com.br/wp-content/uploads/2011/05/javafx_logo_color_1.jpg"}


function imgView():ImageView{
ImageView{
fitWidth: 50 fitHeight: 25
image: img
}
}

Stage {
title: "Testing Label And Font"
visible: true
Scene {
width: 220
height: 200
fill: Color.LIGHTBLUE
Group{
[
Label{
text: "Simple Label with Graphics"
underline:true
wrapText: true
alignment: Pos.TOP_LEFT
textFill: Color.RED
layoutX: 10
layoutY: 5
graphic: imgView()
}
Label{
text: "Other Label"
wrapText: true
textFill: Color.RED
layoutX: 10
layoutY: 35
graphic: imgView()
contentDisplay: ContentDisplay.RIGHT;
}
Label{
text: "Label with font"
wrapText: true
textFill: Color.BLACK
layoutX: 10
layoutY: 65
font: Font.font("Arial", 10);
}
Label{
text: "Label with another font"
wrapText: true
textFill: Color.BROWN
layoutX: 10
layoutY: 85
font: Font.font("Comic Sans MS", 15);
}
Label{
text: "Label with text bold and italic"
wrapText: true
textFill: Color.BROWN
layoutX: 10
layoutY: 105
font: Font.font("Verdana",FontWeight.BOLD, FontPosture.ITALIC, 10);
}
]
}

}
}

VisageFX: Visage on JavaFX 2

2011-08-18T08:36:00.000-07:00

After a few months without post, I bring you a great news: VisageFX, which is Visage -> JavaFX 2, development has started recently.

We still have a lot of work to do, but yesterday I could test VisageFX and I'm impressed with the results!

If you want to contribute, Stephen Chin wrote a wiki page about how to do that.

I hope soon I can port some apps to VisageFX and start new ones :)

Visage: My First impression

2010-10-18T09:05:00.000-07:00

Hi Everyone!

After the news about the JavaFX discontinued by Oracle, Visage project started!

Today Stephen Chin announced the first preview of Visage, with the default key word, (which we can define a default property setted on the class definition). I'm playing with it, look the sample I did using the default feature:

public class Person{
public default var name:String;
public var age:Integer;

override function toString(){
"{name} has {age} years"
}
}

public function run(){
var person :Person = Person{
"William " age:22;
}
println(person);
}

For me it's great! I'm motived more than before to keep my JavaFX works, Thanks Stephen Chin and Visage Community!

Links on Visage

Search about Fish

2010-09-26T19:49:00.000-07:00

HI HI HI!

JavaFX Script is dead. No, it isn't, it will rebirth as Visage. You know I love JavaFX Script because it's easy and fast to build what you want. Anyway, JavaFX will be better on next months...

Well, I'm presenting another JavaFX app tagged as Useful, at least for me and some brazilian fishers... Our goal is to search basic information about fishes using the art of Screen Scrapping. The information is in Portuguese, because the easiest page I found to scrap was in Portuguese...

I'm using Google images too. Take a look below, all I can say is: JavaFX is great.

public function getFishImages(fishName: String, callback: function(: String[]): Void) {
   var urls: String[];
   imageRequest.stop();
   imageRequest = HttpRequest {
   location: "http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q={fishName}&rsz=large&start=1"
   onError: function(e){println(e)}
   onInput: function(is: InputStream) {
   def parser:PullParser = PullParser {
   documentType: PullParser.JSON
   input: is
   onEvent: function(e: Event) {
   if (e.type == PullParser.END_VALUE) {
   if (e.name == "url") {
   insert e.text into urls;
   }
   }
   if (e.type == PullParser.END_DOCUMENT) {
   callback(urls);
   }
   }
   }
   parser.parse();

   }
   }
   imageRequest.start();;
}

The app:

Now you can run the app and/or download the source.

If you are still interested in JavaFX Script you should check my humble JavaFX applications page :).

Peace.

HttpRequester

2010-08-26T19:00:00.000-07:00

Hi!!!!

First: thanks all guys for the ~200 visits since last week when I published "An app to search Images".

Today I'm going to show you my new app which I created to test my RESTful WebServices. That's a simple solution to explore my services. Basically is a graphical interface for the great HttpRequest class. I'm working in a new app more complete perform my tests when working with RESTful and ROA.

Below you can see it working:

The main goal is see the response of your RESTful WEB Services. But you can test services from Twitter, by instance. This app gives a good way to explore REST APIs.

You can test the app in applet mode or download the JNLP. If someone wants the code, please, let's me know.

An App to Search Images

2010-08-21T13:25:00.000-07:00

Another app in JavaFX, this time to search images using Google, Bing, Flickr and Yahoo services. After search an image you can edit and save to your computer.

You know, it was very easy to build it... JavaFX is easy and helped me a lot. With this api I'm working and some works from JavaFX community, it's turned more easier :)

Rakesh Menon one more time helped me with their internal window and Save as Image. I really miss their posts =/.

I have a lot of small things to improve and finish in this app, but no time to... So I'm releasing the code, if you want you can improve the app, or you can do anything you want with it :D

The video below show the app working:

Well, I suggest you to launch the app and give you feedback :)

Searching lyrics with this javafx app: LyricsSearchFX

2010-07-11T20:34:00.000-07:00

This JavaFX app allows you to search lyrics using the Chart Lyrics API. There is a translation feature which uses the Google Translate API.
The internal dialog was built with the great Modal Dialog from Rakesh Menon. All the HttpRequest are handled by this API I'm working.

You can download the code and run in Applet or JNLP mode.

Let me know your feelings about this app :D.

Presenting this blog!

2010-07-09T05:59:00.000-07:00

Apps! JavaFX! WEB! REST! *-*

I like to spend my time with these things. I love REST. I love JavaFX. I like to show my apps to my mom, to my friends. I love to program all the night and wakeup another day with new ideas...

My prefered language are JavaFX, Java, Python, C. I like javascript libraries, like JQuery. SQL is great, sometimes i spend time creating schemas on database. I like a lot of things...

I'm playing with JavaFX currently. Will JavaFX die? Is Flash better than JavaFX? Will HTML5 destroy third part plugins on WEB?I really don't care! I just like JavaFX... You should clean your mind of these questions and start programming in JavaFX, or Flash, Silverlight....Some guys are sensationalist and say things things they don't know... They are not God to preview the future...

JavaFX is awesome!

I work with database, ETL, ABAP, server monitoring, boring things. I already worked with C Programming Language( the best 3 months of my professional life, until now). Everybody knows me as a Java Programmer. So, I'm a Java freelancer programmer sometimes ;)

Why I'm telling it in this post? Because it will clearier the objective of this blog.

And another goal is improve my english. English is important, even I'm in Brazil...