Friday Fun XXXVII

Aloha,

This time I have another fun component for you...well it's not really one component but more a container plus a component.
Last weekend I was skimming the web for some inspiration and stumbled upon an animated card navigation demo which you can find on dribbble.
I don't really know why I chose this card navigation thing because I have no use for it but I liked the challenge to create it in JavaFX :)

So here is a little video that shows my implementation...



As you can see my implementation has a little bit different behavior (esp. after one card was selected my cards move out to the right in parallel where in the original demo one card after another moved out to the right). In the beginning my version looked absolutely identical to the demo but somehow I did not like the animation and changed it to the current version.

In principle we have two components here

• Card
• CardBox

The Card class has a title and it has an AnchorPane where you can add your own content like follows:

Card card = new Card("My Card");
card.getContent().add(new Button("My Button"));

Instead of adding a Button you can add whatever JavaFX node you like and you can adjust it by using the static methods in AnchorPane:

• AnchorPane.setTopAnchor(NODE, DISTANCE)
• AnchorPane.setRightAnchor(NODE, DISTANCE)
• AnchorPane.setBottomAnchor(NODE, DISTANCE)
• AnchorPane.setLeftAnchor(NODE, DISTANCE)

The other class we have is the CardBox which extends StackPane. The CardBox also has an icon (which again is implemented using Ikonli) on the upper left corner which reacts on mouse clicks. If you click it the CardBox will show you all Cards it contains and you can select one Card by clicking on it.
As soon as you select a card all other cards will move out to the right and the selected Card will fill the whole area of the CardBox.

I guess that's it already for today, maybe you'll find this Card navigation menu useful and if you would like to have the code, feel free to fork it on github.

Oh just as a reminder...tomorrow the Java BBQ will happen so just in case you have time and would like to meet...do not hesitate to participate...

Otherwise enjoy the upcoming weekend and...keep coding :)