Restore layout and rebuild content

[lomotelsch]

Hi Jeff,

I need to save and restore layouts. Therefore I need to restore every panel-content after restoring the layout since all panels got destroyed and recreated using wcDocker.restore(layout).

Maybe I misunderstand the concept of registering and adding panels, so let´s recap: (I basically used your tutorial at http://docker.api.webcabin.org/tutorial-1.0-getting-started.html)

wcDocker.registerPanelType is for telling wcDocker what kind of (useable) panels exist. Let´s call one panelType "Main-Panel" (which will have the limit-flag set to 1) and another one "Child-Panel" (which can be added in an unlimited amount):

myDocker.registerPanelType('Main-Panel', {});
myDocker.registerPanelType('Child-Panel', {});

wcDocker.addPanel is for creating single panel-instances using the panel-types we recently created:

var mainPanel = myDocker.addPanel('Main-Panel', wcDocker.DOCK.LEFT);
var childPanel1 = myDocker.addPanel('Child-Panel', wcDocker.DOCK.RIGHT);
var childPanel2 = myDocker.addPanel('Child-Panel', wcDocker.DOCK.RIGHT);
...

Subsequently I´ll add content to the panels:

mainPanel.layout().addItem($('<div>Main-Panel</div>'));
childPanel1.layout().addItem($('<div>Child-Panel 1</div>'));
childPanel2.layout().addItem($('<div>Child-Panel 2</div>'));
...

I know that for adding/creating panel-content I could use the panel´s onCreate-method while registering the panel, but I want different content for every Child-Panel, so this concept of creating panel-content bound to a panel-type is misleading to me:

myDocker.registerPanelType('Child-Panel', {
  onCreate: function(myPanel, options) {
    myPanel.layout().addItem($('<div>Child-Panel with always the same content</div>'));
  }
});

Restoring a previously saved layout leads me to the question on how to restore every´s panel´s content, since a dynamically created panel-instance does not have a pointer to it´s (also dynamically created) content, expect by creating content using the onCreate-method while registering a panel-type - which is to static for my (dynamic) needs.

Do you have a proposal on how to walk on?

Sebastian

[lomotelsch]

The thing is, when restoring the layout, I have no pointer to the content the panel contained before restoring expect the panel-type. If you have a look at the json which gets created by saving the layout, the only property i can bind to is the panel-type-property ("main-panel", "child-panel"), which is to static:

{
    "floating": [],
    "root": {
        "type": "wcSplitter",
        "horizontal": true,
        "isDrawer": false,
        "pane0": {
            "type": "wcSplitter",
            "horizontal": true,
            "isDrawer": false,
            "pane0": {
                "type": "wcFrame",
                "floating": false,
                "isFocus": false,
                "tabOrientation": "top",
                "pos": {
                    "x": 0.5,
                    "y": 0.5
                },
                "size": {},
                "tab": 0,
                "panels": [{
                    "type": "wcPanel",
                    "panelType": "main-panel",
                    "size": {
                        "x": -1,
                        "y": -1
                    },
                    "customData": {
                        "panelName": "user-list"
                    }
                }]
            },
            "pane1": {
                "type": "wcFrame",
                "floating": false,
                "isFocus": false,
                "tabOrientation": "top",
                "pos": {
                    "x": 0.5,
                    "y": 0.5
                },
                "size": {},
                "tab": 0,
                "panels": [{
                    "type": "wcPanel",
                    "panelType": "child-panel",
                    "size": {
                        "x": -1,
                        "y": -1
                    },
                    "customData": {
                        "panelName": "user-detail-1"
                    }
                }]
            },
            "pos": 0.1282051282051282
        },
        "pane1": {
            "type": "wcFrame",
            "floating": false,
            "isFocus": false,
            "tabOrientation": "top",
            "pos": {
                "x": 0.5,
                "y": 0.5
            },
            "size": {},
            "tab": 0,
            "panels": [{
                "type": "wcPanel",
                "panelType": "child-panel",
                "size": {
                    "x": -1,
                    "y": -1
                },
                "customData": {
                    "panelName": "user-detail-0"
                }
            }]
        },
        "pos": 0.5
    }
}

The customData-property is not obviously accessible when restoring. Any ideas?

[lomotelsch]

ok, got it ... trying now to wrap wcDocker with some content-restore-logic.. Thank you!

[Lochemage]

@lomotelsch

You can also subscribe to the save layout event, in which you can supply your own custom values to the data.

panel.on(wcDocker.SAVE_LAYOUT, function(myData) {
  myData.stuff = 'whatever';
});

Then later when the panel is restored, you can read that data:

panel.on(wcDocker.RESTORE_LAYOUT, function(myData) {
  console.log(myData.stuff); // should print 'whatever'
});