TweetWallFX – Part 2

In my TweetWallFX – Part 1 article I presented to you how you could simply create a start screen with some effects available in JavaFX. In this article we’re going to see how to create the wall of tweets itself. We will not use any Twitter API but generate random tweets in order to focus on JavaFX.

“Business” part

Before to deal with the UI we are going to create some business classes on which the application will be built on. First of all we create a class representing a tweet in order not to be dependent by any Twitter API you may use.

Next we create a simple Twitter DAO in order to provide some services, like getting some tweets. As I usually like to do, I create an interface representing my DAO, and then some implementation. This allows me to change the implementation used at any time without having to change and check my whole code. The interface will be:

UI time

Now we’re able to get some “tweets” we will create the UI and some logic code in order to update the wall. Remember I said that I think that with JavaFX it’s the first time you can really implement the MVC design pattern in Java desktop apps. When you come from the Swing world like me, maybe you put everything of your UI in a class, instantiate manually everything and so on. But if you come from the JSF world like me too, you easily separate your view from the backing code. The first times you create some JFX apps, you may be nostalgic and want to do everything by hand, like in the old times (yeah I know this), or maybe you’re just used to do it. My advice for you is to ask yourself this question: “Do I really NEED to do everything all by myself for the UI?”. It will be hard the first times, but you’re getting better everyday! After this little introduction, let’s get back to work! I want my wall to be filled by “bubbles”, and each bubble will contain the information about a tweet. I have two main possibilities for creating this bubble:

Old fashioned way: create everything in the Java code by creating a wonderful class having a Label, a picture, and so on.

The way you’re always dreamt about: create an external file that will contain that UI element

Of course we will use the second way and create our bubble using FXML. So here we go:

The FXML is pretty simple and everything should be known by you if you read the previous article. Nothing more, nothing less. Then we will create an FXML that will be our wall and contain some bubbles.

As you can see, the root element isn’t a “regular” Pane but a Tab. Indeed I decided to create a tab-based app. So here, instead of creating a Pane that will be added in a Tab in my backing code, I directly create a Tab. This Tab only contains an AnchorPane which is going to contain our bubbles and that has a linear gradient with some gray colors. You should also be familiar with the fx:controller attribute that defines a backing class as controller for the FXML.

Controller time

For now we’re already done with the UI part! (yeah that was quick) We have to create our controllers and you will see that is pretty straight forward to do. The most simple one is the TweetBubbleController so let’s take a look at it.

Well this is the main part of the controller. Moving your tweets is algorithmic so go ahead for your own implementation. I’ll do a specific article to present you some animation stuff you’ll be able to use here. The last controller to update is the start screen one. Remember that in the previous article, we defined the onAction=”#startTweetWall” attribute on the search button. Now we’re going to create the method named startTweetWall in our controller which is:

Well this is it. Now what you have to do for example in order to generate tweets is to create a basic TimerTask taking your instance of WallController into parameter, and then, with your DAO, generate tweets, and add them using the addTweet(Tweet t); method of your controller.
Well that’s it for this article. Stay tuned.