jupyter-widgets · SylvainCorlay · Dec 9, 2015 · Dec 8, 2015 · Dec 8, 2015 · Dec 8, 2015
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,4 @@ __pycache__
 .xunit.xml
 
 index.built.js
+**/es5/
diff --git a/examples/development/node/package.json b/examples/development/node/package.json
@@ -9,7 +9,7 @@
   "author": "IPython",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "ipywidgets": "file:../../..",
+    "ipywidgets": "file:../../../ipywidgets",
     "jsdom": "^7.0.1",
     "navigator": "^1.0.1"
   }

diff --git a/examples/development/web/README.md b/examples/development/web/README.md
@@ -4,8 +4,9 @@ This directory is an example project that shows how you can embed the widgets in
 a context other than the notebook.
 
 ## Try it
-1. Open a command line in this directory and run `npm install`.  
-2. Now open the `index.html` file.  
+1. Open a command line in the `ipywidgets/ipywidgets` subdirectory and run `npm install`.
+2. Cd into this directory and run `npm install`.  
+3. Now open the `index.html` file.  
 
 ## Details
 If you plan to reproduce this in your own project, pay careful attention to the 

diff --git a/examples/development/web/package.json b/examples/development/web/package.json
@@ -11,7 +11,9 @@
   "license": "BSD-3-Clause",
   "dependencies": {
     "browserify": "^11.2.0",
-    "node-lessify": "^0.1.1",
-    "ipywidgets": "file:../../.."
+    "ipywidgets": "file:../../../ipywidgets"
+  },
+  "devDependencies": {
+    "bower": "^1.7.0"
   }
 }
diff --git a/examples/development/web2/README.md b/examples/development/web2/README.md
@@ -4,8 +4,9 @@ This directory is an example project that shows how you can embed the widgets in
 a context other than the notebook.
 
 ## Try it
-1. Open a command line in this directory and run `npm install`.  
-2. Now open the `index.html` file.  
+1. Open a command line in the `ipywidgets/ipywidgets` subdirectory and run `npm install`.
+2. Cd into this directory and run `npm install`.  
+3. Now open the `index.html` file.  
 
 ## Details
 If you plan to reproduce this in your own project, pay careful attention to the 

diff --git a/examples/development/web2/manager.js b/examples/development/web2/manager.js
@@ -1,5 +1,5 @@
-require('./node_modules/ipywidgets/ipywidgets/static/components/bootstrap/css/bootstrap.css')
-require('./node_modules/ipywidgets/node_modules/jquery-ui/themes/smoothness/jquery-ui.min.css')
+require('./node_modules/ipywidgets/static/components/bootstrap/css/bootstrap.css')
+require('./node_modules/jquery-ui/themes/smoothness/jquery-ui.min.css')
 
 var ipywidgets = require('ipywidgets');
 console.info('ipywidgets loaded successfully');

diff --git a/examples/development/web2/package.json b/examples/development/web2/package.json
@@ -13,6 +13,10 @@
     "browserify": "^11.2.0",
     "node-lessify": "^0.1.1",
     "codemirror": "^5.9.0",
-    "ipywidgets": "file:../../.."
+    "jquery-ui": "^1.10.5",
+    "ipywidgets": "file:../../../ipywidgets"
+  },
+  "devDependencies": {
+    "bower": "^1.7.0"
   }
 }
diff --git a/examples/development/web3/.jshintrc b/examples/development/web3/.jshintrc
@@ -0,0 +1,3 @@
+{
+    "esnext": true
+}
diff --git a/examples/development/web3/README.md b/examples/development/web3/README.md
@@ -0,0 +1,19 @@
+# Using ipywidgets in non-notebook, web context
+## Description
+This directory is an example project that shows how you can embed the widgets in
+a context other than the notebook.
+
+## Try it
+1. Launch a notebook server by running `python -m notebook --NotebookApp.allow_origin="*" --no-browser`
+2. Open a command line in the `ipywidgets/ipywidgets` subdirectory and run `npm install`.
+3. Cd into this directory and run `npm install`.  
+4. Now open the `index.html` file.  
+
+## Details
+If you plan to reproduce this in your own project, pay careful attention to the 
+package.json file.  The dependency to ipywidgets, which reads 
+`"ipywidgets": "file:../../.."`, **should not** point to `"file:../../.."`.  
+Instead point it to the version you want to use on npm.  
+
+(but really, you should let npm do this for you by running 
+`npm install --save ipywidgets`.)
diff --git a/examples/development/web3/index.html b/examples/development/web3/index.html
@@ -0,0 +1,43 @@
+<html>
+    <head>
+        <script src="index.built.js"></script>
+        <meta http-equiv="content-type" content="text/html; charset=UTF8">
+        <style>
+        body {
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 900px; 
+            background-color: #eee;
+        }       
+
+        .ipywidgets-example {
+            margin-top: 10px;
+            margin-bottom: 10px;
+            background-color: white;
+            overflow: auto;
+            box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+        }
+
+        .widgetarea, .inputarea {
+            margin: 5px;
+        }
+
+        .CodeMirror {
+            border: 1px solid #ccc;
+            height: auto;
+            background-color: #f7f7f7;
+            border-radius: 2px;
+        }
+
+        .CodeMirror-Scroll {
+            height: auto;
+        }
+        </style>
+    </head>
+    <body>
+        <div class="ipywidgets-example">
+            <div class="inputarea"></div>
+            <div class="widgetarea"></div>
+        </div>
+    </body>
+</html>
diff --git a/examples/development/web3/package.json b/examples/development/web3/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "ipywidgets-test",
+  "version": "1.0.0",
+  "description": "Project that tests the ability to npm install ipywidgets within an npm project.",
+  "main": "index.js",
+  "scripts": {
+    "prepublish": "npm run build",
+    "build": "npm run build:es5 && npm run build:bundle",
+    "build:es5": "babel src --out-dir es5 --presets es2015",
+    "build:bundle": "browserify -g node-lessify ./es5/index.js --outfile ./index.built.js --debug",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "IPython",
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "browserify": "^11.2.0",
+    "codemirror": "^5.9.0",
+    "ipywidgets": "file:../../../ipywidgets",
+    "jquery-ui": "^1.10.5",
+    "jupyter-js-services": "^0.2.2",
+    "node-lessify": "^0.1.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.3.15",
+    "babel-preset-es2015": "^6.3.13",
+    "bower": "^1.7.0"
+  }
+}
diff --git a/examples/development/web3/src/index.js b/examples/development/web3/src/index.js
@@ -0,0 +1,45 @@
+var CodeMirror = require("codemirror");
+require("../node_modules/codemirror/lib/codemirror.css");
+require("../node_modules/codemirror/mode/python/python");
+
+var WidgetManager = require("./manager").WidgetManager;
+
+var services = require('jupyter-js-services');
+var getKernelSpecs = services.getKernelSpecs;
+var startNewKernel = services.startNewKernel;
+
+var BASEURL = prompt('Notebook BASEURL', 'http://localhost:8888');
+var WSURL = 'ws:' + BASEURL.split(':').slice(1).join(':');
+
+document.addEventListener("DOMContentLoaded", function(event) {
+
+    // Connect to the notebook webserver.
+    getKernelSpecs(BASEURL).then(kernelSpecs => {
+        return startNewKernel({
+            baseUrl: BASEURL,
+            wsUrl: WSURL,
+            name: kernelSpecs.default,
+        });
+    }).then(kernel => {
+
+        // Create a codemirror instance
+        var code = require("../widget_code.json").join("\n");
+        var inputarea = document.getElementsByClassName("inputarea")[0];
+        var editor = CodeMirror(inputarea, {
+            value: code,
+            mode: "python",
+            tabSize: 4,
+            showCursorWhenSelecting: true,
+            viewportMargin: Infinity,
+            readOnly: true
+        });
+
+        // Create the widget area and widget manager
+        var widgetarea = document.getElementsByClassName("widgetarea")[0];
+        var manager = new WidgetManager(kernel, widgetarea);
+
+        // Run backend code to create the widgets.  You could also create the
+        // widgets in the frontend, like the other /web/ examples demonstrate.
+        kernel.execute({ code: code });
+    });
+});
diff --git a/examples/development/web3/src/manager.js b/examples/development/web3/src/manager.js
@@ -0,0 +1,37 @@
+require('../node_modules/ipywidgets/static/components/bootstrap/css/bootstrap.css');
+require('../node_modules/jquery-ui/themes/smoothness/jquery-ui.min.css');
+
+const ipywidgets = require('ipywidgets');
+
+export class WidgetManager extends ipywidgets.ManagerBase {
+    constructor(kernel, el) {
+        super();
+        this.kernel = kernel;
+        this.el = el;
+
+        // Create a comm manager shim
+        this.commManager = new ipywidgets.shims.services.CommManager(kernel);
+
+        // Register the comm target
+        this.commManager.register_target(this.comm_target_name, this.handle_comm_open.bind(this));
+    }
+
+    display_view(msg, view, options) {
+        var that = this;
+        return Promise.resolve(view).then(function(view) {
+            that.el.appendChild(view.el);
+            view.on('remove', function() {
+                console.log('view removed', view);
+            });
+            return view;
+        });
+    }
+
+    _create_comm(targetName, id, metadata) {
+        return this.commManager.new_comm(targetName, metadata, id);
+    }
+
+    _get_comm_info() {
+        return Promise.resolve({});
+    }
+}
diff --git a/examples/development/web3/widget_code.json b/examples/development/web3/widget_code.json
@@ -0,0 +1,11 @@
+[
+    "from ipywidgets import IntSlider, Text, VBox",
+    "from IPython.display import display",
+    "",
+    "s = IntSlider(max=200, value=100)",
+    "t = Text()",
+    "def update_text():",
+    "    t.value = str(s.value ** 2)",
+    "s.on_trait_change(update_text, 'value')",
+    "display(VBox([s, t]))"
+]
diff --git a/ipywidgets/index.js b/ipywidgets/index.js
@@ -34,3 +34,7 @@ var register = require("./static/widgets/js/register");
         exports[name] = module[name];
     });
 });
+
+exports.shims = {
+    services: require("./static/widgets/js/services-shim")
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,3 +23,4 @@ __pycache__
		.xunit.xml

		index.built.js
		**/es5/