JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 10
  • Score
    100M100P100Q47847F
  • License MIT

Class Editor for UML Diagrams developed with Javascript Code Templates based on JSON Editor of Jeremy Dorn

Package Exports

  • jsoneditor4code

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jsoneditor4code) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ClassEditorUML

JSON Editor for UML Class Definition with a Code Editor for the methods - based on the JSON editor of Jeremy Dorn.

  • With HandleBars the code generation in Javascript is implemented.

Online Demo

https://niebert.github.io/ClassEditorUML

Table of Contents

Quick Start for Developers

  • The source library are stored in /src/libs
  • Build the library with node build.js started in directory of the repository.
  • The build command creates the file docs/js/class_editor_uml.js, which is imported with a script tag in docs/index.html. This is helpful because the ClassEditorUML can be accessed directly through the web via the URL https://niebert.github.io/ClassEditorUML
  • If you want to use the ClassEditorUML for another programming language, checkout

Files, Folders and Structure of Repository

The following enumeration explains the structure of the repository and folders.

  • dist/ folder contains all
  • docs/ folder contains all the web content that you can access via https://niebert.github.io/ClassEditorUML
    • docs/ace folder contains files for the editor ACE, that is used in JSON-Editor to edit source code.
    • docs/db folder contains JSON database which initializes the JSON-Editor with the default JSON data. If the user saves the file, the current JSON data is stored in the LocalStorage of the browser.
    • docs/css folder contains all style sheet for the ClassEditorUML
    • docs/fonts folder contains the fonts for the FontAwesome.
    • docs/jquery folder contains the JQuery implementation so that a downloade ClassEditorUML runs offline.
    • docs/js folder contains all Javascript libraries used for the ClassEditorUML
    • docs/schema folder contains JSON schema for the ClassEditorUML, defining the input user interface for editing the JSON file
    • docs/tpl folder contains the HandleBars template generating the source code from the UML definition.
    • docs/index.html files starts the JSON-Editor ClassEditorUML also offline, when the repository was downloaded to your device and started locally in your browser.
  • jscc/ folder contains the JavascriptClassCreator files that are used to create object-oriented Javascript class files.
  • src/ folder contains the file main.js and other source files in the future, to create a the library in the folder dist/ with browsersify and watchify.
  • update_libs.sh is a shell script that works on Linux and MAcOSX to perform some library updates from the web.

Structure of the UML JSON

Say we want a listing for all attributes for the UML-design of the class in programming language Javascript. The JSON file generated by ClassEditorUML has the following structure:

var vJSON_UML{
  "data": {},
  "settings":{}
};
  • data contains the UML structure of the class,
  • settings contains the settings for the editor, e.g. which classes, local classes or remote classes can be selected as attribute types.
vJSON_UML.data = {
    "classname": "MyClass",
    "superclass": "",
    "comment": "What does the class do?",
    "attributes": [
        {
            "visibility": "public",
            "name": "name",
            "init": "null",
            "class": "String",
            "comment": "Stores the name of the animal"
        },
        {
            "visibility": "public",
            "name": "age",
            "init": "null",
            "class": "Integer",
            "comment": "stores the age of the animal"
        }
    ],
    "methods": [
        {
            "visibility": "public",
            "name": "getOlder",
            "parameter": [
                {
                    "name": "pYears",
                    "class": "Integer",
                    "comment": "Increases the age with pYears"
                }
            ],
            "return": "",
            "comment": "Increases the age of the modelled animal",
            "jscode": ""
        }
    ],
    "possibleClasses": [
        "",
        "App ",
        "AppAbstract ",
        "Array",
        "Boolean",
        "Document",
        "Float",
        "Function",
        "Hash",
        "Integer",
        "LinkParam ",
        "Object",
        "RegularExp",
        "String"
    ]
}

Template Engine and Code Generation

HandleBars4Code is used as Template Engine for generating the code in JSONEditor4Code. The are currently two available templates in ClassEditorUML:

  • (Class Javascript) Code Generation for the programming language in Javascript.
  • (Documentation for Class) ClassEditorUML is able to generate a README.md in the GitHub markup language.

Storage of Templates

The templates are stored and imported as Javascript libraries in the file docs/index.html, which is the file to launch locally in your browser even without internet access.

  • The template for code generation is stored in the folder docs/tpl.
  • In the file docs/index.html the template will be accessible via the hash vDocJSON.tpl.

Handlebars4Code

Handlebars4Code extends the great templates engine Handlebars () The following section explains how to access each item by index in the Handlebars template.

each Iteration

JSON

var myclasslist = [
  ["first_var","first_type"],
  ["second_var","seconf_type"],
  ["third_var","third_type"],
];

Handlebar4Code notation

We will use the dot-bracket notation

<ul>
{{#each myclasslist as |item|}}
  <li>
    Variable <tt>{{item.[0]}}</tt> has the type <tt>{{item.[1]}}</tt>
  </li>
{{/each}}
</ul>

Output

Which will output in a code e.g. documentation file in HTML:

<ul>
  <li>
    Variable <tt>first_var</tt> has the <tt>first_type</tt>
  </li>
  <li>
    Variable <tt>second_var</tt> has the <tt>second_type</tt>
  </li>
  <li>
    Variable <tt>third_var</tt> has the <tt>third_type</tt>
  </li>
</ul>

When the array items are objects, we can drop the brackets and simply write:

<ul>
{{#each myclasslist as |item|}}
  <li>
    {{item.0.text}}: {{item.1.text}}
  </li>
{{/each}}
</ul>

If we need to know the index of the current iteration (e.g. for the enumeration of )

To get the index within an #each helper loop, we use:

{{#each myclasslist as |item index|}}
  Index is: {{index}}
{{/each}}

Browserify and Watchify

Browserify and Watchify are used in this repository to control the WebApp-javascript development with the required Javascript libraries installed with NPM Node.js and similar framework world that greatly improve your javascript workflow: Using them, you no longer need to micro-manage your script tags but instead you just declare the libraries each of your client-side modules is using - or you can even create your own reusable modules! Also, installing (or updating) javascript libraries is as easy as running a single command!

Global Installation of Browserify, Watchify, UglifyJS and DocToc

Requirement: NPM is intalled. Now call for global installation of Browserfy, Watchify, UglifyJS and DocToc by:

npm install -g browserify watchify uglify-js doctoc

This is recommended because your will not install Browserfy, Watchify and UglifyJS for all your repositories separately.

  • Browserfy converts node_modules in a single library, that can be imported in WebApp. Browserify resolves dependencies and included the required libraries into the bundled javascript code.
  • Watchify watches changes in the source code and runs the build process whenever it detects changes in the your source code.
  • UglifyJS compresses the source code of dist/class_editor_uml.js into class_editor_uml.min.js to reduce download time and WebApp performance during load.
  • DocToc is used to create a helpful table of contents in the README (see [DocToc-Installation]https://github.com/thlorenz/doctoc#installation) for further details on NPM DocToc ). Run doctoc README.md for updating the table of contents.
  • jsLint is used to check the Javascript code, quality of code can be improved by application of jsLint

Package Installation of Browserify and Watchify - Alternative

If your prefer that browserify and watchify is installed with your npm install command, save these to modules to your dev-dependecies in your package.json by calling

  • (Install Browsersify) npm install browserify --save-dev
  • (Install Watchify) npm install watchify --save-dev
  • (Install UglifyJS) npm install uglify-js --save-dev
  • (Install DocToc) npm install doctoc -g
  • (Install jshint) npm install jslint -g

The difference between --save and --save-dev is, that development dependencies are installed with npm install because they are required for the development process of the code but they are not added to the generated Javascript-bundle that are used in the WebApp ClassEditorUML. The --save-dev commands for browserify and watchify will install the two modules with all the the dependencies in node_modules and add the dev-dependencies to your package.json.

"devDependencies": {
  "browserify": "^14.5.0",
  "watchify": "^3.9.0",
  "uglify-js": "^2.6.2",
  "doctoc":"^1.3.0",
  "lint": "^1.1.2"  
}

In the current repository Browserfy and Watchify are expected to be installed globally, because the package.json does not contain the dev-dependencies mentioned above.

Start Watching the Files with Watchify

Watchify will trigger the npm run build process if files were change due to alteration of code. To start watching the files, run the npm-watch script by npm run watch, which is defined in package.json

Source JS file and development bundle output

The main JS source file for the build process is src/main.js. The ouput library (resp. output file of build process) is stored in distrubtion library for browser based web-development in dist/bundle.js. Compressed code is generated with UglifyJS. It takes the dist/bundle.js as input file and creates the compressed file dist/bundle.min.js. The compression of dist/bundle.js into dist/bundle.min.js can be started by

npm run compress

Main Library for Handling the JSON Database

Main library to handle large arrays is docs/js/editor4json.js https://github.com/niebert/ClassEditorUML/tree/master/docs

UML Diagram of Editor4JSON Class

UML Diagram of JS Class Editor4JSON

JSON to Schema Generator

Used the following tool that creates a JSON schema for a provided JSON file. Used the given JSON file to create the JSON Schema with JSON2schema.html.

Additional Modules created/used for this Repository

Some code may be useful for other developers and so the following packages are create on GitHub and as NPM module:

Acknowledgement

Special thanks to the following individual developers and teams of OpenSource JavaScript projects:

  • HandleBars the code generation in Javascript was implemented
  • JSON-Editor by Jeremy Dorn. The JSON Editor takes a JSON Schema and uses it to generate an HTML form. The JSON-Editor is partially used to edit JSON file of the JavascriptClassCreator Project JSCC. The JSON-Editor of Jeremy Dorn has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). This would lead to major code reduction of JSCC . Refactoring of JSCC would make more use of the JSON-Editor features. Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/
  • Developer Mihai Bazon create UglifyJS, a great tool to handle and parse Javascript Code and minify the Javascript code (see Source Code of UglifyJS).
  • The wrapper for UglifyJS is written Dan Wolff. His UglifyJS-Online example is used to minify/compress the exported Javascript code of generated JS Classes (For Online Example of the UglifyJS-Wrapper see source code on https://github.com/Skalman/UglifyJS-online for the Online-Version of the Wrapper.
  • Developers of ACE Code Editor https://ace.c9.io (Javascript Editing uses the Editor in iFrames)
  • FileSaver.js Developer Eli Grey provided the FileSaver.js that is used to store created JSCC files to the local filesystem. JSCC uses the same mechanism of browsers, that allows a Save as... in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML).
  • JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
  • Inheritage for JavaScript with protoypes by Gavin Kistner
  • 3 ways to define a JavaScript class by Stoyan Stefanov
  • JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.