Tutorial ASP.Net dengan Ext.NEt : Memulai Ext.Net di ASP.Net

Hai Sobat, pada sharing kali ini, dunia edi ingin berbagi tentang Ext.Net. Sebelum kita memulai belajar Ext.net, kita perlu tahu apa itu Ext.net, menurut dari web resmi ext.net adalah :

Ext.NET is an open source ASP.NET (WebForm + MVC) component framework integrating the cross-browser Sencha Ext JS JavaScript Library.

Jadi, Ext.Net adalah porting dari Ext JS untuk .Net Programming, sebenarnya Ext JS juga bisa digunakan dalam .Net programming, namun Ext.Net ini mempermudah para developer karena sudah dibuatkan kontrol yang dapat di drag langsung ke webform.

Nah sekian dulu penjelasannya, berikutnya kita masuk ke prakteknya. Hal yang perlu disiapkan adalah :

1. IDE untuk .Net Programming, disini saya menggunakan Visual Studio 2010
2.  Ext.Net,yang dapat didownload pada website resminya download ext.net, pada sharing kali ini saya menggunakan ext.net versi 2.0.0.rc2 community edition.
3. Extract ext.net yang didownload, didalamnya ada Ext.net.dll.
4. Saya menggunakan ASP.Net dengan code behind C#.

Nah, setelah semua tool yang digunakan siap, kita mulai saja.

1. Buat sebuah project, pilih visual C# => web, kemudian pilih ASP.Net Web Application
2. Beri nama project ini ext.net
3. Pada jendela ToolBox, biasanya ada di sisi kiri layar atau jika tidak ada bisa tekan Ctrl+Alt+X, klik kanan toolbox kemudian pilih Add Tab, beri nama Ext.Net
4. Klik kanan Toolbox Ext.Net, pilih Choose Items.
5. Pada .Net Framework Components, klik tombol Browse, cari Ext.net.dll lalu klik OK
6. Sekarang pada ToolBox Ext.Net sudah terisi komponen komponen Ext.net.
7. Langkah selanjutnya adalah membuat sebuah webform, beri nama webform1.aspx
8. Tambahkan sebuah ResourceManager ke webform1.aspx ( ResourceManager bisa ditemukan di ToolBox Ext.net). ResourceManager ini dibutuhkan oleh setiap komponen Ext.net.
9. Tambahkan Ext:Button, atur propertynya seperti ini :
<ext:Button ID="Button1" runat="server" Text="Direct Event"> <DirectEvents> <Click OnEvent="Button1_Click" /> </DirectEvents> </ext:Button> Button1 menggunakan metode DirectEvents untuk melakukan aksinya.
10. Kemudian, kita berpindah pada Code Behind dari Webform1.aspx, buka webform1.aspx.cs atau dengan cara tekan tombol F7 atau bisa juga dengan cara pilih menu View => Code.
11. Pada Jendela Code Behind, pada bagian deklarasi using (paling atas) tambahkan using Ext.Net;  
12. Kemudian, tambahkan method Button1_Click seperti berikut ini
protected void Button1_Click(Object sender, DirectEventArgs e) { X.Msg.Notify("DirectEvent", DateTime.Now.ToLongTimeString()).Show(); }
13. Kembali lagi ke webform1.aspx dengan cara tekan tombo Shift+F7 atau pilih menu View => Designer.
14. Tambahkan sebuah Ext:Button lagi kedalam Webform1.aspx, atur propertinya seperti berikut ini.
<ext:Button ID="Button2" runat="server" Text="Direct Method"> <Listeners> <Click Handler="Ext.net.DirectMethods.DoSomething();" /> </Listeners> </ext:Button>
15. Kemudian, tambahkan Method DoSomething di Code Behind (Tekan F7 untuk berpindah ke jendela Code Behind.
[DirectMethod] public void DoSomething() { X.Msg.Notify("DirectMethod", "Akhirnya bisa Ext.Net").Show(); }
16.  Setelah selesai, buka Web.Config pada solution Explorer, tambahkan script berikut ini.
<httpModules> <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" /> </httpModules>   Letakkan script diatas diantara tag system.web
17. Jalankan Project dengan Tekan F5 atau pilih menu Debug => Start Debugging

Nah, sudah jadi deh belajar ext.net di ASP.Net, sharing kali ini masih sangat sederhana, namun bisa sobat kembangkan dengan mempelajari teknologi Ext.Net.Oh ya, maaf ya kalo sharing kali ini ga ada screenshitnya, lagi males screenshoot nih, hehe,tapi tenang sobat, project yang digunakan dalam sharing kali ini bisa di download di mediafire