Movable Tabbed Panes in Javafx

Tabbed panes code walk through

We are familiar with the tabbed panes but there are no in-build tabbed panes with Javafx SDK. Therefore, I felt a need to develop this tabbed pane functionality. The tabbed panes are basically set of windows stacked upon each other. Therefore all we do is to bring the pane to display, to the user by using the toFront function to bring the window in front of all the other windows when clicked upon it.

Each of the tabbed panes are a group of 3 Rectangles and a title text. The Grey outer rectangle that forms the outer border for the tabbed pane giving the border effect. The second rectangle is the tab rectangle containing the text displaying the heading of the tabbed pane which is positioned based on the position of this tabbed pane in the series of tabbed panes being displayed. The final Rectangle is the content rectangle which forms the content of the tabbed pane containing all the controls if specified.

The Rectangle containing the title of the tabbed pane listens on mouse events. When it detects the mouse pressed event the corresponding tab is brought to the front to be displayed to the user. The rest of panes then fall to back in the Z order.

These tabbed panes also listen on mouse dragging events to implement the shifting of the tabs between each other when we drag the tabs to appropriate positions. These tabs can be exchanged among each other to simulate the feature present on browsers.

The tab shifts are implemented by maintaining a Node array that contains all the tab rectangle nodes, similarly another node array to contain all the texts of the tab headings. These node arrays are then navigated on mouse drags and placed in appropriate position at mouse release events. When mouse press occurs on the tabs then these tab X coordinates are stored. Hence if the drag is significantly low then the tabs are repositioned back to its original X value. Here we don’t have to worry about the Y coordinates since the tabs can be moved only across X axis.

One more feature that this tabbed pane includes is the background. The tabbed panes can have images as background therefore while constructing the tabbed panes in the Main class the background variable can be passed with the ImageView object which is displayed as background to the user over which the controls are placed therefore giving a better picturesque effect. If the background variable is not defined then by default the  content rectangle is filled with white color over which the controls are placed. The content[] array variable can be used to load various controls into the tabbed panes.

Press on the Launch button to launch the application using webstart.

For windows users pressing on the Launch button would start the Application in java web start.

However Linux users may face the problem of just jnlp the file being downloaded onto the system. However we can still get the application started by opening the terminal and setting the JDK home to 1.6 and then start the application by using

export JAVA_HOME=/usr/jdk1.6.0_18 and then set the PATH variable export export PATH=/usr/jdk1.6.0_18/bin:$PATH

After doing the above just execute:-   javaws Tabbedpanes.jnlp

Leave a comment

Filed under Javafx Code Demos

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s