From bc0a542a098ed612638e4f1aa040086703a6d393 Mon Sep 17 00:00:00 2001
From: Hieromon Ikasamo <hieromon@gmail.com>
Date: Wed, 4 Sep 2019 11:11:25 +0900
Subject: [PATCH] Describes additionally about loading custom web pages

---
 mkdocs/acjson.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 99 insertions(+), 1 deletion(-)

diff --git a/mkdocs/acjson.md b/mkdocs/acjson.md
index b59763e..b7373c0 100644
--- a/mkdocs/acjson.md
+++ b/mkdocs/acjson.md
@@ -99,6 +99,8 @@ You can put declarations of multiple custom Web pages in one JSON document. In t
 ]
 ```
 
+The above custom Web page definitions can be loaded in a batch using the [AutoConnect::load](api.md#load) function.
+
 ### <i class="fa fa-caret-right"></i> JSON object for AutoConnectElements
 
 JSON description for AutoConnectElements describes as an array in the *element* with arguments of [each constructor](acelements.md#constructor).
@@ -171,7 +173,7 @@ This is different for each AutoConnectElements, and the key that can be specifie
 : - **option** : Specifies the initial value collection of the drop-down list as an array element.
 
 #### <i class="fa fa-caret-right"></i> ACStyle
-: - **value** : Specifies the cuscom CSS code.
+: - **value** : Specifies the custom CSS code.
 
 #### <i class="fa fa-caret-right"></i> ACSubmit
 : - **value** : Specifies a label of the submit button.
@@ -187,6 +189,102 @@ This is different for each AutoConnectElements, and the key that can be specifie
 
 ## Loading JSON document
 
+### <i class="fa fa-caret-right"></i> Loading to AutoConnect
+
+There are two main ways to load the custom Web pages into AutoConnect.
+
+1. Load directly into AutoConnect
+
+    This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated.
+
+    Using the [AutoCoonnect::load](api.md#load) function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the sketch, the generated AutoConnectAux object can be referenced using the [AutoConnect::aux](api.md#aux) function. You can reach the AutoConnectElements you desired using the [AutoConnectAux::getElement](apiaux.md#getelement) function of its AutoConnectAux.
+
+    In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element.
+
+    ```js
+    [
+      {
+        "title": "page1",
+        "uri": "/page1",
+        "menu": true,
+        "element": [
+          {
+            "name": "input1",
+            "type": "ACInput"
+          }
+        ]
+      },
+      {
+        "title": "page2",
+        "uri": "/page2",
+        "menu": true,
+        "element": [
+          {
+            "name": "input2",
+            "type": "ACInput"
+          }
+        ]
+      }
+    ]
+    ```
+
+    ```cpp hl_lines="3 5 6"
+    AutoConnect portal;
+    File page = SPIFFS.open("/custom_page.json", "r");
+    portal.load(page);
+    page.close();
+    AutoConnectAux* aux = portal.aux("/page1");
+    AutoConnectInput& input1 = aux->getElement<AutoConnectInput>("input1");
+    ```
+
+2. Load to AutoConnectAux and join to AutoConnect
+
+    This way declares AutoConnectAux in the sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the sketch side.
+
+    After loading a JSON document using the [AutoConnectAux::load](apiaux.md#load) function by each, integrate those into AutoConnect using the [AutoConnect::join](api.md#join) function.
+
+    In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load.
+
+    ```js
+    {
+      "title": "page1",
+      "uri": "/page1",
+      "menu": true,
+      "element": [
+        {
+          "name": "input1",
+          "type": "ACInput"
+        }
+      ]
+    }
+    ```
+    ```js
+    {
+      "title": "page2",
+      "uri": "/page2",
+      "menu": true,
+      "element": [
+        {
+          "name": "input2",
+          "type": "ACInput"
+        }
+      ]
+    }
+    ```
+    ```cpp hl_lines="5 8 10"
+    AutoConnect portal;
+    AutoConnectAux page1;
+    AutoConnectAux page2;
+    File page = SPIFFS.open("/custom_page1.json", "r");
+    page1.load(page);
+    page.close();
+    page = SPIFFS.open("/custom_page2.json", "r");
+    page2.load(page);
+    page.close();
+    portal.join( { page1, page2 } );
+    AutoConnectInput& input1 = page1.getElement<AutoConnectInput>("input1");
+    ```
+
 ### <i class="fa fa-caret-right"></i> Loading from the streamed file
 
 AutoConnect supports loading of JSON document from the following instances: