How to use the @lumino/widgets.BoxPanel function in @lumino/widgets

let e1 = new CodeMirrorEditor(store, 'e1');
  e1.title.label = 'First Document';
  let e2 = new CodeMirrorEditor(store, 'e2');
  e2.title.label = 'Second Document';
  let e3 = new CodeMirrorEditor(store, 'e3');
  e3.title.label = 'Third Document';

  // Add the text editors to a dock panel.
  let dock = new DockPanel({ spacing: 4 });
  dock.addWidget(e1);
  dock.addWidget(e2, { mode: 'split-right', ref: e1 });
  dock.addWidget(e3, { mode: 'split-bottom', ref: e2 });
  dock.id = 'dock';

  // Add the dock panel to the document.
  let box = new BoxPanel({ spacing: 2 });
  box.id = 'main';
  box.addWidget(dock);

  window.onresize = () => { box.update(); };
  Widget.attach(box, document.body);

  // Add commands for undo and redo.
  commands.addCommand('undo', {
    label: 'Undo',
    execute: () => {
      let editor = ArrayExt.findFirstValue([e1, e2, e3], (e: CodeMirrorEditor) => e.hasFocus());
      if (editor) {
        editor.undo();
      }
    }
  });

// Set the handler's editor.
  handler.editor = editor;

  // Hide the widget when it first loads.
  completer.hide();

  // Create a toolbar for the cell.
  const toolbar = new Toolbar();
  toolbar.addItem('spacer', Toolbar.createSpacerItem());
  toolbar.addItem('interrupt', Toolbar.createInterruptButton(session));
  toolbar.addItem('restart', Toolbar.createRestartButton(session));
  toolbar.addItem('name', Toolbar.createKernelNameItem(session));
  toolbar.addItem('status', Toolbar.createKernelStatusItem(session));

  // Lay out the widgets.
  const panel = new BoxPanel();
  panel.id = 'main';
  panel.direction = 'top-to-bottom';
  panel.spacing = 0;
  panel.addWidget(completer);
  panel.addWidget(toolbar);
  panel.addWidget(cellWidget);
  BoxPanel.setStretch(toolbar, 0);
  BoxPanel.setStretch(cellWidget, 1);

  // Attach the panel to the DOM.
  Widget.attach(panel, document.body);

  // Handle widget state.
  window.addEventListener('resize', () => {
    panel.update();
  });

constructor() {
    super();
    this.addClass(APPLICATION_SHELL_CLASS);
    this.id = 'main';

    let headerPanel = (this._headerPanel = new Panel());
    let topHandler = (this._topHandler = new Private.PanelHandler());
    let bottomPanel = (this._bottomPanel = new BoxPanel());
    let hboxPanel = new BoxPanel();
    let dockPanel = (this._dockPanel = new DockPanelSvg({
      kind: 'dockPanelBar'
    }));
    MessageLoop.installMessageHook(dockPanel, this._dockChildHook);

    let hsplitPanel = new SplitPanel();
    let leftHandler = (this._leftHandler = new Private.SideBarHandler());
    let rightHandler = (this._rightHandler = new Private.SideBarHandler());
    let rootLayout = new BoxLayout();

    headerPanel.id = 'jp-header-panel';
    topHandler.panel.id = 'jp-top-panel';
    bottomPanel.id = 'jp-bottom-panel';
    hboxPanel.id = 'jp-main-content-panel';
    dockPanel.id = 'jp-main-dock-panel';

constructor() {
    super();
    this.addClass(APPLICATION_SHELL_CLASS);
    this.id = 'main';

    let headerPanel = (this._headerPanel = new Panel());
    let topHandler = (this._topHandler = new Private.PanelHandler());
    let bottomPanel = (this._bottomPanel = new BoxPanel());
    let hboxPanel = new BoxPanel();
    let dockPanel = (this._dockPanel = new DockPanelSvg({
      kind: 'dockPanelBar'
    }));
    MessageLoop.installMessageHook(dockPanel, this._dockChildHook);

    let hsplitPanel = new SplitPanel();
    let leftHandler = (this._leftHandler = new Private.SideBarHandler());
    let rightHandler = (this._rightHandler = new Private.SideBarHandler());
    let rootLayout = new BoxLayout();

    headerPanel.id = 'jp-header-panel';
    topHandler.panel.id = 'jp-top-panel';
    bottomPanel.id = 'jp-bottom-panel';
    hboxPanel.id = 'jp-main-content-panel';
    dockPanel.id = 'jp-main-dock-panel';
    hsplitPanel.id = 'jp-main-split-panel';

return `Restore Layout ${args.index as number}`;
    },
    execute: args => {
      dock.restoreLayout(savedLayouts[args.index as number]);
    }
  });

  palette.addItem({
    command: 'save-dock-layout',
    category: 'Dock Layout',
    rank: 0
  });

  BoxPanel.setStretch(dock, 1);

  let main = new BoxPanel({ direction: 'left-to-right', spacing: 0 });
  main.id = 'main';
  main.addWidget(palette);
  main.addWidget(dock);

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

  Widget.attach(bar, document.body);
  Widget.attach(main, document.body);
}