Eclipse et Ubuntu 9.10 …

Au départ, je voulais juste installer le plugin Android avec la dernière version d’Eclipse(3.5.1) sur mon Ubuntu 9.10. 
La chose parait assez simple de premier abord…
Mais impossible d’installer le plugin, les boutons ne produisent aucune action, les listes ne s’affichent pas, etc…

La cause du problème provient d’Eclipse qui utilise la bibliothèque UI SWT se basant les composants UI natif  GTK+
et comme le comportement interne de GTK+ a changé dans la version de GTK+ (2.18) utilisée dans Ubuntu 9.10 et que SWT utilise très mal et bidouille trop GTK+, ca ne marche plus.
https://bugs.launchpad.net/ubuntu/+source/gtk+2.0/+bug/442078/comments/28

Heureusement les créateurs on prévu le coup et il existe une variable pour redonner le comportement d’avant avec cette version de GTK+.

La solution est donc de créer un script  pour lancer Eclipse avec la variable GDK_NATIVE_WINDOWS positionnée à  1

launch_eclipse.sh

#!/bin/bash
export  GDK_NATIVE_WINDOWS=1
/home/patrick/patrick/program/eclipse.org/eclipse-javaEE-galileo/eclipse/eclipse

Ou /home/patrick/patrick/program/eclipse.org/eclipse-javaEE-galileo/eclipse/eclipse est l’emplacement de votre exécutable Eclipse

Sinon NetBeans fonctionne très bien ;)

Note : Le problème existe aussi avec toutes les applications Eclipse RCP et je pense SWT

Note2 : La fiche de bug Eclipse

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