Getting Started with Glow 2

Loading Glow

Glow 2 comes with a loader which can asyncronously load Glow into a private scope. This lets you load in multiple versions of Glow into the same page. This method is recommended for larger sites.

You can also include Glow's file directly via script tags.

Via the loader

<script type="text/javascript" src="/path/to/glow/2.0.0b1/glow.js"></script>
<script type="text/javascript"> Glow('2.0.0b1').ready(function(glow) { // glow core loaded & dom ready glow('<p>Glow has loaded!</p>').appendTo('body'); }); Glow('2.0.0b1').load('ui').ready(function(glow) { // glow core & ui loaded, dom is ready glow('<p>Glow has loaded!</p>').appendTo('body'); }); // You can tell the loader to load the debug files. // The debug files are uncompressed and contain extra type checking. Glow('2.0.0b1', { debug: true }).load('ui').ready(function(glow) { // glow core & ui debug files loaded, dom is ready glow('<p>Glow has loaded!</p>').appendTo('body'); });
</script>

This pattern may be useful for larger applications:

var myApplication = (function(){ // this will hold our instance of glow var glow = Glow(2).ready(domReady); function domReady() { // glow loaded & dom ready } // return the public properties & methods of your application as an object return { greeting: 'Hello!' };
})();

Without the loader

<link type="text/css" href="/path/to/glow/2.0.0b1/ui.css" rel="stylesheet" />
<script type="text/javascript" src="/path/to/glow/2.0.0b1/core.js"></script>
<script type="text/javascript" src="/path/to/glow/2.0.0b1/ui.js"></script>
<script type="text/javascript"> glow.ready(function() { // glow core & ui loaded, dom is ready glow('<p>Glow has loaded!</p>').appendTo('body'); });
</script>

To load the debug versions, switch the file names to ui.debug.css, core.debug.js & ui.debug.js respectively.

Dealing with the DOM

Like Glow 1, Glow 2 has a NodeList. However, in Glow 2, the 'glow' variable itself can be used as a function to select and create NodeLists:

// Get all links whose href attribute starts http://
glow('a[href^=http://]').css('background', 'green'); // Add a paragraph to the page
glow('<p>Hello!</p>').appendTo(document.body); // Make the parent list item of 'anElement' green
glow(anElement).parent('li').css('background', 'green');

Any call to glow() returns a glow.NodeList, full documentation can be found in the zip/tar download.

Sizzle is used as the CSS selector engine, so CSS3 selectors can be used.

Listening for events

Many objects in Glow fire events, all of which can be listened for via their 'on' method.

// Listen for clicks on links
glow('a').on('click', function(event) { alert('You clicked a link!');
}); // Listen for an animation's complete event
myAnimation.on('complete', function() { // ...
}); // Add events to your own objects
function Ball() {}
glow.util.extend(Ball, glow.events.Target); var ballInstance = new Ball; ballInstance.on('bounce', function() { alert('boing');
}); ballInstance.fire('bounce');

Delegated events

Glow 2 allows you to listen for events on a particular element if they occur somewhere within another type of element. For example, you can listen for clicks that occur on list items within a list.

Only one dom listener is added, saving memory. Each time that element is clicked, Glow looks to see if the element clicked, or its parents, match the selector you provided. This means the below also works on list items added after the listener is created.

glow('#nav').delegate('click', 'li', function() { // do stuff!
});

Animation

glow.NodeList has shortcuts for the most common kinds of animation, whereas the glow.anim.Anim class can be used for more complex animations.

// slide an element open to its full content height, starting from 0
glow('#elementToAnimate').height(0).slideOpen(); // Change an element's background colour to green over 1 second
glow('#elementToAnimate').anim(1, { 'background-color': 'green'
}) // Change an element's left position to 100 over 1 second, then // change the element's top position to 100 over 1 second.
glow('#elementToAnimate').queueAnim(1, { left: 100
}).queueAnim(1, { top: 100
}); // Here's an example of using the Anim class to animate Firefox's box-shaddow property
var elementStyle = glow.dom.get('#elementToAnimate').prop('style'); glow.anim.Anim(3).target(elementStyle).prop('MozBoxShadow', { template: '0 0 ?px rgba(0, 0, 255, ?)', from: [120, 0], to: [15, 1]
}).start();

Loading Resources

glow.net contains all the XHR stuff from Glow 1, but also a resource loader for loading in your own scripts, images and css.

glow.net.getResources([ '/scripts/whatever.js', '/style/screen.css',
]).on('load', function() { // CSS & script now loaded
});