Wire It Presentation
Upcoming SlideShare
Loading in...5
×
 

Wire It Presentation

on

  • 4,501 views

 

Statistics

Views

Total Views
4,501
Views on SlideShare
3,527
Embed Views
974

Actions

Likes
0
Downloads
18
Comments
1

19 Embeds 974

http://javascript.neyric.com 884
http://localhost 26
http://localhost:8888 20
http://www.linkedin.com 10
file:// 7
https://www.linkedin.com 6
http://www.slideshare.net 5
http://www.slideee.com 3
http://jsbox.neyric.com 2
https://concordconsortium.basecamphq.com 2
http://localhost:4242 1
http://razvoj.amis.si 1
http://xslt.portlanddatasystems.com 1
http://val 1
http://localhost:8080 1
http://blrkec88539d 1
http://203.208.39.132 1
http://dev.doujinshi.pl 1
http://127.0.0.1:8888 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…



  • <b>[Comment posted from</b> http://javascript.neyric.com/blog/2009/05/17/wireit-040-released/]
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Wire It Presentation Wire It Presentation Presentation Transcript

  • WireIt Presentation http://javascript.neyric.com/wireit Eric Abouaf – february 2009
  • What is it ?
      • Javascript library to create « web wirable interface »
      • Uses the YUI Library
      • Open source, MIT license
      • Supports all major browsers
  • What's in it ? MySQL
  • What's it for ?
      • Any « wirable interface » :
      • Mashups
      • Workflow
      • Visual Programming
      • Dataflow
      • Database querying
      • ...
  • Examples «  tarpipe makes it easy to share content across different social media applications. »
  • Examples « The Planar Game: Arrange the vertices such that no edges overlap. »
  • 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)
  • Examples «  PBX Editor : Create voice menus with a few clicks » (not done with WireIt, just an example...)
  • Examples JsBox: Proof of concept for visual programming
  • 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
  • How does it work ?
    • Canvas tag to draw wires with bezier curves
    • excanvas for IE support
    • YUI magic
    • InputEx form library
  • Terminals & Wires properties
  • Containers Image Containers Form Containers (using inputEx ) Inputs/outputs Containers + create your own Extend the base Container class
  • WiringEditor A full-page interface for common WireIt uses.
  • 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
  • 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: [ … ] }
  • 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;, ... } }
  • 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
  • Custom Backend Client (Browser) Server
      • The WiringEditor uses Service Mapping Description (SMD) and YUI-RPC
      • for good data/interface separation.
      • You can easily implement your own backend in your favorite language.
      • You just have to provide a SMD file with the methods required by the WiringEditor.
    JSON-RPC MySQL
  • Ressources
      • Download link:
      • http://javascript.neyric.com/wireit
      • Source repository on GitHub:
    http://github.com/neyric/wireit/
      • Ticket/Bug tracker
      • http://lighthouse.org/
      • Forums:
    http://groups.google.com/group/wireit/
      • Blog:
      • http://javascript.neyric.com/blog/category/wireit/
  • Thanks ! Eric Abouaf [email_address] http://javascript.neyric.com/blog