Panes

Panes are the elements that house tabs. The main UI of Cloud9 starts with a single pane and users can divide the UI into multiple panes in arbitrary configurations. There is always at least one pane. Panes and tabs are controlled by the tabManager plugin, which offers an API to control the tabs and panes in Cloud9.

Object structure

Besides tabs and panes there are several other objects involved in displaying content and making it editable. The following hierarchy describes the relationships between those objects.

• Pane - Represent a single pane, housing multiple tabs
  • Editor - The editor responsible for displaying the document in the tab
  • Tab - A single tab (button) in a pane
    • Document - The representation of a file in the tab
      • Session - The session information of the editor
      • UndoManager - The object that manages the undo stack for this document

It is important to note that the Editor plugin(s) are related to the pane, not the tab. There's only one instance of a certain editor for each pane. The editor is responsible for displaying the content of a document based on the tab that is active. There can be a maximum of one tab active per pane.

Retrieving Panes

The tabManager plugin is responsible for all the Tab and Pane objects in Cloud9. Fetch a list of all the panes like this.

JavaScript

var panes = tabManager.getPanes();

You can also find a specific pane by it's given name.

JavaScript

var name = pane.name; // For easily storing a reference to the pane across sessions

var pane = tabManager.findPane(name);

Splitting Panes

The most common way to create a new Pane instance is by splitting a current pane, either horizontally or vertically.

Split a pane horizontally.

JavaScript

var pane = tabManager.getPanes()[0];

// Split horizontally and create new pane on the left
var newPane = pane.hsplit();

// Split horizontally and create new pane on the right
var newPane = pane.hsplit(true);

Split a pane vertically.

JavaScript

var pane = tabManager.getPanes()[0];

// Split vertically and create new pane on the top
var newPane = pane.vsplit();

// Split vertically and create new pane on the bottom
var newPane = pane.vsplit(true);

Tabs and Panes

To move a Tab instance to a specific pane, use the attachTo method.

JavaScript

tab.attachTo(pane);

You can also move a tab around the panes using moveTabToSplit. This function will create new intermediate panes in between steps.

JavaScript

pane.moveTabToSplit(tab, "left"); // or "right", "up", "down"

Retrieve all the tab objects in a pane like this.

JavaScript

var tabs = pane.getTabs();

To get all the active tabs in Cloud9 look over all the panes and get their active tab.

JavaScript

var activeTabs = [];
tabManager.getPanes().forEach(function(pane){
    if (pane.activeTab)
        activeTabs.push(pane.activeTab);
});