• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wire It 0.5.0 Presentation
 

Wire It 0.5.0 Presentation

on

  • 93,674 views

Presentation of the WireIt Library (v 0.5.0)

Presentation of the WireIt Library (v 0.5.0)

Statistics

Views

Total Views
93,674
Views on SlideShare
3,832
Embed Views
89,842

Actions

Likes
10
Downloads
76
Comments
0

222 Embeds 89,842

http://neyric.github.com 73648
http://dev.lshift.net 8483
http://javascript.neyric.com 3486
http://localhost 1734
http://127.0.0.1 356
http://blog.amt.in 336
http://heater.cs.man.ac.uk 294
http://192.168.56.1 100
http://translate.googleusercontent.com 77
http://churchm.ag 48
http://10.65.44.70 47
http://softworkr.tumblr.com 47
http://193.194.64.21 46
http://www.softworkr.com 40
http://46.252.193.174 36
http://10.30.46.14 35
http://192.168.0.153 31
http://192.168.0.153 31
http://www.hm3.com 30
http://189.27.176.148 27
http://lib.swpu.edu.cn 26
http://lx.io 24
http://dev01-jail14.mms.miniy.yahoo.co.jp 24
http://rpc466.cs.man.ac.uk 23
http://ubuntu 22
http://localhost:8888 22
http://dev-0101 22
http://88.198.47.221 20
http://192.168.56.101 20
http://giovanni.blouzar.com 18
http://134.192.114.47 17
http://george-006 16
http://192.0.2.117 16
https://linuxdev.datasphere.ch 16
http://mvh.myvacationhome.nl 15
http://18.181.2.14 15
http://lshift.org 14
file:// 14
http://10.200.2.76 14
http://churchco.de 14
http://ecc 13
http://alegion.jsimpson.ubuntu 13
http://5.168.39.154 13
http://www.desktopbooks.com 13
http://bmdev.local 13
https://192.168.2.86 12
http://wireit.se.com 12
http://172.25.3.79 11
http://sandbox.zebra.ploduma.ru 11
http://romania.parasoft.com 9
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…
Post Comment
Edit your comment

    Wire It 0.5.0 Presentation Wire It 0.5.0 Presentation Presentation Transcript

    • WireIt Presentation http://javascript.neyric.com/wireit WireIt version 0.5.0 Eric Abouaf – august 2009
    • What is it ?
        • Javascript framework to create «web wirable interface»
        • Uses the YUI Library
        • Open source, MIT license
        • Supports all major browsers
    • What's in it ?
    • What's it for ?
        • Any « wirable interface » :
        • Workflow
        • Visual Programming
        • Dataflow
        • Database querying
        • Mashups
        • Graph editors
        • ...
    • 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 Adapter
    • JSON Language Definition { // Language name languageName: "jsBox", // JSON inputEx definition for the properties form propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Title" } }, {"type": "text", inputParams: {"name": "description", label: "Description"} } ], // JSON Modules definition modules: [ … ] }
    • 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", ... } }
    • Wiring JSON - output example { // 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
    • Adapters
      • Ajax Adapter (REST or custom RPC)
      • Gears (useful for prototyping)
      • JSON-RPC (+demo PHP/MySQL backend)
    • Ressources
        • Home page and Download
        • http://javascript.neyric.com/wireit
        • The guide
        • http://javascript.neyric.com/wireit/guide.html
        • Source repository and bug tracker on GitHub
      http://github.com/neyric/wireit/
        • 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