Belajar Adobe AIR : Membuat Tray Icon

Alhamdulillah bisa ketemu lagi sama Adobe AIR, udah lama bgt ga ngobrol tentang ini, buat mengingat lagi langkah awal bagaimana instalasi Adobe AIR, klik di sini ya. Nah berawal dari posting ini, yuks pelan2 kita bermain-main dengan AIR, nggak sulit kok, cuma butuh 1 syarat...... jgn takut basah....... :P.

Pelajaran pertama ini adalah bagaimana membuat Tray Icon, apa itu Tray Icon ?? Mungkin sebagian besar dari kita udah sering pake YM, Gtalk atau sejenisnya. Jika diaplikasi tersebut kita klik tanda "x", akan muncul Icon kecil di kanan bawah monitor kita, nah itulah yg dinamakan Tray Icon. Fungsinya memang tidak terlalu signifikan, bisa dibilang hanya untuk menghemat space di Toolbar atau mungkin agar terlihat lebih cantik saja.

Berikut script untuk membuat Tray Icon tersebut :
//selalu sertakan AIRAliases.js, file ini wajib ada.
<script type="text/javascript" src="AIRAliases.js"></script>


//define variable win sebagai alias dari window.nativeWindow, biar penulisan setelahnya ga panjang2

var win = window.nativeWindow;


var iconLoadComplete = function(event) 
{ 
    air.NativeApplication.nativeApplication.icon.bitmaps = [event.target.content.bitmapData]; 
}

air.NativeApplication.nativeApplication.autoExit = false; 
var iconLoad = new air.Loader(); 
var iconMenu = new air.NativeMenu(); 
//perintah ini untuk menambahkan menu "Exit" pada Tray Icon yg kita buat
var exitCommand = iconMenu.addItem(new air.NativeMenuItem("Exit")); 
exitCommand.addEventListener(air.Event.SELECT,function(event){ 
        air.NativeApplication.nativeApplication.icon.bitmaps = []; 
        air.NativeApplication.nativeApplication.exit(); 
        //perintah ini untuk mengclose window atau menutup aplikasi desktop.
        win.close();
}); 


//perintah ini agar ketika Tray Icon di klik, window akan muncul, begitu jg sebaliknya.
var TrayIcon_Click = function(event){
    if (window.nativeWindow.visible) {
        window.nativeWindow.visible = false;
        win.minimize();
    } else {
        window.nativeWindow.visible = true;
        win.restore();
        //nah ini agar window yg muncul selalu berada di paling depan, berguna jika ada beberapa window.
        window.nativeWindow.orderToFront();
    }
};


if (air.NativeApplication.supportsSystemTrayIcon) { 
    air.NativeApplication.nativeApplication.autoExit = false; 
    iconLoad.contentLoaderInfo.addEventListener(air.Event.COMPLETE,iconLoadComplete); 
    //ini logo yg akan muncul di kanan bawah layar / gambar Tray Iconnya.
    iconLoad.load(new air.URLRequest("icons/logo_mazhters16x16.png")); 
    //ini text ketika mouseover di Tray Icon
    air.NativeApplication.nativeApplication.icon.tooltip = "Demo Application"; 
    air.NativeApplication.nativeApplication.icon.menu = iconMenu;
    air.NativeApplication.nativeApplication.icon.addEventListener("click", TrayIcon_Click);
}

Sangat mudah bukan ?? sebenarnya ente tinggal siapin icon/logo saja, yg lainnya bs tinggal copy paste. Ok Guys..... selamat mencoba..... tunggu modul berikutnya......

Catatan Kecil : Tips dalam membuat WAP

Hal hal kecil terkadang sering kita lupakan, padahal dari situlah sesuatu yang besar berawal. Mulai dari sekarang, ane akan coba sharing sesuatu yang mungkin di anggp sepele ( dalam bidang programming tentunya ) yang pada kenyataannya tidak bisa di abaikan, seperti ada pepatah bilang "batu kecil memang tidak melukai, tapi bisa membuat orang tergelincir".

Pertama yang lagi anget-angetnya di benak ane, yaitu hal-hal yang perlu diperhatikan dalam pembuatan WAP, berikut tips-nya :

• Hindari penggunaan design yang WAH!!!, sebaiknya design/interface WAP yang sederhana, jangan menggunakan image terlalu banyak, cukup pakai background color saja.
• Buat flow sesederhana mungkin, walaupun akan berbeda dengan versi WEB misalnya, tapi itu jauh lebih baik, sebab menurut hasil analisa, para pengguna WAP bisa dibilang agak 'males' jika berhadapan dengan flow yang ribet.
• Jangan menggunakan menu panjang ke samping (maksimal 2 saja), dan gunakan persentase untuk menentukan width-nya ( ingat, screensize terkecil pengguna WAP itu 128x128 ).
• CSS yang di support oleh HP, berbeda dengan Browser, gunakan script ini untuk membedakan keduanya, <link type="text/css" media="handheld" href="css/handheld.css" />
  <link type="text/css" media="screen" href="css/screen.css" /> handheld.css untuk HP, dan screen.css untuk Browser.
• Sebaiknya gunakan <table><tr><td> daripada menggunakan <ul><li>, bisa dibilang, buat seperti pertama kali anda belajar HTML.
• Sebisa mungkin hindari penggunaan fungsi javascript seperti onClick, onChange dkk.

Kira-kira itu tips dari ane ( ini kisah nyata loh, pengalaman pribadi, hehe ). Yang perlu dicatat disini, tips2 tersebut jika target market anda adalah semua pengguna HP yang bisa menggunakan WAP, tapi jika target market anda dalam pembuatan WAP untuk type2 smartphone, beberapa tips diatas mungkin bisa di abaikan.