You can write in pure Javascript or in PEG.js-Style syntax. There is not much to see yet. I haven’t uploaded it to GitHub yet. but there is a demo in my code lab

In this article I am going to write about setter & getter, Function.prototype.caller / arguments.callee.caller and an implementation of a Getter/Setter Class. I am also going to demystify (yeah sort of ) the secret behind adobe flex’s data binding and openlaszlo’s constrain using the power of function.caller.

Javascript Getter & Setter

Recently there are some progress in implementation of setter and getter in javascript. After Mozilla introduced it to us long time ago, recently Safari also supports those methods. John Resig also wrote a cool article about setter and getter.

in the future we will be able to write:

1
2
3
4

a = {
set b(){},
get b(){}
}

this is great since it gives us more control over our variables. Defining setter and getter can be very effective avoiding the need of creating methods like setX(), setY() etc.

an example usage of setter would be:

1
2
3

a = {
set value(val){this._val = val < 0 ? 0 : val > 10 ? 10 : val;}
};

the code limit the number that can be assigned to a.value. If the number is smaller than 0@ @a.value will get the number 0@, if it is bigger than @10, it will be 10@. But you see the problem here, @this._val is not really private. you can still change a._val to bypass value setter.

Mutable.js

Today I did some experiment about how to implement this kind of features in today’s browsers. So I came up with Mutable.js

1
2
3
4
5
6
7
8
9
10
11
12
13

var a = {
	value: new Mutable({
		value: 0,
		setter: function(value)
		{
			this.value = value < 0 ? 0 : value > 10 ? 10 : value;
		},
		getter: function()
		{
			return this.value;
		}
	})
};

So this code will allow you to access the property like this:

1
2
3
4
5
6

a.value(1);
// a.value = 1;
a.value(11);
// a.value = 10;
a.value()
// a.value = 10;

Ok, it is not new, and not as cool as real setter and getter. but there are some other cool features, so keep reading…

Big Brother is Watching You

I did also include eventlistener that will be triggered each time the value changes

1
2
3
4
5
6
7
8
9
10

var a = {
	value: new Mutable({value: 0})
};
 
a.value.watch(function(oldval, newval){alert(oldval+'changed to'+newval)});
 
a.value(2);
// a.value = 2
// alert: '0 changed to 2'
a.value.unwatch();

No Trespassing

I am also experimenting with Function.prototype.caller which allows you to check which function is accessing the function. It allows me to implement this feature.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var a = {
	value: new Mutable({value: 0})
};
 
var fn1 = function(){a.value(3);}
var fn2 = function(){a.value(4);}
var fn3 = function(){a.value(5);}
 
// protect a.value, so it can only be altered by fn1 & fn3
a.value.lock(fn1, fn3);
fn1()
// a.value = 3;
fn2()
// access denied. a.value = 3;
fn3()
// a.value = 5;

Flex’s Binding

After implementing this I got the Idea that function.caller can be used to create data binding just like in flex. If you have worked with flex or openlaszlo you will know how cool is it to be able just to bind a property by using {bracket}.

1

<textfield value="{mySlider.value + myWindow.width}">

Moving the slider will magically change the value of the textfield. how awesome! After some experiments I finally understand how it might be working. And I am going to tell you how to implement this in javascript!

Let start with analysing what is happening there. {mySlider.value + myWindow.width} is a string that will be converted to a function.

so let assume that it will be converted to this:

1
2
3
4
5

textfield = {
	set value(){
		this.$value = (mySlider.value + myWindow.width);
	}
}

so what happens here? if mySlider.value has a getter (myWindow.width too), the getter will be called. Using arguments.callee.caller we will be able to get the caller. and in this case it is the value setter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

textfield = {
	set value(){
		// this is to make easier to identify the function. arguments.callee is value setter function
		arguments.callee.bindable = true;
		this.$value = (mySlider.value + myWindow.width);
	}
}
mySlider = {
	constrains: [],
	get value(){
		var caller = arguments.callee.caller;
		// isBinded is to make sure that this function only once binded.
		if(caller && caller.bindable && !caller.isBinded)
		{
			constrains.push(caller);
			caller.isBinded = true;
		}
		return this.$value;
	}
	set value(x){
		this.$value = x;
		// this will alert textField to update its value;
		for(var i=0; i<this.constrains.length; i++)
			this.constrains[i]();
	}
}
 
// the same with myWindow

Now we can implement this to Mutable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

textfield = {
	value: new Mutable({
		value: 0,
		setter: function(value)
		{
			this.value = value;
			alert('textfield-value:'+value);
		}
	})
};
 
mySlider = {value: new Mutable({value: 1})};
myWindow = {width: new Mutable({value:100})};
 
// now the magic
textfield.value.bind(function(){return mySlider.value() * 2 + myWindow.width();});
// alerts 'textfield-value:102'
 
mySlider.value(10);
// alerts 'textfield-value:120'
 
myWindow.width(200);
// alerts 'textfield-value:220'

Cool isn’t it? Unfortunately function.caller is not an ECMA standard, so not all javascript engine have that feature. Opera and Rhino don’t have it. But fortunately we have it in Firefox, IE and Safari, so may be it is big enough to be considered. What do you think?

update: Opera 10 will support this! Hooraay!

I hope this article is useful to you.

Mutable.js is available here.

now V0.2 is out!

Many new features. Many Bug fixes.
Now the documentation is in the source code. Using ScriptDoc (sort
of). Ive created a ScriptDoc parser so that it will automatically
generated into html file (resides in doc/static).

This time we replace shell scripting with javascript shell scripting
for code generating, using Rhino.
read this for more information.

if you want to know more, just see it yourself (see changelog):
http://github.com/raid-ox/chain.js/tree/v0.2-stable

it still backward compatible.

new documentation here

enjoy

For v0.1:
http://javascriptly.com/2008/08/a-better-javascript-template-engine/
Updated to v0.2:
http://javascriptly.com/2008/09/chainjs-02-updated-examples/

Thanks for the article!

We start with the html code.

1
2
3
4
5
6
7

<div id="tabs">
	<div class="tab"><span class="title">Title</span></div>
	<div style="clear:both;"></div>
</div>
<div id="content">
	<div class="content">Content goes here.</div>
</div>

#tabs ist the container of the tabs, containing <div class="tab">, a prototype of our tab item.
And we put a clear div, because we plan to make the tab horizontal aligned with float:left.

To make it more stylish, we add some css to it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.tab {
	float: left;
	cursor: pointer;
	background: #0080FF;
	padding :3px 10px;
	margin-right: 5px;
	color: white;
}
 
#content {
	border: 1px solid #0080FF;
	padding: 5px;
	min-height: 30px;
	width: 500px;
}

Now the tab widget should look like this:

Now lets add some magic :D. The tab interface will be chained to the data.

1
2
3
4
5
6
7

$('#tabs')
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.chain();

Hmm, something is wrong! The <div style="clear:both;"> is gone! We have to do some workarounds.

1
2
3
4
5
6
7
8
9
10
11
12

var divclear = $('<div style="clear:both"></div>'); // The clear:both
$('#tabs')
	// The Workaround
	.update(function(){
		$(this).chain('anchor').append(divclear);
	})
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.chain();

So it will append the css clear each time the tabs is updated. Now it looks like this:

To make the tab selectable, lets add selectable() and add some css.

1

.tab.selected {background: #3D3DFF;}

now the javascript looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

var divclear = $('<div style="clear:both"></div>'); // The clear:both
$('#tabs')
	// The Workaround
	.update(function(){
		$(this).chain('anchor').append(divclear);
	})
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.selectable({required:true})
	.chain();

The actual progress:

Now you can select tabs, but still the content wont change. lets link the content below to the tabs.

1

$('#content').item('link', '#tabs', 'selected').chain();

Viola! you have a tabbed interface. Pretty easy, isn’t it?

You can make your tabs sortable etc. pretty easily, just with sortable(). Now the full javascript code with sortable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var divclear = $('<div style="clear:both"></div>'); // The clear:both
$('#tabs')
	// Workaround for float. Clearing tab each time it is updated
	.update(function(){
		$(this).chain('anchor').append(divclear);
	})
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.selectable({required:true})
	.draggable({axis:'x'})
	.sortable({align:'horizontal'})
	.chain();
 
$('#content')
	.item('link', '#tabs', 'selected')
	.chain();

take a look at the full demo here

Data binding is an important part of our life as developer. Our job is to feed the users with data in a way so that they can work with it.

In the Server Side Age this binding is done in the server, usually using templates.

1
2
3
4

<div class="contact">
	<div><?php echo $name ?></div>
	<div><?php echo $address ?></div>
</div>

Nowadays, in Ajax world, we move all of this to the client side and with only one scripting language: javascript. Javascript doesn’t provide tool for binding data to html efficiently (not mentioning E4X). Still there are some ways to do this.

Using Templates

With the help of javascript libraries, you can do templates to bind your data to html.

var template = "<div class='contact'><div>{name}</div><div>{address}</div></div>";
var templateFunction = parseTemplate(template)
document.getElementById('container').innerHTML = templateFunction(data);

This method can be considered as the fastest way to generate content, since the innerHTML method is very fast. The real disadvantage of it is that it doesn’t play well with event. You can attach event to the generate content, but whenever the data changes, the whole content needs to be refreshed and the attached events will be lost.

The DOM Way of Life

A better method to bind data to the html is using DOM. With DOM you can manipulate the html using various DOM methods. This way, you can work with the various DOM events and use the interaction capabilities it offers and make your web application feels more dynamic.
However , there are some hassles of doing it this way. First, there are some incompatibilities between browsers and sometimes it can get very complex and ugly.

1
2
3
4
5
6
7
8

var contact = document.createElement('div');
contact.className = 'contact';
var name = document.createElement('div');
name.innerHTML = data.name;
contact.appendChild(name);
var address = document.createElement('address');
address.innerHTML = data.address;
contact.appendChild(address);

Fortunately there are some great javascript libraries like jQuery.

$('<div class="contact"><div class="name"/><div class="address" /></div>')
	.find('.name').text(data.name)
	.end()
	.find('.address').text(data.address);

But still, it gets repetitive if you have a lot of modules.

The solution I came up with for this problem is chain.js.
Chain.js provides automation service for this kind of tasks, and spare you from repetitive tasks.

$('<ul><li><span class="library" /></li></ul>')
    .items([
        {library:'Prototype'},
        {library:'jQuery'},
        {library:'Dojo'},
        {library:'MooTools'}
    ])
    .chain();

Chain.js isn’t just bind data automatically to your HTML, but it also maintains and manages your data/items.

var data = {first:'Stephen', last:'Hawking'};
 
// Add one item
$('#persons').items('add', data);
 
// Remove item
$('#persons').items('remove', data);

Chain.js updates the View automatically (and in an efficient way) each time you add or remove data.
And the best of it is that your event won’t be gone during the updates.

$('<div><div class="name">Name</div><div class="address">Address</div></div>')
    .item({name:'Steve Jobs', address:'Cupertino'})
    .chain(function(){
        this.bind('click', function(){
            var data = this.item();
            alert('name:'+data.name+', address:'+data.address);
        });

and of course there are many more features. just visit the wiki page

This is the first proposal drawn by Gonzales, an exchange student from Argentina:

And this is a final poster vectorized by me:

1. Abizeitung
2. Abi T-Shirt
3. Abi Party
4. Abi Denkmal
5. Abi Ball
6. Entlassung

We also decided that we need a website (or a blog) to ease up the communication and as always I am pointed to do that. I don’t want to put it off, so I did it today in a marathon. The design is finished so far and it is also implemented for the most part. For the CMS I use wordpress as a matter of course!

.

Tapi ya sudah lah, wong situs yang lama gak ada isinya ini, hehe.. Yang penting sih sebenernya cuman proyekku “foo”. Cuman kalau dipikir2 ya sampai sekarang belum di update lagi, dan pemakai juga ga ada. Ya ikhlas aja deh, toh dengan hilangnya site itu saya jadi tergugah untuk membuat website baru.

Tapi sepertinya bikin website aja ga ada gunanya kalau gak di update, jadi sekarang saya bertekad untuk mengupdate site ini! Jadi untuk itu tolong support saya dengan memberikan comments2 yg membangun ok?

Salam & Enjoy