-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
258 lines (221 loc) · 10.2 KB
/
index.htm
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
<!doctype html>
<html>
<head><title>Relay: The Message-Passing Framework</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=980">
<style>
html, body, table, tr, td, dl, dd, dt, h1, h2, h3, h4 {margin:0; padding:0; border:0; font:normal 12pt georgia,times,serif}
body {line-height:1.7em; padding:2% 1%}
h1, h2, h3 {font-weight:bold; margin:2em 0 0.5em 0}
h1 {font-size:2.5em; margin:0 auto; text-align:center} h2 {font-size:1.8em} h3 {font-size:1.1em}
#main {margin:0 auto; padding:1%; max-width:900px; min-width:600px}
#summary {margin:1em auto; padding:0 15%; max-width:600px; color:#666; font-style:italic; text-align:justify}
pre, tt {white-space:pre-wrap; font:0.9em consolas,monospace}
tt {background:#eee; padding:0.1em 0.3em}
pre {border:1px solid #ccc; background:#f6f6f6; padding:1% 2%; box-shadow:inset 1px 1px 10px #bbb}
pre .h {color:#bbb; font-weight:normal}
pre .m1 {color:#e22}
pre .m2 {color:#44c}
pre .m3 {color:#4c4}
pre .m4 {color:#cc0}
pre .m5 {color:#b0b}
dl, dt, dd {line-height:inherit}
dl h4 {background:#ddd; padding:0.3em 0.5em; font-weight:bold}
dt {margin:1em 0 0 0; padding:0 1%}
dd {padding:1em 1% 1em 4%}
</style>
</head>
<body>
<h1>relay</h1>
<div id="main">
<div id="summary">
RelayJS is a javascript based framework for organizing web applications into scoped
modules and communication is done by passing messages along the HTML tree structure,
thereby eliminating the need to pass object references around.
</div>
<h3>How to set up event listeners:</h3>
<pre>
<b class="h"><style> ins {text-decoration:none} </style></b>
<b class="h"><body></b>
<ins <b class="m3">cite="js:Spinner"</b>>
<input type=text value="0">
<input type=button onclick="<b class="m1">relay('spinDownClick', this);</b>">
<input type=button onclick="<b class="m2">relay('spinUpClick', this);</b>">
</ins>
<b class="h"></body></b>
<b class="h"><script language=javascript></b>
<b class="m3">function Spinner</b>(name, node) {...}
Spinner.prototype = {
value: 0,
<b class="m1">spinDownClick: function()</b> {
this.relayBaseNode.getElementsByTagName("input")[0].value -= 1;
},
<b class="m2">spinUpClick: function()</b> {
this.relayBaseNode.getElementsByTagName("input")[0].value += 1;
}
};
<b class="h"></script></b></pre>
<h3>How to pass messages up the HTML tree:</h3>
<pre>
<b class="h"><body></b>
<ins <b class="m4">cite="js:CartItem"</b>>
...
<ins <b class="m3">cite="js:Spinner"</b>>
<input type=text value="0">
<input type=button onclick="relay('spinDownClick', this);">
<input type=button onclick="relay('spinUpClick', this);">
</ins>
...
</ins>
<b class="h"></body></b>
<b class="h"><script language=javascript></b>
<b class="m3">function Spinner</b>(name, node) {...}
Spinner.prototype = {
value: 0,
spinDownClick: function() {
var elm = this.relayBaseNode.getElementsByTagName("input")[0];
elm.value -= 1;
<b class="m5">relay("quantityChanged", elm.value, this);</b>
},
spinUpClick: function() {
var elm = this.relayBaseNode.getElementsByTagName("input")[0];
elm.value += 1;
<b class="m5">relay("quantityChanged", elm.value, this);</b>
}
};
<b class="m4">function CartItem</b>(name, node) {...}
CartItem.prototype = {
<b class="m5">quantityChanged: function</b>(num) {
//...
}
};
<b class="h"></script></b></pre>
<h3>Interacting with the module hidden by the node:</h3>
<pre>
<b class="h"><body></b>
<ins <b class="m2">id="pics"</b> <b class="m1">cite="js:acme.Photos"</b>></ins>
<b class="h"></body></b>
<b class="h"><script language=javascript></b>
var acme = {
Photos: function(name, node) {...}
};
acme.Photos.prototype = {
<b class="m1">fitToScreen: function()</b> {...}
};
...
function action() {
<b class="m2">relay.byId("pics")</b><b class="m1">.fitToScreen();</b>
<b class="h">// or by using jQuery:</b>
jQuery("#pics").each(function() {
<b class="m2">relay.byId(this)</b><b class="m1">.fitToScreen();</b>
});
}
<b class="h"></script></b></pre>
<h2>Features</h2>
<div style="padding:0.5% 2%; margin:0 5%; border:1px solid #ccc; background:#eee">
<h3 style="margin:0.5em 0">Relay</h3>
<div style="margin:1em 4%; padding:0.5% 2%; border:1px solid #dbb; background:#fdd">
<h3 style="margin:0.5em 0">Module Framework</h3>
For writing standalone HTML components that are de-coupled from
each other. HTML components have a Javascript class from which it
derives it's methods and properties. HTML components can be nested
within one another without knowing it.
</div>
<div style="margin:1em 4%; padding:0.5% 2%; border:1px solid #bdb; background:#dfd">
<h3 style="margin:0.5em 0">Messaging Framework</h3>
<div style="margin:1em 0 1em 4%; padding:0.5% 2%; border:1px solid #bbd; background:#ddf">
<h3 style="margin:0.5em 0">Upstream</h3>
HTML components can pass messages to parent components.
Unlike the event listener model, you do not need to know of
the existence of a parent to pass messages to a parent. And you
do not need to know the existence of children to listen in on
children calling.
Messages can return values allowing for the root node to provide
a response to the leaf node.
</div>
<div style="margin:1em 0 1em 4%; padding:0.5% 2%; border:1px solid #bbd; background:#ddf">
<h3 style="margin:0.5em 0">Downstream</h3>
HTML components can broadcast messages like the publish-subscribe
model, but messages are scoped to the current node, so only it's
children can receive them.
Objects are implicitly subscribed if they are part
of the HTML tree and are implicitly unsubscribed if they are
removed from the HTML tree.
</div>
</div>
</div>
<h2>Download</h2>
<a href="http://github.com/relay/relay" style="font-size:1.5em">Relay on Github <img src="http://raw.github.com/github/media/master/octocats/blacktocat-32.png"></a>
<a href="http://github.com/relay/relay/blob/master/relay-dev.js" style="font-size:1.2em; margin:0 2em">View Source</a>
<a href="http://raw.github.com/relay/relay/master/relay.js" style="font-size:1.2em; margin:0 2em">Download Minified (2k)</a>
<a href="http://github.com/relay/relay/issues">View Bug Reports</a>
<h2>API</h2>
<dl>
<h4>Passing Messages to Parents:</h4>
<dt>
Syntax: <tt>relay(name, [parameters]*, this)</tt><br>
Example: <tt>relay("mailto", "[email protected]", false, 9, this)</tt> ⇒ <tt>mailto("[email protected]", false, 9)</tt>
</dt>
<dd>Walks down the node tree starting from the current node until it finds a Javascript object
with a function called <tt>name</tt> and calls it while passing in the supplied parameters. If the
<tt>name</tt> function returns the object <tt>relay.BUBBLE</tt>, then we continue to walk down the
node tree to the next node with a Javascript object with the same method and try again.
<p>The return value of the <tt>name</tt> function is also returned by relay.</dd>
<dt>
Syntax: <tt>relay(inlineFunction, [parameters]*, this)</tt><br>
Example: <tt>relay(function() {this.chatName = ""}, this)</tt>
</dt>
<dd>Same behavior as above, but does not match to a function name, but instead executes on the first
object found in the HTML tree.</dd>
<h4>Passing Messages to Children:</h4>
<dt>
Syntax: <tt>relay.forward(name, [parameters]*, this)</tt><br>
Example: <tt>relay.forward("refresh", this)</tt>
</dt>
<dd>Gets a list of descendant elements of the current node, which are modules and check if the module has
a <tt>subscribe</tt> property on it. If so, check if the <tt>subscribe</tt> object has a property
called <tt>name</tt> that points to a function. If so, execute the function with the <tt>this</tt> scope
set to the module.
<p><tt>Folder = {
subscribe: {
"refresh": function() {
alert(this.name);
}
},
name: "Inbox"
}</tt>
</dd>
<h4>Defining HTML Modules:</h4>
<dt>
Syntax: <tt><INS cite="js:name"></INS></tt><br>
Example: <tt><INS cite="js:acme.DatePicker"></INS></tt> ⇒ <tt>new acme.DatePicker("acme.widgets.DatePicker", node)</tt>
</dt>
<dd>Finds and initializes the object called <tt>name</tt>. A reference to the object is kept
privately inside Relay and can be retrieved by calling <tt>relay.byId(document.getElementById("item1"))</tt>
or <tt>relay.byId("item1")</tt> assuming that the element has an id of "item1".
<p>Be sure to reset the natural CSS styles of <tt><INS></tt> elements or else everything will turn up underlined:<br>
<tt><style> ins {text-decoration:none} </style></tt>
</dd>
<h4>Interacting with Modules:</h4>
<dt>
Syntax: <tt>obj = relay.byId(nodeOrID)</tt><br>
</dt>
<dd>Get's the Javascript object hidden by the supplied node or supplied node ID. This is the same
as calling <tt>relay.byId(document.getElementById(id))</tt>.</dd>
<h4>Loading Relay:</h4>
<dt>
Syntax: <tt>relay.start()</tt> or <tt>relay.initTree(node)</tt><br>
Example: <tt>window.onload = function() { relay.start(); }</tt>
</dt>
<dd>Called when the webpage is first loaded to parse the HTML document
for modules and to initialize the modules. If parts of the HTML are created dynamically, then you can
call <tt>initTree(node)</tt> to initialize new sections of the webpage. Calling it multiple
times won't create duplicates as checks are added to avoid this.
<p>You should call this at the bottom of your webpage before the ending <tt></BODY></tt> tag.</dd>
</dl>
<div style="border-top:1px dashed #ccc; margin-top:1em; padding:0.1em 0; font-size:0.7em; text-align:center; color:#999">
Copyright © 2012
</div>
</div>
</body>
</html>