After almost one year i haven't touch GWT-Ext, and i almost forgot about how to use it, for 4 months now i play with Mootools for building dynamic web site (an online store with new way ordering system). I think it is a fun way to build interactive website with Mootools, since i avoid code using Java (my team mainly use PHP for it's developing language). Since i have learn it, maybe i can share my experience about Mootools.
Mootools 1.2 (there are many Mootools version, and it is incompatibility between version. Mootools 1.2 is the newest one), is a javascript framework that make you ease to build interactive, dynamic, and rich website. Actually, in beginning i was forced to use it since Joomla/Virtuemart use it (and i don't know that they use Mootools 1.11 when i use Mootools 1.2). I found it quite interesting, well because when I can't get component / widget / something that ready to use for my requirement, I can easily make it by myself. And many components in my project was built by me.
Hmm.. maybe the first thing to introduce Mootools is the Element. Why do i choose this, it's because from Element we can do many thing in advance.
What is Element? maybe it will be easier when we look its example first.
html:
<div id="somepartofwebpage"></div>
javascript:
var somepart = $('somepartofwebpage');
So, what we've got in here. Firstly, Element is an HTML element, which is also same as the HTML's object, such as <html>, <body>, <table>, <div>, etc. The example above describe a 'div' element with id property 'somepartofwebpage' to be stored in somepart variable. With Mootools, we can do some awesome thing with this Element, like creating new element, change, delete, add events, add effects, and many more. Okay, let's look another example:
html:
<div id="somepartofwebpage"></div>
javascript:
var somepart = $('somepartofwebpage');
var newinnerpart = new Element('div',{'id': 'newinnerpart', 'text':'This is new element created with javascript'});
newinnerpart.inject(somepart);
var anotherinnerpart = new Element('a', {'id': 'newinnerpart', 'html': 'this is another element that created with javascript', 'href': 'http://jonif.blogspot.com'});
anotherinnerpart.inject(somepart, 'top');
This example show how to create new element and fill it in another element (somepart element). newinnerpart and anotherinnerpart is just a same way how to create an element. newinnerpart create div element with its content defined in text property. And anotherinnerpart create a link with its text defined in html property and its target to jonif.blogspot.com. There several way to insert the element into another element besides using inject, there are grab, wrap, adopt, and appendText. For each of its function please take a look its API.
From example above, it is showed that the constructor of Element are two parameters, the type of element as a string, and the properties. Its properties can be the attribute of the element (such as 'id', 'class', 'style', etc), 'text' which is the text inside the element, 'html' which is the HTML inside the element, events, or something else (try to look the API to be more detail).
Now, take a look at this:
html:
<div id="'somepartofwebpage'">Hai</div>
<input type='button' id='showtextbutton' value='Show Text'/>
javascript:
var initializeJS = function() {
var showtextbutton = $('showtextbutton');
showtextbutton.addEvent('click', function(e) {
e.stop();
$('somepartofwebpage').set('html',"<strong>Hello World!</strong>");
});
};
window.addEvent('domready', initializeJS);
This example explain how to add an event and change the text (or the property of the Element). initializeJS function made to be called after the all DOM ready, this is because Mootools need all DOM to be ready. By using method set() we can change any properties of the element. And of course with method get() we can get the property's value of the element. For other event type please take a look of the API documentation.
Another example:
html:
<div id="somepartofwebpage">Hai</div>
<input type='button' id='emptybutton' value='Empty the div'/>
<input type='button' id='destroybutton' value='Destroy the div'/>
javascript:
var initializeJS = function() {
var emptybutton = $('emptybutton');
var destroybutton = $('destroybutton');
emptybutton.addEvent('click', function(e) {
e.stop();
$('somepartofwebpage').empty();
});
destroybutton.addEvent('click', function(e) {
e.stop();
$('somepartofwebpage').destroy();
});
};
window.addEvent('domready', initializeJS);
This example show us how to empty the content of the element and how to destroy / remove the element. Make the element empty means all of elements inside the element will be removed, but the element itself and its properties still exist.
Okay, I think that is all the basic about how to use Element of Mootools. There are also called Elements, that consist of elements that match with the condition given. Elements is array of Element. Example:
html:
<div class="dummyclass" style="width:300px;height:40px;background-color:yellow;">Panel 1</div>
<div class="dummyclass" style="width:300px;height:40px;background-color:red;">Panel 2</div>
javascript:
var initializeJS = function() {
var somepart = $$('div.dummyclass');
somepart.addEvents('mouseenter': function(){
this.set('tween', {duration: 1000}).tween('height', '200px');
},
'mouseleave': function(){
this.set('tween', {}).tween('height', '40px');
}
);
};
window.addEvent('domready', initializeJS);
This example show you about adding an effect when the event occur. But i'm afraid i don't want to discuss about the effect, and it will have its time later. The example show about using Elements. The story is like this, there are two div element that have same class property and at the javascript all of these div grabbed into an array of Element by using $$ (which is the symbol of Elements). By using Elements, we can add events to all of its member.
Eventhough now I've been assigned in Microsoft Office Sharepoint Server to maintain web site content by doing some CSS and ASP.NET programming, but still, my body want to move by itself and my mind thinking by its own to code Java app.
