Create a Notepad with Javafx2 - Styling

We created the layout of the notepad in the previous blog. We got a default look and feel of the application we are trying to create. Surely, we will need much more than that to impress ourselves with the capability of Javafx2. How did we style in Swing Applications? Or AWT's ? One of the advantages of using Javafx2 was the styling using the css. Even though I am not much of a css loving developer, still I thought of giving this a try and to my amazement the results were a bit more satisfying. 

Of course, it is up to the developer, but what I feel is that the idea of separating the presentation entirely makes a lot more sense than including the same in your code. Imagine a fully grown complex Application and all of a sudden "I kinda wanna change the way it looks"...

Now, lets try and make our application aware of the css. This is simple handled in the code. 
Open your Launcher.java or any other class where you have called your stage and scene instances. 
Add the line of code.

scene.getStylesheets().add(getClass().getResource("/css/notepad.css").toExternalForm());

I have an eclipse structure. My notepad.css should be residing in the src/css folder. To start with the basics you can read this css tutorial on Javafx2. This mentions about the the default css called "caspian.css" that is available in the   "jfxrt.jar". Even if you do not want to alter the css, it is a very good resource for your knowledge on the subject.

Now let us create a notepad.css in the mentioned folder structure. 
First, I specifically do not like the black colour of the menubar. Let's start by changing the colour of the same.
This is done in two steps.

Open your fxml file and an ID to the menubar.
<MenuBar fx:id="menubar">

Now add the following in your css
#menubar{
-fx-background-color: #b0c4de;
}

This is what you get as an output. 

The colour is changed but it is still flat. Let us add a gradient look to it.
Change the above code to

-fx-background-color: linear-gradient(#FFF, #D4DBED, #E1E6F6);

It works well, but there is still lot of things to be fixed. Again, I am no css expert and hence not getting into too much detail here. Please refer css reference for details.

Moving ahead, I am not liking the white color of the menu labels. Let me change the same to black. 
Add the following code to the css file.
.menu .label{
    -fx-text-fill: black;
}
Here I am telling the fx engine to paint black all the labels of the menu.

Now, I observe a blue coloured border around the textarea that we created. Lets remove the same. This is Javafx default.
Update the below line to your fxml file. We are adding an id to the textarea.
<TextArea fx:id="textpane">
</TextArea>

Now let's add the style in css. Add the following styling to the css.
#textpane{
-fx-background-insets: 0, 0, 1, 2;
}

Instead of adding an ID you can use .text-area as well. Totally upto you.But we'll be needing the ID we added in our application later on. So might as well use it.

Now, I want to change the drop down menu that appears when you click on File or Edit or any other Menu. I want the background color a bit different and solid. The code below is to be added for this in your css file.

.context-menu {
-fx-background-color: #F1F1F1;
-fx-border-color: black;
-fx-border-width: 0.5;
}

It gives a more familiar looking context menu. Now we have almost the look and feel we want for our notepad. There are still a lot that can be done here. Lets stop with the styling part here itself.

The core of the application is the functionality. Let us start by adding those in the next part.