Having fun with SVG and JavaFX 2.0


Thanks to Jasper Potts – e(fx)clipse has a first logo.

Jasper was nice enough to provide me an SVG-Version of it and so I was able to use my SVG-To-FXML-Converter to make some fun stuff with the logo he provided.

After the conversion I rearranged some parts in the FXML to group them and make them locateable through CSS-Selectors.

Next was to loaded the fxml-File:

Group g = FXMLLoader.load(LogoAnimation.class.getResource("efxclipse2.fxml"));

Use the extremly cool Node.lookup(String) to locate some of the elements in the FXML.

// hide the logo
Group logo = (Group) g.lookup("#logo");
logo.setOpacity(0);

// move the text to the right
Group text2 = (Group) g.lookup("#text_clipse");
text2.setTranslateX(-220);		

Next thing was to make the text move to the right and then make the logo FX-text fade in with this code:

TranslateTransition tt = new TranslateTransition(new Duration(3000), text2);
tt.setFromX(-220);
tt.setToX(0);
		
FadeTransition ft = new FadeTransition(new Duration(2000), logo);
ft.setFromValue(0);
ft.setToValue(1.0);
		
ScaleTransition st = new ScaleTransition(new Duration(2000),logo);
st.setFromX(0);
st.setToX(1);
		
SequentialTransition t = new SequentialTransition(tt,new ParallelTransition(ft,st));
t.setDelay(new Duration(2000));
t.setAutoReverse(true);
t.setCycleCount(Animation.INDEFINITE);
t.play();

Finally I wrapped it up in a transparent stage:

StackPane p = new StackPane();
p.getChildren().add(g);
		
Scene s = new Scene(p);
s.setFill(Color.TRANSPARENT);
		
primaryStage.initStyle(StageStyle.TRANSPARENT);
primaryStage.setWidth(657);
primaryStage.setHeight(237);
primaryStage.setScene(s);
primaryStage.show();

Last step is to use the built-in application export of e(fx)clipse which uses JavaFX’s ant-task to export an application

so that one can launch it on a double click

If you want to take direct look on the sources you can find them in e(fx)clipse’ git-repo.

I know that this is only a small example but it hightlights how easy designers and developers are able to interact with the use of Java, JavaFX, FXML and e(fx)clipse.

This entry was posted in e(fx)clipse. Bookmark the permalink.

7 Responses to Having fun with SVG and JavaFX 2.0

  1. lars says:

    Do i remember correctly that javafx is a dead technology since last weeks official statement from oracle?

    • Tom Schindl says:

      You should read the oracle statement carefully! JavaFX Script and its 1.x API – also often refered to as JavaFX 1.x is going EOL! Did you ever think Java is dead because sun announced the EOL of Java 1.4, 1.5? JavaFX 2.0 with it’s Java API is going to be the successor of Swing and is exactly the opposite to dead.

  2. lars says:

    Oh – that’s actuallly good news !!!

    Thanks for that hint !

  3. Daniel Zimmermann says:

    Even if it’s only a small application, you wrote when playing with your new Logo (congrats for it by the way), if think if Eclipse would support JFX2 as soon as it is available on all platform and would allow to migrate from the old BMP based splash to this… I guess everyone would like that!
    What dou you think?

    • Tom Schindl says:

      What do you mean with “Eclipse would support JFX2 as as it is available” – e(fx)clipse provides integration of JavaFX 2.x not only into the Eclipse IDE as a tooling but also runtime bits to make use of JavaFX inside:

      Eclipse RCP/IDE as e.g. Views/Editors – e.g. the livepreview works like that
      E4AP as an alternate rendering implementation which means NO SWT involved at all anymore

      When it comes to the Splash – I guess you know that you can already customize it today! You’ll be given a shell you can use to place in there whatever you want.

  4. Pingback: Java desktop links of the week, March 5 | Jonathan Giles

  5. Pingback: JavaFX links of the week, Mach 5 // JavaFX News, Demos and Insight // FX Experience

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.