Getting started
API Quick Reference
JavaScript is required to use the quick reference
This guide will cover the basics of installing the Glow JavaScript library, and a few simple examples of using Glow to get you started.
We are assuming you have at least a working knowledge of JavaScript and can create basic web pages.
If you are an advanced JavaScript developer, or just want to see the range of things Glow can do, you may want to dive straight into the latest API documentation instead.
Installation
Before beginning you should download the most recent version of Glow.
After extracting the zip or tgz file, you will find a folder named glow which contains the version folder. The version folder should be the same as the version number of the distribution you downloaded, for example "1.5.0".
To install Glow on your own web server, simply copy the glow folder into whatever directory you normally use to store client-side scripts.
If you already have a glow folder from a previous version, you may simply add the new version into that same directory. Because the files are stored within a version numbered directory, they won't be accidentally replaced.
For the purposes of the demonstrations in this guide we will assume you have placed your glow folder in a directory at this path: /myscripts/. Obviously you should modify any filepaths mentioned here to match your own particular directory structure.
Including Glow
To include the core Glow library in your own web page, just add a script tag to the head of your HTML document, as in the example below.
<script src="/myscripts/glow/n.n.n/core/core.js" type="text/javascript"></script>
Inserting this script tag will create a single global object named glow, attached to which are all of the functions, properties and modules of the Glow library.
In the examples that follow, we'll use some standard HTML. Go ahead and create the following HTML document somewhere on your web server now.
Remember to replace the n.n.n portion of the example filepath with the actual Glow version number you installed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello Glow</title>
<script src="myscripts/glow/n.n.n/core/core.js" type="text/javascript"></script>
<script type="text/javascript">
// JavaScript code goes here
</script>
</head>
<body>
<!-- HTML code goes here -->
</body>
</html>
A simple example: Hello, World
One of the core features of Glow is the glow.dom module, which provides helpful features for working with Document Object Model (DOM) elements in your web page.
Add the following code to the empty script tag in the HTML document you created earlier.
glow.ready(function() {
var p = glow.dom.get("#greeting");
p.html("hello, world");
});Now add this HTML as a child of the body element.
<p id="greeting"></p>If you view the page in a browser, you should see the following result.
The first thing to note is the call to the glow.ready() method. Using this method ensures that our demonstration code will only run after the DOM is ready.
This is necessary because we are manipulating a DOM element further down the page, and if we ran our script before that element was created by the browser an error would be thrown.
The second thing to notice is that, once the page is ready and our function is executed, we use glow.dom.get() to get a reference to the P element in the body of our page. We specified which DOM element we wanted by using a selector string. Selectors will be discussed a bit later in this guide.
Finally we modified our paragraph element by inserting a short message into its HTML content. For this we used the html() method, which is also provided by Glow.
The three parts of this demonstration: waiting for a page to become ready, getting a reference to a DOM element, and modifying that DOM element, are common examples of using Glow, but that is only the very beginning of what you can do.
Introducing selectors
The previous example uses the glow.dom.get() method, which takes a string as its argument. That string argument allows us to refer to a specific DOM element or group of elements on a web page. In our case we wanted to refer to the paragraph element with an id of "greeting".
The string we used to express that was #greeting, which is exactly how you would refer to that same element in a Cascading Style Sheet (CSS) rule. The selectors that Glow uses are very similar to CSS selectors.
This method of specifying page elements should already be familiar to any developers who have used CSS, and is also quite flexible and powerful.
A simple example using selectors
If you have ever worked with CSS selectors you should already feel at home with Glow selectors. Selectors are the heart of much of Glow's functionality. Below are two simple demonstrations showing them in use.
Create another page using the HTML from above, and add the following code to the empty script tag.
glow.ready(function() {
glow.dom.get("p").css("border", "2px dashed #CCC");
glow.events.addListener(
".salutation",
"click",
function () {
alert(glow.dom.get(this).html());
}
);
});
Now add this HTML as a child of the body element.
<p class="salutation">Hello,</p>
<p class="salutation">World</p>If you view the page in a browser, you should see the following result.
In this example we first call glow.dom.get() with a "p" selector. As with CSS rules, using a "p" selector will match all paragraph elements on your page.
glow.dom.get() returns a glow.dom.NodeList object containing all the elements matched by the selector. You may assign this NodeList object to a variable if you wish, but here we simply chain a call to the NodeList's css() method to add borders to the elements.
glow.dom.NodeList is a very powerful part of Glow, and we recommend you look through it's documentation to find out more.
Next we add an event listener using glow.events.addListener(). This takes a selector, the name of an event and a listener function as parameters.
In the event listener example we have used the selector string ".salutation". As you might expect the dot at the beginning of the selector means it matches all elements with that particular class name. The listener function will be called every time a matching element fires a click event.
Widgets
In addition to the features found in the core file, Glow includes a set of widgets that you may use in your pages.
To use the widgets file you must first include the core file, and then include the widgets file JavaScript and CSS files.
<script src="/myscripts/glow/n.n.n/core/core.js" type="text/javascript"></script>
<script src="/myscripts/glow/n.n.n/widgets/widgets.js" type="text/javascript"></script>
<link href="/myscripts/glow/n.n.n/widgets/widgets.css" type="text/css" rel="stylesheet" />We won't cover the widgets in detail here, but now you have created some simple examples using Glow we encourage you to look at the widgets documentation and give them a go!
Next steps
This has been a brief glimpse of what you can do with Glow. Hopefully you have been able to install the Glow library, use it in some simple web pages, and learned of the general structure and features that are now available to you.
To learn more you may want to look through the resources in the Documentation section.
Getting help
As you learn more about Glow you are likely to have questions and even suggestions you want to discuss.
Help is never far away, we offer several ways for you to get assistance or share your comments. To find out how you can get in touch, check out the Community section.
