Getting Started

What is `objx`?

objx puts JavaScript on steroids. It wraps normal JavaScript objects and enhances them via a suite of plugins.

For example:

var normalArray = [1, 2, 3];

var enhancedArray = objx(normalArray);

The enhancedArray object can now have a wide range of actions run against it, depending on which plugins you include.

How do I use it?

To use Objx, you just need to:

1. Include the Objx core library

Add the following code to the <head> of your web page:

<script type="text/javascript" src="http://objx.googlecode.com/svn/trunk/src/objx.js"></script>

2. Include any plugins you plan on using

In the same way you included the objx core library, you need to include any plugins you plan to use. For example:

<script type="text/javascript" src="http://objx.googlecode.com/svn/trunk/plugins/src/collections/group.js"></script>
<script type="text/javascript" src="http://objx.googlecode.com/svn/trunk/plugins/src/oo/class.js"></script>

(Check the plugin directory for more)

3. Start enhancing your JavaScript

You can now write code that uses Objx.

Quick tutorial

Setting up your first page

objx runs in the browser so all you need to start writing objx code is:

a text editor (we recommend TextMate for Mac or notepad++ for Windows)
a web browser (we recommend Safari for Mac or Chrome for Windows)

Create `test.htm` page

Create a new text file called test.htm and copy and paste the following page template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="en">
  <head>
    <title>My first objx page</title>
  </head>
  <body>
  </body>
</html>

Add the objx core file

We need to include the core objx file in the page by adding the following script tag to the head of the page:

<script type="text/javascript" src="http://objx.googlecode.com/svn/trunk/src/objx.js"></script>

Did you know - `http://objx.googlecode.com/svn/trunk/src/objx.js` is a direct link to our source repository, and points to the latest bleeding edge version of `objx.js` which is not recommended for production. Instead, we recommend you visit the Downloads section and download an actual release.

Using the built-in `each` plugin

To iterate over an array in JavaScript we have to do something like this:

var a = [1,2,3];
for (var i = 0; i < a.length; i++) {
  alert(a[i]);
}

Objx makes this much easier. Create a <script> tag in the head of your page and write the following code:

var a = [1,2,3];
objx(a).each(function(item){ 
  alert(item);
});

When you visit the page (in your web browser), you'll get three alert boxes containing the items in the array.

Adding plugins

Browse the plugins to see what capabilities are available. To include the plugin in your page, just add another <script> tag pointing to that file after the objx.js include.

► Sign in to add a comment