Cooking a Meteora's Calculator
In this post I'll try to explain how to write a simple component on Meteora using the Widget element, it is one of my favorites Meteora's elements, whit it we can create HTML elements on fly and change his properties, the general structure is shown below :
For example if we want a button with the id 'mybutton', and class 'myclass' the code could be written like :
Well, the first step to create our calculator, is to know how it will be look, for that reason we need to design the interface and identify the “containers” and “objects” that are really necesary.(if you do that before write a line of code your world will be easier).
After two cookies and one chocolate, the result is that:
The image above show us how many divs we need and their disposition, now with the interface designed we are ready to start programming, next we create the file Calculator.js on src/lib/Control path from Meteora project, declare the variable to extend the Control, with an initialize function.
initialize: function(){
this.__buildComponents();
this.__bindEvents();
},
__builComponents:function(){
},
__bindEvents():function(){
}
});
The initialize function will build the HTML elements and will append a function for every object that required it, this is a quick explanation of the __builComponents and __bindEvents :
//In this variable we declare all the components of our interface
this.components = {
//Our display element to get the results
display : Widget.input({'class':'m-display','value':'0'}),
//Our buttons with a specific class, value and id
buttonOne : Widget.button({'class':'m-number-button','id':'btn1','value':'1'},__('1')),
buttonTwo : Widget.button({'class':'m-number-button','id':'btn2','value':'2'},__('2')),
//... [ Repeat that code for every number ... 3,4,5 ] ....
//Now we create our div sections to group our buttons
sectionA : Widget.div({'class':'m-calc-section'}),
sectionD : Widget.div({'class':'m-calc-section'})
//... [ Repeat that code for every section identified in the interface design ] ....
}
//When we have all our components we group the buttons into the divs
//Our first section with the display
this.components.sectionA.appendChildren([
this.components.display
]);
//The section D with One and Two buttons
this.components.sectionD.appendChildren([
this.components.buttonOne,
this.components.buttonTwo,
]);
//The principal container with all the sections
this.components.Calculator.appendChildren([
this.components.sectionA,
this.components.sectionD
]);
//We can call another Meteora's Control in this case we call a Dialog to add our new Components
Meteora.overlay();
this.components.dialog = new Dialog(
this.components.Calculator,
{
'title': __('Meteora\'s Calculator'),
'onClose': function() {
Meteora.removeOverlay();
this.components.dialog = null;
}.bind(this),
'width': 198,
'height': 300
}
);
this.components.dialog.center();
}
__bindEvents:function(){
//Getting all the buttons of the Calculator Component
var buttons = this.components.Calculator.getElementsByTagName('button');
//For every button add a Click Event
for(var i = 0; i < buttons.length;i++ ){
buttons[i].addEvent(
'click',
function(buttonval){
//Here "all that you want to the button do"
}.bind(this,buttons[i].value)
);
}
}
Now with a CSS containing the class specified of our buttons we can complete our initial desing an have an ice-candy javascript calculator :D.
You can see the complete code HERE and the calculator running HERE.
- Sunday May 18, 2008 @ 00:02
- Write a comment
{ About the author
josue
Josue is a Web developer working on Astrata with good friends, he love the music and the science, learn always is funny.
Great tutorial!
Nice example :), source code looks a little scrambled, but I guess that's textmotion's fault.
La verdad, es emocionante explotar la versatilidad cuando se programa y más cuando es complementado con un buen diseño, lo cual se te da muy bien. Felicidades por tu theme también
No lo había visto, quedo chido!!
A ver cuando te das una vuelta por aca!
buen material..empezare a probar este framework del framework!