Web Desktop Bagian 2 (Menambahkan Taksbar Start Menu dan Tray Clock)


Notice: A non well formed numeric value encountered in /home/u6060452/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Sebelum nya kita sudah membuat sudah web desktop sederhana. Selanjutnya kita akan menambahkan sebuah fitur yang bernama start menu dan tray clock yang akan diletakkan di bagian bawah seperti penampakkan berikut ini:

 step_6

 

Yang diperlukan untuk membuat start menu dan jam seperti diatas adalah kelas start menu, kelas tray clock, dan kelas taskbar. Mari kita lihat kelas masing-masing sebagai beikut:

1. Kelas StartMenu

Berikut ini adalah isi dari kelas StartMenu :

2. Kelas TrayClock

Berikut ini adalah isi dari kelas TrayClock :

3. Kelas Taskbar

Berikut ini adalah isi dari kelas Taskbar :

Selanjutnya adalah bagaimana menambahkan ke dua kelas diatas kedalam aplikasi webdesktop yang sudah ada. Langsung saja langkahnya sebagai berikut:

1. Masukkan file-file dari kelas StartMenu.js, TrayClock.js, dan taskbar.js diatas di folder app/view/.

2. Kemudian tambahkan valaue dari parameter views pada file app/controller/desktop.js untuk ketiga kelas diatas seperti gambar dibawah ini.

Step 1 dan 2

 3. Selanjutnya tinggal menambahkan/memasang kelas view/taskbar.js kedalam kelas view/desktop.js. Karena didalam view/taskbar.js sudah di pasang kelas StartMenu.js dan TryClock.js. Sehingga untuk menggunakannya tinggal menggunakan kelas taskbar.js saja. Penggunaannya adalah sebagai berikut didalam file view/desktop.js:

Jika diperhatikan ada perubahan pada parameter items induknya (Ext.container.Viewport) yaitu kita membutuhkan panel untuk meletakkan taskbar. Agar bisa diletakkan di bawah gunakan parameter bbar di komponen Panel atau tbar untuk meletakkan di atas. Perhatikan gambar berikut ini:

step_2

Sehingga kita akan mendapatkan tampilan seperti berikut ini:

step_3

Selanjutnya adalah mengisi item-item di start menu. Sebagai contoh akan item start menu akan berisi sama dengan item-item pada shortcut yang berada di desktop. Dengan demikian yang harus dilakukan adalah sebagai berikut.

step_4

1. Pada file app/controller/desktop.js tambahkan control berikut:

pada fungsi:

Jangan lupa untuk menambahkan fungsi desktopafterrender sebagai berikut:

Sehingga kelas app/controller/desktop.js menjadi:

Maka hasilnya akan menjadi:

step_5

 

Untuk Melihat Demo silahkan kunjungi link berikut:

Web Desktop Bagian 2

Atau Download source code:
Download

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *