{"id":1556,"date":"2014-09-19T23:41:01","date_gmt":"2014-09-19T21:41:01","guid":{"rendered":"http:\/\/www.jensd.de\/wordpress\/?p=1556"},"modified":"2014-09-19T23:41:01","modified_gmt":"2014-09-19T21:41:01","slug":"fontawesomefx-8-0-10-released","status":"publish","type":"post","link":"https:\/\/www.jensd.de\/wordpress\/?p=1556","title":{"rendered":"FontAwesomeFX 8.0.10 released"},"content":{"rendered":"

FontAwesomeFX 8.0.10 introduces Stacked Icons and FXML support<\/strong><\/p>\n

Binaries: Download <\/a>
\nSources: Bitbucket<\/a>
\nMaven:
\n[xml]
\n
\n de.jensd<\/groupId>
\n fontawesomefx<\/artifactId>
\n 8.0.10<\/version>
\n<\/dependency>
\n[\/xml]<\/p>\n

Stacked Icons<\/strong><\/p>\n

FontAwesome<\/a> is featuring Stacked Icons<\/a> which is clearly also for JavaFX Applications this is a useful feature.<\/p>\n

To support Stackend Icons FontAwesomeFX 8.0.10 comes with two new classes:<\/strong> AwesomeIconsStack<\/strong><\/code> and Icon<\/strong><\/code>.<\/p>\n

AwesomeIconsStack<\/strong><\/code>
\nis basically a StackPane providing convent methods to add and remove Icons<\/strong><\/code>.<\/p>\n

Icon<\/strong><\/code>
\nis a Node which is able to display a styleable FontAwesome icon. Icons<\/strong><\/code> can be styled in two ways:<\/p>\n

by setting a style class:<\/strong>
\n[java]
\nRegion stackedIcon2 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.SQUARE)
\n .size(“3em”)
\n .styleClass(“stack-base”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.STAR)
\n .size(“2em”)
\n .styleClass(“stack-top”)
\n );
\n[\/java]<\/p>\n

or by setting the style:<\/strong><\/p>\n

[java]
\nRegion stackedIcon3 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.SQUARE)
\n .style(“-fx-font-size: 4em; -fx-text-fill: yellowgreen;”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.APPLE)
\n .style(“-fx-font-size: 3em; -fx-text-fill: white;”)
\n );
\n[\/java]<\/p>\n

\"fontawesomefx_8010_1\"<\/a><\/p>\n

Thats the code to create Icons like above:<\/strong><\/p>\n

[java]
\nRegion stackedIcon1 = AwesomeIconsStack.create().add(Icon.create());<\/p>\n

Region stackedIcon2 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.SQUARE)
\n .size(“3em”)
\n .styleClass(“stack-base”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.STAR)
\n .size(“2em”)
\n .styleClass(“stack-top”)
\n );<\/p>\n

Region stackedIcon3 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.SQUARE)
\n .style(“-fx-font-size: 4em; -fx-text-fill: yellowgreen;”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.APPLE)
\n .style(“-fx-font-size: 3em; -fx-text-fill: white;”)
\n );<\/p>\n

Region stackedIcon4 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.SQUARE)
\n .style(“-fx-font-size: 4em; -fx-text-fill: yellowgreen;”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.APPLE)
\n .style(“-fx-font-size: 3em; -fx-text-fill: black;”)
\n );<\/p>\n

Region stackedIcon5 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.BUG)
\n .style(“-fx-font-size: 2em; -fx-text-fill: black;”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.BAN)
\n .style(“-fx-font-size: 4em; -fx-text-fill: red; -fx-opacity: 0.5;”)
\n );<\/p>\n

Region stackedIcon6 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.CIRCLE)
\n .style(“-fx-font-size: 8em; -fx-text-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.TWITTER)
\n .style(“-fx-font-size: 4em; -fx-text-fill: white;”)
\n );<\/p>\n

Region stackedIcon7 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.CIRCLE)
\n .style(“-fx-font-size: 12em; -fx-text-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.BITBUCKET)
\n .style(“-fx-font-size: 6em; ”
\n + “-fx-text-fill: linear-gradient(#ffffff, #d2d2d2); ”
\n + “-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );”)
\n );<\/p>\n

HBox stackIconBox = new HBox();
\nstackIconBox.setSpacing(5.0);
\nstackIconBox.getChildren().addAll(stackedIcon1, stackedIcon2, stackedIcon3, stackedIcon4, stackedIcon5, stackedIcon6, stackedIcon7);<\/p>\n

Region iconStack1 = AwesomeIconsStack.create()
\n .add(Icon.create()
\n .icon(AwesomeIcon.CIRCLE)
\n .style(“-fx-font-size: 12em; -fx-text-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);”))
\n .add(Icon.create()
\n .icon(AwesomeIcon.BITBUCKET)
\n .style(“-fx-font-size: 6em; ”
\n + “-fx-text-fill: linear-gradient(#ffffff 0%, #d2d2d2); ”
\n + “-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );”))
\n .add(new Icon(AwesomeIcon.BAN, null, “-fx-font-size: 12em; -fx-text-fill: red; -fx-opacity: 0.5;”, null));<\/p>\n

HBox stackIconBox2 = new HBox();
\nstackIconBox2.setSpacing(5.0);
\nstackIconBox2.getChildren().addAll(iconStack1);<\/p>\n

[\/java]<\/p>\n

Have a look at “iconStack1<\/strong><\/code>” in the code above:
\nthe number of stacked Icons<\/strong><\/code> is not limited to only two.<\/p>\n

Support for FXML<\/strong><\/p>\n

In respect to the issue opened by Manuel Mauky<\/strong>s (@manuel_mauky) I played with the new @NamedArg<\/strong><\/code> annotation. It’s also possible to use the Icon<\/strong><\/code> in FXML (even stacked):<\/p>\n

\"fontawesomefx_8010_2\"<\/a><\/p>\n

[xml]
\n
\n
\n
\n
\n
\n
\n
\n <\/children>
\n <\/StackPane>
\n <\/children>
\n<\/VBox>
\n[\/xml]<\/p>\n

I am not a Ninja master yet, but somehow I imported a custom component to get it also supported in SceneBuilder 2.0:<\/p>\n

\"fontawesomefx_8010_3\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

FontAwesomeFX 8.0.10 introduces Stacked Icons and FXML support Binaries: Download Sources: Bitbucket Maven: [xml] de.jensd fontawesomefx 8.0.10 [\/xml] Stacked Icons FontAwesome is featuring Stacked Icons which is clearly also for JavaFX Applications this is a useful feature. To support Stackend Icons FontAwesomeFX 8.0.10 comes with two new classes: AwesomeIconsStack and Icon. AwesomeIconsStack is basically a… <\/span>Continue Reading FontAwesomeFX 8.0.10 released<\/span><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"footnotes":"","_jetpack_memberships_contains_paid_content":false,"jetpack_publicize_message":"FontAwesomeFX 8.0.10 released http:\/\/wp.me\/p38FCL-p6","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[52,32,20,2,25,94,15,59,14,4,8],"tags":[108,93,95,83,90,31,84,60,82,76,39],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p38FCL-p6","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1556"}],"collection":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1556"}],"version-history":[{"count":29,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1556\/revisions"}],"predecessor-version":[{"id":1588,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1556\/revisions\/1588"}],"wp:attachment":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}