windowmanager.js

NPM Status Build Status devDependencies Status
A framework to manage multiple dockable HTML windows.
This extension is designed to support multiple different different encapsulation runtimes.
See API Documentation for more information.

Runtimes supported:

Future runtimes:

Examples

You can see a live demo at Eikos Partners Blotter Demonstration.
An open source example can be found at: https://github.com/aesalazar/windowmanagerjsdemo
A basic example to get started:

// Create a new window:
let childWindow = new windowmanager.Window({
    url: "child.html", // Loads "child.html" based on the current window's url.
    width: 500,
    height: 500
});

// Execute code when window is ready for commands:
childWindow.onReady(() => {
    childWindow.focus(); // Set focus to childWindow.
});

// Use the layout manager.
let state = {
    width: 400, 
    height: 400,
    url: 'child.html',
    title: 'Child Window',
    frame: false 
};

let configs = [state, state, state];

let layout = new windowmanager.Layout('tabbed', 'layout-div', configs);

Installation - NPM package / express server

npm install --save windowmanager

Loading the package via require in node only gives you access to the script paths to make it easier to serve up the script:

const windowmanager = require('windowmanager');
...
// Start windowmanager in this node instance:
windowmanager.start({
    // Optionally override the windowmanager package.json options for Electron's runtime:
    endpoint: "http://localhost:5000/",      // The starting window's page location
    config: "http://localhost:5000/app.json" // Where the OpenFin/Electron app.json startup file is
});
...
// Set up to access windowmanager debug, minified and map scripts via root url:
// Will give access to windowmanager through: example.com/windowmanager.js
app.use('/', express.static(windowmanager.distPath, { index: false }));

// Set up access to windowmanager.js via get:
app.get('/js/windowmanager.js', function (req, res) {
    res.sendFile(windowmanager.debug.scriptPath);
});
app.get('/js/windowmanager.min.js', function (req, res) {
    res.sendFile(windowmanager.min.scriptPath);
});

Installation - dist script

Manually download either one of the following scripts from the dist folder (which contains the latest nightly version), and add it to your application.
NOTE: Bundling or compiling with babelify will break the script.

Example installation with dist script and webpack

  • Download dist script
  • Put in its own folder in root directory
  • in webpack config, under your module: rules: test: /\.js$/, make sure to exclude:/folderName/
  • npm install copy-webpack-plugin and
  • in webpack config, import const CopyWebpackPlugin = require('copy-webpack-plugin')
  • under plugins include
      new CopyWebpackPlugin([
    {from:'folderName',to:'folderName'} 
  ]),
  • in your entry point html page, include <script src="./folderName/windowmanager.js></script>