Refactoring template and adding titlepane.

2021/12/dojo_demo2/app/widgets/MainWidget.html

@@ -0,0 +1,18 @@
+<div>
+	<div data-dojo-type="./ChildWidget2"></div>
+
+	<div>
+    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #1', open: false" data-dojo-attach-point="pane1">
+    	<ol>
+        <li>I'm opened</li>
+        <li>I'm opened</li>
+        <li>I'm opened</li>
+        <li>I'm opened</li>
+      </ol>
+    </div>
+    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: ''" data-dojo-attach-point="pane2">
+        I'm closed
+    </div>
+	</div>
+
+</div>

2021/12/dojo_demo2/app/widgets/MainWidget.js

@@ -5,17 +5,28 @@ define([
 	"dijit/_AttachMixin",
 	"dijit/_WidgetBase",
 	"dojo/_base/declare",
+	"dojo/text!./MainWidget.html",
+	"dijit/TitlePane",
 	"dijit/form/TextBox",
 	"./ChildWidget2"
-], function(require, _TemplatedMixin, _WidgetsInTemplateMixin, _AttachMixin, _WidgetBase, declare) {
+], function(require, _TemplatedMixin, _WidgetsInTemplateMixin, _AttachMixin, _WidgetBase, declare, template) {
 	return declare("app/widgets/MainWidget", [_WidgetBase, _AttachMixin, _TemplatedMixin, _WidgetsInTemplateMixin], {
 		contextRequire: require,
-		templateString: "<div>"
+		templateString: template,
-			// + "Hello World!!! <input data-dojo-type=\"dijit/form/TextBox\" />" 
+		postCreate: function() {
-			// this works as it's dijit
+			this.inherited(arguments);
-			+ "<div data-dojo-type=\"./ChildWidget2\"></div>"
+
-			// this doesn't work as it's trying to fetch ./node_modules/dojo/ChildWidget which seems to be 
+			let pane1Toggle = this.pane1.toggle.bind(this.pane1);
-			// relative to dojo/parser dojo/parser
+			let pane2Toggle = this.pane2.toggle.bind(this.pane2);
-			+ "</div>"
+			this.pane1.arrowNode.innerHTML = '<span class="fa fa-chevron-up"><br /></span> ';
+			this.pane1.toggle = this.pane2.toggle = (function() {
+				this.pane1.arrowNode.innerHTML = this.pane1.open 
+				? '<span class="fa fa-chevron-up"><br /></span> ' 
+				: '<span class="fa fa-chevron-down"><br /></span> ';
+					
+				pane1Toggle();
+				pane2Toggle();
+			}).bind(this);
+		}
 	});
 });

2021/12/dojo_demo2/index.html

@@ -5,6 +5,21 @@
   <title>Dojo App</title>
   <meta charset="utf-8" />
 
+  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.css">
+  <script defer src="/node_modules/@fortawesome/fontawesome-free/js/all.js"></script>
+
+  <style>
+
+    .dijitArrowNodeInner {
+      display: none;
+    }
+
+    .dijitArrowNode {
+      
+    }
+
+  </style>
+
   <!--dojoConfig-->
   <script>
     // var arguments = []; // rhino fails if it's not set up

2021/12/dojo_demo2/package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+    },
     "@zeit/schemas": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.6.0.tgz",

2021/12/dojo_demo2/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "dijit": "^1.16.4",
     "dojo": "^1.16.4",
     "dojox": "^1.16.4"