You can clone a working copy from http://github.com/eabay/directcakephp.

It is not that good but it works!

http://www.extjs.com/forum/showthread.php?t=86501

Related Posts:

• CakePHP Helper for rakaz Combine
• Items Per Page Plugin for ExtJS

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’).

Related Posts:

• Ext.Direct for CakePHP

http://mankz.com/code/globalcheck.htm

An application to see global namespace pollution that the javascript frameworks cause. You can check for conflicts before usings different libraries together.

Related Posts:

• CakePHP Helper for rakaz Combine

Plugin code:

/**
 * ExtJS component to display number of items per page
 *
 * @copyright       2009 Erhan Abay
 * @author          Erhan Abay
 * @version         $Revision$
 * @lastmodified    $Date$
 */
Ext.ux.PerPageField = Ext.extend(Object, {

	beforeText : '',
	afterText : 'items per page',

	constructor : function(config) {
		Ext.apply(this, config);
	},

	init : function(grid) {
		this.grid = grid;

		this.grid.on({
			render : function() {
				this.grid.bottomToolbar.add(['-', '-',
						this.beforeText, this.combo,
						this.afterText]);
			},
			scope : this
		});

		this.combo = new Ext.form.ComboBox({
			store : ['5', '10', '20', '50', '100', '200'],
			mode : 'local',
			triggerAction : 'all',
			width : 50,
			listClass : 'x-combo-list-small',
			maskRe : /^[0-9]$/,
			value : grid.bottomToolbar.pageSize,
			listeners : {
				'collapse' : function(f) {
					this.triggerEvent(f);
				},

				'specialkey' : function(f, e) {
					if (e.getKey() == e.ENTER) {
						this.triggerEvent(f);
					}
				},
				scope : this
			}
		});
	},

	triggerEvent : function(f) {
		var o = {
			start : 0
		};
		var v = parseInt(f.getRawValue());
		this.grid.store.baseParams = this.grid.store.baseParams || {};
		this.grid.store.baseParams['limit'] = v;
		this.grid.bottomToolbar.pageSize = v;
		this.grid.store.reload({
			params : o
		});
	}
});

Ext.preg('perpagefield', Ext.ux.PerPageField);

Usage:

var grid = new Ext.grid.GridPanel({
...
    plugins: [{
        ptype: 'perpagefield',
        beforeText: '',
        afterText: ''
    }],
...
});</pre>

If you wanna use it on your own blog, go to AdBlock Detection Script.

Classic ASP was the last scripting language that I used from the universe of Microsoft. PHP is enough to make me happy and my clients. (Hey!, which client cares about the language of your choice? )

Anyway, I won’t make a comparison of languages. I am not that stupid. I just want to tell you something about how I am impressed with Ext.Direct and the server-side stack for ASP.NET MVC.

DWR is popular enough in Java world. They know a lot the concept of “remoting server-side methods to the client-side”. Ext.Direct has implementations for several other languages and frameworks. Sadly, CakePHP is not in the list of supported frameworks but ASP.NET MVC has one of the powerful one.

You define couple of config values in web.config and that’s all! Just extend your controller from DirectController and use DirectResult typed methods to return your result to the browser. You can use several attributes for classes and methods to hide them in Ext.Direct remoting api object returned to the browser.

By the way, I was curious about ASP.NET. I learned MVC pattern from CakePHP. C# and PHP have similar syntax. Those smooth out my learning curve in ASP.NET MVC. We can discuss pros and cons of ASP.NET etc. but one thing is clear, Visual Studio. I am using Zend Studio and have tried several others but I have never met that quality of IDE before.

Finally, you are right. It is hard to follow. I was talking about ASP, PHP, then Ext.Direct and ASP.NET MVC came to the picture. Let’s say that this post is a sign of life.

I have a lot to share with you, jQuery, Mootools, Zend Framework, Posh, gadget development, new released ExtJS 3.0, Moodle, PHP 5.3 release, and much more…

Related Posts:

• Ext.Direct for CakePHP
• Items Per Page Plugin for ExtJS
• CakePHP Helper for rakaz Combine

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…

Related Posts:

• Items Per Page Plugin for ExtJS
• CakePHP Helper for rakaz Combine
• Ext.Direct for CakePHP

If you are developing a CRUD application and using grids to display data from your database you should define similar column models, fields, readers, stores etc. for your grids. It is not a big concern if it is not the first time you do the same things or you have your own components not to repeat yourself. But what if your database table needs a change in its structure? Let me guess… You change field and column model definitions in your grids and doing the same again and again even there are small changes.

Here is a small Ext JS component that I wrote:

Ext.ux.DynamicGridPanel = Ext.extend(Ext.grid.GridPanel, {

  initComponent: function(){
    /**
     * Default configuration options.
     *
     * You are free to change the values or add/remove options.
     * The important point is to define a data store with JsonReader
     * without configuration and columns with empty array. We are going
     * to setup our reader with the metaData information returned by the server.
     * See http://extjs.com/deploy/dev/docs/?class=Ext.data.JsonReader for more
     * information how to configure your JsonReader with metaData.
     *
     * A data store with remoteSort = true displays strange behaviours such as
     * not to display arrows when you sort the data and inconsistent ASC, DESC option.
     * Any suggestions are welcome
     */
    var config = {
      viewConfig: {forceFit: true},
      enableColLock: false,
      loadMask: true,
      border: false,
      stripeRows: true,
      ds: new Ext.data.Store({
		    url: this.storeUrl,
		    reader: new Ext.data.JsonReader()
		  }),
      columns: []
    };

    Ext.apply(this, config);
    Ext.apply(this.initialConfig, config);

    Ext.ux.DynamicGridPanel.superclass.initComponent.apply(this, arguments);
  },

  onRender: function(ct, position){
    this.colModel.defaultSortable = true;

    Ext.ux.DynamicGridPanel.superclass.onRender.call(this, ct, position);

    /**
     * Grid is not masked for the first data load.
     * We are masking it while store is loading data
     */
    this.el.mask('Loading...');
    this.store.on('load', function(){
      /**
       * Thats the magic! 
       *
       * JSON data returned from server has the column definitions
       */
      if(typeof(this.store.reader.jsonData.columns) === 'object') {
	      var columns = [];

	      /**
	       * Adding RowNumberer or setting selection model as CheckboxSelectionModel
	       * We need to add them before other columns to display first
	       */
	      if(this.rowNumberer) { columns.push(new Ext.grid.RowNumberer()); }
	      if(this.checkboxSelModel) { columns.push(new Ext.grid.CheckboxSelectionModel()); }

        Ext.each(this.store.reader.jsonData.columns, function(column){
          columns.push(column);
        });

	      /**
	       * Setting column model configuration
	       */
	      this.getColumnModel().setConfig(columns);
      }
      /**
       * Unmasking grid
       */
      this.el.unmask();
    }, this);
    /**
     * And finally load the data from server!
     */
    this.store.load();
  }
});

How to use it?

new Ext.ux.DynamicGridPanel({
  id: 'my-grid',
  storeUrl: 'server/url/address/',
  rowNumberer: true,
  checkboxSelModel: true,
  sm: new Ext.grid.CheckboxSelectionModel(),
});

And here is the JSON which should be returned from server to dynamically create column and field definitions:

{
    "metaData": {
        "totalProperty": "total",
        "root": "records",
        "id": "id",
        "fields": [
            {
                "name": "id",
                "type": "int"
            },
            {
                "name": "name",
                "type": "string"
            }
        ]
    },
    "success": true,
    "total": 50,
    "records": [
        {
            "id": "1",
            "name": "AAA"
        },
        {
            "id": "2",
            "name": "BBB"
        }
    ],
    "columns": [
        {
            "header": "#",
            "dataIndex": "id"
        },
        {
            "header": "User",
            "dataIndex": "name"
        }
    ]
}

The code itself is somewhat self-explanatory but for newbie users learning center is a good start to understand how to extend Ext JS or simply understand how the framework works.

Suggestions and comments are welcome…

Related Posts:

• Items Per Page Plugin for ExtJS
• Ext.Direct for CakePHP

script.aculo.us kütüphanesinin efektleri, sürükle-bırak, sıralama, otomatik tamamlama gibi işlerinizi kolaylaştıracak kontrolleri ve DOM öğelerini üretebilen özellikleri barındırdığından bahsetmiştik. Bu ay efekt kullanımına değineceğiz. Geçen ayki yazıya ulaşamayanlar pctech.com.tr adresini ziyaret edebilirler.

Geçen ay da değindiğimiz bir iki şeyin üzerinden yine geçelim. Efekt kullanımından standart söz dizimi

şeklindedir. Her efekt için gerekli parametre olmayabilir. İleride efektlere tek tek değinirken kullanılıp kullanılmadığına da yer vereceğiz. Seçenekler de genel veya sadece efekte bağlı olabilir.

Seçenekler bölümünde tüm efektler için ortak parametreler şu şekildedir:

duration : Efektin saniye cinsinden uygulanma süresi (Varsayılan: 1.0).
fps : Efekti bir film gibi düşünün. İşte bu ayar efektin saniye başına kaç kare olacağını belirler. 25′in üstünü zaten insan gözü algılamaz (Varsayılan: 25. En fazla 100 olabilir.)
transition : Geçişin nasıl olacağınız belirler. Kullanılabilecek değerler: Effect.Transitions.sinoidal (varsayılan), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble ve Effect.Transitions.flicker
from : Geçişin (transition) başlangıç noktasını belirler. 0.0 ve 1.0 arasında bir değer olabilir (Varsayılan: 0.0).
to : Geçişin bitiş noktasını belirler. 0.0 ve 1.0 arasında bir değer olabilir (Varsayılan: 0.0).
sync : Efektin kareleri otomatik olarak gösterip göstermeyeceğini belirler. ‘True’ değeri verildiğinde efektin render() metodu çağırılarak kareler kontrol edilebilir. ‘Paralel’ efektinde kullanılır.
queue : Efektin hangi sırada olacağını belirler. Kullanımına daha sonra değineceğiz.
direction : Geçişin yönünü belirler. ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’ veya ‘center’ (varsayılan) değerlerini alabilir ve sadece ‘Grow’ ve ‘Shrink’ efektlerinde kullanılabilir.

Bunlar dışında seçenekler içerisine parametre olarak kendi fonksiyonlarınızı da dahil edebilirsiniz. Böylece efekt çalıştırılmaya devam ederken belirtilen olaylara bağlı olarak sizin fonksiyonunuz da çalıştırılır. Efekt nesnesi fonksiyonunuza parametre olarak geçirilir. Bu sayede efekt nesnesine de erişerek kendi fonksiyonunuzda kullanabilirsiniz. Kullanabileceğiniz olaylar şunlardır:

beforeStart : Belirtilen fonksiyon efekt gösteriminin döngüsü başlamadan önce çağırılır.
beforeUpdate : Gösterim döngüsünün her bir tekrarında, değişim gerçekleşmeden önce çağırılır.
afterUpdate : Gösterim döngüsünün her bir tekrarında, değişim gerçekleştekten sonra çağırılır.
afterFinish : Efekt gösteriminin döngüsü bittikten sonra çağırılır.

Kuru kuru bunların ne anlama geldiğini kavramada sorun olabilir o yüzden örneklere geçmeden bir kod örneği verelim.

Fonksiyonunuza parametre olarak geçirdiğiniz efekt nesnesinin erişebileceğiniz tüm özellikleri de şu şekilde:

effect.element : Efektin uygulandığı sayfa öğesi.
effect.options : Efekte ait seçenekler.
effect.currentFrame : Gösterilen son karenin numarası.
effect.startOn : Efektin başlatıldığı zamanın milisaniye cinsinden değeri.
effect.finishOn : Efektin bitirildiği zamanın milisaniye cinsinden değeri.
effect.effects[] : ‘Parallel” efektinde her bir alt efektin tutulduğu bir effects[] dizisi bulunur. Her bir alt efekte bu dizi içerisinden erişilebilir.

Efektler
script.aculo.us kütüphanesi 5 esas efekte sahiptir. Bir de bunların üzerine kurulu çeşitli birleşim efektleri vardır. Bu sayımızda temel efektleri ele alacağız.

Effect.Opacity:
Sayfa öğesinin saydamlığını değiştirir.

Genel söz dizimi:

Örnek:

Öğeye tıklandığında 2 saniye içerisinde (duration:2.0) saydamlık %100′den (from:1.0) %0′a (to:0.0) düşecek, yani kaybolacak.

Effect.Scale:
Sayfa öğesinin boyutlarını değiştirir. En ve boy ‘em’ birimine göre değiştirilir.

Genel söz dizimi:

Efekte özel seçenekler:
scaleX : Yatay olarak boyutlandırma (Varsayılan: ‘true’).
scaleY : Dikey olarak boyutlandırma (Varsayılan: ‘true’).
scaleContent : İçeriğin de boyutlandırılması (Varsayılan: ‘true’).
scaleFromCenter : Öğenin merkez koordinatlarının sabitlenmesi (Varsayılan: ‘false’).
scaleMode : Öğenin görülebilen bölgesinin boyutlandırılmasını sağlayan ‘box’ (varsayılan), öğenin tamamının boyutlandırılmasını sağlayan ‘contents’ değerlerini alabilir. ‘originalHeight’ ve ‘originalWidth’ değişkenleri kullanılarak uygulanacak boyutun tam değerleri de verilebilir.
scaleMode : { originalHeight: 400, originalWidth: 200 }
scaleFrom : Boyutlandırmanın başlangıç yüzdesi (Varsayılan: 100.0).

Örnek:

Bağlantıya tıklandığında yazı %120 oranında büyütülecek.

Effect.MoveBy:
Öğe x ve y piksel kadar yer değiştirir.

Genel söz dizimi:

Örnek:

Bağlantıya tıklandığında yazı 5 piksel yukarı, 20 piksel de sağa kayacak. Bu arada ekranın sol üst köşesinin (0,0) noktası olduğunu hatırlatalım.

Effect.Highlight:
Öğenin arka plan rengini değiştirir, vurgu yapar.

Genel söz dizimi:

Efekte özel seçenekler:
startcolor : Efekt başlangıcındaki arka plan rengi (Varsayılan: ‘#ffff99′, açık sarı).
endcolor : Efekt bitişindeki arka plan rengi (Varsayılan: ‘#ffffff’, beyaz).
restorecolor : Efekt bittikten sonraki arka plan rengi (Varsayılan: CSS değerlerindeki ‘background-color’ değeri. ‘rgb(0, 255, 0)’ şeklinde belirtilmiş olmalı).

Örnek:

Öğeye tıklandığında arka plan rengi pembeden griye dönüşecek.

Effect.Parallel:
Birden fazla efektin aynı anda uygulanabilmesini sağlar.

Genel söz dizimi:

Örnek:

‘MoveBy’ ve ‘Opacity’ efektleri aynı öğeye uygulanıyor ve efekt bittiğinde öğe gizleniyor.

Bu yazı Aralık 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Uzun bir zamandır dergimizde sizlere AJAX konusunda çeşitli bilgiler vermeye, örnekler ile kütüphaneleri nasıl kullanabileceğinize dair örnekler vermeye çalışıyoruz. Türkçe olarak internette çok kısıtlı içeriğin yer aldığı bu konuda PC Tech olarak sizlere uzman düzeyinden ziyade başlangıç düzeyi bilgiler vererek en azından işin bir ucundan AJAX bulaşmanızı ve geleceğin web uygulamalarını geliştirenler arasında yer alabilmenizi sağlamak asıl amacımız. Balık tutmayı öğretmek balık vermekten iyidir. Eğer bu yeni akıma dahil olduysanız ve kendi uygulamalarınızı geliştirme süreci içerisindeyseniz size Türkçe bir AJAX grubuna yönlendirelim. ‘Ajax Nedir’ adlı bu gruba http://groups.google.com/group/ajaxnedir adresinden üye olabilirsiniz. Emekleme aşamasındaki bu kullanıcı topluluğunun ilerlemesine katkıda bulunmak isteyenlere duyurulur. İngilizce içerik içinse ajaxian.com’u takip ederek gelişmelerden haberdar olabilirsiniz.

Şimdi gelelim asıl konumuza, script.aculo.us. Yine söylemekten kendimizi alamayacağız ama script.aculo.us prototype çatısı üzerine kurulmuş ve –tabir-i caizse- yanarlı dönerli sayfalar tasarlamak için birçok görsel efekti size sunan bir kütüphane. Kütüphane içerisinde efektler yanında sürükle-bırak, sıralama, otomatik tamamlama gibi işlerinizi kolaylaştıracak kontroller de yer alıyor. Ayrıca DOM elemanlarını (daha açık olmak gerekirse HTML tarzı kodları) üretebilen özelliğini de dinamik olarak sayfa içi güncelleme sırasında kullanabilirsiniz.

Kullanım
http://script.aculo.us adresinden indirebileceğiniz kütüphanenin arşiv dosyasında birçok JS dosyası yer alıyor. script.aculo.us kütüphanesinin doğru çalışması için gerekenlerden prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js and controls.js dosyalarını bir klasöre aktarın ve script.aculo.us kullanmak istediğiniz sayfanın HEAD etiketi içerisinde bağlantı verin.

scriptaculous.js dosyası varsayılan olarak tüm diğer javascript dosyalarını yükler. Eğer sayfa içerisinde sadece kullanmak istediğiniz özelliğe ait dosyaları yüklemek isterseniz kodu aşağıdaki gibi düzenleyebilirsiniz.

Burada virgüller ile ayrılmış değerler klasöre kopyaladığınız dosyaların isimlerinden ibaret. Örnekler vermeye başladıkça hangi dosyanın nerede kullanıldığını daha rahat anlayacaksınız. Ama dikkat edilmesi gereken nokta bu paketlerin (özelliklerin ayrı olarak dosyalanmasından dolayı bu kelimeyi tercih ettik) birbiri ile olan bağımlılık durumunun gözden kaçırılmaması.

Bir script.aculo.us efekti kullanmak istediğimizde bunun iki yolu var. Birincisi SCRIPT etiketi içerisinde istediğimiz fonksiyonu çağırmak;

diğeri de sayfa elemanı özelliklerinde istediğimiz efektin sınıfından birini kopyalayarak olaya bağlamak.

İlk yöntemde sayfa tarayıcı tarafından yorumlanırken bu kısma gelindiğinde javascript kodu da çalıştırılacak, ikinci de ise DIV ile sınırlandırılan bölgeye tıklandığında efekt bu etikete uygulanacak.

Uygulanabilecek tüm efektlerin listesi şu şekilde:

Effect.Highlight
Effect.MoveBy
Effect.Opacity
Effect.Parallel
Effect.Scale
Effect.Appear
Effect.BlindDown
Effect.BlindUp
Effect.DropOut
Effect.Fade
Effect.Fold
Effect.Grow
Effect.Puff
Effect.Pulsate
Effect.Shake
Effect.Shrink
Effect.SlideDown
Effect.SlideUp
Effect.Squish
Effect.SwitchOff

Tüm efektlerin nasıl çalıştığını http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo adresinden kontrol edebilirsiniz.

Bir efekte değiştirgen parametre ile değer geçirmediğiniz sürece varsayılan değerler ile işini yapacaktır. Dilerseniz bu parametrelerin neler olduğuna da bir bakalım.

Bir efektin genel kullanımı

şeklindedir. Her efekt için gerekli parametre yok. Kullanılan parametreler ve seçenekleri örneklerde geçtiğinde açıklamaya çalışacağız.

Küçük bir örnek vermek gerekirse de

Kodu bir olaya bağlamak olarak verdiğimiz 2 yöntemdeki gibi bir kullanımla sayfa elemanını (örneğin DIV) 0.5 saniye içinde görünmez hale getirecektir ’0.0′ değerini 0′la 1 arasında bir değer olarak belirlerseniz de şeffaf bir görünüm elde edebilirsiniz. Ya da ‘from:’ seçeneği sayısal değer olarak ‘to:’ seçeneğinden daha küçük olursa şeffaflığı azalan bir görünüm oluşacaktır.

Aslında bu sayı AJAX yazısı biraz kısa gibi oldu ama script.aculo.us ile en az 1-2 sayı daha uğraşacağımızı göz önünde bulundurduğumuzda biraz sindirerek gitmek gerektiğini düşündük. O yüzden efektlerin nasıl kullanıldığına dair ısınma turlarını içeren bu yazının ardından kontrolleri de katarak Web 2.0′a yakışır sayfaları tasarlamayı sonraya bırakmak istedik. Bu ay örnekler olmadığından size örnekleri test edebileceğiniz bir adres de veremiyoruz. Ama bir sürprizimiz var! Pctech.com.tr yenilendi. Aslında bu satırları yazarken son rötuşlar yapılmaya devam ediliyor bu yüzden aksilik çıkmazsa diye sonuna eklememiz gerek. Ama yeni haliyle beraber daha güncel ve dolu dolu bir pctech.com.tr’de de AJAX ile olan sohbetlerimize yer vermeyi düşünüyoruz. İçerik olarak iddialı olacağımızı şimdiden söylemek isterim. Ödev yok, paydos!

Desteklenen Tarayıcılar
* Microsoft Internet Explorer 6.0+ (Windows için)
* Mozilla Firefox 1.0+/Mozilla 1.7+
* Apple Safari 1.2+
* Konqueror
* Camino
* Opera 7.54 (AJAX ve şeffaflık kullanan efektler desteklenmiyor)
* Opera 8 (şeffaflık kullanan efektler desteklenmiyor)
* Opera 9+

Bu yazı Kasım 2006 tarihinde PC Tech dergisinde yayınlanmıştır.