Dokumen tersebut memberikan penjelasan tentang konsep dan implementasi sliding window menggunakan MDI Window di PowerBuilder untuk membuat tampilan Hamburger Menu. Dokumen tersebut menjelaskan langkah-langkah pembuatan object yang dibutuhkan seperti window, menu, datawindow, dan timer serta penambahan script untuk membuat fungsi sliding window.

1. Membuat Sliding window menggunakan MDI Window
untuk digunakan menjadi Hamburger Menu Style atau Waffle Menu
Oleh :
zulmach@pbdev.id
PART 1 : KONSEP
Saat ini sangat umum suatu aplikasi memiliki tampilan dengan menu utama tersembunyi walaupun
banyak kontra yang menyatakan bahwa hamburger menu style tidak efektif untuk menunjukkan
bahwa fitur-fitur dari suatu aplikasi tersembunyi dalam suatu laci (drawer). Namun disisi lain, bagi
pengguna yang sudah terbiasa menggunakan aplikasi dan menggunakan nya untuk pekerjaan sehari-
hari, keberadaan menu yang tersembunyi memberikan ruang yang lapang untuk menampilkan apa
yang sedang dikerjakan pada satu layar penuh.
Berikut konsep Hamburger Menu style dan implementasinya dengan PowerBuilder.
1. MDI Style, dalam konsep ini jenis window yang digunakan adalah MDI style, dipilih dengan
beberapa alasan antara lain, komunikasi antar object yang mudah, dapat tampil seperti
Single Page Application, dimana semua window akan muncul dalam MDI workspace,
kemudian jika di deploy ke Appeon Web, MDI akan berada di dalam browser dan tidak
seperti SDI window yang ditampilkan diluar browser seolah-olah hamya seperti desktop
application yang dipanggil melalui browser, sedangkan jika window ditampilkan didalam
browser ia akan tampak seperti halnya halaman web.
2. Layout object, lalu untuk memudahkan memahami konsep dalam model sliding menu ini,
berikut beberapa definisi yang perlu di ketahui :
a. Aplikasi menggunakan model MDI (Multiple Document Interface) sebagai Frame
Window yang akan berfungsi sebagai container dan module loader
b. Sliding Menu merupakan Sheet Window yang akan di gerakkan oleh timer object
c. Semua fungsi dan cara pemanggilan akan disematkan pada window object sehingga
tidak diperlukan scripting yang rumit.
Berikut gambaran struktur layout object nya :

2. 3. Object yang dibutuhkan, seperti gambaran konsep layout diatas maka berikut adalah daftar
object yang akan digunakan dalam model framework sliding window, dengan asumsi sudah
mempunya workspace (misalnya pbsliding.pbw) dan target application object (pbsliding)
No. Nama Object Jenis Catatan
1 w_frame Window object, tipe MDI Frame yang akan berfungsi
sebagai container
2 m_frame Menu object Wajib ada untuk window
bertipe MDI
3 w_sheet Window object, tipe pop up,
no border, no title bar
Akan digunakans sebagai
ancestor
4 t_slide w_sheet Timing object Dibuat sebagai window object,
lebih fleksibel dibanding
menggunakan timer event
5 m_sheet Menu object inherit dari
m_frame untuk disematkan
pada w_sheet
Memungkinkan untuk
mengaktifkan shortcut
keyboard untuk akses menu
item
6 u_titlebar Standar datawindow user
object yang
diletakkan sebagai title bar di
window sheet
7 dwo_titlebar Datawindow object untuk
u_titlebar
8 w_home Window object yang di
inherit dari w_sheet
w_home akan menjadi concrete
object sebagai contoh modul
yang dapat digunakan sebagai
entri point
9 w_feature Window object yang di
inherit dari w_sheet
w_feature akan menjadi
concrete object sebagai contoh
modul yang akan di panggil
melalui sliding menu window
10 w_slidingmenu Window object yang di
inherit dari w_sheet
Window ini yang akan menjadi
contoh sliding menu

3. Pada pembuatan konsep framework ini kita akan menggunakan PowerBuilder Versi 11.5. dan berikut
beberapa hal lain yang digunakan selain powerbuilder.
1. Gambar Icon
Gambar dan ikon yang digunakan diambil dari icon library gratis yang dapat anda akses
melalui https://icons8.com/ yang bisa kita download aplikasi Pichon nya
2. Font, dan font yang digunakan diambil dari https://www.fontsquirrel.com/fonts/roboto
namun perlu diingat bahwa penggunaan font tidak akan berfungsi di mobile, di web dapat
difungsikan jika pc user juga menginstall font yang sama.

4. 3. Referensi Warna, Referensi warna diambil dari https://www.materialui.co/colors Pada web
ini anda bisa langsung klik warna yang anda inginkan, dan di clipboard anda sudah tercopy
code warna nya jika anda memilih tipe code warna RGB maka yang akan dicopy dalam
format RGB(xxx,xxx,xxx)
PART 2 : MEMBUAT OBJECT BAGIAN PERTAMA
Setelah memahami konsep di atas dan mengetahui object yang diperlukan, selanjutnya adalah
membuat , Langkah-langkah dalam pembuatan sliding window dapat diikuti dalam uraian dibawah
ini :
1. Buat Workspace dan Target yang dibutuhkan
2. Lalu buat object yang dibutuhkan, yang pertama adalah m_frame, object menu yang akan
disematkan pada w_frame. Caranya dari menu FILE kita pilih NEW, Pilih Tab PB Object dan
pilih item MENU
1
2

5. Dan edit sesuai kebutuhan, dan menu bar pada m_frame (dalam hal ini adalah FILE) dibuat
visible=false agar window tidak menampilkan menu seperti biasanya. Namun menu yang
tersembunyi ini dapat tetap memfungsikan shortcut key nya.
3. Kemudian kita membuat window object untuk tipe MDI yang akan dijadikan sebagai frame
window, langkahnya seperti tadi dari menu FILE pilih NEW dari tab PB OBJECT pilih item
WINDOW, lalu sematkan menu, pilih WindowType : MDI
2
3
4
1
2

6. 4. Buat menu m_sheet inherit dari m_frame untuk disematkan pada w_sheet yang akan dibuat
berikut nya.
5. Buat satu window object w_sheet dengan m_sheet sebagai menu, lalu pilih WindowType
popup uncheck border dan uncheck titlebar, hal ini akan memungkinkan MDI Sheet tampil
secara penuh tanpa title bar
1
2
3

7. Masih dalam window painter w_sheet kita tambahkan timing object dengan memilih menu
insert >> object >> timing. Kemudian ganti nama nya menjadi t_slide, lalu simpan
PART 3 : MEMBUAT OBJECT BAGIAN KEDUA
6. Buat satu datawindow object external dengan satu column title dengan tipe string(50) yang
akan kita gunakan sebagai pengganti titlebar pada window sheet.

8. Setelah finish dan tercreate datawindow objectnya, select All control lalu hapus
Pada band detail, Buat satu compute field c_modules dengan expression :
bitmap(“modules.png”) untuk menampilkan gambar hamburger icon dan satu lagi c_close
dengan expression bitmap(“close.png”) untuk icon close window, lalu tempatkan column
titletext untuk menampilkan judul modul.
Pada band header buat satu rectangle r_width yang akan digunakan sebagai referensi posisi
dan ukuran titiletext column dan close icon computed field, dengan mengatur expression
dari masing-masiing control.

9. Pada tab Data, klik kanan untuk ShareData lalu insert satu row untuk menampilkan row yang
sama pada pada tampilan preview.
Berikut tampilan datawindow title nya
Untuk mengatur warna band detail, digunakan dw expression pada properti background
color sebagai berikut :
1
2
3

10. Untuk mengatur posisi x compute field icon close c_close digunakan expression sebagai
berikut :
Sedangkan untuk titletext column pengaturan width nya dibuat dalam expression seperti
dibawah ini :
Sehingga dari hasil expression tersebut akan dihasilkan efek, ketika r_width kita ubah-ubah
lebarnya, maka posisi titletext column dan compute c_close akan menyesuaikan diri. Ukuran
lebar r_width nanti nya akan diatur saat window parent nya mengalami perubahan ukuran
(resize) dan isi datawindow akan mengikuti pengaturan tersebut tanpa script satu persatu.
Jangan lupa kembalikan ukuran tinggi band header menjadi 0 untuk menyembunyikan isi nya
sehingga tampilan datawindow hanya detail saja yang muncul. Simpan dengan nama
dwo_titlebar
1
2
3
3
1
2
Dengan mengubah
ukuran r_width
maka posisi
titletext dan
c_close ikut
berubah

11. 7. Kemudian kita akan membuat satu standar userobject yaitu datawindow control, yang akan
digunakan sebagai container dwo_titlebar yang tadi sudah kita buat.
Create new standar visual user object, pilih tipe datawindow
Isikan datawindow object nya dwo_titlebar, uncheck border dan uncheck semua scroll
properties
Lalu buat satu mapped user event ue_mouseup untuk menangkap mouse up, dengan tujuan
sebelum user melepas mouse (atau mengangkat jari jika menggunakan touch screen, atau
setelah deploy menjadi mobile app) letakkan script disini ketimbang meletakkan nya di click
event, user event ini di map ke system event ID pbm_dwnlbuttonup
Lalu simpan dengan nama u_titlebar
1
2
3
4
5

12. 8. Lalu tempatkan u_titlebar pada window w_sheet lalu simpan, anda bisa lakukan selagi
berada di window painter w_sheet lakukan drag u_titlebar dari system tree, lalu ganti
namanya dari dw_1 menjadi dw_title lalu jangan lupa simpan
9. Object berikutnya di inherit dari w_sheet lalu simpan menjadi w_home
Tambahkan text untuk membedakan nya dengan window lain. Dan simpan
1
2

13. 10. Kemudian kita akan membuat window w_feature yang juga akan inherit dari w_sheet
tambahkan juga text untuk membedakan nya dengan window lainnya, lalu simpan
11. Satu object berikut nya ada w_slidingmenu yang kita inherit dari w_sheet yang digunakan
sebagai menu untuk mengakses home dan feature, untuk contoh ini kita tambahkan dua
command button untuk membuka window dan mengatur ukuran lebarnya mengikuti lebar
menu yang kita inginkan.
Nah kita sudah membuat semua object yang dibutuhkan, selanjutnya kita akan menambahkan script
yang dibutuhkan untuk membuat sliding window nya.
PART 4 : MENAMBAHKAN SCRIPT BAGIAN PERTAMA
Dalam menuliskan script untuk model sliding window ini ada beberapa kaidah yang diuraikan
sebagai berikut :
1. Sebagian besar script dituliskan pada user event
2. Window w_frame akan menghandle fungsi umum
3. Komunikasi antar object menggunakan message object
Selanjutnya kita akan mulai dengan menuliskan script pada masing-masing object.
1
2
3

14. 1. Application Object : pbsliding, sebagai entri point, kita akan membuka window w_frame dari
event open dan menuliskan script nya seperti dibawah ini
2. Buat instance variabel pada w_sheet sebagai berikut :
Ib_sliding akan digunakan untuk menentukan apakah window akan di animasi kan saat
dibuka, ib_maximize diberikan false jika ukuran window akan ditampilkan tidak penuh
(misalnya w_slidingmenu hanya ditampilkan sesuai ukuran lebarnya), kemudian simpan
deklarasi instance variable ini
3. Lalu pada object u_titlebar kita akan buat beberapa script yang dimulai dengan membuat
instance variabel bertipe window dengan nama iw_parent, yang akan digunakan sebagai
varibel rujukan pada window dimana ia di letakkan.
Lalu buat satu user defined function yang akan mengisi variabel tersebut, caranya buka tab
Function list, lalu klik kanan pada daftar function nya pilih ADD
1
2
1
1

15. Isikan nama function, kemudian argumen type pilih window, argumen name isi dengan
aw_parent, lalu tuliskan scriptnya seperti berikut :
Kemudian pada event yang sudah kita buat sebelumnya yaitu ue_mouseup, kita tuliskan
script sebagai berikut :
Script tersebut akan menangani mouseup pada icon module untuk membuka w_slidingmenu
dan icon close untuk menutup window dengan memanggil deactivate event
4. Selanjutnya sebelum membuat script untuk w_sheet menjadi sliding window, berikut
beberapa logika pemrograman yang akan dbuat :
1
3
1
2
2

16. a. Window w_sheet akan memiliki pilihan apakah akan dibuka dan ditampilkan dengan
digerakkan bergeser oleh timer atau tidak. Maka akan kita buatkan instance variabel
bertipe boolean IB_SLIDING yang jika TRUE maka akan dianimasikan (sliding) dan jika
FALSE maka langsung dibuka
b. Sliding masuk dan keluar dapat dilakukan KE empat arah : UP, DOWN, LEFT, RIGHT,
untuk ini akan dibuatkan instance variable dengan tipe string IS_DIRIN dan ISDIROUT
c. Pada saat open w_sheet akan di tempatkan diluar workspace area (mdi_1 control )
Catatan : jika anda belum mengetahui mdi_1 adalah standar control berupa container
atau client area dimana sheet window yang di buka menggunakan opensheet akan
berada didalam client area mdi_1 tersebut. properti mdi_1 dapat diakses ketika window
anda bertipe MDI
d. Window w_sheet akan digerakkan oleh timer ke arah yang di tentukan.
e. Jika user melakukan klik pada object lain yang mengakibatkan w_sheet memicu event
deactivate maka w_sheet akan di gerakkan ke arah keluar dan di close
f. Window object w_sheet akan menerima parameter dengan tipe window yang disimpan
dalam instance variabel iw_caller dan digunakan sebagai rujukan pada window
pemanggil
buat satu user event ue_postopen untuk menempatkan script yang dijalankan setelah
window w_sheet di open, yaitu memanggil timer t_slide yang akan menggerakkan window
setelah terbuka setelah memeriksa apakah variable ib_sliding berkondisi TRUE
Selanjutnya tuliskan script pada event open sebagai berikut, menyimpan variabel window
pemanggil dalam iw_caller dan memanggil script yang ada pada event ue_postopen
1

17. Berikutnya pada event deactivate kita juga akan menuliskan script sebagai berikut :
Juga pada resize event untuk mengatur lebar dw_title dan isinya, juga memeriksa apakah
w_sliding menu sedang terbuka maka kita akan menutupnya
Selanjutnya pada event closequery ditambahkan script berikut ini
Lalu pada event activate tambahkan script ini untuk menutup w_slidingmenu ketika user
mengaktivasi atau mengganti fokus ke window lain

18. Lalu tuliskan script untuk timer event pada object t_slide untuk menangani gerakan bergeser
window seperti yang diinginkan, seperti ini lah scriptnya, hanya mengatur posisi x dan y saja

19. Dan pada control dw_title di event constructor kita tuliskan script untuk mengisi variabel
iw_parent dengan script sebagai berikut :
Lalu kita extend script pada event ue_mouseup di dw_title dengan script ini
PART 5 : MENAMBAHKAN SCRIPT BAGIAN KEDUA
5. Untuk window w_slidingmenu kita perlukan beberapa script khusus untuk perlakuan yang
berbeda, antara lain dengan script dibawah ini yang mengatur tinggi window w_slidingmenu
sama dengan tinggi window pemanggilnya
Kemudian pengaturan properti nya sebagai berikut, ib_maximize tidak kita centang karena
window ini akan ditampilkan dengan lebar sesuai ukuran, namun tingginya akan mengikuti
ukuran window yang membuka nya (lihat script diatas)
1
2
1 2
1
4
2
3
3
5

20. Dan sedikit script untuk merubah penampilan dengan mengganti judul window dan
warnanya, dengan script berikut di object dw_title pada event constructor, selain mengganti
judul window script ini juga mengganti icon pada compute field c_modules menjadi
“back.png” dan menyembunyikan compute field c_close
Oh ya, jangan lupa menulis script pada cb_home dan cb_feature untuk memanggil dan
membuka window window tersebut, pada event click masing-masing command button
seperti berikut :
Dengan sedikit tambahan untuk memeriksa apakah window w_home sudah dibuka, maka
saat membuka w_feature, kita tutup dulu w_home nya, dan demikian sebaliknya kita tutup
window w_feature jika terbuka sebelum membuka w_home
1
1

21. 6. Pengaturan window home, window home tidak memerlukan script karena script sudah kita
tuliskan pada window ancestornya yaitu window w_sheet, dan kita hanya tinggal mengatur
nilai pada instance variabel yang pada w_home muncul sebagai properties
Tambahkan script pada dw_title untuk mengganti isi column menjadi nama Window yang
kita inginkan
7. Juga pada window w_feature sama dengan w_home, kita atur properti nya
1
2
3
4
1
2
3
4
5
5

22. Tambahkan script pada dw_title untuk mengganti isi column menjadi nama Window yang
kita inginkan
8. Kemudian pada window w_frame kita buat script untuk membuka window w_home
PART 6 : MELIHAT HASILNYA
Nah, jika semua langkah sudah kita lakukan dengan benar, maka hasil Run dengan menekan Ctrl+R
akan terlihat seperti dibawah ini :