Merge pull request #1131 from nasa/open1094

Resolve synchronization issues with MutableObject

API.md

@@ -0,0 +1,114 @@
+# Open MCT API
+
+The Open MCT framework public api can be utilized by building the application (`gulp install`) and then copying the file from `dist/main.js` to your directory
+of choice.
+
+Open MCT supports AMD, CommonJS, and standard browser loading; it's easy to use
+in your project.
+
+## Overview
+
+Open MCT's goal is to allow you to browse, create, edit, and visualize all of the domain knowledge you need on a daily basis.  
+
+To do this, the main building block provided by Open MCT is the domain object-- the temperature sensor on the starboard solar panel, an overlay plot comparing the results of all temperature sensor, the command dictionary for a spacecraft, the individual commands in that dictionary, your "my documents" folder: all of these things are domain objects. 
+
+Domain objects have Types-- so a specific instrument temperature sensor is a "Telemetry Point," and turning on a drill for a certain duration of time is an "Activity".  Types allow you to form an ontology of knowledge and provide an abstraction for grouping, visualizing, and interpreting data.
+
+And then we have Views.  Views allow you to visualize a domain object.  Views can apply to specific domain objects; they may also apply to certain types of domain objects, or they may apply to everything.  Views are simply a method of visualizing domain objects.
+
+Regions allow you to specify what views are displayed for specific types of domain objects in response to different user actions-- for instance, you may want to display a different view while editing, or you may want to update the toolbar display when objects are selected.  Regions allow you to map views to specific user actions.
+
+Domain objects can be mutated and persisted, developers can create custom actions and apply them to domain objects, and many more things can be done.  For more information, read on.
+
+## The API
+
+### `MCT.Type(options)`
+Status: First Draft
+
+Returns a `typeInstance`.  `options` is an object supporting the following properties:
+
+* `metadata`: `object` defining metadata used in displaying the object; has the following properties:
+  * `label`: `string`, the human-readible name of the type.  used in menus and inspector.
+  * `glyph`: `string`, the name of the icon to display for this type, used in labels.
+  * `description`: `string`, a human readible description of the object and what it is for.
+* `initialize`: `function` which initializes new instances of this type.  it is called with an object, should add any default properties to that object.
+* `creatable`: `boolean`, if true, this object will be visible in the create menu.
+* `form`: `Array` an array of form fields, as defined... somewhere!  Generates a property sheet that is visible while editing this object.
+
+### `MCT.type(typeKey, typeInstance)`
+Status: First Draft
+
+Register a `typeInstance` with a given Type `key` (a `string`).  There can only be one `typeInstance` registered per type `key`.  typeInstances must be registered before they can be utilized.
+
+### `MCT.Objects`
+Status: First Draft
+
+Allows you to register object providers, which allows you to integrate domain objects from various different sources.  Also implements methods for mutation and persistence of objects.  See [Object API](src/api/objects/README.md) for more details.
+
+### `MCT.Composition`
+Status: First Draft
+
+Objects can contain other objects, and the Composition API allows you to fetch the composition of any given domain object, or implement custom methods for defining composition as necessary.  
+
+### `MCT.view(region, definition)`
+Status: First Draft
+
+Register a view factory for a specific region.  View factories receive an instance of a domain object and return a `View` for that object, or return undefined if they do not know how to generate a view for that object.
+
+* `ViewDefinition`: an object with the following properties:
+    * `canView(domainObject)`: should return truthy if the view is valid for a given domain object, falsy if it is not capable of generating a view for that object.
+    * `view(domainObject)`: should instantate and return a `View` for the given object.
+    * `metadata()`: a function that returns metadata about this view.  Optional.
+* `View`: an object containing a number of lifecycle methods:
+    * `view.show(container)`:  instantiate a view (a set of dom elements) and attach it to the container.
+    * `view.destroy(container)`:  remove any listeners and expect your dom elements to be destroyed.
+    
+For a basic introduction to views & types, check out these tutorials: 
+
+* [custom-view](custom-view.html) -- Implementing a custom view with vanilla javascript.
+* [custom-view-react](custom-view-react.html) -- Implementing a custom view with React.
+
+### `MCT.conductor`
+Status: First Draft
+
+The time conductor is an API that facilitates time synchronization across multiple components.  Components that would like to be "time aware" may attach listeners to the time conductor API to allow them to remain synchronized with other components.  For more information ont he time conductor API, please look at the API draft here: https://github.com/nasa/openmct/blob/66220b89ca568075f107505ba414de9457dc0427/platform/features/conductor-redux/src/README.md
+
+### `MCT.selection`
+Status: First Draft
+
+Tracks the application's selection state (which elements of a view has a user selected?)
+
+One or more JavaScript objects may be selected at any given time. User code is responsible for any necessary type-checking.
+
+The following methods are exposed from this object:
+
+* `select(value)`: Add `value` to the current selection.
+* `deselect(value)`: Remove `value` from the current selection.
+* `selected()`: Get array of all selected objects.
+* `clear()`: Deselect all selected objects.
+
+MCT.selection is an EventEmitter; a `change` event is emitted whenever the selection changes.
+
+### `MCT.systems`
+Status: Not Implemented, Needs to be ported from old system.
+
+A registry for different time system definitions.  Based upon the previous time format system which utilized the "formats" extension category.  
+
+### `MCT.run([container])`
+Status: Stable Draft
+
+Run the MCT application, loading the application into the `container`, a DOM element.  If a container is not specified, the application is injected into the body of the page.
+
+### `MCT.install(plugin)`
+Status: Stable Draft
+
+Install a plugin in MCT.  Must be called before calling `run`.  Plugins are functions which are invoked with the `MCT` instance as their first argument, and are expected to use the MCT public API to add functionality.
+
+For an example of writing a plugin, check out [plugin-example.html](plugin-example.html)
+
+### `MCT.setAssetPath(path)`
+
+Sets the path (absolute or relative) at which the Open MCT static files are being hosted.  The default value is '.'.  
+
+Note that this API is transitional and will be removed in a future version.
+

bower.json

@@ -20,6 +20,7 @@
     "FileSaver.js": "^0.0.2",
     "zepto": "^1.1.6",
     "eventemitter3": "^1.2.0",
-    "lodash": "3.10.1"
+    "lodash": "3.10.1",
+    "almond": "~0.3.2"
   }
 }

composition-test.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>Implementing a composition provider</title>
+  <script src="dist/main.js"></script>
+</head>
+<body>
+<script>
+
+    var widgetParts = ['foo', 'bar', 'baz', 'bing', 'frobnak']
+
+    function fabricateName() {
+        return [
+            widgetParts[Math.floor(Math.random() * widgetParts.length)],
+            widgetParts[Math.floor(Math.random() * widgetParts.length)],
+            Math.floor(Math.random() * 1000)
+        ].join('_');
+    }
+
+    MCT.type('example.widget-factory', new MCT.Type({
+        metadata: {
+            label: "Widget Factory",
+            glyph: "s",
+            description: "A factory for making widgets"
+        },
+        initialize: function (object) {
+            object.widgetCount = 5;
+            object.composition = [];
+        },
+        creatable: true,
+        form: [
+            {
+                name: "Widget Count",
+                control: "textfield",
+                key: "widgetCount",
+                property: "widgetCount",
+                required: true
+            }
+        ]
+    }));
+
+    MCT.Composition.addProvider({
+        appliesTo: function (domainObject) {
+            return domainObject.type === 'example.widget-factory';
+        },
+        load: function (domainObject) {
+            var widgets = [];
+            while (widgets.length < domainObject.widgetCount) {
+                widgets.push({
+                    name: fabricateName(),
+                    key: {
+                        namespace: 'widget-factory',
+                        identifier: '' + widgets.length
+                    }
+                });
+            }
+            return Promise.resolve(widgets);
+        }
+    });
+
+    MCT.run();
+</script>
+</body>
+</html>

custom-view-react.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>Implementing a Custom Type and View </title>
+  <script src="dist/main.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+</head>
+<body>
+<script type="text/babel">
+
+    // First, we're going to create the Todo List type, so that users can create
+    // todo lists.
+
+    MCT.type('example.todo', new MCT.Type({
+        metadata: {
+            label: "To-Do List",
+            glyph: "2",
+            description: "A list of things that need to be done."
+        },
+        initialize: function (object) {
+            object.tasks = [
+                { description: "This is a task." }
+            ];
+        },
+        creatable: true
+    }));
+
+    /*
+    Refresh the page, and you should be able to create new Todo Lists.
+    unfortunately, when you navigate to a Todo list, you see a blank page. let's
+    fix that by adding a main view for that todo list.
+
+    If you're wondering why this is commented out, well, it's because we'll
+    write a new version later.
+    */
+
+    var Task = React.createClass({
+      render: function() {
+        return (
+            <li>
+                <input type="checkbox"
+                       checked={this.props.checked}/>
+                <span>{this.props.description}</span>
+            </li>
+        );
+      }
+    });
+
+    var TaskList = React.createClass({
+        render: function () {
+            var taskNodes = this.props.tasks.map(function(task) {
+                return (
+                    <Task checked={task.checked}
+                          description={task.description}/>
+                );
+            });
+            return (
+              <ul>
+                {taskNodes}
+              </ul>
+            );
+        }
+    });
+
+    MCT.view(MCT.regions.main, {
+        canView: function (domainObject) {
+            return domainObject.type === 'example.todo';
+        },
+        view: function (domainObject) {
+            var mutableObject = MCT.Objects.getMutable(domainObject);
+
+            return {
+                show: function (container) {
+                    ReactDOM.render(
+                        <TaskList tasks={domainObject.tasks}/>,
+                        container
+                    );
+                    mutableObject.on('tasks', function (tasks) {
+                        ReactDOM.render(
+                            <TaskList tasks={tasks}/>,
+                            container
+                        );
+                    });
+                }
+            };
+        }
+    });
+
+    /*
+     Refresh the page and you should see a todo list with checkboxes!  Now let's
+     Allow you to add tasks by mutating the object.  We'll add a toolbar view to
+     do this.
+    */
+
+    var TaskToolbar = React.createClass({
+        render: function () {
+            return (
+                <button onClick={this.props.addTask}>Add Task</button>
+            );
+        }
+    });
+
+    MCT.view(MCT.regions.toolbar, {
+        canView: function (domainObject) {
+            return domainObject.type === 'example.todo';
+        },
+        view: function (domainObject) {
+            var mutableObject = MCT.Objects.getMutable(domainObject);
+
+            function addTask(event) {
+                var description = prompt('Task description');
+                var tasks = mutableObject.get('tasks');
+                tasks.push({
+                    description: description,
+                    complete: false
+                });
+                mutableObject.set('tasks', tasks);
+            }
+
+            return {
+                show: function (container) {
+                    ReactDOM.render(
+                        <TaskToolbar addTask={addTask}/>,
+                        container
+                    );
+                },
+            }
+        }
+    });
+
+    /*
+     Refresh the page, edit the todo list, and you'll have a button that allows
+     you to add tasks!  Unfortunately, new tasks don't show in the list.  Why?
+     Well, if your view should update on mutation, you need to set up the correct
+     listeners.  Let's update the TodoView we made earlier:
+    */
+
+    MCT.run();
+</script>
+</body>
+</html>

custom-view.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>Implementing a Custom Type and View </title>
+  <script src="dist/main.js"></script>
+</head>
+<body>
+<script>
+
+    // First, we're going to create the Todo List type, so that users can create
+    // todo lists.
+
+    MCT.type('example.todo', new MCT.Type({
+        metadata: {
+            label: "To-Do List",
+            glyph: "2",
+            description: "A list of things that need to be done."
+        },
+        initialize: function (object) {
+            object.tasks = [
+                { description: "This is a task." }
+            ];
+        },
+        creatable: true
+    }));
+
+    /*
+    Refresh the page, and you should be able to create new Todo Lists.
+    unfortunately, when you navigate to a Todo list, you see a blank page. let's
+    fix that by adding a main view for that todo list.
+
+    If you're wondering why this is commented out, well, it's because we'll
+    write a new version later.
+    */
+
+    // MCT.view(MCT.regions.main, {
+    //     canView: function (domainObject) {
+    //         return domainObject.type === 'example.todo';
+    //     },
+    //     view: function (domainObject) {
+    //         function renderTask(task) {
+    //             return [
+    //                 '<li>',
+    //                 '<input type="checkbox"' + (task.complete ? ' checked="true"' : '') + '>',
+    //                 '<span>' + task.description + '</span>',
+    //                 '</li>'
+    //             ].join('');
+    //         };
+    //
+    //         function renderTaskList() {
+    //             return [
+    //                 '<ul>',
+    //                 domainObject.tasks.map(renderTask).join(''),
+    //                 '</ul>'
+    //             ].join('');
+    //         };
+    //
+    //         return {
+    //             show: function (container) {
+    //                 container.innerHTML = renderTaskList();
+    //             }
+    //         };
+    //     }
+    // });
+
+    /*
+     Refresh the page and you should see a todo list with checkboxes!  Now let's
+     Allow you to add tasks by mutating the object.  We'll add a toolbar view to
+     do this.
+    */
+
+    MCT.view(MCT.regions.toolbar, {
+        canView: function (domainObject) {
+            return domainObject.type === 'example.todo';
+        },
+        view: function (domainObject) {
+            var mutableObject = MCT.Objects.getMutable(domainObject);
+
+            function addTask(event) {
+                var description = prompt('Task description');
+                var tasks = mutableObject.get('tasks');
+                tasks.push({
+                    description: description,
+                    complete: false
+                });
+                mutableObject.set('tasks', tasks);
+            }
+
+            return {
+                show: function (container) {
+                    container.addEventListener('click', addTask);
+                    container.innerHTML = '<button>Add Task</button>';
+                },
+                destroy: function (container) {
+                    container.removeEventListener('click', addTask);
+                }
+            }
+        }
+    });
+
+    /*
+     Refresh the page, edit the todo list, and you'll have a button that allows
+     you to add tasks!  Unfortunately, new tasks don't show in the list.  Why?
+     Well, if your view should update on mutation, you need to set up the correct
+     listeners.  Let's update the TodoView we made earlier:
+    */
+
+    MCT.view(MCT.regions.main, {
+        canView: function(domainObject) {
+            return domainObject.type === 'example.todo'
+        },
+        view: function (domainObject) {
+
+            var mutableObject = MCT.Objects.getMutable(domainObject);
+
+            function renderTask(task) {
+                return [
+                    '<li>',
+                    '<input type="checkbox"' + (task.complete ? ' checked="true"' : '') + '>',
+                    '<span>' + task.description + '</span>',
+                    '</li>'
+                ].join('');
+            }
+
+            function renderTaskList(tasks) {
+                return [
+                    '<ul>',
+                    tasks.map(renderTask).join(''),
+                    '</ul>'
+                ].join('');
+            }
+
+            function onCheckboxChange(event) {
+                var checkbox = event.target;
+                var taskEl = checkbox.parentNode;
+                var taskList = taskEl.parentNode;
+                var taskIndex = [].slice.apply(taskList.children).indexOf(taskEl);
+                mutableObject.set('tasks[' + taskIndex + '].complete', checkbox.checked);
+            }
+
+            return {
+                show: function (container) {
+                    container.innerHTML = renderTaskList(domainObject.tasks);
+                    mutableObject.on('tasks', function (tasks) {
+                        container.innerHTML = renderTaskList(tasks);
+                    });
+                    container.addEventListener('change', onCheckboxChange);
+                },
+                destroy: function () {
+                    mutableObject.stopListening();
+                }
+            };
+        }
+    });
+
+    MCT.run();
+</script>
+</body>
+</html>

example/msl/bundle.js

@@ -36,7 +36,7 @@ define([
     legacyRegistry
 ) {
     "use strict";
-    legacyRegistry.register("example/notifications", {
+    legacyRegistry.register("example/msl-adapter", {
         "name" : "Mars Science Laboratory Data Adapter",
         "extensions" : {
         "types": [

gulpfile.js

@@ -21,40 +21,33 @@
  *****************************************************************************/
 
 /*global require,__dirname*/
+
 var gulp = require('gulp'),
-    requirejsOptimize = require('gulp-requirejs-optimize'),
     sourcemaps = require('gulp-sourcemaps'),
-    rename = require('gulp-rename'),
-    sass = require('gulp-sass'),
-    bourbon = require('node-bourbon'),
-    jshint = require('gulp-jshint'),
-    jscs = require('gulp-jscs'),
-    replace = require('gulp-replace-task'),
-    karma = require('karma'),
     path = require('path'),
     fs = require('fs'),
     git = require('git-rev-sync'),
     moment = require('moment'),
-    merge = require('merge-stream'),
     project = require('./package.json'),
     _ = require('lodash'),
     paths = {
         main: 'main.js',
         dist: 'dist',
-        assets: 'dist/assets',
         scss: ['./platform/**/*.scss', './example/**/*.scss'],
+        assets: [
+            './{example,platform}/**/*.{css,css.map,png,svg,ico,woff,eot,ttf}'
+        ],
         scripts: [ 'main.js', 'platform/**/*.js', 'src/**/*.js' ],
         specs: [ 'platform/**/*Spec.js', 'src/**/*Spec.js' ],
-        static: [
-            'index.html',
-            'platform/**/*',
-            'example/**/*',
-            'bower_components/**/*'
-        ]
     },
     options = {
         requirejsOptimize: {
-            name: paths.main.replace(/\.js$/, ''),
+            name: 'bower_components/almond/almond.js',
+            include: paths.main.replace('.js', ''),
+            wrap: {
+                startFile: "src/start.frag",
+                endFile: "src/end.frag"
+            },
             mainConfigFile: paths.main,
             wrapShim: true
         },
@@ -63,7 +56,6 @@ var gulp = require('gulp'),
             singleRun: true
         },
         sass: {
-            includePaths: bourbon.includePaths,
             sourceComments: true
         },
         replace: {
@@ -77,6 +69,8 @@ var gulp = require('gulp'),
     };
 
 gulp.task('scripts', function () {
+    var requirejsOptimize = require('gulp-requirejs-optimize');
+    var replace = require('gulp-replace-task');
     return gulp.src(paths.main)
         .pipe(sourcemaps.init())
         .pipe(requirejsOptimize(options.requirejsOptimize))
@@ -86,10 +80,16 @@ gulp.task('scripts', function () {
 });
 
 gulp.task('test', function (done) {
+    var karma = require('karma');
     new karma.Server(options.karma, done).start();
 });
 
 gulp.task('stylesheets', function () {
+    var sass = require('gulp-sass');
+    var rename = require('gulp-rename');
+    var bourbon = require('node-bourbon');
+    options.sass.includePaths = bourbon.includePaths;
+
     return gulp.src(paths.scss, {base: '.'})
         .pipe(sourcemaps.init())
         .pipe(sass(options.sass).on('error', sass.logError))
@@ -103,6 +103,9 @@ gulp.task('stylesheets', function () {
 });
 
 gulp.task('lint', function () {
+    var jshint = require('gulp-jshint');
+    var merge = require('merge-stream');
+
     var nonspecs = paths.specs.map(function (glob) {
             return "!" + glob;
         }),
@@ -117,6 +120,8 @@ gulp.task('lint', function () {
 });
 
 gulp.task('checkstyle', function () {
+    var jscs = require('gulp-jscs');
+
     return gulp.src(paths.scripts)
         .pipe(jscs())
         .pipe(jscs.reporter())
@@ -124,18 +129,20 @@ gulp.task('checkstyle', function () {
 });
 
 gulp.task('fixstyle', function () {
+    var jscs = require('gulp-jscs');
+
     return gulp.src(paths.scripts, { base: '.' })
         .pipe(jscs({ fix: true }))
         .pipe(gulp.dest('.'));
 });
 
-gulp.task('static', ['stylesheets'], function () {
-    return gulp.src(paths.static, { base: '.' })
+gulp.task('assets', ['stylesheets'], function () {
+    return gulp.src(paths.assets)
         .pipe(gulp.dest(paths.dist));
 });
 
 gulp.task('watch', function () {
-    gulp.watch(paths.scss, ['stylesheets']);
+    return gulp.watch(paths.scss, ['stylesheets', 'assets']);
 });
 
 gulp.task('serve', function () {
@@ -143,9 +150,9 @@ gulp.task('serve', function () {
     var app = require('./app.js');
 });
 
-gulp.task('develop', ['serve', 'stylesheets', 'watch']);
+gulp.task('develop', ['serve', 'install', 'watch']);
 
-gulp.task('install', [ 'static', 'scripts' ]);
+gulp.task('install', [ 'assets', 'scripts' ]);
 
 gulp.task('verify', [ 'lint', 'test', 'checkstyle' ]);
 

index.html

@@ -31,21 +31,18 @@
     <script type="text/javascript">
         require(['main'], function (mct) {
             require([
-                './tutorials/grootprovider/groots',
                 './tutorials/todo/todo',
                 './example/imagery/bundle',
                 './example/eventGenerator/bundle',
-                './example/generator/bundle',
-            ], function (grootify, todoPlugin) {
-                grootify(mct);
-                todoPlugin(mct);
-                mct.start();
+                './example/generator/bundle'
+            ], function (todoPlugin) {
+                mct.install(todoPlugin);
+                mct.run();
             })
         });
     </script>
     <link rel="stylesheet" href="platform/commonUI/general/res/css/startup-base.css">
     <link rel="stylesheet" href="platform/commonUI/general/res/css/openmct.css">
-    <link rel="stylesheet" href="tutorials/todo/todo.css">
 	<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-32x32.png" sizes="32x32">
 	<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96">
 	<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16">
@@ -55,7 +52,5 @@
     <div class="l-splash-holder s-splash-holder">
         <div class="l-splash s-splash"></div>
     </div>
-
-    <div ng-view></div>
 </body>
 </html>

main.js

@@ -56,58 +56,31 @@ requirejs.config({
         },
         "zepto": {
             "exports": "Zepto"
+        },
+        "lodash": {
+            "exports": "lodash"
         }
     }
 });
 
 define([
     './platform/framework/src/Main',
-    'legacyRegistry',
-    './src/MCT',
-
-    './src/adapter/bundle',
-
-    './platform/framework/bundle',
-    './platform/core/bundle',
-    './platform/representation/bundle',
-    './platform/commonUI/about/bundle',
-    './platform/commonUI/browse/bundle',
-    './platform/commonUI/edit/bundle',
-    './platform/commonUI/dialog/bundle',
-    './platform/commonUI/formats/bundle',
-    './platform/commonUI/general/bundle',
-    './platform/commonUI/inspect/bundle',
-    './platform/commonUI/mobile/bundle',
-    './platform/commonUI/themes/espresso/bundle',
-    './platform/commonUI/notification/bundle',
-    './platform/containment/bundle',
-    './platform/execution/bundle',
-    './platform/exporters/bundle',
-    './platform/telemetry/bundle',
-    './platform/features/clock/bundle',
-    './platform/features/imagery/bundle',
-    './platform/features/layout/bundle',
-    './platform/features/pages/bundle',
-    './platform/features/plot/bundle',
-    './platform/features/timeline/bundle',
-    './platform/features/table/bundle',
-    './platform/forms/bundle',
-    './platform/identity/bundle',
-    './platform/persistence/aggregator/bundle',
-    './platform/persistence/local/bundle',
-    './platform/persistence/queue/bundle',
-    './platform/policy/bundle',
-    './platform/entanglement/bundle',
-    './platform/search/bundle',
-    './platform/status/bundle',
-    './platform/commonUI/regions/bundle'
-], function (Main, legacyRegistry, MCT) {
+    './src/defaultRegistry',
+    './src/MCT'
+], function (Main, defaultRegistry, MCT) {
     var mct = new MCT();
 
-    mct.legacyRegistry = legacyRegistry;
-    mct.run = mct.start;
+    mct.legacyRegistry = defaultRegistry;
+    mct.run = function (domElement) {
+        if (!domElement) { domElement = document.body; }
+        var appDiv = document.createElement('div');
+        appDiv.setAttribute('ng-view', '');
+        appDiv.className = 'user-environ';
+        domElement.appendChild(appDiv);
+        mct.start();
+    };
     mct.on('start', function () {
-        return new Main().run(legacyRegistry);
+        return new Main().run(defaultRegistry);
     });
 
     return mct;

object-provider.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>Groot Tutorial</title>
+  <script src="dist/main.js"></script>
+</head>
+<body>
+<script>
+
+    // First, we need a source of objects, so we're going to define a few
+    // objects that we wish to expose.  The first object is a folder which
+    // contains the other objects.
+
+
+    var GROOT_ROOT = {
+        name: 'I am groot',
+        type: 'folder',
+        composition: [
+            {
+                namespace: 'groot',
+                identifier: 'arms'
+            },
+            {
+                namespace: 'groot',
+                identifier: 'legs'
+            },
+            {
+                namespace: 'groot',
+                identifier: 'torso'
+            }
+        ]
+    };
+
+    // Now, we will define an object provider.  This will allow us to fetch the
+    // GROOT_ROOT object, plus any other objects in the `groot` namespace.
+    // For more info, see the Object API documentation.
+
+    MCT.Objects.addProvider('groot', {
+        // we'll only define a get function, objects from this provider will
+        // not be mutable.
+        get: function (key) {
+            if (key.identifier === 'groot') {
+                return Promise.resolve(GROOT_ROOT);
+            }
+            return Promise.resolve({
+                name: 'Groot\'s ' + key.identifier
+            });
+        }
+    });
+
+    // Finally, we need to add a "ROOT."  This is an identifier for an object
+    // that Open MCT will load at run time and show at the top-level of the
+    // navigation tree.
+
+    MCT.Objects.addRoot({
+        namespace: 'groot',
+        identifier: 'groot'
+    });
+
+    MCT.run();
+</script>
+</body>
+</html>

platform/commonUI/browse/bundle.js

@@ -39,6 +39,7 @@ define([
     "text!./res/templates/items/items.html",
     "text!./res/templates/browse/object-properties.html",
     "text!./res/templates/browse/inspector-region.html",
+    "text!./res/templates/view-object.html",
     'legacyRegistry'
 ], function (
     BrowseController,
@@ -59,6 +60,7 @@ define([
     itemsTemplate,
     objectPropertiesTemplate,
     inspectorRegionTemplate,
+    viewObjectTemplate,
     legacyRegistry
 ) {
 
@@ -129,7 +131,7 @@ define([
             "representations": [
                 {
                     "key": "view-object",
-                    "templateUrl": "templates/view-object.html"
+                    "template": viewObjectTemplate
                 },
                 {
                     "key": "browse-object",

platform/commonUI/general/bundle.js

@@ -48,6 +48,7 @@ define([
     "./src/directives/MCTSplitPane",
     "./src/directives/MCTSplitter",
     "./src/directives/MCTTree",
+    "./src/filters/ReverseFilter.js",
     "text!./res/templates/bottombar.html",
     "text!./res/templates/controls/action-button.html",
     "text!./res/templates/controls/input-filter.html",
@@ -96,6 +97,7 @@ define([
     MCTSplitPane,
     MCTSplitter,
     MCTTree,
+    ReverseFilter,
     bottombarTemplate,
     actionButtonTemplate,
     inputFilterTemplate,
@@ -146,7 +148,8 @@ define([
                     "depends": [
                         "stylesheets[]",
                         "$document",
-                        "THEME"
+                        "THEME",
+                        "ASSETS_PATH"
                     ]
                 },
                 {
@@ -158,7 +161,7 @@ define([
             ],
             "filters": [
                 {
-                    "implementation": "filters/ReverseFilter.js",
+                    "implementation": ReverseFilter,
                     "key": "reverse"
                 }
             ],
@@ -404,6 +407,11 @@ define([
                     "key": "THEME",
                     "value": "unspecified",
                     "priority": "fallback"
+                },
+                {
+                    "key": "ASSETS_PATH",
+                    "value": ".",
+                    "priority": "fallback"
                 }
             ],
             "containers": [

platform/commonUI/general/src/StyleSheetLoader.js

@@ -38,7 +38,7 @@ define(
          * @param $document Angular's jqLite-wrapped document element
          * @param {string} activeTheme the theme in use
          */
-        function StyleSheetLoader(stylesheets, $document, activeTheme) {
+        function StyleSheetLoader(stylesheets, $document, activeTheme, assetPath) {
             var head = $document.find('head'),
                 document = $document[0];
 
@@ -47,6 +47,7 @@ define(
                 // Create a link element, and construct full path
                 var link = document.createElement('link'),
                     path = [
+                        assetPath,
                         stylesheet.bundle.path,
                         stylesheet.bundle.resources,
                         stylesheet.stylesheetUrl

platform/execution/src/WorkerService.js

@@ -42,11 +42,19 @@ define(
             function addWorker(worker) {
                 var key = worker.key;
                 if (!workerUrls[key]) {
-                    workerUrls[key] = [
-                        worker.bundle.path,
-                        worker.bundle.sources,
-                        worker.scriptUrl
-                    ].join("/");
+                    if (worker.scriptUrl) {
+                        workerUrls[key] = [
+                            worker.bundle.path,
+                            worker.bundle.sources,
+                            worker.scriptUrl
+                        ].join("/");
+                    } else if (worker.scriptText) {
+                        var blob = new Blob(
+                            [worker.scriptText],
+                            {type: 'application/javascript'}
+                        );
+                        workerUrls[key] = URL.createObjectURL(blob);
+                    }
                     sharedWorkers[key] = worker.shared;
                 }
             }

platform/features/table/bundle.js

@@ -27,6 +27,9 @@ define([
     "./src/controllers/TableOptionsController",
     '../../commonUI/regions/src/Region',
     '../../commonUI/browse/src/InspectorRegion',
+    "text!./res/templates/table-options-edit.html",
+    "text!./res/templates/rt-table.html",
+    "text!./res/templates/historical-table.html",
     "legacyRegistry"
 ], function (
     MCTTable,
@@ -35,6 +38,9 @@ define([
     TableOptionsController,
     Region,
     InspectorRegion,
+    tableOptionsEditTemplate,
+    rtTableTemplate,
+    historicalTableTemplate,
     legacyRegistry
 ) {
     /**
@@ -128,7 +134,7 @@ define([
                     "name": "Historical Table",
                     "key": "table",
                     "glyph": "\ue604",
-                    "templateUrl": "templates/historical-table.html",
+                    "template": historicalTableTemplate,
                     "needs": [
                         "telemetry"
                     ],
@@ -139,7 +145,7 @@ define([
                     "name": "Real-time Table",
                     "key": "rt-table",
                     "glyph": "\ue620",
-                    "templateUrl": "templates/rt-table.html",
+                    "template": rtTableTemplate,
                     "needs": [
                         "telemetry"
                     ],
@@ -157,7 +163,7 @@ define([
             "representations": [
                 {
                     "key": "table-options-edit",
-                    "templateUrl": "templates/table-options-edit.html"
+                    "template": tableOptionsEditTemplate
                 }
             ],
             "stylesheets": [

platform/search/bundle.js

@@ -28,6 +28,7 @@ define([
     "text!./res/templates/search-item.html",
     "text!./res/templates/search.html",
     "text!./res/templates/search-menu.html",
+    "text!./src/services/GenericSearchWorker.js",
     'legacyRegistry'
 ], function (
     SearchController,
@@ -37,6 +38,7 @@ define([
     searchItemTemplate,
     searchTemplate,
     searchMenuTemplate,
+    searchWorkerText,
     legacyRegistry
 ) {
 
@@ -114,7 +116,7 @@ define([
             "workers": [
                 {
                     "key": "genericSearchWorker",
-                    "scriptUrl": "services/GenericSearchWorker.js"
+                    "scriptText": searchWorkerText
                 }
             ]
         }

plugin-example.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>Implementing a basic plugin</title>
+  <script src="dist/main.js"></script>
+</head>
+<body>
+<script>
+
+    function WebPlugin(websites) {
+        this.websites = websites;
+
+        var ROOTS = websites.reduce(function (rootMap, website) {
+            rootMap[website] = {
+                namespace: website,
+                identifier: 'page'
+            };
+            return rootMap;
+        }, {});
+
+        function installPlugin(MCT) {
+            Object.keys(ROOTS).forEach(function (rootUrl) {
+                MCT.Objects.addRoot(ROOTS[rootUrl]);
+                MCT.Objects.addProvider(rootUrl, {
+                    get: function () {
+                        return Promise.resolve({
+                            type: 'example.page',
+                            url: rootUrl,
+                            name: rootUrl
+                        });
+                    }
+                });
+            });
+        }
+
+        return installPlugin;
+    }
+
+    var myWebPlugin = WebPlugin([
+        'http://www.wikipedia.org/',
+        'http://nasa.github.io/openmct'
+    ]);
+
+    MCT.install(myWebPlugin);
+
+    MCT.run();
+</script>
+</body>
+</html>

src/BundleRegistry.js

@@ -24,10 +24,27 @@ define(function () {
 
     function BundleRegistry() {
         this.bundles = {};
+        this.knownBundles = {};
     }
 
     BundleRegistry.prototype.register = function (path, definition) {
-        this.bundles[path] = definition;
+        if (this.knownBundles.hasOwnProperty(path)) {
+            throw new Error('Cannot register bundle with duplicate path', path);
+        }
+        this.knownBundles[path] = definition;
+    };
+
+    BundleRegistry.prototype.enable = function (path) {
+        if (!this.knownBundles[path]) {
+            throw new Error('Unknown bundle ' + path);
+        }
+        this.bundles[path] = this.knownBundles[path];
+    };
+
+    BundleRegistry.prototype.disable = function (path) {
+        if (!this.bundles[path]) {
+            throw new Error('Tried to disable inactive bundle ' + path);
+        }
     };
 
     BundleRegistry.prototype.contains = function (path) {
@@ -42,8 +59,14 @@ define(function () {
         return Object.keys(this.bundles);
     };
 
-    BundleRegistry.prototype.remove = function (path) {
+    BundleRegistry.prototype.remove = BundleRegistry.prototype.disable;
+
+    BundleRegistry.prototype.delete = function (path) {
+        if (!this.knownBundles[path]) {
+            throw new Error('Cannot remove Unknown Bundle ' + path);
+        }
         delete this.bundles[path];
+        delete this.knownBundles[path];
     };
 
     return BundleRegistry;

src/MCT.js

@@ -4,19 +4,32 @@ define([
     'uuid',
     './api/api',
     'text!./adapter/templates/edit-object-replacement.html',
-    './ui/Dialog',
-    './api/objects/bundle'
+    './Selection',
+    './api/objects/object-utils'
 ], function (
     EventEmitter,
     legacyRegistry,
     uuid,
     api,
     editObjectTemplate,
-    Dialog
+    Selection,
+    objectUtils
 ) {
     function MCT() {
         EventEmitter.call(this);
-        this.legacyBundle = { extensions: {} };
+        this.legacyBundle = { extensions: {
+            services: [
+                {
+                    key: "mct",
+                    implementation: function () {
+                        return this;
+                    }.bind(this)
+                }
+            ]
+        } };
+
+        this.selection = new Selection();
+        this.on('navigation', this.selection.clear.bind(this.selection));
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);
@@ -32,7 +45,23 @@ define([
         this.legacyBundle.extensions[category].push(extension);
     };
 
-    MCT.prototype.view = function (region, factory) {
+    /**
+     * Set path to where assets are hosted.  This should be the path to main.js.
+     */
+    MCT.prototype.setAssetPath = function (path) {
+        this.legacyExtension('constants', {
+            key: "ASSETS_PATH",
+            value: path
+        });
+    };
+
+    /**
+     * Register a new type of view.
+     *
+     * @param region the region identifier (see mct.regions)
+     * @param {ViewDefinition} definition the definition for this view
+     */
+    MCT.prototype.view = function (region, definition) {
         var viewKey = region + uuid();
         var adaptedViewKey = "adapted-view-" + region;
 
@@ -58,7 +87,9 @@ define([
             implementation: function Policy() {
                 this.allow = function (view, domainObject) {
                     if (view.key === adaptedViewKey) {
-                        return !!factory(domainObject);
+                        var model = domainObject.getModel();
+                        var newDO = objectUtils.toNewFormat(model);
+                        return definition.canView(newDO);
                     }
                     return true;
                 };
@@ -66,7 +97,7 @@ define([
         });
 
         this.legacyExtension('newViews', {
-            factory: factory,
+            factory: definition,
             region: region,
             key: viewKey
         });
@@ -86,33 +117,35 @@ define([
         });
     };
 
-    MCT.prototype.dialog = function (view, title) {
-        return new Dialog(view, title).show();
+    MCT.prototype.start = function () {
+        this.legacyExtension('runs', {
+            depends: ['navigationService'],
+            implementation: function (navigationService) {
+                navigationService
+                    .addListener(this.emit.bind(this, 'navigation'));
+            }.bind(this)
+        });
+
+        legacyRegistry.register('adapter', this.legacyBundle);
+        legacyRegistry.enable('adapter');
+        this.emit('start');
     };
 
-    MCT.prototype.start = function () {
-        legacyRegistry.register('adapter', this.legacyBundle);
-        this.emit('start');
+    /**
+     * Install a plugin in MCT.
+     *
+     * @param `Function` plugin -- a plugin install function which will be
+     *     invoked with the mct instance.
+     */
+    MCT.prototype.install = function (plugin) {
+        plugin(this);
     };
 
     MCT.prototype.regions = {
         main: "MAIN",
+        properties: "PROPERTIES",
         toolbar: "TOOLBAR"
     };
 
-    MCT.prototype.verbs = {
-        mutate: function (domainObject, mutator) {
-            return domainObject.useCapability('mutation', mutator)
-                .then(function () {
-                    var persistence = domainObject.getCapability('persistence');
-                    return persistence.persist();
-                });
-        },
-        observe: function (domainObject, callback) {
-            var mutation = domainObject.getCapability('mutation');
-            return mutation.listen(callback);
-        }
-    };
-
     return MCT;
 });

src/Selection.js

@@ -0,0 +1,32 @@
+define(['EventEmitter'], function (EventEmitter) {
+    function Selection() {
+        EventEmitter.call(this);
+        this.selectedValues = [];
+    }
+
+    Selection.prototype = Object.create(EventEmitter.prototype);
+
+    Selection.prototype.select = function (value) {
+        this.selectedValues.push(value);
+        this.emit('change', this.selectedValues);
+        return this.deselect.bind(this, value);
+    };
+
+    Selection.prototype.deselect = function (value) {
+        this.selectedValues = this.selectedValues.filter(function (v) {
+            return v !== value;
+        });
+        this.emit('change', this.selectedValues);
+    };
+
+    Selection.prototype.selected = function () {
+        return this.selectedValues;
+    };
+
+    Selection.prototype.clear = function () {
+        this.selectedValues = [];
+        this.emit('change', this.selectedValues);
+    };
+
+    return Selection;
+});

src/adapter/actions/ActionDialogDecorator.js

@@ -0,0 +1,44 @@
+define([
+    '../../api/objects/object-utils'
+], function (objectUtils) {
+    function ActionDialogDecorator(mct, newViews, actionService) {
+        this.actionService = actionService;
+        this.mct = mct;
+        this.definitions = newViews.filter(function (newView) {
+            return newView.region === mct.regions.properties;
+        }).map(function (newView) {
+            return newView.factory;
+        });
+    }
+
+    ActionDialogDecorator.prototype.getActions = function (context) {
+        var mct = this.mct;
+        var definitions = this.definitions;
+
+        return this.actionService.getActions(context).map(function (action) {
+            if (action.dialogService) {
+                var domainObject = objectUtils.toNewFormat(
+                    context.domainObject.getModel(),
+                    objectUtils.parseKeyString(context.domainObject.getId())
+                );
+
+                definitions = definitions.filter(function (definition) {
+                    return definition.canView(domainObject);
+                });
+
+                if (definitions.length > 0) {
+                    action.dialogService = Object.create(action.dialogService);
+                    action.dialogService.getUserInput = function (form, value) {
+                        return new mct.Dialog(
+                            definitions[0].view(context.domainObject),
+                            form.title
+                        ).show();
+                    };
+                }
+            }
+            return action;
+        });
+    };
+
+    return ActionDialogDecorator;
+});

src/adapter/bundle.js

@@ -1,14 +1,63 @@
 define([
     'legacyRegistry',
-    './directives/MCTView'
-], function (legacyRegistry, MCTView) {
+    './actions/ActionDialogDecorator',
+    './directives/MCTView',
+    './services/Instantiate',
+    './capabilities/APICapabilityDecorator',
+    './policies/AdapterCompositionPolicy'
+], function (
+    legacyRegistry,
+    ActionDialogDecorator,
+    MCTView,
+    Instantiate,
+    APICapabilityDecorator,
+    AdapterCompositionPolicy
+) {
     legacyRegistry.register('src/adapter', {
         "extensions": {
             "directives": [
                 {
                     key: "mctView",
                     implementation: MCTView,
-                    depends: ["newViews[]"]
+                    depends: [
+                        "newViews[]",
+                        "mct"
+                    ]
+                }
+            ],
+            services: [
+                {
+                    key: "instantiate",
+                    priority: "mandatory",
+                    implementation: Instantiate,
+                    depends: [
+                        "capabilityService",
+                        "identifierService",
+                        "cacheService"
+                    ]
+                }
+            ],
+            components: [
+                {
+                    type: "decorator",
+                    provides: "capabilityService",
+                    implementation: APICapabilityDecorator,
+                    depends: [
+                        "$injector"
+                    ]
+                },
+                {
+                    type: "decorator",
+                    provides: "actionService",
+                    implementation: ActionDialogDecorator,
+                    depends: [ "mct", "newViews[]" ]
+                }
+            ],
+            policies: [
+                {
+                    category: "composition",
+                    implementation: AdapterCompositionPolicy,
+                    depends: [ "mct" ]
                 }
             ]
         }

src/adapter/capabilities/APICapabilityDecorator.js

@@ -0,0 +1,37 @@
+define([
+    './synchronizeMutationCapability',
+    './AlternateCompositionCapability'
+], function (
+    synchronizeMutationCapability,
+    AlternateCompositionCapability
+) {
+
+    /**
+     * Overrides certain capabilities to keep consistency between old API
+     * and new API.
+     */
+    function APICapabilityDecorator($injector, capabilityService) {
+        this.$injector = $injector;
+        this.capabilityService = capabilityService;
+    }
+
+    APICapabilityDecorator.prototype.getCapabilities = function (
+        model
+    ) {
+        var capabilities = this.capabilityService.getCapabilities(model);
+        if (capabilities.mutation) {
+            capabilities.mutation =
+                synchronizeMutationCapability(capabilities.mutation);
+        }
+        if (AlternateCompositionCapability.appliesTo(model)) {
+            capabilities.composition = function (domainObject) {
+                return new AlternateCompositionCapability(this.$injector, domainObject)
+            }.bind(this);
+        }
+
+        return capabilities;
+    };
+
+    return APICapabilityDecorator;
+
+});

src/adapter/capabilities/AlternateCompositionCapability.js

@@ -0,0 +1,102 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Module defining AlternateCompositionCapability. Created by vwoeltje on 11/7/14.
+ */
+define([
+    '../../api/objects/object-utils',
+    '../../api/composition/CompositionAPI'
+], function (objectUtils, CompositionAPI) {
+
+        function AlternateCompositionCapability($injector, domainObject) {
+            this.domainObject = domainObject;
+
+            this.getDependencies = function () {
+                this.instantiate = $injector.get("instantiate");
+                this.contextualize = $injector.get("contextualize");
+                this.getDependencies = undefined;
+            }.bind(this);
+        }
+
+        AlternateCompositionCapability.prototype.add = function (child, index) {
+            if (typeof index !== 'undefined') {
+                // At first glance I don't see a location in the existing
+                // codebase where add is called with an index.  Won't support.
+                throw new Error(
+                    'Composition Capability does not support adding at index'
+                );
+            }
+
+            function addChildToComposition(model) {
+                var existingIndex = model.composition.indexOf(child.getId());
+                if (existingIndex === -1) {
+                    model.composition.push(child.getId())
+                }
+            }
+
+            return this.domainObject.useCapability(
+                    'mutation',
+                    addChildToComposition
+                )
+                .then(this.invoke.bind(this))
+                .then(function (children) {
+                    return children.filter(function (c) {
+                        return c.getId() === child.getId();
+                    })[0];
+                });
+        };
+
+        AlternateCompositionCapability.prototype.contextualizeChild = function (
+            child
+        ) {
+            if (this.getDependencies) {
+                this.getDependencies();
+            }
+
+            var keyString = objectUtils.makeKeyString(child.key);
+            var oldModel = objectUtils.toOldFormat(child);
+            var newDO = this.instantiate(oldModel, keyString);
+            return this.contextualize(newDO, this.domainObject);
+
+        };
+
+        AlternateCompositionCapability.prototype.invoke = function () {
+            var newFormatDO = objectUtils.toNewFormat(
+                this.domainObject.getModel(),
+                this.domainObject.getId()
+            );
+            var collection = CompositionAPI(newFormatDO);
+            return collection.load()
+                .then(function (children) {
+                    collection.destroy();
+                    return children.map(this.contextualizeChild, this);
+                }.bind(this));
+        };
+
+        AlternateCompositionCapability.appliesTo = function (model) {
+            return !!CompositionAPI(objectUtils.toNewFormat(model, model.id));
+        };
+
+        return AlternateCompositionCapability;
+    }
+);

src/adapter/capabilities/synchronizeMutationCapability.js

@@ -0,0 +1,27 @@
+define([
+
+], function (
+
+) {
+
+    /**
+     * Wraps the mutation capability and synchronizes the mutation
+     */
+    function synchronizeMutationCapability(mutationConstructor) {
+
+        return function makeCapability(domainObject) {
+            var capability = mutationConstructor(domainObject);
+            var oldListen = capability.listen.bind(capability);
+            capability.listen = function (listener) {
+                return oldListen(function (newModel) {
+                    capability.domainObject.model =
+                        JSON.parse(JSON.stringify(newModel));
+                    listener(newModel);
+                });
+            };
+            return capability;
+        }
+    };
+
+    return synchronizeMutationCapability;
+});

src/adapter/directives/MCTView.js

@@ -1,24 +1,31 @@
-define(['angular'], function (angular) {
-    function MCTView(newViews) {
-        var factories = {};
+define([
+    'angular',
+    './Region',
+    '../../api/objects/object-utils'
+], function (
+    angular,
+    Region,
+    objectUtils
+) {
+    function MCTView(newViews, PublicAPI) {
+        var definitions = {};
 
         newViews.forEach(function (newView) {
-            factories[newView.region] = factories[newView.region] || {};
-            factories[newView.region][newView.key] = newView.factory;
+            definitions[newView.region] = definitions[newView.region] || {};
+            definitions[newView.region][newView.key] = newView.factory;
         });
 
         return {
             restrict: 'E',
             link: function (scope, element, attrs) {
-                var key, mctObject, region;
+                var key, mctObject, regionId, region;
 
                 function maybeShow() {
-                    if (!factories[region] || !factories[region][key] || !mctObject) {
+                    if (!definitions[regionId] || !definitions[regionId][key] || !mctObject) {
                         return;
                     }
 
-                    var view = factories[region][key](mctObject);
-                    view.show(element[0]);
+                    region.show(definitions[regionId][key].view(mctObject));
                 }
 
                 function setKey(k) {
@@ -27,19 +34,24 @@ define(['angular'], function (angular) {
                 }
 
                 function setObject(obj) {
-                    mctObject = obj;
+                    mctObject = undefined;
+                    PublicAPI.Objects.get(objectUtils.parseKeyString(obj.getId()))
+                        .then(function (mobj) {
+                            mctObject = mobj;
+                            maybeShow();
+                        });
+                }
+
+                function setRegionId(r) {
+                    regionId = r;
                     maybeShow();
                 }
 
-                function setRegion(r) {
-                    region = r;
-                    maybeShow();
-                }
+                region = new Region(element[0]);
 
                 scope.$watch('key', setKey);
-                scope.$watch('region', setRegion);
+                scope.$watch('region', setRegionId);
                 scope.$watch('mctObject', setObject);
-
             },
             scope: {
                 key: "=",

src/adapter/directives/Region.js

@@ -0,0 +1,23 @@
+define([], function () {
+    function Region(element) {
+        this.activeView = undefined;
+        this.element = element;
+    }
+
+    Region.prototype.clear = function () {
+        if (this.activeView) {
+            this.activeView.destroy();
+            this.activeView = undefined;
+        }
+    };
+
+    Region.prototype.show = function (view) {
+        this.clear();
+        this.activeView = view;
+        if (this.activeView) {
+            this.activeView.show(this.element);
+        }
+    };
+
+    return Region;
+});

src/adapter/policies/AdapterCompositionPolicy.js

@@ -0,0 +1,26 @@
+define([], function () {
+    function AdapterCompositionPolicy(mct) {
+        this.mct = mct;
+    }
+
+    AdapterCompositionPolicy.prototype.allow = function (
+        containerType,
+        childType
+    ) {
+        var containerObject = containerType.getInitialModel();
+        var childObject = childType.getInitialModel();
+
+        containerObject.type = containerType.getKey();
+        childObject.type = childType.getKey();
+
+        var composition = this.mct.Composition(containerObject);
+
+        if (composition) {
+            return composition.canContain(childObject);
+        }
+
+        return true;
+    };
+
+    return AdapterCompositionPolicy;
+});

src/adapter/services/Instantiate.js

@@ -0,0 +1,49 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    ['../../../platform/core/src/objects/DomainObjectImpl'],
+    function (DomainObjectImpl) {
+
+        /**
+         * Overrides platform version of instantiate, passes Id with model such
+         * that capability detection can utilize new format domain objects.
+         */
+        function Instantiate(
+            capabilityService,
+            identifierService,
+            cacheService
+        ) {
+            return function (model, id) {
+                id = id || identifierService.generate();
+                var old_id = model.id;
+                model.id = id;
+                var capabilities = capabilityService.getCapabilities(model);
+                model.id = old_id;
+                cacheService.put(id, model);
+                return new DomainObjectImpl(id, model, capabilities);
+            };
+        }
+
+        return Instantiate;
+    }
+);

src/api/Type.js

@@ -24,7 +24,7 @@ define(function () {
      */
     Type.prototype.check = function (domainObject) {
         // Depends on assignment from MCT.
-        return domainObject.getModel().type === this.key;
+        return domainObject.type === this.key;
     };
 
     /**
@@ -37,6 +37,7 @@ define(function () {
         def.name = this.definition.metadata.label;
         def.glyph = this.definition.metadata.glyph;
         def.description = this.definition.metadata.description;
+        def.properties = this.definition.form;
 
         if (this.definition.initialize) {
             def.model = {};

src/api/View.js

@@ -1,23 +1,37 @@
-define(function () {
+define([], function () {
+
+    /**
+     * A View is used to provide displayable content, and to react to
+     * associated life cycle events.
+     *
+     * @interface
+     */
     function View() {
+
     }
 
     /**
-     * Show this view in the specified container. If this view is already
-     * showing elsewhere, it will be removed from that location.
+     * Populate the supplied DOM element with the contents of this view.
      *
-     * @param {HTMLElement} container the element to populate
+     * View implementations should use this method to attach any
+     * listeners or acquire other resources that are necessary to keep
+     * the contents of this view up-to-date.
+     *
+     * @param {HTMLElement} container the DOM element to populate
      */
     View.prototype.show = function (container) {
+
     };
 
     /**
      * Release any resources associated with this view.
      *
-     * Subclasses should override this method to release any resources
-     * they obtained during a `show` call.
+     * View implementations should use this method to detach any
+     * listeners or release other resources that are no longer necessary
+     * once a view is no longer used.
      */
     View.prototype.destroy = function () {
+
     };
 
     return View;

src/api/ViewDefinition.js

@@ -0,0 +1,44 @@
+define(function () {
+
+    /**
+     * Defines a kind of view.
+     * @interface
+     */
+    function ViewDefinition() {
+    }
+
+    /**
+     * Get metadata about this view, as may be used in the user interface
+     * to present options for this view.
+     * @param {*} object the object to be shown in this view
+     * @returns {mct.ViewMetadata} metadata about this view
+     */
+    ViewDefinition.prototype.metadata = function (object) {
+    };
+
+    /**
+     * Instantiate a new view of this object. Callers of this method are
+     * responsible for calling `canView` before instantiating views in this
+     * manner.
+     *
+     * @param {*} object the object to be shown in this view
+     * @returns {mct.View} a view of this object
+     */
+    ViewDefinition.prototype.view = function (object) {
+    };
+
+    /**
+     * Check if this view is capable of showing this object. Users of
+     * views should use this method before calling `show`.
+     *
+     * Subclasses should override this method to control the applicability
+     * of this view to other objects.
+     *
+     * @param {*} object the object to be shown in this view
+     * @returns {boolean} true if this view is applicable to this object
+     */
+    ViewDefinition.prototype.canView = function (object) {
+    };
+
+    return ViewDefinition;
+});

src/api/api.js

@@ -2,17 +2,23 @@ define([
     './Type',
     './TimeConductor',
     './View',
-    './objects/ObjectAPI'
+    './objects/ObjectAPI',
+    './composition/CompositionAPI',
+    './ui/Dialog'
 ], function (
     Type,
     TimeConductor,
     View,
-    ObjectAPI
+    ObjectAPI,
+    CompositionAPI,
+    Dialog
 ) {
     return {
         Type: Type,
         TimeConductor: new TimeConductor(),
         View: View,
-        Objects: ObjectAPI
+        Objects: ObjectAPI,
+        Composition: CompositionAPI,
+        Dialog: Dialog
     };
 });

src/api/composition/CompositionAPI.js

@@ -0,0 +1,39 @@
+define([
+    'lodash',
+    'EventEmitter',
+    './DefaultCompositionProvider',
+    './CompositionCollection'
+], function (
+    _,
+    EventEmitter,
+    DefaultCompositionProvider,
+    CompositionCollection
+) {
+
+    var PROVIDER_REGISTRY = [];
+
+    function getProvider (object) {
+        return _.find(PROVIDER_REGISTRY, function (p) {
+            return p.appliesTo(object);
+        });
+    };
+
+    function composition(object) {
+        var provider = getProvider(object);
+
+        if (!provider) {
+            return;
+        }
+
+        return new CompositionCollection(object, provider);
+    };
+
+    composition.addProvider = function (provider) {
+        PROVIDER_REGISTRY.unshift(provider);
+    };
+
+    composition.addProvider(new DefaultCompositionProvider());
+
+    return composition;
+
+});

src/api/composition/CompositionCollection.js

@@ -0,0 +1,122 @@
+define([
+    'EventEmitter',
+    'lodash',
+    '../objects/object-utils'
+], function (
+    EventEmitter,
+    _,
+    objectUtils
+) {
+
+    function CompositionCollection(domainObject, provider) {
+        EventEmitter.call(this);
+        this.domainObject = domainObject;
+        this.provider = provider;
+        if (this.provider.on) {
+            this.provider.on(
+                this.domainObject,
+                'add',
+                this.onProviderAdd,
+                this
+            );
+            this.provider.on(
+                this.domainObject,
+                'remove',
+                this.onProviderRemove,
+                this
+            );
+        }
+    };
+
+    CompositionCollection.prototype = Object.create(EventEmitter.prototype);
+
+    CompositionCollection.prototype.onProviderAdd = function (child) {
+        this.add(child, true);
+    };
+
+    CompositionCollection.prototype.onProviderRemove = function (child) {
+        this.remove(child, true);
+    };
+
+    CompositionCollection.prototype.indexOf = function (child) {
+        return _.findIndex(this._children, function (other) {
+            return objectUtils.equals(child, other);
+        });
+    };
+
+    CompositionCollection.prototype.contains = function (child) {
+        return this.indexOf(child) !== -1;
+    };
+
+    CompositionCollection.prototype.add = function (child, skipMutate) {
+        if (!this._children) {
+            throw new Error("Must load composition before you can add!");
+        }
+        if (!this.canContain(child)) {
+            throw new Error("This object cannot contain that object.");
+        }
+        if (this.contains(child)) {
+            if (skipMutate) {
+                return; // don't add twice, don't error.
+            }
+            throw new Error("Unable to add child: already in composition");
+        }
+        this._children.push(child);
+        this.emit('add', child);
+        if (!skipMutate) {
+            // add after we have added.
+            this.provider.add(this.domainObject, child);
+        }
+    };
+
+    CompositionCollection.prototype.load = function () {
+        return this.provider.load(this.domainObject)
+            .then(function (children) {
+                this._children = [];
+                children.map(function (c) {
+                    this.add(c, true);
+                }, this);
+                this.emit('load');
+                return this._children.slice();
+            }.bind(this));
+    };
+
+    CompositionCollection.prototype.remove = function (child, skipMutate) {
+        if (!this.contains(child)) {
+            if (skipMutate) {
+                return;
+            }
+            throw new Error("Unable to remove child: not found in composition");
+        }
+        var index = this.indexOf(child);
+        var removed = this._children.splice(index, 1)[0];
+        this.emit('remove', index, child);
+        if (!skipMutate) {
+            // trigger removal after we have internally removed it.
+            this.provider.remove(this.domainObject, removed);
+        }
+    };
+
+    CompositionCollection.prototype.canContain = function (domainObject) {
+        return this.provider.canContain(this.domainObject, domainObject);
+    };
+
+    CompositionCollection.prototype.destroy = function () {
+        if (this.provider.off) {
+            this.provider.off(
+                this.domainObject,
+                'add',
+                this.onProviderAdd,
+                this
+            );
+            this.provider.off(
+                this.domainObject,
+                'remove',
+                this.onProviderRemove,
+                this
+            );
+        }
+    };
+
+    return CompositionCollection
+});

src/api/composition/DefaultCompositionProvider.js

@@ -0,0 +1,80 @@
+define([
+    'lodash',
+    'EventEmitter',
+    '../objects/ObjectAPI',
+    '../objects/object-utils'
+], function (
+    _,
+    EventEmitter,
+    ObjectAPI,
+    objectUtils
+) {
+
+    function makeEventName(domainObject, event) {
+        return event + ':' + objectUtils.makeKeyString(domainObject.key);
+    }
+
+    function DefaultCompositionProvider() {
+        EventEmitter.call(this);
+    }
+
+    DefaultCompositionProvider.prototype =
+        Object.create(EventEmitter.prototype);
+
+    DefaultCompositionProvider.prototype.appliesTo = function (domainObject) {
+        return !!domainObject.composition;
+    };
+
+    DefaultCompositionProvider.prototype.load = function (domainObject) {
+        return Promise.all(domainObject.composition.map(ObjectAPI.get));
+    };
+
+    DefaultCompositionProvider.prototype.on = function (
+        domainObject,
+        event,
+        listener,
+        context
+    ) {
+        // these can likely be passed through to the mutation service instead
+        // of using an eventemitter.
+        this.addListener(
+            makeEventName(domainObject, event),
+            listener,
+            context
+        );
+    };
+
+    DefaultCompositionProvider.prototype.off = function (
+        domainObject,
+        event,
+        listener,
+        context
+    ) {
+        // these can likely be passed through to the mutation service instead
+        // of using an eventemitter.
+        this.removeListener(
+            makeEventName(domainObject, event),
+            listener,
+            context
+        );
+    };
+
+    DefaultCompositionProvider.prototype.canContain = function (domainObject, child) {
+        return true;
+    };
+
+    DefaultCompositionProvider.prototype.remove = function (domainObject, child) {
+        // TODO: this needs to be synchronized via mutation
+        var index = domainObject.composition.indexOf(child);
+        domainObject.composition.splice(index, 1);
+        this.emit(makeEventName(domainObject, 'remove'), child);
+    };
+
+    DefaultCompositionProvider.prototype.add = function (domainObject, child) {
+        // TODO: this needs to be synchronized via mutation
+        domainObject.composition.push(child.key);
+        this.emit(makeEventName(domainObject, 'add'), child);
+    };
+
+    return DefaultCompositionProvider;
+});

src/api/composition/README.md

@@ -0,0 +1,37 @@
+# Composition API - Overview
+
+The composition API is straightforward:
+
+MCT.composition(object) -- returns a `CompositionCollection` if the object has 
+composition, returns undefined if it doesn't.
+
+## CompositionCollection
+
+Has three events:
+* `load`: when the collection has completed loading.
+* `add`: when a new object has been added to the collection.
+* `remove` when an object has been removed from the collection.
+
+Has three methods:
+
+`Collection.load()` -- returns a promise that is fulfilled when the composition 
+    has loaded.
+`Collection.add(object)` -- add a domain object to the composition.
+`Collection.remove(object)` -- remove the object from the composition.
+
+## Composition providers
+composition providers are anything that meets the following interface:
+
+* `provider.appliesTo(domainObject)` -> return true if this provider can provide 
+    composition for a given domain object.
+* `provider.add(domainObject, childObject)` -> adds object 
+* `provider.remove(domainObject, childObject)` -> immediately removes objects
+* `provider.load(domainObject)` -> returns promise for array of children
+
+TODO: need to figure out how to make the provider event listeners invisible to the provider.
+
+There is a default composition provider which handles loading composition for 
+any object with a `composition` property.  If you want specialized composition 
+loading behavior, implement your own composition provider and register it with
+
+`MCT.composition.addProvider(myProvider)`

src/api/objects/LegacyObjectAPIInterceptor.js

@@ -1,15 +1,54 @@
 define([
     './object-utils',
-    './ObjectAPI'
+    './ObjectAPI',
+    './objectEventEmitter'
 ], function (
     utils,
-    ObjectAPI
+    ObjectAPI,
+    objectEventEmitter
 ) {
-    function ObjectServiceProvider(objectService, instantiate) {
+    function ObjectServiceProvider(objectService, instantiate, topic) {
         this.objectService = objectService;
         this.instantiate = instantiate;
+
+        this.generalTopic = topic('mutation');
+        this.bridgeEventBuses();
     }
 
+    /**
+     * Bridges old and new style mutation events to provide compatibility between the two APIs
+     * @private
+     */
+    ObjectServiceProvider.prototype.bridgeEventBuses = function () {
+        var removeGeneralTopicListener;
+
+        var handleMutation = function (newStyleObject) {
+            var keyString = utils.makeKeyString(newStyleObject.key);
+            var oldStyleObject = this.instantiate(utils.toOldFormat(newStyleObject), keyString);
+
+            // Don't trigger self
+            removeGeneralTopicListener();
+
+            oldStyleObject.getCapability('mutation').mutate(function () {
+                return utils.toOldFormat(newStyleObject);
+            });
+
+            removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
+        }.bind(this);
+
+        var handleLegacyMutation = function (legacyObject){
+            var newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId());
+
+            //Don't trigger self
+            objectEventEmitter.off('mutation', handleMutation);
+            objectEventEmitter.emit(newStyleObject.key.identifier + ":*", newStyleObject);
+            objectEventEmitter.on('mutation', handleMutation);
+        }.bind(this);
+
+        objectEventEmitter.on('mutation', handleMutation);
+        removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
+    };
+
     ObjectServiceProvider.prototype.save = function (object) {
         var key = object.key,
             keyString = utils.makeKeyString(key),
@@ -30,14 +69,14 @@ define([
         var keyString = utils.makeKeyString(key);
         return this.objectService.getObjects([keyString])
             .then(function (results) {
-                var model = JSON.parse(JSON.stringify(results[keyString].getModel()));
+                var model = results[keyString].getModel();
                 return utils.toNewFormat(model, key);
             });
     };
 
     // Injects new object API as a decorator so that it hijacks all requests.
     // Object providers implemented on new API should just work, old API should just work, many things may break.
-    function LegacyObjectAPIInterceptor(ROOTS, instantiate, objectService) {
+    function LegacyObjectAPIInterceptor(ROOTS, instantiate, topic, objectService) {
         this.getObjects = function (keys) {
             var results = {},
                 promises = keys.map(function (keyString) {
@@ -56,7 +95,7 @@ define([
         };
 
         ObjectAPI._supersecretSetFallbackProvider(
-            new ObjectServiceProvider(objectService, instantiate)
+            new ObjectServiceProvider(objectService, instantiate, topic)
         );
 
         ROOTS.forEach(function (r) {

src/api/objects/MutableObject.js

@@ -0,0 +1,54 @@
+define([
+    'lodash',
+    './objectEventEmitter'
+], function (
+    _,
+    objectEventEmitter
+) {
+
+    var ANY_OBJECT_EVENT = "mutation";
+
+    /**
+     * The MutableObject wraps a DomainObject and provides getters and
+     * setters for
+     * @param eventEmitter
+     * @param object
+     * @constructor
+     */
+    function MutableObject(object) {
+        this.object = object;
+        this.unlisteners = [];
+    }
+
+    function qualifiedEventName(object, eventName) {
+        return [object.key.identifier, eventName].join(':');
+    }
+
+    MutableObject.prototype.stopListening = function () {
+        this.unlisteners.forEach(function (unlisten) {
+            unlisten();
+        })
+    };
+
+    MutableObject.prototype.on = function(path, callback) {
+        var fullPath = qualifiedEventName(this.object, path);
+        objectEventEmitter.on(fullPath, callback);
+        this.unlisteners.push(objectEventEmitter.off.bind(objectEventEmitter, fullPath, callback));
+    };
+
+    MutableObject.prototype.set = function (path, value) {
+
+        _.set(this.object, path, value);
+        _.set(this.object, 'modified', Date.now());
+
+        //Emit event specific to property
+        objectEventEmitter.emit(qualifiedEventName(this.object, path), value);
+        //Emit wildcare event
+        objectEventEmitter.emit(qualifiedEventName(this.object, '*'), this.object);
+
+        //Emit a general "any object" event
+        objectEventEmitter.emit(ANY_OBJECT_EVENT, this.object);
+    };
+
+    return MutableObject;
+});

src/api/objects/MutableObjectSpec.js

@@ -0,0 +1,110 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(['./MutableObject'], function (MutableObject) {
+    describe('Mutable Domain Objects', function () {
+        var domainObject,
+            mutableObject,
+            eventEmitter,
+            arrayProperty,
+            objectProperty,
+            identifier;
+
+        beforeEach(function () {
+            identifier = 'objectId';
+            arrayProperty = [
+                'First array element',
+                'Second array element',
+                'Third array element'
+            ];
+            objectProperty = {
+                prop1: 'val1',
+                prop2: 'val2',
+                prop3: {
+                    propA: 'valA',
+                    propB: 'valB',
+                    propC: []
+                }
+            };
+            domainObject = {
+                    key: {
+                        identifier: identifier
+                    },
+                    stringProperty: 'stringValue',
+                    objectProperty: objectProperty,
+                    arrayProperty: arrayProperty
+                };
+            eventEmitter = jasmine.createSpyObj('eventEmitter', [
+                'emit'
+            ]);
+            mutableObject = new MutableObject(eventEmitter, domainObject);
+        });
+
+        it('Supports getting and setting of object properties', function () {
+            expect(domainObject.stringProperty).toEqual('stringValue');
+            mutableObject.set('stringProperty', 'updated');
+            expect(domainObject.stringProperty).toEqual('updated');
+
+            var newArrayProperty = [];
+            expect(domainObject.arrayProperty).toEqual(arrayProperty);
+            mutableObject.set('arrayProperty', newArrayProperty);
+            expect(domainObject.arrayProperty).toEqual(newArrayProperty);
+
+            var newObjectProperty = [];
+            expect(domainObject.objectProperty).toEqual(objectProperty);
+            mutableObject.set('objectProperty', newObjectProperty);
+            expect(domainObject.objectProperty).toEqual(newObjectProperty);
+        });
+
+        it('Supports getting and setting of nested properties', function () {
+            expect(domainObject.objectProperty).toEqual(objectProperty);
+            expect(domainObject.objectProperty.prop1).toEqual(objectProperty.prop1);
+            expect(domainObject.objectProperty.prop3.propA).toEqual(objectProperty.prop3.propA);
+
+            mutableObject.set('objectProperty.prop1', 'new-prop-1');
+            expect(domainObject.objectProperty.prop1).toEqual('new-prop-1');
+
+            mutableObject.set('objectProperty.prop3.propA', 'new-prop-A');
+            expect(domainObject.objectProperty.prop3.propA).toEqual('new-prop-A');
+
+            mutableObject.set('arrayProperty.1', 'New Second Array Element');
+            expect(arrayProperty[1]).toEqual('New Second Array Element');
+        });
+
+        it('Fires events when properties change', function () {
+            var newString = 'updated'
+            mutableObject.set('stringProperty', newString);
+            expect(eventEmitter.emit).toHaveBeenCalledWith([identifier, 'stringProperty'].join(':'), newString);
+
+            var newArray = [];
+            mutableObject.set('arrayProperty', newArray);
+            expect(eventEmitter.emit).toHaveBeenCalledWith([identifier, 'arrayProperty'].join(':'), newArray);
+
+        });
+
+        it('Fires wildcard event when any property changes', function () {
+            var newString = 'updated'
+            mutableObject.set('objectProperty.prop3.propA', newString);
+            expect(eventEmitter.emit).toHaveBeenCalledWith([identifier, '*'].join(':'), domainObject);
+        });
+    });
+});

src/api/objects/ObjectAPI.js

@@ -1,23 +1,16 @@
 define([
     'lodash',
-    './object-utils'
+    './object-utils',
+    './MutableObject'
 ], function (
     _,
-    utils
+    utils,
+    MutableObject
 ) {
 
     /**
         Object API.  Intercepts the existing object API while also exposing
         A new Object API.
-
-        MCT.objects.get('mine')
-            .then(function (root) {
-                console.log(root);
-                MCT.objects.getComposition(root)
-                    .then(function (composition) {
-                        console.log(composition)
-                    })
-            });
     */
 
     var Objects = {},
@@ -29,8 +22,6 @@ define([
         FALLBACK_PROVIDER = p;
     };
 
-
-
     // Root provider is hardcoded in; can't be skipped.
     var RootProvider = {
         'get': function () {
@@ -48,7 +39,7 @@ define([
             return RootProvider;
         }
         return PROVIDER_REGISTRY[key.namespace] || FALLBACK_PROVIDER;
-    };
+    }
 
     Objects.addProvider = function (namespace, provider) {
         PROVIDER_REGISTRY[namespace] = provider;
@@ -88,5 +79,9 @@ define([
         });
     };
 
+    Objects.getMutable = function (object) {
+        return new MutableObject(object);
+    };
+
     return Objects;
 });

src/api/objects/README.md

@@ -16,85 +16,39 @@ The above key would encode into the identifier, `elastic:myIdentifier`.
 
 When interacting with the API you will be dealing with key objects.
 
+## Roots
+
+"Roots" are objects that Open MCT will load at run time and form the basic entry point for users.  You can register new root objects by calling the 
+
 # Configuring the Object API
 
 The following methods should be used before calling run.  They allow you to 
 configure the persistence space of MCT.
 
-* `MCT.objects.addRoot(key)` -- add a "ROOT" to Open MCT by specifying it's 
-    key.
+* `MCT.objects.addRoot(key)` -- add a "ROOT" to Open MCT by specifying it's key.
 * `MCT.objects.removeRoot(key)` -- Remove a "ROOT" from Open MCT by key.
-* `MCT.objects.addProvider(namespace, provider)` -- register an object provider
-    for a specific namespace.  See below for documentation on the provider 
-    interface.
-    
+* `MCT.objects.addProvider(namespace, provider)` -- register an object provider for a specific namespace.  See below for documentation on the provider interface.
+
+# defining providers
+
 # Using the object API
 
-The object API provides methods for getting, saving, and deleting objects.
+The object API provides methods for getting, saving, and deleting objects.  Plugin developers may not frequently need to interact with this API, as they should receive instances of the objects as needed.
 
 * MCT.objects.get(key) -> returns promise for an object
-* MCT.objects.save(object) -> returns promise that is resolved when object
-    has been saved
-* MCT.objects.delete(object) -> returns promise that is resolved when object has 
-    been deleted
+* MCT.objects.save(object) -> returns promise that is resolved when object has been saved
+* MCT.objects.delete(object) -> returns promise that is resolved when object has been deleted
 
 ## Configuration Example: Adding a groot
 
-The following example adds a new root object for groot and populates it with
-some pieces of groot.
-
-```javascript
-
-var ROOT_KEY = {
-    namespace: 'groot',
-    identifier: 'groot'
-};
-
-var GROOT_ROOT = {
-    name: 'I am groot',
-    type: 'folder',
-    composition: [
-        {
-            namespace: 'groot',
-            identifier: 'arms'
-        },
-        {
-            namespace: 'groot',
-            identifier: 'legs'
-        },
-        {
-            namespace: 'groot',
-            identifier: 'torso'
-        }
-    ]
-};
-
-var GrootProvider = {
-    get: function (key) {
-        if (key.identifier === 'groot') {
-            return Promise.resolve(GROOT_ROOT);
-        }
-        return Promise.resolve({
-            name: 'Groot\'s ' + key.identifier
-        });
-    }
-};
-
-mct.Objects.addRoot(ROOT_KEY);
-
-mct.Objects.addProvider('groot', GrootProvider);
-
-```
+See the tutorial in [object-provider.html](object-provider.html).
 
 ### Making a custom provider:
 
-All methods on the provider interface are optional, so you do not need
-to modify them.
+All methods on the provider interface are optional. 
 
-* `provider.get(key)` -> promise for a domain object.
-* `provider.save(domainObject)` -> returns promise that is fulfilled when object 
-    has been saved.
-* `provider.delete(domainObject)` -> returns promise that is fulfilled when 
-    object has been deleted.
+* `provider.get(key)` -> returns promise for a domain object.
+* `provider.save(domainObject)` -> returns promise that is fulfilled when object has been saved.
+* `provider.delete(domainObject)` -> returns promise that is fulfilled when object has been deleted.
 
 

src/api/objects/bundle.js

@@ -40,7 +40,8 @@ define([
                     implementation: LegacyObjectAPIInterceptor,
                     depends: [
                         "roots[]",
-                        "instantiate"
+                        "instantiate",
+                        "topic"
                     ]
                 }
             ]

src/api/objects/object-utils.js

@@ -12,13 +12,27 @@ define([
         }
         var namespace = '',
             identifier = key;
-        for (var i = 0, escaped = false, len=key.length; i < len; i++) {
-            if (key[i] === ":" && !escaped) {
-                namespace = key.slice(0, i);
-                identifier = key.slice(i + 1);
-                break;
+        for (var i = 0, escaped = false, len=key.length; i < key.length; i++) {
+            if (escaped) {
+                escaped = false;
+            } else {
+                if (key[i] === "\\") {
+                    escaped = true;
+                    continue;
+                }
+                if (key[i] === ":") {
+                    // namespace = key.slice(0, i);
+                    identifier = key.slice(i + 1);
+                    break;
+                }
             }
+            namespace += key[i];
         }
+
+        if (key === namespace) {
+            namespace = '';
+        }
+
         return {
             namespace: namespace,
             identifier: identifier
@@ -42,6 +56,7 @@ define([
 
     // Converts composition to use key strings instead of keys
     var toOldFormat = function (model) {
+        model = JSON.parse(JSON.stringify(model));
         delete model.key;
         if (model.composition) {
             model.composition = model.composition.map(makeKeyString);
@@ -51,6 +66,7 @@ define([
 
     // converts composition to use keys instead of key strings
     var toNewFormat = function (model, key) {
+        model = JSON.parse(JSON.stringify(model));
         model.key = key;
         if (model.composition) {
             model.composition = model.composition.map(parseKeyString);
@@ -58,10 +74,15 @@ define([
         return model;
     };
 
+    var equals = function (a, b) {
+        return makeKeyString(a.key) === makeKeyString(b.key);
+    };
+
     return {
         toOldFormat: toOldFormat,
         toNewFormat: toNewFormat,
         makeKeyString: makeKeyString,
-        parseKeyString: parseKeyString
+        parseKeyString: parseKeyString,
+        equals: equals
     };
 });

src/api/objects/objectEventEmitter.js

@@ -0,0 +1,10 @@
+define([
+    "EventEmitter"
+], function (
+    EventEmitter
+) {
+    /**
+     * Provides a singleton event bus for sharing between objects.
+     */
+    return new EventEmitter();
+});

src/api/ui/Dialog.js

@@ -2,9 +2,15 @@ define(['text!./dialog.html', 'zepto'], function (dialogTemplate, $) {
     function Dialog(view, title) {
         this.view = view;
         this.title = title;
+        this.showing = false;
+        this.enabledState = true;
     }
 
     Dialog.prototype.show = function () {
+        if (this.showing) {
+            throw new Error("Dialog already showing.");
+        }
+
         var $body = $('body');
         var $dialog = $(dialogTemplate);
         var $contents = $dialog.find('.contents .editor');
@@ -13,31 +19,45 @@ define(['text!./dialog.html', 'zepto'], function (dialogTemplate, $) {
         var $ok = $dialog.find('.ok');
         var $cancel = $dialog.find('.cancel');
 
-        var view = this.view;
-
-        function dismiss() {
-            $dialog.remove();
-            view.destroy();
-        }
-
         if (this.title) {
             $dialog.find('.title').text(this.title);
         }
 
         $body.append($dialog);
         this.view.show($contents[0]);
+        this.$dialog = $dialog;
+        this.$ok = $ok;
+        this.showing = true;
+
+        [$ok, $cancel, $close].forEach(function ($button) {
+            $button.on('click', this.hide.bind(this));
+        }.bind(this));
 
         return new Promise(function (resolve, reject) {
             $ok.on('click', resolve);
-            $ok.on('click', dismiss);
-
             $cancel.on('click', reject);
-            $cancel.on('click', dismiss);
-
             $close.on('click', reject);
-            $close.on('click', dismiss);
         });
     };
 
+    Dialog.prototype.hide = function () {
+        if (!this.showing) {
+            return;
+        }
+        this.$dialog.remove();
+        this.view.destroy();
+        this.showing = false;
+    };
+
+    Dialog.prototype.enabled = function (state) {
+        if (state !== undefined) {
+            this.enabledState = state;
+            if (this.showing) {
+                this.$ok.toggleClass('disabled', !state);
+            }
+        }
+        return this.enabledState;
+    };
+
     return Dialog;
 });

src/defaultRegistry.js

@@ -0,0 +1,113 @@
+define([
+    'legacyRegistry',
+
+    '../src/adapter/bundle',
+    '../src/api/objects/bundle',
+
+    '../example/builtins/bundle',
+    '../example/composite/bundle',
+    '../example/eventGenerator/bundle',
+    '../example/export/bundle',
+    '../example/extensions/bundle',
+    '../example/forms/bundle',
+    '../example/generator/bundle',
+    '../example/identity/bundle',
+    '../example/imagery/bundle',
+    '../example/mobile/bundle',
+    '../example/msl/bundle',
+    '../example/notifications/bundle',
+    '../example/persistence/bundle',
+    '../example/plotOptions/bundle',
+    '../example/policy/bundle',
+    '../example/profiling/bundle',
+    '../example/scratchpad/bundle',
+    '../example/taxonomy/bundle',
+    '../example/worker/bundle',
+
+    '../platform/commonUI/about/bundle',
+    '../platform/commonUI/browse/bundle',
+    '../platform/commonUI/dialog/bundle',
+    '../platform/commonUI/edit/bundle',
+    '../platform/commonUI/formats/bundle',
+    '../platform/commonUI/general/bundle',
+    '../platform/commonUI/inspect/bundle',
+    '../platform/commonUI/mobile/bundle',
+    '../platform/commonUI/notification/bundle',
+    '../platform/commonUI/regions/bundle',
+    '../platform/commonUI/themes/espresso/bundle',
+    '../platform/commonUI/themes/snow/bundle',
+    '../platform/containment/bundle',
+    '../platform/core/bundle',
+    '../platform/entanglement/bundle',
+    '../platform/execution/bundle',
+    '../platform/exporters/bundle',
+    '../platform/features/clock/bundle',
+    '../platform/features/conductor/bundle',
+    '../platform/features/imagery/bundle',
+    '../platform/features/layout/bundle',
+    '../platform/features/pages/bundle',
+    '../platform/features/plot/bundle',
+    '../platform/features/static-markup/bundle',
+    '../platform/features/table/bundle',
+    '../platform/features/timeline/bundle',
+    '../platform/forms/bundle',
+    '../platform/framework/bundle',
+    '../platform/framework/src/load/Bundle',
+    '../platform/identity/bundle',
+    '../platform/persistence/aggregator/bundle',
+    '../platform/persistence/couch/bundle',
+    '../platform/persistence/elastic/bundle',
+    '../platform/persistence/local/bundle',
+    '../platform/persistence/queue/bundle',
+    '../platform/policy/bundle',
+    '../platform/representation/bundle',
+    '../platform/search/bundle',
+    '../platform/status/bundle',
+    '../platform/telemetry/bundle',
+], function (legacyRegistry) {
+
+    var DEFAULTS = [
+        'src/adapter',
+        'src/api/objects',
+        'platform/framework',
+        'platform/core',
+        'platform/representation',
+        'platform/commonUI/about',
+        'platform/commonUI/browse',
+        'platform/commonUI/edit',
+        'platform/commonUI/dialog',
+        'platform/commonUI/formats',
+        'platform/commonUI/general',
+        'platform/commonUI/inspect',
+        'platform/commonUI/mobile',
+        'platform/commonUI/themes/espresso',
+        'platform/commonUI/notification',
+        'platform/containment',
+        'platform/execution',
+        'platform/exporters',
+        'platform/telemetry',
+        'platform/features/clock',
+        'platform/features/imagery',
+        'platform/features/layout',
+        'platform/features/pages',
+        'platform/features/plot',
+        'platform/features/timeline',
+        'platform/features/table',
+        'platform/forms',
+        'platform/identity',
+        'platform/persistence/aggregator',
+        'platform/persistence/local',
+        'platform/persistence/queue',
+        'platform/policy',
+        'platform/entanglement',
+        'platform/search',
+        'platform/status',
+        'platform/commonUI/regions'
+    ];
+
+    DEFAULTS.forEach(function (bundlePath) {
+        legacyRegistry.enable(bundlePath);
+    });
+
+    return legacyRegistry;
+});

src/end.frag

@@ -0,0 +1,3 @@
+
+   return require('main'); 
+}));

src/start.frag

@@ -0,0 +1,9 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], factory);
+    } else if (typeof exports === 'object') {
+        module.exports = factory();
+    } else {
+        root.MCT = factory();
+    }
+}(this, function() {

test-main.js

@@ -55,7 +55,8 @@ requirejs.config({
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",
         "uuid": "bower_components/node-uuid/uuid",
-        "zepto": "bower_components/zepto/zepto.min"
+        "zepto": "bower_components/zepto/zepto.min",
+        "lodash": "bower_components/lodash/lodash"
     },
 
     "shim": {
@@ -76,6 +77,9 @@ requirejs.config({
         },
         "zepto": {
             "exports": "Zepto"
+        },
+        "lodash": {
+            "exports": "lodash"
         }
     },
 

tutorials/grootprovider/groots.js

@@ -1,44 +0,0 @@
-define(function () {
-    return function grootPlugin(mct) {
-        var ROOT_KEY = {
-            namespace: 'groot',
-            identifier: 'groot'
-        };
-
-        var GROOT_ROOT = {
-            name: 'I am groot',
-            type: 'folder',
-            composition: [
-                {
-                    namespace: 'groot',
-                    identifier: 'arms'
-                },
-                {
-                    namespace: 'groot',
-                    identifier: 'legs'
-                },
-                {
-                    namespace: 'groot',
-                    identifier: 'torso'
-                }
-            ]
-        };
-
-        var GrootProvider = {
-            get: function (key) {
-                if (key.identifier === 'groot') {
-                    return Promise.resolve(GROOT_ROOT);
-                }
-                return Promise.resolve({
-                    name: 'Groot\'s ' + key.identifier
-                });
-            }
-        };
-
-        mct.Objects.addRoot(ROOT_KEY);
-
-        mct.Objects.addProvider('groot', GrootProvider);
-
-        return mct;
-    };
-});

tutorials/todo/todo.html

@@ -1,14 +1,14 @@
 <div class="example-todo">
     <div class="example-button-group">
-        <a class="example-todo-button-all">All</a>
-        <a class="example-todo-button-incomplete">Incomplete</a>
-        <a class="example-todo-button-complete">Complete</a>
+        <a class="example-todo-button" data-filter="all">All</a>
+        <a class="example-todo-button" data-filter="incomplete">Incomplete</a>
+        <a class="example-todo-button" data-filter="complete">Complete</a>
     </div>
 
     <ul class="example-todo-task-list">
     </ul>
 
-    <div class="example-message">
+    <div class="example-no-tasks">
         There are no tasks to show.
     </div>
 </div>

tutorials/todo/todo.js

@@ -3,8 +3,9 @@ define([
     "text!./todo-task.html",
     "text!./todo-toolbar.html",
     "text!./todo-dialog.html",
+    "../../src/api/objects/object-utils",
     "zepto"
-], function (todoTemplate, taskTemplate, toolbarTemplate, dialogTemplate, $) {
+], function (todoTemplate, taskTemplate, toolbarTemplate, dialogTemplate, utils, $) {
     /**
      * @param {mct.MCT} mct
      */
@@ -24,54 +25,97 @@ define([
         });
 
         function TodoView(domainObject) {
-            this.domainObject = domainObject;
+            this.tasks = domainObject.tasks;
             this.filterValue = "all";
+
+            this.setTaskStatus = this.setTaskStatus.bind(this);
+            this.selectTask = this.selectTask.bind(this);
+
+<<<<<<< HEAD
+            this.mutableObject = mct.Objects.getMutable(domainObject);
+            this.mutableObject.on('tasks', this.updateTasks.bind(this));
+=======
+            //If anything on object changes, re-render view
+            this.mutableObject.on("*", this.objectChanged);
+        };
+
+        TodoView.prototype.show = function (container) {
+            var self = this;
+            this.destroy();
+
+            self.$els = $(todoTemplate);
+            self.$buttons = {
+                all: self.$els.find('.example-todo-button-all'),
+                incomplete: self.$els.find('.example-todo-button-incomplete'),
+                complete: self.$els.find('.example-todo-button-complete')
+            };
+
+            $(container).empty().append(self.$els);
+>>>>>>> origin/api-tutorials
+
+            this.$el = $(todoTemplate);
+            this.$emptyMessage = this.$el.find('.example-no-tasks');
+            this.$taskList = this.$el.find('.example-todo-task-list');
+            this.$el.on('click', '[data-filter]', this.updateFilter.bind(this));
+            this.$el.on('change', 'li', this.setTaskStatus.bind(this));
+            this.$el.on('click', '.example-task-description', this.selectTask.bind(this));
+
+<<<<<<< HEAD
+            this.updateSelection = this.updateSelection.bind(this);
+            mct.selection.on('change', this.updateSelection);
         }
 
         TodoView.prototype.show = function (container) {
-            this.destroy();
-
-            this.$els = $(todoTemplate);
-            this.$buttons = {
-                all: this.$els.find('.example-todo-button-all'),
-                incomplete: this.$els.find('.example-todo-button-incomplete'),
-                complete: this.$els.find('.example-todo-button-complete')
-            };
-
-            $(container).empty().append(this.$els);
-
-            this.initialize();
+            $(container).empty().append(this.$el);
             this.render();
+=======
+            self.initialize();
+            self.objectChanged(this.domainObject);
 
-            mct.verbs.observe(this.domainObject, this.render.bind(this));
+            mct.selection.on('change', self.render);
+>>>>>>> origin/api-tutorials
         };
 
         TodoView.prototype.destroy = function () {
-            if (this.unlisten) {
-                this.unlisten();
-                this.unlisten = undefined;
-            }
+            this.mutableObject.stopListening();
+            mct.selection.off('change', this.updateSelection);
         };
 
-        TodoView.prototype.setFilter = function (value) {
-            this.filterValue = value;
+        TodoView.prototype.updateSelection = function (selection) {
+            if (selection && selection.length) {
+                this.selection = selection[0].index;
+            } else {
+                this.selection = -1;
+            }
             this.render();
         };
 
-        TodoView.prototype.initialize = function () {
-            Object.keys(this.$buttons).forEach(function (k) {
-                this.$buttons[k].on('click', this.setFilter.bind(this, k));
-            }, this);
+        TodoView.prototype.updateTasks = function (tasks) {
+            this.tasks = tasks;
+            this.render();
         };
 
-        TodoView.prototype.render = function () {
-            var $els = this.$els;
-            var domainObject = this.domainObject;
-            var tasks = domainObject.getModel().tasks;
-            var $message = $els.find('.example-message');
-            var $list = $els.find('.example-todo-task-list');
-            var $buttons = this.$buttons;
-            var filters = {
+        TodoView.prototype.updateFilter = function (e) {
+            this.filterValue = $(e.target).data('filter');
+            this.render();
+        };
+
+        TodoView.prototype.setTaskStatus = function (e) {
+            var $checkbox = $(e.target);
+            var taskIndex = $checkbox.data('taskIndex');
+            var completed = !!$checkbox.prop('checked');
+            this.tasks[taskIndex].completed = completed;
+            this.mutableObject.set('tasks[' + taskIndex + '].checked', completed);
+        };
+
+        TodoView.prototype.selectTask = function (e) {
+            var taskIndex = $(e.target).data('taskIndex');
+            mct.selection.clear();
+            mct.selection.select({index: taskIndex});
+        };
+
+        TodoView.prototype.getFilteredTasks = function () {
+            return this.tasks.filter({
                 all: function () {
                     return true;
                 },
@@ -81,48 +125,88 @@ define([
                 complete: function (task) {
                     return task.completed;
                 }
-            };
-            var filterValue = this.filterValue;
-
-            Object.keys($buttons).forEach(function (k) {
-                $buttons[k].toggleClass('selected', filterValue === k);
-            });
-            tasks = tasks.filter(filters[filterValue]);
-
-            $list.empty();
-            tasks.forEach(function (task, index) {
-                var $taskEls = $(taskTemplate);
-                var $checkbox = $taskEls.find('.example-task-checked');
-                $checkbox.prop('checked', task.completed);
-                $taskEls.find('.example-task-description')
-                    .text(task.description);
-
-                $checkbox.on('change', function () {
-                    var checked = !!$checkbox.prop('checked');
-                    mct.verbs.mutate(domainObject, function (model) {
-                        model.tasks[index].completed = checked;
-                    });
-                });
-
-                $list.append($taskEls);
-            });
-
-            $message.toggle(tasks.length < 1);
+            }[this.filterValue]);
         };
 
+        TodoView.prototype.render = function () {
+            var filteredTasks = this.getFilteredTasks();
+            this.$emptyMessage.toggle(filteredTasks.length === 0);
+            this.$taskList.empty();
+            filteredTasks
+                .forEach(function (task) {
+                    var $taskEl = $(taskTemplate),
+                        taskIndex = this.tasks.indexOf(task);
+                    $taskEl.find('.example-task-checked')
+                        .prop('checked', task.completed)
+                        .attr('data-task-index', taskIndex);
+                    $taskEl.find('.example-task-description')
+                        .text(task.description)
+                        .toggleClass('selected', taskIndex === this.selection)
+                        .attr('data-task-index', taskIndex);
 
+                    this.$taskList.append($taskEl);
+                }, this);
+        };
 
         function TodoToolbarView(domainObject) {
-            this.domainObject = domainObject;
+            this.tasks = domainObject.tasks;
+            this.mutableObject = mct.Objects.getMutable(domainObject);
+
+            this.handleSelectionChange = this.handleSelectionChange.bind(this);
+
+            this.mutableObject.on('tasks', this.updateTasks.bind(this));
+            mct.selection.on('change', this.handleSelectionChange);
+            this.$el = $(toolbarTemplate);
+            this.$remove = this.$el.find('.example-remove');
+            this.$el.on('click', '.example-add', this.addTask.bind(this));
+            this.$el.on('click', '.example-remove', this.removeTask.bind(this));
         }
 
+        TodoToolbarView.prototype.updateTasks = function (tasks) {
+            this.tasks = tasks;
+        };
+
+        TodoToolbarView.prototype.addTask = function () {
+            var $dialog = $(dialogTemplate),
+                view = {
+                    show: function (container) {
+                        $(container).append($dialog);
+                    },
+                    destroy: function () {}
+                };
+
+            mct.dialog(view, "Add a Task").then(function () {
+                var description = $dialog.find('input').val();
+                this.tasks.push({description: description});
+                this.mutableObject.set('tasks', this.tasks);
+            }.bind(this));
+        };
+
+        TodoToolbarView.prototype.removeTask = function () {
+            if (this.selection >= 0) {
+                this.tasks.splice(this.selection, 1);
+                this.mutableObject.set('tasks', this.tasks);
+                mct.selection.clear();
+                this.render();
+            }
+        };
+
         TodoToolbarView.prototype.show = function (container) {
-            var $els = $(toolbarTemplate);
+            var self = this;
+            this.destroy();
+            this.$els = $(toolbarTemplate);
+            this.render();
+            $(container).append(this.$els);
+        };
+
+        TodoToolbarView.prototype.render = function () {
+            var self = this;
+            var $els = this.$els;
+
+            self.mutableObject = mct.Objects.getMutable(this.domainObject);
+
             var $add = $els.find('a.example-add');
             var $remove = $els.find('a.example-remove');
-            var domainObject = this.domainObject;
-
-            $(container).append($els);
 
             $add.on('click', function () {
                 var $dialog = $(dialogTemplate),
@@ -133,27 +217,55 @@ define([
                         destroy: function () {}
                     };
 
-                mct.dialog(view, "Add a Task").then(function () {
+                new mct.Dialog(view, "Add a Task").show().then(function () {
                     var description = $dialog.find('input').val();
-                    mct.verbs.mutate(domainObject, function (model) {
-                        model.tasks.push({ description: description });
-                        console.log(model);
-                    });
+                    var tasks = self.mutableObject.get('tasks');
+                    tasks.push({ description: description });
+                    self.mutableObject.set('tasks', tasks);
                 });
             });
-            $remove.on('click', window.alert.bind(window, "Remove!"));
+            $remove.on('click', function () {
+                var index = mct.selection.selected()[0].index;
+                if (index !== undefined) {
+                    var tasks = self.mutableObject.get('tasks').filter(function (t, i) {
+                        return i !== index;
+                    });
+                    self.mutableObject.set("tasks", tasks);
+                    self.mutableObject.set("selected", undefined);
+                    mct.selection.clear();
+                }
+            });
+            self.$remove = $remove;
+            self.handleSelectionChange();
+            mct.selection.on('change', self.handleSelectionChange);
+        };
+
+        TodoToolbarView.prototype.handleSelectionChange = function () {
+            var selected = mct.selection.selected();
+            if (this.$remove) {
+                this.$remove.toggle(selected.length > 0);
+            }
+            this.render();
         };
 
         TodoToolbarView.prototype.destroy = function () {
-
+            mct.selection.off('change', this.handleSelectionChange);
+            this.mutableObject.stopListening();
         };
 
         mct.type('example.todo', todoType);
-        mct.view(mct.regions.main, function (domainObject) {
-            return todoType.check(domainObject) && new TodoView(domainObject);
+        mct.view(mct.regions.main, {
+            view: function (domainObject) {
+                return new TodoView(domainObject);
+            },
+            canView: todoType.check.bind(todoType)
         });
-        mct.view(mct.regions.toolbar, function (domainObject) {
-            return todoType.check(domainObject) && new TodoToolbarView(domainObject);
+
+        mct.view(mct.regions.toolbar, {
+            view: function (domainObject) {
+                return new TodoToolbarView(domainObject);
+            },
+            canView: todoType.check.bind(todoType)
         });
 
         return mct;