Hey Folks,
You might have recently read on Digimantra that we discussed about the Glow, an open source javascript library by BBC. Many of my readers did not believe this at first that a company like BBC can release an open source library. But the fact is yeah they have been releasing this since long now. Moving further I wanted to write about how to get started with Javascript Glow. I think there are very few tech blogs who write about Glow, so lets begin. 
Download the latest version of Glow and extract the contents into a folder.
The folder hierarchy is very easy to understand. Here I am going to show some basic functionality of Glow and then in later posts I am gonna write about widgets provided by Glow. So for that let us include the core.js which is responsible for basic DOM functionality and event handling in Javascript. To include core.js goto folder/x.x.x/core/core.js , where x.x.x represent the version number which u you downloaded.
The code given below explains how you can assign CSS to a div by two methods. The first div gets its CSS as soon as the document completes loading, however the second div gets the CSS assigned only when you click over it. That means the second way is a very good example of event association in glow. It is fairly simple and the methodology is similar to JQuery.
<html> <head> <script type="text/javascript" src="glow/glow/1.5.1/core/core.js"></script> <script type="text/javascript" > //gets called implicitly when the document completes loading. glow.ready(function(){ glow.dom.get('.eg_main_div').css("background-color","#fff545"); //get a div from its classname and assign some CSS //example of event binding glow.events.addListener(".eg_lower_div","click",function(){ //gets a div by classname and assigns some CSS glow.dom.get(this).css("background-color","#fff545"); }); }); </script> </head> <body> <div class='eg_main_div'> <p class='para'>Digimantra, Technology Tips for all</p> </div> <div class='eg_lower_div'> <p class='para2'> I am also inside a para and div </p> </div> </body> |
Explanation
In the above code, glow.dom.get is used to get the reference of the div who has the class .eg_main_div. Notice the “.” with the string passed in the glow.dom.get, it acts like a selector. If you want to get a reference of an element with its name then you can simply pass its name. For instance if you want to get reference of all the divs on a page, then use glow.dom.get(“div”). “.css” assigns CSS to the referencing element.
Attaching Events
Attaching Event is also very easy using Glow javascript Library. You just have to add a listener to the element using glow.events.addListener and when the event occurs the function is executed which is passed as 3rd argument in the function. In the above example I have passed this anonymous function, but you can pass the function name as string to this argument.
Hope you create some good stuff with Glow Library. We will be back with more examples on widgets you can create with Glow. So do not miss the updates, subscribe to RSS
Stay Digified !!
Sachin Khosla
