diff --git a/examples/framework/preferences/minimalEditor/README.md b/examples/framework/preferences/minimalEditor/README.md new file mode 100644 index 0000000000..2f9e2de7c8 --- /dev/null +++ b/examples/framework/preferences/minimalEditor/README.md @@ -0,0 +1,9 @@ + +## Minimal Preferences Editor ## + +This folder provides an example of a minimal but fully functional preferences editor. It has: +- only one preference +- no enactor +- no localization (Note that this is not best practice!) + +This code is the basis for the Preferences Framework tutorial. diff --git a/examples/framework/preferences/minimalEditor/css/style.css b/examples/framework/preferences/minimalEditor/css/style.css index 89d4fb637a..df604edb02 100644 --- a/examples/framework/preferences/minimalEditor/css/style.css +++ b/examples/framework/preferences/minimalEditor/css/style.css @@ -1,7 +1,7 @@ .me-panel { - padding: 1em; - border: 1px solid black; - width: 50%; + padding: 1em; + border: 1px solid black; + width: 50%; } .me-save { diff --git a/examples/framework/preferences/minimalEditor/html/autoPilot.html b/examples/framework/preferences/minimalEditor/html/autoPilot.html index 9d2ac8bf52..ae37d6c8c2 100644 --- a/examples/framework/preferences/minimalEditor/html/autoPilot.html +++ b/examples/framework/preferences/minimalEditor/html/autoPilot.html @@ -1,7 +1,8 @@
-

header here

+

Auto-Pilot

- - + +
+ diff --git a/examples/framework/preferences/minimalEditor/html/minEditor.html b/examples/framework/preferences/minimalEditor/html/minEditor.html index 177aa06805..19774c0cf1 100644 --- a/examples/framework/preferences/minimalEditor/html/minEditor.html +++ b/examples/framework/preferences/minimalEditor/html/minEditor.html @@ -1,9 +1,8 @@ -

A simple preferences editor

+

Flying Car Setup

+

This preferences editor ...

- - - + diff --git a/examples/framework/preferences/minimalEditor/index.html b/examples/framework/preferences/minimalEditor/index.html index fc9ff254f8..171a061116 100644 --- a/examples/framework/preferences/minimalEditor/index.html +++ b/examples/framework/preferences/minimalEditor/index.html @@ -35,14 +35,12 @@ + +
+ - -
- - + diff --git a/examples/framework/preferences/minimalEditor/js/minEditor.js b/examples/framework/preferences/minimalEditor/js/minEditor.js index daf6a7e347..0af358c6a7 100644 --- a/examples/framework/preferences/minimalEditor/js/minEditor.js +++ b/examples/framework/preferences/minimalEditor/js/minEditor.js @@ -21,13 +21,20 @@ var minEditor = minEditor || {}; * This schema defines the preference(s) edited by this preferences editor: * their names, types, default values, etc. */ - minEditor.primarySchema = { - // the string "minEditor.autoPilot" is the 'name' of the preference - "minEditor.autoPilot": { - type: "boolean", - "default": false + fluid.defaults("minEditor.primarySchema", { + + // the base grade for the schema; + // using this grade tells the framework that this is a primary schema + gradeNames: ["fluid.prefs.schemas"], + + schema: { + // the actual specification of the preference + "minEditor.autoPilot": { + "type": "boolean", + "default": false + } } - }; + }); /** * Panel for the auto-pilot preference @@ -44,22 +51,16 @@ var minEditor = minEditor || {}; } }, - // selectors identify elements in the DOM that need to be accessed by the code + // selectors identify elements in the DOM that need to be accessed by the code; // in this case, the Renderer will render data into these particular elements selectors: { - header: ".mec-autoPilot-header", - label: ".mec-autoPilot-label", autoPilot: ".mec-autoPilot" }, // the ProtoTree is basically instructions to the Renderer // the keys in the prototree match the selectors above protoTree: { - // "messagekey" refers to the keys for strings in the JSON messages file - header: {messagekey: "autoPilotHeader"}, - label: {messagekey: "autoPilotLabel"}, - - // this string 'autoPilot' refers to the last part of the model path in the preferenceMap + // this value is an IoC reference to the last part of the model path in the preferenceMap autoPilot: "${autoPilot}" } }); @@ -69,7 +70,7 @@ var minEditor = minEditor || {}; */ fluid.defaults("minEditor.auxSchema", { - // the basic grade for the schema + // the base grade for the schema gradeNames: ["fluid.prefs.auxSchema"], auxiliarySchema: { @@ -77,19 +78,14 @@ var minEditor = minEditor || {}; // the loaderGrade identifies the "base" form of preference editor desired loaderGrades: ["fluid.prefs.fullNoPreview"], - // these are the root paths used to reference templates - // and message files in this schema + // 'terms' are strings that can be re-used elsewhere in this schema; terms: { - templatePrefix: "html", - messagePrefix: "messages" + templatePrefix: "html" }, // the main template for the preference editor itself template: "%templatePrefix/minEditor.html", - // the message bundle for the preference editor itself - message: "%messagePrefix/prefsEditor.json", - autoPilot: { // this 'type' must match the name of the pref in the primary schema type: "minEditor.autoPilot", @@ -101,10 +97,7 @@ var minEditor = minEditor || {}; container: ".mec-autoPilot", // the template for this panel - template: "%templatePrefix/autoPilot.html", - - // the message bundle for this panel - message: "%messagePrefix/autoPilot.json" + template: "%templatePrefix/autoPilot.html" } } } @@ -116,16 +109,9 @@ var minEditor = minEditor || {}; minEditor.init = function (container) { return fluid.prefs.create(container, { build: { - gradeNames: ["minEditor.auxSchema"], - primarySchema: minEditor.primarySchema + gradeNames: ["minEditor.auxSchema"] } }); }; })(); - - - - - - diff --git a/examples/framework/preferences/minimalEditor/messages/autoPilot.json b/examples/framework/preferences/minimalEditor/messages/autoPilot.json deleted file mode 100644 index eb5dd60834..0000000000 --- a/examples/framework/preferences/minimalEditor/messages/autoPilot.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "autoPilotLabel": "Enable the auto-pilot when the car starts", - "autoPilotHeader": "Auto-pilot" -}