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.

About these ads

7 Responses to “Having fun with SVG and JavaFX 2.0”

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

    • 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. Oh – that’s actuallly good news !!!

    Thanks for that hint !

  3. Daniel Zimmermann Reply March 3, 2012 at 4:40 pm

    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?

    • 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.

Trackbacks/Pingbacks

  1. Java desktop links of the week, March 5 | Jonathan Giles - March 4, 2012

    [...] Schindl has been having fun with SVG and JavaFX 2.0. He takes an SVG file, converts it to FXML, and then proceeds to look up elements of the scenegraph [...]

  2. JavaFX links of the week, Mach 5 // JavaFX News, Demos and Insight // FX Experience - March 4, 2012

    [...] Schindl has been having fun with SVG and JavaFX 2.0. He takes an SVG file, converts it to FXML, and then proceeds to look up elements of the scenegraph [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 676 other followers

%d bloggers like this: