forked from ericabouaf/wireit
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
273 lines (219 loc) · 12.2 KB
/
index.html
File metadata and controls
273 lines (219 loc) · 12.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WireIt javascript library for YUI3</title>
<meta name="author" content="Eric Abouaf" />
<meta name="copyright" content="Copyright 2006-2012 Eric Abouaf" />
<meta name="keywords" content="wireit,javascript,library,pipes,visualization,yui,programming,canvas,wire,wires,framework,webdev,ajax,ui,web,graphics,graph,graphs,opensource,tools" />
<meta name="description" content="WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages or graphical modeling." />
<link rel="alternate" type="application/rss+xml" title="WireIt blog" href="http://neyric.com/feed/" />
<link rel="shortcut icon" type="images/x-icon" href="res/favicon.ico" />
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="res/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
.page-header {
padding-top: 60px;
}
.current-version, .current-version a {
text-align: center;
color: #999999;
}
#featured .span4 {
text-align: center;
}
</style>
<link rel="shortcut icon" href="res/favicon.ico">
<!--link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"-->
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#">WireIt library</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="guide.html">Guide</a></li>
<li><a href="api/index.html">API Documentation</a></li>
<li><a href="http://github.com/neyric/wireit/">GitHub</a></li>
<li><a href="http://github.com/neyric/wireit/issues">Issues</a></li>
<li><a href="http://neyric.com/category/wireit/">Blog</a></li>
<li><a href="http://groups.google.com/group/wireit/">Forums</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit" style="background-image: url(res/logo-wireit.jpg); background-position: 560px 0; padding-bottom: 32px; position:relative;">
<h1>WireIt 3</h1>
<p>WireIt is an open-source javascript library, built with YUI3,<br />
to create full-web graph editors.</p>
<div style="position: absolute; top: 67px; left: 547px; font-size: 90%; line-height: 30px;">
<img src='http://www.twitter.com/favicon.ico' alt="twitter" /> follow <a href="http://twitter.com/wireit"> on Twitter</a><br />
<img src='http://github.com/favicon.ico' alt="GitHub" /> follow <a href="http://github.com/neyric/wireit"> on GitHub</a><br /><br />
<a href='http://www.pledgie.com/campaigns/13031'><img alt='Click here to lend your support to: wireit and make a donation at www.pledgie.com !' src='http://www.pledgie.com/campaigns/13031.png?skin_name=chrome' border='0' /></a>
</div>
</div>
<!-- First row -->
<div class="row">
<div class="span-one-third">
<h2>What's new ?</h2>
<p>WireIt 3 is a <strong>complete rewrite</strong> of the previous versions of the library, using the <strong>YUI3 framework</strong>. It makes the library much more robust, flexible and customizable.</p>
<p><a class="btn" href="#rewrite">View details »</a></p>
</div>
<div class="span-one-third">
<h2>Guide</h2>
<p>Learn everything necessary to work with the library.<br />
A previous experience with the YUI3 library is highly recommanded. <i>The guide is a work in progress. Please Help.</i></p>
<p><a class="btn" href="guide.html">View the guide »</a></p>
</div>
<div class="span-one-third">
<h2>Fork on GitHub</h2>
<p>Download, fork, pull, file issues, and more with the official WireIt repo on Github.</p>
<p class="current-version">Currently <a href="VERSION.txt">v3.0.0pr1</a></p>
<p style="text-align: center;"><a class="btn primary" href="http://github.com/neyric/wireit/">Download »</a></p>
</div>
</div>
<!-- Second row -->
<div class="row" id="featured">
<div class="span16">
<div class="page-header">
<h1>Featured examples</h1>
</div>
</div>
<div class="span4">
<h3>Planar Game</h3>
<a href="examples/planar-game/planar-game.html">
<img src="res/planar.gif" class="reflect" border="0" alt="Click to play now !" width="107" height="81" />
<p><span>Play the</span><br/><span class="big">Planar Game</span></p>
</a>
</div>
<div class="span4">
<h3>JsBox</h3>
<a href="plugins/composable/examples/jsBox/jsBox.html">
<img src="res/jsBox.gif" class="reflect" border="0" alt="Click to try jsBox !" width="107" height="81" />
<p><span>visual javascript demo</span><br/><span class="big">jsBox</span></p>
</a>
</div>
<div class="span4">
<h3>Logic Gates</h3>
<a href="examples/editor-examples/logicGates/index.html">
<img src="res/logicGates.png" class="reflect" border="0" alt="Click to try logicGates" width="107" height="81" />
<p><span>WiringEditor demo</span><br/><span class="big">Logic Gates</span></p>
</a>
</div>
<div class="span4">
<h3>Editor</h3>
<a href="examples/editor-examples/WiringEditor/">
<img src="res/wiringEditor.png" class="reflect" border="0" alt="Learn Containers, WiringEditor" width="107" height="81" />
<p><span>learn</span><br/><span class="big">Containers, WiringEditor</span></p>
</a>
</div>
</div>
<!-- Third row -->
<a name="rewrite"></a>
<div class="row">
<div class="span16">
<div class="page-header">
<h1>Why a complete rewrite ?</h1>
</div>
<h4>Was a complete rewrite of the library really necessary ?</h4>
<p>Yes, and the new code speaks for itself. YUI3 has much more to offer than its predecessor. The goal of this rewrite was to build on the strong foundations YUI3 provides. Furthermore, version 3.5.0 of YUI includes a MVC-ish infrastructure, which is a perfect replacement for the old <i>WiringEditor</i>.</p>
<h4>Why did you not just port the YUI 2.x code to its YUI 3.x equivalent ?</h4>
<p>Simply because we were doing things badly... This was the perfect occasion to get rid of them. For example, our components were not using the AttributeProvider/EventProvider infrastructure. All the options handling had to be done manually, and was not simple to extend.</p>
<h4>Is my WireIt 0.x code compatible ?</h4>
<p>No ! WireIt 3 completely changes the API, although we tried to keep the same terminology for WireIt specific components.</p>
<h4>Is it production ready ?</h4>
<p>Not yet... We still have major issues on our core components and the API is not finalized yet. <i>Your help is welcome !</i></p>
<h4>What took you so long ?</h4>
<p>Firstly, WireIt is a side project for me. So I only work on it in my free time. Secondly, we had an important dependency on the inputEx form library, which itself migrated to YUI3 pretty recently. Finally, I started this project to scratch my own itch, and I took time to look other similar projects as a replacement. I almost dropped the project, but finally made up my mind since no other projects had the features I wanted.</p>
<h3>Benefits of the new architecture</h3>
<ul>
<li>Support for gestures events (drag'n drop now works on smartphone and tablets)</li>
<li>Configurations now uses AttributeProvider</li>
<li>Widget infrastructure : less code, comprehensible for YUI users</li>
<li>Extensions: leveraging WidgetParent/WidgetChild/WidgetStdMod/Stackable/Positionning and so on...</li>
<li>Making core components abstract: not limited to the canvas renderer ! (SVG coming soon ?)</li>
<li>Modularity: We split the core modules into several pieces that can be removed or replaced with your owns.</li>
</ul>
</div>
</div>
<div class="row">
<div class="span8">
<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"LobH_yRv3hGeK14sIDfpSg","_btype":"list"}</script>
</div>
<div class="span8">
<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"9rzgvyVv3hG33WbbU1y0Jw","_btype":"list"}</script>
</div>
</div>
<div class="row">
<div class="span16">
<div class="page-header">
<h1>All examples</h1>
</div>
</div>
<div class="span4">
<h5>Core components examples</h5>
<ul>
<li><a href="examples/presentation.html">Interactive presentation</a></li>
<li><a href="examples/creating_terminals.html">Creating terminals and wires</a></li>
<li><a href="examples/changing_directions.html">Changing terminal direction</a></li>
<li><a href="examples/wires_and_terminals.html">Wire and Terminals configuration</a></li>
<li><a href="examples/dd_and_animation.html">DragDrop and Animation utilities</a></li>
<li><a href="examples/planar-game/planar-game.html">Planar game</a></li>
<li><a href="examples/wire_events.html">Wire mouse events</a></li>
<li><a href="examples/wire_tooltips.html">Wire context menu</a></li>
<li><a href="examples/6-form-container.html">FormContainers</a></li>
</ul>
</div>
<div class="span4">
<h5>App examples</h5>
<ul>
<li><a href="examples/editor-examples/WiringEditor/">WiringEditor demo</a></li>
<li><a href="examples/editor-examples/logicGates/index.html">Logic Gates demo</a></li>
<li><a href="examples/editor-examples/WiringEditor/widget.html">WiringEditor non-fullscreen</a></li>
<li><a href="examples/jsBox/jsBox.html">jsBox</a></li>
</ul>
</div>
<div class="span4">
<h5>Beta/New components</h5>
<ul>
<li><a href="examples/labels.html">Wire labels</a></li>
<!--li><a href="plugins/layout/examples/spring_layout.html">Spring Layout</a></li>
<li><a href="plugins/layout/examples/dotparser/index.html">Dot parser</a></li>
<li><a href="examples/jsBox/jsBox.html">editor example</a></li-->
</ul>
</div>
<div class="span4">
<h5>WireIt-based projects</h5>
<ul>
<li><a href="http://neyric.github.com/webhookit">WebhookIt</a> - visual http programming</li>
<li><a href="http://tarpipe.com">Tarpipe</a> - share content across social applications</li>
<li><a href="http://github.com/LeifW/pipescape">Pipescape</a> - a <a href="http://www.w3.org/TR/xproc/">XProc</a> UI</li>
<li><a href="http://www.talk-map.com/">TalkMap</a> - Online debating</li>
</ul>
</div>
</div>
<footer>
<p>© Eric Abouaf 2012</p>
</footer>
</div> <!-- /container -->
<script type="text/javascript">
document.write(unescape("%3Cscript src='http://www.google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-567557-2");
pageTracker._trackPageview();
</script>
</body>
</html>