Showing posts with label JavaFX 2 CSS. Show all posts
Showing posts with label JavaFX 2 CSS. Show all posts

Sunday, June 17, 2012

JavaFX 2: Styling Text with CSS

In this JavaFX tutorial I am styling three text nodes, so it's tutorial about how to style text with JavaFX 2 and CSS. The inspiration for this tutorial I got from GroovyFX site, so I wanted to do something similar with JavaFX 2. You can take a look at the final result of this  tutorial below. The code may be improved a lot, as I have more Java background than CSS, so I wrote few more lines of the Java code, instead to minimize it with CSS.
-->
In order to follow this tutorial I recommend to you to see my previous tutorials about:

Here is the Java code of our example:

Here is the CSS code of our example:


If you like this, and other JavaFX 2 tutorials on this blog, you can follow me on Twitter to be informed about new JavaFX tutorials.

Thursday, May 24, 2012

JavaFX 2 CSS: Styling Buttons

You can create a custom look, also called a skin, for your JavaFX application with cascading style sheets (CSS). CSS contain style definitions that control the look of user interface elements.

In this tutorial I am styling four buttons here to show how CSS works with JavaFX 2. As you can see from the code I define styles that are associated with a node through the node's ID. The ID is set using the node's setId() method and I apply style sheets to Scene. The style sheet test.css provides the skinning shown in the image below.
-->


Here is the final result of our  JavaFX 2 CSS: Styling Buttons example:
javafx 2 css
JavaFX 2 CSS

Here is Java code of our example:
In order to style this application properly you'll need to create test.css file in /src folder of your project. That can be easily done by following these steps below:

  • Right click on /src folder in Eclipse IDE Navigator, then select New, and then select File.
  • Now just enter name of that file, in this case test.css

In this example I am styling buttons with gradients (radial, linear). 

-->

Here is CSS code of our example:

If you like this, and other JavaFX 2 tutorials on this blog, you can follow me on Twitter to be informed about new JavaFX tutorials, or you can take a look at these recommend tutorials:






If you have any comments, questions, and anything like that, please feel free to  leave  a comment below, or at least if you like this tutorial you can SHARE it with your friends.