Skip to content

Commit

Permalink
Configurable Ajax adapter - can do REST
Browse files Browse the repository at this point in the history
  • Loading branch information
ericabouaf committed Jul 21, 2009
1 parent e8d5046 commit 9c4ea08
Show file tree
Hide file tree
Showing 7 changed files with 403 additions and 4 deletions.
3 changes: 1 addition & 2 deletions VERSION.txt
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ not released yet
Current:

* Layer.onChangeEvt (+implementation in WiringEditor for saved state)
* Adapters:
* Ajax (3 different actions) / REST adapter
* XML Conversion Adapter

* BUG: WiringEditor: Containers are mispositionned when the layer is scrolled
Expand All @@ -34,6 +32,7 @@ Changeset:
* Adapters: (removed the complicated SMD & YUI-RPC stuff)
* JSON-RPC (the old adapter)
* Gears (if no backend usable)
* Ajax adapter - configurable XHR calls. Can be configured to do REST or something else...
* propertiesFields default value (becomes optional)

* WireIt Guide
Expand Down
1 change: 1 addition & 0 deletions examples/ajaxAdapter/fakeSaveDelete.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"error":null}
226 changes: 226 additions & 0 deletions examples/ajaxAdapter/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WireIt - WiringEditor using Ajax Adapter</title>
<link rel="icon" href="../favicon.ico" type="image/png" />
<link rel="SHORTCUT ICON" href="../favicon.ico" type="image/png" />

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />

<style>
div.WireIt-Container {
width: 350px; /* Prevent the modules from scratching on the right */
}

div.WireIt-InOutContainer {
width: 150px;
}

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;
}

div.WireIt-ImageContainer {
width: auto;
}

div.Bubble div.body {
width: 70px;
height: 45px;
opacity: 0.8;
cursor: move;
}

.WiringEditor-module span {
position: relative;
top: -3px;
}

</style>


<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../../lib/yui/tabview/tabview-min.js"></script>

<!-- InputEx with wirable options (WirableField-beta) -->
<script src="../../lib/inputex/js/inputex.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/Field.js" type='text/javascript'></script>
<script type="text/javascript" src="../../js/util/inputex/WirableField-beta.js"></script>
<script src="../../lib/inputex/js/Group.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/Visus.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/StringField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/Textarea.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/SelectField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/EmailField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/UrlField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/ListField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/CheckBox.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/InPlaceEdit.js" type='text/javascript'></script>

<!-- YUI-Accordion -->
<script src="../../lib/accordionview/accordionview-min.js" type='text/javascript'></script>

<script type="text/javascript" src="../../lib/canvas.text.js"></script>

<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../../js/WireIt.js"></script>
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../js/Wire.js"></script>
<script type="text/javascript" src="../../js/Terminal.js"></script>
<script type="text/javascript" src="../../js/util/DD.js"></script>
<script type="text/javascript" src="../../js/util/DDResize.js"></script>
<script type="text/javascript" src="../../js/Container.js"></script>
<script type="text/javascript" src="../../js/Layer.js"></script>
<script type="text/javascript" src="../../js/Layout.js"></script>
<script type="text/javascript" src="../../js/util/inputex/FormContainer-beta.js"></script>
<script type="text/javascript" src="../../js/LayerMap.js"></script>
<script type="text/javascript" src="../../js/WiringEditor.js"></script>
<script type="text/javascript" src="../../js/ImageContainer.js"></script>
<script type="text/javascript" src="../../js/InOutContainer.js"></script>
<script type="text/javascript" src="../../js/adapters/ajax.js"></script>


<script type="text/javascript" src="../WiringEditor/demo.js"></script>


<style>
/* 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; }
</style>

<script>

// InputEx needs a correct path to this image
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";


YAHOO.util.Event.onDOMReady( function() {

try {


WireIt.WiringEditor.adapters.Ajax.config = {
saveWiring: {
method: 'GET',
url: 'fakeSaveDelete.json'
},
deleteWiring: {
method: 'GET',
url: function(value) {
if(console && console.log) {
console.log(value);
}
// for a REST query you might want to send a DELETE /resource/wirings/moduleName
return "fakeSaveDelete.json";
}
},
listWirings: {
method: 'GET',
url: 'listWirings.json'
}
};

demoLanguage.adapter = WireIt.WiringEditor.adapters.Ajax;

editor = new WireIt.WiringEditor(demoLanguage);

// Open the infos panel
editor.accordionView.openPanel(2);

}
catch(ex) {
console.log(ex);
}

});

</script>

</head>

<body class="yui-skin-sam">

<div id="top">
<div class="logo">Ajax Adapter</a></div>
<div id="toolbar"></div>
<div class="topright">
<span>Hello there !</span> |
<a href="../..">back to WireIt</a>
</div>
</div>


<div id="left">
</div>

<div id="right">
<ul id="accordionView">
<li>
<h2>Properties</h2>
<div>
<div id="propertiesForm"></div>
</div>
</li>
<li>
<h2>Minimap</h2>
<div style='position: relative;'>
<div id="layerMap"></div>
</div>
</li>
<li>
<h2>Infos</h2>
<div>
<div style="padding: 10px;">
<p>Uses Ajax Adapter</p>
</div>
</div>
</li>

</ul>
</div>

<div id="center">
</div>


<div id="helpPanel">
<div class="hd">Welcome to the WiringEditor demonstration</div>
<div class="bd" style="text-align: left;">
<p>Uses Ajax Adapter</p>
</div>
</div>

</body>
</html>
1 change: 1 addition & 0 deletions examples/ajaxAdapter/listWirings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"id":"42","name":"bubbles","working":"{\"modules\":[{\"config\":{\"position\":[132,77],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[371,161],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[143,308],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}}],\"properties\":{\"category\":\"Demo\",\"description\":\"\",\"isTest\":true,\"name\":\"bubbles\"},\"wires\":[{\"src\":{\"moduleId\":0,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":0,\"terminal\":\"bl\"},\"tgt\":{\"moduleId\":2,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":2,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"bl\"}},{\"src\":{\"moduleId\":1,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":2,\"terminal\":\"br\"}},{\"src\":{\"moduleId\":0,\"terminal\":\"tl\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"tr\"}},{\"src\":{\"moduleId\":0,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":2,\"terminal\":\"bl\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"13","name":"AND gates 1","working":"{\"modules\":[{\"config\":{\"position\":[200,200],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"AND gate\",\"value\":{}},{\"config\":{\"position\":[454,106],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"AND gate\",\"value\":{}}],\"properties\":{\"description\":\"\",\"name\":\"AND gates 1\"},\"wires\":[{\"src\":{\"moduleId\":1,\"terminal\":\"_INPUT2\"},\"tgt\":{\"moduleId\":0,\"terminal\":\"_OUTPUT\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"15","name":"Mon forum","working":"{\"modules\":[{\"config\":{\"position\":[98,71]},\"name\":\"PostContainer\",\"value\":{\"comments\":[\"ca a l'air\",\"trop cool\",\"putain\",\"c mortel\"],\"post\":\"D\u00e9moentielle !!!\"}},{\"config\":{\"position\":[329,342]},\"name\":\"PostContainer\",\"value\":{\"comments\":[\"Ceci est mon interface\"],\"post\":\"C'est vraiment g\u00e9nial ce truc !!!\\n\"}}],\"properties\":{\"description\":\"\",\"name\":\"Mon forum\"},\"wires\":[{\"src\":{\"moduleId\":0,\"terminal\":\"FOLLOWUPS\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"SOURCES\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"43","name":"inputex","working":"{\"modules\":[{\"config\":{\"position\":[273,158]},\"name\":\"FormContainer\",\"value\":{\"email\":\"[wired]\",\"firstname\":\"\",\"happy\":true,\"lastname\":\"Dupont\",\"title\":\"Mr\",\"website\":\"\"}},{\"config\":{\"position\":[126,195],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[168,375],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}}],\"properties\":{\"description\":\"\",\"name\":\"inputex\"},\"wires\":[{\"src\":{\"moduleId\":1,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":2,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":2,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"tr\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"96","name":"testtest","working":"{\"modules\":[{\"config\":{\"position\":[267,319],\"xtype\":\"WireIt.InOutContainer\"},\"name\":\"InOut test\",\"value\":{}},{\"config\":{\"position\":[59,126],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[382,304],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[265,25]},\"name\":\"FormContainer\",\"value\":{\"email\":\"[wired]\",\"firstname\":\"\",\"happy\":true,\"lastname\":\"Dupont\",\"title\":\"Mr\",\"website\":\"\"}}],\"properties\":{\"description\":\"\",\"name\":\"testtest\"},\"wires\":[{\"src\":{\"moduleId\":1,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":2,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":1,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":2,\"terminal\":\"tr\"}},{\"src\":{\"moduleId\":1,\"terminal\":\"bl\"},\"tgt\":{\"moduleId\":2,\"terminal\":\"bl\"}},{\"src\":{\"moduleId\":0,\"terminal\":\"error\"},\"tgt\":{\"moduleId\":3,\"terminal\":\"email\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"93","name":"testInOutContainer","working":"{\"modules\":[{\"config\":{\"position\":[373,67],\"xtype\":\"WireIt.InOutContainer\"},\"name\":\"InOut example\",\"value\":{}},{\"config\":{\"position\":[99,190],\"xtype\":\"WireIt.InOutContainer\"},\"name\":\"InOut example\",\"value\":{}}],\"properties\":{\"description\":\"\",\"name\":\"testInOutContainer\"},\"wires\":[{\"src\":{\"moduleId\":1,\"terminal\":\"result\"},\"tgt\":{\"moduleId\":0,\"terminal\":\"text1\"}},{\"src\":{\"moduleId\":1,\"terminal\":\"error\"},\"tgt\":{\"moduleId\":0,\"terminal\":\"option1\"}},{\"src\":{\"moduleId\":1,\"terminal\":\"text2\"},\"tgt\":{\"moduleId\":0,\"terminal\":\"result\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"94","name":"testComments","working":"{\"modules\":[{\"config\":{\"position\":[356,160]},\"name\":\"PostContainer\",\"value\":{\"comments\":[\"Comment1\",\"Comment2\"],\"post\":\"This is a test !!!\\n\"}},{\"config\":{\"position\":[126,60],\"xtype\":\"WireIt.InOutContainer\"},\"name\":\"InOut test\",\"value\":{}},{\"config\":{\"position\":[176,350]},\"name\":\"PostContainer\",\"value\":{\"comments\":[],\"post\":\"test\"}}],\"properties\":{\"description\":\"\",\"name\":\"testComments\"},\"wires\":[{\"src\":{\"moduleId\":2,\"terminal\":\"SOURCES\"},\"tgt\":{\"moduleId\":0,\"terminal\":\"FOLLOWUPS\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"97","name":"guideAutoloadDemo","working":"{\"modules\":[{\"config\":{\"position\":[146,137],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[255,139],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[105,47],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[126,327],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[158,417],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}},{\"config\":{\"position\":[279,404],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"Bubble\",\"value\":{}}],\"properties\":{\"description\":\"\",\"name\":\"guideAutoloadDemo\"},\"wires\":[{\"src\":{\"moduleId\":0,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":0,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"bl\"}},{\"src\":{\"moduleId\":2,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":0,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":2,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"tr\"}},{\"src\":{\"moduleId\":2,\"terminal\":\"bl\"},\"tgt\":{\"moduleId\":0,\"terminal\":\"bl\"}},{\"src\":{\"moduleId\":2,\"terminal\":\"tl\"},\"tgt\":{\"moduleId\":3,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":1,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":3,\"terminal\":\"tr\"}},{\"src\":{\"moduleId\":4,\"terminal\":\"tl\"},\"tgt\":{\"moduleId\":3,\"terminal\":\"bl\"}},{\"src\":{\"moduleId\":4,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":3,\"terminal\":\"br\"}},{\"src\":{\"moduleId\":4,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":5,\"terminal\":\"tl\"}},{\"src\":{\"moduleId\":5,\"terminal\":\"tr\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"tr\"}},{\"src\":{\"moduleId\":5,\"terminal\":\"br\"},\"tgt\":{\"moduleId\":4,\"terminal\":\"bl\"}},{\"src\":{\"moduleId\":5,\"terminal\":\"bl\"},\"tgt\":{\"moduleId\":4,\"terminal\":\"br\"}}]}","language":"meltingpotDemo","readonly":"0"},{"id":"98","name":"testComment","working":"{\"modules\":[{\"config\":{\"position\":[344,68]},\"name\":\"comment\",\"value\":{\"comment\":\"Ceci est un test\\n\\nIl sert \u00e0 rien d'autre !!!\"}}],\"properties\":{\"category\":\"Test\",\"description\":\"\",\"isTest\":false,\"name\":\"testComment\"},\"wires\":[]}","language":"meltingpotDemo","readonly":"0"},{"id":"99","name":"demo","working":"{\"modules\":[{\"config\":{\"position\":[166,195],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"AND gate\",\"value\":{}},{\"config\":{\"position\":[454,271],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"AND gate\",\"value\":{}},{\"config\":{\"position\":[149,403],\"xtype\":\"WireIt.ImageContainer\"},\"name\":\"AND gate\",\"value\":{}}],\"properties\":{\"category\":\"Demo\",\"description\":\"\",\"isTest\":true,\"name\":\"demo\"},\"wires\":[{\"src\":{\"moduleId\":0,\"terminal\":\"_OUTPUT\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"_INPUT1\"}},{\"src\":{\"moduleId\":2,\"terminal\":\"_OUTPUT\"},\"tgt\":{\"moduleId\":1,\"terminal\":\"_INPUT2\"}}]}","language":"meltingpotDemo","readonly":"0"}]
10 changes: 8 additions & 2 deletions js/WiringEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -333,8 +333,8 @@ WireIt.WiringEditor.prototype = {
* saveModule failure callback
* @method saveModuleFailure
*/
saveModuleFailure: function(o) {
this.alert("error while saving! ");
saveModuleFailure: function(errorStr) {
this.alert("Unable to save the wiring : "+errorStr);
},

alert: function(txt) {
Expand Down Expand Up @@ -375,6 +375,9 @@ WireIt.WiringEditor.prototype = {
this.onNew();
this.alert("Deleted !");
},
failure: function(errorStr) {
this.alert("Unable to delete wiring: "+errorStr);
},
scope: this
});

Expand Down Expand Up @@ -462,6 +465,9 @@ WireIt.WiringEditor.prototype = {
success: function(result) {
this.onLoadSuccess(result);
},
failure: function(errorStr) {
this.alert("Unable to load the wirings: "+errorStr);
},
scope: this
}
);
Expand Down
73 changes: 73 additions & 0 deletions js/adapters/ajax.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/**
* Ajax Adapter. Expect JSON response for all queries.
* @static
*/
WireIt.WiringEditor.adapters.Ajax = {

/**
* You can configure this adapter to different schemas.
* url can be functions !
*/
config: {
saveWiring: {
method: 'POST',
url: 'saveWiring'
},
deleteWiring: {
method: 'DELETE',
url: 'deleteWiring'
},
listWirings: {
method: 'GET',
url: 'listWirings'
}
},


saveWiring: function(val, callbacks) {
this._sendRequest("saveWiring", val, callbacks);
},

deleteWiring: function(val, callbacks) {
this._sendRequest("deleteWiring", val, callbacks);
},

listWirings: function(val, callbacks) {
this._sendRequest("listWirings", val, callbacks);
},


_sendRequest: function(action, value, callbacks) {

var params = [];
for(var key in value) {
if(value.hasOwnProperty(key)) {
params.push(window.encodeURIComponent(key)+"="+window.encodeURIComponent(value[key]));
}
}
var postData = params.join('&');

var url = "";
if( YAHOO.lang.isFunction(this.config[action].url) ) {
url = this.config[action].url(value);
}
else {
url = this.config[action].url;
}

var method = this.config[action].method;

YAHOO.util.Connect.asyncRequest(method, url, {
success: function(o) {
var s = o.responseText,
r = YAHOO.lang.JSON.parse(s);
callbacks.success.call(callbacks.scope, r);
},
failure: function(o) {
var error = o.status + " " + o.statusText;
callbacks.failure.call(callbacks.scope, error);
}
},postData);
}

};
Loading

0 comments on commit 9c4ea08

Please sign in to comment.