Wire It Presentation

3,364 views
3,244 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes



  • <b>[Comment posted from</b> http://javascript.neyric.com/blog/2009/05/17/wireit-040-released/]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
3,364
On SlideShare
0
From Embeds
0
Number of Embeds
987
Actions
Shares
0
Downloads
19
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Wire It Presentation

  1. 1. WireIt Presentation http://javascript.neyric.com/wireit Eric Abouaf – february 2009
  2. 2. What is it ? <ul><ul><li>Javascript library to create « web wirable interface »
  3. 3. Uses the YUI Library
  4. 4. Open source, MIT license
  5. 5. Supports all major browsers </li></ul></ul>
  6. 6. What's in it ? MySQL
  7. 7. What's it for ? <ul><ul><li>Any « wirable interface » :
  8. 8. Mashups
  9. 9. Workflow
  10. 10. Visual Programming
  11. 11. Dataflow
  12. 12. Database querying
  13. 13. ... </li></ul></ul>
  14. 14. Examples «  tarpipe makes it easy to share content across different social media applications. »
  15. 15. Examples « The Planar Game: Arrange the vertices such that no edges overlap. »
  16. 16. Examples «  Graphpipes is 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. 17. Examples «  PBX Editor : Create voice menus with a few clicks » (not done with WireIt, just an example...)
  18. 18. Examples JsBox: Proof of concept for visual programming
  19. 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. 20. How does it work ? <ul><li>Canvas tag to draw wires with bezier curves
  21. 21. excanvas for IE support
  22. 22. YUI magic
  23. 23. InputEx form library </li></ul>
  24. 24. Terminals & Wires properties
  25. 25. Containers Image Containers Form Containers (using inputEx ) Inputs/outputs Containers + create your own Extend the base Container class
  26. 26. WiringEditor A full-page interface for common WireIt uses.
  27. 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 » in your language DB storage WiringEditor
  28. 28. JSON Language Definition { // Language name languageName: &quot;jsBox&quot;, // Url of the SMD file (link to the backend) smdUrl: '../../WiringEditor/WiringEditor.smd', // JSON inputEx definition for the properties form propertiesFields: [ {&quot;type&quot;: &quot;string&quot;, inputParams: {&quot;name&quot;: &quot;name&quot;, label: &quot;Title&quot; } }, {&quot;type&quot;: &quot;text&quot;, inputParams: {&quot;name&quot;: &quot;description&quot;, label: &quot;Description&quot;} } ], // JSON Modules definition modules: [ … ] }
  29. 29. JSON Module Definition { // Module name &quot;name&quot;: &quot;comment&quot;, // Container JSON properties &quot;container&quot;: { // Container class &quot;xtype&quot;: &quot;WireIt.Container&quot;, // Terminals config : &quot;terminals&quot;: [ { &quot;name&quot;: &quot;inputA&quot;, &quot;direction&quot;: [0,1], &quot;offsetPosition&quot;: {&quot;left&quot;: 86, &quot;bottom&quot;: -15}, &quot;ddConfig&quot;: { &quot;type&quot;: &quot;output&quot;, &quot;allowedTypes&quot;: [&quot;input&quot;] } }, ... ], // Other container options &quot;title&quot;: &quot;Comment&quot;, ... } }
  30. 30. Wiring JSON { // List of module instances &quot;modules&quot;: [ { &quot;config&quot;: { &quot;position&quot;: [130,28] }, &quot;name&quot;:&quot;myModule1&quot;, }, { &quot;config&quot;: { &quot;position&quot;: [270,280] }, &quot;name&quot;:&quot;myModule2&quot;, } ], // List of wire instances &quot;wires&quot;: [ { &quot;src&quot;: { &quot;moduleId&quot;:0, &quot;terminal&quot;:&quot; out&quot; }, &quot;tgt&quot;: { &quot;moduleId&quot;:1,&quot;terminal&quot;:&quot;in&quot;} } ], // Properties form value &quot;properties&quot;: { &quot;description&quot;:&quot;A wiring example&quot;, &quot;name&quot;:&quot;ExampleModule&quot; } } myModule1 myModule2
  31. 31. Custom Backend Client (Browser) Server <ul><ul><li>The WiringEditor uses Service Mapping Description (SMD) and YUI-RPC
  32. 32. for good data/interface separation.
  33. 33. You can easily implement your own backend in your favorite language.
  34. 34. You just have to provide a SMD file with the methods required by the WiringEditor. </li></ul></ul>JSON-RPC MySQL
  35. 35. Ressources <ul><ul><li>Download link:
  36. 36. http://javascript.neyric.com/wireit
  37. 37. Source repository on GitHub: </li></ul></ul>http://github.com/neyric/wireit/ <ul><ul><li>Ticket/Bug tracker
  38. 38. http://lighthouse.org/ </li></ul></ul><ul><ul><li>Forums: </li></ul></ul>http://groups.google.com/group/wireit/ <ul><ul><li>Blog:
  39. 39. http://javascript.neyric.com/blog/category/wireit/ </li></ul></ul>
  40. 40. Thanks ! Eric Abouaf [email_address] http://javascript.neyric.com/blog

×