London Tube Lines application. Developed using JavaFX

Hello everybody.
As it could be noticed I haven't been posting for a while. It is due to my university courseworks, which keep me busy all the time, and my private project. This is the part I wanted to discuss. I don't know how many of you lives in London and is familiar with London Underground, but it should not be a problem in understanding my project.

In the past weeks I was working on developing desktop application that will show the current status of the underground lines in London. The application is not yet finished, but major part is codded already. Have a look at the main window:

The rectangle with grey shadow indicates that you can click on it and view information about the line (somehow my hand cursor didn't get caught on that shot...). The information is presented in the window which slides from the top and looks like that:

As you can see it does not show any information yet. It is the part to be yet implemented. It is worth to mention that data is updated from the TFL server through Tubeupdates API. The information to be displayed in the second screen shot is to be fetched straight from TFL through their feeds. And finally the application is purely implemented using JavaFX, I don't use any Java classes.

Once the application is finished, I'm planning to turn it to desktop widget using WidgetFX framework and release to the public:)

Please comment!!!

Thanks

JavaFX layout managers part I - HBox and VBox

After long absence from here I'm back again. This time I would like to talk about layout managers available in JavaFX. For starters, for those not familiar with layout managers, layout manager is responsible for laying out components of GUI in specified fashion. There are many of them available in JavaFX and each of them organises the content in different manner. In this post will describe HBox and VBox, which are very simple end basic. Even though they are very powerful tool in building layout of the application.


Lets start with HBox. This layout manager places the nodes on HORIZONTAL MANNER. Please take a minut consulting the API page for HBox, this will make it easier to understand the following example.
Link to API page: http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene.layout/javafx.scene.layout.HBox.html


As you saw, hopefully, in the API layout manager reside in javafx.scene.layout.* package. Do not forget to import it otherwise your application will not compile and you'll get an error.


Ok, now we are ready to see an example:

Code:


Stage {
    title: "HBox example"
    scene: Scene {
        width: 200
        height: 200
        content: HBox{
            padding: Insets { top: 20 bottom: 20 left: 20 right: 20 }
            spacing: 20
            content: [
                Text { content: "one" },
                Text { content: "two" },
                Text { content: "three"}
             ]
        } // HBox finish
    } // Scene finish
} // Stage finish


No a bit of explanation. As you can see from the code above the HBox has several variables that can be initialized in object literal, while creating an object of this class. The ones that are visible are:


padding - adds padding to the HBox. In the code above another class Insets is used that specifies the padding  at the top, bottom, left and right of the HBox instance


spacing - specifies the distance by which elements will be separated


content - contains the nodes to be positioned


There are many more available:

hpos - lets you specify the horizontal position of all nodes in a row, by default set to HPox.LEFT
vpos - same as above but in vertical manner, by default set to VPos.TOP
nodeVPos -  lets you specify the vertical position of the node, by default set to VPos.TOP
nodeHPos -  lets you specify the horizontal position of the node, by default set to HPox.LEFT




VBox is very simillar to HBox. In essence it contains exactly the same variables as HBox. Therefore slight change in code:


Stage {
    title: "HBox example"
    scene: Scene {
        width: 200
        height: 200
        content: VBox{
            padding: Insets { top: 20 bottom: 20 left: 20 right: 20 }
            spacing: 20
            content: [
                Text { content: "one" },
                Text { content: "two" },
                Text { content: "three"}
             ]
        } // VBox finish
    } // Scene finish
} // Stage finish


Will produce the following:

As you can see the HBox an VBox are very simple to use, but while combined can make powerful GUI. Of course there are many more which will be discussed in part I and part II.

That's all for now.

Cheers