The Glow JavaScript library simplifies DOM manipulation, provides for easy animations and AJAX, and includes several widgets that can speed site development.
The British Broadcasting Corportion, the U.K.-based broadcasting company, has been using Glow on its own sites for some time. Late last year, in an effort to be more open, the BBC released Glow under an Apache license, allowing web developers to use this effective library for nearly any project, commercial or otherwise, and to modify it as needed.
Generally speaking, Glow is not as comprehensive as the YUI JavaScript library, the Prototype JavaScript library, or the increasingly popular jQuery JavaScript library. But it is, perhaps, more utilitarian. In fact, Glow offers easy solutions that achieve the most common JavaScript tasks without some of the less frequently used functions and methods found in other libraries.
Glow Selectors
DOM selectors in Glow are very simple. First, they follow normal CSS syntax. So if you are familiar with CSS, you can use Glow selectors. Next, they reference Glow, making it easier to use Glow in conjunction with other third-party JavaScript or libraries.
Here is a quick example of using a Glow selector to create a node list of all of the paragraph elements on a given page.
glow.dom.get("p");
Here is an example that will select all elements with the class name of "some-class."
glow.dom.get(".some-class");
As in other JavaScript libraries, Glow allows for advanced chaining. In the example below, a Glow selector gets an element with the id of "wrapper," and then assigns it a new CSS style description.
glow.dom.get("#wrapper").css("background", "#c0c0c0");
Widgets
Glow also offers a nice selection of functional widgets, and, in fact, using these widgets is a great way to get started with this excellent JavaScript library.
Sortable
Specifically, I am going to demonstrate how to use Glow's sortable widget, which creates drag-and-drop ready sections. For my example, I am going to imagine that I want ecommerce site visitors to reorganize the product grid pictured below.
The HTML for the example page shown above sets each product image into its own span. The markup also references several external style sheets, including a Glow widget style sheet that is included when you download the library. I also call two Glow-related JavaScript files at the end of the page.
<!doctype html> <html lang="en"> <head> <title>Warming Up To Glow</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="glow/1.7.3/widgets/widgets.css"> <link type="text/css" rel="stylesheet" href="960.css"> <link type="text/css" rel="stylesheet" href="reset.css"> <link type="text/css" rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <div class="container_12" id="wrapper"> <div class="grid_12" id="header"> <h1>Musical Chairs Store</h1> <p>This is a Glow Sortable Widget Example</p> </div><!--end header--> <div class="clear"></div> <div class="container_12" id="content"> <div class="sortable"> <span class="widget grid_4"><img src="chair-1.png" alt="chair image" /></span> <span class="widget grid_4"><img src="chair-2.png" alt="chair image" /></span> <span class="widget grid_4"><img src="chair-3.png" alt="chair image" /></span> </div> </div><!--end content--> <div class="grid_12" id="footer"><p>This is a <em>Ecommerce Developer</em> demonstration.</p></div><!--end footer--> </div><!--end wrapper--> <script src="glow/1.7.3/core/core.js"></script> <script src="glow/1.7.3/widgets/widgets.js"></script> <script src="js.js"></script> </body> </html>
In addition to the widget.css file, and the style sheet files associated with the 960 Grid System, I wrote just three lines of style descriptions.
#header, #footer {margin: 50px auto;}
.sortable { height: 300px; width: 1500px; overflow-y: hidden; overflow-x: visible; cursor: move;}
.sortable .glow-sortable-dropindicator {background: #c3c3c3;}
Initiating the Glow widget required just one line of code, which I placed in a file called js.js. In truth, this could have been an internal script, but as a matter of preference, I used the aforementioned external file.
new glow.widgets.Sortable('.sortable');
This was all that Glow required to make my product grid sortable. The image below shows that when I select a product image (chairs in my example), a gray "drop zone" is created dynamically and appended to the "sortable" div.
Placing the second chair image in the drop zone reorganizes my product grid. Note the green chair is now on the left.
Next, I can drag the red leather chair, which was on the right in the image above to the drop zone.
Notice that the Glow widget again reorganizes the product images.
Summing Up
In just a few steps, I have demonstrated how to implement a Glow widget in its simplest form. I hope that I have also given you a brief, but positive introduction to the Glow JavaScript library.
