RESTful client in JavaFX

In this second part, we are going to create a small application in JavaFX to call the restful service created in the first part.

This small application is the same as the one created in an older post : JavaFX and JPA 2.0 with my custom component, but instead of call directly the database with the help of an entity, we are going to call the restful service.

To create this application, we are going to create :

·         a Music JavaFX Bean as model

·         a client to the RESTFul services (and its JSON parser)

·         an JavaFX User Interface

Stephen Chin's Petition to Open Source JavaFX

If you like JavaFX , go to  sign the Stephen Chin’s Petition to Open Source JavaFX !
http://steveonjava.com/javafx-petition/

JavaFX CSS Reference Guide

The JavaFX CSS Reference Guide is available

Slimshady:D5- JavaFX

I don’t know what is Slimshady :D5- JavaFX in comparison with the actual JavaFX, but I think it should be a great technology ! :)
See yourself http://blogs.sun.com/ant/
And if you have some information about Slimshady:D5, let me know ;)


[Update: October 6, 2010]
I don't know why (may be because of that) , but the Anthony Rogers's blog is down... 
However, you could always see some videos of Slimshady on YouTube you could always see some videos of Slimshady on YouTube

More UI controls for the next release

I don’t know who is Sungmoon Cho, but according to linkedin he is JavaFX Product Line Manager at Sun Microsystems.
Some time ago, he has opened Official JavaFX Feedback Forum to ask us what we are suggesting for JavaFX.

My answers were (the number before the item, is my number of vote for this item):

And recently (on Friday 19th), Sungmoon Cho updated the the JavaFX FeedBack Forum for the following items:

·         Create more native components, like form items, grids and menus.
with the status planned and the comment
"We are adding a lot more UI controls for the next release. Please stay tuned "

·         Quick application

with the status planned and the comment

"We have a dedicated team of people who work on startup performance. We see significant improvement so far, but we know that it should be much faster. We will update you when we have more data "

·         Quick application startup

with the status under review and the comment

"Many people asked this so we are reviewing this item "

JavaFX and JPA 2.0 with my custom component

In this third and last part, we are going to create a small application which dynamically updates the results in the result list when the user types the search word(s) in a text box.

To do that we will re-use the table and the entity created in the part one, the java class MusicServices.java created in the part two and my search text box that I've created some time ago (with a small correction).

Main.fx

package javafxjpa2searchtextbox;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import customcomponent.SearchTextBox;
import javafx.scene.control.ListView;
import paddy.domain.Music;
import paddy.service.MusicServices;

/**
 * @author Patrick
 */

var listMusic;

var seqMusic:Music[];

var musicServices:MusicServices = MusicServices{};

Stage {
    title: "Application title"
    width: 600
    height: 250
    scene: Scene {
        stylesheets : ["{__DIR__}resources/mac.css"]
        content: [
            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 30
                content: "Search DB"
            }
            SearchTextBox {
                translateX: 10
                translateY: 40
                onResetSearch: function () {
                    println("reset !");
                        delete seqMusic;
                    }
                onSearch: function (s: String) {
                    println("Search of : {s}");

                    listMusic = musicServices.getArtisteNameBeginingBy(s);
                    delete seqMusic;
                    seqMusic = listMusic.toArray(seqMusic);

                    }
            }
            ListView {
                layoutY: 75
                width: 575
                height: 100
                items: bind seqMusic
            }
        ]
    }
}

The key points:

• Delete the sequence on the onResetSearch event of the SearchTextBox component
  delete seqMusic;

• Call the getArtisteNameBeginningBy method, delete the sequence and refill it on the onSearch event  of the SearchTextBox component
  listMusic = musicServices.getArtisteNameBeginningBy(s);
  delete seqMusic;
  seqMusic = listMusic.toArray(seqMusic);

Get the NetBeans project           

Note: don’t forget to create (in NetBeans) a library containing the jar DerbyClient.jar and being called DerbyClient.

JavaFX and the Databases with JPA 2.0

In the first part, we have seen how to access data with JPA. In this second part we are going to see how to get data from database with JPA 2.0 and to display them with JavaFX.

To do that we will re-use the table and the entity created in the part one, and we will create a Java class which contains the code to execute the JPA requests.

Let’s go and create the Java class.

The Java class contains one constructor to create the EntityManager and 2 methods:
findAll():
This method gets all the records from the table and uses the namedQuery findAllAlbum

getArtisteNameBeginningBy(String begining):
This method get all the records from the table where the field artisteName begin by the parameter "begining"

For this second method, I use criteria API just because I wanted to test it…
Normally in this case, we don’t have to use criteria API because we don’t need to create dynamically a query and the criteria API was created to build dynamically and safely a query (without to concatenate strings to build a jpql request, like in JPA 1.0).

The best way to do that, is to use directly a jpql request like this

Query query = em.createQuery("select m from Music m where m.artisteName like :param");
query.setParameter("param", param);
List<Music> musics = query.getResultList();

Or, if you want, create another namedQuery in the Entity

@NamedQueries({
   @NamedQuery(name = "findAllAlbum", query= "select m from Music m"),
   @NamedQuery(name = "findAllAlbumWhereArtisteLike",query="select m from Music m where m.artisteName like :param")
})

And call it like that

Query  query = em.createNamedQuery("findAllAlbumWhereArtisteLike");
query.setParameter("param", param);
List<Music> musics = query.getResultList();

We will not use this method in this part but in the last part.

MusicServices.java

package paddy.service;

import java.util.List;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
import javax.persistence.Query;
import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Root;
import paddy.domain.Music;

/**
 *
 * @author Patrick
 */
public class MusicServices {

    EntityManagerFactory emf;
    EntityManager em;

    public MusicServices(){
        emf = Persistence.createEntityManagerFactory("MusicAndLight");
        em = emf.createEntityManager();
    }

    public List<Music> findAll(){

        Query  query = em.createNamedQuery("findAllAlbum");
        List<Music> musics = query.getResultList();

        return musics;
    }

    public List<Music> getArtisteNameBeginningBy(String begining){

        String param = begining+"%";

        CriteriaBuilder cb = em.getCriteriaBuilder();
        CriteriaQuery<Music> query = cb.createQuery(Music.class);
        
        Root<Music> music = query.from(Music.class);
        query.where(cb.like(music.<String>get("artisteName"), param));
        List<Music> musics = em.createQuery(query).getResultList();

        return musics;
    }

    @Override
    protected void finalize() throws Throwable {
        try {
            em.close();
            emf.close();
        } finally {
            super.finalize();
        }
    }
}

Now, let’s call this class from javaFX to get the data from the database and to display them in JavaFX

Main.fx

package javafxjpa2basic;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.control.Button;
import paddy.domain.Music;
import paddy.service.MusicServices;

/**
 * @author Patrick
 */

var listMusic;
var seqMusic:Music[];

var musicServices:MusicServices = MusicServices{};

Stage {
    title: "Application title"
    scene: Scene {
        width: 600
        height: 175
        content: [
            Button {
                text: "Find all the musics"
                action: function() {
                        delete seqMusic;

                        listMusic = musicServices.findAll();
                        seqMusic = listMusic.toArray(seqMusic);                        

                        println("seqMusic: {seqMusic} ");
                }
            }
            ListView {
                layoutY : 50
                 width: 575
                 height : 100
                 items: bind seqMusic
            }
        ]
    }
}

 
The key points :

•  Creating an instance of the Java class in JavaFX
  var musicServices:MusicServices = MusicServices{};
• Calling the findAll method
  listMusic = musicServices.findAll();
• Converting the java list to a JavaFX sequence
  seqMusic = listMusic.toArray(seqMusic);
• Binding the sequence to the JavaFX GUI List
  items: bind seqMusic

Get the NetBeans project

Note: don’t forget to create (in NetBeans) a library containing the jar DerbyClient.jar and being called DerbyClient.

Scrolling with DisplacementMap effect

Bonne Année ! , Happy New Year !

For beginning this New Year, I added a sinusoidal effect to my scroll.
To do that, I added a DisplacementMap effect to the scroll line.

DisplacementMap Effect

                    effect: DisplacementMap { mapData: map
                                              input:Reflection {
                                                   fraction: 0.75
                                                   topOffset: 0.0
                                                   topOpacity: 0.5
                                                   bottomOpacity: 0.0
                                               } 
                  } 

And I created a FloatMap to make the sinusoidal effect

FloatMap

var widthScroll = letterWidth * 10;    // 10 chars
var map = FloatMap { width: widthScroll height: letterHeight }
for (i:Integer in [0..<widthScroll]) {
    var v = (Math.sin(i/35.0*Math.PI)-0.5)/30.0;
    for (j:Integer in [0..<letterHeight]) {
        map.setSamples(i, j, 0.0, v);
    }
}

As you see in the code, the DisplacementMap effect take a FloatMap as parameter. And each individual entry in the FloatMap contains per-pixel offset information in the x and y direction.

For example if you have this image

My FloatMap contains offsets x and y to have

Download full Main.fx

Download StringConverter.fx

Old School Scroll line

This is my first try to make an old school scroll line like on my old Atari ST.
Normally this is a bitmap effect, but in JavaFx all is nodes…
So I use Nodes :) and this image (from http://forum.deltaforceteam.de/forum/viewtopic.php?f=3&t=127 )

The viewports variable is a sequence which contains for each character the portion of the image corresponding to it.
The line variable is a concatenation of the viewports of the letters to build the text shown in the screen.
And the timeline is used to scroll the text

I add a Reflection effect too :)

Main.fx

package scrolllinedemo;

/*
 * Main.fx
 *
 * Created on 12 déc. 2009, 00:08:52
 */
import javafx.stage.Stage;
import javafx.scene.Scene;

import javafx.geometry.Rectangle2D;

import javafx.scene.image.ImageView;

import javafx.scene.image.Image;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.effect.Reflection;

import javafx.scene.Group;
import javafx.scene.shape.Rectangle;
import javafx.scene.control.TextBox;
import javafx.scene.control.Button;

/**
 * @author Patrick
 */

def letterWidth = 32;
def letterHeight = 32;

var blankLine = [   0,   0,   0,   0,   0,   0,   0,  0,  0,  0 ];

var text = "Hello, this is my first old school scroll line demo. by Patrick ! ";

var textFont = StringConverter.stringToFont(text);
insert blankLine before textFont[0];
var textLength = sizeof(textFont)-1;
insert blankLine into textFont;

var textIncrement = 0;

var font = Image {
   url: "{__DIR__}img/font.png"
}

def viewports = for (row in [0..5]) {
   for (col in [0..9]) {
       Rectangle2D{
           minX: col * letterWidth, minY: row * letterHeight, height: letterWidth, width: letterHeight
       }
   }
}

var line = bind
   for (col in [0..10]) {   //10 chars (320 = 32*10)
      ImageView {
         x: bind (col * letterWidth) -scrollX , y:  0,
         viewport: bind viewports[textFont[col+textIncrement]]
         image: font
      }
   }

var scrollX =0;

var t = Timeline {
                repeatCount: Timeline.INDEFINITE
                keyFrames : [
                        KeyFrame {
                                time : 0s
                                canSkip : true
                        },
                        KeyFrame {

                                time : 8ms
                                canSkip : true
                                action: function(): Void{

                                  var tempX = scrollX+1;
                                  var tempTextIncrement = textIncrement;

                                   if (tempX>=32){
                                       tempX = 0;
                                     if (textIncrement<textLength)
                                        then tempTextIncrement++
                                        else tempTextIncrement = 0;

                                   }
                                   textIncrement = tempTextIncrement;
                                   scrollX = tempX;

                                }
                        }
                ]
        }

t.play();

var tb:TextBox;

Stage {
    title: "Application title"
    width: 335
    height: 150
    scene: Scene {
        content: [
                Group {
                    content:Group{
                        clip:Rectangle {
                                width:  320
                                height: 64
                            }
                        content: line
                    }
                    effect:Reflection {
                         fraction: 0.75
                         topOffset: 0.0
                         topOpacity: 0.5
                         bottomOpacity: 0.0
                    }
                  }
                
                tb = TextBox {
                        text: "try to type your text here... and press on GO!"
                        columns: 30
                        selectOnFocus: true
                        translateY:70
                }
                Button {
                        text: "GO!"
                        action: function() {
                            var textFontTemp = StringConverter.stringToFont(tb.text);
                            insert blankLine before textFontTemp[0];
                            textLength = sizeof(textFontTemp)-1;
                            insert blankLine into textFontTemp;

                            textFont = textFontTemp;
                            textIncrement =0;
                        }
                        translateY:70
                        translateX:275
                }
        ]
    }
}

download StringConverter.fx

Les jeux olympiques d’hiver de Vancouver choisissent JavaFX

J’entends dire ou des personnes me disent, ouais, JavaFx c’est bien mais il n’y a personne qui l’utilise, il n’y a pas de vraie référence, etc, etc …

C’est vrai que JavaFx est une technologie récente (la versions 1.0 n’est sortie que l’année dernière à cette même époque) et qu’il n’y a pas encore beaucoup de référence…
Mais cela commence à arriver, et cela commence avec les jeux olympiques d’hiver de Vancouver 2010 qui ont choisi JavaFX comme technologie de client riche !

On peut même déjà voir le résultat et essayer la première application disponible sur le site Vancouver2010 à l’adresse suivante : http://www.vancouver2010.com/olympic-medals/geo-view/

Cette application sert à montrer :

• les médailles qui ont été gagné par les différents pays durant les différentes éditions des jeux olympiques d’hiver
• quel athlète a gagné quelle médaille
• Et plein d'autres choses...

C’est plutôt pas mal et ca marche super bien sur mon Mac (Snow Leopard), mon Linux (Ubuntu 9.10) et Windows Vista et Seven.

Glassfish V3, NetBeans 6.8, JavaFX Composer Preview

C’est noël avant l’heure ! :)

GlassFish V3 et NetBeans 6.8 sont sorties aujourd’hui …

Mais en plus, pour les personnes s’intéressant à JavaFX, la preview de JavaFX Composer (GUI Builder pour JavaFX) devrait être disponible le 15 décembre !!!

JavaFX Style Sheet with my custom component

Because my custom component doesn’t have a Mac look and feel (the rounded corners of the TextBox) and because I don’t want to change the code of my component, I decided to create a Mac Style Sheet.

Now, let us study the Mac style sheet and the code to use this style sheet

the Mac style sheet - mac.css

.searchTextBox {corner-radius: 25;padding-left: 10}

To have a rounded corners of the textbox, I use the CSS attribute corner-radius and to move the position of the input cursor (because of the rounded corners), I use the CSS attribute padding-left

To use this CSS just set the style sheets attribute of your Scene with the location of your CSS file.

    scene: Scene {
        stylesheets : ["{__DIR__}resources/mac.css"]

The code of the demo (the code of the custom component doesn’t change)

resources\mac.css

/* 
    Document   : style
    Created on : 3 oct. 2009, 00:34:05
    Author     : paddy
    Description:
        Purpose of the stylesheet follows.
*/

.searchTextBox {corner-radius: 25;padding-left: 10}
.searchTextBoxRed{corner-radius: 25;padding-left: 10;border-fill:#FF0000;}

Main.fx

/*
 * Main.fx
 *
 * Created on 3 oct. 2009, 00:44:05
 */

package customcomponentcssdemo;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.control.Button;
import javafx.scene.control.RadioButton;

import javafx.scene.control.ToggleGroup;

/**
 * @author Patrick
 */

class ExtRadioButton extends RadioButton {
    public var action:function();

    override public var selected on replace {
        if (selected) {
            action();
        }
    }
}

def macStyleSheet="{__DIR__}resources/mac.css";
var stylesheets:String = macStyleSheet;

Stage {
    title: "Application title"
    width: 250
    height: 200

    var cssToggleGroup = ToggleGroup {};

    scene: Scene {
        //stylesheets : ["{__DIR__}resources/mac.css"]
        stylesheets : bind stylesheets
        content: [
            Text {
                font : Font {
                    size : 16
                }
                x: 10
                y: 30
                content: "Search "
            }
            SearchTextBox {
                    //styleClass : "searchTextBoxRed"
                    translateX :10
                    translateY :40
                    

                    onResetSearch:function(){
                        println("reset !");
                    }
                    onSearch:function(s: String){
                        println("Search of : {s}");
                    }
            }
            Button {
                    text: "just a button to change focus"
                    translateX :10
                    translateY :80
                    action: function() {
                        println("Hello !")
                   }
            }

            ExtRadioButton {
                            text: "do not use the CSS"
                            translateX :10
                            translateY :110
                            toggleGroup: cssToggleGroup
                           // selected: true

                            action: function() {
                                stylesheets = " ";
                            }
            }

            ExtRadioButton {
                            text: "use the CSS"
                            translateX :10
                            translateY :130
                            toggleGroup: cssToggleGroup
                            selected: true

                            action: function() {
                                stylesheets = macStyleSheet;
                            }
            }
        ]
    }
}

Les technologies RIA (Flex/Silvelight/JavaFX) hors et dans le navigateur

Toujours dans l'article sur les RIA du magazine Programmez n°124, il est dit que les 3 technologies RIA (Flex, Silverlight et JavaFX) peuvent fonctionner hors du navigateur et même que Silverlight hors du navigateur et équivalent à Adobe Air.
Que ces 3 technologies puissent fonctionner hors du navigateur est vrai, par contre dire que Silverlight hors du navigateur et équivalent à Adobe Air ce n'est pas vraiment exact.
Aussi, j'aimerais apporter quelques précisions (non exhaustives) sur ces technologies RIA hors du navigateur (et dans le navigateur aussi pour comparer ;) ).

Silverlight

Le mode hors du navigateur de Silverlight 3 est très limité, en effet une application Silverlight 3 s'exécutant hors du navigateur s'exécute aussi dans une sandbox, la même sandbox (et même runtime) que celle utilisé par le navigateur quand l'application s'exécute dans le navigateur.
L'application ne peut donc pas accéder aux ressources la machine ce qui est très limitant pour écrire une application desktop.
Pour écrire une vraie application desktop avec accès aux ressources de la machine, il faut utiliser WPF (uniquement Windows) qui diffère de Silverlight.
Microsoft propose d'ailleurs un très bon whitepaper comparant les WPF et Silverlight. http://wpfslguidance.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=28278

Flex AIR et Browser

Flex étant à la base une technologie pour écrire des applications s'exécutant dans le navigateur, Adobe a dû créer AIR pour pouvoir écrire des applications hors du navigateur.
Adobe AIR permet d'utiliser les ressources de la machine, contrairement à Silverlight, et d'écrire de vraies applications desktop en Flex.
Pourtant, il ne faut pas croire qu'une application écrite en Flex pour le navigateur va pourvoir fonctionner directement sur le desktop (hors du navigateur) car :

• Le runtime Air est différents du player Flash pour le navigateur

• Une application Flex/AIR est différente d'une application Flex pour le navigateur comme le montre ces 2 petits exemples de l'application Hello World pour Flex/AIR et Flex/navigateur.
  (Air utilise le tag WindowedApplication pour créer sa fenêtre alors qu'une application Flex utilise le tag Application)

Application Flex/AIR

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">

<mx:Script>
<![CDATA[
         private function hello():void{
              myText.text = "Hello world !";
         }
      ]]>

</mx:Script>

<mx:Text id="myText" x="10" y="10" text="..." width="209"/>
<mx:Button x="154" y="36" label="Click me" enabled="true" click="hello()"/>

</mx:WindowedApplication>

Application Flex Brower

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[
         private function hello():void{
              myText.text = "Hello world !";
         }
      ]]>

</mx:Script>

<mx:Text id="myText" x="10" y="10" text="..." width="209"/>
<mx:Button x="154" y="36" label="Click me" enabled="true" click="hello()"/>

</mx:Application>

• La compilation se fait avec la commande mxmlc pour une application Flex navigateur, alors qu'il faut utiliser amxmlc pour une application AIR.
  En fait amxml n'est qu'un batch qui exécute mxmlc avec l'option +configname=air pour compiler une application Flex/AIR avec ses spécificités.

JavaFX

JavaFX est la technologie la plus en avance sur l'exécution dans le navigateur et hors du navigateur. En effet, JavaFX :

• utilise le même runtime (JRE) que se soit pour une application desktop ou pour une application dans le navigateur.

• peut accéder, pour une application desktop, aux ressources de la machine comme une application java classique (lors son exécution dans le navigateur, il utilise une sandbox comme une applet java classique)
• utilise le même SDK et les mêmes APIs que l'on écrive une application desktop ou une application pour le navigateur web. (le code JavaFx est identique dans les 2 cas)

• utilise le même compilateur pour compiler une application JavaFX desktop ou navigateur (javafxc)

Récapitulatif

	Runtimes navigateur et hors navigateur identiques	Accès aux ressources de la machine en mode hors du navigateur	Code identique pour écrire une application navigateur web ou desktop	Compilateur/ SDK identiques
Silverlight	oui	non	oui	oui
Flex	non	oui	non	non
JavaFX	oui	oui	oui	oui

A propos de l'article sur les RIA du magazine Programmez n° 124

Je viens de lire l'article du magazine Programmez n°124 sur les RIA...
Et il y a plein de choses avec lesquelles je ne suis pas d'accord …
Mais le plus gros problème est l'exemple Hello World en JavaFX
Je ne sais pas ce qu'a voulu faire l'auteur, mais c'est clair qu'il ne connait pas JavaFX !

Pour pouvoir comparer un minimum les technos, j'ai donc réécrit cet exemple de deux manières différentes :

• en utilisant le biding
• en utilisant une méthode proche des exemples Flex et Silverlight

Et bien sûr, ces 2 exemples fonctionnent aussi bien dans le browser que en en dehors du browser

Méthode utilisant le binding

Main.fx

package helloworldprogrammez;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.control.Button;

/**
 * @author patrick
 */
var text="...";

Stage {
    title: "Hello World"
    width: 400
    height: 200
    scene: Scene {
        content: [
            Text {
                font : Font {
                    size : 12
                }
                x: 10
                y: 10
                content: bind text
            }
            Button {
                text: "Click me"
                translateX: 154
                translateY: 36
                action: function() {
                    text="Hello world !"
                }
            }
        ]
    }
}

Méthode proche des exemples Flex et Silverlight

Main2.fx

package helloworldprogrammez;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.control.Button;

/**
 * @author patrick
 */

Stage {
    var t:Text;

    title: "Hello World"
    width: 400
    height: 200
    scene: Scene {
        content: [
            t = Text {
                font : Font {
                    size : 12
                }
                x: 10
                y: 10
                content: "..."
            }
            Button {
                text: "Click me"
                translateX: 154
                translateY: 36
                action: function() {
                    t.content="Hello world !"
                }
            }
        ]
    }
}

Acquisition de Sun par Oracle – des news !

Oracle publie, sur son site, un nouveau document concernant l’acquisition de Sun.

Ce document parle entre autre :

• Du futur des produits (incluant NetBeans, GlassFish, OpenOffice, VirtualBox , MySQL, …)

• De l’offre Hardware et Software

• Et de l’open source.

Vous pouvez lire ce document ici

Tant que j’y suis, d’autres news de produits Sun (En Early Access ou Beta)

Java ME SDK 3.0 pour Mac OS est disponible ici . On peut enfin tester nos applications JavaFX mobile sur le mac ;)

Et NetBeans 6.8 Beta est disponible ici. Il supporte entre autre GlassFish V3 / Java EE 6 et JavaFX

Je vais enfin pouvoir faire des tests sur Java EE 6 (et GlassFish V3) sans avoir a bidouiller mon NetBeans 6.7.1 ;)

JavaFX Custom Component

This is just an example to show how you can create your own component from an existing component (here a TextBox).

For that, I wrote a new UI component which is a search text box like you can have it on Mac OS X. This search text box is just a TextBox enhanced with one method which is called each time you enter or delete a character and a small button to reset the criteria in the search text box.

The only problem is this line

override var style = "padding-right: 25 ";

which is not compatible with common profile, but I don’t know how to do that differently.

You can try this JavaFX custom component in the applet below

SearchTextBox.fx

/*
 * StatusField.fx
 *
 * Created on 3 oct. 2009, 00:44:26
 */

package customcomponent;

import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.control.TextBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

import javafx.scene.shape.Rectangle;

import javafx.scene.input.MouseEvent;

import javafx.scene.input.KeyEvent;

/**
 * @author Patrick
 */

public class SearchTextBox extends TextBox {

    public var onResetSearch:function() : Void;
    public var onSearch:function(s: String) : Void;
    override var style = "padding-right: 25 ";

    override var styleClass = "searchTextBox";

    override var onKeyTyped = function(event:KeyEvent){
        if (this.rawText!=""){
            onSearch(this.rawText);
        }
    }
   
    public override function create():Node {
        var t = super.create();
        var resetButton:Group;

        var g = Group {
            content: [
                t,
                resetButton = Group {

                  var crossWidth = bind this.layoutBounds.height * 0.45;
                  var crossHeight = bind this.layoutBounds.height * 0.05;

                  visible : bind this.rawText.length() > 0
                  layoutX: bind this.layoutBounds.width - (this.layoutBounds.height / 2.0)
                  layoutY: bind this.layoutBounds.height / 2.0

                  content: 
                  [
                    Circle {
                        fill: Color.GRAY
                        radius:  bind this.layoutBounds.height * 0.325 // 65% of the texbox height and div 2 for the radius
                    }
                    Rectangle {
                        width: bind crossWidth
                        height:bind crossHeight

                        translateX: bind 0 - crossWidth / 2.0
                        translateY: bind 0 - crossHeight / 2.0

                        fill : Color.WHITE
                        rotate: 45
                    }
                    Rectangle {
                        width: bind crossWidth
                        height:bind crossHeight

                        translateX: bind 0 - crossWidth / 2.0
                        translateY: bind 0 - crossHeight / 2.0

                        fill : Color.WHITE
                        rotate: -45
                    }
                 ]

                 onMouseClicked: function (event:MouseEvent ){
                     commit();
                     this.text="";
                     onResetSearch();
                 }

             }
           ]
       }
       
       return g;
   }
}

Main.fx

/*
 * Main.fx
 *
 * Created on 3 oct. 2009, 00:44:05
 */

package customcomponent;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.control.Button;

/**
 * @author Patrick
 */

Stage {
    title: "Application title"
    width: 250
    height: 200
    
    scene: Scene {
        content: [
            Text {
                font : Font {
                    size : 16
                }
                x: 10
                y: 30
                content: "Search "
            }
            SearchTextBox {
                    translateX :10
                    translateY :40
                    

                    onResetSearch:function(){
                        println("reset !");
                    }
                    onSearch:function(s: String){
                        println("Search of : {s}");
                    }
            }
            Button {
                    text: "just a button to change focus"
                    translateX :10
                    translateY :80
                    action: function() {
                        println("Hello !")
                   }
            }
        ]
    }
}

Duke Anim JavaFX

import java.util.Random;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
//import javafx.scene.effect.Reflection;
//import javafx.scene.effect.SepiaTone;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;

/**
 * @author paddy
 */

class DukeAnimModel {
  
    public var imageURL = "{__DIR__}images/duke.png";
  
    public var x = 0;
    public var y = 0;

    var xTarget = 0;
    var yTarget = 0;

    var xTemp = 0;
    var yTemp = 0;

    public var anim =
    Timeline {
        autoReverse: false
        keyFrames: [
            KeyFrame {
                time: 0s
                values: [x => xTemp, y => yTemp]

            },
            KeyFrame {
                time: 1s
                //values: [x => 300 tween Interpolator.LINEAR,y => yTarget tween Interpolator.LINEAR]
                values: [x => xTarget tween
                    Interpolator.SPLINE(0,.5,.5,1),y => yTarget tween
                    Interpolator.SPLINE(0,.5,.5,1)]

                action: function(): Void{
                    println("at 1 second ...");

                    var generator = new Random();
                
                    //xTarget = (generator.nextFloat() * 400 + 1) as Integer;
                    xTarget = (
                    generator.nextFloat() * 240 + 1) as Integer;
                    println("xNext {xTarget} ");
                    //yTarget = (generator.nextFloat() * 300 + 1) as Integer;
                    yTarget = (
                    generator.nextFloat() * 320 + 1) as Integer;
                    println("yNext {yTarget} ");
                    xTemp=x;
                    yTemp=y;

                }
            },
        ]
        repeatCount: Timeline.INDEFINITE
    };
}

var dukeAnimModel = DukeAnimModel {}

dukeAnimModel.anim.play();


Stage {
    title: "Application title"
    width: 240  //400
    height: 320 //300
    scene: Scene {
        content: ImageView {
            transforms: Translate {
                x: bind dukeAnimModel.x
                y: bind dukeAnimModel.y
            }
            image: Image {
                url: dukeAnimModel.imageURL

            }
          /*  effect:Reflection{
                input: SepiaTone{
                }
            }
           */

        }
    }
    onClose: function(){
        println("exit");
    }
}

News JavaFX de juillet !

Ça bouge pas mal en ce moment autour de JavaFX ! Alors les news de juillet … La dernière version d’OpenJFX (du 20 juillet 2007) contient 2 nouvelles démos • Casual, un client Jabber (Messagerie instantanée) écrit en JavaFX script • SVG to JavaFX translator, un convertisseur de fichiers SVG en classes JavaFX script. La création d’un incubateur pour les projets émergeants autour d’OpenJFX … Et surtout les sources du compilateur JavaFX Script sont disponibles !

JavaFX les news du jour !

On commence par le tout premier éditeur WYSIWYG pour JavaFX, JFXBuilder On continue avec les sources d’un playeur de MP3 en JavaFX Script L’interface utilisateur de ce playeur est écrite totalement en JavaFX Script, mais sans utilisation de la partie script de description UI Et on finit par un petit éclaircissement sur cette histoire de licence Nandini Ramani (Sun) clears up any confusion on the JavaFX user list I would like to reiterate that it is perfectly fine to distribute your JavaFX applications, in fact we encourage it. I was just pointing out that it is not yet ready for commercial use. [Developers] are welcome to distribute their applications. Unlike other proprietary companies, we at Sun really do believe in open source and community involvement. I am sorry we do not have a licensing model in place yet, but I assure you that we are working on it and I will keep you all posted as soon as we have one in place. Q: Is the JavaFX Runtime the same thing as the JavaFX Script which is to be “open sourced” as per the FAQ? Nandini R: Yes, it is and the runtime will be open sourced.

JavaFX Script – premier retour

J’ai commencé à faire quelques trucs avec JavaFX Script et ce que je pensais être au départ un simple langage de script orienté UI, va en fait un peu plus loin. C’est un véritable langage de script ! Pour effectuer mes tests j’ai utilisé Netbeans 6 M9 avec le plugin adéquat. Malheureusement, après l’installation du plugin, je ne peux plus faire que du JavaFX … , le reste des wizards de création (projet, classe, etc…) se bloquant avant la fin et ne générant pas ce qu’ils doivent générer. En plus le plugin, ne propose pas la coloration syntaxique, ni la complétion :( Donc après ces quelques tests, j’ai collecté quelques liens intéressants, enfin ceux qui m’ont servi à commencer. le language JavaFX Script https://openjfx.dev.java.net/JavaFX_Programming_Language.html les widgets JavaFX http://blogs.sun.com/chrisoliver/resource/widgets.html Tutorial pour bien commencer ! https://openjfx.dev.java.net/Getting_Started_With_JavaFX.html le blog de Chris Oliver http://blogs.sun.com/chrisoliver/ Les sources ainsi que les sources et des exemples https://openjfx.dev.java.net/servlets/ProjectDocumentList à noter que dans se package se trouve aussi les sources de : JavaFXPad demo, Script 2D Graphics Tutorial, Tesla Demo, Studiomoto Demo