Membuat Sliding Window dengan MDI Frame

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.
  1. Layout object, lalu untuk memudahkan memahami konsep dalam model sliding menu ini, berikut beberapa definisi yang perlu di ketahui :
    • Aplikasi menggunakan model MDI (Multiple Document Interface) sebagai Frame Window yang akan berfungsi sebagai container dan module loader
    • Sliding Menu merupakan Sheet Window yang akan di gerakkan oleh timer object
    • Semua fungsi dan cara pemanggilan akan disematkan pada window object sehingga tidak diperlukan scripting yang rumit.

Berikut gambaran struktur layout object nya :

  1. 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)
NoNameJenis ObjectCatatan
1w_frameWindow object, tipe MDIFrame yang akan berfungsi sebagai container
2m_frameMenu objectWajib ada untuk window bertipe MDI
3w_sheetWindow object, tipe pop up, no border, no title barAkan digunakans sebagai ancestor
4t_slidew_sheet Timing objectDibuat sebagai window object, lebih fleksibel dibanding menggunakan timer event
5m_sheetMenu object inherit dari m_frame untuk disematkan pada w_sheetMemungkinkan untuk mengaktifkan shortcut keyboard untuk akses menu item
6u_titlebarStandar datawindow user object yangdiletakkan sebagai title bar di window sheet
7dwo_titlebarDatawindow object untuk u_titlebar 
8w_homeWindow object yang di inherit dari w_sheetw_home akan menjadi concrete object sebagai contoh modul yang dapat digunakan sebagai entri point
9w_featureWindow object  yang di inherit dari w_sheetw_feature akan menjadi concrete object sebagai contoh modul yang akan di panggil melalui sliding menu window
10w_slidingmenuWindow object yang di inherit dari w_sheetWindow ini yang akan menjadi contoh sliding menu

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
  1. 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.
  1. 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
  1. 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

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.

  1. 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
  1. Buat menu m_sheet inherit dari m_frame untuk disematkan pada w_sheet yang akan dibuat berikut nya.
  1. 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

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

  1. Buat satu datawindow object external dengan satu column title dengan tipe string(50) yang akan kita gunakan sebagai pengganti titlebar pada window sheet.

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.

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 :

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 nantinya 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. 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. 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
  1. Object berikutnya di inherit dari w_sheet lalu simpan menjadi w_home
  1. 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
  1. 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. Application Object : pbsliding, sebagai entri point, kita akan membuka window w_frame dari event open dan menuliskan script nya seperti dibawah ini
  1. 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

  1. 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

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

  1. Selanjutnya sebelum membuat script untuk w_sheet menjadi sliding window, berikut beberapa logika pemrograman yang akan dbuat :
  • 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
  • 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
  • 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

  • Window w_sheet akan digerakkan oleh timer ke arah yang di tentukan.
  • 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
  • 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

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

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

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

  1. 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)

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. 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

  1. Juga pada window w_feature sama dengan w_home, kita atur properti nya

Tambahkan script pada dw_title untuk mengganti isi column menjadi nama Window yang kita inginkan

  1. 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 :

Demikian langkah-langkah untuk membuat sliding window pada PowerBuilder, semoga bermanfaat

untuk download source code nya anda bisa klik link dibawah ini :

0 comments on “Membuat Sliding Window dengan MDI FrameAdd yours →

Tinggalkan Balasan

Translate ▲
%d blogger menyukai ini: