Technologies coté client javaFX

Nouveau et cool!
BENZOUACHE Hani
Agenda
Introduction

Démonstration

C’est quoi javaFX?

What’s next?

La plateforme javaFX
Java supporte-elle le développement des applications clientes riche

Oui…..mais !
JavaFx simplifie le développement des applications clientes riches
C’est quoi javaFX?

‘‘JavaFx, est l'évolution de la plate-forme client Java
conçu pour permettre aux développeurs d'applic...
La plateforme JavaFx
Pourquoi utiliser JavaFx?
RIAs for all
screens

•
•
•
•

{

Desktop
Navigateur
Mobile
TV

Plateforme client riche
intuitiv...
Demonstration
Structure à base d’arbre ‘’Scene graph
•
•
•

Graphe acyclique orienté
Les parents et les fils
Représentatio...
Demonstration
Demonstration
Group
(root)
AnchorPane

TextField

Button

ListView
Demonstration

User interface

LoginExample.java

Contrôleur
LoginController.java

Interface style

LoginExample.fxml

Ent...
Demonstration
LoginExample.java
@Override public void start(Stage stage)
throws Exception
{
Parent root =
FXMLLoader.load(...
Demonstration
LoginExample.fxml
<GridPane

fx:controller="fxmlexample.FXMLExampleController"
xmlns:fx="http://javafx.com/f...
Demonstration
LoginExample.fxml
..
..
<HBox spacing="10" alignment="bottom_right"
GridPane.columnIndex="1" GridPane.rowInd...
Demonstration
LoginExample.fxml
..
<stylesheets>
<URL value="@Login.css" />
</stylesheets>
</GridPane>

Login.css
root
{ d...
Scene Builder
JavaFX Scene Builder
• Outil pour construire les UIs.
• Code FXML généré
automatiquement.
Scene Builder
Drag&Drop

Edition preview en temps r

Intégration avec
l'EDI
And more…
Ensemble
• Galerie de plus de 100 exemples d'applications.
What next ?

Lambda expression
JavaFx 3D
Rich Text

8

DatePicker

Public API for CSS

Swing Node

Tree Table Control

Pri...
Questions !!
Prochain SlideShare
Chargement dans…5
×

JavaFx overview

1 358 vues

Publié le

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 358
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Je vais commencer ma présentation par une petite introduction et puis je vais présenter javaFx et elle fait quoi exactement ensuite je vais présenter les différentes API et fonctionnalité de la platefome. Et ses avantages Ensuite je dérouler une démostration pour voir contrairement la façon de coder de JavaFx et à la fin je vais parler de la prochaine release de JavaFx qui est la version 8.
  • Java supporte le développement des application desktop riche, ça fait un bon moment et cela avec les appletset multi-plateformesEt vous avez peut être tous vu des applications clientes riches construites avec Java.Cependant la création d&apos;une application graphique riche en Java nécessiteà un développeur de travailler avec différentes technologies telles que AWT, Swing, Java2D, JOGL ou Java3D etcCe rend le développement assez complexe et prend du temps en terme de développement.
  • Javafx simplifie la complexité de la création d&apos;applications client riche assez complexesIl fournit une simple bibliothèque d&apos;API que les développeurs peuvent facilement utiliser pour ajouter des graphiques , des médias, du contenu Web , UI controls , à leurs applications De cette façon, les développeurs n&apos;ont plus à se soucier sur la technologie à utiliser pour une tâche donnée . Au lieu de cela , ils ne peuvent se concentrer sur ce que sur les fonctionnalités dont ils ont besoin et ensuite utiliser l&apos;API JavaFX appropriéDonc on va dire que JavaFX2.0 vient introduire un certain nombre de nouvelles fonctionnalités à la plate-forme Java .
  • En fait JavaFX est totalement intégré à l&apos;environnement d&apos;exécution Java (JRE) et tire pleinement parti de la la performance de la plate-forme Java.Une Applications JavaFX est exécutée sur n&apos;importe quel système ou navigateur qui exécute le JRE et qui s’intègre aussi facilement à la plate-forme Java, Mobile Edition (Java ME), JavaFXexploite également les autres avantages de la Plate-forme Java, tels que l&apos;orienté objet, l&apos;héritage, le polymorphisme.
  • Après que avoir fait une petite apperçu sur javaFX on va rentrer un peut dans le détail pour voir de quoi il est capable et ce qu’il fournit comme API et fonctionnalités, le schéma suivant est une vue d’ensemble sur les différentes API et fonctionnalités de la façon dont la plate-forme JavaFX intègre les différentes plates-formes.JavaFXRuntime:,qui représente l’environnement d’executtion et aussi et des bibliothèques de support. pour la plateforme.Common elements: Contient des API et autres runtimes qui fonctionnentsystématiquement sur toutes les plateformes.Desktop Éléments : Contient extensions d&apos;API qui sont spécifiques à la plateforme desktopMobiles Eléments : Contient extensions d&apos;API qui sont spécifiques à la plate-forme mobile.TVÉléments : Contient extensions d&apos;API qui sont spécifiques à la plate-forme de télévision.Application Framework: qui formes en fait le bloc de construction pour le développement des applications.Designer tools: permet aux concepteurs visuels et graphiques de créer des composants graphiques en utilisant des outils de création graphique tels que Adobe Photoshop et Adobe Illustrator et les utiliser dans l&apos;application JavaFXDeveloppertool: qui permet justement au developpeurs la création des application javaFx
  • Du coup,kesque la plateforme javaFx nous apporte par rapporte ce qui était auparavantJavaFX fournit un modèle développement et le déploiement unifié pour la création de RIA pour le desktop , le navigateur, mobile et TV.Plateforme client riche : JavaFX, il est facile et intuitif à intégrer des graphiques, vidéo, audio, animation et texte riche.on pourra réutiliser lesbibliothèques Java d’un système existantes dans JavaFX et de cette façon la de préserver l&apos;investissement qu’on a déjà fait en Java.JavaFX offre une utilisation uniforme pour tous les navigateurs sur de multiples plateformesAvec JavaFX on pourra bien intégrer une interface utilisateur riche avec une complexe entreprise back-end.
  • En fait le développement des interface graphique est structurée en arbre , qui s’appelle le scene graphe qui est un graphe orienté avec de parents et des fils ces nœuds font justement la representation des composants graphiquesLes principaux nœuds de chaque arbre est le stage qui est la fenetre principale de l’appli en quelque sorte c’est le Jframe de SwingScene la surface de dessin pour le contenu graphique de l’Application.Eu puis tous les composants graphiques sont placés dans la scenes qui reprensent justement les nœuds de l’arbre .
  • Si on prend l’exemple d’une interface qui un composant layout de mise en forme anchorPane , un champs de text un button et puis un viewlist
  • Lescene graph serait comme suit le group root qui est le père par defautEt puis le anchorPane pour la mise en forme de l’interface et ensuite les fils de ce nœuds sui sont
  • Maintenant je vousmontre ou réside la simplicité et la richesse de javaFX , par le déroulement d’un simple code d’une interface de login .Sa force en fait est dans ce qu’on appelle FXML qui est un langage basé sur XML qui fournit la structure pour la construction d&apos;une interface utilisateur séparée la couche logique et contrôle de l’application.
  • Je vais commencer par le entry point qui sert à créer le stage, la scène et de charger la template de l’interface qui est le fichier FXMLDans un premier temps on charge la template de l’interfaceEt puis on crée la scene avec les dimension et le nœud ou nous avons charger la templateEnsuite on donne un titre du stage On mis dedans la sceneEt à la fin on affiche la sceneComme ça le fichier template est vide en fait
  • Comme vous voyer ici la template de l’interface Tout en dessus on fait le lien avec le controleur dans le noued père qui est dans notre cas GridPane pour la mise en forme de l’interface qui est l’equivalent du table de HTML 5.
  • Ici j’ai rajouté tout simplement un button de logging au fichier fxml , on rajoute dans le contrôleur le code qui manipule l’evennement de click
  • La derniere tâche c’est effectivement de rendre l’application jolie et intuitive en l’appliquant du CSS
  • C’est vrai vous me dites que développer l’interface graphique comme ça en dur en XML c’est fastidieuse et couteuse en terme du temps,Oracle à prevu cela et à inroduit un outil qui est assez prtatique et qui permet d’éviter de coder une interface de A à Z.Et qui facilite énormement la tâche de la mise en formes de nos interfaces graphique et à la fin il nous génère les interfaces sous forme des fichier Fxml prêts à utlisations
  • Les principales fonctionnalités qui sont assez pratique sontLe drag&amp;drop: qui permet de costruire les interface rapidement en glissant les composant et en les mettant sur l’interface sans avoir besoin d’écrire du code Aussi ça fournit en fait une integration facile et efficace avec n’importe quel IDE de Java.Çapermet en fait de visualiser rapidement les modifications de mise en forme de l&apos;interface que vous faites sans la nécessité de compiler. Ces caractéristiques permettent de réduire les temps de développement de l’application. On pourra bien également appliquer du CSS sur l&apos;interface utilisateur et avoir des aperçu sur le look and feel appliqué
  • Ensemble offre une galerie de plus de 100 exemples d&apos;applications qui couvre pratiquement toutes les fonctionnalités de JavaFX, tels que des graphiques, des contrôles, de l&apos;animation, des graphiques, des médias et WebView. Le code source de chaque échantillon et liens vers la documentation de l&apos;API sont également fournis. Ensemble fournit aux développeurs un outil interactif de référence pour ce qu&apos;ils peuvent construire avec JavaFX.Du coup Enseble est developpé aussi par Oracle est qui est disponible sur le site officiel de Oracle
  • Whatisnext??La prochaine version qui sera la version javaFX8 , 2.2 vers javaFx8 par rapport en fait la platefomr java La version final sortira prochainement, pas loin, en 18 mars prochain, il y avait déjà la version developperpreview qui sorti déjà en septembre dernier.Donc les plus importantes foncionnalités de la prochaine version est qye , le support de 3D sera amélioré Inroduction de la lambda expresssion qui est plutôt une fonctionnalité rajouté à java et non pas exclusivement à javaFxNouveaux effets avec de nouvelles options à appliquer sur les textesDe nouvelles API CSS qui permettrons de faire beaucoup de choses en ce qui concerne le design des interfaces Swing node qui sera une fonctionalité assez pratique et qui permettra d’introduire des composants swing dans la sceneSupport d’impression sera bien rajouté dans la prochaine version Et bien d’autres composants et controles qui n’existaient pas dans version 2.2
  • Merci pour votre attention et si jamais vous avez des questions!
  • JavaFx overview

    1. 1. Technologies coté client javaFX Nouveau et cool! BENZOUACHE Hani
    2. 2. Agenda Introduction Démonstration C’est quoi javaFX? What’s next? La plateforme javaFX
    3. 3. Java supporte-elle le développement des applications clientes riche Oui…..mais !
    4. 4. JavaFx simplifie le développement des applications clientes riches
    5. 5. C’est quoi javaFX? ‘‘JavaFx, est l'évolution de la plate-forme client Java conçu pour permettre aux développeurs d'applications de créer et de déployer facilement des applications clients riches qui se comportent toujours sur de multiples plateformes. ,,
    6. 6. La plateforme JavaFx
    7. 7. Pourquoi utiliser JavaFx? RIAs for all screens • • • • { Desktop Navigateur Mobile TV Plateforme client riche intuitive Préserver son investissement Fonctionnalité crossbrowser Intégration en entreprise
    8. 8. Demonstration Structure à base d’arbre ‘’Scene graph • • • Graphe acyclique orienté Les parents et les fils Représentation des composants GUI les principaux nœuds de chaque arbre sont • • Stage: la fenêtre d'accueil de l'application Scene: les canevas, où les composants montrent Tous les composants et éléments graphiques sont placés dans la scène
    9. 9. Demonstration
    10. 10. Demonstration Group (root) AnchorPane TextField Button ListView
    11. 11. Demonstration User interface LoginExample.java Contrôleur LoginController.java Interface style LoginExample.fxml Entry-Point LoginExample.css
    12. 12. Demonstration LoginExample.java @Override public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load(getClass().getResource("f xml_example.fxml")); Scene scene = new Scene(root, 300, 275); stage.setTitle("FXML Welcome"); stage.setScene(scene); stage.show(); }
    13. 13. Demonstration LoginExample.fxml <GridPane fx:controller="fxmlexample.FXMLExampleController" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"> <padding> <Insets top="25" right="25" bottom="10" left="25"/> </padding> <Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/> <Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1"/> <TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/> <Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2"/> <PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/> </GridPane>
    14. 14. Demonstration LoginExample.fxml .. .. <HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4"> <Button text="Sign In" onAction="#handleSubmitButtonAction"/> </HBox> <Text fx:id="actiontarget" GridPane.columnIndex="1" GridPane.rowIndex="6"/> </Gridpane> LoginController.java public class FXMLExampleController { @FXML private Text actiontarget; @FXML protected void handleSubmitButtonAction(ActionEvent event) { actiontarget.setText("Sign in button pressed"); } }
    15. 15. Demonstration LoginExample.fxml .. <stylesheets> <URL value="@Login.css" /> </stylesheets> </GridPane> Login.css root { display: block; } .root { -fx-background-image: url("background.jpg"); } .label { -fx-font-size: 12px; -fx-font-weight: bold; -fxtext-fill: #333333; -fx-effect: dropshadow( gaussian …………………………………
    16. 16. Scene Builder JavaFX Scene Builder • Outil pour construire les UIs. • Code FXML généré automatiquement.
    17. 17. Scene Builder Drag&Drop Edition preview en temps r Intégration avec l'EDI
    18. 18. And more… Ensemble • Galerie de plus de 100 exemples d'applications.
    19. 19. What next ? Lambda expression JavaFx 3D Rich Text 8 DatePicker Public API for CSS Swing Node Tree Table Control Printing Suppor
    20. 20. Questions !!

    ×