Silahkan donwload xulrunner nya di :
https://developer.mozilla.org/en/XULRunner
Syuaa sendiri menggunakan xul versi 1.9.2.13. Dijalankan pada Operation System Mandriva 2010.2 Free Edition.
[syuaa@root ~]$ xulrunner -v Mozilla XULRunner 1.9.2.13 - 20101209152253 [syuaa@root ~]$
Hal pertama yang perlu diketahui adalah struktur folder aplikasi xul.
-helloworld\
|
|-chrome\
| |-content\
| | |-main.xul
| | |-main.js
| |
| |-chrome.manifest
|
|-defaults\
| |-preferences\
| |-prefs.js
|
|-application.ini
|-chrome.manifest
Kita akan memulai dari yang paling bawah, yaitu chrome.manifest. Dikarenakan pada xul versi 2 keatas, xulrunner tidak lagi melihat file manifest yang berada pada folder /myapp/chrome/chrome.manifest, melainkan membaca file manifest yang berada pada tingkat apliasi, atau pada ilustrasi diatas berada pada folder helloworld. Maka kita bisa mengalihkan file manifest pada tingkat aplikasi ke tempat file manifest sebenarnya, yaitu helloworld/chrome/chrome.manifest
Ini adalah isi chrome.manifest pada tingkat helloworld saya :
manifest chrome/chrome.manifest
Selanjutnya untuk file chrome.manifest yang ada pada tingkat helloworld/chrome/chrome.manifest berisi skrip seperti ini :
content helloworld content/
Selanjutnya mengisi file application.ini
[App] Varsion=1.0 Vendor=Syuaa Name=HalloWorld BuildID=20110405 ID=textxul@syuaa.net [Gecko] MinVersion=1.8 MaxVersion=2.*
Pastikan BuildID terisi dengan angka, saya mengisinya dengan angka tanggal pembuatan tutorial ini. Selanjutnya adalah ID, isikan dengan pengenal applikasi, Untuk pengisian [Gecko] MinVersion dan MaxVersion isikan dengan versi xul yang suport dengan aplikasi ini. Standarnya adalah MinVersion=1.8, dan MaxVersion=2.*.
Setelah itu, lanjutkan dengan mengisi file helloworld/defaults/preferences/prefs.js, isikan dengan skrip berikut
pref("toolkit.defaultChromeURI", "chrome://helloworld/content/main.xul");
Untuk informasi lebih lengkap tentang isi prefs.js silahkan langsung ke :
https://developer.mozilla.org/en/XULRunner/Specifying_Startup_Chrome_Window
Setelah mengisi prefs.js, lanjutkan dengan file /helloworld/chrome/content/main.xul. Ini merupakan file inti dari aplikasi xul.
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window name ="main" id="main" title="Hello World Lagi" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://helloworld/content/main.js" /> <caption label="Hallo Lagi" /> <separator /> <button label="more" oncommand="showMore();" /> <separator /> <description id="more-text" hidden="true">This is hidden field</description> </window>
Pastikan tidak ada whitespace sebelum <?xml version="1.0"?>.
Dalam file ini menjelaskan bawha :
[03] Menggunakan stylesheet standar xul, yaitu chrome://global/skin/, Anda juga bisa mengubahnya agar menggunakan style css dari folder tempat main.xul berada.
[07] Menginport file javascript yang berada ditempat main.xul berada, file javascript tersebut bernama main.js.
[09] Membuat caption Hello World.
[11] Membuat sebuah button
[13] Membuat hidden deskripsi
Kemudian lanjutkan dengan mengisi file main.js dengan function showMore().
function showMore() {
document.getElementById("more-text").hidden = false;
}
Jika semuanya sudah selesai, maka tinggal menjalankan dari command console.
Linux :
Permisalan file xulrunner saya sudah ada di usr/bin, dan file appliasi saya ada di /var/www/html/user/syuaa/xul/helloworld
[syuaa@root ~]$ xulrunner /var/www/html/user/syuaa/xul/helloworld/application.ini
Windows :
Permisalan file xulrunner.exe ada di C:/xulruunner/xulrunner.exe, dan file aplikasi saya ada di C:/MyApp/helloworld/
C:\MyApp\helloworld>..\..\xulrunner\xulrunner.exe application.ini
Dan tampilannya akan seperti ini :
