JSON Editor

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Tue Oct 27 2020 05:24:30 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: JSON Editor
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 7dbbe5d030df3e9d28302f85f8330edf
Keywords: 

My Notes
--------
October 25, 2020
This workbook tests out the JSON Editor, as described in refs [1, 2]

http://127.0.0.1:8080/war/Xholon.html?app=JSON+Editor&src=lstr&gui=clsc&jslib=jsoneditor
http://127.0.0.1:8080/war/Xholon.html?app=JSON+Editor&src=lstr&gui=none&jslib=jsoneditor


To install on my computer:
-------------------------
cd ~/nodespace/
npm install @json-editor/json-editor
cd ~/nodespace/node_modules/@json-editor/json-editor

To view code:
------------
ls
atom .

To use in this workbook:
-----------------------
I copied:
~/nodespace/node_modules/@json-editor/json-editor/dist/jsoneditor.js
to:
~/gwtspace/Xholon/Xholon/src/org/public/lib



References
----------
(1) https://github.com/json-editor/json-editor

(2) https://www.npmjs.com/package/@json-editor/json-editor
    JSON Editor takes a JSON Schema and uses it to generate an HTML form.
    It has full support for JSON Schema version 3 and 4
    and can integrate with several popular CSS frameworks (bootstrap, spectre, tailwind).
    
    Install
     Install package
      npm install @json-editor/json-editor
     Using a CDN
      <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>

    JSON Editor has no dependencies. It only needs a modern browser (tested in Chrome and Firefox).

() https://json-editor.github.io/json-editor/basic.html
    a very basic example that I can copy

() https://github.com/json-editor/json-editor/wiki

() https://github.com/json-editor/json-editor/wiki/Editors-for-creating-JSON-Editor-schemas

() https://niehausbert.gitlab.io/JSON2Schema/
    JSON Schema & Editor Generator 2.2.9
    JSON Schema Support Tool for JSON Editor developed by Jeremy Dorn
    With this tool you can create a JSON schema and a complete JSON editor with your new JSON Schema
    as a ZIP file jsoneditor_app.zip (see GitHub-Repository: https://github.com/niebert/jsoneditor_app). 

() https://pmk65.github.io/jedemov2/dist/demo.html
    example in the Interactive Playground

() https://json-schema.org/draft/2019-09/json-schema-core.html


]]></Notes>  

<_-.XholonClass>
  <PhysicalSystem/>
  
  <Block/>
  
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<PhysicalSystem>
  <Block/>
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, beh = {

postConfigure: function() {
  me = this.cnode.parent();
  $wnd.xh.avatar().action("pause");
  
  this.element = $doc.getElementById('xhappspecific');
  
  this.options = {
  theme: 'html', //'html' 'bootstrap4'
  disable_collapse: true,
  disable_edit_json: true,
  disable_properties: true,
  
  schema: {
    type: "object",
    title: "Car",
    properties: {
      make: {
        type: "string",
        enum: [
          "Toyota",
          "BMW",
          "Honda",
          "Ford",
          "Chevy",
          "VW"
        ]
      },
      model: {
        type: "string"
      },
      year: {
        type: "integer",
        enum: [
          1995,1996,1997,1998,1999,
          2000,2001,2002,2003,2004,
          2005,2006,2007,2008,2009,
          2010,2011,2012,2013,2014,
          2015,2016,2017,2018,2019,
          2020
        ],
        default: 2005
      },
      color: {
        type: "string",
        format: "color"
      },
      safety: {
        type: "integer",
        format: "rating",
        maximum: "5",
        exclusiveMaximum: false,
        readonly: false
      },
      notes: {
        type: "string",
        format: "textarea",
        options: {
          infoText: "Type whatever you want."
        }
      },
      pictures: {
        type: "array",
        title: "Pictures",
        items: {
          type: "object",
          title: "Image",
          format: "grid",
          properties: {
            file: {
              type: "string",
              title: "file",
              media: {
                binaryEncoding: "base64",
                type: "img/jpeg"
              },
              options: {
                grid_columns: 6,
                multiple: true,
              }
            },
            description: {
              type: "string",
              title: "Description",
              options: {
                grid_columns: 6
              }
            }
          }
        }
      }
    }
  } // end schema
  }; // end options
  
  this.editor = new $wnd.JSONEditor(this.element, this.options);
},

handleNodeSelection: function() {
  me.println(JSON.stringify(this.editor.getValue()));
  // the Xholon print2Console() IGNORE_ME character
  return "\u0011";
}
}
//# sourceURL=Blockbehavior.js
]]></Blockbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="60" height="25" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Click to write JSON to the out tab</title>
    <rect id="PhysicalSystem/Block/Blockbehavior" fill="#98FB98" height="25" width="50" x="10" y="0"/>
    <text x="21" y="17" style="pointer-events:none;">click</text>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>