/alpaca

Easy HTML5 Forms for jQuery

Primary LanguageJavaScriptOtherNOASSERTION

Alpaca - Easy Forms for jQuery and Bootstrap

Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide developers with an extensible framework for implementing controls, wizards, layouts, I18N support and an custom data persistence.

The goal of Alpaca is to provide the open source community with a fantastic forms engine that rivals or beats what most proprietary vendors offer. Using Alpaca, you can host really nice forms for your back end services, whether they are proprietary, enterprise or SaaS offerings.

The philosophy behind Alpaca is that you should design your forms once and have them work on lots of different devices and UI engines without having to do the same work twice.

Here is a sample registration form written once and rendered using four different approaches:

Alpaca is an open-source project licensed under Apache 2.0. It is actively developed and maintained by Cloud CMS. Enterprise support is available for your live deployments.

Project Home Page

For information, demos and documentation regarding Alpaca, please visit the the Alpaca Forms home page.

Compatibility

Alpaca is compatible with jQuery 1.9.1 and up.

Issues and Discussions

If you have a question about Alpaca, please visit the Alpaca Forums. This is a place where we encourage the community and developer community to get together to support one another in their Alpaca-related projects.

If you find an issue with Alpaca, please add a new issue ticket.

How to Build Alpaca

The first thing you should do is grab the source. We won't cover how to do that here but instead we recommend that you learn about Git and GitHub. You can pull the source down to your local machine to build things locally.

The command line for doing this is basically:

git clone https://github.com/gitana/alpaca.git

Prerequisites

To build Alpaca, you will need to have Node.js, Gulp and Bower installed. If you're new to Node.js or Gulp, you could check out this writeup - http://travismaynard.com/writing/getting-started-with-gulp.

Once you have Node.js installed, you essentially need to do this:

npm install gulp -g
npm install bower -g

Building Alpaca

Building Alpaca is pretty easy. Just run:

npm install

This will do the following for you:

  • pull down all of the Node module dependencies
  • run Bower to pull down client-side (browser) dependencies

To then build, you can do this:

npm start

If you want to use Gulp directly, you can alternatively run this:

gulp clean default

Either npm start or gulp clean default will build everything. The build distribution assets will be in build/alpaca.

Building the Web Site and Running a local Web Server

Alpaca includes a web site along with documentation, samples and much more. To build the web site, you will first need to install Jekyll (not covered here).

Simply do this:

gulp site

And you can run a local web server like this:

gulp server

Alpaca Distributions

The build produces four sets of assets and they are placed in:

  • build/alpaca/web (for basic web forms and layout)
  • build/alpaca/bootstrap (for bootstrap enabled forms and layout)
  • build/alpaca/jqueryui (for jQuery UI enabled forms and layout)
  • build/alpaca/jquerymobile (for jQuery Mobile enabled forms and layout)

Each directory contains a JS file and a CSS file for its respective build.

Each JS file is UMD ready and will work within both an AMD and CommonJS container.

Troubleshooting

If you run into any Bower related issues during the build, you might want to clear out your Bower cache using this command:

bower cache clean

And then try again.

Manual build commands

While npm install will pretty much do everything for you, there are also some manual commands you can run if you need to perform individual steps:

  • To install Bower assets, do bower install
  • To clear Bower cache, do bower cache clean
  • To run the Gulp build, do gulp
  • To build the Alpaca web site, do gulp default server
  • To run a local Alpaca web server, gulp default server

Running the Unit Tests

TODO

CDN

All of the Alpaca distribution assets are available via CDN at http://cdn.alpacajs.org.

Connecting to Cloud CMS

Alpaca works with any backend HTTP service. There is a connector layer and you can plug in your own persistence for forms, schema, options and layout.

Alpaca works out-of-the-box with Cloud CMS. Cloud CMS is a cost-effective backend content management system for mobile and web applications. If you're looking for a quick way to capture and report on forms, please consider checking it out.

Questions?

If you have any questions, please feel free to submit and issue or ask on the Alpaca Discussion Forums.

Authors

Thanks for assistance and contributions: