-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
251 lines (218 loc) · 9.22 KB
/
index.html
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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<title>Ratchet MVC</title>
<!-- code prettifier -->
<link href="examples/lib/google-code-prettify/prettify.css" rel="stylesheet">
<link href="examples/css/example.css" rel="stylesheet">
<script type="text/javascript" src="examples/lib/google-code-prettify/prettify.min.js"></script>
<script type="text/javascript" src="examples/lib/jquery-latest.min.js"></script>
<script type="text/javascript" src="examples/lib/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="examples/lib/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="examples/lib/bootstrap/css/bootstrap-theme.css"/>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Ratchet</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="examples/index.html">Examples</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
<h2>What is Ratchet?</h2>
<p>
Ratchet is a lightweight framework for building JavaScript applications on jQuery that run on the web and on
mobile devices.
<br/>
<br/>
It provides client-side routing, model generation, view dispatching, observables, and a pattern for building
JavaScript component (or gadget) based applications. Ratchet makes it easy to snap together applications using
pre-existing investments in UI components. It works nicely with server-side controllers to enable dynamic,
configuration-driven interfaces.
<br/>
<br/>
Ratchet provides an model-view-controller (MVC) platform for your jQuery applications.
</p>
<h2>Start by checking out hosted demos</h2>
<p>
To get a feel for the basics of Ratchet, check out <a
href="./examples/index.html">its
hosted examples</a>.
</p>
<h2>Download Ratchet</h2>
<p>
Ratchet consists of a core JavaScript file (9.8k gzip) that you can plug into your applications to get started.
It is available in both a minified format (for production) and uncompressed format (for development).
<br/>
<br/>
In addition, Ratchet provides templating libraries for Handlebars and jQuery Templates.
<br/>
<br/>
Finally, we provide a ZIP file with all of the distribution assets including examples and unit tests that you
can run locally.
</p>
<h3>Current Release (1.0.2)</h3>
<ul>
<li>
<span class="list-item-header">Ratchet</span>
<a href="js/ratchet.js" rel='web' target="_blank">uncompressed</a>
|
<a href="js/ratchet.min.js" rel='web' target="_blank">minified</a>
</li>
<li>
<span class="list-item-header">Ratchet (Handlebars Templating Engine)</span>
<a href="js/ratchet-handlebars.js" rel='web' target="_blank">uncompressed</a>
|
<a href="js/ratchet-handlebars.min.js" rel='web' target="_blank">minified</a>
</li>
<li>
<span class="list-item-header">Ratchet (jQuery-tmpl Templating Engine)</span>
<a href="js/ratchet-tmpl.js" rel='web' target="_blank">uncompressed</a>
|
<a href="js/ratchet-tmpl.min.js" rel='web' target="_blank">minified</a>
</li>
<li>
<span class="list-item-header">Ratchet (Gitana Authenticators and Integration)</span>
<a href="js/ratchet-gitana.js" rel='web' target="_blank">uncompressed</a>
|
<a href="js/ratchet-gitana.min.js" rel='web' target="_blank">minified</a>
</li>
<li>
<span class="list-item-header">Ratchet (Dynamic Web Gadget Support)</span>
<a href="js/ratchet-web.js" rel='web' target="_blank">uncompressed</a>
|
<a href="js/ratchet-web.min.js" rel='web' target="_blank">minified</a>
</li>
<li>
<span class="list-item-header">Ratchet (Full download with Examples)</span>
<a href="downloads/ratchet.zip" rel='web' target="_blank">ZIP</a>
</li>
</ul>
<h3>AMD Components</h3>
<p>
If you're building modularized JavaScript applications, we've uploaded AMD-ready builds of Ratchet to the
<a href="https://github.com/cloudcms-components">Cloud CMS Web Components</a> library on GitHub. You can
reference these or copy them into your own projects and use them with AMD tools like RequireJS.
</p>
<br/>
<h2>Intro to using Ratchet</h2>
<p>
Let's assume that you've downloaded the Ratchet ZIP file with all of the assets. These will include:
<ul>
<li>js/ratchet.js</li>
<li>js/ratchet.min.js</li>
<li>js/ratchet-handlebars.js</li>
<li>js/ratchet-handlebars.min.js</li>
<li>js/ratchet-tmpl.js</li>
<li>js/ratchet-tmpl.min.js</li>
<li>examples/</li>
</ul>
</p>
<p>
Unzip the zip file and then use your favorite text editor to create an empty html file. You will first need
to include jQuery library (1.5 or later).
</p>
<pre class="prettyprint linenums">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</pre>
<p>
Now include link to minified Ratchet JavaScript library, minified jQuery Templating Engine plugin and its supporting
library in its head section
</p>
<pre class="prettyprint linenums">
<script type="text/javascript" src="ratchet.min.js"></script>
<script type="text/javascript" src="ratchet-tmpl.min.js"></script>
</pre>
<p>Or you can include uncompressed version</p>
<pre class="prettyprint linenums">
<script type="text/javascript" src="ratchet.js"></script>
<script type="text/javascript" src="ratchet-tmpl.js"></script>
</pre>
<p>
If you prefer to use latest, hosted version of the Ratchet library, all you need is to include:
</p>
<pre class="prettyprint linenums">
<script type="text/javascript" src="http://www.ratchetjs.org/downloads/ratchet.min.js"></script>
<script type="text/javascript" src="http://www.ratchetjs.org/downloads/ratchet-tmpl.min.js"></script>
</pre>
<p>
Now add a simple test to the body section of your test html
</p>
<pre class="prettyprint linenums">
<script type="text/javascript">
$(document).ready(function() {
$('#sample').ratchet(function() {
this.get("/", function(el) {
el.html("Ratchet rocks!").swap();
});
}).run("/");
});
</script>
<div id="sample"></div>
</pre>
<p>
Save the html file and open it in a browser. You should get a simple page with "Ratchet rocks!".
</p>
<p>
To learn more about Ratchet, you can also download Ratchet samples and have them running on your
machine. Since Ratchet samples contain many examples that use Ajax calls, it is highly recommended to run the
examples in a web server (such as Apache Web Server ) or an web application server (such as Tomcat or
Jetty).
<br/>
<br/>
Note: If you're on a Mac, you can download the ZIP file and run the examples by extracting, going to the extracted
folder and running the following from a Terminal:
</p>
<pre class="prettyprint linenums">
python -m SimpleHTTPServer
</pre>
<p>
Your web server will be started on port 8000 and you can browse to
<a href="http://localhost:8000">http://localhost:8000</a> to see the examples.
</p>
<h2>Join our GitHub Project</h2>
<p>
Ratchet is an open-source project licenses under Apache 2 so that it is available to everyone for contribution,
use and benefit. The <a href="https://github.com/gitana/ratchet">Ratchet Project is hosted on GitHub</a>
and is open to everybody.
<br/>
<br/>
Please visit the project, fork the code, submit issues and check in code!
We're looking forward to working together!
</p>
<p>
If you have access to Git, you can connect to the repository here:
<pre class="prettyprint linenums">git@github.com:gitana/ratchet.git</pre>
</p>
<p>
Once you clone the Ratchet repository to your local machine and have Maven 3.0 or later installed, You can
build Ratchet and run Ratchet examples using following Ant command
<pre class="prettyprint linenums">ant clean package</pre>
</p>
<h2>Where can I get help?</h2>
<p>
Please come visit the <a href="https://github.com/gitana/ratchet">Ratchet project on GitHub</a>.
Ratchet MVC framework is developed and maintained by <a href="http://www.cloudcms.com">Gitana Software</a>.
</p>
<footer>
<p>Copyright © 2012 Gitana Software | All Rights Reserved</p>
</footer>
<script type="text/javascript">
window.prettyPrint && prettyPrint();
</script>
</body>
</html>