Deezer clone - 1st step

Goal: Show a rectangle with a label in it and animate the tint of this rectangle when the cursor enter or exit of it.

Well, I think that to have a well defined goal is always a nice start. I can stay focus on it and my reflections keep together in the good direction.

If as me you prefer sometimes to have a preview of the result before read the next, just click on the launch button!

Draw the rectangle

So to start I had to draw a simple rectangle; quite easy with JavaFx:

Rectangle{
width: 120
height: 100
fill: Color.BLACK;
}

When I said easy, I wasn't lying! But for now, I have only a black rectangle when the deezer items are filled by a nice white to gray gradient. Once again very simple:

LinearGradient{
startX: 0.0
startY: 0.0
endX: 0.0
endY: 1.0
stops : [
Stop{offset: 0.0 color: Color.rgb(163,163,163)},
Stop{offset: 0.5 color: Color.rgb(106,106,106)},
Stop{offset: 0.51 color: Color.rgb(43,43,43)},
Stop{offset: 1.0 color: Color.rgb(57,57,57)}
]
}

Besides the majority of these attributes that are self explanatory I'd like to talk about the stops attribute. To be clear and concise a Stop defines in a scalable (0.0 = start, 1.0 = end) manner which color is at a certain point.
This code can now replace the Color.BLACK in our previous rectangle's code. Actually we have the rectangle with the right color. After having done the same thing to have the rectangle with blue tints, we just have to start the animating stuff. Before going on I'd like to precise that the 2nd rectangle is located at the same location than the 1st rectangle but with an opacitiy value of 0. We will only change the opacity to create the fading animation.

Fade animation

Have you already developed a Swing application? If so, did you ever try to add animation stuff to it? I don't know about you, but to me it has always been a nightmare. The good news are that with JavaFX, a new era is here!
For my demo, I have been really keen about the JavaFX abilities, here is the code to get a fade animation on our rectangle:

Timeline{
keyframes:[time: 0.6s values: op => 1.0 tween Interpolator.LINEAR]
}

With a simple binding between th op value and the opacity attribute of the blue tint rectangle we have all materials to make a fade animation.

JavaFX Custom node

The last thing to do is drawing the text of the menu item. Once again, quite easy:

Text{
label: "HOME"
x: 0
y: 0
fill: Color.ORANGE
}

The very last thing is gathering all these pieces of code. To do that, I put together all in a new custom node. In Swing development we had the habit to extend a specific component when we wanted to customize a bit. In JavaFX, this is no more the case, CustomNode takes place. I let you see the code source for the final result.

That's it for the 1st step. We have seen how to create a JavaFX custom node that is reusable. But there are still serveral steps from the final deezer's clone... Watch out!

[The code source is avaible under BSD license.]