Meebo App in Google Chrome

For those how have enabled apps in Google chrome who loves Meebo, i got this link (dont deploy in google folder coz this doesnt have any keys)

http://rapidshare.com/files/405843605/meebo_app.zip

To enable it
http://www.downloadsquad.com/2010/07/03/how-to-play-with-google-chrome-web-apps-right-now/

Starting MySQL with XAMPP on Mac

Had a problem with XAMPP on mac especially on MySQL, where it tells you to check the log files on the errors? I had the same problem and the way if fix it is through the terminal typing this command

/Applications/XAMPP/xamppfiles/share/mysql/mysql.server start

To stop it
/Applications/XAMPP/xamppfiles/share/mysql/mysql.server stop

Transaction on CakePHP when using Oracle

Following my post on http://monmonja.com/blog/2008/07/transaction-on-cakephp-12/ where i use CakePHP and MySQL to do transaction, now i'm using oracle and $this->Model->begin() is not working and the fix for that is

$this->Model->begin();
$returnQuery = $this->Model->getDataSource()->query($query);
if($returnQuery !== false){
$this->Model->getDataSource()->commit();
}else{
$this->Model->getDataSource()->rollback();
}

Hope this helps

Closure - goog.ui.ColorPicker example

Been playing around Google's Closure library and i have to say the API looks good with ofcourse some exception like i dont know how to render a component, sometime you call render, decorate or the constructor itself. And when i was browsing through the code i was curious with ColorPicker and to my dismay there was no example, having searching on the web here is how to do it

Include
goog.require('goog.dom');
goog.require('goog.ui.ColorPicker');


<style>
<!-- http://gitorious.org/element/element/commit/6f9a6373727ff6478f6e78ec4917289b6523b5ad -->
.goog-palette-cell{height:20px;width:20px;margin:0;border:0;text-align:center;vertical-align:middle;border-right:1px solid #666;font-size:1px}
.goog-palette-colorswatch{position:relative;height:20px;width:20px;border:1px solid #666}
</style>

var cp = new goog.ui.ColorPicker();
cp.setSize(7);
cp.setColors(goog.ui.ColorPicker.SIMPLE_GRID_COLORS);
cp.addEventListener(goog.ui.ColorPicker.EventType.CHANGE,function(e){
alert(e.target.getSelectedColor())
});
cp.render(document.getElementById('s1'));

Explanation
Create a new instance of ColorPicker
var cp = new goog.ui.ColorPicker();

Set the size of the pallate (i think its the column count)
cp.setSize(7);

Set colors, we use the sample colors, see Source for example change it to your color array (last few lines of the source)
cp.setColors(goog.ui.ColorPicker.SIMPLE_GRID_COLORS);

Add a click event
cp.addEventListener(goog.ui.ColorPicker.EventType.CHANGE,function(e){ .. });

Render this element to a DOM with id of s1 (<div id='s1 ></div>)
cp.render(document.getElementById('s1'));

Demo Site
http://monmonja.com/closure/ColorPicker.html

show and hide functions in closure

I'm a huge fan of jQuery and while closure is new, its pretty interesting, there are things that are easier to do in jQuery like showing or hiding DOM or DOM manipulations. $ in jQuery is goog.dom.query in closure (they used dojo, i hope they just used sizzle instead). So in order to do something like $("img .oldImages").hide() you have to include third party deps.js
<script src="third_party/closure/goog/deps.js"></script>

We need to import the following:
goog.require('goog.fx');
goog.require('goog.fx.dom');
goog.require('goog.dom.query');
goog.require('goog.fx.AnimationQueue');

function hide(dom){
var anims = new goog.fx.AnimationParallelQueue();
var items = goog.dom.query(dom);
goog.array.forEach(items,function(item){
var anim = new goog.fx.dom.FadeOutAndHide(item, 1000);
anims.add(anim);
});
anims.play();
}

function show(dom){
var anims = new goog.fx.AnimationParallelQueue();
var items = goog.dom.query(dom);
goog.array.forEach(items,function(item){
var anim = new goog.fx.dom.FadeInAndShow(item, 1000);
anims.add(anim);
});
anims.play();
}

Explanation
Use the animation queue (use the one that execute in parallel)
var anims = new goog.fx.AnimationParallelQueue();

Query for our css selector query
var items = goog.dom.query(dom);

Loop through the items create either fadeIn or fadeOut animation on each item, then add that animation to the animation queue.
goog.array.forEach(items,function(item){ ....
anims.add(anim);
});

Play our animation queue
anims.play();

Demo
http://monmonja.com/closure/showHide.html