Jel

Javascript graphical Editor that generates dsL

Documentation

Jel uses well known javascript framework, like Require and Backbone. My suggestion is to use the editor in a separate window: if you want to embed the editor in your page, you have to copy in a right way all the index.html code in the Jel root folder. Essentially, in your page you have to copy three main part. If you fork this project, you don't need this step

				
<link rel="stylesheet" href="css/codemirror.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/jstree/jstree.min.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/scrollbar.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/raphael.pan-zoom.css" type="text/css" media="screen">
				
			

				
<script type="text/javascript" src="lib/jel/jel.js"></script>
<script data-main="js/main" src="lib/require/require.js"></script>
				
			

				
<div id="menu"></div>
<div id="dialog"></div>
<div id="notification"></div>
<div id="middle">
	<div id="palette">
		<div id="paletteheader"><h5>Palette</h5></div>
	</div>
	<div id="tab"></div>
	<div id="container">
		<div id="main" ondragover="event.preventDefault()"></div>
		<div id="dsl"></div>
	</div>
	<div id="rightMenu">
		<div id="treeheader"><h5>Tree</h5></div>
		<div id="tree" class="jstree jstree-1 jstree-default jstree-default-responsive"></div>
		<div id="properties"></div>
		<div id="anteprimaheader"><h5>Anteprima</h5></div>
		<div id="anteprima"></div>
	</div>
</div>
				
			

Naturally, you have to copy all the required folder in the same of your index.html.

Once all files are copied, you can start with the definition of your palette. Jel require that the definition has to be made in the init method: so we have to override this method, in a separate javascript file or directly in the index.html
If you have some problem in the init definition, you can refer to existing forks, like the Camel one

				
<script>
	Jel.fn.init = function(){
		//Here you can define your shapes, connections and  enable Jel options
	}
</script>
				
			

Jel is composed of two main concept, Shape and Connection. Shape is a generic term that is used to refer to your palette items. If you want to add a shape in the palette section, follw

				
var shape = new Jel.Shape();
shape.setImage(url); //setting the image url starting from the folder containing this script
shape.setName("elementName"); //the name will appear with the image
shape.setDimension(84,54); //set the deafault dimension of a palette shape
Jel.paletteShapes.addShape(shape); //Shape is added in the palette	
				
			

Shapes can be of two main types: base or composed. Composed shapes are the ones that can be explored, so that contain other shapes. To explore a composed shape, make a double click on it: a new tab will open. If you want to set a shape composed, follow this

				
.
shape.setAsComposed();
.
Jel.paletteShapes.addShape(shape);
				
			

Jel is based on one of the most important SVG library, Raphael JS (yeah it's not a canvas). All the operation with raphael can be performed directly on the app, like drag'n drop of shapes. However, can be useful adding shape inside a script.

				
var shape = new Jel.Shape();
.
.
shape.setPosition(240,140);
.
.
var instance = Jel.Canvas.addShape(shape);
				
			

Once canvas is defined and some shapes have been added, we can connect them. As we said in the shape paragraph, Connection is one of the two most important concept in Jel. Connections between elements are oriented: in this way, an hierarchy between shapes is established.

				
.
var instance1 = Jel.Canvas.addShape(shape1);
.
var instance2 = Jel.Canvas.addShape(shape2);
.
Jel.Canvas.connect(instance1, instance2);
				
			

As we said previously, one main goal of Jel is to keep aligned two worlds: the graphical one and the textual one. In other words, under the picture there is a well structured textual representation, that can be processed.
The idea is the following: why not use a xml schema definition in order to map shapes with metalement? In this way, shapes can inherit properties and constraints of the meta-element. In order to do this, we have to:

• attach an XSD containing elements definition;
• associate the shape to the right metalement

			
Jel.fn.init = function(){

	//First attach the right xsd
	try{
		Jel.attachXSD('schema_folder/schema_file.xsd');
	}catch(err){
		console.log(err);
	}
	.
	shape.setMetaelement("metaelement_name");
	Jel.paletteShapes.addShape(shape);	
	.
}
			
		

When an xsd is attached to Jel, users can benifits also of the conversion functionaly: it means that the picture can be converted into a textual representation, obtaining a DSL instance. During the conversion phase, a validation step is applied: if something goes wrong, an error message will appear. In order to ensure the validity of the generation result, we have to specify additional information

			
try{
	.
	Jel.setBaseFile('xml/baseFile.xml'); // setting the base structure of the generated code, like the xml definition 
	Jel.setNamespace('http://camel.apache.org/schema/spring'); //setting the namespace of the generate code
	Jel.setBaseElement('base_el'); //Set the base element that will wrap the generated code
}