Javascript Class Generator
HTML:
FileName
CLASS:
ClassName
DB:
DBName
HTML:
CLASS:
DB:
HTML
Page Types
CLASS
UML
Attributes
Methods
DB
Settings
Export/Import
HTML:
FileName
Select HTML File:
HTML-File:
Main App Class:
App Init Call:
Template :
Path:
/tpl/
Page IDs:
Pages:
FileName
Select Page:
home
Page-ID:
Page Type:
Page-Title:
Parent Page ID:
home
HTML Replace Elements:
FileName
Select Replace ID:
IDs Replace Marker:
HTML Replace-ID:
HTML-Export
HTML File:
Standalone:
YES
NO
Compress Code:
All Classes:
Page Types
Select Page Type:
Type-ID:
Header Button 1:
Header Button 2:
Buttons Page Header
Select Button:
DefaultButton
Button-ID:
Button-Title:
HTML Definition for Button:
[tButtonDefHTML]
Replaces
___BUTTON_ID___
,
___BUTTON_TITLE___
Class Definition:
FileName
Class:
Rename
Delete
UML Type:
Blue Class
Green Class
Yellow Class
Brown Class
Red Class
ABSTRACT Class
INTERFACE Class
Super Class Name:
UML-Type Super Class:
Author of Class:
e-Mail Author:
Attributes
Methods
Init Method Code:
Javascript Code
Generate Code for
ClassName
Select Class:
UndefClass
Prototype:
YES
NO
Compress Code:
Attribute Definition:
FileName
Select Attribute
public
private
Name:
=
Attribute Type/Class:
Select Type:
create
Attribute Comment:
Method Definition:
Class
Method:
public
private
Return:
Method Definition:
Method Comment
Method Source Code:
Loop Calls:
Hash
Array
UML Diagramm
Display UML Diagram:
Generalizations:
(inherit Class Attributes and Methods)
YES
NO
Aggregations/Compositions:
YES
NO
Associations:
(uni-/bi-directional )
YES
NO
Database:
MyDB
Select Database:
Type:
JSCC/JSON/CLASS/DB
Name:
DB-Title:
DB-Data:
The data of the Database is stored in the hash/object 'data'. The 'schema' hash/object defines the structure of collected JSON data.
Create a Schema JSON Editor:
MyDB
MyID
Generate a JSON Schema from JSON with
https://www.jsonschema.net
and
see documentation of
JSON Editor by Jeremy Dorn
.
Database Schema JSON:
JSCC Settings
Author:
e-Mail Author:
Edit Page Type:
Edit Template:
List of defined Classes
List of Basic Classes
JSON Databases
HTML Files
Global Libaries
Pages in HTML-File
Format:
-
Page Types
Format:
-
Page-ID can be replaced by Button-ID
Buttons
Format:
-
Export JSON
Export JSON:
JS-Export
Import JSON
Import JSON/JS:
JSON/JS Database:
DB-Prefix:
Import Javascript Classes in
HTML-Javascript Environment
Javascript Class Generator was developed 2012-17 by Engelbert Niehaus -
University Koblenz-Landau
Javascript-Templates
Export Templates
HTML Storage
The following text areas define templates for HTML and the JavaScript Class Generation. If want to use differente templates for the javascript class generator, just download the file and edit the HTML source code. Use your Browser to save the html-file to your local filesystem. It is pure HTML with the javascript functions included in the file. So it will be easy to modify the source code according to your requirements and constraints.
Default App Path:
[tDefaultAppPath]
Template for Main HTML:
[tTplHTML]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>App LSAC</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link type="text/css" href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" /> <link type="text/css" href="css/ios_inspired.css" rel="stylesheet" /> <script src="js/jquery-1.7.1.min.js"></script> <script> // vDataJSON contains all loaded Databases as JSON file var vDataJSON = {}; //------------BEGIN iOS-Inspired------------ // all dialog buttons should close their parent dialog $(".ui-dialog button").live("click", function() { $("[data-role='dialog']").dialog("close"); }); $(document).on("mobileinit", function(){ $.mobile.defaultPageTransition = "slide"; }); //--------------END iOS-Inspired------------ </script> ___LIBRARIES___ <script> //-----INIT DisApp ----- var vDebug = 0; var vApp = new App(); </script> <script src="js/jquery.mobile-1.2.0.min.js"></script> <link href="css/ios_post.css" rel="stylesheet" /> <link href="css/css/font-awesome.min.css" rel="stylesheet" /> </head> <body> <!-- ============================================= BEGIN OF PAGES ============================================= --> ___PAGES___ <!-- ============================================= END OF PAGES / BEGIN iFRAME JSCALL ============================================= --> <div id="divJSCALL"></div> <div id="iFrameContainer" style="display:none"> <iframe id="iLoader" src="loader/setonline.html" width="90%" height="100" name="iLoader"></iframe> </div> <!-- ============================================= END OF iFRAME JSCALL ============================================= --> <script type="text/javascript"> // var vQueryHash = readQueryParams(); var vOnlineMode = false; var vApp = new ___APP_CLASS___(); vApp.___APP_INIT_CALL___; // checkOnlineMode(); </script> </body> </html>
Script Import
[tTplSCRIPT]
<script type="text/javascript" src="___LIBRARY___"></script>
Script Standalone
[tTplSCRIPTSTANDALONE]
<script type="text/javascript" > ___JSCODE___ </script>
App Page
[tTplPAGE]
<!-- Page: ___PAGE_ID___ Page Type: ___PAGE_TYPE_ID___ --> <div data-role="page" id="___PAGE_ID___"> <div data-role="header" data-position="fixed"> ___HEADER_BUTTON1___ <h1>___PAGE_TITLE___</h1> ___HEADER_BUTTON2___ </div> <!-- /header --> <div data-role="content"> ___PAGE_CONTENT___ </div> <!-- /page ID: ___PAGE_ID___ --> </div>
Root Menu Template
[tTpRootlMENU]
<ul data-role="listview" data-inset="true"> ___MENUITEM_LIST___ </ul>
Root Menu Item
[tTplMENUITEM]
<li><a href="#___PAGE_ID___">___PAGE_TITLE___</a></li>
Menu Template
[tTplMENU]
<ul data-role="listview" data-inset="true"> ___MENUITEM_LIST___ </ul>
Menu Item
[tTplMENUITEM]
<li><a href="#___PAGE_ID___">___PAGE_TITLE___</a></li>
Header Button
[tTplPageLinkBUTTON]
<!-- header button: '___BUTTON_TITLE___' link to page '___LINK_PAGE_ID___' --> <a href="#" id="b___BUTTON_ID______COUNTER___" onclick="$.mobile.changePage( '#___LINK_PAGE_ID___', { transition: 'slideup', changeHash: false });return false" data-theme="a">___BUTTON_TITLE___</a>
Default Button
[tDefaultBUTTON]
<!-- header button: '___BUTTON_TITLE___' page: '___PAGE_ID___' --> <a href="#" class="b____BUTTON_ID___" id="b____BUTTON_ID______COUNTER___" onclick="vApp.event('___PAGE_ID___','BUTTON_ID___',___COUNTER___);return false" data-theme="a">___BUTTON_TITLE___</a>
Quit Button
[tTplQUIT]
<a href="#" class="b____BUTTON_ID___" id="b____BUTTON_ID______COUNTER___" onclick="if (confirm('Do you want to quit!')) window.close();" data-theme="c">Quit</a>
Comment Prefix:
[tCommentPrefix]
Comment Box Prefix:
[tCommentBoxPrefix]
Class Header
[tClassHeader]
//################################################################# //# Javascript Class: ___CLASSNAME___() //# SuperClass: ___SUPERCLASSNAME___ //# Class Filename: ___CLASSFILENAME___ //# //# Author of Class: ___AUTHOR___ //# email: ___EMAIL___ //# Date: ___MODDATE___ //# GNU Public License V3 - OpenSource //# //# created with JavaScript Class Creator JSCC //# https://niebert.github.io/JavascriptClassGenerator //################################################################# //--------------------------------------------------------------------- //---Store File in Subdirectory /js and import this Class in HTML-File with // SCRIPT-Tag: LANGUAGE="JavaScript" SRC="js/___CLASSFILENAME___" //--------------------------------------------------------------------- //---Constructor of Class ___CLASSNAME___() // Call the constructor for creating an instance of class ___CLASSNAME___ // by the following command in HTML-file that imports this class // var vMyInstance = new ___CLASSNAME___(); //--------------------------------------------------------------------- //----Attributes------------------------------------------------------- //--------------------------------------------------------------------- // If you want to access the attributes of ___CLASSNAME___, use // the attribute name with a leading "this." in the definition of method of ___CLASSNAME___, e.g. // this.aName = "Hello World"; //--------------------------------------------------------------------- //----Methods---------------------------------------------------------- //--------------------------------------------------------------------- // (1) If you want to assign definitions of methods for single instance of the class '___CLASSNAME___' // they are defined with // this.my_method = function (pPar1,pPar2) // this approach allows to overwrite the method definition of single instances dynamically. //--------------------------------------------------------------------- // (2) A prototype definition of methods for '___CLASSNAME___' will be set by // use the method's name and extend it with '___CLASSNAME___'. // ___CLASSNAME___.prototype.my_method = function (pPar1,pPar2) // This approach consumes less memory for instances. //--------------------------------------------------------------------- ___SUPERCLASSPROTOTYPE___ function ___CLASSNAME___ () { ___SUPERCLASS___ //--------------------------------------------------------------------- //---Attributes of Class "___CLASSNAME___()" //--------------------------------------------------------------------- ___ATTRIBUTES___ //--------------------------------------------------------------------- //---Methods of Class "___CLASSNAME___()" //--------------------------------------------------------------------- ___METHODLIST___ ___METHODSPRIVATE___ ___METHODSPUBLIC___ } //------------------------------------------------------------------------- //---END Constructor of Class "___CLASSNAME___()" //------------------------------------------------------------------------- ___METHODSPROTOTYPE___
Public Attribute Definition
[tTplAttribute]
//---PUBLIC: ___ATTRIB_NAME___ (___ATTRIB_TYPE___): ___ATTRIB_COMMENT___ this.___ATTRIB_NAME___ = ___ATTRIB_DEFAULT___;
Private Attribute Definition
[tTplAttributePrivate]
//---PRIVATE: ___ATTRIB_NAME___ (___ATTRIB_TYPE___): ___ATTRIB_COMMENT___ var ___ATTRIB_NAME___ = ___ATTRIB_DEFAULT___;
Method Constructor Comment
[tTplMethodConstructorComment]
//----___METHODACCESS___ Method: ___CLASSNAME___.___METHODDEF___----- // ___METHODNAME___(___METHODPARAMETERS___) ___RETURNCOMMENT___ //___METHODCOMMENTLIST___
Methods Head Comment
[tTplMethodsHeadComment]
//--------------------------------------------------------------------- //---___HEAD_TITLE___: Methods of Class "___CLASSNAME___()" //---------------------------------------------------------------------
Method Prefix:
[tMethodPrefix]
Prototype Method Prefix:
[tMethodPrefixProto]
Inherit from SuperClass (Prototype definition)
[tTplSuperClassProto]
//-------------------------------------- //---Super Class------------------------ // Inheritance: '___CLASSNAME___' inherits from '___SUPERCLASSNAME___' ___CLASSNAME___.prototype = new ___SUPERCLASSNAME___(); // Constructor for instances of ___CLASSNAME___ has to updated. // Otherwise constructor of ___SUPERCLASSNAME___ is called ___CLASSNAME___.prototype.constructor=___CLASSNAME___; // see http://phrogz.net/js/classes/OOPinJS2.html for explanation //--------------------------------------
Inherit from SuperClass
[tTplSuperClass]
//-------------------------------------- //---Super Class------------------------ this.SuperClass = ___SUPERCLASSNAME___; this.SuperClass(); //--------------------------------------
Class Tail
[tTplClassTail]
//------------------------------------------- //---End Definition of Class----------------- // JS Class: ___CLASSNAME___ //-------------------------------------------
Method Header
[tTplMethodHeader]
//################################################################# //# ___METHODACCESS___ Method: ___METHODNAME___() //# used in Class: ___CLASSNAME___ //# Parameter: //# ___PARAMETERDEF___ //# Comment: //# ___METHODCOMMENT___ //# ___RETURNCOMMENT___ //# created with JSCC ___DATE___ //# last modifications ___MODDATE___ //################################################################# ___CLASSNAME___.prototype.___METHODNAME___ = function (___METHODPARAMETERS___) { //----Debugging------------------------------------------ // console.log("___CLASSFILENAME___ - Call: ___METHODDEF___"); // alert("___CLASSFILENAME___ - Call: ___METHODDEF___"); //----Create Object/Instance of ___CLASSNAME___---- // var vMyInstance = new ___CLASSNAME___(); // vMyInstance.___METHODCALL___; //------------------------------------------------------- ___METHODCODE___ }; //----End of Method ___METHODNAME___ Definition
Method Private
[tTplMethodPrivate]
//################################################################# //# ___METHODACCESS___ Method: ___METHODNAME___() //# used in Class: ___CLASSNAME___ //# Parameter: //# ___PARAMETERDEF___ //# Comment: //# ___METHODCOMMENT___ //# ___RETURNCOMMENT___ //# created with JSCC ___DATE___ //# last modifications ___MODDATE___ //################################################################# function ___METHODNAME___(___METHODPARAMETERS___) { //----Debugging------------------------------------------ // The following alert-Command is useful for debugging //alert("___CLASSFILENAME___ - Call: ___METHODDEF___") //------------------------------------------------------- ___METHODCODE___ }; //----End of Private Method ___METHODNAME___ Definition
Method Private
[tTplMethodPublic]
//################################################################# //# ___METHODACCESS___ Method: ___METHODNAME___() //# used in Class: ___CLASSNAME___ //# Parameter: //# ___PARAMETERDEF___ //# Comment: //# ___METHODCOMMENT___ //# ___RETURNCOMMENT___ //# created with JSCC ___DATE___ //# last modifications ___MODDATE___ //################################################################# this.___METHODNAME___ = function (___METHODPARAMETERS___) { //----Debugging------------------------------------------ // The following alert-Command is useful for debugging //alert("___CLASSFILENAME___ - Call: ___METHODDEF___") //------------------------------------------------------- ___METHODCODE___ }; //----End of Private Method ___METHODNAME___ Definition
Template Loop Array
[tTplLoopArray]
for (var i = 0; i < ___LOOPOBJECT___.length; i++) { ___LOOPOBJECT___[i]___LOOPMETHOD___; };
Template Loop Hash
[tTplLoopHash]
for (var vKey in ___LOOPOBJECT___) { if (___LOOPOBJECT___.hasOwnProperty(vKey)) { ___LOOPOBJECT___[vKey]___LOOPMETHOD___; } };
Template HTML Container
http://niebert.github.io/JavascriptClassCreator/
[Download JSCC]
[GitHub]
GNU Public Licence V3