Aplikasi XUL Pertama, Hello World XUL Tutorial

Untuk mempermudah pengenalan dan pembelajaran tentang xulrunner, kali ini Syuaa akan membuat aplikasi hello world sederhana dengan menggunakan xulrunner.

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 :

Aplikasi SOAP Pertama, Hello World SOAP Tutorial

Bagi yang sudah terbiasa dengan WSDL (Web Service Definition Language) pasti sudah terbiasa menggunakan SOAP (Simple Object Access Protocol). Kali ini Syuaa akan memberikan sedikit contoh aplikasi SOAP Hello World agar lebih mudah memahami belajar SOAP.

Hal yang pertama dilakukan adalah membuat Script Server Side, Script yang akan menangani Request Client Side.

<?php
function HelloWorld($MyName) {
     return 'Hello World, and Hello '.$MyName;
}

$server = new SoapServer(NULL, array(
          'soap_version'=>SOAP_1_2,
          'encoding'=>'ISO-8859-1',
          'uri'=>'http://www.w3.org/2001/12/soap-encoding'
          ));

$server->addFunction("HelloWorld");
$server->handle();
?>

Nilai NULL pertama dari class SoapServer akan bernilai lain jika SOAP menggunakan WSDL Server Side Script.
SoapServer : Membentuk sebuah SOAP Server baru.
soap_version : versi SOAP yang kita gunakan, saat ini ada pilihan (SOAP_1_1, dan SOAP_1_2).
encoding : Encoding yang digunakan, harus di set karena SOAP tidak memiliki nilai encoding default.
uri : Kurang lebih sama dengan encoding, nilai default nya adalah 'http://www.w3.org/2001/12/soap-encoding'.

Simpan script tersebut dengan nama server.php di htdocs Anda. Misal di http://localhost/server.php

Selanjutnya adalah membuat sebuah script untuk client side, yang akan menjalankan function Hello World yang ada pada Server Side.

<?PHP
$client = new SoapClient(NULL, array(
          'location'=>'http://localhost/server.php',
          'uri'=>'http://localhost/',
          'trace'=>1
          ));

     $return = $client->__soapCall("HelloWorld", array('Syuaa'));
     echo $client->__getLastResponse();
?>

Simpan script tersebut dengan nama index.php di htdocs Anda. Misal di http://localhost/index.php

Maka nilai pengembalian dengan menjalankan script index.php diatas adalah :

     
          
               
                    Hello World, and Hello Syuaa