mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 21:27:52 +00:00
[API] Remove examples
...as these do not necessarily reflect API updates
This commit is contained in:
Victor Woeltjen
parent
09c73ef5f8
commit
aed01d3a23
@ -1,65 +0,0 @@
|
||||
<!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>
|
||||
@ -1,144 +0,0 @@
|
||||
<!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>
|
||||
160
custom-view.html
160
custom-view.html
@ -1,160 +0,0 @@
|
||||
<!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>
|
||||
@ -1,64 +0,0 @@
|
||||
<!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>
|
||||
@ -1,50 +0,0 @@
|
||||
<!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>
|
||||
Loading…
Reference in New Issue
Block a user