tutorials modified

AdobeXD · Mar 4, 2019 · c64eebb · c64eebb
1 parent 7e4c73c
commit c64eebb
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 354 deletions.
diff --git a/tutorials/how-to-ask-user-for-confirmation/index.md b/tutorials/how-to-ask-user-for-confirmation/index.md
@@ -15,7 +15,25 @@ There are many times when a plugin will need to ask the user whether or not it s
 > **Info**
 > Complete code for this plugin can be found [on GitHub](https://github.com/AdobeXD/Plugin-Samples/tree/master/ui-dialog-variations).
 
-### 1. Add the "plugin helpers" library
+### 1. Prepare your manifest.json file
+
+First, edit the manifest file for the plugin you created in our [Quick Start Tutorial](/tutorials/quick-start).
+
+Replace the `uiEntryPoints` field of the manifest with the following:
+
+```json
+"uiEntryPoints": [
+    {
+        "type": "menu",
+        "label": "Confirmation",
+        "commandId": "showConfirm"
+    }
+]
+```
+
+If you're curious about what each entry means, [see the manifest documentation](/reference/structure/manifest.md), where you can also learn about all manifest requirements for a plugin to be published in the XD Plugin Manager.
+
+### 2. Add the "plugin helpers" library
 
 Creating dialogs can take a lot of boilerplate code, but we've created a small library that makes it simple to display simple dialogs in the form of a "helper" library. This library is located at https://github.com/AdobeXD/plugin-toolkit.
 
@@ -25,7 +43,7 @@ To add the library to your project, you can:
 * Uncompress the zip file after the download completes
 * Copy the `lib` folder to your plugin project
 
-### 2. Require the `dialogs` module in `main.js`
+### 3. Require the `dialogs` module in `main.js`
 
 Add the following to your `main.js`:
 
@@ -35,7 +53,7 @@ const { confirm } = require("./lib/dialogs.js");
 
 This will import a `confirm` function that we can call to display a confirmation dialog.
 
-### 3. Create a function to display the confirmation
+### 4. Create a function to display the confirmation
 
 ```js
 async function showConfirm() {
@@ -88,40 +106,7 @@ module.exports = {
 }
 ```
 
-Be sure to add this to your plugin `manifest.json` as well:
-
-```json
-{
-    "id": "ID_FROM_IO_CONSOLE",
-    "name": "Show Confirmation",
-    "host": {
-        "app": "XD",
-        "minVersion": "13.0"
-    },
-    "version": "1.0.0",
-    "description": "Description of your plugin.",
-    "summary": "Summary of your plugin",
-    "languages": [
-        "en"
-    ],
-    "author": "Your Name",
-    "helpUrl": "https://mywebsite.com/help",
-    "icons": [
-        { "width": 48, "height": 48, "path": "images/icon01x.png" },
-        { "width": 96, "height": 96, "path": "images/icon02x.png" },
-        { "width": 144, "height": 144, "path": "images/icon03x.png" },
-        { "width": 192, "height": 192, "path": "images/icon04x.png" }
-    ],
-    "uiEntryPoints": [
-        {
-            "type": "menu",
-			"label": "Confirmation",
-			"commandId": "showConfirm"
-		}
-    ]
-}
-```
-Refer to the full documentation of [manifest.json file](/reference/structure/manifest.md#top-level-metadata) to learn more.
+Make sure to your commands match the manifest's `commandId`s written in the first step.
 
 ## Next Steps
 

diff --git a/tutorials/how-to-create-paths/index.md b/tutorials/how-to-create-paths/index.md
@@ -18,59 +18,32 @@ This sample demonstrates how to create path objects in XD.  The path objects are
 
 First, edit the manifest file for the plugin you created in our [Quick Start Tutorial](/tutorials/quick-start).
 
-Replace the following items in your manifest with the information below:
-
-1. `id`
-1. `name`
-1. `uiEntryPoints[0].label`
-1. `uiEntryPoints[0].commandId`
+Replace the `uiEntryPoints` field of the manifest with the following:
 
 ```json
-{
-    "id": "ID_FROM_IO_CONSOLE",
-    "name": "Create Pie Chart sample plugin",
-    "host": {
-        "app": "XD",
-        "minVersion": "13.0"
-    },
-    "version": "1.0.0",
-    "description": "Description of your plugin.",
-    "summary": "Summary of your plugin",
-    "languages": [
-        "en"
-    ],
-    "author": "Your Name",
-    "helpUrl": "https://mywebsite.com/help",
-    "icons": [
-        { "width": 48, "height": 48, "path": "images/icon01x.png" },
-        { "width": 96, "height": 96, "path": "images/icon02x.png" },
-        { "width": 144, "height": 144, "path": "images/icon03x.png" },
-        { "width": 192, "height": 192, "path": "images/icon04x.png" }
-    ],
-    "uiEntryPoints": [
-        {
-            "type": "menu",
-            "label": "Create Pie Chart",
-            "commandId": "createPieChartCommand"
-        }
-    ]
-}
+"uiEntryPoints": [
+    {
+        "type": "menu",
+        "label": "Create Pie Chart",
+        "commandId": "createPieChartCommand"
+    }
+]
 ```
 
-Refer to the full documentation of [manifest.json file](/reference/structure/manifest.md#top-level-metadata) to learn more.
+If you're curious about what each entry means, [see the manifest documentation](/reference/structure/manifest.md), where you can also learn about all manifest requirements for a plugin to be published in the XD Plugin Manager.
 
 Then, update your `main.js` file, mapping the manifest's `commandId` to a handler function.
 
 Replace the content of your `main.js` file with the following code:
 
 ```js
-function createPieChartHandlerFunction(selection) {
+function createPieChartCommand(selection) {
     // The body of this function is added later
 }
 
 module.exports = {
     commands: {
-        "createPieChartCommand": createPieChartHandlerFunction
+        createPieChartCommand
     }
 };
 ```
@@ -158,7 +131,7 @@ In this step, we'll build out the main function, `createLinesHandlerFunction`, t
 This function creates four wedges:
 
 ```js
-function createPieChartHandlerFunction(selection) {
+function createPieChartCommand(selection) {
     createWedge(selection, 100, 0, 90, "red");
     createWedge(selection, 100, 90, 135, "blue");
     createWedge(selection, 100, 135, 225, "yellow");

diff --git a/tutorials/how-to-draw-lines/index.md b/tutorials/how-to-draw-lines/index.md
@@ -18,59 +18,32 @@ This sample demonstrates how to create a plugin that adds colored lines to the u
 
 First, edit the manifest file for the plugin you created in our [Quick Start Tutorial](/tutorials/quick-start).
 
-Replace the JSON object in your manifest with the one below, noting the changes for the following fields:
-
-1. `id`
-1. `name`
-1. `uiEntryPoints[0].label`
-1. `uiEntryPoints[0].commandId`
+Replace the `uiEntryPoints` field of the manifest with the following:
 
 ```json
-{
-    "id": "ID_FROM_IO_CONSOLE",
-    "name": "Create Lines sample plugin",
-    "host": {
-        "app": "XD",
-        "minVersion": "13.0"
-    },
-    "version": "1.0.0",
-    "description": "Description of your plugin.",
-    "summary": "Summary of your plugin",
-    "languages": [
-        "en"
-    ],
-    "author": "Your Name",
-    "helpUrl": "https://mywebsite.com/help",
-    "icons": [
-        { "width": 48, "height": 48, "path": "images/icon01x.png" },
-        { "width": 96, "height": 96, "path": "images/icon02x.png" },
-        { "width": 144, "height": 144, "path": "images/icon03x.png" },
-        { "width": 192, "height": 192, "path": "images/icon04x.png" }
-    ],
-    "uiEntryPoints": [
-        {
-            "type": "menu",
-            "label": "Create lines",
-            "commandId": "createLinesCommand"
-        }
-    ]
-}
+"uiEntryPoints": [
+    {
+        "type": "menu",
+        "label": "Create lines",
+        "commandId": "createLinesCommand"
+    }
+]
 ```
 
-Refer to the full documentation of [manifest.json file](/reference/structure/manifest.md#top-level-metadata) to learn more.
+If you're curious about what each entry means, [see the manifest documentation](/reference/structure/manifest.md), where you can also learn about all manifest requirements for a plugin to be published in the XD Plugin Manager.
 
 Then, update your `main.js` file, mapping the manifest's `commandId` to a handler function.
 
 Replace the content of your `main.js` file with the following code:
 
 ```js
-function createLinesHandlerFunction(selection) {
+function createLinesCommand(selection) {
     // The body of this function is added later
 }
 
 module.exports = {
     commands: {
-        "createLinesCommand": createLinesHandlerFunction
+        createLinesCommand
     }
 };
 ```
@@ -136,10 +109,10 @@ A couple of things to note:
 
 ### 5. Create the main function
 
-In this step, we'll build out the main function, `createLinesHandlerFunction`, that we added in the first step. Each of the numbered comments are explained below the code:
+In this step, we'll build out the main function, `createLinesCommand`, that we added in the first step. Each of the numbered comments are explained below the code:
 
 ```js
-function createLinesHandlerFunction(selection) {    // [1]
+function createLinesCommand(selection) {    // [1]
 
     let lines = [];                                 // [2]
 

diff --git a/tutorials/how-to-export-a-rendition/index.md b/tutorials/how-to-export-a-rendition/index.md
@@ -16,60 +16,33 @@ This sample describes how an XD plugin can invoke the default folder picker and
 
 First, edit the manifest file for the plugin you created in our [Quick Start Tutorial](/tutorials/quick-start).
 
-Replace the JSON object in your manifest with the one below, noting the changes for the following fields:
-
-1. `id`
-1. `name`
-1. `uiEntryPoints[0].label`
-1. `uiEntryPoints[0].commandId`
+Replace the `uiEntryPoints` field of the manifest with the following:
 
 ```json
-{
-    "id": "ID_FROM_IO_CONSOLE",
-    "name": "Export Rendition Plugin",
-    "host": {
-        "app": "XD",
-        "minVersion": "13.0"
-    },
-    "version": "1.0.0",
-    "description": "Description of your plugin.",
-    "summary": "Summary of your plugin",
-    "languages": [
-        "en"
-    ],
-    "author": "Your Name",
-    "helpUrl": "https://mywebsite.com/help",
-    "icons": [
-        { "width": 48, "height": 48, "path": "images/icon01x.png" },
-        { "width": 96, "height": 96, "path": "images/icon02x.png" },
-        { "width": 144, "height": 144, "path": "images/icon03x.png" },
-        { "width": 192, "height": 192, "path": "images/icon04x.png" }
-    ],
-    "uiEntryPoints": [
-        {
-            "type": "menu",
-            "label": "Export Rendition",
-            "commandId": "exportRendition"
-        }
-    ]
-}
+"uiEntryPoints": [
+    {
+        "type": "menu",
+        "label": "Export Rendition",
+        "commandId": "exportRendition"
+    }
+]
 ```
-Refer to the full documentation of [manifest.json file](/reference/structure/manifest.md#top-level-metadata) to learn more.
+If you're curious about what each entry means, [see the manifest documentation](/reference/structure/manifest.md), where you can also learn about all manifest requirements for a plugin to be published in the XD Plugin Manager.
 
 Then, update your `main.js` file, mapping the manifest's `commandId` to a handler function.
 
 Replace the content of your `main.js` file with the following code:
 
 ```js
-async function exportRenditionHandlerFunction(selection) {
+async function exportRendition(selection) {
     if (selection.items.length > 0) {
         // The body of this function is added later
     }
 }
 
 module.exports = {
     commands: {
-        "exportRendition": exportRenditionHandlerFunction
+        exportRendition
     }
 };
 ```