ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-30 08:04:03 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Merge pull request #1142 from BogdanAlexandru/tutorial-formatting-fix

Browse Source 
[Documentation] Fix code formatting
This commit is contained in:
Victor Woeltjen 2016-08-24 16:04:44 -07:00 committed by GitHub
commit b165322ba3
1 changed files with 181 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

351
docs/src/tutorials/index.md
View File

@ -130,7 +130,6 @@ to this plugin as tutorials/todo as well.) We will start with an "empty bundle",
one which exposes no extensions - which looks like: one which exposes no extensions - which looks like:
```diff ```diff
define([ define([
'legacyRegistry' 'legacyRegistry'
], function ( ], function (
@ -144,7 +143,6 @@ define([
} }
}); });
}); });
``` ```
__tutorials/todo/bundle.js__ __tutorials/todo/bundle.js__
@ -348,7 +346,8 @@ deeper explanation of domain objects, see the Open MCT Developer Guide.)
In the case of our to-do list feature, the to-do list itself is the thing we'll In the case of our to-do list feature, the to-do list itself is the thing we'll
want users to be able to create and edit. So, we will add that as a new type in want users to be able to create and edit. So, we will add that as a new type in
our bundle definition: our bundle definition:
```diff
```diff
define([ define([
'legacyRegistry' 'legacyRegistry'
], function ( ], function (
@ -370,7 +369,6 @@ define([
+ ]} + ]}
}); });
}); });
``` ```
__tutorials/todo/bundle.js__ __tutorials/todo/bundle.js__
@ -427,7 +425,6 @@ are stored by convention.)
</li> </li>
</ul> </ul>
``` ```
__tutorials/todo/res/templates/todo.html__ __tutorials/todo/res/templates/todo.html__
A summary of what's included: A summary of what's included:
@ -573,6 +570,7 @@ We will define that in an AMD module (see http://requirejs.org/docs/whyamd.html)
in the directory `tutorials/todo/src/controllers` (`src` is, by default, the in the directory `tutorials/todo/src/controllers` (`src` is, by default, the
directory where bundle-related source code is kept, and controllers is where directory where bundle-related source code is kept, and controllers is where
Angular controllers are stored by convention.) Angular controllers are stored by convention.)
```diff ```diff
define(function () { define(function () {
function TodoController($scope) { function TodoController($scope) {
@ -971,6 +969,7 @@ by the tool bar we've defined.
Additionally, we need to make changes to our template to select specific tasks Additionally, we need to make changes to our template to select specific tasks
in response to some user gesture. Here, we will select tasks when a user clicks in response to some user gesture. Here, we will select tasks when a user clicks
the description. the description.
```diff ```diff
<div ng-controller="TodoController"> <div ng-controller="TodoController">
<div> <div>
@ -996,6 +995,7 @@ __tutorials/todo/res/templates/todo.html__
Finally, the `TodoController` uses the `dialogService` now, so we need to Finally, the `TodoController` uses the `dialogService` now, so we need to
declare that dependency in its extension definition: declare that dependency in its extension definition:
```diff ```diff
define([ define([
'legacyRegistry', 'legacyRegistry',
@ -1248,7 +1248,6 @@ another file to the res directory of our bundle; this time, it is `css/todo.css`
font-style: italic; font-style: italic;
} }
``` ```
__tutorials/todo/res/css/todo.css__ __tutorials/todo/res/css/todo.css__
Here, we have defined classes and appearances for: Here, we have defined classes and appearances for:
@ -1261,6 +1260,7 @@ Here, we have defined classes and appearances for:
To include this CSS file in our running instance of Open MCT, we need to To include this CSS file in our running instance of Open MCT, we need to
declare it in our bundle definition, this time as an extension of category declare it in our bundle definition, this time as an extension of category
`stylesheets`: `stylesheets`:
```diff ```diff
define([ define([
'legacyRegistry', 'legacyRegistry',
@ -1430,7 +1430,6 @@ define([
}); });
}); });
``` ```
__tutorials/bargraph/bundle.js__ __tutorials/bargraph/bundle.js__
The view definition should look familiar after the To-Do List tutorial, with The view definition should look familiar after the To-Do List tutorial, with
@ -1499,6 +1498,7 @@ The third is for labels along the horizontal axis, which will indicate which
bar corresponds to which telemetry point. Inline `style` attributes are used bar corresponds to which telemetry point. Inline `style` attributes are used
wherever dynamic positioning (handled by a script) is anticipated. wherever dynamic positioning (handled by a script) is anticipated.
The corresponding CSS file which styles and positions these elements: The corresponding CSS file which styles and positions these elements:
```diff ```diff
.example-bargraph { .example-bargraph {
position: absolute; position: absolute;
@ -1596,6 +1596,7 @@ actual telemetry data in subsequent steps.)
Notably, we will not try to show telemetry data after this step. Notably, we will not try to show telemetry data after this step.
To support this, we will add a new controller which supports our Bar Graph view: To support this, we will add a new controller which supports our Bar Graph view:
```diff ```diff
define(function () { define(function () {
function BarGraphController($scope, telemetryHandler) { function BarGraphController($scope, telemetryHandler) {
@ -1647,6 +1648,7 @@ Whenever the telemetry handler invokes its callbacks, we update the set of
telemetry objects in view, as well as the width for each bar. telemetry objects in view, as well as the width for each bar.
We will also utilize this from our template: We will also utilize this from our template:
```diff ```diff
+ <div class="example-bargraph" ng-controller="BarGraphController"> + <div class="example-bargraph" ng-controller="BarGraphController">
<div class="example-tick-labels"> <div class="example-tick-labels">
@ -2346,6 +2348,7 @@ add a top-level object which will serve as a container; in the next step, we
will populate this with the contents of the telemetry dictionary (which we will populate this with the contents of the telemetry dictionary (which we
will retrieve from the server.) will retrieve from the server.)
```diff
define([ define([
'legacyRegistry' 'legacyRegistry'
], function ( ], function (
@ -2375,6 +2378,7 @@ define([
} }
}); });
}); });
```
__tutorials/telemetry/bundle.js__ __tutorials/telemetry/bundle.js__
Here, we've created our initial telemetry plugin. This exposes a new domain Here, we've created our initial telemetry plugin. This exposes a new domain
@ -2469,7 +2473,6 @@ define([
}; };
}); });
``` ```
__main.js__ __main.js__
...we will be able to reload Open MCT and see that it is present: ...we will be able to reload Open MCT and see that it is present:
@ -2486,43 +2489,45 @@ server. Our first step will be to add a service that will handle interactions
with the server; this will not be used by Open MCT directly, but will be with the server; this will not be used by Open MCT directly, but will be
used by subsequent components we add. used by subsequent components we add.
/*global define,WebSocket*/ ```diff
/*global define,WebSocket*/
define(
[], define(
function () { [],
"use strict"; function () {
"use strict";
function ExampleTelemetryServerAdapter($q, wsUrl) {
var ws = new WebSocket(wsUrl), function ExampleTelemetryServerAdapter($q, wsUrl) {
dictionary = $q.defer(); var ws = new WebSocket(wsUrl),
dictionary = $q.defer();
// Handle an incoming message from the server
ws.onmessage = function (event) { // Handle an incoming message from the server
var message = JSON.parse(event.data); ws.onmessage = function (event) {
var message = JSON.parse(event.data);
switch (message.type) {
case "dictionary": switch (message.type) {
dictionary.resolve(message.value); case "dictionary":
break; dictionary.resolve(message.value);
} break;
}; }
};
// Request dictionary once connection is established
ws.onopen = function () { // Request dictionary once connection is established
ws.send("dictionary"); ws.onopen = function () {
}; ws.send("dictionary");
};
return {
dictionary: function () { return {
return dictionary.promise; dictionary: function () {
} return dictionary.promise;
}; }
} };
return ExampleTelemetryServerAdapter;
} }
);
return ExampleTelemetryServerAdapter;
}
);
```
__tutorials/telemetry/src/ExampleTelemetryServerAdapter.js__ __tutorials/telemetry/src/ExampleTelemetryServerAdapter.js__
When created, this service initiates a connection to the server, and begins When created, this service initiates a connection to the server, and begins
@ -2539,86 +2544,88 @@ subsystems. This means that we need to convert the data from the dictionary
into domain object models, and expose these to Open MCT via a into domain object models, and expose these to Open MCT via a
`modelService`. `modelService`.
/*global define*/ ```diff
/*global define*/
define(
function () { define(
"use strict"; function () {
"use strict";
var PREFIX = "example_tlm:",
FORMAT_MAPPINGS = { var PREFIX = "example_tlm:",
float: "number", FORMAT_MAPPINGS = {
integer: "number", float: "number",
string: "string" integer: "number",
}; string: "string"
};
function ExampleTelemetryModelProvider(adapter, $q) {
var modelPromise, empty = $q.when({}); function ExampleTelemetryModelProvider(adapter, $q) {
var modelPromise, empty = $q.when({});
// Check if this model is in our dictionary (by prefix)
function isRelevant(id) { // Check if this model is in our dictionary (by prefix)
return id.indexOf(PREFIX) === 0; function isRelevant(id) {
} return id.indexOf(PREFIX) === 0;
// Build a domain object identifier by adding a prefix
function makeId(element) {
return PREFIX + element.identifier;
}
// Create domain object models from this dictionary
function buildTaxonomy(dictionary) {
var models = {};
// Create & store a domain object model for a measurement
function addMeasurement(measurement) {
var format = FORMAT_MAPPINGS[measurement.type];
models[makeId(measurement)] = {
type: "example.measurement",
name: measurement.name,
telemetry: {
key: measurement.identifier,
ranges: [{
key: "value",
name: "Value",
units: measurement.units,
format: format
}]
}
};
}
// Create & store a domain object model for a subsystem
function addSubsystem(subsystem) {
var measurements =
(subsystem.measurements || []);
models[makeId(subsystem)] = {
type: "example.subsystem",
name: subsystem.name,
composition: measurements.map(makeId)
};
measurements.forEach(addMeasurement);
}
(dictionary.subsystems || []).forEach(addSubsystem);
return models;
}
// Begin generating models once the dictionary is available
modelPromise = adapter.dictionary().then(buildTaxonomy);
return {
getModels: function (ids) {
// Return models for the dictionary only when they
// are relevant to the request.
return ids.some(isRelevant) ? modelPromise : empty;
}
};
} }
return ExampleTelemetryModelProvider; // Build a domain object identifier by adding a prefix
function makeId(element) {
return PREFIX + element.identifier;
}
// Create domain object models from this dictionary
function buildTaxonomy(dictionary) {
var models = {};
// Create & store a domain object model for a measurement
function addMeasurement(measurement) {
var format = FORMAT_MAPPINGS[measurement.type];
models[makeId(measurement)] = {
type: "example.measurement",
name: measurement.name,
telemetry: {
key: measurement.identifier,
ranges: [{
key: "value",
name: "Value",
units: measurement.units,
format: format
}]
}
};
}
// Create & store a domain object model for a subsystem
function addSubsystem(subsystem) {
var measurements =
(subsystem.measurements || []);
models[makeId(subsystem)] = {
type: "example.subsystem",
name: subsystem.name,
composition: measurements.map(makeId)
};
measurements.forEach(addMeasurement);
}
(dictionary.subsystems || []).forEach(addSubsystem);
return models;
}
// Begin generating models once the dictionary is available
modelPromise = adapter.dictionary().then(buildTaxonomy);
return {
getModels: function (ids) {
// Return models for the dictionary only when they
// are relevant to the request.
return ids.some(isRelevant) ? modelPromise : empty;
}
};
} }
);
return ExampleTelemetryModelProvider;
}
);
```
__tutorials/telemetry/src/ExampleTelemetryModelProvider.js__ __tutorials/telemetry/src/ExampleTelemetryModelProvider.js__
This script implements a `provider` for `modelService`; the `modelService` is a This script implements a `provider` for `modelService`; the `modelService` is a
@ -2671,55 +2678,57 @@ This allows our telemetry dictionary to be expressed as domain object models
fix this, we will need another script which will add these subsystems to the fix this, we will need another script which will add these subsystems to the
root-level object we added in Step 1. root-level object we added in Step 1.
/*global define*/ ```diff
/*global define*/
define(
function () { define(
"use strict"; function () {
"use strict";
var TAXONOMY_ID = "example:sc",
PREFIX = "example_tlm:"; var TAXONOMY_ID = "example:sc",
PREFIX = "example_tlm:";
function ExampleTelemetryInitializer(adapter, objectService) {
// Generate a domain object identifier for a dictionary element function ExampleTelemetryInitializer(adapter, objectService) {
function makeId(element) { // Generate a domain object identifier for a dictionary element
return PREFIX + element.identifier; function makeId(element) {
} return PREFIX + element.identifier;
// When the dictionary is available, add all subsystems
// to the composition of My Spacecraft
function initializeTaxonomy(dictionary) {
// Get the top-level container for dictionary objects
// from a group of domain objects.
function getTaxonomyObject(domainObjects) {
return domainObjects[TAXONOMY_ID];
}
// Populate
function populateModel(taxonomyObject) {
return taxonomyObject.useCapability(
"mutation",
function (model) {
model.name =
dictionary.name;
model.composition =
dictionary.subsystems.map(makeId);
}
);
}
// Look up My Spacecraft, and populate it accordingly.
objectService.getObjects([TAXONOMY_ID])
.then(getTaxonomyObject)
.then(populateModel);
}
adapter.dictionary().then(initializeTaxonomy);
} }
return ExampleTelemetryInitializer; // When the dictionary is available, add all subsystems
// to the composition of My Spacecraft
function initializeTaxonomy(dictionary) {
// Get the top-level container for dictionary objects
// from a group of domain objects.
function getTaxonomyObject(domainObjects) {
return domainObjects[TAXONOMY_ID];
}
// Populate
function populateModel(taxonomyObject) {
return taxonomyObject.useCapability(
"mutation",
function (model) {
model.name =
dictionary.name;
model.composition =
dictionary.subsystems.map(makeId);
}
);
}
// Look up My Spacecraft, and populate it accordingly.
objectService.getObjects([TAXONOMY_ID])
.then(getTaxonomyObject)
.then(populateModel);
}
adapter.dictionary().then(initializeTaxonomy);
} }
);
return ExampleTelemetryInitializer;
}
);
```
__tutorials/telemetry/src/ExampleTelemetryInitializer.js__ __tutorials/telemetry/src/ExampleTelemetryInitializer.js__
At the conclusion of Step 1, the top-level My Spacecraft object was empty. This At the conclusion of Step 1, the top-level My Spacecraft object was empty. This
@ -2934,6 +2943,7 @@ identifier, the pending promise is resolved.
This `history` method will be used by a `telemetryService` provider which we This `history` method will be used by a `telemetryService` provider which we
will implement: will implement:
```diff ```diff
/*global define*/ /*global define*/
@ -3019,6 +3029,7 @@ Finally, note that we also have a `subscribe` method, to satisfy the interface o
`telemetryService`, but this `subscribe` method currently does nothing. `telemetryService`, but this `subscribe` method currently does nothing.
This script uses an `ExampleTelemetrySeries` class, which looks like: This script uses an `ExampleTelemetrySeries` class, which looks like:
```diff ```diff
/*global define*/ /*global define*/
@ -3050,6 +3061,7 @@ This takes the array of telemetry values (as returned by the server) and wraps
it with the interface expected by the platform (the methods shown.) it with the interface expected by the platform (the methods shown.)
Finally, we expose this `telemetryService` provider declaratively: Finally, we expose this `telemetryService` provider declaratively:
```diff ```diff
define([ define([
'legacyRegistry', 'legacyRegistry',
@ -3316,7 +3328,6 @@ define(
} }
); );
``` ```
__tutorials/telemetry/src/ExampleTelemetryProvider.js__ __tutorials/telemetry/src/ExampleTelemetryProvider.js__
A quick summary of these changes: A quick summary of these changes: