CakePHP Helper for rakaz Combine

Combine is still my favorite javascript/css combine and compress script.

I posted a solution how to use it in a CakePHP application and here is a little helper to make it more useful:

<?php
//app/views/helpers/combine.php
class CombineHelper extends AppHelper
{
	public $helpers = array('Html', 'Javascript');
	private $_pattern = '../combine.php?type=:type&files=:files';
	public function js($files)
	{
		echo $this->Javascript->link($this->_format($files));
	}
	public function css($files)
	{
		echo $this->Html->css($this->_format($files, 'css'));
	}
	private function _format($files = array(), $type = 'javascript')
	{
		return String::insert($this->_pattern, array('type' => $type, 'files' => implode(',', $files)));
	}
}

Add it to controller’s helpers property:

<?php
class MyController extends AppController
{
	public $helpers = array('Combine');

And call it by passing an array of file names in your view:

$combine->js(array(
    'javascript1.js',
    'javascript2.js',
    'javascript3.js'
));
$combine->css(array(
    'stylesheet1.css',
    'stylesheet2.css',
    'stylesheet3.css'
));

Don’t forget to add file extensions!

If you want to add only one file, you don’t have to use combine helper. Directives added to .htaccess file let combine script to compress the file(See related post). Just use $javascript->link(‘filename’).

Simplifying Icon Management in Ext JS

New version of Ext JS, 2.2.1, is announced and we are so happy, aren’t we?

Another Ext JS news: Ext Conference 2009. I wish, I could attend. I hope, I am going to be there in the next conference…

In this short tutorial, I am going to show you to simply the icon management in Ext JS. It is not a complete solution. If you want to see a more professional one, see Ext.ux.TDGi.iconMgr from TDG innovations.

When you want to use icons in your Ext JS application you either have to use “icon” config option by giving path to your icon or “iconCls” by defining a new CSS class. The latter one is more prefferable way of doing it but it means that you need to define a CSS class for each of your icons. Let’s create a new function to make it easy!

Ext.ux.Icon = function(icon){
  var path = 'img/icons/';
  if(!Ext.util.CSS.getRule('.icon-'+icon)){
    Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+'.png) !important; }');
  }
  return 'icon-'+icon;
}

Change the value of “path” where your PNG icons are located. Don’t tell me you don’t hear the famous icon collection from famfamfam!

And call it like:

...,
iconCls: Ext.ux.Icon('excel'),
...,

It is going to add a new CSS rule “icon-excel” with background-image “excel.png” and add it to the head of your page.

I can hear you say why you have to use PNG extension? You are right, you don’t have. Just modify Ext.ux.Icon by adding a second argument ,maybe, called as extension and pass the icon’s extension:

Ext.ux.Icon = function(icon, extension){
  var path = 'img/icons/';
  if(!Ext.util.CSS.getRule('.icon-'+icon)){
    Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+'.'+extension+') !important; }');
  }
  return 'icon-'+icon;
}

...,
iconCls: Ext.ux.Icon('excel', 'png'),
...,

or by removing the extension part and passing the name of icon with its extension:

Ext.ux.Icon = function(icon){
  var path = 'img/icons/';
  if(!Ext.util.CSS.getRule('.icon-'+icon)){
    Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+') !important; }');
  }
  return 'icon-'+icon;
}

...,
iconCls: Ext.ux.Icon('excel.png'),
...,

Don’t use Ext.ux.Icon if you are going to use hundreds of CSS rules because each class is defined in its own “style” tag and it can affect browser rendering performance.

It’s not important what you think, it’s important what you do…

Using rakaz Combine With Your CakePHP Application

Combine is a small PHP script and some clever URL rewriting designed to speed up the loading of pages that use many or large css and javascript files.

It is good but how can you integrate it with your CakePHP project? And solution comes with the question .

Download a copy of combine.php and drop it into your “app/webroot” directory (or whatever your application folder name is XXX/webroot/).

Open the file in your text editor and change lines:

$cachedir = dirname(__FILE__) . '/cache';
$cssdir   = dirname(__FILE__) . '/css';
$jsdir    = dirname(__FILE__) . '/javascript';

with

$cachedir = dirname(__FILE__) . '/../tmp/cache';
$cssdir   = dirname(__FILE__) . '/css';
$jsdir    = dirname(__FILE__) . '/js';

Open your “app/webroot/.htaccess” file and add those two lines

RewriteRule ^css/(.*\.css) combine.php?type=css&files=$1
RewriteRule ^js/(.*\.js) combine.php?type=javascript&files=$1

That’s all! Check download times of your css and javascript files with a tool like Firebug. A fatty 527KB ext-all.js javascript framework file compressed to 140KB! Amazing ha?