windowmanager.js
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 = 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; // 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 = '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 = ;...// Start windowmanager in this node instance:windowmanagerstart // 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.jsapp; // Set up access to windowmanager.js via get:app;app;
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 toexclude:/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>