Official StoreTekan tombol di atas untuk membeli semua alat dan bahan eksperimen di web ini

Trik Supaya RaExtWindow Raudus Mengikuti Dimensi Web Browser

Sepertinya halnya membuat aplikasi desktop dengan Delphi, kadang kita perlu mengeset Form/Panel agar menutupi seluruh window yang aktif (parent). Untuk keperluan ini dalam Delphi (versi aplikasi desktop) dapat diselesaikan dengan mengeset properti ‘Align’ agar bernilai AlClient’. Misalkan ada sebuah komponen Panel dalam sebuah Form sebagai kontainer/parent utama. Jika ingin diatur supaya Panel menutupi seluruh Form, maka cukup mengeset properti ‘Align’ milik komponen Panel menjadi bernilai ‘AlClient’. Dengan demikian jika kita mengubah dimensi/ukuran Form (resize), maka otomatis ukuran Panel akan berubah juga mengikuti ukuran Form sebagai parent-nya. Demikianlah kurang lebih fungsi properti ‘Align’ dalam komponen Panel.

Bagaimana halnya jika hal yang sama kita terapkan di aplikasi web menggunakan Delphi dan Raudus? Ternyata tidak semudah seperti yang telah dijelaskan sebelumnya, karena properti ‘Align’ tidak ada dalam kontainer RaForm maupun (misalnya) RaExtWindow. Bagaimana cara mengatasinya? Berikut ini adalah trik-triknya supaya seakan-akan komponen RaExtWindow memiliki properti ‘Align:=AlClient’ agar dimensi RaExtWindow selalu mengikuti dimensi web browser.

    1. Buat project aplikasi web baru melalui menu File | New | Other | Raudus | RaApplication. Saya asumsikan Anda sudah menginstal framework Raudus di Delphi 7 Anda. Jika belum, Anda dapat mendapatkan CD-nya disini atau download langsung dari situs resminya (http://raudus.com).
    2. Ambil komponen visual RaExtWindow1, RaExtLabel1, RaExtLabel2 dan RaExtButton2 di Tab RaExt dari Component Pallete ke dalam RaForm1. Atur peletakannya seperti contoh pada gambar di bawah (sebenarnya sih terserah saja). 
    3. Ambil komponen netral RaApplicationEvents1 dari Tab RaExt ke dalam RaForm1. Sesuai namanya, komponen ini menyediakan event khusus untuk level aplikasi (web) yaitu OnBoot dan OnScreenResize. Nah, event yang disebut terakhir inilah yang akan dimanfaatkan untuk memberikan efek supaya dimensi RaExtWindow mengikuti dimensi web browser.
    4. Double click event OnScreenResize milik komponen RaApplicationEvents melalui Object Inspector dan isikan kode program sebagai berikut :

Fungsi Application.ScreenWidth dan Application.ScreenHeight adalah untuk mendeteksi lebar dan tinggi web browser client dan sekaligus mengeset nilai lebar dan tinggi RaExtWindow sesuai dengan nilai ini setelah dikurangi dengan nilai 40 (Anda dapat mengubah-ubah sendiri nilai ini). Karena 4 baris kode di atas diletakkan di event OnScreenResize milik komponen RaApplicationEvents, maka setiap ada event web browser berubah dimensinya (screen resize) makan dimensi RaExtWindow juga akan berubah. Dengan demikian efeknya adalah sama dengan properti ‘Align := AlClient’ pada pemrograman aplikasi desktop biasa.

 

Demikian tutorial kali ini semoga membantu bagi yang sedang membutuhkan. Ohya, jangan lupa menaruh kode pada point D di atas di event onBoot juga agar setiap aplikasi web running pertama kali ukuran RaExtWindow langsung mengikuti dimensi web browser.

Incoming search terms:

screenwidth raudus delphi, deteksi ukuran layar raudus delphi, membuat aplikasi web dengan firebird, mengambil data raextdb pada raudus, raudus dan mysql, raudus raextwindows, Raudus theme
Tags:
9 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

error: Content is protected !!