JavaFX – Tabbed Pane & Tab Panel
Join the DZone community and get the full member experience.
Join For Freewith each release of javafx , more components and controls are becoming available for developers to use when building applications. however, what if you needed a component that wasn’t included in the current javafx release? well, you have a few options: you could wait, find, pay or build it yourself (or suck your thumb and rock back and forth in a fetal position underneath your desk). the current version of javafx 1.3.1 did not include a tabbed pane class, so i decided to create my own. my intent was to see how rapidly i could create a tabbed pane and tab panel that looked pretty decent.
disclaimer:
this implementation does not follow best
practices (api design). so use at your own risk. i encourage the reader
to take the code apart and to improve it as they see fit.
to launch the tab demo click button (java webstart app).
screen shots
source code
main.fx
below is the main application which assembles a tabbedpane to be displayed in a scene on the stage.
package tabdemo;
import javafx.stage.stage;
import javafx.scene.scene;
import javafx.scene.effect.dropshadow;
import javafx.scene.paint.color;
import javafx.scene.paint.stop;
import javafx.scene.shape.circle;
import javafx.scene.paint.radialgradient;
import javafx.scene.layout.vbox;
import javafx.scene.layout.hbox;
import javafx.scene.control.label;
import javafx.scene.control.textbox;
import javafx.animation.timeline;
import javafx.animation.interpolator;
import javafx.scene.shape.rectangle;
import javafx.stage.stagestyle;
import javafx.scene.input.mouseevent;
import javafx.scene.group;
import javafx.scene.text.text;
import javafx.scene.text.font;
import tabdemo.tabs.tabpane;
import tabdemo.tabs.tabpanel;
import javafx.scene.paint.lineargradient;
import javafx.scene.control.button;
/**
* @author cdea
*/
var stagewidth:float = 450;
var stageheight:float = 400;
var tabpane:tabpane = tabpane {
translatey: 20
};
var tab0:tabpanel = tabpanel {
index:0
title: "tab 0"
parenttabpane:tabpane
content:[circle {
centerx: 100, centery: 100
radius: 40
fill: radialgradient {
centerx: 5
centery: 5
focusx: 0.1
focusy: 0.1
radius: 10
stops: [
stop {
color : color.bisque
offset: 0.0
},
stop {
color : color.blue
offset: 1.0
},
] // stops
} // radial gradient
effect: dropshadow {
offsetx: 10
offsety: 10
color: color.black
radius: 10
} // effect
} // circle
] // content
}
var firstnamerow = hbox {
spacing:7
content: [label {
text: "first name:"
},
textbox {
selectonfocus: true
}
]
}
var lastnamerow = hbox {
spacing:7
content: [label {
text: "last name:"
},
textbox {
selectonfocus: true
}
]
}
var formview = vbox {
spacing:7
translatex:20
translatey:100
content: [firstnamerow,lastnamerow
]
}
// all widgets or controls to be laid out.
var tab1:tabpanel = tabpanel {
index:1
title: "tab 1"
parenttabpane:tabpane
content:[formview]
}
def spinrect = rectangle {
translatex: 100,
translatey: 160
width: 80, height: 80
fill: color.blue
}
var animatething = timeline {
repeatcount: 4
autoreverse:true
keyframes: [
at (1s) { spinrect.rotate => 100.0 tween interpolator.easeboth }
];
}
animatething.play();
var activatespin = button {
translatex: 30
translatey: 60
text: "click to spin"
action: function() {
animatething.playfromstart();
}
}
var tab2:tabpanel = tabpanel {
index:3
title: "tab 2"
parenttabpane:tabpane
content: [spinrect, activatespin]
}
tabpane.content = [tab0, tab1, tab2];
var currentx:number;
var currenty:number;
var closebutton:circle;
var titlegrabclose = group {
content : [
// the window background
rectangle {
x: 0, y: 0
archeight:15
arcwidth:15
width: stagewidth, height: stagewidth
fill: color.white
opacity: 0.85
},
// grabby area
rectangle {
x: 0, y: 0
archeight:15
arcwidth:15
width: stagewidth, height: 20
fill: lineargradient {
startx : 0.0
starty : 0.0
endx : 1.0
endy : 0.0
stops: [
stop {
color : color.lightblue
offset: 0.0
},
stop {
color : color.blue
offset: 1.0
},
]
}
opacity: 80
onmousepressed: function(e: mouseevent): void {
currentx = e.screenx - stage.x;
currenty = e.screeny - stage.y;
}
onmousedragged: function(e: mouseevent): void {
stage.x = e.screenx - currentx;
stage.y = e.screeny - currenty;
}
},
// window title text
text {
font : font {
size: 18
embolden:true
}
x: 10, y: 15
content: "tabs demo"
}
// mouse close area
closebutton = circle {
centerx: stagewidth - 10 , centery: 10
radius: 8
fill: color.white
onmousepressed: function(e: mouseevent): void {
javafx.lang.fx.exit();
}
},
// x marks the spot
text {
font : font {
size: 14
}
x: (2+ stagewidth - closebutton.radius * 2)
y: 15
content: "x"
}
] // content
} // titlegrabclose
var stage: stage;
stage = stage {
style: stagestyle.transparent
title: "slide tab demo"
width: stagewidth
height: stageheight
scene: scene {
width: stage.width
height: stage.height
content: [titlegrabclose, tabpane]
fill:null
};
resizable:false
opacity: 0.85
}
code walk through of main.fx
- lines 30-31 : initialize stage
- lines 33-35: create a tabbedpane really a javafx stack
- lines 37-69: create tab 0 which contains a circle
- lines 71-98: create a simple form with labels and controls
- lines 102-107: create tab 1 which contains the simple form
- lines 109-114: create a blue rectangle to be put in tab 2
- lines 116-122: create a animator to control blue rectangle
- line 123: start the animation
- lines 125-132: create a button to reanimate the blue rectangle when pressed
- lines 134-139: create tab 2 which will contain the button and blue rectangle
- line 141: put all tab panels into the tabbed pane object.
- lines 143-225: create a drag-able title area with a close button on the upper right.
- lines 227-241: display stage containing tabpane and drag-able title.
tabs.fx
below is the library that contains a tabpanel and tabbedpane classes.
package tabdemo;
import javafx.scene.customnode;
import javafx.scene.group;
import javafx.scene.node;
import javafx.scene.effect.dropshadow;
import javafx.scene.input.mouseevent;
import javafx.scene.layout.stack;
import javafx.scene.paint.color;
import javafx.scene.paint.lineargradient;
import javafx.scene.paint.stop;
import javafx.scene.shape.rectangle;
import javafx.scene.shape.shapesubtract;
import javafx.scene.text.font;
import javafx.scene.text.fontweight;
import javafx.scene.text.text;
import javafx.scene.text.textorigin;
/**
* @author cdea
*/
public class tabpanel extends customnode {
public-init var index:integer;
public-init var title:string;
public var parenttabpane:stack;
public var content:node[] = [];
// the clickable tab area
def tabrect = rectangle {
x: 10 + ((4 + 50) * index), y: 10
archeight:7
arcwidth:7
width: 50, height: 25
opacity:0
onmousepressed: function( e: mouseevent ):void {
var tabs:node[] = parenttabpane.content;
for (tab in tabs) {
var tabpanel:tabpanel = tab as tabpanel;
if (index == tabpanel.index) {
delete tab from parenttabpane.content;
insert tab into parenttabpane.content;
break;
} // found so make it the top of stack [add to end]
} // loop through all tab panels
}
onmouseentered: function(e: mouseevent): void {
println("entered {title}");
}
onmouseexited: function(e: mouseevent): void {
println("exited {title}");
}
}
// tab text
def tabtext = text {
content: title
textorigin: textorigin.top
font: font.font("verdana", fontweight.bold, 10);
x: 15 + ((4 + 50) * index)
y: 15
}
// merge or blend the bottom of tab with the main content region
def blendbottomoftab = rectangle {
x: 10 + ((4 + 50) * index), y: 10 + 20
width: 50, height: 25
}
// content area background area
def tabpanelcontentarea = rectangle {
x: 10, y: 10 + 25
archeight:15
arcwidth:15
width: 350, height: 300
}
def tabarea = shapesubtract {
a: [ tabrect,
blendbottomoftab,
tabpanelcontentarea
] // union tab and content area
fill: lineargradient {
startx: 0.0, starty: 0.0, endx: 1.0, endy: 1.0
proportional: true
stops: [
stop { offset: 0.0 color: color.white }
stop { offset: 1.0 color: color.gray }
]
} // fill
stroke: color.black
effect: dropshadow {offsetx: 2 offsety: 4}
}
public override function create(): node {
return group {
content: [tabarea, tabrect, content, tabtext]
}
}
}
public class tabpane extends stack {}
code walk through of tabs.fx
- line 22: create a custom node representing a single tab panel
- line 23: index is the position and order of a tab from left to right on a tabbed pane
- line 24: tabs title text
- line 25: the owning tabbed pane
- line 26: the contents that would be displayed on this tab panel
- lines 28-52: the tab’s rectangular click region surrounding the tab title text region
- lines 55-61: the text containing the title text to be overlaid on the click-able tab area
- lines 63-67: this is a simple rectangle to make the bottom of the click-able tab area connect smoothly to the main tab panel content region
- lines 70-75: this is the main tab panel content region
- lines 77-93: using the shapesubtract on attribute ‘a’ union the three rectangles (lines 28-75) to create a smooth looking tab panel
- lines 95-100: creating and assembling the tab panel
- line 102: class representing a tabbed pane
conclusion
with many types of application contexts having variations of tabbed panes (look-n-feel) and numerous features (functionality), one might be hard pressed to find the right one for their application. i find that it is very important in a gui toolkit to be able to quickly prototype a control or container component before investing heavily on designing an advanced component with a good api. javafx allows me to rapidly create a tabbedpane while adequately providing simple functionality.
any feedback is welcome.
references
- javafx: http://www.javafx.com
- how to use tabbed panes: http://download.oracle.com/docs/cd/e17409_01/javase/tutorial/uiswing/components/tabbedpane.html
- jtabbedpane api: http://download.oracle.com/docs/cd/e17409_01/javase/6/docs/api/javax/swing/jtabbedpane.html
- toumaille’s tabbedpane v.3: http://jfxstudio.wordpress.com/2010/01/25/say-well-it-come-tabbedpane-v-3/
from http://carlfx.wordpress.com/2010/07/21/javafx-tabbed-pane-tab-panel/
Opinions expressed by DZone contributors are their own.
Comments