TypeScript phosphor-dockpanel.DockPanel類代碼示例

  function createSidePanel(app: App): DockPanel {
    let panel = new DockPanel();

    let pianoRollWidget = new PianoRoll();
    let instrumentWidget = new InstrumentEditor();
    let oscWidget = new Oscilloscope();

    panel.insertRight(instrumentWidget);
    panel.insertRight(oscWidget, instrumentWidget);
    panel.insertBottom(pianoRollWidget);

    return panel;
  }

function main(): void {
  let term1 = new TerminalWidget({ background: 'black',
                                  color: 'white'});
  let term2 = new TerminalWidget({ background: 'white',
                                  color: 'black'});

  let dock = new DockPanel();
  dock.insertTabBefore(term1);
  dock.insertTabBefore(term2);

  dock.attach(document.body);
  dock.id = 'main';

  window.onresize = () => dock.fit();
}

function main(): void {
  let term1 = new TerminalWidget({ background: 'black',
                                  color: 'white'});
  let term2 = new TerminalWidget({ background: 'white',
                                  color: 'black'});

  createTerminalSession().then(session => {
    term1.session = session;
  });
  createTerminalSession().then(session => {
    term2.session = session;
  });

  term1.title.closable = true;
  term2.title.closable = true;
  let dock = new DockPanel();
  dock.insertTabBefore(term1);
  dock.insertTabBefore(term2);

  dock.attach(document.body);
  dock.id = 'main';

  window.onresize = () => dock.fit();
}

/**
 * The main application entry point.
 */
function main(): void {
  var r1 = createContent('Red');
  var r2 = createContent('Red');
  var r3 = createContent('Red');

  var b1 = createContent('Blue');
  var b2 = createContent('Blue');

  var g1 = createContent('Green');
  var g2 = createContent('Green');
  var g3 = createContent('Green');

  var y1 = createContent('Yellow');
  var y2 = createContent('Yellow');

  var panel = new DockPanel();
  panel.id = 'main';

  var cmSource = new CodeMirrorWidget({
    mode: 'text/typescript',
    lineNumbers: true,
    tabSize: 2,
  });
  cmSource.loadTarget('./index.ts');
  cmSource.title.text = 'Source';

  var cmCss = new CodeMirrorWidget({
    mode: 'text/css',
    lineNumbers: true,
    tabSize: 2,
  });
  cmCss.loadTarget('./index.css');
  cmCss.title.text = 'CSS';

  panel.insertLeft(cmSource);
  panel.insertRight(b1, cmSource);
  panel.insertBottom(y1, b1);
  panel.insertLeft(g1, y1);

  panel.insertBottom(b2);

  panel.insertTabAfter(cmCss, cmSource);
  panel.insertTabAfter(r1, cmCss);
  panel.insertTabBefore(g2, b2);
  panel.insertTabBefore(y2, g2);
  panel.insertTabBefore(g3, y2);
  panel.insertTabBefore(r2, b1);
  panel.insertTabBefore(r3, y1);

  panel.attach(document.body);

  window.onresize = () => { panel.update() };
}

let b2 = createContent('Blue');
b2.id = 'my-raw-coordinates-container';

let g1 = createContent('White');
g1.id = 'my-plot-container';

let g2 = createContent('Green');
let g3 = createContent('Green');

let y1 = createContent('Yellow');
y1.id = 'my-hero-form-container';

let y2 = createContent('Yellow');

let panel = new DockPanel();
panel.id = 'main';


panel.insertBottom(y1);
panel.insertLeft(g1, y1);
panel.insertBottom(b2);

panel.insertTabBefore(g2, b2);
panel.insertTabBefore(y2, g2);
panel.insertTabBefore(g3, y2);
panel.insertTabBefore(r3, y1);

panel.insertLeft(b1);
panel.insertBottom(r1, b1);
panel.insertTabBefore(r2, b1);

/**
 * The main application entry point.
 */
function main(): void {
  var panel = new DockPanel();
  panel.id = 'main';

  var g1 = createContent('Green');
  var cmSource = new CodeMirrorWidget({
    mode: 'text/typescript',
    lineNumbers: true,
    tabSize: 2,
    keyMap: "vim"
  });
  cmSource.loadTarget('./entry.ts');
  cmSource.title.text = 'Source';
  cmSource.title.closable = true;

  var threeWidget = new ThreePlaneTransformWidget({}, {}, 1);
  threeWidget.title.text = 'Three renderer';
  threeWidget.title.closable = true;

  var threeWidget2 = new ThreePlaneTransformWidget({}, {}, 2);
  threeWidget2.title.text = 'Three renderer';
  threeWidget2.title.closable = true;

  var guiWidget = new DatGuiWidget({autoPlace: false});
  var options = {state: true};
  guiWidget.gui.add(threeWidget.orbit, "enableRotate");
  guiWidget.title.text = 'UI options';
  guiWidget.title.closable = true;
  
  var localSchema = {
    "$schema": "http://json-schema.org/draft-04/schema#",
    "title": "root",
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "readonly": false
      },
      "number": {
        "type": "integer",
        "maximum": 100
      },
      "reapplied": {
        "type": "boolean"
      },
      "participants": {
        "type": "string",
        "readonly": true
      }
    },
    "required": ["number"]
  };

  var localdata = [{
      "name": "Joe",
      "reapplied": false,
      "number": 1,
      "participants": "US"
    }, {
      "name": "Bob",
      "number": 2,
      "reapplied": true,
      "participants": "CND"
    }, {
      "name": "McDunk",
      "number": 3,
      "reapplied": true,
      "participants": "LUX"
  }];

  var schemaGridWidget = new Widget();
  var jqgrid = document.createElement("div");
  var schemaGrid = document.createElement("TABLE");
  var pager = document.createElement("div");
  jqgrid.id = 'jqgrid';
  schemaGrid.id = 'grad';
  pager.id = 'pager';
  jqgrid.appendChild(schemaGrid);
  jqgrid.appendChild(pager);

  schemaGridWidget.node.appendChild(jqgrid);
  schemaGridWidget.title.text = 'grid';
  schemaGridWidget.title.closable = true;

  panel.insertLeft(cmSource);
  panel.insertRight(g1, cmSource);
  //panel.insertRight(guiWidget, cmSource);
  panel.insertTabAfter(guiWidget, cmSource);
  panel.insertTabBefore(threeWidget, cmSource);
  panel.insertTabAfter(threeWidget2, threeWidget);
  panel.insertTabAfter(schemaGridWidget, g1)

  panel.attach(document.body);
  $("#grad").schemaGrid(localSchema, localdata);

  window.onresize = () => { panel.update() };

//.........這裏部分代碼省略.........

window.onresize = () => { panel.update(); };