ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-18 02:39:56 +00:00
Code Issues Actions 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:
```diff
define([
'legacyRegistry'
], function (
@ -144,7 +143,6 @@ define([
}
});
});
```
__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
want users to be able to create and edit. So, we will add that as a new type in
our bundle definition:
```diff
```diff
define([
'legacyRegistry'
], function (
@ -370,7 +369,6 @@ define([
+ ]}
});
});
```
__tutorials/todo/bundle.js__
@ -427,7 +425,6 @@ are stored by convention.)
</li>
</ul>
```
__tutorials/todo/res/templates/todo.html__
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
directory where bundle-related source code is kept, and controllers is where
Angular controllers are stored by convention.)
```diff
define(function () {
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
in response to some user gesture. Here, we will select tasks when a user clicks
the description.
```diff
<div ng-controller="TodoController">
<div>
@ -996,6 +995,7 @@ __tutorials/todo/res/templates/todo.html__
Finally, the `TodoController` uses the `dialogService` now, so we need to
declare that dependency in its extension definition:
```diff
define([
'legacyRegistry',
@ -1248,7 +1248,6 @@ another file to the res directory of our bundle; this time, it is `css/todo.css`
font-style: italic;
}
```
__tutorials/todo/res/css/todo.css__
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
declare it in our bundle definition, this time as an extension of category
`stylesheets`:
```diff
define([
'legacyRegistry',
@ -1430,7 +1430,6 @@ define([
});
});
```
__tutorials/bargraph/bundle.js__
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
wherever dynamic positioning (handled by a script) is anticipated.
The corresponding CSS file which styles and positions these elements:
```diff
.example-bargraph {
position: absolute;
@ -1596,6 +1596,7 @@ actual telemetry data in subsequent steps.)
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:
```diff
define(function () {
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.
We will also utilize this from our template:
```diff
+ <div class="example-bargraph" ng-controller="BarGraphController">
<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 retrieve from the server.)
```diff
define([
'legacyRegistry'
], function (
@ -2375,6 +2378,7 @@ define([
}
});
});
```
__tutorials/telemetry/bundle.js__
Here, we've created our initial telemetry plugin. This exposes a new domain
@ -2469,7 +2473,6 @@ define([
};
});
```
__main.js__
...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
used by subsequent components we add.
/*global define,WebSocket*/
define(
[],
function () {
"use strict";
function ExampleTelemetryServerAdapter($q, wsUrl) {
var ws = new WebSocket(wsUrl),
dictionary = $q.defer();
// Handle an incoming message from the server
ws.onmessage = function (event) {
var message = JSON.parse(event.data);
switch (message.type) {
case "dictionary":
dictionary.resolve(message.value);
break;
}
};
// Request dictionary once connection is established
ws.onopen = function () {
ws.send("dictionary");
};
return {
dictionary: function () {
return dictionary.promise;
}
};
}
return ExampleTelemetryServerAdapter;
```diff
/*global define,WebSocket*/
define(
[],
function () {
"use strict";
function ExampleTelemetryServerAdapter($q, wsUrl) {
var ws = new WebSocket(wsUrl),
dictionary = $q.defer();
// Handle an incoming message from the server
ws.onmessage = function (event) {
var message = JSON.parse(event.data);
switch (message.type) {
case "dictionary":
dictionary.resolve(message.value);
break;
}
};
// Request dictionary once connection is established
ws.onopen = function () {
ws.send("dictionary");
};
return {
dictionary: function () {
return dictionary.promise;
}
};
}
);
return ExampleTelemetryServerAdapter;
}
);
```
__tutorials/telemetry/src/ExampleTelemetryServerAdapter.js__
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
`modelService`.
/*global define*/
define(
function () {
"use strict";
var PREFIX = "example_tlm:",
FORMAT_MAPPINGS = {
float: "number",
integer: "number",
string: "string"
};
function ExampleTelemetryModelProvider(adapter, $q) {
var modelPromise, empty = $q.when({});
// Check if this model is in our dictionary (by prefix)
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;
}
};
```diff
/*global define*/
define(
function () {
"use strict";
var PREFIX = "example_tlm:",
FORMAT_MAPPINGS = {
float: "number",
integer: "number",
string: "string"
};
function ExampleTelemetryModelProvider(adapter, $q) {
var modelPromise, empty = $q.when({});
// Check if this model is in our dictionary (by prefix)
function isRelevant(id) {
return id.indexOf(PREFIX) === 0;
}
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__
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
root-level object we added in Step 1.
/*global define*/
define(
function () {
"use strict";
var TAXONOMY_ID = "example:sc",
PREFIX = "example_tlm:";
function ExampleTelemetryInitializer(adapter, objectService) {
// Generate a domain object identifier for a dictionary element
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);
```diff
/*global define*/
define(
function () {
"use strict";
var TAXONOMY_ID = "example:sc",
PREFIX = "example_tlm:";
function ExampleTelemetryInitializer(adapter, objectService) {
// Generate a domain object identifier for a dictionary element
function makeId(element) {
return PREFIX + element.identifier;
}
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__
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
will implement:
```diff
/*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.
This script uses an `ExampleTelemetrySeries` class, which looks like:
```diff
/*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.)
Finally, we expose this `telemetryService` provider declaratively:
```diff
define([
'legacyRegistry',
@ -3316,7 +3328,6 @@ define(
}
);
```
__tutorials/telemetry/src/ExampleTelemetryProvider.js__
A quick summary of these changes: