Belajar dan menggunakan ExtJS untuk interface aplikasi Web

Keinginan untuk memiliki aplikasi berbasis web layaknya aplikasi desktop yang menyediakan kemampuan listener atau event handler mengharuskan penulis mencari contoh kode yang sudah menyediakan feature tersebut. Teknologi Java sudah memiliki framework yang mirip desktop listener, yaitu JSF. Hanya saja penulis tidak menyukai JSF dengan begitu banyaknya tag dan fleksibilitas kode yang tidak cocok dengan gaya penulis. Akhirnya setelah mencari-cari ketemu librari ExtJS yang menggunakan Javascript dan AJAX.

ExtJS yang demikian fleksibel dengan tampilan GUI-nya yang manis merupakan pengembangan dari YUI, yaitu yahoo javascript librari yang dipadu dengan Jquery dan prototype. Integrasi ketiga librari dengan mengedepankan paradigma OOP yang telah didukung oleh Javascript menjadi nilai tambah librari ini untuk menjadi pilihan pemrograman web masa kini.

Konsep OOP Javascript
Javascript tidak mengenal tipe data, tapi bisa mendeteksi tipe data secara otomatis. Konsep OOP Javascript sudah mendukung object yang memiliki property dan method, konstruktor dan konsep pewarisan. Sehingga pengembangan aplikasi web bisa reuse code yang sudah ada dan mengembangkannya (extends).

Ext.extend(MainPanel, Ext.TabPanel, {
width : 500,
height : 400,
initEvents : function(){
MainPanel.superclass.initEvents.call(this);
}
//more action handler for this panel
});

Code diatas adalah contoh class turunan MainPanel dari class TabPanel. Dalam class ini membolehkan deklarasi method dan property. Contoh property adalah width, da height, sementara contoh method adalah initEvents.

Memulai ExtJS
- Download librari ExtJS dari websitenya http://www.extjs.com
- Buat folder dengan nama aplikasiweb
Berdasarkan tutorial ExtJS, untuk memulai membuat aplikasi dengan ExtJS anda membutuhkan minimal 3 file. Kurang dari 3 file sebetulnya gak pa apa cuma kode menjadi tidak terkelola. Ke-3 file itu adalah 1 file HTML, 1 file Javascript dan 1 file CSS.
Dalam file HTML berisi code untuk menyertakan resource file aplikasi yaitu file Javascript dan file CSS, dan biasanya file HTML ini akan dipanggil/ direquest oleh user.
- Buat file html ini dalam folder aplikasiweb.

Application Layout Tutorial

Penjelasan:
Aplikasi membutuhkan librari ExtJS, dimana kita harus meng-include-kan file javascript dari ExtJS yaitu ext-base.js dan ext-all.js (untuk production) atau ext-base-debug.js dan ext-all-debug.js (saat development), serta file css ext-all.css. Sesuaikan aja lokasi path dengan lokasi path librari extjs di komputer anda.

Di dalam tag body bisa anda tambahkan informasi apapun atau tag div dari DOM.
Kemudian file Javascript lain applyayout.js, ini adalah file javascript baru yang anda buat. Di dalamnya berisi kode javascript untuk pembuatan aplikasi web ini. Misalnya kita akan menampilkan window, kodenya seperti berikut:

/**
* Application Layout
* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners
*/

// reference local blank image
Ext.BLANK_IMAGE_URL = ‘../extjs/resources/images/default/s.gif’;

// create namespace
Ext.namespace(‘myNameSpace’);

// create application
myNameSpace.app = function() {
// do NOT access DOM from here; elements don’t exist yet

// private variables
var btn1;
var privVar1 = 11;

// private functions
var btn1Handler = function(button, event) {
alert(‘privVar1=’ + privVar1);
alert(‘this.btn1Text=’ + this.btn1Text);
};

// public space
return {
// public properties, e.g. strings to translate
btn1Text: ‘Button 1′,

// public methods
init: function() {
if (Ext.Ext2) {
btn1 = new Ext.Button({
renderTo: ‘btn1-ct’,
text: this.btn1Text,
handler: btn1Handler
});
} else {
btn1 = new Ext.Button(‘btn1-ct’, {
text: this.btn1Text,
handler: btn1Handler
});
}
}
};
}(); // end of app

Ext.onReady(myNameSpace.app.init, myNameSpace.app);
// end of file

Kode diatas berisi kode minimal. Sangat disarankan kode javascript dalam file JS project anda harus menggunakan struktur layout ini.
Kode-kode diatas akan dibaca mulai dari atas sampai end of file. Tetapi kode javascript akan dieksekusi mulai dari method Ext.obReady(); dimana kondisi ini dilakukan setelah semua kode javascript dan resource aplikasi dimuat ke browser. Jadi jangan kaget kalau anda bermain dengan javascript loading awal aplikasi agak lama, ya karena semua resource dimuat dulu.
Begitu method Ext.onReady() dieksekusi maka obyek-obyek javascript akan tercipta dan mengeksekusi method dan properti. Sehingga kalau anda buat kode cara membacanya dari bawah ya, atau dari method Ext.onReady(), ibaratkan aja method ini adalah method mainnya.

Untuk file CSS bersifat optional, dibutuhkan jika anda menggunakan CSS untuk mempercantik tampilan.

Jika file applayout.html ini anda akses dari browser, maka akan muncul 2 button yang kalau diklik akan memunculkan pesan.
Terlihat dalam kode javascript kedua button memiliki penanganan action handler, yang didefinisikan dalam properti handler; Bentuk penulisan ini menggunakan format JSON yang sangat ringkas dan fleksibel.

Sedikit ini dulu artikel yang bisa dituliskan. Konsep dasarnya seperti itu, nantinya anda tinggal kembangkan dengan membuat panel, tabpanel, window, formpanel, borderlayout, dataview layout, datagrid dan masih banyak lagi komponen yang siap digunakan.

DM