Reyza

Put Right Click Feature on Silverlight’s Control

2010-03-09T00:17:00Z

Setelah gambar sudah bisa di drop dan ditampilkan pada badan aplikasi Silverlight kemudian digerak-gerakan, mungkin ada yang ingin melakukan suatu aksi pada gambar yang dipilih. Karena aksinya dilakukan pada objek gambar yang dipilih dan pilihan aksi yang dapat dilakukan ada kemungkinan lebih dari 1 aksi, maka cara yang paling elegan adalah menampilkan menu atau dialog didekat objek gambar tersebut. Karena klik tombol kiri mouse telah digunakan untuk proses drag-drop, maka untuk memunculkan pilihan aksi terpaksa harus menggunakan klik tombol kanan mouse .

Untungnya Silverlight 4 sudah memberikan event untuk klik tombol kanan mouse, yaitu :

MouseRightButtonDown.
MouseRightButtonUp.

Sebelum menambahkan fitur ini ke kode sebelumnya, maka ada baiknya dibuat contoh yang sederhana dulu seperti di bawah ini.

<UserControl x:Class="RightClickApp.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="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

    <Grid x:Name="LayoutRoot" Background="White" MouseRightButtonDown="LayoutRoot_MouseRightButtonDown">
        <dataInput:Label Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="120" />
    </Grid>
</UserControl>

dan ini :

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

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

        private void LayoutRoot_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            label1.Content = "Right mouse button clicked";
        }
    }
}

Hmm….kode di atas, sepertinya terlalu sederhana, nenek juga bisa bikin seperti di atas kalau bisa menggunakan VS2010 :)

Bagaimana kalau contoh berikut ini. Yang dilakukan pertama adalah menyiapkan dialog yang akan menjadi rumah aksi-aksi yang dapat dipilih user.

Untuk membuat dialog saat gambar diklik kanan dengan mouse seperti gambar di bawah ini, maka perlu ditambahkan 2 class Dialog.cs dan SimpleDialog.cs.

File Dialog.cs merupakan hasil rekayasa ulang dari class yang terdapat pada posting ini. Berikut adalah isi dari class ini :

/*
 * Dialog class code provided by Dave Relyea
 * Original information and background can be found
 * here: http://blogs.msdn.com/devdave/archive/2008/06/08/using-popup-to-create-a-dialog-class.aspx
 * */
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace RightClickApp.Controls
{
    public abstract class Dialog
    {
        private Point _location;
        private bool _isShowing;
        private Popup _popup;
        private Grid _grid;
        private Canvas _canvas;
        private FrameworkElement _content;

        public void Show(Point location)
        {
            if (_isShowing)
                throw new InvalidOperationException();

            _isShowing = true;
            _location = location;
            EnsurePopup();
            _popup.IsOpen = true;
        }

        public void Close()
        {
            _isShowing = false;

            if (_popup != null)
            {
                _popup.IsOpen = false;
            }
        }

        protected abstract FrameworkElement GetContent();

        protected virtual void OnClickOutside() { }

        private void EnsurePopup()
        {
            if (_popup != null)
                return;

            _popup = new Popup();
            _grid = new Grid();

            _popup.Child = _grid;

            _canvas = new Canvas();

            _canvas.MouseLeftButtonDown += (sender, args) => { OnClickOutside(); };
            _canvas.MouseRightButtonDown += (sender, args) => { args.Handled = true; OnClickOutside(); };

            _canvas.Background = new SolidColorBrush(Colors.Transparent);

            _grid.Children.Add(_canvas);

            _content = GetContent();

            _content.HorizontalAlignment = HorizontalAlignment.Left;
            _content.VerticalAlignment = VerticalAlignment.Top;
            _content.Margin = new Thickness(_location.X, _location.Y, 0, 0);


            _grid.Children.Add(_content);

            UpdateSize();
        }

        private void OnPluginSizeChanged(object sender, EventArgs e)
        {
            UpdateSize();
        }

        private void UpdateSize()
        {
            _grid.Width = Application.Current.Host.Content.ActualWidth;
            _grid.Height = Application.Current.Host.Content.ActualHeight;

            if (_canvas != null)
            {
                _canvas.Width = _grid.Width;
                _canvas.Height = _grid.Height;
            }
        }
    }
}

Sedangkan class SimpleDialog.cs adalah class turunan dari Dialog.cs, yang berfungsi untuk memberikan fitur dialog pada gambar yang diinginkan. Berikut isi dari file SimpleDialog.cs.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

using RightClickApp.Controls;

namespace RightClickApp
{
    public class SimpeDialog : Dialog
    {
        Image _image;

        public SimpeDialog(Image image)
        {
            _image = image;
        }

        protected override void OnClickOutside()
        {
            Close();
        }

        protected override FrameworkElement GetContent()
        {
            Grid grid = new Grid() { Width = 150, Height = 115 };
            Border border = new Border() { BorderBrush = new SolidColorBrush(Colors.Black), BorderThickness = new Thickness(1), Background = new SolidColorBrush(Colors.LightGray) };
            grid.Children.Add(border);

            TextBlock upload = new TextBlock() { Text = "Upload", Width = 130 };

            TextBlock robert = new TextBlock() { Text = "Deteksi tepi Robert", Width = 130 };

            TextBlock sobel = new TextBlock() { Text = "Deteksi tepi Sobel", Width = 130 };

            TextBlock prewitt = new TextBlock() { Text = "Deteksi tepi Prewitt", Width = 130 };

            TextBlock canny = new TextBlock() { Text = "Deteksi tepi Canny", Width = 130 };

            ListBox options = new ListBox();
            options.Items.Add(upload);
            options.Items.Add(robert);
            options.Items.Add(sobel);
            options.Items.Add(prewitt);
            options.Items.Add(canny);

            grid.Children.Add(options);

            return grid;
        }
    }
}

Selanjutnya adalah memasang event klik tombol kanan mouse pada gambar yang diinginkan.

       1: <UserControl x:Class="RightClickApp.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="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:         <Image Height="224" MouseRightButtonDown="Gambar_MouseRightButtonDown" MouseRightButtonUp="Gambar_MouseRightButtonUp" HorizontalAlignment="Left" Margin="93,12,0,0" Name="Gambar" Stretch="Fill" VerticalAlignment="Top" Width="224" Source="/RightClickApp;component/Images/reza.JPG" />

      11:     </Grid>

      12: </UserControl>

Pada baris ke 10 terdapat Image dengan event MouseRightButtomUp dan MouseRightButtonDown.

       1: using System.Windows.Controls;

       2: using System.Windows.Input;

       3:  

       4: namespace RightClickApp

       5: {

       6:     public partial class MainPage : UserControl

       7:     {

       8:         public MainPage()

       9:         {

      10:             InitializeComponent();

      11:         }

      12:  

      13:         private void Gambar_MouseRightButtonDown(object sender, MouseButtonEventArgs e)

      14:         {

      15:             e.Handled = true;

      16:         }

      17:  

      18:         private void Gambar_MouseRightButtonUp(object sender, MouseButtonEventArgs e)

      19:         {

      20:             SimpeDialog simpleDialog = new SimpeDialog(Gambar);

      21:             simpleDialog.Show(e.GetPosition(LayoutRoot));

      22:         }

      23:     }

      24: }

Pada baris 13, terdapat handler yang berfungsi agar saat klik tombol kanan mouse dilakukan, jangan menampilkan menu Silverlight seperti gambar di bawah.

Sedangkan dimulai pada baris ke 18 adalah handler dari MouseRightButtonUp yang berfungsi untuk menampilkan dialog yang berisikan aksi-aksi yang nanti dapat dilakukan terhadap gambar.

Untuk mencoba contoh di atas, dapat dilakukan dengan terlebih dahulu mengunduh solution di bawah ini.

Dengan berbekal contoh di atas, maka tinggal menambahkan fitur ini pada solution pada posting sebelumnya. Caranya, hampir sama dengan langkah yang telah disebutkan di atas. Pada solution ini tambahkan folder Controls yang berisi class Dialog.cs dan SimpleDialog.cs. Karena kedua class tersebut tergabung dalam namespace RightClickApp, maka perlu ditambahkan baris berikut ini :

using RightClickApp;

Setelah itu pada method DrawImage ditambahkan baris ke-8 dan ke-9:

       1: private void DrawImage(FileInfo fi)

       2: {

       3:     using (Stream stream = fi.OpenRead())

       4:     {

       5:         try

       6:         {

       7:             . . . .

       8:             gambar.MouseRightButtonDown += new MouseButtonEventHandler(OnRightButtonDown);

       9:             gambar.MouseRightButtonUp += new MouseButtonEventHandler(OnRightButtonUp);

      10:             . . .

      11:         }

      12:         catch (Exception)

      13:         {

      14:         }

      15:     }

      16: }

Kemudian tinggal tambahkan method handler OnRightButtonDown dan OnRightButtonUp.

private void OnRightButtonDown(object sender, MouseButtonEventArgs e)
{
    e.Handled = true;
}

private void OnRightButtonUp(object sender, MouseButtonEventArgs e)
{
    Image gambar = (Image)sender;
    SimpeDialog simpleDialog = new SimpeDialog(gambar);
    simpleDialog.Show(e.GetPosition(LayoutRoot));
}

Dan berikut hasilnya :

Dapat dilihat pada gambar ketika diklik tombol kanan mouse akan dimunculkan dialog.

Untuk mencoba solution ini dapat mengunduh file di bawah ini.

Selamat mencoba.

Share this post: | | | |

Coretan : Crawl & Data Feed pada toko virtual

2010-02-24T16:47:46Z

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.

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.

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 ?

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

daftarkan url untuk data feed (hmm….sepertinya akan ada masalah dan kesulitan disini).
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).
sinkronisasi data (hmmm….).

Tiduuur.

Share this post: | | | |

Silverlight’s Explode Behaviour

2010-02-23T11:56:33Z

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.

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

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.

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.

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.

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.

Hasilnya akan terlihat seperti ini.

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.

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

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: | | | |

Simple Conversation

2010-02-17T12:17:40Z

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: | | | |

CompositionTarget.Rendering

2010-02-17T11:42:51Z

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 :

… dst … dst …

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.

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 :

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();

            bi.SetSource(stream);

  

            double cx = (double)bi.PixelWidth;

            double cy = (double)bi.PixelHeight;

  

            // resize ukuran gambar yang ditampilkan

            if (cx > 390.0 || cy > 390.0)

            {

                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);

  

            gambar.MouseLeftButtonDown += new MouseButtonEventHandler(OnButtonDown);

            gambar.MouseMove += new MouseEventHandler(OnMouseMove);

            gambar.MouseLeftButtonUp += new MouseButtonEventHandler(OnButtonUp);

        }

        catch (Exception)

        {

        }

    }

}

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 :

Dan berikut solution yang bisa langsung dicoba.

Share this post: | | | |

Silverlight 4.0 : Drop It, then move it everywhere you want

2010-02-15T16:22:44Z

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();

  

            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)

                {

                }

            }

        }

    }

}

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: | | | |

Drop your picture on me, please!

2010-02-12T18:39:39Z

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 :

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?

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.

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: | | | |

What will you choose between Graffiti 1.3 or Graffiti 2.0 ?

2010-02-12T01:48:59Z

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.

{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.

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: | | | |

Using MouseWheel on Silverlight 4.0

2010-02-10T15:43:22Z

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.

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.

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: | | | |

Mengenali file dengan extension “tidak terkenal” pada Visual Studio

2009-12-29T03:49:37Z

Karena akhir-akhir ini sering bermain dengan Graffiti CMS (yang sudah open source : http://graffiticms.codeplex.com/), maka tidak bisa dihindarkan untuk bermain dengan file ber-extension *.view. File ini hanya HTML ‘biasa’ yang menjadi layer viewer pada Graffiti CMS, memang file tersebut dapat dibuka oleh teks editor yang ada termasuk Visual Studio, akan tetapi mata akan melihat teks flat, tanpa warna dan tanpa intellisense seperti gambar di bawah ini.

Akan lebih baik bila file-file *.view dapat lebih hidup, berwarna dan ditemani oleh bantuan intellisense. Untuk mendapatkan itu semua cukup dengan memberikan sentuhan kepada Visual Studio agar mengenali extension *.view.

Caranya pilih Tool > Option pada menu, pilih bagian Text Editor > File Extension.

Sekarang tinggal daftarkan extension yang diinginkan, dalam kasus ini dipilih HTML Editor. Hasilnya…..

Note :

Posting ini hanya sebagai media catatan agar tidak lupa :)

Share this post: | | | |

Menyiapkan IIS7 sebagai rumah astoria pada Windows Server 2008

2009-12-03T05:29:08Z

Pada posting sebelumnya di sini, telah dicatat konfigurasi IIS7 sebagai rumah astoria pada Windows Vista atau Windows 7. Pada posting ini akan dicatat (agar tidak lupa) konfigurasi IIS7 pada Windows Server 2008 agar dapat digunakan sebagai rumah astoria.

Pertama, dengan memilih Control Panel > Programs > Turn Windows features on or off maka akan dibuka jendela Server Manager seperti gambar di bawah ini.

Kemudian pilih Add Features pada bagian Features Summary,

Selanjutnya akan dapat dilihat jendela seperti berikut ini.

Pada .NET Framework 3.0 Features (Installed) > WCF Activation cek pada bagian HTTP Activation. Kemudian klik Next. Maka dapat dilihat proses installasi seperti di bawah ini.

Setelah proses installasi berhasil, maka dapat dilihat terdapat tambahan item baru pada Handler Mappings yang ada pada IIS Manager.

IIS7 pada Windows Server 2008 siap digunakan.

Share this post: | | | |

jQuery UI - Interactions

2009-11-28T08:22:57Z

Bagi web developer yang menggunakan ASP.NET, dan bekerja dengan ASP.NET Ajax mungkin juga mengenal Ajax Control Toolkit (ACT). ACT digunakan di atas ASP.NET, artinya ACT tidak dapat hidup tanpa ASP.NET Ajax. Pada ACT terdapat control-control yang interaktif seperti :

Accordion.
HTMLEditor.
Tab.
Slider.
Dan lain-lain.

Seperti ACT, begitu pula jQuery UI. jQuery UI harus digunakan di atas jQuery, karena jQuery UI merupakan library interaksi, efek dan widget-widget seperti control-control yang ada pada ACT. Artinya pada jQuery UI akan dapat ditemui widget seperti :

Tab.
Accordion.
Dialog.
Datepicker.
Progressbar.
Dan lain-lain.

Paket library jQuery UI dapat diunduh di http://jqueryui.com. Setelah mengunduh paket library tersebut dan mengekstraknya, maka akan didapati file-file berekstension JS yang dapat digunakan untuk membuat widget yang diinginkan atau memanfaatkan fitur interaksi dan efek.

Pada ebook yang dapat di-download di : http://geeks.netindonesia.net/files/folders/ebook/entry183363.aspx akan dibahas sedikit mengenai jQuery UI, khusus membahas fitur interaksi. Fitur interaksi jQuery UI ini terdiri atas :

Draggable.
Dropable.
Resizeable.
Selectable.
Sortable.

Bahasan ini terdiri dari 28 halaman yang telah digabung ke dalam ebook ASP.NET & jQuery. Selanjutnya akan ditambahkan bahasan Widget dan Effect untuk menuntaskan bahasan Bab III, jQuery UI pada ebook ini.

Semoga bahasan jQuery UI – Interaksi ini bermanfaat sambil menikmati sate selama weekend ini.

Share this post: | | | |

Windows 7 & DSLR

2009-11-10T13:16:59Z

Ada yang bilang Windows 7 cepet.

Ada yang bilang Windows 7 = Kelebihan Windows XP + Kelebihan Windows Vista.

Tapi yang pasti ada hal yang tidak ditemui pada Windows sebelumnya…yaitu kemampuan Windows 7 mengenali perangkat lain yang melekat pada dirinya. Sebagai contoh DSLR Nikon D5000, Windows 7 dapat dengan baik mengenali perangkat ini dari merk, tipe, sisa batere dari perangkat, space yang masih tersedia, gambar serta logo.

Selain itu Windows 7 mengelompokkan aplikasi-aplikasi yang dapat digunakan atau yang cocok dan berhubungan dengan perangkat ini.

Bukan hanya pengenalan perangkat saja, Windows 7 juga dapat berinteraksi dengan baik dengan perangkat ini. Windows 7 memberikan fasilitas Browse file untuk melihat secara langsung file-file yang berada di dalam media penyimpanan perangkat ini. Windows 7 juga memberikan fasilitas Import pictures and videos untuk menyalin semua file media ke dalam komputer dengan mudah dan dapat pula memberikan tag sebelum proses import dilakukan.

So..tunggu apalagi segera upgrade sistem operasi anda ke Mac OS X Snow Leopard. Loh???

Share this post: | | | |

ASP.NET 4.0 Web Form & URL Routing

2009-11-10T03:27:44Z

Kesan pertama saat installasi adalah, kenceeeng…ngga sampai 3 putaran di meja Poker, proses installasi sudah kelar dilakukan. Eh ternyata setelah dicek baru kelar proses installasi .NET FX 4.0 Beta doang, setelah itu mesin melakukan restart dan proses installasi diteruskan.

Total space yang diperlukan bila dipilih opsi Full Install adalah 5,5 GB (kurang lebih), maka langkah paling paling cepat dan gampang untuk menguranginya adalah dengan menghilangkan centang pada checkbox Visual C++ dan space yang diperlukan akan segera turun sebesar 1,5GB.

Setelah proses intallasi selesai, maka terlebih dahulu langsung menjalakan VS2008. Loh? VS2008? Sekedar memastikan semua solusi dari semua project berjalan dengan aman, nyaman dan benar tanpa kurang suatu apapun. Hasilnya, aman…artinya memang benar VS2008 & VS2010 dapat saling berdampingan tanpa mengganggu.

Setelah menjalan VS2010 Ultimate, pertanya yang dilakukan adalah membuat Solution kemudian menambahkan 1 Web Project (ASP.NET Web Application) ke dalamnya, dan…

Secara otomatis VS2010 akan lebih memanjakan, lebih manja lagi dibandingkan yang dilakukan oleh VS2008. Karena seperti yang dilihat pada Solution Explorer di atas, telah dibuatkan MasterPage, script jQuery di dalam folder Script, css pada folder Styles, folder Account yang berisi halaman untuk untuk mengubah password, login dan register user. Serta telah dibuatkan konfigurasi membership, profile dan roleManager pada Web.config seperti berikut.

<membership>
  <providers>
    <clear/>
    <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
         enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
         maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
         applicationName="/" />
  </providers>
</membership>

<profile>
  <providers>
    <clear/>
    <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
  </providers>
</profile>

<roleManager enabled="false">
  <providers>
    <clear/>
    <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
    <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
  </providers>
</roleManager>

Dengan melakukan ‘View in Browser’ maka segera kita melihat antarmuka berikut ini.

Format seperti di atas tidak hanya akan diberikan oleh VS2010 bila menggunakan template project Web Application tetapi juga ketika digunakan template Web Site.

Web.config pada ASP.NET 4 ini juga terlihat lebih ramping dan singkat, seperti yang telah ditulis oleh Ahmad Masykur di sini.

{Web Form & URL Routing}

Hal baru lainnya adalah kemampuan Web Form menggunakan URL Routing yang lebih mudah seperti layaknya ASP.NET MVC.

Seperti halnya ASP.NET MVC, kita dapat ‘mendaftarkan’ mapping antara nama URL ‘bohongan’ dengan nama file fisik yang akan diakses oleh url tersebut. Kita dapat menambahkan method seperti di bawah ini pada Global.asax.cs (pada Web Application).

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Web;

       5: using System.Web.Security;

       6: using System.Web.SessionState;

       7:  

       8: namespace WebApplication1

       9: {

      10:     public class Global : System.Web.HttpApplication

      11:     {

      12:         void RegisterRoutes(System.Web.Routing.RouteCollection routes)

      13:         {

      14:             routes.MapPageRoute("about", "AboutMe", "~/About.aspx");

      15:  

      16:         }

      17:  

      18:         void Application_Start(object sender, EventArgs e)

      19:         {

      20:             // Code that runs on application startup

      21:             RegisterRoutes(System.Web.Routing.RouteTable.Routes);

      22:         }

      23:     }

      24: }

Dapat dilihat pada baris 13, adalah cara untuk untuk mendaftarkan routing. Terdapat 3 parameter yang diisikan,

parameter pertama berisi nilai “about”, yang menjadi nama dari routing ini.
parameter kedua adalah URL ‘bohongan’ yang nanti akan dipanggil pada address bar untuk memanggil file About.aspx.
parameter ketiga adalah nama file fisik yang ingin di akses.

Kita juga dapat mengkonfigurasi agar routing ini dapat mengirimkan parameter. Dibawah ini contoh pengganti baris ke 14 apabila ingin dimasukkan parameter ke dalam URL ‘bohongan’.

       1: void RegisterRoutes(System.Web.Routing.RouteCollection routes)

       2: {

       3:     routes.MapPageRoute("about", "AboutMe/", "~/About.aspx");

       4:     routes.MapPageRoute("about-param", "AboutMe/{nilai}", "~/About.aspx");

       5: }

Dengan contoh di atas kita dapat menuliskan seperti cara pada gambar di atas, atau dengan cara pada gambar di bawah ini :

Untuk menangkap nilai dari parameter tersebut dapat menggunakan contoh di bawah ini.

About.aspx

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="About.aspx.cs" Inherits="WebApplication1.About" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        About
    </h2>
    <p>
        Put content here.<br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </p>
</asp:Content>

About.aspx.cs

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Web;

       5: using System.Web.UI;

       6: using System.Web.UI.WebControls;

       7:  

       8: namespace WebApplication1

       9: {

      10:     public partial class About : System.Web.UI.Page

      11:     {

      12:         protected void Page_Load(object sender, EventArgs e)

      13:         {

      14:             string nilai = Page.RouteData.Values["nilai"] as string;

      15:  

      16:             Label1.Text = nilai;

      17:         }

      18:     }

      19: }

Pada file About.aspx.cs, di baris 14 dapat dilihat cara untuk mengambil nilai parameter yang ditulis pada address bar.

Note :

Cara di atas dilakukan pada template project Web Application dan berhasil, tetapi bila cara di atas dilakukan pada Web Site…hmm…gagal.

Share this post: | | | |

Graffiti, Play with Chalk

2009-11-03T16:51:59Z

Chalk adalah widget pada Graffiti yang dapat digunakan sebagai wadah untuk menulis ‘apa-pun-juga’, termasuk dapat dituliskan juga kode-kode ‘NVelocity’ didalamnya. Untuk menambahkan widget Chalk ini maka cukup dengan mengakses Control Panel > Presentation > Widgets. Pilih Chalk Widget pada bagian Available Widget.

Drag Chalk Widget pada area yang diinginkan, dapat dipilih Left Sidebar atau Right Sidebar. Kemudian klik Edit.

Berikut contoh kode-kode NVelocity yang dapat dituliskan pada body Chalk.

#set($allCategories = $data.Categories())

<ul>
    #foreach($category in $allCategories)
    <li>
        <a href="$category.Url">$category.Name</a>
        #if($category.HasChildren)
            <ul>
            #foreach($cat in $category.Children)
                <li style="padding-left:13px;"><a href="$cat.Url">$cat.Name ($cat.PostCount)</a></li>
            #end
            </ul>
        #end
    </li>
    #end
</ul>

Kode di atas adalah contoh kode untuk menampilkan daftar Category beserta anak Category-nya (sebenarnya tujuan posting ini adalah untuk mencatat kode di atas agar tidak lupa).

Klik tombol Update dan hasilnya dapat dilihat pada halaman public seperti berikut ini.

Share this post: | | | |