Hmm.. Jadi pernah terlintas di pikiran Anda bagaimana cara membuat aplikasi GUI hanya berbekal Text Editor. Kalau begitu, XUL bisa jadi salah satu jawaban bagi Anda. XUL (Xml-based User interface Language) adalah bahasa markup yang dikeluarkan oleh Mozilla.. ah, daripada saya yang menjelaskan tentang apa itu XUL, sebaiknya Anda membaca langsung dari yang empunya XUL ^_^ : https://developer.mozilla.org/en/The_Joy_of_XUL

Apa yang dibutuhkan? Tentu saja yang pertama adalah Browser Mozilla Firefox harus sudah terinstall di komputer Anda. Jika sudah, segera buka text editor kesayangan Anda dan langsung mencicipi percobaan-percobaan berikut.

Buatlah sebuah folder khusus untuk menyimpan file-file percobaan Anda. Nggak harus sich, tapi untuk mempermudah ajah. Dalam contoh kali ini saya membuat folder di D:\xul

…oO—( Membuat Jendela Dasar

Kita akan memulai dengan membuat sebuah jendela kosong dengan window title “Hello zoNERS, Welcome in spyroZONE.NET!”. Buka Text Editor Anda, ketik code berikut:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="BelajarXUL" title="Hello zoNERS, Welcome in spyroZONE.NET!" width="400" height="400" screenX="50" screenY="100" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
</window>

Simpan dengan nama: belajar.xul

Hmm.. penjelasannya singkatnya gini nich. Code diatas merupakan layout dasar dari struktur penulisan XUL.

<?xml version=”1.0″?> –> XML wajib punya ini khan?
<?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?> –> menggunakan style Mozilla Firefox
<window id=”BelajarXUL” title=”Hello zoNERS, Welcome in spyroZONE.NET!” width=”400″ height=”400″ screenX=”50″ screenY=”100″ xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”> —> Nah ini nich yang menentukan panjang-lebar window yg terbentuk serta posisinya

Untuk melihat hasilnya, klik START -> Run kemudian ketik:

firefox -chrome file://d:\xul\belajar.xul

Ganti d:\xul\belajar.xul dengan lokasi file .xul Anda.

…oO0—( Hasilnya adalah:

Jendela Dasar

…oO—( Menampilkan halaman Web

Kini kita akan melakukan hal yang lebih menyenangkan. Kita akan membuat jendela yang akan menampilkan halaman web. Buka Text Editor Anda, ketik code berikut:

<?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <window id="BelajarXUL" title="Hello zoNERS, Welcome in spyroZONE.NET!" width="800" height="600" screenX="50" screenY="100" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <menubar>
 <menu id="fileMenu" label="File" accesskey="F">
 <menupopup>
 <menuitem label="New"/>
 <menuitem label="Open"/>
 <menuseparator>
 <menuitem label="Close"/>
 </menuseparator>
 </menupopup>
 </menu>
 <menu id="fileMenu" label="Help" accesskey="H">
 <menupopup>
 <menuitem label="Help Contents"/>
 <menuitem label="About"/>
 </menupopup>
 </menu>
 </menubar>
 <iframe src="http://spyrozone.net" flex="1"/>
 </window>

Simpan dengan nama belajar2.xul

Nah, di script diatas Anda mulai belajar bagaimana membuat menu dan item bagi menu-menu Anda. Untuk menampilkan halaman web, kita gunakan IFRAME. Perintahnya sama dengan IFRAME yang sudah Anda kenal.

Untuk melihat hasilnya, klik START -> Run kemudian ketik:

firefox -chrome file://d:\xul\belajar2.xul

…oO0—( Hasilnya adalah:

Form dengan halaman web didalamnya

…oO—( Menampilkan halaman web dalam Tab

Kini kita akan melakukan hal yang lebih menyenangkan lagi. Kita akan menampilkan beberapa halaman web yang terbagi dalam tab-tab. Buka Text Editor Anda, ketik code berikut:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="BelajarXUL" title="Hello zoNERS, Welcome in spyroZONE.NET!" width="800" height="600" screenX="50" screenY="100" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
<menu id="fileMenu" label="File" accesskey="F">
<menupopup>
<menuitem label="New"/>
<menuitem label="Open"/>
<menuseparator>
<menuitem label="Close"/>
</menuseparator>
</menupopup>
</menu>
<menu id="fileMenu" label="Help" accesskey="H">
<menupopup>
<menuitem label="Help Contents"/>
<menuitem label="About"/>
</menupopup>
</menu>
</menubar>
<tabbox>
<tabs>
<tab label="Tab Satu"/>
<tab label="Tab Dua" value="2"/>
<tab label="Tab Tiga" value="3"/>
</tabs>
<tabpanels>
<iframe height="500" src="http://spyrozone.net" flex="1"/>
<iframe height="500" src="http://blog.spyrozone.net" flex="1"/>
<iframe height="500" src="http://spyrozone.net/members/register" flex="1"/>
</tabpanels>
</tabbox>
</window>

Simpan dengan nama belajar3.xul

Cukup mudah khan? Untuk membuat Tab-tab pertama-tama kita buat dulu box untuk tab-tab kita dengan <tabbox>. Kemudian dilanjutkan dengan <tabs> lalu mulai membuat tombol tab-tab yang kita inginkan dengan perintah <tab>. Adapun isi dari tab-tab yang telah dibuat kita kelompokkan secara berurutan dalam sebuah <tabpanel>.

Untuk melihat hasilnya, klik START -> Run kemudian ketik:

firefox -chrome file://d:\xul\belajar3.xul

…oO0—( Hasilnya adalah:

Web dalam Tab

Yap, sekian perkenalannya. Semoga bisa menjadi informasi awal bagi Anda yang belum mengenal XUL. Jika Anda tertarik dengan XUL, silahkan mengunjungi link yang telah saya sertakan dalam referensi artikel ini.

Cha.. >’_'<

…oO0—( REFERENSI:

• https://developer.mozilla.org/en/XUL_Tutorial
• https://developer.mozilla.org/En/XUL_Reference
• https://developer.mozilla.org/en/The_Joy_of_XUL