web(cslai) http://cslai.coolsilon.com Findings and Notes in Web Development Wed, 03 Mar 2010 17:25:05 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/images/public/somerights20.gifSome Rights Reserved Writing jQuery Plugin 101 http://feedproxy.google.com/~r/cslai/~3/Js4k2rSiBVA/ http://cslai.coolsilon.com/2010/03/04/writing-jquery-plugin-101/#comments Wed, 03 Mar 2010 17:25:05 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=145 I often struggle to get my Javascript code organized, and have tried numerous ways to do so. I have tried putting relevant code into classes and instantiate as needed, then abuse jQuery’s data() method to store everything (from scalar values to functions and callbacks). Recently, after knowing (briefly) how a jQuery plugin should be written, it does greatly simplify my code.

While there are still a lot to learn about plugin authoring, I would only jot down what I know right now. As the code may not conform to the best practice, please let me know if there is a better way.

To begin, we start with an empty html page


<html>
<head>
<title>Title</title>
</head>
<body>
<input type="text" id="a" /><br />
<input type="text" id="b" /><br />
<input type="text" id="c" />
<script type="text/javascript" src="./jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>

The first included Javascript script is obviously jQuery, the second file (script.js) is my code, which is not named properly. The basic structure of the file should look like follows:


(function($) {
var module_init = function(plugin, module) {
return function(action) {
var arg = trim_argument(arguments);
return this.each(function() {
if($.fn[plugin][module][action]) {
$.fn[plugin][module][action]
.apply(this, arg);
} else {
throw(action + '() does not exist');
}
})
}
},
 
module_exists = function(plugin, module) {
return $.fn[plugin][module];
},
 
shift_argument = function(item, arg) {
result = [item];
 
for(i = 0; i < arg.length; i++) {
result.push(arg[i]);
}
 
return result;
},
 
trim_argument = function(arg) {
result = [];
 
if(arg.length > 1) {
for(i = 1; i < arg.length; i++) {
result.push(arg[i]);
}
}
 
return result;
};
 
// further code below this line
})(jQuery);

Let us just ignore the functions above for now and proceed to the actual plugin code first. What we're trying to achieve here is to post whatever written to #a is posted to #b, and #b post it to #c. The function call should be as follows:


$(selector).foo(sub_module, options);
// or
$(selector).foo(sub_module, action, [parameter_if_any]);

foo is the name of the example plugin, and sub_module determines which sub-module is responsible to carry out the actual action specified by action. If options is passed in instead, then it would trigger init() for the respective sub-module.

In short, foo() is there just to notify the sub-module to call the right action, hence the code should be simple, as follows (add after the last comment in the basic structure code shown above):


(function foo() {
$.fn.foo = function(module, param) {
var arg = trim_argument(arguments);
 
return this.each(function() {
if(module_exists('foo', module)) {
if(typeof param != 'string') {
$.fn.foo[module]
.apply($(this), shift_argument('init', arg));
} else {
$.fn.foo[module]
.apply($(this), arg);
}
} else {
throw(module + ' module does not exists');
}
});
}
})();

I have a habit to group all the relevant bits together, hence the code is enclosed in an immediately executed function block. It does what it is designed to do — to delegate the function call to the respective sub-module. trim_argument(); is there to remove the first argument (in this case module), and shift_argument(); is used to insert an argument into the existing argument list. These two function functions are written to enable us to manipulate the arguments to be used in Function.apply() method. Of course, if the specified sub-module does not exist, the code will throw an exception.

Now that we have the main plugin code written, next is to start developing the submodules. Firstly, is a plugin for the text box #a. The textbox is supposed to show textbox #b and passes the input text to #b whenever the value is not null. The code is to be added right after the main plugin, as mentioned above.


(function alpha() {
$.fn.foo.alpha = module_init('foo', 'alpha');
 
var alpha = $.fn.foo.alpha;
 
alpha.init = function(options) {
$(this)
.data('options', $.extend({}, options))
.keyup(alpha.alpha_update);
};
 
alpha.alpha_update = function() {
$(this)
.data('options').b
.foo('bravo', 'alpha_update', $(this).val());
};
})();

module_init is there to do the actual delegation of action. Again, it will check with the remaining arguments after removing the first, which is the action. The function will then attempt to call the action if available, otherwise a new exception is thrown.

alpha.init is a compulsory method that initializes the sub-module. On the other hand, alpha.alpha_update is the actual code that updates another textbox via another sub-module, which is named ‘bravo’, and coded as follows:


(function bravo() {
$.fn.foo.bravo = module_init('foo', 'bravo');
 
var bravo = $.fn.foo.bravo;
 
bravo.init = function(options) {
$(this)
.data('options', $.extend({}, options))
.hide();
};
 
bravo.hide = function() {
$(this).fadeOut('fast');
};
 
bravo.show = function() {
$(this).fadeIn('fast');
};
 
bravo.toggle = function(value) {
if($(this).is(':hidden') && value.length > 0) {
bravo.show.call(this);
} else if($(this).is(':visible') && value.length == 0) {
bravo.hide.call(this);
}
};
 
bravo.alpha_update = function(value) {
$(this)
.val('bravo: ' + value)
.data('options').c
.foo('charlie', 'alpha_update', value);
 
bravo.toggle.call(this, value);
};
})();

The bravo code basically does what it is intended to, which is to receive update from alpha, and then toggle the display of the text box depending on the length of passed in value. After that, bravo is going to post the received update to charlie, as follows:


(function charlie() {
$.fn.foo.charlie = module_init('foo', 'charlie');
 
var charlie = $.fn.foo.charlie;
 
charlie.init = function(options) {
$(this)
.data('options', $.extend({}, options))
.hide();
};
 
charlie.hide = function() {
$(this).fadeOut('slow');
};
 
charlie.show = function() {
$(this).fadeIn('slow');
};
 
charlie.toggle = function(value) {
if($(this).is(':hidden') && value.length > 0) {
charlie.show.call(this);
} else if($(this).is(':visible') && value.length == 0) {
charlie.hide.call(this);
}
};
 
charlie.alpha_update = function(value) {
$(this).val('charlie: ' + value);
 
charlie.toggle.call(this, value);
};

After receiving data from bravo, likewise, it updates the textbox, then display or hide the textbook accordingly. For every action method call, this keyword is usually similar to the jQuery callback functions, which refers to the respective html element (not wrapped with jQuery functions), hence the function call within the sub-module is often via Function.call() /* or */ Function.apply().

To run the code, one only need the following code:


$(function() {
var a = $('#a'),
b = $('#b'),
c = $('#c');
 
a.foo('alpha', { b: b, c: c }).focus();
b.foo('bravo', { a: a, c: c });
c.foo('charlie', { a: a, b: b });
});

That’s all, we have done a very simple, and pointless plugin.


]]> http://cslai.coolsilon.com/2010/03/04/writing-jquery-plugin-101/feed/ 1 http://cslai.coolsilon.com/2010/03/04/writing-jquery-plugin-101/ Mixing Non-array and Array in array_map() http://feedproxy.google.com/~r/cslai/~3/i1rqaMvqbr0/ http://cslai.coolsilon.com/2010/01/28/mixing-non-array-and-array-in-array_map/#comments Thu, 28 Jan 2010 03:34:07 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=141 array_map function is a function that I use the most in my php scripts recently. However, there are times where I want to pass some non-array into it, therefore often times I have code like the snippet shown below:

$result = array_map(
'some_callback',
array_fill(0, count($some_array), 'some_string'),
array_fill(0, count($some_array), 'some_other_string'),
$some_array
)

It doesn’t look good IMO, as it makes the code looks complicated. Hence, after seeing how the code may vary in all different scenarios, I created some functions to clean up the array_map call as seen above. Code snippet after the jump

function array_map_mix($callback, $param) {
$main = array();

$args = func_get_args();

if((is_numeric($param) && count($args) < 3)
|| (is_array($param) && count($args) < 2)) {
throw new Exception('No input available.');
} elseif(is_array($param)) {
list($main, $param) = array($param, count($param));
} elseif(is_numeric($param) === FALSE) {
throw new Exception('Invalid parameter');
}

return call_user_func_array(
'array_map',
array_merge(
array($callback),
count($main) > 0 ? array($main) : array(),
count($args) - 2 > 0 ?
array_map(
'array_create',
array_create(count($args) - 2, $param),
array_slice($args, 2)
)
: array()
)
);
}

function array_create($count, $input) {
$result = array_fill(0, $count, NULL);

if(is_array($input) && count($input) == 1 && is_array($input[0])) {
$result = array_fill(0, $count, $input[0]);
} else if(is_array($input) && count($input) == $count) {
$result = $input;
} else {
$result = array_fill(0, $count, $input);
}

return $result;
}

array_create

Before stepping into the main array_map_mix function, we first look at the array_create function. It is basically a variant of array_fill function, but without the initial index argument.

The important argument here is the $input argument, depending on what is passed into the function, the end result can be different. If anything but array is passed in, then it will behave exactly like the array_fill call as follows:

$foo = array_create(5, 'bar');
// is equivalent to
$foo = array_fill(0, 5, 'bar');

However, if an array is passed in, and the array element count is equivalent to the $count argument, then array_create will return $input without any modification.

array('bar', 'baz') == array_create(2, array('bar', 'baz'));

If the array passed in has one and only one element, and the element happens to be another array, then the child array is passed into the array_fill function, as follows

$foo = array_create(3, array(array('bar', 'baz')));
// is equivalent to
$foo = array_fill(0, 3, array('bar', 'baz'))

If the array passed in doesn’t fulfill the above two conditions, then the end result is similar like passing in a non-array argument.

$foo = array_create(3, array('bar'));
// is equivalent to
$foo = array_fill(0, 3, array('bar'));

The weird behavior caused by the array argument is actually intended, as this function is initially created for the following function, which is the array_map_mix function.

array_map_mix

The first 2 mandatory arguments for array_map_mix are the $callback as well as $param. The $callback is the callback function, and $param is the parameter. The parameter can be either a number, or an array.

When a number is passed in as the parameter, then the code is throwing all the following arguments into array_create function as described above, with the number is sent in as $count. This is an example showing the equivalent array_map function call.

$foo = array_map_mix(
'some_callback',
2,
array('foo', 'bar'),
'baz'
);
// is equivalent to
$foo = array_map(
'some_callback',
array('foo', 'bar'),
array_fill(0, 2, 'baz')
);

What if the number passed in does not equal to the count of array elements?

$foo = array_map_mix(
'some_callback',
2,
array('foo', 'bar', 'baz')
);
// is equivalent to
$foo = array_map(
'some_callback',
array_fill(0, 2, array('foo', 'bar', 'baz'))
);

What if I have 2 array, $foo and $bar, even both has the same amount of array elements, but I want the callback to receive $bar as a whole, instead of just an element?

// given
count($foo) == count($bar);
// wants this
$foo = array_map(
'some_callback',
$foo,
array_fill(0, count($foo), $bar)
);
// equivalent array_map_mix call
$foo = array_map_mix(
'some_callback',
count($foo),
$foo,
array($bar)
);

Hopefully this explains why array_create is coded like above. As mentioned above, $param can be an array as well. This is helpful when the count of array to be passed to array_map is dynamic and a fixed number is not always available.

// suppose function foo() returns an array of variable size
$foo = array_map_mix(
'some_callback',
foo(),
'baz'
);
// the equivalent code
$bar = foo();
$foo = array_map(
'some_callback',
$bar,
array_fill(0, count($bar), 'baz')
);

Nevertheless, array_map_mix can also be used as a direct array_map alternative, although this is not advisible as the function call should take much longer time to complete because of the call_user_func_array call within array_map_mix.

array_map('some_callback', array('foo', 'bar')) == array_map_mix('some_callback', array('foo', 'bar'));

The total number of arguments required is 2 when $param is an array (means using array_map_mix as array_map) and 3 when $param is a non-array. An exception will be thrown if expected argument is missing. Also, if anything but an array or a number is passed into array_map_mix as $param, then another exception is thrown.

Hopefully these two short code snippet helps for people who uses array_map as much as I do.


]]> http://cslai.coolsilon.com/2010/01/28/mixing-non-array-and-array-in-array_map/feed/ 0 http://cslai.coolsilon.com/2010/01/28/mixing-non-array-and-array-in-array_map/ Selecting Node with XPath http://feedproxy.google.com/~r/cslai/~3/4Mdt5PcuufI/ http://cslai.coolsilon.com/2009/10/27/selecting-node-with-xpath/#comments Tue, 27 Oct 2009 14:19:50 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=133 To do node selection for DOM operations, one typically uses CSS selectors as (probably) popularized by jQuery. However, there is another alternative that is as powerful if not better known as XPath. XPath may be able to do a lot more than just selecting node (which I have no time to find out for now) but I will just focus on how to do node selection in this blog post.

The main source of inspiration of this post is from John Resig’s blog post comparing CSS selectors to XPath selectors. Recently I am involved in a project where I need to scrap information from a bunch of badly marked up HTML files. Although I am advised to use regular expression to scrap information out from the file, but I decided to give XPath a try.

The initial version was coded with PHP but it wouldn’t work efficiently, as the files are not correctly marked up (and also not marked up semantically) and I had to fix it by throwing the markup to Tidy before processing it. Then the markup is passed to the DOM library classes for data extraction. To sum up on the performance, it was terribly slow (mainly caused by the Tidy process).

Then I headed to stackoverflow to look for alternatives. As recommended, I use lxml and beautiful soup together to scrap information out from the source HTML file (details to be discussed in the other post).

Back to the topic, supposedly a HTML file is given that is marked up as follows:


<html>
<head>
<title>Foo</title>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<th><h1>Main Content</h1></th>
</tr>
<tr>
<td><span>I am a terribly marked up HTML file</span></td>
</tr>
<tr>
<td><span id="horrible_text">Just too horrible</span></td>
</tr>
</table>
</td>
<td>
<table class="sidebar">
<tr>
<th colspan="2"><font>Fancy Sidebar</font></th>
</tr>
<tr>
<td><font>Fizz</font></td>
<td><a href="another_broken_link.html">Fancy menu 1</a></td>
</tr>
<tr>
<td><font>Buzz</font></td>
<td><a href="i_am_also_broken.html">Fancy menu 2</a></td>
</tr>
<tr>
<td><font>Bar</font></td>
<td><a href="some_fancy_broken_link.html">Fancy menu 3</a></td>
</tr>
</table>
</td>
</tr>
</table>
<div id="footer">
<p>Some meaningless copyright text</p>
</div>
</body>
</html>

As seen in the above HTML, it is not as badly marked up but it basically shows what kind of HTML files I am dealing with (except there is no single element ID defined). To quickly get started in working with XPath, I went to w3schools to dig the tutorials as I am working with the file.

Starting from the simplest and most obvious case, which is looking for the copyright text node.

//*[@id='footer']/p

In CSS, one would probably get this done via

#footer > p

However, as I am doing this to get text information, hence in order to get the text content, I would need to do

//*[@id='footer']/p/text()

To summarize what those symbols mean, let me translate the last XPath selector into a layman friendly statement — select any node (empty tag followed by a wild card, //*) that has ([...]) an attribute named id (@id) which is valued ‘footer’ (@id='footer'), from there, select a paragraph node (/p) and extract the text contained within the node (/text()).

Now that you get some idea, we shall proceed do a slightly more complicated selector. Suppose I want to extract content from the third row in the main content table, I would need to do this (as I’m new in this, this may not be the most efficient way of selecting)

//tr[*/descendant-or-self::*[contains(text(), 'Main') and contains(text(), 'Content')]]
/following-sibling::tr[2]
/td
/descendant-or-self::text()

Well, from the markup above, there is no id, no class and basically there is nothing to uniquely identify the node that I want. (I don’t know how to select the node using CSS, so assume there is none for now) Therefore, in order to select the text that I want, I select the any tr node from the document (//tr) that contains ([...]) any node (*/descendant-or-self::*) which in turns contains (the nested [...]) text ‘Main’ and ‘Content’ (contains(text(), 'Main') and contains(text(), 'Content')). From there, find the second sibling after the selected tr(s) (/following-sibling::tr[2]) and get the descendant which is the table data node (/td). Then regardless what node is wrapping the text content, just return any text-content found within the selected table data node (/descendant-or-self::text()).

You may be curious why I don’t just test contains(text(), 'Main Content') but to split them into two different tests. This is due to the fact that in HTML, although browsers treat all whitespace and newline characters as a space, but they do make a difference in the markup. So if it happens that my table header node is marked up as follows

<th><h1>Main
Content</h1></th>

Although it is displayed identically within the browser, but if my selector tests using contains(text(), 'Main Content') it will fail as the correct way of doing it should be inserting a newline character instead of a space, maybe something like contains(text(), "Main\nContent"). There is a weakness in my approach though as the order is ignored in my test. So if there is a table within the document as follows

<table>
<tr>
<th><h1>Content not in the Main</h1></th>
</tr>
<tr>
<td><span>I am a terribly marked up HTML file</span></td>
</tr>
<tr>
<td><span id="horrible_text">Not supposed to be selected</span></td>
</tr>
</table>

Then the text ‘Not supposed to be selected’ will also be selected.

Last example of the day, suppose I want to select all the second column of table data nodes within ‘Fancy Sidebar’ if the first column has text content either ‘Fizz’ or ‘Buzz’

//td[*/descendant-or-self::*[contains(text(), 'Fizz') or contains(text(), 'Buzz')]]
/following-sibling::td[position() = 1]

The selector basically says select any table data node (//td) that contains ([..]) regardless node type (*/descendant-or-self::*) as long as it contains ([...]) text either ‘Fizz’ or ‘Buzz’ (contains(text(), 'Fizz') or contains(text(), 'Buzz')). From there select its sibling table data nodes (/following-sibling::td) and pick the first among them ([position() = 1]).

If you are observant enough, you should find out that the selector may actually be simplified as follows

//td[*/descendant-or-self::*[contains(text(), 'Fizz') or contains(text(), 'Buzz')]]
/following-sibling::td

The previous selector was used because I wanted to show the position() function XD.

Lastly, if firebug is used, then FireXPath is a great addition to the firebug that allows web developer to test XPath selectors.


]]> http://cslai.coolsilon.com/2009/10/27/selecting-node-with-xpath/feed/ 1 http://cslai.coolsilon.com/2009/10/27/selecting-node-with-xpath/ Hello World from Zend MVC http://feedproxy.google.com/~r/cslai/~3/XWtwYS9RIhw/ http://cslai.coolsilon.com/2009/09/08/hello-world-from-zend-mvc/#comments Tue, 08 Sep 2009 14:00:22 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=125 This post continued from this post. Finally I have found some time to start developing my pet project using Zend Framework. After getting the controller to work the way I am more familiar (comparing to Kohana which I used at work) with, the next step is to get it to output some data.

Base Action Controller

When I used other frameworks like Kohana or CodeIgniter, without extra modules installed, I would have to define view scripts specifically. However, in Zend_Controller, a view is likely to be defined properly and is waiting for data to be populated in. However, I still don’t get any output after a few attempts so I went to compare my dispatch method in the derived action controller with Zend_Controller_Action. The following code shows the updated dispatch method:


public function dispatch($actionName) {
$this->_helper->notifyPreDispatch();
$this->preDispatch();
$parameters = array();
foreach($this->_parametersMeta($actionName) as $paramMeta) {
$parameters = array_merge(
$parameters,
$this->_parameter($paramMeta, $this->_getAllParams())
);
}
call_user_func_array(array(&$this, $actionName), $parameters);
$this->postDispatch();
$this->_helper->notifyPostDispatch();
}

Apparently there are some ‘hooks’ that needs to be called throughout the dispatching process. Besides that, I want my view scripts to be loaded from another folder instead of the default ones, so I added a init method in the base action controller, as follows:


public function init() {
$this->view->addScriptPath(sprintf('%s/View', APP_PATH));
}

The script path should be defined during bootstrap phase, and I will post up a better solution once I find the exact place to configure it. Now that we have our base action controller fixed, let’s move to the actual action controller.

Action Controller

I am not sure whether action stack is HMVC, however, I like the way it works (although it is evil). I will probably stick to action stack for the time being while finding out how partial view can help in widgetizing my page. Besides having a view defined automatically, to put them into a layout I made a call in my bootstrap script, as follows:


Zend_Layout::startMvc(array(
'layoutPath' => APP_PATH . '/View/_layout'
));

Then I did the action stack thingy as follows:


class Controller_Index
extends Coolsilon_Controller_Base {
public function index() {
$this->_helper->actionStack('menu', 'index');
}
public function menu() {
$this->_helper->viewRenderer->setResponseSegment('menu');
}
}

Then, in my View/_layout/layout.phtml,


< ?php echo $this->layout()->menu; ?>
< ?php echo $this->layout()->content; ?>

View/index/index.phtml

This is the main content.

View/index/menu.phtml

This is the menu.

Then by visiting the project site, then I get the following output


This is the menu.
This is the main content.

Phew, I can’t believe I spent so much time on this easy stuff, XD. Now I am one step closer in writting the actual website, now what kind of website should I make?


]]> http://cslai.coolsilon.com/2009/09/08/hello-world-from-zend-mvc/feed/ 0 http://cslai.coolsilon.com/2009/09/08/hello-world-from-zend-mvc/ My Collection of Common Javascript Functions – Part 1 http://feedproxy.google.com/~r/cslai/~3/aSEwtjUQvBo/ http://cslai.coolsilon.com/2009/06/04/my-collection-of-common-javascript-functions-part-1/#comments Thu, 04 Jun 2009 13:19:14 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=121 After coded enough Javascript few months back, I found that there are a couple of functions that I kept re-using in different projects. Therefore I took some time to refactor them and re-arrange them into a single file. The common code that I keep reusing even today consists of functions that does prototypical inheritance, scope maintenance, some jquery stuff, google maps api stuff and some general ajax application related code.

PrototypicalPrototypal Inheritance

Basically after reading through some articles across the internet, especially this article, then I have this piece of code in my collection.

if(typeof Object.create !== 'function') {
    Object.create = function(_o) {
        var F = function () {}
        F.prototype = _o;
        return new F();
    };
}

It is basically the same piece of code because I find it cleaner and more efficient than my initial draft.

Namespacing

Everyone agrees that global variables are evil, therefore I group all my common functions and classes into one single object, as follows,

var cs = Object.create(new function() {
    // some other code
}

And I find the way YUI manages the modules good enough for me, then I emulated YAHOO.namespace function by having this in my object.

    this.namespace = function(_namespace) {
        if(!this[_namespace]) {
            this[_namespace] = Object.create(new function() {});
        }

        return this[_namespace];
    }

The code may not be clever/clean, but as long as it does the job I have no complaint.

Preserving State

I didn’t quite like the delegate function as I can’t pass in extra arguments, therefore I have this after some refactoring

    var __delegate = function(_method, _scope) {
        var _arguments = arguments;
        return function() {
            return _method.apply(
                _scope, compile_arguments.call(
                    this, _arguments, [], 2
            ));
        }
    };

    var compile_arguments = function(_arguments, _result, _start) {
        for(var i = _start; _arguments.length > _start && i < _arguments.length; i++) {
            _result.push(_arguments[i]);
        }

        return _result;
    };

    this.delegate = __delegate;

Emulate Functional Programming

I have recently decided to learn a little bit on functional programming recently but I haven’t decide which language I am picking. I have some experience in SWI-Prolog but prolog is just a declarative functional programming and does not seem to offer closure, higher order functions and currying. Anyway, back to the topic, after spending some time in this book, I modified some code in the book and result in…

    this.functional = Object.create(new function() {
        this.map = function(_function, _arguments) {
            var result = [];

            for(var i = 0; i < _arguments.length; i++) {
                result.push(_function(_arguments[i]));
            }

            return result;
        };

        this.reduce = function(_combine, _base, _arguments) {
            return _arguments.length > 0 ?
                this.reduce(
                    _combine, _combine(_base, _arguments.shift()),
                    _arguments
                ) : _base;
        };
    });

I am not sure if I can do the similar recursion in cs.functional.map compared to cs.functional.reduce because I am rather weak in recursion.

That’s all for now, and in the second part of this article I will post some helper functions for use with some third party libraries like jQuery and Google Maps API.

EDIT 15/8/2009 There are some changes to this set of functions, will post an update soon and there will probably no part 2 any time soon.


]]> http://cslai.coolsilon.com/2009/06/04/my-collection-of-common-javascript-functions-part-1/feed/ 0 http://cslai.coolsilon.com/2009/06/04/my-collection-of-common-javascript-functions-part-1/ Maintaining State with jQuery Event http://feedproxy.google.com/~r/cslai/~3/xHWTyH7yu4w/ http://cslai.coolsilon.com/2009/05/04/maintaining-state-with-jquery-event/#comments Mon, 04 May 2009 13:17:24 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=118 Maintaining state in Javascript is not too difficult once you catch the idea. However, as I am not a super brilliant programmer, it takes me some time to find a way to maintain state as YUI Event does in jQuery.

I like grouping relevant functions into a class as it makes code easier to manage (for me, as there may be better ways. As I just recently found out how prototyping inheritance works, it is possible that the discovery may change the way I code in future), therefore the scope of event handler functions is very important. Making the scope (value/reference of this) to the DOM element listened to the event does not help in accessing the shared data so I needed a way to change that behavior.

To solve the problem, a small derivation of the previously discussed delegate function will come in useful.


/**
 * Simulating YUI Event with jQuery
 */
(function($) {
EventHandler = function(_method, _scope) {
    var _argument = {};

    if(arguments.length > 2) {
        _argument = arguments[2];
    }

    // jquery default event callback format
    return function(_event) {
        // this = DOM element
        return _method.call(_scope, _event, this, _argument);
    };
};
})(jQuery);

var Foo = function() {

    var bar_handler = function(_event, _element) {
        alert('bar');
    }

    var foo_handler = function(_event, _element, _extra_argument) {
        alert(_extra_argument);
    }

    (function() {
        $('#foo').click(EventHandler(foo_handler, this, 'foo'));
        $('#bar').click(EventHandler(bar_handler, this));
    }).call(this);
};
var foo = new Foo();

That basically wraps up what I found these couple of days, if I manage to dig some time, the next post should be focused on prototypical inheritance.


]]> http://cslai.coolsilon.com/2009/05/04/maintaining-state-with-jquery-event/feed/ 0 http://cslai.coolsilon.com/2009/05/04/maintaining-state-with-jquery-event/ Proof of Concept: YQuery http://feedproxy.google.com/~r/cslai/~3/qdPQilopJCQ/ http://cslai.coolsilon.com/2009/05/04/proof-of-concept-yquery/#comments Mon, 04 May 2009 13:01:24 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=114 After the last post, I found that it may be fun to write a wrapper for YUI in order to make it behave like jQuery. Therefore, the code below is clearly mainly for self-amusement and is not intended to be used in production projects. However, through coding this, I found that although the difference in design, but YUI is obviously capable to do what jQuery offers (if not more). I will not continue working on this so whoever interested may just copy and paste the code to further developing it. 

/**
 * Proof of concept : jQuery-like syntax in YUI
 */
(function() {

var yui_builder = (function(Selector, Element, DOM, Event) {
    return function(_selector) {
        var Result = function() {};

        var init = function(_selector) {
            var result = [];

            if(typeof _selector == 'object') {
                result = [ new Element(_selector) ];
            } else {
                result = query_elements.call(this, _selector);
            }

            return result;
        };

        var delegate = function(_scope, _function) {
            return function() {
                return _function.apply(_scope, arguments);
            };
        };

        var query_elements = function(_selector) {
            var result = new Result;
            var elements = wrap_elements(Selector.query(_selector));

            for(var i in elements) {
                result[i] = elements[i];
            }

            return result;
        };

        var unwrap_elements = function(_elements) {
            var result = [];

            for(var i in _elements) {
                result[i] = _elements[i].get('element');
            }

            return result;
        };

        var wrap_elements = function(_elements) {
            var result = [];

            for(var i in _elements) {
                result[i] = new Element(_elements[i]);
            }

            return result;
        };

        return (function(_elements) {
            _this = new Result;

            _this.addClass = function(_class) {
                for(var i in _elements) {
                    _elements[i].addClass(_class);
                }

                return this;
            };

            _this.append = function(_content) {
                if(typeof _content == 'string') {
                    for(var i in _elements) {
                        _elements[i].set(
                            'innerHTML',
                            _elements[i].get('innerHTML') + _content
                        );
                    }
                } else if(typeof _content == 'object') {
                    _elements[0].appendChild(_content);
                }

                return this;
            };

            _this.appendTo = function(_selector) {
                var _parent = yui_builder(_selector);

                for(var i in _elements) {
                    _elements[i].appendTo(_parent.get(0));
                }

                return this;
            }

            _this.attr = function() {
                var result = this;

                if(arguments.length == 1 && typeof arguments[0] == 'string') {
                    result = _elements[0].get(arguments[0]);

                    if(!result) {
                        result = undefined;
                    }
                } else if(arguments.length == 1 && typeof arguments[0] == 'object') {
                    for(var i in _elements) {
                        for(var attribute in arguments[0]) {
                            _elements[i].set(attribute, arguments[0][attribute]);
                        }
                    }
                } else if(typeof arguments[1] == 'function') {
                    for(var i in _elements) {
                        _elements[i].set(arguments[0], arguments[1].call(_elements[i].get('element'), i));
                    }
                } else {
                    for(var i in _elements) {
                        _elements[i].set(arguments[0], arguments[1]);
                    }
                }

                return result;
            };

            _this.each = function(_callback) {
                for(var i in _elements) {
                    _callback.call(_elements[i].get('element'), i, _elements[i].get('element'));
                }

                return this;
            };

            _this.eq = function(_index) {
                return yui_builder(_elements[_index]);
            };

            _this.get = function() {
                var result = [];

                if(arguments.length == 0) {
                    result = unwrap_elements.call(this, _elements);
                } else {
                    result = _elements[arguments[0]].get('element');
                }

                return result;
            };

            _this.hasClass = function(_class) {
                var result = false;

                for(var i in _elements) {
                    if(_elements[i].hasClass(_class)) {
                        result = true;
                        break;
                    }
                }

                return result;
            };

            _this.html = function() {
                var result = this;

                if(arguments.length == 0) {
                    result = _elements[0].get('innerHTML');
                } else {
                    _elements[0].set('innerHTML', arguments[0]);
                }

                return result;
            }

            _this.index = function(_subject) {
                var result = -1;

                for(var i in _elements) {
                    if(_elements[i].get('element') === _subject) {
                        result = i;
                    }
                }

                return result;
            };

            _this.removeClass = function(_class) {
                for(var i in _elements) {
                    _elements[i].removeClass(_class);
                }

                return this;
            }

            _this.size = function() {
                return _elements.length;
            };

            _this.toggleClass = function() {
                if(arguments.length == 0) {
                    for(var i in _elements) {
                        if(_elements[i].hasClass) {
                            _elements[i].removeClass(arguments[0]);
                        } else {
                            _elements[i].addClass(arguments[0]);
                        }
                    }
                } else {
                    for(var i in _elements) {
                        if(arguments[1]) {
                            _elements[i].addClass(arguments[0]);
                        } else {
                            _elements[i].removeClass(arguments[0]);
                        }
                    }
                }

                return this;
            };

            _this.val = function() {
                var result = this;

                if(arguments.length == 0) {
                    result = this.attr('value');
                } else {
                    for(var i in _elements) {
                        this.attr('value', arguments[0]);
                    }
                }

                return result;
            };

            (function() {
                for(var i in _elements) {
                    _this[i] = _elements[i];
                }
            }).call(_this)

            return _this;
        }).call(this, init.apply(this, arguments));
    }
})(YAHOO.util.Selector, YAHOO.util.Element, YAHOO.util.Dom, YAHOO.util.Event);

})();

Most of the implemented functions are similar to what jQuery offers, therefore to use the yui_builder:


(function($) {
    // everyone loves $ function
    $(document.createElement('a'));
        .attr('href', 'test')
        .html('test')
        .appendTo(document.body);
})(yui_builder);


]]> http://cslai.coolsilon.com/2009/05/04/proof-of-concept-yquery/feed/ 0 http://cslai.coolsilon.com/2009/05/04/proof-of-concept-yquery/ Maintaining State with YUI Event http://feedproxy.google.com/~r/cslai/~3/FuintnMfLBA/ http://cslai.coolsilon.com/2009/04/11/maintaining-state-with-yui-event/#comments Sat, 11 Apr 2009 04:39:30 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=107 When one start writting Javascript in patterns like the module pattern, then sooner or later he would want to maintain the state when an event handler is called. The reason I am still using YUI to handle my event handling code is because I like how state can be maintained.

There are some other interesting things in the Event utility like YAHOO.util.Event.onDOMReady, YAHOO.util.Event.onContentReady as well as YAHOO.util.Event.onAvailable methods. Most of the time, the developer may want certain code to start running as soon as the DOM tree is loaded completely without having to wait for all the elements (image, flash etc.) to finish loading. Then YAHOO.util.Event.onDOMReady may come in handy. For example

YAHOO.util.Event.onDOMReady(function() {
alert('Good day!');
});

After loading the DOM tree, then the browser will prompt ‘Good day!’ to the user.

Back to the topic, if the developer wishes to listen to some event and perform action as soon as the event is fired, then he may register the event as follows.

YAHOO.util.Event.on(some_element, 'change', some_callback_function, extra_parameter);

Everything looks fine, but when the developer has structure his code into patterns like the module patttern as follows:


(function(Event) {
 
var Some_Module = function() {
return {
foo: 'bar',
execute: function() {
alert(this.foo);
},
 
listen: function() {
Event.on(element, 'change', this.execute, null, this);
}
};
}();
 
})(YAHOO.util.Event);

Notice in the forth and fifth arguments passed into the YAHOO.util.Event.on function, I am passing in no extra parameters and the fifth argument defines the scope of this keyword in the Some_Module.execute method.

If the developer uses YAHOO.util.Element to wrap certain elements, then he can also use another way to listen to the event

var element = YAHOO.util.Element('div');
element.on(some_event, some_callback_function, some_extra_parameter, some_scope);

Speaking of YUI Element, I just recently found a way to ‘emulate’ jQuery’s $() function with YUI components.


(function($) {
$(document.body); // returns the body element wrapped in YAHOO.util.Element class
})(function(_selector) {
var result = YAHOO.util.Selector.query(_selector);
 
if(result.length > 0) {
if(result.length == 1) {
result = new YAHOO.util.Element(result[0]);
} else {
for(i in result) {
result[i] = new YAHOO.util.Element(result[i]);
}
}
} else {
result = false;
}
 
return result;
});

Although not as powerful as jQuery’s $() function, but It can be useful in many situations where YUI is the only choice.


]]> http://cslai.coolsilon.com/2009/04/11/maintaining-state-with-yui-event/feed/ 3 http://cslai.coolsilon.com/2009/04/11/maintaining-state-with-yui-event/ Random Javascript Notes http://feedproxy.google.com/~r/cslai/~3/0eGb8XZWV_Y/ http://cslai.coolsilon.com/2009/04/11/random-javascript-notes/#comments Fri, 10 Apr 2009 17:24:24 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=100 I am starting to like programming in Javascript, especially after understanding more about how Javascript handles scopes. Surprisingly this take me like a year to figure out how scope is managed. The result of the findings is that I start doing a lot of experiments and discovered more interesting stuff through them.

It took me quite some time to accept the fact that each function is an object, therefore it is completely normal to write code that looks like


var some_function = function() {
this.public_var = 'hello world';
 
this.public_method = function() {
// do something
}
}
 
var foo = new some_function();
alert(foo.public_var); // alerts 'hello world'
this.public_method(); // the 'do something' method

Besides, in Javascript, you are allowed to use this magical syntax to automatically call a function after defining it.


// without arguments
(function() {
alert('hello world');
})();
 
// with arguments
(function($) {
$('some parameters'); // where $ = Some_Library_Function as passed below
})(Some_Library_Function);

Because of the fact that a function is an object, you can do some wonderful stuff like this:


(function() {
alert('hello world');
}).call(this); // hello world will be called

As I come from a more C-Like language background (hey, my first language was VC 6.0, what would you expect), I always wanted to find something equivalent in Javascript to define a class. Yes, Javascript is not a OO language in the sense that one can define a class like how it is done in PHP/Java or whatever C-like language. But I can do something like follows:


// it is always a good idea to surround code in a small block like this
(function() {
 
var Some_Class = function() {
var private_property;
 
this.public_property;
 
var private_method = function() {
// do something
}
 
this.public_method = function() {
// do something
}
 
// a cheat to emulate a constructor
(function() {
private_property = 'hello world';
private_method.call(this);
 
this.public_property = 'good day!';
this.public_method();
}).call(this);
}
 
})();

Yes, I am cheating all the way to make my ‘class’ to have a constructor. I can remove the block (function() { /* ... */ }).call(this); and everything should still work but I find it looking better if I put the initialization code inside the block.

You may notice I use a lot of obj.call() methods in the snippets above. I just found this as well as obj.apply() call can actually modify the scope of the this keyword. Back to the snippet above, I cannot refer to the property named public property in the private method as follows (without calling the private method using call/apply function):


var private_method = function() {
alert(this.public_property);
}
// somewhere in the code
private_method(); // this will throw exception as this.public_property is not recognized
private_method.call(this); // by prividing a scope, then the value of public_property will be displayed

For further readings, I would recommend a blog post by K.Scott Allen that discusses the Function.apply and Function.call methods.

Now, after finding a way to change the scope, one may be interested in finding a way to create a closure and has the state maintained. Hence, by collecting the things that I learned in these few months, I am having something as follows:


(function(Delegate) {
 
var some_callback = function() {
alert(private_string);
}
var Some_Class = function() {
var private_string = 'hello world';
 
(function() {
some_callback = Delegate(some_callback, this);
 
some_callback(); // should alert 'hello world'
}).call(this);
}
 
})(function(_method, _scope) {
return function() {
_method.apply(_scope, arguments);
}
});

Isn’t this magic? Of course, there are more interesting stuff left for me to find out like inheritance (I am starting to like composition instead of inheritance so this is not a major problem), possibility to define interface in javascript etc. Hopefully this post helps people to quickly get started in Javascript programming.

For further readings, I would suggest the follow up articles of the above linked posts by K. Scott Allen on the Delegate, as well as closure. I hope I can find some time posting an article on closure once I figure out how to describe the concept without confusing myself and everybody.


]]> http://cslai.coolsilon.com/2009/04/11/random-javascript-notes/feed/ 3 http://cslai.coolsilon.com/2009/04/11/random-javascript-notes/ Extending Zend Framework http://feedproxy.google.com/~r/cslai/~3/AzNmJA4BeT4/ http://cslai.coolsilon.com/2009/03/28/extending-zend-framework/#comments Sat, 28 Mar 2009 14:31:18 +0000 Jeffrey04 http://cslai.coolsilon.com/?p=91 I like how Kohana 3 organizes the classes, and I thought the same thing may be applied to my Zend Framework experimental project. Basically what this means is that I can name the controller class according to PEAR naming convention, and deduce the location of the file by just parsing the class name.

Suppose the file structure of my experimental project as follows

  • private_files

    • Model
    • View
    • Controller

      • Index.php
    • Libraries
  • public_html

I am expecting if I need to load a controller named Controller_Index, then it should be able to find the controller class file in private_files/Controller/Index.php. To do so, as hinted by Tim Lytie at stackoverflow, I wrote a dispatcher class that subclassed from Zend_Dispatcher_Standard as follows


class Coolsilon_Controller_Dispatcher
extends Zend_Controller_Dispatcher_Standard {
public function __construct() {
parent::__construct();
}
 
public function formatControllerName($unformatted) {
return sprintf(
'Controller_%s', ucfirst($this->_formatName($unformatted))
);
}
 
public function formatActionName($unformatted) {
$formatted = $this->_formatName($unformatted, true);
return strtolower(substr($formatted, 0, 1)) . substr($formatted, 1);
}
}

Then, in order to make the parameters passed in as method parameters, after reading through the code as posted here, I refactored it to (I <3 short methods).


abstract class Coolsilon_Controller_Base
extends Zend_Controller_Action {
 
public function dispatch($actionName) {
$parameters = array();
 
foreach($this->_parametersMeta($actionName) as $paramMeta) {
$parameters = array_merge(
$parameters,
$this->_parameter($paramMeta, $this->_getAllParams())
);
}
 
call_user_func_array(array(&$this, $actionName), $parameters);
}
 
private function _actionReference($className, $actionName) {
return new ReflectionMethod(
$className, $actionName
);
}
 
private function _classReference() {
return new ReflectionObject($this);
}
 
private function _constructParameter($paramMeta, $parameters) {
return array_key_exists($paramMeta->getName(), $parameters) ?
array($paramMeta->getName() => $parameters[$paramMeta->getName()]) :
array($paramMeta->getName() => $paramMeta->getDefaultValue());
}
 
private function _parameter($paramMeta, $parameters) {
return $this->_parameterIsValid($paramMeta, $parameters) ?
$this->_constructParameter($paramMeta, $parameters) :
$this->_throwParameterNotFoundException($paramMeta, $parameters);
}
 
private function _parameterIsValid($paramMeta, $parameters) {
return $paramMeta->isOptional() === FALSE
&& empty($parameters[$paramMeta->getName()]) === FALSE;
}
 
private function _parametersMeta($actionName) {
return $this->_actionReference(
$this->_classReference()->getName(),
$actionName
)
->getParameters();
}
 
private function _throwParameterNotFoundException($paramMeta, $parameters) {
throw new Exception("Parameter: {$paramMeta->getName()} Cannot be empty");
}
}

It may affect the performance but the code is much easier to read as I am the only one who is wokring on the project.


]]> http://cslai.coolsilon.com/2009/03/28/extending-zend-framework/feed/ 1 http://cslai.coolsilon.com/2009/03/28/extending-zend-framework/