« Programation JRuby /... | Main | Centre de mise à... »
Sunday Sep 28, 2008

Premiere application JavaFX avec NetBeans...

JavaFX... voilà un des "buzz word" qui parcours le Net ces jours-ci. Il suffit de regarder le nombre de visiteurs record que ce blog a reçu le jour de mon très court article sur JavaFX pour s'en rendre compte! ;)

En ce basant sur Creating A Simple JavaFX Application Using NetBeans IDE, essayons d'en apprendre un peu plus sur cette technologie...

Et c'est partit!

Ajouter le plugin JavaFX a l'EDI de NetBeans

Première chose à faire, télécharger le plugin pour JavaFX. Outils -> Plugins.

Assurons-nous d'abord que le centre de mise à jour "Beta" est active, puis sous l'onglet "Plugins disponibles" recherchons les plugins JavaFX (pour aller plus vite, taper "javafx" dans le champ "Rechercher".)

Sélectionnons les trois plugins JavaFX et installons-les.
Une fois l'installation terminée et l'EDI redémarré les ressources pour JavaFX sont disponibles.


Créer un projet JavaFX.

  1. Choisir Ficher > Nouveau Projet (File > New Project) depuis le menu principal
  2. Dans le panneau assistant sélectionner la catégorie JavaFX et JavaFX Application comme type de projet
  3. Cliquer Suivant (Next)
  4. Nommer le projet MonProjetHorloge
  5. Changer le répertoire d'installation du projet si cela vous dit
  6. Dans le champ "Create Main File", changer la valeur par défaut par monprojethorloge.Horloge
  7. Laisser les autres champs a leurs valeurs par défaut
  8. Cliquer Terminer (Finish)


Ajouter le code de l'application Horloge


Dans cette section nous modifions le fichier Horloge.fx en ajoutant du code JavaFX qui va créer une horloge analogique. Afin de créer cette horloge analogique nous allons suivre quatre étapes:
  1. Définir la fenêtre et la Custom Node Class.

  2. Définir l'apparence de l'horloge

  3. Ajouter les aiguilles et numéros

  4. Ajouter une image de fond

1. Définir la Frame de la fenêtre et la classe Custom Node

  1. Créons la fenêtre principale de l'application

    2. On copie et colle les lignes suivantes juste au dessus de la line qui dit "//place your code here"
    import javafx.application.Frame;
    import javafx.application.Stage;
    Insérons les lignes suivants juste en dessous de la ligne "//place your code here"
    Frame {
    title: "JavaFX Clock Application"
    width: 295
    height: 325
    closeAction: function() {
    java.lang.System.exit( 0 );
    }
    visible: true
    stage: Stage {
    content: [ ]
    }
    }
    Clic droit n'importe ou dans la fenêtre de code et choisir "Format" pour rendre du code proprement indenté.

    Maintenant étendons la classe CustomNode et lançons nous dans la création de notre horloge...

  2. La palette de droite va nous fournir tout ce dont on a besoin pour créer un appli JavaFX. Les snippets ou template de codes vont nous permettre un développement rapide de cette application. Les valeurs par défaut de ces template peuvent évidemment être modifiées à notre convenance; une fois ceux-ci glisses dans le fichier source.
    1. a. Dans la fenêtre Palette (généralement située a droite du fichier source), sous le nœud Applications, glisser le composant "CustomNode" dans le fichier source, juste au dessus de "//place your code here". Notons que les import nécessaires on été fait automatiquement.
    2. Remplaçons MyCustomNode par Horloge comme nom de classe.

2. Définir l'apparence de l'horloge

Maintenant créons l'apparence de l'horloge, toujours en utilisant les snippets de la Palette.
  1. Créons tout d'abord un cercle
    1. Etendons le nœud "Basic Shape" de la Palette
    2. Sélectionnons et glissons le composant Circle dans l'éditeur. Glissons le plus précisément entre les crochet dans la ligne qui définit content:


  2. En utilisant la complétion de code automatique, modifions les propriétés du cercle

    3. Nous allons temporairement utiliser le cercle pour nous aider a centrer les chiffres que l'on va ajouter a l'horloge un peu plus tard.
    1. Supprimons les propriétés centerX et centerY - nous n'en avons pas besoin ici
    2. Plaçons le curseur juste devant le mot fill et appuyons sur Ctrl+Espace
      3. La liste des propriétés disponibles pour un cercle est affichée
    3. Sélectionnons "stroke" depuis le menu et appuyons sur Entrer
      4. La propriété stroke remplace alors la propriété fill
    4. Plaçons le curseur juste après le code Color et avant le mot BLACK, et pressons Ctrl+Espace
    5. Sélectionnons BLUE depuis le menu pop-up
      6. Le mot BLUE remplace alors le mot BLACK
  3. Afin que la classe cercle de l'Horloge que l'on vient de créer, s'affiche dans la fenêtre "Frame" modifions la propriété content comme ci-dessous:
    stage: Stage {
    content: Horloge{}
    }
  4. Définissons ensuite les propriétés du cercle en utilisant les templates de code source pour aller plus vite
    1. Plaçons le curseur juste au dessus de la fonction publique de création du cercle - public function create()
    2. Tapons pu puis la touche tabulation
      3. Le mot public apparait
    3. Maintenant at puis tabulation
      4. La ligne est complétée, comme si dessous:
      public attribute attr1;
    4. Répétons l'opération deux fois et modifions les attributs des nouvelles lignes créées comme ceci:
      public attribute radius : Number = 77;
      public attribute centerX: Number = 144;
      public attribute centerY: Number = 144;
    Remarquons au passage que chaque mot clef a sa couleur prédéfinit, facilitant le repérage dans le code...


  5. Modifions maintenant la propriété radius du cercle comme ci-dessous:
    content: [Circle {
    radius: radius + 10
    stroke: Color.BLUE
    }]

3. Ajouter les aiguilles et numéros

Pour cette partie nous allons un peu couper dans les détails... :).
  1. Le code suivant permet de centrer l'horloge et les aiguilles
    1. Dans la section "import" ajoutons cette ligne:
      import javafx.scene.geometry.*;
    2. Copions le code suivant, en gras (n'oublions pas la virgule après le premier "Circle"), et collons le juste en dessus du premier "Circle" créé auparavant.
      Circle {
      radius: radius + 10
      stroke: Color.BLUE
      }      ,
      // code for the clock's first center circle
      Circle {
      radius: 5
      fill: Color.DARKRED
      },
      //code for the smaller center circle

      Circle {
      radius: 3
      fill: Color.DARKRED
      },
      //code for the seconds hand
      Line {
      // add the seconds hand transform code here
      endY: -radius - 3
      strokeWidth: 2
      stroke: Color.RED
      },
      //code for the hour hand
      Path {
      //add the hour hand transform code here
      fill: Color.BLACK

      elements: [
      MoveTo {x: 4, y: 4},

      ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},
      LineTo{ x: radius - 15 y: 0},
      ]
      },
      // code for the minutes hand
      Path {
      //add the minutes hand transform code here
      fill: Color.BLACK
      elements: [
      MoveTo {x: 4, y: 4},
      ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},
      LineTo{ x: radius y: 0},
      ]
      }

    3. Clique droit n'importe dans le code ajoute, "Format" pour rendre tout cela plus lisible.
  2. Ajoutons désormais le code qui va definir les chiffres sur la face de l'horloge. Encore une fois, il nous suffira de copier/coller le code ci-dessous au bon endroit.
    1. Commençons par les "import"... à coller dans la section "import"
      import javafx.scene.text.Text;
      import javafx.scene.Font;
      import javafx.scene.FontStyle;
      import javafx.scene.transform.Translate;
      import javafx.scene.transform.Rotate;

    2. Puis le cœur du code, qui va afficher les heures de notre horloge... Copions le code en gras puis collons-le après le code du premier "Circle" et juste avant la ligne de commentaire de finissant le premier centre du cercle:
      Circle {
      radius: radius + 10
      stroke: Color.BLUE
      },

      // code to display the numbers for every third hour
      for (i in [3, 6, 9, 12])
      Text {
      transform: Translate { x : -5, y : 5 }
      font: Font {size: 16 style: FontStyle.BOLD }
      x: radius * (( i + 0 ) mod 2 * ( 2 - i / 3))
      y: radius * (( i + 1 ) mod 2 * ( 3 - i / 3))
      content: "{i}"
      },
      //code to display a circle for the rest of the hours on the clock
      for (i in [1..12])
      if (i mod 3 != 0 ) then Circle {
      transform:Rotate { angle: 30 * i }
      centerX: radius
      radius: 3
      fill: Color.BLACK
      } else [ ],
      // code for the clock's first center circle
      Circle {
      radius: 5
      fill: Color.DARKRED
      },

    3. Clique droit n'importe dans le code ajoute, "Format" pour rendre tout cela plus lisible. Voila comment les lignes ajouter devrait ressembler:


    4. Copions la ligne en gras ci dessous et collons-la entre la ligne avec Group et content :. Cela affichera les heures et les aiguilles proprement dans les limites de l'horloge:
      public function create(): Node {
      return Group {
      transform: Translate { x: centerX, y: centerY }
      content: [
      Circle {
    5. Clique droit n'importe dans le code ajoute, "Format" pour rendre tout cela plus lisible.

Faisons une petite pause ici et regardons ou nous en sommes.

Pour ce faire, rien de plus simple, il nous suffit d'appuyer sur le bouton "Preview" situé dans la barre d'outils, elle même située juste au dessus de l'éditeur. Et voilà le travail:

Il ne nous reste plus qu'à ajouter une image de fond, pour rendre notre horloge plus attrayante. Mais je garde cela pour un prochain post ;).

Sur ce amusez-vous avec JavaFX et à plus!

Posted at 10:01PM Sep 28, 2008 by Jeremie Bertolino in NetBeans  |  Comments[0]

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed