- 1. WireIt Presentation http://javascript.neyric.com/wireit Eric
Abouaf february 2009
2. What is it ?
-
- Javascript library to create web wirable interface
- 3. Uses theYUI Library
4. Open source,MIT license 5. Supports all major browsers 6.
What's in it ? MySQL 7. What's it for ?
9. Workflow 10. Visual Programming 11. Dataflow 12. Database
querying 13. ... 14. Examples tarpipemakes it easy to share content
across different social media applications. 15. Examples The Planar
Game: Arrange the vertices such that no edges overlap. 16. Examples
Graphpipesis a simple and easy way to aggregate semantic data. By
using drag'n'drop you are able to create SPARQL-queries and reuse
them later in your networked graphs. (proof of concept, early beta)
17. Examples PBX Editor : Create voice menus with a few clicks (not
done with WireIt, just an example...) 18. Examples JsBox: Proof of
concept for visual programming 19. How to edit wires ? 1. Start
dragging from a terminal 2. Drop on an other terminal 3. Click on
the scissors to cut the wires 20. How does it work ?
- Canvas tag to draw wires with bezier curves
21. excanvasfor IE support 22. YUImagic 23. InputExform library
24. Terminals & Wires properties 25. Containers Image
Containers Form Containers(usinginputEx ) Inputs/outputs Containers
+ create your own Extend the base Container class 26. WiringEditor
A full-page interface for common WireIt uses. 27. WiringEditor A
full-page interface for common WireIt uses. 1. Define your visual
language(modules + WiringEditor options) 3.
Process/Interpret/Translate the wiring JSON 2. Edit wirings
inyourlanguage DB storage WiringEditor 28. JSON Language Definition
{ // Language name languageName: "jsBox", // Url of the SMD file
(link to the backend) smdUrl:
'../../WiringEditor/WiringEditor.smd', // JSONinputEx definition
for the properties form propertiesFields: [ {"type": "string",
inputParams: {"name": "name", label: "Title" } }, {"type": "text",
inputParams: {"name": "description", label: "Description"} } ], //
JSONModules definition modules: [ ] } 29. JSON Module Definition {
// Module name "name": "comment", // Container JSON properties
"container": { // Container class "xtype": "WireIt.Container", //
Terminals config : "terminals": [ { "name": "inputA","direction":
[0,1],"offsetPosition": {"left": 86, "bottom": -15},"ddConfig": {
"type": "output", "allowedTypes": ["input"] } }, ... ], // Other
container options "title": "Comment", ... } } 30. Wiring JSON { //
List of module instances "modules": [ { "config": { "position":
[130,28] }, "name":"myModule1", }, { "config": { "position":
[270,280] }, "name":"myModule2", } ], // List of wire instances
"wires": [ { "src": { "moduleId":0, "terminal":" out" }, "tgt": {
"moduleId":1,"terminal":"in"} } ], // Properties form value
"properties": { "description":"A wiring example",
"name":"ExampleModule" } } myModule1 myModule2 31. Custom Backend
Client (Browser) Server
-
- The WiringEditor usesService Mapping Description(SMD)
andYUI-RPC
- 32. for good data/interface separation.
33. You can easily implement your own backend in your favorite
language. 34. You just have to provide a SMD file with the methods
required by the WiringEditor. JSON-RPC MySQL 35. Ressources
-
- 36. http://javascript.neyric.com/wireit
37. Source repository on GitHub:
http://github.com/neyric/wireit/
-
- 38. http://lighthouse.org/
http://groups.google.com/group/wireit/
-
- 39. http://javascript.neyric.com/blog/category/wireit/
40. Thanks ! Eric Abouaf [email_address]
http://javascript.neyric.com/blog
