Reyza

Black Application with ConfirmButtonExtender & ModalPopupExtender

Disebut aplikasi hitam karena warnanya yang serba hitam tentunya, seperti gambar di bawah ini.

Ini cuma permintaan sang empunya ide bukan karena ini :

Walau mungkin sang empunya ide atau sang grafik designernya memang mengisap rokok fav di atas, atau karena ada kenangan dengan 3 mahluk di bawah ini sehingga sampai terobsesi dan terbawa dalam menentukan warna antamuka aplikasi yang diinginkan :)

{ Back to Black Application }

Setelah berkutat dari hari rabu, bermain dengan LINQ yang merupakan barang baru bagi saya dalam aplikasi real akhirnya kelar juga framework kecil-kecilan dengan mengacu dari buku LINQ in Action Chapter 13 (seperti saran beberapa teman, thx to om rully dan om tatan) dan juga dari buku kecil Membangun Sendiri Aplikasi Perpustaan yang didapat dari PCMedia. Framework kecil-kecilan ala framework PHP yang dulu sering digunakan. Artinya para pengguna framework PHP yang dulu saya buat tidak akan kesulitan menggunakan ini. Tinggal membuat generator untuk membuat DAO untuk table yang akan digunakan. Untuk generator ini engine-nya menggunakan PHP, dan tentunya hasilnya pasti adalah code C# :) Males membuat versi ASP.NET-nya { males untuk waktu sekarang ini. }

Awal suatu aplikasi biasanya adalah Data Reference atau Data Master Management, dengan operasi CRUD. Data master biasanya hanya terdiri atas 2 field pada tabel sehingga sering bingun untuk menentukan bentuk antarmuka yang cocok. Normalnya, ada antarmuka yang menampilkan daftar data seperti gambar di atas, dan juga form inputan untuk operasi insert atau update. Tetapi karena pada form hanya akan menampilkan dua kontrol input maka aplikasi akan terlihat ruang kosong.

Untuk itu biasanya saya menggunakan komponent Dialog yang ada pada WebUI for ASP.NET dari ComponentArt. Banyak pilihan selain ComponentArt, bisa menggunakan komponen milik Telerik atau WebUI milik Intersoft. Tetapi sampai saat ini yang pernah dicoba untuk aplikasi real adalah milih ComponentArt. Dari ketiga komponen itu ada 1 persamaan, yaitu sama-sama berbayar dengan harga yang lumayan.

Alternatifnya adalah menggunakan AjaxControlToolkit, gratis. Ada dua control yang digunakan yaitu Confirm Button dan Modal Popup.

{ Confirm Button }

Kontrol ini membuat saat suatu tombol diklik maka aksi dari tombol itu akan dihentikan sementara, dan akan ditampilkan dialog konfirmasi dan ketika tombol OK dipilih maka baru aksi dari tombol tadi akan dieksekusi. Ada dua pilihan antarmuka yang bisa dipilih yaitu, dialog dari browser seperti pada gambar di bawah ini.

Selain itu juga dapat dipilih antarmuka seperti gambar berikut, antarmuka ini memanfaatkan layer dengan memanggil kontrol Modal Popup.

Caranya? Yang pasti website or web project sudah AJAX Enabled, setelah itu tinggal gunakan kode seperti di bawah ini :

<form id="form1" runat="server">
<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
    <asp:Button ID="Button" runat="server" Text="Click Me" />
    <br />
    
    <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" 
        runat="server" 
        TargetControlID="Button"
        OnClientCancel="cancelClick" 
        DisplayModalPopupID="ModalPopupExtender1" />
    <br />
    
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" 
        runat="server" TargetControlID="Button"
        PopupControlID="PNL" 
        OkControlID="ButtonOk" 
        CancelControlID="ButtonCancel" 
        BackgroundCssClass="modalBackground" />
    
    <asp:Panel ID="PNL" runat="server" 
        Style="display: none; width: 200px; background-color: White;
        border-width: 2px; border-color: Black; border-style: solid; 
        padding: 20px;">
        Are you sure you want to click the Button?
        <br />
        <br />
        <div style="text-align: right;">
            <asp:Button ID="ButtonOk" runat="server" Text="OK" />
            <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
        </div>
    </asp:Panel>
</div>
</form>

Perhatikan button dengan ID=Button akan digunakan sebagai TargetControlID pada kontrol ConfirmButtonExtender, kemudian kontrol ini juga akan menentukan ID dari kontrol ModalPopupExtender yang akan digunakan. Pada kontrol ModalPopupExtender ditentukan tombol yang akan berperan sebagai tombol OK dan Cancel. Selain itu juga ditentukan ID dari kontrol Panel yang akan digunakan untuk menampilkan pesan konfirmasi. Hasilkan akan seperti gambar di atas.

Antarmuka dialog konfirmasi ini bebas dimodifikasi, contohnya seperti yang saya buat seperti pada gambar di bawah ini.

{ Modal Popup }

Sebagai pengganti kontrol Dialog dari ComponentArt, digunakan kontrol ModalPopupExtender.

ModalPopupExtender di atas berfungsi sebagai form insert, sedangkah gambar dibawah ini berfungsi sebagai detail dari record yang dipilih.

Dan berikut ini adalah ModalPopupExtender yang berfungsi sebagai form update dari data yang dipilih.

1 ModalPopupExtender yang dimanipulasi dengan ASP.NET Ajax agar title dari header, isi dari dialog dan tombol-tombol yang ditampilkan bisa disesuikan dengan fungsinya. Konten body yang berubah-ubah cukup memanfaatkan MultiView yang nanti akan dikontrol dari sisi server mana yang harus ditampilkan.

Awalnya saya kira prilaku ModalPopupExtender ini sama dengan kontrol Dialog milik ComponetArt, sehingga dapat digunakan sebagai form di atas. Tetapi ternyata perlu modifikasi cara penggunaan agar lancar digunakan. Jangan gunakan cara yang di ajarkan pada samplenya secara keseluruhan. Kalau tidak maka banyak prilaku-prilaku aneh yang terjadi, biasanya error yang terjadi ketika UpdatePanel dari yang ada pada kontrol ModalPopupExtender di update.

• kontrol yang tidak mau ditutup.
• kontrol tidak bisa ditampilkan saat tombol diklik, keluar pesan error Javascript.
• tidak ada layar tranparant saat ModalPopupExtender ditampilkan, sehingga mouse dapat mengklik kontrol-kontrol dibelakang dialog.
• dan ada beberapa error lagi, lupa apa saja.

Solusinya adalah :

• jangan menampilkan kontrol ModalPopupExtender ini via client, tetapi panggil dari sisi server. Artinya TargetControlID tidak perlu menunjuk ke tombol yang akan menampilkan dialog ini. Bila TargetControlID tidak digunakan maka akan terjadi error tentunya, jadi tunjuk saja kontrol lain dan sembunyikan kontrol itu :)
• jangan menggunakan property OkControlID dan CancelControlID, untuk proses menghilangkan dialog juga lakukan dari sisi server.

Nah sekarang kontrol ModalPopupExtender dapat digunakan seindah menggunakan kontrol Dialog milik ComponetArt, indah karena berfungsi sama dan gratis.

Share this post: | | | |