Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

March 2008 - Posts

Black Application with ConfirmButtonExtender & ModalPopupExtender

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

Capture

Ini cuma permintaan sang empunya ide bukan karena ini :

black

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.

geeks1

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

geeks2

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.

geek3

{ Modal Popup }

Sebagai pengganti kontrol Dialog dari ComponentArt, digunakan kontrol ModalPopupExtender.

geek4

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

 geek5

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

geek6

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: | | | |
CS 2008 Beta 2 with Silverlight Media Player

Kalau kemarin Community Server 2008 Beta 1 keluar hampir berbarengan dengan Silverlight Beta 1, maka sekarang Community Server 2008 Beta 2 sudah bisa di-unduh di-sini.

Dari sisi teknologi, sepertinya CS2008 tidak mempunyai perubahan yang signifikan, tidak seperti saat perubahan antara CS 2.1 ke CS2007. Pada CS2008 perubahan yang terlihat adalah disisi fasilitas, yaitu :

  • Fasilitas Social Network layaknya Friendster dan semacamnya.
  • Media support, ini yang baru yang belum saya lihat di CS2008 Beta 1. Media support disini adalah player untuk video dengan menggunakan Silverlight dan juga sudah support YouTube. Hmmm....di CS2007, saya harus membuat ini sendiri dengan memanfaatkan CSModule 2.1 yang sudah ada. Silverlight Media Player-nya yang asik untuk dilihat, kalau dahulu di CS2007 mesti buat sendiri agar bisa menampilkan video dengan Silverlight. Kereeeeen.
  • Widget support, di-blog bisa menggunakan widget atau gadget dari Google, WidgetBox dan lain-lain. Mengikuti trend Facebook sepertinya.
  • Activity, CS2008 memiliki fasilitas koloborasi antar user seperti pencatatan aktivitas dan pengumuman dan lain-lain. Hmmm...sepertinya ini bisa dimanfaatkan untuk calendar of event. Di CS2007 mesti membuat sendiri seperti ini.

Di atas adalah gambar kemampuan CS2008 yang support media dari YouTube.

Yang pasti CS2008 masih mempunyai konsep yang sama untuk pembuatan Theme, jadi tidak perlu meng-update isi kepala. Tetapi sekarang, selain Theme untuk main site dan blog, juga ada theme untuk group, jadi ada 3 theme yang harus dibuat.

Di bawah ini adalah gambar fasilitas kolaborasi seperti aktivitas, pengumuman dan komentar.

 

* sumber : communityserver.org

 

Bagaimana? Ada yang tertarik untuk fokus dan mendalami Community Server, yang nantinya Community Server 2008 yang akan berharga $5000 ini? Sepertinya makin banyak aja yang lunglai mendengar harga CS2008 sekarang. Tetapi itu sangat menguntungkan buat saya dan teman-teman yang fokus di Community Server, artinya kami bisa menawarkan harga di bawah $5000 untuk memberikan solusi dan layanan yang berhubungan dengan Community Server.

Share this post: | | | |
Long weekend, idol, maps & live programming?

Seperti biasa apabila long weekend, bandung akan dibanjir oleh pendatang dari Jakarta, apa mereka tidak pusing .. sudah tiap hari bermacet-macet di Jakarta, eh di bandung juga bermacet-macet lagi. Seperti biasa juga, jangan keluar dari tempat tinggal, jangan mencoba melewati jalan *** dan lebih mending melakukan kegiatan di kamar. Biasanya dengan menonton dvd, tetapi sudah lebih dari 3 minggu ini para penjual cd/dvd ilegal menghilang di bandung. entah kemana, kecuali 'yang satu' itu, tapi itu pun tidak ada film baru.

Minggu ini kepala dipenuhkan dengan peta, long+lat, google map, virtual earth makanya bacaan tidak jauh dari dua buku dibawah ini :

geeks1 geeks2

Sayang detail data (detail peta dan foto angkasa) milih Virtual Earth masih kalah dengan Google Map. Google Maps dipadukan dengan perangkat GPS sungguh menarik. Sayang penggunaannya tidak bisa dilanjutkan karena ternyata aplikasinya akan berjalan di VPN, jadi ambil yang simple saja. Tinggal menggunakan file dari Map Info atau ArcView (CMIIW) dan gunakan SharpMap. SharpMap bukan barang baru tentunya dan untuk mendapatkannya tinggal mengunjungi CodePlex, yang pasti SharpMap sudah mempunyai feature AJAX untuk proses zooming ataupun drag & drop untuk menggeser peta. Akan menjadi apakah ini nanti...just stay tune at this frequency :)

Yang menarik lainnya adalah Geeks Portal, makin ramai .. artinya makin banyak ilmu yang saya dapatkan disini. Ada beberapa yang posting yang menarik yaitu Singularity dan Developer Idol (keduanya posting Pak Risman). Singularity, menarik karena dapat diinstal pada hardware yang 'berkapasitas kecil', tapi rasanya saat ini belum waktunya mencoba atau 'nge-build' dan menginstall di Virtual PC, mesti fokus ke 'satu titik' dulu.

Developer Idol? Karena posting ini akhirnya membeli dan membaca buku kecil untuk membangun library system yang simple, cocok buat teman-teman dan anak didik yang baru belajar .NET, jadi tidak perlu repot untuk membuat modul lagi, tinggal suruh coba sendiri :) Kasus Sistem Perpustakaan inipun adalah contoh kasus simple karena orang pasti tahu apa itu perpustakaan, menarik karena memang banyak hal yang bisa digunakan untuk membuat sistem ini lebih menarik.

Perpustakaan 'klasik' biasanya hanya akan menangani buku, mengelompokkan buku tersebut dalam suatu kategori, ada peminjam buku dan lain-lain. Bagaimana kalau yang disimpan di perpustakaan tidak hanya buku saja, tetapi file-file multimedia dan juga buku digital yang dapat berupa PDF, Word atau tipe lain yang bisa di-index ?

Buku digital, artinya memungkinkan untuk upload buku ini pada sistem dan sistem perlu melakukan indexing konten buku tersebut. Untuk apa? ini akan sangat membantu peara pengunjung perpustakaan untuk mencari apa yang dia inginkan dengan cukup mengetikkan keyword saja, dan itu tidak hanya meliputi judul dan daftar isi saja, tetapi juga sampai konten buku tersebut. Untuk engine indexing ini dapat digunakan Lucene.NET, hasil porting Lucene dari project Apache. Dulu pernah baca kalimat sesumbar di web http://www.dotlucene.net bahwa Lucene dapat melakukan indexing file-file yang total ukurannya 4GB hanya dalam waktu tidak sampai 1 detik. CMIIW. Sekarang untuk mendapatkan Lucene dapat mengunjungi url berikut http://incubator.apache.org/lucene.net.

Bagaimana dengan buku yang di-scan dan menghasilkan output berupa image? Untuk ini dapat dibuat menarik dengan memanfaatkan Silverlight yaitu gambar ditampilkan berupa buku asli yang bisa dibolak balik. Akan menarik lagi bila perpustaan tersebut juga mengelola video atau audio, maka kembali Silverlight dapat digunakan untuk itu.

Ada ide yang lain lagi?

Share this post: | | | |
Theme for WSS-ID

screenshot 

Jam 2.53 pagi, themes terbaru untuk WSS-ID sudah kelar walau belum sempurna.

Akan ada tambahan themes blog khusus untuk blog dengan menggunakan video Silverlight dan juga halaman depan seperti gambar di bawah ini.

capture

Tenang....yang ngedesign grafiknya bukan saya, cuma tukang bikin theme doang. :)

Saatnya tidur.

Share this post: | | | |
Posted: Mar 19 2008, 03:03 AM by reyza | with 1 comment(s)
Filed under:
Theme untuk Project Otak

Rencananya sarana penyimpanan buku-buku dari Project Otak akan memanfaatkan Community Server. Themesnya sudah kelar sejak beberapa minggu yang lalu dengan antar muka seperti berikut :

otakproject1

Di atas adalah halaman depan sedangkan halaman untuk blog, forum, photos dan download akan terlihat seperti berikut dibawah ini :

 

otakproject2

Memang banyak gambar, semoga tidak berat. hmm...nice design, isnt it? (yang pasti bukan hasil design saya, di design oleh designer grafik simpanan Pak Naren nih). Dapat dipastikan tidak akan ada theme community server seunik ini di dunia [narsis mode on].

Sebagai catatan theme di atas baru saya test di IE7 dan Firefox, belum di test di web browser selain itu.

Sebenarnya ada rencana juga untuk membuat theme untuk Geeks, dengan design seperti berikut :

geeks

Ini juga bukan design saya, ini bantuan dari teman teman di Sangkuriang Studio (salah satu design web mereka yang lain juga telah ditampilkan di JCC tanggal 4 Maret kemarin..ayo tebak!)

Ada komentar atau masukan untuk design Geeks?

Share this post: | | | |
Silverlight 2.0 Beta 1, Available Now!

Seperti perkiraan, karena tanggal 5 - 7 Maret ada event MIX di Las Vegas, tentang Web Technology tentunya maka hari ini, tepatnya beberapa jam yang lalu Silverlight 2.0 Beta 1 sudah bisa dinikmati =P~

Capture

Apa saya yang sudah bisa di download?

  • runtime Silverlight 2.0 Beta 1.
  • Microsoft Silverlight Tools Beta 1 for Visual Studio 2008.
  • HOL.
  • Tutorial.
  • Video.
  • etc.

Seperti biasanya, untuk mendapatkan semuanya tinggal mengunjungi situs resmi Silverlight. Atau tinggal mendownload file sebesar 50an MB yang di dalamnya sudah terdapat runtime, SDK biasanya dokumen-dokumen dapat ditemui pula di sini, dan template untuk project pada VS 2008. File ini bisa di download di sini.

Apa yang menarik dari Silverlight 2 Beta 1 ini? Bisa dilihat pada gambar berikut ini :

Capture1

Dari hal-hal baru di atas, ada yg aneh...yaitu LINQ to Objects. Janjinya dulu yang keluar adalah LINQ to XML, mungkin perlu waktu untuk menunggu ini keluar. Tetapi yang menyenangkan adalah control-control seperti TextBox, RadioButton, Slider, Calendar, DatePicker yang siap membuat ngiler. Semoga ini juga membuat ngiler teman2 yang sudah sering bermain dengan Flash (di Flash, secara default tidak mempunya control2 seperti ini CMIIW, dari pengalaman membuat CD peta Indonesia interaktif untuk SD di seluruh Indonesia beberapa bulan yang lalu). Tetapi kembali ada 1 pertanyaan, apakah motion path sudah ada di Silverlight 2 Beta 1 ini? Kalau di WPF untuk windows form memang sudah ada. Semoga di Beta 1 ini feature itu sudah ada. [download baru menujukan angka 4%, masih menunggu 3 jam sampai selesai :( hmm..i can't wait]

Bukan hanya itu ternyata, tetapi Expression Studio 2 juga diluncurkan, artinya sekarang sudah bisa di download Blend 2.5 yang digembor2kan sudah support Silverlight 2 Beta 1 ini.

Share this post: | | | |
Posted: Mar 06 2008, 01:45 PM by reyza | with 6 comment(s)
Filed under:
Simple Question : Heroes Logo

This is a simple question about {Heroes}'s logo. Why should the logo look like this?

hero_csharp

Is possible the logo changed to be like this?

hero_vb 

Just curious :)

Share this post: | | | |
Posted: Mar 05 2008, 09:22 AM by reyza | with 8 comment(s)
Filed under: