Binding troubleshooting

Question

Hi!
I've been struggling with a bit of binding code - I'm making tabs, and I'm trying to get the content to change when a different tab is selected. The tab headers change so far, but the tab content doesn't.
When a tab header is clicked on, the tab calls the tabpanel's tabActivator method and passes itself to the function.
Here's the TabPanel class, I'm trying to bind the tab content in the create function.
* tabPanel.fx
* Created on Sep 28, 2009, 4:07:02 PM
package tabs;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.layout.HBox;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
public class TabPanel extends CustomNode {
    var activeTab : Tab;
    var width = 0;
    var height = 200;
    var tabs:Tab[] = [];
    public function addTab(tab:Tab, active:Boolean, tabName:String):Void{
        tab.textForTab = Text {
                font : Font {
                    size:14
                x: 25, y: 25
                content: tabName
        insert tab into tabs;
        tab.setTabPanel(this);
        if(active){
            activeTab = tab;
            tab.activate();
       width = width + tab.getTabWidth();
     function getContent():Node{
        var content : Node;
        if(activeTab != null){
            content = activeTab.content;
        return content;
    /*called when the tab's header is clicked on*/
    public function tabActivator(tab : Tab):Void{
        activeTab.inactivate();
        tab.activate();
        activeTab = tab;
    public function getWidth ():Integer {
        return width+7;
    public function getPanelHeight ():Integer{
        return height-3
    public override function create(): Node {
        return Group {
            content: [
                HBox{
                    content: tabs
                Rectangle {
                        x: 0, y: bind Tab.getTabBorderHeight()
                        width: bind width + 7, height: height
                        fill: Color.BLACK
                Rectangle {
                         x: 1, y: bind Tab.getTabBorderHeight()+1
                        width: bind width + 7-2, height: height-2
                        fill: Color.WHITE
                 Group{
                     content: bind getContent() //trying to bind the tab content
                     translateX:3
                     translateY:bind Tab.getTabBorderHeight()+5
}in the Main class, I'm binding to the TabPanel create() method in the scene object, so that the changes propagate to the scene.
Any ideas about why the tab content isn't binding?

Answer 1

Remarks:
- You have syntax errors, perhaps because you moved getTabBorderHeight out of Tab. Fixed that.
- I think you use binding too much. This is an expensive operation, useful, but to use with care, as it can kill program's performance.
It is needed, eg. when a change must be reflected on display; but can be avoided when an event changes a value: you can often enforce the dependency in the event function itself.
- You shouldn't call create() method of a CustomNode yourself, it is automatically called at node's instantiation.
I tweaked your code until I got it working... Note: I removed some 'public' declarations to conveniently have everything in the same file, you must not remove them of course.
Here is the working code:
var tabHeight = 30;
var tabBorderHeight = bind tabHeight+3;
var tab1 = Tab{
    content:Text {
        font : Font {
            size: 24
        x: 10, y: 30
        content: "Tab 1"
var tab2 = Tab{
    content:Text {
        font : Font {
            size: 24
        x: 10, y: 30
        content: "Tab 2"
var tabPanel = TabPanel{};
println("== Adding tab1");
tabPanel.addTab(tab1, false, 'First');
println("== Adding tab2");
tabPanel.addTab(tab2, true, 'Second');
println("== Done");
tabPanel.tabActivator(tab1);
Stage {
    title: "Application title"
    width: 250
    height: 300
    scene: Scene {
        content: tabPanel
class Tab extends CustomNode {
    var tabWidth = 100;
    var returnedTabWidth:Integer;
    var normalTabWidth = tabWidth;
    var bigTabWidth = tabWidth+20;
    var tabBorderWidth = bind tabWidth+3;
    var active = false;
    var tabPanel: TabPanel;
    var gradInactive = LinearGradient {
        startX : 0.0
        startY : 0.0
        endX : 0.0
        endY : 1.0
        stops: [
            Stop {
                color : Color.web("0xE9E9E9")
                offset: 0.0
            Stop {
                color : Color.web("0xB3B3B3")
                offset: 0.6
    var gradHover =LinearGradient {
        startX : 0.0
        startY : 0.0
        endX : 0.0
        endY : 1.0
        stops: [
            Stop {
                color : Color.web("0x66CCFF")
                offset: 0.0
            Stop {
                color : Color.web("0x55ABD8")
                offset: 0.6
    var gradSelect =LinearGradient {
        startX : 0.0
        startY : 0.0
        endX : 0.0
        endY : 1.0
        stops: [
            Stop {
                color : Color.web("0xF6F6F6")
                offset: 0.0
            Stop {
                color : Color.web("0xE6E6E6")
                offset: 0.6
    public var textForTab : Text;
    var tabBorder = Rectangle {
        x: 0, y: 0
        height: bind tabBorderHeight, width: bind tabBorderWidth
        fill: Color.web("0x585858")
        arcHeight: 10
        arcWidth: 10
    var tab : Rectangle = Rectangle {
        x: 1, y: 1
        height:bind tabBorderHeight, width:bind tabBorderWidth
        fill: gradInactive
        arcHeight: 10
        arcWidth: 10
        onMouseEntered:function(event:MouseEvent):Void{
            if(not active){
                tab.fill = gradHover;
        onMouseExited:function(event:MouseEvent):Void{
            if(tab.fill == gradHover){
                tab.fill = gradInactive
        onMouseClicked:function(event:MouseEvent):Void{
//~             println('tab active is {active}');
//~             println('tab width is now {tabWidth}');
//~             println('tab height is now {tabHeight}');
            if(not  active){
                tabPanel.tabActivator(this);
//~             println('tab active is now {active}');
//~             println('tab width is now {tabWidth}');
//~             println('tab height is now {tabHeight}');
    public-init var content : Node;
    postinit {
//        makeTabGoDown();
//~         println('tab border y is = {tabBorder.y}');
//~         println('tab y is {tab.y}');
    public function makeTabBig():Void{
        tabWidth = bigTabWidth;
//        tabHeight = tabHeight + 10;
    public function makeTabSmall ():Void{
        tabWidth = normalTabWidth;
//        tabHeight = tabHeight - 10;
    public override function create(): Node {
        return Group {
            content: bind [tabBorder, tab, textForTab]
    public function inactivate() : Void {
        active = false;
        tab.fill = gradInactive;
        makeTabSmall();
        println('inactivated');
//        makeTabGoDown();
    public function activate() : Void{
        active = true;
        tab.fill = gradSelect;
        makeTabBig();
        println('activated');
//        makeTabGoUp();
    public function setTabPanel(tabPanel : TabPanel):Void{
        this.tabPanel = tabPanel;
class TabPanel extends CustomNode {
    var activeTab : Tab;
    var width = 0;
    var height = 200;
    var tabs:Tab[] = [];
    var displayedContent: Group;
    public function addTab(tab:Tab, active:Boolean, tabName:String):Void{
        tab.textForTab = Text {
            font : Font {
                size:14
            x: 25, y: 25
            content: tabName
        insert tab into tabs;
        tab.setTabPanel(this);
        if(active){
            activeTab = tab;
            tab.activate();
        println("Adding tab {tabName} of width {tab.tabBorderWidth}");
        width = width + tab.tabBorderWidth;
    /*called when the tab's header is clicked on*/
    public function tabActivator(tab : Tab):Void{
        activeTab.inactivate();
        tab.activate();
        activeTab = tab;
        displayedContent.content = activeTab.content;
        println("Activated tab {activeTab.textForTab.content}");
    public function getWidth ():Integer {
        return width+7;
    public function getPanelHeight ():Integer{
        return height-3
    public override function create(): Node {
        return Group {
            content: [
                HBox{
                    content: bind tabs
                Rectangle {
                    x: 0, y: bind tabBorderHeight
                    width: bind width + 7, height: height
                    fill: Color.BLACK
                Rectangle {
                    x: 1, y: bind tabBorderHeight+1
                    width: bind width + 7-2, height: height-2
                    fill: Color.WHITE
                displayedContent = Group {
                    translateX:3
                    translateY:bind tabBorderHeight+5
}