Getting Started

We provide the following distributions of Capri:

Distribution	Description	Download
Standalone	All modules that do not require jQuery (browser, compat, core, hook, oop)	production (minified) development
jQuery Plugin	All modules - tested with jQuery 1.6.4. (browser, compat, core, doc-manager, hook, widget, oop)	production (minified) development

Difference between development and production versions?

Development version: Good for debugging because script is easier to read and step through. Also contains doclets which some development tools use to provide context sensitive help.
Production / minified version: Should always be used on production websites for faster download.

Adding Capri to your page

Simply add script include into the head of your page:

Standalone Distribution


<!DOCTYPE html>
<html>
<head>
   <title>Standalone Capri - Template</title>
   <script src="js/capri.min.js" />
   <!-- your script! -->
   <script src="js/hello.js" />
</head>
<body>
   <p>Capri enabled page!</p>
</body>
</html>

jQuery Plugin Distribution


<!DOCTYPE html>
<html>
<head>
   <title>Capri jQuery Plugin - Template</title>
   <script src="js/jquery.min.js" />
   <script src="js/jquery.capri.min.js" />
   <!-- your script! -->
   <script src="js/hello.js" />
</head>
<body>
   <p>Capri enabled page!</p>
</body>
</html>

Creating your first Capri script!

This example defines a new class and then presents an alert box.


// js/hello.js

// define a class that simply displays an alert message
$class('demo.Hello', {
   // constructor is automatically invoked when object is created
   __construct: function(name) {
      // store name in object
      this.name = name;
   },
   // instance method
   display: function() {
      alert('Hey, ' + this.name);
   }
});

// create instance of class and display alert
var greet = new demo.Hello('Bob');
greet.display();

Where next?

Refer to our tutorials or API documentation for further information.