### Configure SyntaxHighlighter for WireIt Guide

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

This JavaScript snippet configures the path to the clipboard SWF file for SyntaxHighlighter, which is used to display code examples within the WireIt guide. After setting the configuration, it initializes the highlighter for all code blocks on the page.

```JavaScript
SyntaxHighlighter.config.clipboardSwf = 'res/SyntaxHighlighter/clipboard.swf';SyntaxHighlighter.all();
```

--------------------------------

### Example WireIt Wiring JSON Structure

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Illustrates a fragment of the WireIt Wiring JSON format, specifically showing a wire definition with source and target terminals, and the 'properties' object containing metadata like name, description, and category for a wiring instance.

```JSON
			"src":{"moduleId":2,"terminal":"_OUTPUT"},
			"tgt":{"moduleId":1,"terminal":"_INPUT2"}
		}
	],
	
	"properties":{	
		"name":"demo",
		"description":"",
		"isTest":true,
		"category":"Demo"
	}
};
```

--------------------------------

### JavaScript WireIt Layer and Form Container Setup

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/examples/index.html

Demonstrates how to initialize a WireIt layer and configure two 'WireIt.FormContainer' instances. It defines various inputEx fields for user data and sets up a bezier wire connection between the 'email' terminal of the first container and a custom output terminal of the second, all within a YAHOO.util.Event.addListener onload function.

```JavaScript
YAHOO.util.Event.addListener(window, 'load', function() {
  // Required for the tooltips
  YAHOO.inputEx.spacerUrl = "../lib/inputex/images/space.gif";
  // Example 1
  demoLayer = new WireIt.Layer({layerMap: false});
  demoLayer.setWiring({
    containers: [
      {
        position:[380,240],
        xtype: "WireIt.FormContainer",
        collapsible: true,
        fields: [
          {type: 'select', label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] },
          {label: 'Firstname', name: 'firstname', required: true },
          {label: 'Lastname', name: 'lastname', value:'Dupont'},
          {type:'email', label: 'Email', name: 'email', required: true, wirable: true },
          {type:'boolean', label: 'Happy to be there ?', name: 'happy'},
          {type:'url', label: 'Website', name:'website', size: 25}
        ],
        legend: 'Tell us about yourself...'
      },
      {
        position:[145,80],
        xtype: "WireIt.FormContainer",
        collapsible: true,
        fields: [
          {label: 'Firstname', name: 'firstname' },
          {label: 'Lastname', name: 'lastname' },
          {label: 'Title', name: 'title' }
        ],
        legend: 'Hello there',
        terminals: [
          {direction: [0,1], offsetPosition: { bottom: -14, left: 160}, ddConfig: { type: "output", allowedTypes: ["input"] }, name: "_OUT1" }
        ]
      }
    ],
    wires: [
      { src: { moduleId: 0, terminal: "email" }, tgt: { moduleId: 1, terminal: "_OUT1" }, xtype: "WireIt.BezierWire" }
    ]
  });
});
```

--------------------------------

### Comprehensive Wire Mouse Event Handling Example in JavaScript

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

A complete JavaScript example demonstrating how to define custom functions for wire mouse events (mouse in, mouse out, click), create a random layer with containers and wires, and then subscribe these functions to the mouse events for each wire. This example changes wire color on hover and shows an alert on click.

```JavaScript
// Functions executed with the scope of a wire
var wireRed = function() {
			this.options.color = 'rgb(255, 0, 0)';
	  		this.redraw();
		},
		wireBlue = function() {
			this.options.color = 'rgb(173, 216, 230)';
			this.redraw();
		},
		wireClick = function() {
			alert("Hoho ! you clicked !");
		};
	
	// Generate a random layer
	var layer = new WireIt.Layer({});
	for(var i = 0 ; i < 5 ; i++) {
		layer.addContainer({
			terminals: [ {direction: [0,1], offsetPosition: {bottom: -13, left: 25} }],
			title: "Block #"+i,
			position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ]
		});
	}
	
	for(var i = 0 ; i < 7 ; i++) {
	
		var w = layer.addWire({
			src: {moduleId: Math.floor(Math.random()*5), terminalId: 0},
			tgt: {moduleId: Math.floor(Math.random()*5), terminalId: 0}
		});
	
		// Subscribe methods to mouse events for all wires
		w.eventMouseIn.subscribe(wireRed, w, true);
		w.eventMouseOut.subscribe(wireBlue, w, true);
		w.eventMouseClick.subscribe(wireClick, w, true);
	}
```

--------------------------------

### Configure WireIt Ajax Adapter

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Configures the WireIt.WiringEditor.adapters.Ajax to connect to a custom backend using GET requests for saving, deleting, and listing wirings. Demonstrates both hard-coded URLs and dynamic URL functions.

```JavaScript
WireIt.WiringEditor.adapters.Ajax.config = 	{
	saveWiring: {
		method: 'GET',
		// The url can be hard-coded
		url: 'fakeSaveDelete.json'
	},
	deleteWiring: {
		method: 'GET',
		/**
		 * 'url' can also be a function that returns the URL as a string.
		 * For exemple, to connect to a REST store, you might want to send a DELETE /resource/wirings/moduleName
		 * (moduleName is present in the "value" parameter)
		 */
		url: function(value) {
			return "fakeSaveDelete.json";
		}
	},
	listWirings: {
		method: 'GET',
		url: 'listWirings.json'
	}
};
```

--------------------------------

### Example of Asynchronous Callback Invocation with YUI

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Illustrates how to handle asynchronous operations, specifically an Ajax request using YUI, and then invoke the appropriate WireIt adapter callback (success or failure) based on the response.

```JavaScript
function(val, callbacks) {
	
	YAHOO.util.Connect.asyncRequest('POST', 'myUrl', {
		success: function(r) {
			//...
			
			callbacks.success.call(callbacks.scope, results);
		},
		failure: function(r) {
			callbacks.failure.call(callbacks.scope, error);
		}
	});
	
}
```

--------------------------------

### Example of Synchronous Callback Invocation

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Demonstrates how to synchronously invoke success or failure callbacks within a WireIt adapter method, passing results or errors to the specified scope.

```JavaScript
function(val, callbacks) {
	
	if(everythingGoesFine) {
		callbacks.success.call(callbacks.scope, results);
	}
	else {
		callbacks.failure.call(callbacks.scope, results);
	}
	
}
```

--------------------------------

### Initialize WireIt Dynamic Graph with Spring Layout

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/layout/examples/spring_layout.html

This JavaScript code initializes a WireIt layer, defines a set of nodes and their connections (wires), and then programmatically adds them to the layer. It positions containers randomly and then applies a dynamic layout algorithm to arrange them, simulating a spring model. The commented-out section shows an example of animating container positions.

```JavaScript
var layer = null;
window.onload = function() {
    var nodes = [
        "WireIt", // 0
        "librairies", "inputEx", "YUI", "excanvas", // 1, 2, 3, 4
        "classes", "Wire", "Terminal", "Container", "Layer", "WiringEditor", // 5, 6, 7, 8, 9, 10
        "modules", "editor", "inputex", "labels", "layout", "composable", "grouping" // 11, 12, 13, 14, 15,16,17
    ];
    var wires = [
        [0,1], [1,2], [1,3], [2,3], [1,4], // librairies
        [0,5], [5,6], [5,7], [5,8], [5,9], [5,10], // classes
        [0, 11], [11, 12], [11, 13], [11, 14], [11, 15], [11, 16], [11, 17]
    ];
    layer = new WireIt.Layer({});
    for(var i = 0 ; i < nodes.length ; i++) {
        layer.addContainer({
            terminals: [ { offsetPosition: {top: 5, left: 25}, editable: false }],
            title: nodes[i],
            position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ],
            close: false
        });
    }
    for(var i = 0 ; i < wires.length ; i++) {
        var wc = wires[i];
        layer.addWire({
            src: {moduleId: wc[0], terminalId: 0},
            tgt: {moduleId: wc[1], terminalId: 0},
            xtype: "WireIt.Wire"
        });
    }
    layer.startDynamicLayout(); // For example with animation
    /*setInterval(function() {
        var c = layer.containers[0];
        var anim = new WireIt.util.Anim(
            c.terminals, c.el,
            { left: {to: 500 }, top: {to: 200 } },
            1, YAHOO.util.Easing.easeOut);
        anim.animate();
        layer.dynamicLayout.init();
    }, 5000);*/
};
```

--------------------------------

### JavaScript WireIt Event Handling Example

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/examples/wire_events.html

This JavaScript snippet initializes a WireIt layer upon window load, populating it with several containers and wires. It then attaches custom event handlers to each wire's mouse-in, mouse-out, and click events, demonstrating how to change wire appearance and trigger actions based on user interaction.

```JavaScript
window.onload = function() {
  // Functions executed with the scope of a wire
  var wireRed = function() {
    this.color = 'rgb(255, 0, 0)';
    this.redraw();
  },
  wireBlue = function() {
    this.color = 'rgb(173, 216, 230)';
    this.redraw();
  },
  wireClick = function() {
    alert("Hoho ! you clicked !");
  };

  // Generate a random layer
  var layer = new WireIt.Layer({});
  for(var i = 0 ; i < 5 ; i++) {
    layer.addContainer({
      terminals: [
        {direction: [0,1], offsetPosition: {bottom: -13, left: 25} }
      ],
      title: "Block #"+i,
      position: [
        Math.floor(Math.random()*800)+30,
        Math.floor(Math.random()*300)+30
      ]
    });
  }

  for(var i = 0 ; i < 7 ; i++) {
    var w = layer.addWire({
      src: {moduleId: Math.floor(Math.random()*5), terminalId: 0},
      tgt: {moduleId: Math.floor(Math.random()*5), terminalId: 0}
    });
    // Subscribe methods to mouse events for all wires
    w.eventMouseIn.subscribe(wireRed, w, true);
    w.eventMouseOut.subscribe(wireBlue, w, true);
    w.eventMouseClick.subscribe(wireClick, w, true);
  }
};
```

--------------------------------

### Create Basic inputEx SelectField

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/select_field.html

Demonstrates how to initialize a simple inputEx SelectField with a list of choices. This example uses a shorthand syntax for defining choices, where the value is directly provided.

```JavaScript
new inputEx.SelectField({ name: 'country', choices: [ { value: 'United States of America' }, { value: 'France' } ], parentEl: 'container1' });
```

--------------------------------

### Configure WiringEditor Autoload with URL Parameter

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Demonstrates how to use the 'autoload' URL parameter to specify which wiring should be opened automatically when the WiringEditor is displayed. This allows for direct links to specific wiring configurations.

```URL
http://myhost.com/editor/?autoload=myWiring
```

--------------------------------

### Initialize inputEx Dialogs and Load Dependencies with YUI Loader

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/dialog_widget.html

This comprehensive JavaScript function demonstrates the full initialization process for inputEx dialogs within a YUI environment. It sets up both the basic and modal dialog examples, configures the inputEx spacer URL, and utilizes `YAHOO.util.YUILoader` to asynchronously load required inputEx and YUI modules. It also shows how to declare inputEx modules to YUI for proper dependency management.

```JavaScript
/**
 * The function to call when all script/css resources have been loaded
 */
function init() {
  // Required for the UrlField
  inputEx.spacerUrl = "../images/space.gif";

  // Example 1
  Example1 = {};
  var formConfig = {
    type: 'form',
    fields: [
      {type: 'select', label: 'Title', name: 'title', choices: ['Mr', 'Mrs', 'Ms'] },
      {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' },
      {label: 'Lastname', name: 'lastname', value:'Dupont' },
      {type:'email', label: 'Email', name: 'email'},
      {type:'url', label: 'Website',name:'website'}
    ],
    buttons: [
      {type: 'submit', value: 'Send', onClick: function() { alert(YAHOO.lang.JSON.stringify(Example1.myPanel.getForm().getValue())); return false; // prevent form submit }},
      {type: 'link', value: 'Cancel', onClick: function() { Example1.myPanel.hide(); } }
    ]
  };
  Example1.myPanel = new inputEx.widget.Dialog({
    inputExDef: formConfig,
    title: 'Here the title of your dialog'
  });

  // Example 2
  Example2 = {};
  Example2.myPanel = new inputEx.widget.Dialog({
    inputExDef: {
      type: 'form',
      fields: [
        {type:'string', label: 'Name', name: 'firstname', required: true },
        {type:'email', label: 'Email', name: 'email', description: 'Won\'t be displayed...'}, 
        {type:'url', label: 'Website',name:'website', typeInvite: '(optional)'},
        {type:'text', label: 'Your comment',name:'comments'}
      ],
      buttons: [
        {type: 'submit', value: 'Send', onClick: function() { alert(YAHOO.lang.JSON.stringify(Example2.myPanel.getForm().getValue())); return false; // prevent form submit }},
        {type: 'link', value: 'Cancel', onClick: function() { Example2.myPanel.hide(); } }
      ]
    },
    title: 'Please post a comment !',
    panelConfig: {
      constraintoviewport: true,
      underlay:"shadow",
      close:true,
      fixedcenter: true,
      visible:false,
      draggable:true,
      modal: true
    }
  });
};

var loader = new YAHOO.util.YUILoader({
  require: ["inputex-emailfield", "inputex-urlfield", "inputex-selectfield", "inputex-form", "inputex-dialog", "inputex-textarea", "json"],
  loadOptional: true,
  onSuccess: init
});

/**
 * Important: this functions declares all inputEx Modules to YUI
 */
YAHOO.addInputExModules(loader, '../');
loader.insert();
dp.SyntaxHighlighter.HighlightAll('code');
```

--------------------------------

### WireIt Sample Manager and Initialization

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/examples/presentation.html

This JavaScript code defines the `SampleMgr` object, which orchestrates the interactive WireIt presentation. It manages the current sample index, loads and unloads samples, updates the display, and provides navigation functions. The `window.onload` event ensures the presentation initializes automatically when the page loads.

```JavaScript
var SampleMgr = { sampleIndex: 0, init: function() { this.container = YAHOO.util.Dom.get('container'); this.next(); }, previous: function() { this.sampleIndex = Math.max(this.sampleIndex-2,0); this.next(); }, next: function() { if(!YAHOO.lang.isUndefined(this.lastLoaded) && YAHOO.lang.isFunction(WireIt.samples[this.lastLoaded].unload) ) { WireIt.samples[this.lastLoaded].unload(); } if(this.sampleIndex == WireIt.samples.length) return; this.container.innerHTML = WireIt.samples[this.sampleIndex].innerHTML; this.lastLoaded = this.sampleIndex; WireIt.samples[this.sampleIndex].init(); this.sampleIndex += 1; } };
window.onload = function() { SampleMgr.init(); };
```

--------------------------------

### WireIt Custom Adapter Skeleton

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Provides a template for creating a custom WireIt.WiringEditor adapter. It includes a config object, an init method, and asynchronous methods (saveWiring, deleteWiring, listWirings) that use callbacks.

```JavaScript
WireIt.WiringEditor.adapters.MyAdapter = {
	
	// adapter default options
	config: {
		// ...
	},

	// Initialization method called by the WiringEditor
	init: function() {
		
	},

	/**
	 * save/list/delete asynchronous methods
	 */
	saveWiring: function(val, callbacks) {
		// ...
		// don't forget to call the callbacks !
	},

	deleteWiring: function(val, callbacks) {
		// ...
		// don't forget to call the callbacks !
	},

	listWirings: function(val, callbacks) {
		// ...
		// don't forget to call the callbacks !
	}

	// + private methods or properties
};
```

--------------------------------

### JavaScript Configuration and Editor Initialization

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/editor/examples/WiringEditor/index.html

This JavaScript snippet configures the `inputEx` library's spacer image URL and initializes the `WireIt.WiringEditor` once the DOM is ready. It creates an instance of the editor using a `demoLanguage` definition and attempts to open a specific panel in the editor's accordion view, with basic error handling for robustness.

```JavaScript
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";
YAHOO.util.Event.onDOMReady( function() {
  try {
    var editor = new WireIt.WiringEditor(demoLanguage);
    // Open the infos panel
    editor.accordionView.openPanel(2);
  } catch(ex) {
    console.log(ex);
  }
});
```

--------------------------------

### Set and Get Value for inputEx RTEField

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/rte_field.html

Illustrates how to programmatically set and retrieve the content of an inputEx RTEField using its `setValue` and `getValue` methods. The example includes event listeners for buttons to trigger these actions, demonstrating dynamic content manipulation.

```JavaScript
var div = YAHOO.util.Dom.get('container2'); var htmlField = new inputEx.RTEField({parentEl: div, name: 'test2'}); var button1 = inputEx.cn('button', null, null, "SetValue"); div.appendChild(button1); YAHOO.util.Event.addListener(button1, "click" ,function() { htmlField.setValue('RTEField can contain HTML !'); }); var button2 = inputEx.cn('button', null, null, "GetValue"); div.appendChild(button2); YAHOO.util.Event.addListener(button2, "click" ,function() { alert(htmlField.getValue()); });
```

--------------------------------

### Creating a Custom LogicContainer by Extending WireIt.ImageContainer

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Illustrates the creation of a `LogicContainer` class, which inherits from `WireIt.ImageContainer`. This example demonstrates how to initialize a custom property (`logicInputValues`) and correctly set the `xtype` for a specialized container used in applications like interactive logic circuits.

```JavaScript
LogicContainer = function(opts, layer) {
	LogicContainer.superclass.constructor.call(this, opts, layer);
	this.logicInputValues = [];
};
YAHOO.lang.extend(LogicContainer, WireIt.ImageContainer, {

	setOptions: function(options) {
      LogicContainer.superclass.setOptions.call(this, options);
      this.options.xtype = "LogicContainer";
   }
});
```

--------------------------------

### WireIt Layer Initialization and Wiring Configuration

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/examples/label_editor.html

This JavaScript snippet initializes a WireIt.Layer instance and uses its `setWiring` method to define two `WireIt.ImageContainer` modules and a `WireIt.BezierWire` connection between them. It also includes basic CSS for the demo layout, styling the containers and body.

```CSS
body { font-size: 10px; }
div.WireIt-Container { width: 350px; /* Prevent the modules from scratching on the right */ }
div.WireIt-ImageContainer { width: auto; }
div.Bubble div.body { width: 70px; height: 45px; opacity: 0.8; /*cursor: move;*/ }
```

```JavaScript
var demoLayer;
YAHOO.util.Event.addListener(window, 'load', function() {
  // Layer Demo
  demoLayer = new WireIt.Layer({layerMap: false});

  // You can use a global setWiring method
  demoLayer.setWiring({
    containers: [
      // ImageContainer
      {
        position:[600,240],
        "xtype":"WireIt.ImageContainer",
        "image": "bubble.png",
        //draggable: false,
        close: false,
        "terminals": [
          {"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
          {direction: [1,-1], offsetPosition: [25,-10]},
          {direction: [-1,1], offsetPosition: [-10,25]},
          {direction: [1,1], offsetPosition: [25,25]}
        ]
      },
      // ImageContainer
      {
        position:[700,140],
        "xtype":"WireIt.ImageContainer",
        className: "WireIt-Container WireIt-ImageContainer Bubble",
        "image": "bubble.png",
        //draggable: false,
        close: false,
        "terminals": [
          {"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
          {direction: [1,-1], offsetPosition: [25,-10]},
          {direction: [-1,1], offsetPosition: [-10,25]},
          {direction: [1,1], offsetPosition: [25,25]}
        ]
      }
    ],
    wires: [
      {
        src: { moduleId: 0, terminal: "_INPUT1" },
        tgt: { moduleId: 1, terminal: "_INPUT1" },
        label: 'Ouf !!',
        labelEditor: {type: 'string', value: "Testst"},
        xtype: "WireIt.BezierWire"
      }
    ]
  });
});
```

--------------------------------

### WireIt Layer and Event Handling Initialization

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/examples/wire_tooltips.html

Initializes a WireIt layer and sets up the core functionality for handling wire events and displaying interactive UI elements. This includes creating a dynamic tooltip with close functionality, defining event handlers for wire interactions (click, mouse-in, mouse-out), and programmatically generating containers and wires with subscribed events.

```JavaScript
window.onload = function() {
  var layer = new WireIt.Layer({});

  // The wire tooltip
  var wireInfos = WireIt.cn('div', {className: 'wireInfos'}, {display: 'none'}, "<div id='wireTooltip'></div>");
  layer.el.appendChild(wireInfos);

  // method to close the tooltip
  var closeWireInfos = function(e) {
    YAHOO.util.Event.stopEvent(e);
    wireInfos.style.display = "none";
  };

  // close button
  var wireClose = WireIt.cn('div', {className: "WireIt-Container-closebutton"});
  wireInfos.appendChild(wireClose);
  YAHOO.util.Event.addListener(wireClose, 'click', closeWireInfos);

  // Generate the tooltip contents
  YAHOO.util.Event.onAvailable('wireTooltip', function() {
    var el = YAHOO.util.Dom.get('wireTooltip');
    el.innerHTML = "Wires properties :<br />name <input type='text'/><br />";
    var okButton = WireIt.cn('button', null, null, 'Ok');
    el.appendChild(okButton);
    YAHOO.util.Event.addListener(okButton, 'click', closeWireInfos);
    var cancelLink = WireIt.cn('a', {href: "#"}, null, 'cancel');
    el.appendChild(cancelLink);
    YAHOO.util.Event.addListener(cancelLink, 'click', closeWireInfos);
  });

  var wireClick = function(e, params) {
    var xy = params[1];
    var l = this.element.style.left, t = this.element.style.top;
    var li = parseInt(l.substr(0, l.length-2),10), ti = parseInt(t.substr(0, t.length-2),10);
    wireInfos.style.left = (li+xy[0])+"px";
    wireInfos.style.top = (ti+xy[1])+"px";
    wireInfos.style.display = "";
  },
  wireRed = function() {
    this.color = 'rgb(255, 0, 0)';
    this.redraw();
  },
  wireBlue = function() {
    this.color = 'rgb(173, 216, 230)';
    this.redraw();
  };

  // Generate a random layer
  for(var i = 0 ; i < 5 ; i++) {
    layer.addContainer({
      terminals: [
        {direction: [0,1], offsetPosition: {bottom: -13, left: 25}, editable: false }
      ],
      title: "Block #"+i,
      position: [
        Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30
      ]
    });
  }

  for(var i = 0 ; i < 7 ; i++) {
    var w = layer.addWire({ src: {moduleId: Math.floor(Math.random()*5), terminalId: 0}, tgt: {moduleId: Math.floor(Math.random()*5), terminalId: 0} });

    // Subscribe to the wire events
    w.eventMouseIn.subscribe(wireRed, w, true);
    w.eventMouseOut.subscribe(wireBlue, w, true);
    w.eventMouseClick.subscribe(wireClick, w, true);
  }
};
```

--------------------------------

### Set and Get Values with inputEx TinyMCEField

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/tinymce_field.html

This example illustrates how to programmatically set and retrieve values from an `inputEx.TinyMCEField` instance. It creates a field and two buttons: one to set a new HTML value and another to alert the current HTML content of the field.

```JavaScript
var div = YAHOO.util.Dom.get('container2');
var htmlField = new inputEx.TinyMCEField({parentEl: div, name: 'test2'});
var button1 = inputEx.cn('button', null, null, "SetValue");
div.appendChild(button1);
YAHOO.util.Event.addListener(button1, "click" ,function() { htmlField.setValue('TinyMCEField can contain HTML !'); });
var button2 = inputEx.cn('button', null, null, "GetValue");
div.appendChild(button2);
YAHOO.util.Event.addListener(button2, "click" ,function() { alert(htmlField.getValue()); });
```

--------------------------------

### Basic CSS for Page Layout

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/rpc/example.html

This CSS snippet provides styling for the main content area (`#mainBox`), centering it and applying a background color and padding. It also sets a bold font weight for all paragraph elements on the page.

```CSS
#mainBox { margin:40px auto; width: 80%; background-color: #ccccff; padding: 20px; } p { margin: 10px; font-weight: bold; }
```

--------------------------------

### Initialize inputEx Lens with Custom Fields and Visualizations

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/lenses.html

This JavaScript example demonstrates the creation of an `inputEx.Lens` instance, configuring it with various field types (text, email, URL, map), initial values, and a custom HTML layout. It also shows how to define custom visualization functions (`visuType: 'func'`) for specific fields, such as rendering an email as a clickable mailto link or a URL as an image, and setting up global inputEx configurations for map and URL fields.

```javascript
YAHOO.util.Event.onDOMReady( function() {
  // Required for the UrlField and ListField
  inputEx.spacerUrl = "../images/space.gif";
  inputEx.MapFieldGlobals['api'] = 'google';
  inputEx.MapFieldGlobals['api_key'] = {
    'localhost' : 'ABQIAAAADeqGsYygYHMVWXMDJEowhBRA0pJg_vyJNqxN8QciTwW1nvTY9xTHCJ6F7R04FjG06dKgcV5wpIxzZQ',
    'javascript.neyric.com' : ''
  };
  // Example 1
  var g = new inputEx.Lens({
    parentEl: 'container1',
    fields: [ {
      typeInvite: 'Firstname',
      name: 'firstname'
    }, {
      typeInvite: 'Lastname',
      name: 'lastname'
    }, {
      typeInvite: 'Email',
      name: 'email'
    }, {
      type: 'url',
      name: "picUrl",
      typeInvite: 'url'
    }, {
      type: 'map',
      name: "position",
      width: '800px',
      api: 'google'
    } ],
    value: {
      firstname: 'Lena',
      email: 'lena@doe.org',
      picUrl: 'http://www.limsi.fr/Individu/vezien/lena.jpg',
      position: {"lat":48.821332549646634,"lon":1.47216796875,"nzoom":6,"uzoom":-6}
    },
    lens: "<div class='field-picUrl'></div>"+
          "<div style='float: left;'><div class='field-firstname'></div></div>"+
          "<div style='float: left;'><div class='field-lastname'></div></div>"+
          "<div style='clear: both;'></div>"+
          "<div class='field-email'></div>"+
          "<div class='field-position'></div>",
    visus: [
      null,
      null,
      {
        visuType: 'func',
        func: function(val) { return "<a href='mailto:"+val+"'>"+val+"</a>"; }
      },
      {
        visuType: 'func',
        func: function(val) { return '<img src="'+val+'" style="width: 128px; height: 128px;">'; }
      },
      {
        visuType: 'func',
        func: function(val) { return 'lat:'+val.lat+',long:'+val.lon; }
      }
    ]
  });
});
```

--------------------------------

### Apply Custom CSS Styles to WireIt Containers

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Provides an example of how to style WireIt containers using CSS. The WiringEditor adds a specific CSS class (`WiringEditor-module-moduleName`) to each module instance, enabling targeted styling of container width, background color, and text area properties for visual customization.

```CSS

/* Comment Module */
div.WireIt-Container.WiringEditor-module-comment {
	width: 200px; 
}
div.WireIt-Container.WiringEditor-module-comment div.body {
	background-color: #EEEE66; 
}
div.WireIt-Container.WiringEditor-module-comment div.body textarea {
	background-color: transparent; font-weight: bold; border: 0; 
}
```

--------------------------------

### Google Analytics Tracking Script

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/index.html

A standard JavaScript snippet used for integrating Google Analytics tracking into a web page, initializing the tracker and logging a pageview for analytics purposes.

```JavaScript
document.write(unescape("%3Cscript src='http://www.google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); var pageTracker = _gat._getTracker("UA-567557-2"); pageTracker._trackPageview();
```

--------------------------------

### WireIt.ModuleProxy API Methods

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/api/WireIt.WiringEditor.adapters.JsonRpc.html

API documentation for methods available on the WireIt.ModuleProxy object, specifically detailing the 'startDrag' method which initiates a drag operation for a module.

```APIDOC
WireIt.ModuleProxy:
  Methods:
    startDrag()
```

--------------------------------

### Display YQL Query URLs and Content with Trimpath

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/yql-trimpath-page.html

Processes a list of URLs and content from YQL diagnostics. It conditionally renders content as a clickable hyperlink if it starts with 'http://', otherwise, it displays the content as plain text. This helps visualize external resources accessed by the YQL query.

```YQL/Trimpath Template
{for u in query.diagnostics.url} {if u.content.substr(0,7) == "http://"} <li><a href="${u.content}" target="\_new">${u.content.substr(0,45)}...</a></li> {else} <li>${u.content}</li> {/if} {/for}
```

--------------------------------

### WireIt Terminal and Wire Configuration Examples

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/examples/wires_and_terminals.html

Demonstrates various configuration options for WireIt terminals and wires within a web page's onload event. This includes setting default terminals, applying different wire drawing methods (Bezier, Step, Arrow), customizing connection directions, colors, and sizes, defining editing directions, controlling editability, and setting maximum wire connections per terminal.

```JavaScript
window.onload = function() {
  var block1 = YAHOO.util.Dom.get('block1');
  new WireIt.Terminal(block1, {offsetPosition:[30,30] });

  var block2 = YAHOO.util.Dom.get('block2');
  new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.BezierWire"}, offsetPosition:[30,30] });
  new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.StepWire"}, offsetPosition:[100,30] });
  new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.BezierArrowWire"}, offsetPosition:[30,100] });
  new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.ArrowWire"}, offsetPosition:[100,100] });

  var block3 = YAHOO.util.Dom.get('block3');
  new WireIt.Terminal(block3, { direction: [-1,-1], offsetPosition:[30,30] });
  new WireIt.Terminal(block3, { direction: [1,-1], offsetPosition:[100,30] });
  new WireIt.Terminal(block3, { direction: [-1,1], offsetPosition:[30,100] });
  new WireIt.Terminal(block3, { direction: [1,1], offsetPosition:[100,100] });

  var block4 = YAHOO.util.Dom.get('block4');
  new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[30,30], wireConfig:{color: "#EEEE11", bordercolor:"#FFFF00"} });
  new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,30], wireConfig:{color: "#EE1111", bordercolor:"#FF0000"} });
  new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,100], wireConfig:{color: "#EE11EE", bordercolor:"#FF00FF"} });

  var block5 = YAHOO.util.Dom.get('block5');
  new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,30], wireConfig:{width: 5, borderwidth:3} });
  new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,100], wireConfig:{width: 4, borderwidth:0} });
  new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,30], wireConfig:{width: 1, borderwidth:0} });
  new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,100], wireConfig:{width: 1, borderwidth:4} });

  var block6 = YAHOO.util.Dom.get('block6');
  new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [1,0], offsetPosition:[30,30] });
  new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,1], offsetPosition:[100,30] });
  new WireIt.Terminal(block6, { direction: [0,1], fakeDirection: [0,1], offsetPosition:[30,100] });
  new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,-1], offsetPosition:[100,100] });

  var block7 = YAHOO.util.Dom.get('block7');
  var w1 = new WireIt.Wire( new WireIt.Terminal(block7, {offsetPosition:[30,30], editable: false }), new WireIt.Terminal(block7, {offsetPosition:[100,30], editable: false }), document.body);
  w1.redraw();

  var block8 = YAHOO.util.Dom.get('block8');
  new WireIt.Terminal(block8, { nMaxWires: 1, offsetPosition:[30,30] });
  new WireIt.Terminal(block8, { nMaxWires: 2, offsetPosition:[100,30] });
  new WireIt.Terminal(block8, { nMaxWires: 3, offsetPosition:[30,100] });
};
```

--------------------------------

### Include WireIt Production Rollup Files and IE Compatibility Script

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

Provides examples of how to include minified WireIt JavaScript rollup files ('wireit-min.js' or 'wiring-editor-min.js') in an HTML page for production. It also shows the conditional HTML comment for loading 'excanvas.js', which is required for Internet Explorer compatibility but not included in the main rollup files.

```HTML
<script type="text/javascript" src="lib/wireit/build/wireit-min.js"></script>

<script type="text/javascript" src="lib/wireit/build/wiring-editor-min.js"></script>

<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
```

--------------------------------

### CSS Styling for WireIt and inputEx Elements

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/examples/index.html

Defines basic CSS rules for WireIt containers, terminals, and inputEx group labels to control their appearance and layout within a web page, ensuring proper sizing and positioning.

```CSS
body { font-size: 10px; } div.WireIt-Container { width: 350px; /* Prevent the modules from scratching on the right */ } div.WireIt-InputExTerminal { float: left; width: 21px; height: 21px; position: relative; } div.WireIt-InputExTerminal div.WireIt-Terminal { top: -3px; left: -7px; } div.inputEx-Group div.inputEx-label { width:100px; }
```

--------------------------------

### JavaScript Google Gears Installation Check

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/editor/examples/gearsAdapter/index.html

This JavaScript snippet checks if Google Gears is installed in the user's browser. If Gears is not detected, the script redirects the user to the Google Gears installation page, prompting them to install the necessary plugin to view the WiringEditor application.

```JavaScript
if (!window.google || !google.gears) {
    location.href = "http://gears.google.com/?action=install&message=Please install gears to view WiringEditor Gears adapter" + "&return="+window.encodeURIComponent(""+window.location);
}
```

--------------------------------

### JavaScript WireIt Terminal Creation on Page Load

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/examples/step_wires.html

This JavaScript code initializes WireIt's default wire class and, upon the window loading, dynamically creates multiple WireIt terminals. It uses `YAHOO.util.Dom.get` (indicating a dependency on the YUI library) to retrieve specific block elements and then iterates to instantiate `WireIt.Terminal` objects on each block, configuring their direction and offset positions to enable interactive wire connections.

```JavaScript
WireIt.defaultWireClass = "WireIt.StepWire"; window.onload = function() { var bl = YAHOO.util.Dom.get('blockLeft'); var br = YAHOO.util.Dom.get('blockRight'); var bt = YAHOO.util.Dom.get('blockTop'); var bb = YAHOO.util.Dom.get('blockBottom'); for( var i = 0 ; i < 7 ; i++) { new WireIt.Terminal(bl, {direction: [1,0], offsetPosition:[0,i*50] }); new WireIt.Terminal(br, {direction: [-1,0], offsetPosition:[0,i*50] }); new WireIt.Terminal(bt, {direction: [0,1], offsetPosition:[i*50,0] }); new WireIt.Terminal(bb, {direction: [0,-1], offsetPosition:[i*50,0] }); } };
```

--------------------------------

### inputEx.RPC.Transport: GET Method

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/api/listCustom.js.html

Documents the `GET` method of the `inputEx.RPC.Transport` class. This method handles HTTP GET requests for RPC communication, used to retrieve data from a remote service.

```APIDOC
inputEx.RPC.Transport.GET()
```

--------------------------------

### Configure a WireIt Module with Basic Container and Terminals

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

This JSON snippet illustrates how to define a module using the `WireIt.Container` class. It specifies an icon path and an array of terminal configurations, each with a name, direction, and offset position for precise placement within the container.

```json
{
       "name": "demoModule",
       "container": {
    		"xtype":"WireIt.Container", 

			"icon": "../../assets/application_edit.png",
    		"terminals": [
    			{"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 }},
    			{"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 }},
    			{"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 }}
    		]
    	}
    }
```

--------------------------------

### API Reference for inputEx.RPC.Transport

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/api/UpperCaseField.js.html

Details the `GET` method for the `inputEx.RPC.Transport` component, likely used for making HTTP GET requests.

```APIDOC
Host: inputEx.RPC.Transport
  Methods:
    - GET()
```

--------------------------------

### Initialize WireIt WiringEditor on DOM Ready

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/guide.html

This JavaScript snippet demonstrates how to initialize the WireIt.WiringEditor instance once the DOM is ready. It passes the defined visual language object to the constructor and includes basic error handling for the initialization process.

```javascript
YAHOO.util.Event.onDOMReady( function() { 
		try {
			logicGates = new WireIt.WiringEditor(myLanguage); 
		}catch(ex) {
			alert(ex);
		}
	});
```

--------------------------------

### Initialize YQL Query and Trimpath Page with JSON Tree Inspector

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/examples/yql-trimpath-page.html

Executes a YQL query to search for Flickr photos, converts the XML response to JSON, and then initializes the `inputEx.YQL.initTrimpathPage` utility. It includes a `YAHOO.util.Event.onDOMReady` callback to display the query results using an `inputEx.widget.JsonTreeInspector` widget.

```JavaScript
y.log("Hello World"); var q = "select \* from flickr.photos.search where text=\"juggler\""; var query = y.query(q); var json = y.xmlToJson(query.results); y.log("Everything's fine"); response.object = json; // Executed when DOM is loaded
YAHOO.util.Event.onDOMReady(function() { // This is an example of an additionnal callback, to display a JsonTreeInspector widget from the yql response
  var callback0 = function(results) { new inputEx.widget.JsonTreeInspector('treeContainer', {query: results.query}); }; // Call the yql-trimpath-page utility (with a list of callbacks for each "text/yql" script tag)
  inputEx.YQL.initTrimpathPage([[callback0]]);
});
```

--------------------------------

### Get State for inputEx.Field (JavaScript)

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/api/CombineField.js.html

Retrieves the current state or value of an inputEx.Field. This method is commonly used to get the data held by a form field.

```APIDOC
inputEx.Field.getState()
```

--------------------------------

### Get State for inputEx.MultiAutoComplete (JavaScript)

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/api/CombineField.js.html

Retrieves the current state or selected values of an inputEx.MultiAutoComplete field. This method is used to get the data from a multi-select autocomplete input.

--------------------------------

### Dynamically Creating WireIt Terminals on Page Load

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/examples/creating_terminals.html

This JavaScript code executes on window load, retrieving references to four block elements (`blockLeft`, `blockRight`, `blockTop`, `blockBottom`) using YAHOO.util.Dom.get. It then iteratively creates multiple `WireIt.Terminal` instances for each block, configuring their direction and offset positions to enable drag-and-drop wiring functionality.

```JavaScript
window.onload = function() {
  var bl = YAHOO.util.Dom.get('blockLeft');
  var br = YAHOO.util.Dom.get('blockRight');
  var bt = YAHOO.util.Dom.get('blockTop');
  var bb = YAHOO.util.Dom.get('blockBottom');
  for( var i = 0 ; i < 7 ; i++) {
    new WireIt.Terminal(bl, {direction: [1,0], offsetPosition:[0,i*50] });
    new WireIt.Terminal(br, {direction: [-1,0], offsetPosition:[0,i*50] });
    new WireIt.Terminal(bt, {direction: [0,1], offsetPosition:[i*50,0] });
    new WireIt.Terminal(bb, {direction: [0,-1], offsetPosition:[i*50,0] });
  }
};
```

--------------------------------

### Get Input Value in inputEx.widget.CellEditor (JavaScript)

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/api/CombineField.js.html

Retrieves the current input value from an inputEx.widget.CellEditor. This method is used to get the data entered or modified within an editable table cell.

```APIDOC
inputEx.widget.CellEditor.getInputValue()
```

--------------------------------

### Perform GET Request with inputEx.RPC.Transport (JavaScript)

Source: https://github.com/vaibhavbansal/spiffworkflow/blob/master/wireit-editor/wireit/plugins/inputex/lib/inputex/api/CombineField.js.html

Executes an HTTP GET request using the inputEx.RPC.Transport mechanism. This method is part of the RPC service for fetching data from a specified URL.

```APIDOC
inputEx.RPC.Transport.GET()
```