forked from gitana/alpaca
-
Notifications
You must be signed in to change notification settings - Fork 0
/
resources.html
339 lines (314 loc) · 14 KB
/
resources.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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Alpaca - Easy Forms for jQuery - Resources</title>
<meta name="keywords"
content="jquery forms,JSON forms"/>
<meta name="description"
content="Alpaca is a client-side, cross-platform, JSON based forms engine for rendering elegant forms. It comes with comprehensive control library and support for validation, wizard, layout, templating, preview, i18n etc. Built upon jQuery library, jQuery UI and jQuery Mobile, it can be easily extended for additional form controls."/>
<meta name="author" content="Gitana Software Inc."/>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<!-- jQuery -->
<script type="text/javascript" src="./lib/jquery-latest.min.js"></script>
<script type="text/javascript" src="./lib/jquery.tmpl.js"></script>
<!-- Alpaca -->
<script type="text/javascript" src="./components/alpaca/alpaca.js"></script>
<link type="text/css" href="./components/alpaca/alpaca.css" rel="stylesheet"/>
<!-- jQuery UI Theme -->
<link type="text/css" href="./examples/lib/jquery-ui-latest/jquery-ui-latest.custom.css" rel="stylesheet"/>
<!-- Additional CSS -->
<link type="text/css" href="./examples/css/960.fluid.css" rel="stylesheet"/>
<!-- Web Site -->
<script type="text/javascript" src="./examples/lib/google-code-prettify/prettify.min.js"></script>
<script type="text/javascript" src="./examples/js/themeswitchertool.js"></script>
<script type="text/javascript" src="./examples/js/example.js"></script>
<script type="text/javascript" src="./examples/js/footer.js"></script>
<link type="text/css" href="./examples/css/site.css" rel="stylesheet"/>
<link type="text/css" href="./examples/lib/google-code-prettify/prettify.css" rel="stylesheet"/>
<script type="text/javascript" src="./examples/lib/tweet/jquery.tweet.js"></script>
<link type="text/css" href="./examples/lib/tweet/jquery.tweet.css" rel="stylesheet"/>
<script type="text/javascript" src="https://use.typekit.com/fnm3kpm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<header>
<div class='container_12'>
<div class='actual-body'>
<div class='grid_12'>
<h1><img src="examples/img/alpaca.png"><span>Easy Forms for jQuery</span></h1>
<div class="resource-bar">
<a href="index.html">Home</a>
<a href="resources.html" class="current">Downloads</a>
<a href="examples/components/fields/text-field.html">Documentation</a>
<a href="examples/forms/customer-profile/edit-form.html">Forms</a>
<a href="resources.html#mobile">Mobile</a>
<a href="tutorials.html">Tutorials</a>
<a href="consulting.html">Consulting</a>
</div>
</div>
</div>
</div>
</header>
<div class='container_12'>
<div class="actual-body">
<div class='grid_12'>
<div class="widget">
<div class="widget-title">
<h2><a name="downloads">Downloads</a></h2>
</div>
<div class="widget-body">
<h2>Current Version (1.0.6)</h2>
<h3>Zip Files</h3>
<p>
These zip files pre-package the assets required to introduce Alpaca to your web applications.
</p>
<ul>
<li>
<a href="downloads/alpaca-distribution.zip" rel='web' target="_blank">Alpaca</a>
</li>
<li>
<a href="downloads/alpaca-basic-distribution.zip" rel='web' target="_blank">Alpaca (Core + Foundation Controls)</a>
</li>
</ul>
<h3>AMD/Browser Components</h3>
<p>
Alpaca is packaged to support AMD (Asynchronous Module Definition) format for RequireJS, Dojo, Twitter Bower
and other build tools. These AMD modules will also work very nicely in your browser outside of an AMD
loader.
</p>
<ul>
<li>
<a target="_blank" href="downloads/components/alpaca-component.zip">Alpaca</a>
</li>
<li>
<a target="_blank" href="downloads/components/alpaca-core-component.zip">Alpaca (Core + Foundation Controls)</a>
</li>
<li>
<a target="_blank" href="downloads/components/alpaca-extras-component.zip">Alpaca (Extra Controls)</a>
</li>
</ul>
<h3>Build from Source</h3>
<p>
You can build from source by checking out the code from <a href="https://github.com/gitana/alpaca">our project on GitHub</a>.
</p>
<h3>Installation</h3>
<p>
Alpaca provides consists of the core engine, a foundation collection of field controls and an extra set of field controls. Only the
foundation set of field controls is required to render some really nice forms. However, if you want to spice things up, the extra
controls are quite useful.
</p>
<p>
Including Alpaca on your page is as simple as including the <code>alpaca.js</code> and appropriate <code>alpaca.css</code> file.
There are multiple CSS files and you should choose the one you wish to use for the framework in which you are developing.
</p>
<div align="center" style="padding-top: 20px; padding-bottom: 20px;">
<table>
<tr>
<th>File</th>
<th>Framework</th>
</tr>
<tr>
<td><code>alpaca-bootstrap.css</code></td>
<td>Twitter Bootstrap</td>
</tr>
<tr>
<td><code>alpaca-jqueryui.css</code></td>
<td>JQuery UI</td>
</tr>
<tr>
<td><code>alpaca-mobile.css</code></td>
<td>JQuery Mobile</td>
</tr>
<tr>
<td><code>alpaca.js</code></td>
<td>No framework. Naked or barebones CSS.</td>
</tr>
</table>
</div>
<p>
In general, you should be sure to include your rendering framework (such as jQuery Mobile or Twitter Bootstrap) ahead of
your Alpaca files. That way, if you're loading in a browser, Alpaca can detect these frameworks and aid in the
configuration.
</p>
</div>
</div>
<div class="widget">
<div class="widget-title">
<h2><a name="documentation">Documentation</a></h2>
</div>
<div class="widget-body">
<h3>
Tutorials
</h3>
<ul>
<li>
<a href="index.html" rel='web' target="_blank">Getting Started Guide</a>
</li>
</ul>
<h3>
API Documentation
</h3>
<ul>
<li>
<a href="js-doc/allclasses.html" rel='web' target="_blank">JavaScript Docs</a>
</li>
</ul>
</div>
</div>
<div class="widget">
<div class="widget-title">
<h2><a name="components">Component Gallery</a></h2>
</div>
<div class="widget-body">
<p>Alpaca Component Gallery provides
examples
for all alpaca field controls, wizard
support, layout support, i18n support, callback support, connectors etc.
</p>
<p>Each example comes with
source code as well as detailed description of all supported options.</p>
<div class='container_12' style="clear:both;">
<div class="grid_4">
<a href="examples/components/fields/text-field.html" alt="Text Field"
title="Text Field">Text
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/checkbox-field.html" alt="Checkbox Field"
title="Checkbox Field">Checkbox
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/number-field.html" alt="Number Field"
title="Number Field">Number
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/any-field.html" alt="Any Field"
title="Any Field">Any
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/array-field.html" alt="Array Field"
title="Array Field">Array
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/object-field.html" alt="Object Field"
title="Object Field">Object
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/integer-field.html" alt="Integer Field"
title="Integer Field">Integer
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/select-field.html" alt="Select Field"
title="Select Field">Select
Field</a></div>
<div class="grid_4"><a href="examples/components/fields/radio-field.html" alt="Radio Field"
title="Radio Field">Radio Button
Field</a></div>
<div class="grid_12">
<p>
<a href="examples/components/fields/text-field.html" class="get-started">More Components</a>
</p>
</div>
</div>
<div class="clear clearfix"></div>
</div>
</div>
<div class="widget">
<div class="widget-title">
<h2><a name="forms">Form Gallery</a></h2>
</div>
<div class="widget-body">
<p>
With its performance and extensibility, Alpaca has been adopted by various users as their forms
service for creating and editing
structured JSON or XML content with complex schema and large number of fields.
</p>
<p>
Alpaca can also be easily integrated with other Content Management Systems.
</p>
<ul>
<li>
<a href="http://blog.productivist.com/alfraca-alfresco-meets-alpaca/">
Alfraca : Alfresco Meets Alpaca</a>
</li>
<li>
<a href="https://github.com/cmpaul/alfraca">Alfraca Project</a>
</li>
</ul>
<p>
In this form gallery, we include sample forms that are designed for general web
applications.
</p>
<div class='container_12' style="clear:both;">
<div class="grid_6"><a href="examples/forms/customer-profile/create-form.html"
title="Custom Profile Create">Custom Profile Create</a></div>
<div class="grid_6"><a href="examples/forms/customer-profile/create-simple-form.html"
title="Custom Profile Create Simple">Custom Profile Create (Simple)</a></div>
<div class="grid_6"><a href="examples/forms/customer-profile/edit-form.html"
title="Custom Profile Edit">Custom Profile Edit</a></div>
<div class="grid_6"><a href="examples/forms/customer-profile/edit-custom-view-form.html"
title="Custom Profile Edit Customized">Custom Profile Edit (Customized)</a>
</div>
<div class="grid_12">
<p>
<a href="examples/forms/customer-profile/create-form.html" class="get-started">More
Forms</a>
</p>
</div>
<div class="clear clearfix"></div>
</div>
</div>
</div>
<div class="widget">
<div class="widget-title">
<h2><a name="mobile">Alpaca On Mobile</a></h2>
</div>
<div class="widget-body">
<p>
Alpaca provides full support for static and dynamic forms on mobile devices through
mobile framework such as jQuery Mobile.
</p>
<p>Launch Alpaca mobile examples in:</p>
<ul>
<li><a href="examples/mobile/mobile-examples.html" target="_blank">Browser</a></li>
<li><a id="ipad-link" href="" target="_mobile">iPad Simulator</a></li>
<li><a id="iphone-link" href="" target="_blank">iPhone Simulator</a></li>
</ul>
</div>
</div>
<div class="widget">
<div class="widget-title">
<h2><a name="unittests">Unit Tests</a></h2>
</div>
<div class="widget-body">
<p>
<p>
Alpaca provides a large set of unit tests for its components using jQuery QUnit testing
framework.</p>
<p>Click following link to run the tests
</p>
<p><a href="tests/index.html" class="get-started" target='_unit_tests'>Run Alpaca unit
tests...</a></p>
</div>
</div>
<br/>
<br/>
</div>
</div>
</div>
<footer>
<div class="container_12">
<div class="grid_12 copyright">
Copyright © 2013 Gitana Software, Inc. | All Rights Reserved
</div>
</div>
</footer>
<script type="text/javascript">
$(function() {
var prefix = "";
if (window.location.hostname.indexOf('code.cloudcms.com') != -1 ) {
prefix = window.location.hostname + '/alpaca/1.0.3-SNAPSHOT';
} else if (window.location.hostname.indexOf('localhost') != -1 ) {
prefix = window.location.hostname + '/alpaca';
} else {
prefix = window.location.hostname;
}
$("#ipad-link").attr('href', 'http://ipadpeek.com/?url=' + prefix + '/examples/mobile/mobile-examples.html&portrait');
$("#iphone-link").attr('href', 'http://testiphone.com/?url=http://' + prefix + '/examples/mobile/mobile-examples.html');
});
</script>
</body>
</html>