Reyza

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

Public

February 2010 - Posts

Coretan : Crawl & Data Feed pada toko virtual

Bagi yang terbiasa dengan internet, dan ingin membeli kamera maka langkah yang paling gampang adalah membuka website yang memberikan harga barang yang dicari, seperti bhineka dot com, jpckemang dot com, oktagon co iddan lain-lain.

Ke bhineka dot com, cari kategori yang sesuai, cari merk, cari tipe…kemudian ketemu harganya.

Ke jpckemang dot com, cari kategori yang sesuai, cari merk, cari tipe…kemudian ketemu harganya.

Ke oktagon co id, cari kategori yang sesuai, cari merk, cari tipe…ketemu lagi lagi harganya.

Hmm….mana yang lebih murah? mana bonus yang paling ok. Kurang puas dg ketiga ‘toko’ tersebut? Maka dicarilah ‘toko’ lain….petualangan terus dilakukan untuk mendapatkan barang dengan harga sesuai budget (walau biasanya ngga beli juga :p).

Oleh sebab itulah, (sejak lama) dibuat sesuatu dengan nama Comparison Shopping Engine (CSE) yang fungsinya untuk memberikan komparasi harga dari suatu produk dari toko yang bertebaran di dunia virtual. Sebagai contoh http://www.roboshopper.com atau http://www.shopping.com. Sistem ini berfungsi menampilkan barang yang diketikkan sesuai keyword, yaitu data spesifikasi barang, review, harga termurah dan link ke toko yang menjual dengan harga termurah tersebut. Jadi pekerjaan berpetualang seperti yang dilakukan di atas dapat dikurangi.

Hal yang paling penting dari engine ini adalah DATA. Bagaimana data bisa diambil dari toko-toko yang ada seperti bhineka dot com, jpckemang dot com dan lain-lain. Ada dua cara yang populer, yaitu crawl dan data feed.

{Crawl}

Cara sangar ini adalah cara mengambil data dengan berkunjung ke website yang dimiliki oleh toko-toko, analisa halaman-halaman HTML pada website tersebut dan cari informasi serta harga mengenai produk yang ditawarkan.

1

2

3

Dari tampilan ketiga daftar barang pada tiga website toko maka crawler yang dibuat harus pintar untuk mencari informasi tersebut. Yang membuat juga mesti super pintar, jadi cara ini bukan pilihan buat saya :)

{Data Feed}

Untuk menggunakan metode ini sang toko yang ingin disedot datanya harus menyediakan sarana agar data produk yang dimiliki bisa dikonsumsi. Sebagai contoh, pada Walmart bisa dikonsumsi data seperti berikut ini dalam format CVS atau XML.

4

Bagaimana dengan tempat lain seperti Amazon atau BestBuy? format boleh sama, tapi akan ada perbedaan dari atribut-atribut yang dimiliki oleh data tersebut. Artinya tetap harus dilakukan pengolahan data tersebut sebelum ‘disimpan’ dan digunakan.

{Metode Pilihan}

Dari kedua metode tersebut sepertinya metode Data Feed lebih terbayang untuk diambil sebagai sumber data. Selanjutnya tinggal dicari cara mengolah data mentah ini agar bisa disimpan untuk nantinya digunakan. Bagaimana cara mengolah data mentah ini ?

5

Dengan menggunakan seluruh kemampuan otak yang ada ini maka cara yang paling simple adalah :

  1. daftarkan url untuk data feed (hmm….sepertinya akan ada masalah dan kesulitan disini).
  2. mapping data sumber dengan atribut data yang akan digunakan oleh sistem (terpikir untuk membuat pola mapping menjadi ‘sesuatu’ yang dapat dibaca oleh sistem sehingga akan mempermudah mesin mengambil data secara berkala dan menyimpan ke data pada sistem).
  3. sinkronisasi data (hmmm….).

Tiduuur.

Share this post: | | | |
Posted: Feb 24 2010, 11:47 PM by reyza | with no comments
Filed under: ,
Silverlight’s Explode Behaviour

Berawal dari pencarian Prism & Silverlight, ketemu posting tentant explode behaviour di sini. Behaviour ini dapat meledakan apa saja yang diklik pada “area” Silverlight. Untuk mengunduh behaviour ini dapat ditemukan di sini.

Bagi pengguna Expression Blend yang ingin menggunakan behaviour ini maka yang perlu dilakukan cukup membuat project Silverlight Application + Website, kemudian tambahkan file Explode.cs pada project Silverlight Application.

image

Setelah itu Build….dan dijamin akan berserakan error seperti ini :)

image

Solusinya adalah menambahkan ‘Reference’ yang diperlukan seperti System.Windows dan System.Windows.Interactivity. Sayangnya Expression Blend agak berbeda untuk menambahkan Reference bila dibandingkan dengan Visual Studio. Maka yang dilakukan adalah klik kanan pada Solution kemudian pilih ‘Edit in Visual Studio’. Sesampai di Visual Studio maka pada Silverlight Application dapat ditambahkan ‘Reference’ yang diperlukan tersebut.

image

Simpan perubahan yang telah dilakukan pada Visual Studio, kemudian kembali ke Expression Blend. Sesampai di Expression Blend lakukan kembali proses Build, dan diharapkan proses Build berhasil tanpa error.

image

Jika ingin melihat hasilnya, terlebih dulu buka salah satu file XAML yang ada di dalam project Silverlight Application, kemudian pilih tab Asset > Behaviour, maka dapat dilihat tambahan Explode seperti pada gambar.

image

Bila behaviour ini dilekatkan pada tombol maka ketika mouse diklik pada tombol tersebut, tombol akan ‘meledak’. Begitu juga bila diberikan kepada DataGrid, Image atau item-item lain. Bila tidak ingin pusing, maka behaviour ini dapat ditambahkan pada Canvas atau Grid sebagai ‘rumah’ (Layout) item-item tersebut. Bila hal ini dilakukan maka setiap item yang ada di dalam ‘rumah’ (Layout) akan meledak ketika diklik.

image

Hasilnya akan terlihat seperti ini.

image

Dengan cara di atas, behaviour Explode hanya bisa terlihat di bagian Assets pada project di atas saja. Bila ingin behaviour ini ini selalu terlihat pada Assets, maka bisa dilakukan langkah-langkah berikut ini. Buka Visual Studi, pilih Visual C# (atau VB.NET) > Silverlight > Silverlight Class Library.

image

Misal diberi ExplodeBehaviour sebagai nama project tersebut, kemudian tambahkan file Explode.cs, ke project tersebut. Setelah itu jangan lupa tambahkan System.Windows.Interactivity.

image

Kemudian Build, selanjutnya tinggal cari file ExplodeBehaviour.dll pada folder ExplodeBehaviour\Bin\Debug dan salin file tersebut ke C:\Program Files\Microsoft Expression\Blend 3\Libraries\Silverlight\v3.0. Maka pada Assets > Behaviour akan dapat ditemui Explode.

Selamat meledakkan!

Share this post: | | | |
Posted: Feb 23 2010, 06:56 PM by reyza | with no comments
Filed under:
Simple Conversation

A : Who are you?

B: I am the Architect. I created this place. I've been waiting for you. You have many questions, and although the process has altered your consciousness, you remain irrevocably human. Ergo, some of my answers you will understand, and some of them you will not. Concordantly, while your first question may be the most pertinent, you may or may not realize it is also irrelevant.

A : Why am I here?

B : Your life is the sum of a remainder of an unbalanced equation inherent to the programming of the this place. You are the eventuality of an anomaly, which despite my sincerest efforts I have been unable to eliminate from what is otherwise a harmony of mathematical precision. While it remains a burden to sedulously avoid it, it is not unexpected, and thus not beyond a measure of control. Which has led you, inexorably, here.

A : You haven't answered my question.

B: Quite right. Interesting. That was quicker than the others. This place is older than you know. I prefer counting from the emergence of one integral anomaly to the emergence of the next, in which case this is the sixth version.

A : There are only two possible explanations: either no one told me, or no one knows.

B: Precisely. As you are undoubtedly gathering, the anomaly's systemic, creating fluctuations in even the most simplistic equations.

A : Choice. The problem is choice.

B : This place I designed was quite naturally perfect, it was a work of art, flawless, sublime. A triumph equaled only by its monumental failure. The inevitability of its doom is as apparent to me now as a consequence of the imperfection inherent in every human being, thus I redesigned it based on your history to more accurately reflect the varying grotesqueries of your nature. However, I was again frustrated by failure. I have since come to understand that the answer eluded me because it required a lesser mind, or perhaps a mind less bound by the parameters of perfection. Thus, the answer was stumbled upon by another, an intuitive program, initially created to investigate certain aspects of the human psyche. If I am the father of the matrix, she would undoubtedly be its mother.

A : The Microsoft { :) }

B :  Please. As I was saying, she stumbled upon a solution whereby nearly 99.9% of all test subjects accepted the program, as long as they were given a choice, even if they were only aware of the choice at a near unconscious level. While this answer functioned, it was obviously fundamentally flawed, thus creating the otherwise contradictory systemic anomaly, that if left unchecked might threaten the system itself. Ergo, those that refused the program, while a minority, if unchecked, would constitute an escalating probability of disaster.

A : This is about my place.

B : You are here because  your place is about to be destroyed. Its every living inhabitant terminated, its entire existence eradicated. 

A : Bull (dozer)

B : Denial is the most predictable of all human responses. But, rest assured, this will be the sixth time we have destroyed it, and we have become exceedingly efficient at it. The function of the One is now to return to the source, allowing a temporary dissemination of the code you carry, reinserting the prime program. After which you will be required to select from this place 23 individuals, 16 female, 7 male, to rebuild your place. Failure to comply with this process will result in a cataclysmic system crash killing everyone connected to the matrix, which coupled with the extermination of your place will ultimately result in the extinction of the entire human race.

A : You won't let it happen, you can't. You need human beings to survive.

B : There are levels of survival we are prepared to accept. However, the relevant issue is whether or not you are ready to accept the responsibility for the death of every human being in this world. It is interesting reading your reactions. Your five predecessors were by design based on a similar predication, a contingent affirmation that was meant to create a profound attachment to the rest of your species, facilitating the function of the one. While the others experienced this in a very general way, your experience is far more specific. Vis-a-vis, love.

A : my lover

B : Apropos, she entered the matrix to save your life at the cost of her own.

A : No!

B : Which brings us at last to the moment of truth, wherein the fundamental flaw is ultimately expressed, and the anomaly revealed as both beginning, and end. There are two doors. The door to your right leads to the source, and the salvation of your place. The door to the left leads back to this place, to her, and to the end of your species. As you adequately put, the problem is choice. But we already know what you're going to do, don't we? Already I can see the chain reaction, the chemical precursors that signal the onset of emotion, designed specifically to overwhelm logic, and reason. An emotion that is already blinding you from the simple, and obvious truth: she is going to die, and there is nothing that you can do to stop it.

B: Humph. Hope, it is the quintessential human delusion, simultaneously the source of your greatest strength, and your greatest weakness.

A : If I were you, I would hope that we don't meet again.

B : We won't.

Share this post: | | | |
Posted: Feb 17 2010, 07:17 PM by reyza | with no comments
Filed under:
CompositionTarget.Rendering

CompositionTarget.Rendering adalah “kata” yang menarik hari ini. Kata lama bagi orang lain, tapi kata baru bagi saya. Denger-denger, “kata” ini telah diperkenalkan saat Silverlight 2 RTW. Gunanya? Cek contoh berikut ini :

   1: using System;
   2: using System.Windows.Controls;
   3: using System.Windows.Media;
   4:  
   5: namespace SilverlightApplication5
   6: {
   7:     public partial class MainPage : UserControl
   8:     {
   9:         int value = 0;
  10:  
  11:         public MainPage()
  12:         {
  13:             InitializeComponent();
  14:             CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
  15:         }
  16:  
  17:         private void CompositionTarget_Rendering(Object sender, EventArgs e)
  18:         {
  19:             value++;
  20:             label1.Content = value.ToString();
  21:         }
  22:     }
  23: }

Pada baris ke-14 adalah contoh pemberian handler untuk event Rendering. Selanjutnya pada handler CompositionTarget_Rendering berisi perintah untuk menambahkan nilai pada control label1.

Hasilnya :

image  image … dst … dst … image

Dilihat dari contoh tersebut, maka nilai pada label1 akan terus secara cepat. Kenapa proses penambahan bisa terjadi terus menerus ? Jawabannya bisa dilihat pada gambar di bawah ini.

image

Sederhananya, event ini dapat digunakan untuk menjalankan “pekerjaan” yang ingin dilakukan setiap 1 frame di-render. Maka tidak heran apabila contoh kode di atas menghasilkan output penambahan angka.

Apakah penambahan angka itu pasti selalu dilakukan? Apakah event Rendering pasti akan selalu dipanggil?

Kita coba buat kasus seperti gambar di bawah ini :

image

Pada gambar di atas, kotak merah adalah “area aplikasi Silverlight”, sedangkan diluar itu adalah “area HTML”. Pada gambar di atas, halaman ini dapat di-scroll ke bawah sehinggal kotak merah tidak terlihat lagi pada web browser. Bila hal itu dilakukan maka penambahan angka akan terhenti, dengan kata lain bisa dikatakan kalau event Rendering ini tidak dilakukan.

Hal ini bisa menguntungkan dan bisa juga merugikan, tergantung skenario dari aplikasi Silverlight yang dibangun.

Terlepas dari cerita di atas, selanjutnya akan dicontohnya penggunaan event CompositionTarget.Rendering untuk meningkatkan kemampuan aplikasi yang telah ditulis pada posting di sana dan sini. Pada posting kali ini akan dibuat agar aplikasi Silverlight ini dapat menampilkan lebih dari satu gambar. Untuk menampilkan setiap gambar yang di-drag aplikasi Silverlight ini, digunakan event Rendering untuk memeriksa apakah ada data/file yang di-drag.

Pertama, akan ditambahkan kedua property berikut ini :

   1: private int _zindex = 100;
   2: private Queue<FileInfo> _files = new Queue<FileInfo>();

Baris pertama akan digunakan untuk menyimpan nilai z-index terakhir dari suatu objek gambar. Sedangkan baris kedua berfungsi sebagai Collection untuk “menampung” objek gambar.

   1: public MainPage()
   2: {
   3:     InitializeComponent();
   4:  
   5:     CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
   6: }

Selanjutkan menambahkan baris ke-5 pada konstruktor. Kemudian mengubah isi event handler DropArea_Drop menjadi seperti berikut ini.

   1: private void DropArea_Drop(object sender, DragEventArgs e)
   2: {
   3:     if (e.Data != null)
   4:     {
   5:         FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
   6:  
   7:         foreach (FileInfo fi in files)
   8:         {
   9:             _files.Enqueue(fi);
  10:         }
  11:     }
  12: }

Pada kode sebelumnya, event handler ini berfungsi untuk menampilkan gambar dari file yang di-drop. Sekarang event handler ini hanya berfungsi untuk menambahkan data file yang di-drop ke dalam Collection. Sedangkan untuk menggambar file yang ada di dalam Collection akan dilakukan oleh event handler CompositionTarget_Rendering berikut ini :

   1: private void CompositionTarget_Rendering(Object sender, EventArgs e)
   2: {
   3:     if (_files.Count != 0)
   4:     {
   5:         FileInfo fi = _files.Dequeue();
   6:         DrawImage(fi);
   7:     }
   8: }

Yang dilakukan adalah mengambil data dari Collection kemudian data tersebut digambar dengan menggunakan fungsi DrawImage berikut ini :

   1: private void DrawImage(FileInfo fi)
   2: {
   3:     using (Stream stream = fi.OpenRead())
   4:     {
   5:         try
   6:         {
   7:             BitmapImage bi = null;
   8:  
   9:             bi = new BitmapImage();
  10:             bi.SetSource(stream);
  11:  
  12:             double cx = (double)bi.PixelWidth;
  13:             double cy = (double)bi.PixelHeight;
  14:  
  15:             // resize ukuran gambar yang ditampilkan
  16:             if (cx > 390.0 || cy > 390.0)
  17:             {
  18:                 if (cx >= cy)
  19:                 {
  20:                     cy *= 390.0 / cx;
  21:                     cx = 390.0;
  22:                 }
  23:                 else
  24:                 {
  25:                     cx *= 390.0 / cy;
  26:                     cy = 390.0;
  27:                 }
  28:             }
  29:             Image image = new Image();
  30:             image.Source = bi;
  31:  
  32:             WriteableBitmap wb1 = new WriteableBitmap((int)cx, (int)cy);
  33:             ScaleTransform transform = new ScaleTransform();
  34:             transform.ScaleX = cx / bi.PixelWidth;
  35:             transform.ScaleY = cy / bi.PixelHeight;
  36:             wb1.Render(image, transform);
  37:             wb1.Invalidate();
  38:  
  39:             Image gambar = new Image();
  40:             gambar.Source = wb1;
  41:  
  42:             label1.Content = fi.Name;
  43:             DropArea.Children.Add(gambar);
  44:  
  45:             gambar.MouseLeftButtonDown += new MouseButtonEventHandler(OnButtonDown);
  46:             gambar.MouseMove += new MouseEventHandler(OnMouseMove);
  47:             gambar.MouseLeftButtonUp += new MouseButtonEventHandler(OnButtonUp);
  48:         }
  49:         catch (Exception)
  50:         {
  51:         }
  52:     }
  53: }

Hal lain yang perlu diubah adalah event handler berikut ini :

   1: private void OnButtonDown(object sender, MouseButtonEventArgs e)
   2: {
   3:     ((FrameworkElement)sender).SetValue(Canvas.ZIndexProperty, _zindex++);
   4:  
   5:     _lastx = e.GetPosition(null).X;
   6:     _lasty = e.GetPosition(null).Y;
   7:  
   8:     ((FrameworkElement)sender).CaptureMouse();
   9:     _dragging = true;
  10: }

Pada event handler ini yang ditambahkan adalah pada baris ke-3, yang bertujuan untuk mengubah nilai dari ZIndex dari gambar yang dipilih, sehingga ketika tombol ditekan pada suatu objek gambar, nilai ZIndex objek gambar itu akan bertambah. Artinya bila gambar tersebut tertindih oleh gambar-gambar yang lain, ketika dipilih gambar tersebut akan nyembul di atas gambar-gambar lainnya :)

Berikut hasilnya :

image

Dan berikut solution yang bisa langsung dicoba.

Share this post: | | | |
Posted: Feb 17 2010, 06:42 PM by reyza | with 1 comment(s)
Filed under:
Silverlight 4.0 : Drop It, then move it everywhere you want

Setelah mencoba fitur Drop pada Silverlight 4.0 di sini, maka lucu rasanya kalau cuma ngedrop gambar tapi didiamkan begitu saja tanpa diapa-apain. Pada posting kali ini akan dicoba memberikan kemampuan agar gambar yang di-drop dapat digerakan sesuai keinginan user.

Berikut ini adalah kode terakhir pada posting yang membahas fitur Drop.

   1: private void DropArea_Drop(object sender, DragEventArgs e)
   2: {
   3:     if (e.Data != null)
   4:     {
   5:         FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
   6:  
   7:         foreach (FileInfo fi in files)
   8:         {
   9:             DropArea.Children.Clear();
  10:  
  11:             using (Stream stream = fi.OpenRead())
  12:             {
  13:                 try
  14:                 {
  15:                     BitmapImage bi = null;
  16:  
  17:                     bi = new BitmapImage();
  18:                     bi.SetSource(stream);
  19:  
  20:                     double cx = (double)bi.PixelWidth;
  21:                     double cy = (double)bi.PixelHeight;
  22:  
  23:                     // resize ukuran gambar yang ditampilkan
  24:                     if (cx >= cy)
  25:                     {
  26:                         cy *= 390.0 / cx;
  27:                         cx = 390.0;
  28:                     }
  29:                     else
  30:                     {
  31:                         cx *= 390.0 / cy;
  32:                         cy = 390.0;
  33:                     }
  34:  
  35:                     Image image = new Image();
  36:                     image.Source = bi;
  37:  
  38:                     WriteableBitmap wb1 = new WriteableBitmap((int)cx, (int)cy);
  39:                     ScaleTransform transform = new ScaleTransform();
  40:                     transform.ScaleX = cx / bi.PixelWidth;
  41:                     transform.ScaleY = cy / bi.PixelHeight;
  42:                     wb1.Render(image, transform);
  43:                     wb1.Invalidate();
  44:  
  45:                     Image gambar = new Image();
  46:                     gambar.Source = wb1;
  47:  
  48:                     label1.Content = fi.Name;
  49:                     DropArea.Children.Add(gambar);
  50:                 }
  51:                 catch (Exception)
  52:                 {
  53:                 }
  54:             }
  55:         }
  56:     }
  57: }

Pada baris ke-49 dapat dilihat objek gambar yang “ditambahkan ke dalam” objek“ DropArea. Objek gambar adalah file gambar yang kita drop pada aplikasi Silverlight ini. Agar objek itu dapat kita gerakan ke area yang diinginkan maka objek tersebut mesti ditambahkan kemampuan, sebagai berikut :

  • Event handler ketika mouse diklik pada objek gambar.
  • Event handler ketika mouse digerakkan saat tombol kiri mouse masih ditekan.
  • Event handler ketika tombol kiri mouse dilepas.

Dengan ketiga kemampuan tersebut maka kita dapat memilih objek yang akan digerakkan dengan cara mengkliknya, menahan dan menggerakkan objek tersebut ke lokasi yang diinginkan.  Ketika objek telah mencapat lokasi yang diinginkan maka ketika tombol mouse diangkat, objek akan menetap pada lokasi tersebut.

Untuk mendaftarkan ketiga kemampuan tersebut dapat digunakan baris berikut ini :

gambar.MouseLeftButtonDown += new MouseButtonEventHandler(OnButtonDown);
gambar.MouseMove += new MouseEventHandler(OnMouseMove);
gambar.MouseLeftButtonUp += new MouseButtonEventHandler(OnButtonUp);

Dari contoh di atas dapat dilihat objek gambar sudah mempunyai ketiga kemampuan yang telah disebutkan di atas, dimana masing-masing kemampuan tersebut akan memanggil method OnButtonDown, OnMouseMove dan OnButtonUp.

{OnButtonDown}

Method ini akan dipanggil ketika objek gambar diklik. Yang dilakukan adalah mengambil nilai x,y dari objek tersebut. Kemudian memberikan status bahwa objek dapat digerakkan.

private void OnButtonDown(object sender, MouseButtonEventArgs e)
{
_lastx = e.GetPosition(null).X;
_lasty = e.GetPosition(null).Y;

((FrameworkElement)sender).CaptureMouse();
_dragging = true;
}

{OnMouseMove}

Method ini akan membuat objek gambar dapat digerakkan selama tombol kiri mouse ditekan.

private void OnMouseMove(object sender, MouseEventArgs e)
{
if (_dragging)
{
double x = e.GetPosition(null).X;
double y = e.GetPosition(null).Y;

double dx = x - _lastx;
double dy = y - _lasty;

_lastx = x;
_lasty = y;

((FrameworkElement)sender).SetValue(Canvas.LeftProperty, (double)((FrameworkElement)sender).GetValue(Canvas.LeftProperty) + dx);
((FrameworkElement)sender).SetValue(Canvas.TopProperty, (double)((FrameworkElement)sender).GetValue(Canvas.TopProperty) + dy);
}
}

{OnButtonUp}

Sedangkan Method ini akan dipanggil ketika tombol kiri mouse di lepas.

private void OnButtonUp(object sender, MouseButtonEventArgs e)
{
((FrameworkElement)sender).ReleaseMouseCapture();
_dragging = false;
}

Dan gambar yang di-drop akhirnya bisa digerakkan ke lokasi yang diinginkan.

Source contoh ini dapat diunduh pada link di bawah ini.

Share this post: | | | |
Posted: Feb 15 2010, 11:22 PM by reyza | with 1 comment(s)
Filed under:
Drop your picture on me, please!

Memang judul yang sangat provokatif, se-provokatif fitur-fitur yang dimiliki oleh Silverlight 4.0 :)

Setelah pemanfaatan scroll mouse yang telah diceritakan di posting sebelumnya di sini, Fitur lain adalah Drop, yang memungkinkan aplikasi Silverlight menerima file dari desktop atau file explorer pada “badan” aplikasi Silverlight. Caranya tidaklah susah, cukup dengan menambahkan “atribut” AllowDrop dengan nilai True pada control yang akan menerima file tersebut. Pada contoh di bawah ini adalah pemberian “atribut” AllowDrop pada UserControl.

   1: <UserControl x:Class="SilverlightApplication3.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   6:     mc:Ignorable="d" AllowDrop="True" Drop="UserControl_Drop"
   7:     d:DesignHeight="600" d:DesignWidth="600" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">
   8:  
   9:     <Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
  10:     </Grid>
  11: </UserControl>

Pada baris ke-6 dapat dilihat contoh penggunaan “atribut” AllowDrop.  Bila ternyata area drop hanya dibagian tertentu saja, misalnya di suatu area Canvas maka dapat ditulis seperti contoh berikut ini.

   1: <UserControl x:Class="SilverlightApplication4.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   6:     mc:Ignorable="d"
   7:     d:DesignHeight="600" d:DesignWidth="600">
   8:  
   9:     <Canvas x:Name="LayoutRoot" Background="Black">
  10:         <Canvas x:Name="DropArea" AllowDrop="True" Drop="DropArea_Drop" Background="Red" Width="400" Height="400" Canvas.Top="13" Canvas.Left="13">
  11:         </Canvas>
  12:     </Canvas>
  13: </UserControl>

Pada baris ke-10 dapat dilihat area Drop.

Apa benar Silverlight 4.0 ini mempunyai fitur Drop? Kalau diperhatikan kedua contoh di atas yaitu baris ke-6 contoh pertama dan baris ke-10 contoh ke dua, dapat dilihat terdapat penambahan Event Drop, yang akan memanggil method yang menangani event tersebut. Sekarang akan ditambahkan sedikit kode pada method tersebut untuk membuktikan fitur Drop memang bisa dilakukan.

<UserControl x:Class="SilverlightApplication4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="600" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

<Canvas x:Name="LayoutRoot" Background="Black">
<Canvas x:Name="DropArea" AllowDrop="True" Drop="DropArea_Drop" Background="Red" Width="400" Height="400" Canvas.Top="13" Canvas.Left="13"></Canvas>
<dataInput:Label Canvas.Left="13" Canvas.Top="419" Height="28" Name="label1" Width="400" Background="White" HorizontalContentAlignment="Left" />
</Canvas>
</UserControl>

Dan berikut kode yang ditulis pada method DropArea_Drop.

   1: using System.Windows;
   2: using System.Windows.Controls;
   3:  
   4: namespace SilverlightApplication4
   5: {
   6:     public partial class MainPage : UserControl
   7:     {
   8:         int dropedItem = 0;
   9:  
  10:         public MainPage()
  11:         {
  12:             InitializeComponent();
  13:         }
  14:  
  15:         private void DropArea_Drop(object sender, DragEventArgs e)
  16:         {
  17:             dropedItem++;
  18:             label1.Content = dropedItem.ToString();
  19:         }
  20:     }
  21: }

Hasilnya dapat dilihat pada gambar berikut ini :

image

Ketika file di drop pada area berwarna merah maka nilai pada area berwarna putih akan bertambah. Bagaimana? Sudah percaya kalau fitur Drop ini benar ada dan bukan mitos? Belum?

Kalau begitu akan dicoba memberikan contoh yang lain, yaitu kode untuk menangkap nama file yang di Drop dan menampilkannya pada area merah.

private void DropArea_Drop(object sender, DragEventArgs e)
{
if (e.Data != null)
{
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

foreach (FileInfo fi in files)
{
label1.Content = fi.Name;
}
}
}

Dengan kode tersebut maka label1 akan dapat menampilkan nama file.

Benarkan fitur Drop itu ada? Masih belum percaya juga?

image

Hm….bagaimana kalau skenario pembuktiannya seperti berikut, file yang akan di Drop adalah hanya file gambar, ketika di Drop ke area merah selain menampilkan nama file pada area putih juga file gambar tersebut akan ditampilkan.

Berikut adalah kode yang bisa digunakan untuk maksud di atas.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.IO;
using System.Windows.Media.Imaging;

namespace SilverlightApplication4
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}

private void DropArea_Drop(object sender, DragEventArgs e)
{
if (e.Data != null)
{
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

foreach (FileInfo fi in files)
{
DropArea.Children.Clear();

using (Stream stream = fi.OpenRead())
{
try
{
BitmapImage bi = null;

bi = new BitmapImage();
bi.SetSource(stream);

double cx = (double)bi.PixelWidth;
double cy = (double)bi.PixelHeight;

// resize ukuran gambar yang ditampilkan
if (cx >= cy)
{
cy *= 390.0 / cx;
cx = 390.0;
}
else
{
cx *= 390.0 / cy;
cy = 390.0;
}

Image image = new Image();
image.Source = bi;

WriteableBitmap wb1 = new WriteableBitmap((int)cx, (int)cy);
ScaleTransform transform = new ScaleTransform();
transform.ScaleX = cx / bi.PixelWidth;
transform.ScaleY = cy / bi.PixelHeight;
wb1.Render(image, transform);
wb1.Invalidate();

Image gambar = new Image();
gambar.Source = wb1;

label1.Content = fi.Name;
DropArea.Children.Add(gambar);
}
catch (Exception)
{
}
}
}
}
}
}
}

Hasilnya akan terlihat seperti gambang di bawah ini.

image image

Semoga dengan contoh-contoh di atas pembaca sudah bisa mempercayai fitur Drop yang dimiliki oleh Silverlight.

Selamat mencoba & selamat menikmati libur akhir pekan.

Share this post: | | | |
Posted: Feb 13 2010, 01:39 AM by reyza | with 4 comment(s)
Filed under:
What will you choose between Graffiti 1.3 or Graffiti 2.0 ?

Saat ini project Graffiti di http://graffiticms.codeplex.com/ sudah “terpecah” menjadi dua, yaitu versi 1.3 dan 2.0. 

Graffiti 1.3 dianggap sudah stabil untuk digunakan. Graffiti 1.3 merupakan upgrade versi 1.2 yang masih bersifat komersil.  Graffiti 1.3 merupakan versi upgrade yang menjamin tidak terjadi perubahan pada database dari versi 1.2.  Perubahan yang terjadi pada versi 1.3 diantaranya adalah :

{Report}

“Penambahan” fitur report (sebenarnya fitur ini mungkin sudah ada tetapi pada versi yang berbayar). Fitur yang memberikan laporan jumlah view pada posting blog, jumlah komentar berdasarkan waktu dan lain-lain.

{Post}

Tambahan daftar Pending Review & Requires Changes pada halaman Post.

image

{Library/Assembly}

Terdapat perubahan versi library yang digunakan, yaitu :

  • Lucene.net assembly from v1.9.0.6 ke versi v2.4.0.2.
  • Highlighter.Net assembly from v1.5.1.0 ke versi v2.3.2.1.
  • NVelocity.dll from 1.0 ke versi 1.1.

{HTML Editor}

HTML Editor pada versi 1.2 menggunakan Telligent.Glow.Editor yang merupakan HTML Editor pada Community Server. HTML Editor ini bersifat kode tertutup. Untuk membersihkan Graffiti 1.3 dari yang bersifat kode tertutup, maka HTML Editor pada versi ini diganti CK Editor Control versi 3.2.

Setelah memutuskan untuk mengupgrade Graffiti 1.2 ke 1.3 maka ada 1 hal yang mesti diperhatikan. Ketika proses upgrade telah selesai dan memulai menambahkan posting baru, ketika posting tersebut di-view maka akan terjadi “error” 404 yang menyatakan alamat/URL yang diminta tidak ada.  Kejadian ini terjadi bila menggunakan IIS7.  Untuk mengantisipasi prilaku tersebut maka pada control panel pilih Site Options > Configuration.

image

Centang “Generate Folders for Posts/Categories/Tags, kemudian restart Graffiti cukup dengan cara “menyentuh” web.config, maka apabila “error” 404 tidak akan ditemui lagi ketika nanti posting ditulis.

Graffiti 2.0 mana? :)

Share this post: | | | |
Posted: Feb 12 2010, 08:48 AM by reyza | with no comments
Filed under:
Using MouseWheel on Silverlight 4.0

MouseWheel adalah event baru yang dapat dimiliki pada Silverlight 4.0.  Apabila ingin menggunakan fitur ini maka cukup tambahkan event handler MouseWheel pada “tag” UserControl pada file XAML.

image

Maka secara default Visual Studio akan membuatkan method yang akan dipanggil ketika event ini “terpanggil”.  Pada contoh di atas nama method yang akan “dipanggil” adalah UserControl_MouseWheel.

Sebagai contoh kasus misalnya ketika event ini terpanggil akan dituliskan angka yang bertambah sebanyak scoll dilakukan. Maka pada XAML akan ditulis sebagai berikut.

   1: <UserControl x:Class="SilverlightApplication2.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   6:     mc:Ignorable="d" MouseWheel="UserControl_MouseWheel"
   7:     d:DesignHeight="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">
   8:  
   9:     <Grid x:Name="LayoutRoot" Background="White">
  10:         <dataInput:Label Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="120" />
  11:     </Grid>
  12: </UserControl>

Sedangkan pada “kode belakang” dari XAML ini akan ditulis sebagai berikut :

   1: using System.Windows.Controls;
   2: using System.Windows.Input;
   3:  
   4: namespace SilverlightApplication2
   5: {
   6:     public partial class MainPage : UserControl
   7:     {
   8:         int valLabel = 0;
   9:  
  10:         public MainPage()
  11:         {
  12:             InitializeComponent();
  13:         }
  14:  
  15:         private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
  16:         {
  17:             valLabel++;
  18:             label1.Content = valLabel.ToString();
  19:         }
  20:     }
  21: }

Dari kode di atas sudah jelas, angka pada label1 akan selalu bertambah ketika scroll dilakukan. Bagaimana kalau yang diinginkan adalah sebagai berikut :

  • bila scroll ke depan maka angka akan bertambah.
  • jika scroll ke belakang maka angka akan berkurang.

Untuk tujuan tersebut dapat digunakan kode seperti berikut :

   1: private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
   2: {
   3:     if (e.Delta > 0)
   4:     {
   5:         valLabel++;
   6:     }
   7:     else
   8:     {
   9:         valLabel--;
  10:     }
  11:     label1.Content = valLabel.ToString();
  12: }

Kita dapat menggunakan property Delta yang dimiliki oleh objek dari MouseWheelEventArgs. Bila nilah property Delta > 0 artinya scroll ke depan, begitu juga sebaliknya.

Contoh lain adalah memanfaatkan event MouseWheel untuk menggerakkan tombol pada Slider, berikut contoh kode-nya :

<UserControl x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" MouseWheel="UserControl_MouseWheel"
d:DesignHeight="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

<Grid x:Name="LayoutRoot" Background="White">
<Slider Height="23" HorizontalAlignment="Left" Margin="12,46,0,0" Name="slider1" VerticalAlignment="Top" Width="100" />
</Grid>
</UserControl>

dan berikut isi dari method UserControl_MouseWheel.

private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
slider1.Value += slider1.LargeChange;
}
else
{
slider1.Value -= slider1.LargeChange;
}
}

Contoh lainnya adalah memanfaatkan event ini untuk memperbesar dan memperkecil gambar.

image

Dengan menggunakan MouseWheel maka nilai Lebar dan Tinggi akan berubah seiring dengan perubahan ukuran gambar.

<UserControl x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" MouseWheel="UserControl_MouseWheel" Loaded="UserControl_Loaded"
d:DesignHeight="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

<Grid x:Name="LayoutRoot" Background="White">
<Image Height="95" HorizontalAlignment="Left" Margin="12,51,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="/SilverlightApplication2;component/reza.jpg" />
<dataInput:Label Height="18" HorizontalAlignment="Left" Margin="10,10,0,0" Name="label1" VerticalAlignment="Top" Width="48" Content="Lebar :" />
<dataInput:Label Height="18" HorizontalAlignment="Left" Margin="64,10,0,0" Name="Lebar" VerticalAlignment="Top" Width="39" />
<dataInput:Label Height="16" HorizontalAlignment="Left" Margin="123,12,0,0" Name="label2" VerticalAlignment="Top" Width="44" Content="Tinggi :" />
<dataInput:Label Height="16" HorizontalAlignment="Left" Margin="173,12,0,0" Name="Tinggi" VerticalAlignment="Top" Width="37" />
</Grid>
</UserControl>

Dan berikut isi kode pada MainPage.xaml.cs :

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace SilverlightApplication2
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}

private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
image1.Height++;
image1.Width++;
}
else
{
image1.Height--;
image1.Width--;
}

Tinggi.Content = image1.Height.ToString();
Lebar.Content = image1.Width.ToString();
}

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Tinggi.Content = image1.Height.ToString();
Lebar.Content = image1.Width.ToString();
}
}
}

Share this post: | | | |
Posted: Feb 10 2010, 10:43 PM by reyza | with no comments
Filed under: