Get havok files

Quick and Dirty

If you just want to take havok for a quick spin, the simplest way is to download the two havok distribution files. These contain all of havok, and much of dojo. They are big and heavy, but it's a simple way to try things out:

• havok.js
• havok.css

Full sources with composer (recommended)

Havok supports composer to install itself and all dependencies in the right locations ready to develop with havok. Get composer with:

curl -sS https://getcomposer.org/installer | php

Then add the following composer.json file to the root of your project:

{
    "name": "my/project",
    "repositories": [{ "type": "composer", "url": "http://zoopcommerce.github.io/pixie"}],
    "require": {"havok/havok" : "~1.0"},
    "extra": {"zoop-js-path": "public/js"}
}

Then run composer in your project root:

php composer.phar update

Havok and dependencies will be insalled into myproject/vendor and symlinked to myproject/public/js

Full sources manual install (advanced)

In your the folder where you want havok installed, run the following commands:

git clone http://github.com/zoopcommerce/havok
git clone http://github.com/dojo/dojo
git clone http://github.com/dojo/dijit
git clone http://github.com/dojo/util
git clone http://github.com/zoopcommerce/mystique-js mystique
git clone http://github.com/zoopcommerce/mystique mystique-common

Havok will normally work with the latest development versions of dojo and mystique. But if you want to be 100% sure, check the versions specified in composer.json, and check those tags out in the respective repos.

If you have downloaded the source you'll find the following file structure and contents:

havok/
├── build/                        havok build tools
├── docs/
│   ├── dist                      local copy of these docs
│   └── ...
├── test/                         havok unit tests
└── ...                           pretty much all other files are havok modules

Havok is a front end widget library.

Docs sections

Widgets

Examples and documentation for all the general purpose widgets bundled with havok.

Forms

Examples and documentation for all the form widgets bundled with havok.

Data Quality

Reference for filters and validators that can be used on form widgets.

Services

Useful background services that make havok go, including less compilation during development, config merging, exception handling and more.

DI

Extensive reference on Havok dependency injection, why it is awesome and how to use it.

Builds

How to use the Havok build tools to prepare your site for deployment.

Load Havok in your pages.

Quick and Dirty

If you are using the Havok dist you need to link havok.css, and load havok.js:

<link rel="stylesheet" href="path/to/havok.css">
<script src="path/to/havok.js"></script>

Development configuration

In development mode all js modules are loaded async. In addition, less files are also loaded async and compliled client side. This makes development mode very flexible, responsive to code changes, and simple to debug. However, it does mean page loads are slow, so don't use this for production code.

To load in development mode you'll first need to specify a simple dojoConfig, and then load dojo/dojo:

	
<script type="text/javascript">
	dojoConfig = {
		isDebug: true,
		async: true,
		merge: [
			'havok/config'
		]
	}
</script>
<script src="path/to/dojo/dojo.js"></script>

Production configuration

It is strongly recommended that you use the havok build tools to create a bootable layer that is used in production. Load your built layer css and js, and you're ready to go:

<link rel="stylesheet" href="path/to/layer.css">
<script src="path/to/bootable/layer.js"></script>

Once havok is loaded, start using it!

AMD

Havok uses AMD (Async Module Definition) throughout. To load and use a module, use require. Eg:

<script type="text/javascript">
	require([
		'havok/widget/Modal', //load the Modal module
		'dojo/domReady!'      //wait until the dom is ready before executing the function
	], function(Modal){
		var modal = new Modal({title: 'Hello'}); //create a new modal
		modal.show();                            //show the modal
	})
</script>

Get things started

Most users will probably want to put this script in their page to get havok services up and running. These are not manditory, but can be helpful.

<script type="text/javascript">
	require([
		'havok/exception/started!', //turn on havok exception handling
		'havok/router/started!',    //if you are using the havok router, then get it going
		'havok/parseComplete!'      //if you are using declarative widget creation, then this AMD plugin will block until the parse is complete
	], function(){
		//do something here if you want to
	})
</script>

Explore the docs ...