Reyza

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

Public

May 2010 - Posts

Daddy, Mommy want to rotate, resize & move image on your Silverlight Application easily
capture

Daddy, mommy says; if you won’t attack, all the things in the house will be broken.

Itu kata sang anak kepada Om Ip Man selagi masih berjaya di dunia persilatan. Sekarang, Om Ip Man sudah pindah profesi menjadi tukang bikin aplikasi Silverlight dengan bersenjatakan Expression Studio 4 dan Visual Studio 2010. Sekarang perkataan sang anak berbeda, yaitu :

1

Daddy, Mommy want to rotate resize & move image on your Silverlight Application easily.

Hm….”easily”, dengan mudah? Dengan memanfaatkan “Adorner” maka hal itu jadi lebih mudah. “Adoner” adalah sedikit kode yang terdiri atas file XAML dan class yang sangat membantu untuk membuat gambar mudah dirotasi, diubah ukurannya dan di-drag dimanapun lokasi yang diinginkan (selama masih dalam halaman Silverlight).

“Adorner” dapat ditemukan di sini. Di dalam ini ada file-file penting yang dapat kita gunakan ulang, yaitu :

  • Adorner.xaml & Adorner.xaml.cs, file ini akan memberikan ‘kelakuan-kelakuan’ (rotate, resize dan move) di atas kepada elemen yang diinginkan.
  • IAdornedObject.cs.

Kita cukup menambahkan file-file tersebut pada project yang sedang dikerjakan.

image

Selanjutkan akan ditambahkan elemen canvas dan satu elemen image didalam canvas pada file MainPage.xaml, seperti yang dapat dilihat pada baris 10 sampai 12.

   1: <UserControl x:Class="RotateMoveResize.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="800">
   8:  
   9:     <Grid x:Name="LayoutRoot" Background="#FFCE0000">
  10:         <Canvas Height="576" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Canvas_ImageArea" VerticalAlignment="Top" Width="776">
  11:             <Image Name="image1" Source="images/01.jpg" Stretch="UniformToFill" Width="247" Height="364" MouseLeftButtonDown="Image_MouseLeftButtonDown" Canvas.Left="323" Canvas.Top="31" />
  12:         </Canvas>
  13:     </Grid>
  14: </UserControl>

Selanjutnya tinggal menambahkan baris-baris seperti pada baris 4, baris 10, baris 16-20 dan baris 23-30.

   1: using System.Windows.Controls;
   2: using System.Windows.Input;
   3:  
   4: using TileMaster;
   5:  
   6: namespace RotateMoveResize
   7: {
   8:     public partial class MainPage : UserControl
   9:     {
  10:         Adorner _adorner = new Adorner();
  11:  
  12:         public MainPage()
  13:         {
  14:             InitializeComponent();
  15:  
  16:             _adorner.Width = 0;
  17:             _adorner.Height = 0;
  18:             AdornedObject item = new AdornedObject(image1);
  19:             image1.Tag = item;
  20:             Canvas_ImageArea.Children.Add(_adorner);
  21:         }
  22:  
  23:         private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  24:         {
  25:             Image img = (Image)sender;
  26:             Canvas_ImageArea.Children.Remove(img);
  27:             Canvas_ImageArea.Children.Insert(Canvas_ImageArea.Children.Count - 1, img);
  28:             _adorner.SetAdornedObject((IAdornedObject)img.Tag);
  29:             _adorner.StartMoveDrag();
  30:         }
  31:     }
  32: }

Baris 4, adalah mendaftarkan namespace dari file Adorner.xaml.cs & IAdornedObject.cs.

Baris 10, instansiasi objek dari class Adorner.

Baris 16-20, mendaftarkan elemen image sebagai bagian dari objek Adorner sehingga akan mempunyai ‘kelakuan-kelakuan’ seperti di atas.

Sedang method Image_MouseLeftButtonDown untuk menangkap event ketika gambar diklik, sehingga gambar ‘aktif’ dan siap di-drag, di-rotate dan di-resize.

Hasilnya, dapat dilihat gambar berikut ini. Pada gambar dibawah ini dapat dilihat ketika cursor mouse berada di sisi gambar, dapat dilihat icon yang menandakan gambar dapat di-resize.

image

Sedangkan pada gambar dibawah ini dapat dilihat icon untuk melakukan rotasi ketika cursor mouse berada pada ujung dari gambar. Dan dengan melakukan klik dan memutar arah cursor akan membuat gambar tersebut berotasi.

image

Pertanyaan : apakah cuma bisa elemen image saja? bagimana dengan elemen lain seperti Rectangle? Jawabnya adalah BISA.

Selanjutnya adalah apabila gambar yang di dalam canvas Canvas_ImageArea lebih dari 1, maka kode berikut ini :

AdornedObject item = new AdornedObject(image1);
canvas1.Tag = item;

dapat diubah menjadi seperti berikut ini :

Random random = new Random(1);
foreach (Image image in Canvas_ImageArea.Children)
{
    AdornedObject item = new AdornedObject(image, random.Next(50) - 25);
    image.Tag = item;
}

Dan hasilnya bisa dilihat seperti gambar di bawah ini :

image

Bila ingin mencoba contoh di atas, maka dapat segera mengunduh file di bawah ini.

Share this post: | | | |
Posted: May 30 2010, 11:59 PM by reyza | with 2 comment(s)
Filed under: , ,
Silverlight 4 : Crop Image

Developer diberi kemudahan untuk membuat aplikasi ‘manipulasi gambar’ sederhana sejak Silverlight 3, dengan diberikannya class WriteableBitmap. Dengan adanya class ini maka pengguna dapat melakukan ‘manipulasi gambar’ pada client, tanpa campur tangan atau melakukan operasi pada server seperti yang pernah terjadi pada Silverlight 2.

1

Pada gambar di atas, dapat dilihat gambar besar yang ditampilkan dengan menggunakan control Image yang ada di sebelah kiri (Image_Source). Sedangkan hasil cropping akan ditampilkan pada control Image yang ada di sebelah kanan (Image_Destination). Sebelum melakukan operasi crop, user akan menentukan titik pusat area cropping dengan mengklik pada gambar besar. Setelah itu user dapat mengklik tombol Crop maka hasil cropping akan dapat dilihat pada Image_Destination.

Berikut ini adalah isi dari file MainPage.xaml.

   1: <UserControl x:Class="CropImage.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="650" d:DesignWidth="800" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
   8:  
   9:     <Grid x:Name="LayoutRoot" Background="Black">
  10:         <Image Height="400" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Image_Source" MouseLeftButtonDown="Image_Source_MouseLeftButtonDown" Stretch="Fill" VerticalAlignment="Top" Width="550" Source="/CropImage;component/images/Femur-01.png" />
  11:         <Image Height="175" HorizontalAlignment="Left" Margin="600,79,0,0" Name="Image_Destination" Stretch="Fill" VerticalAlignment="Top" Width="175" />
  12:         <Button Content="Crop" Height="23" HorizontalAlignment="Left" Margin="12,497,0,0" Name="Button_Crop" VerticalAlignment="Top" Width="75" Click="Button_Crop_Click" />
  13:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="12,425,0,0" Name="label1" VerticalAlignment="Top" Width="430" Foreground="White" Content="Klik satu titik pada gambar untuk menentukan titik pusat area cropping" />
  14:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="12,446,0,0" Name="label3" VerticalAlignment="Top" Width="56" Foreground="White" Content="X Offset :" />
  15:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="74,446,0,0" Name="Label_MouseX" VerticalAlignment="Top" Width="52" Foreground="White" />
  16:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="12,468,0,0" Name="label5" VerticalAlignment="Top" Width="52" Foreground="White" Content="Y Offset :" />
  17:         <sdk:Label Height="23" HorizontalAlignment="Left" Margin="74,468,0,0" Name="Label_MouseY" VerticalAlignment="Top" Width="52" Foreground="White" />
  18:         <sdk:Label Height="21" HorizontalAlignment="Left" Margin="646,44,0,0" Name="label6" VerticalAlignment="Top" Width="85" Content="Hasil Cropping" Foreground="White" />
  19:         <Rectangle Height="175" HorizontalAlignment="Left" Margin="600,79,0,0" Name="rectangle1" Stroke="White" StrokeThickness="3" VerticalAlignment="Top" Width="175" />
  20:         <Rectangle Height="400" HorizontalAlignment="Left" Margin="12,12,0,0" Name="rectangle2" Stroke="White" StrokeThickness="3" VerticalAlignment="Top" Width="551" />
  21:     </Grid>
  22: </UserControl>

Pada barisan kode di atas, dapat dilihat 2 event, yaitu :

  • MouseLeftButtonDown (baris 10), yang akan menjalankan method Image_Source_MouseLeftButtonDown ketika mouse diklik pada area gambar di sebelah kanan (Image_Destination),
  • Button_Crop_Click (baris 12), yang akan menjalankan method Button_Crop_Click ketika tombol diklik.

Berikut adalah isi dari method Image_Source_MouseLeftButtonDown.

private void Image_Source_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point mouseXY = e.GetPosition(null);
 
    mouseX = e.GetPosition(null).X.ToString();
    mouseY = e.GetPosition(null).Y.ToString();
 
    Label_MouseX.Content = mouseX;
    Label_MouseY.Content = mouseY;
}

Dan berikut ini adalah isi dari method Button_Crop_Click.

   1: private void Button_Crop_Click(object sender, RoutedEventArgs e)
   2: {
   3:     // menangkap data gambar sumber (gambar besar)
   4:     // dan memasukkannya ke dalam objek wb
   5:     WriteableBitmap wb = new WriteableBitmap(Image_Source, null);
   6:  
   7:     // menentukan titik awal cropping
   8:     int xOffset = Convert.ToInt32(mouseX) - 88;
   9:     int yOffset = Convert.ToInt32(mouseY) - 88;
  10:  
  11:     // memeriksa batas cropping
  12:     if (xOffset < 0)
  13:     {
  14:         xOffset = 0;
  15:     }
  16:     else if (xOffset + 175 > Image_Source.Width)
  17:     {
  18:         xOffset = Convert.ToInt32(Image_Source.Width) - 175;
  19:     }
  20:  
  21:  
  22:     if (yOffset < 0)
  23:     {
  24:         yOffset = 0;
  25:     }
  26:     else if (yOffset + 175 > Image_Source.Height)
  27:     {
  28:         yOffset = Convert.ToInt32(Image_Source.Height) - 175;
  29:     }
  30:  
  31:     // cropping dilakukan
  32:     Image_Destination.Source = CropImage(wb, xOffset, yOffset, 175, 175);
  33: }

Pada baris ke 32, dapat dilihat pemanggilan method CropImage yang berfungsi untuk menampilkan hasil cropping pada elemen Image_Destination. Berikut adalah isi dari method CropImage.

private WriteableBitmap CropImage(WriteableBitmap source, int xOffset, int yOffset, int w, int h)
{
    int sourceWidth = source.PixelWidth;
 
    WriteableBitmap result = new WriteableBitmap(w, h);
    for (int y = 0; y <= h - 1; y++)
    {
        int sourceIndex = xOffset + (yOffset + y) * sourceWidth;
        int destinationIndex = y * w;
 
        Array.Copy(source.Pixels, sourceIndex, result.Pixels, destinationIndex, w);
    }
 
    return result;
}

Dari semua tertulis di atas, jangan lupa untuk meng-‘using’ namespace System.Windows.Media.Imaging agar kita bisa menggunakan class WriteableBitmap.

Akhir kata, silakan untuk melanjutkan menikmati liburan akhir pekan yang panjang.

Share this post: | | | |
Posted: May 28 2010, 02:15 PM by reyza | with 2 comment(s)
Filed under: , ,
Ebook Seri Belajar ASP.NET 4.0 : Membangun Sistem Pengelolaan User

Setelah meluangkan waktu 2-3 jam sehari, maka setelah 2 minggu lebih beberapa hari, akhirnya ebook sederhana dengan judul Seri Belajar ASP.NET 4.0 : Membangun Sistem Pengelolaan User sederhana ini selesai dirampungkan.

cover-resize

Ebook ini mencoba memperkenalan ASP.NET 4.0 dan Visual Studio 2010 untuk membuat Sistem Pengelolaan User sederhana. Ebook ini mencoba memberikan paparan sederhana kepada para Web Developer pemula untuk membangun aplikasi web. Ada beberapa tahapan yang akan ditemui pembaca di dalam ebook ini, yaitu :

  • Persiapan database.
  • Pembuatan fondasi aplikasi web.  Pada fondasi aplikasi web ini akan diterangkan konfigurasi yang pertama kali dilakukan agar terkoneksi dengan database yang telah disiapkan.  Pada bagian ini juga dipaparkan pembuatan Data Access Layer untuk mempermudah akses database yang akan digunakan pada aplikasi web ini.  Selain itu juga dipaparkan untuk melakukan pengamanan terhadap aplikasi web yang telah dibuat serta implementasi fitur Resource dan Globalization untuk membuat aplikasi web yang multi-bahasa.
  • Pembuatan modul Data Master untuk mengelola data Organisasi dengan menggunakan Data Access Layer yang telah dibuat.
  • Pembuatan modul User Management dengan menggunakan fitur Membership.
  • Pembuatan modul Profile yang dapat menampilkan data user yang login.

Berikut ini adalah antar muka dari Sistem Pengelolaan User sederhana ini.

{Halaman Login}

spu1

{Data Master}

spu2

spu3

{User Management}

spu4

spu5

spu6

{Profile}

spu7

Akhir kata, selamat mencoba dan sangat disadari ebook ini banyak kekurangan sehinggal masukan, saran dan kritik bisa dikirimkan langsung ke email reza.faisal [at] gmail.com.

Ebook dapat diunduh di sini.

Source Code dan Database dapat diunduh di sini.

Share this post: | | | |
Light up your Visual Studio 2010

Paparan di bawah ini tidak akan berpengaruh kepada kemampuan coding anda, tidak akan berpengaruh juga terhadap penulisan code yang efisien apalagi sampai mempercepat waktu development software yang sedang dikerjakan.  Paparan di bawah ini hanya untuk hore-hore dan membuat tampilan Visual Studio 2010 anda terlihat unik dan trendy :P

Pertama adalah bagaimana membuat antarmuka Visual Studio, seperti menu, toolbar, title bar dan lain-lain menjadi thema yang beda bila dibandingkan dengan teman-teman kerja anda dalam satu team. Bila anda tega menghabiskan waktu untuk melakukan itu maka segera klik menu Tools > Extension Manager.

spu1

Setelah jendela Extension Manager terbuka, pilih Online Gallery, agar ada hasil yang dapat dilihat maka jangan lupa komputer anda telah terkoneksi dengan jaringan internet. Dan akan melihat tampilan seperti berikut ini.

spu2 

Pilih Visual Studio Color Theme Editor dan klik Download, maka anda akan mengundung paket file sebesar 751KB. Setelah itu lanjutkan dengan proses installasi. Segera lakukan proses restart Visual Studio untuk mendapatkan menggunakan extension yang baru saja diinstall tadi. Dan anda siap untuk menemukan menu Theme seperti berikut ini.

spu3

Tinggal pilih theme yang diinginkan, tetapi bagi anda PRIA atau wanita yang mempunyai warna favorit PINK, maka anda tidak akan menemukan theme dengan warna tersebut. Tapi jangan khawatir, anda masih bisa men-implementasi-kan jiwa PINK anda dengan memilih Customize Colors untuk mengumbah theme dengan warna-warna yang diinginkan.

spu4

Kalau anda sudah sadar dan menganggap hal ini tidak perlu, tinggal kembali ke menu Tools > Extension Manager untuk melakukan disable atau uninstall fitur ini.

spu5

Kedua, adalah mengubah tema pada editor Visual Studio. Sekarang makin banyak pilihan yang dapat digunakan sebagai tema editor, semuanya dapat ditemui di http://studiostyles.info.

spu6

Saat akan mengunduh pun akan diberikan pilihan versi Visual Studio.

spu7

Dan dilanjutkan dengan memilih Tool > Import and Export Settings. Dan berikut adalah hasilnya.

spu8

Share this post: | | | |
Visual Studio 2010 : Life Run on Codes

Software developer tentunya tidak bisa lepas (100%) dari untaian atau barisan kode yang nantinya akan membentuk software. Untaian atau barisan kode tidak akan terbentuk dengan efisien tanpa Developer Tool yang sesuai.

vs1

Pada kesempatan ini saya bercerita tentang bagaimana hidup berjalan di atas untaian-untaian kode yang ditulis dengan Visual Studio 2010.  Cerita ringkas ini ditulis dalam sedikit halaman slide. Isi slide cuma gambar-gambar yang menceritakan apa yang harus diketahui dan dimiliki oleh software developer.

image image image

Dan diakhiri dengan Demo.

vs2

Demo berisi pengenalan sifat Visual Studi 2010 yang tidak pilih kasih akan bahasa pemrograman yang dimiliki oleh para software developer, terbukti dengan tersedianya pilihan bahasa :

  • VB.NET.
  • C#.
  • C++.
  • F#, sebagai anggota keluarga baru pada Visual Studio.

Selanjutnya demo pengenalan macam-macam software yang dapat dibangun dengan menggunakan Visual Studio 2010 :

  • Windows Mobile & Windows Phone, demo membuat aplikasi sederhana pada Windows Phone.
  • Windows, demo membangun aplikasi sederhana dengan menggunakan Template Console, Windows & WPF.
  • Silverlight, demo menampilkan fitur-fitur yang dimiliki oleh Silverlight.
  • VSTO, demo membuat aplikasi sangat-sangat sederhana dengan Excel dan demo aplikasi Fisika buatan MVP VSTO Andri Yadi.
  • ASP.NET, demo ini tidak sempat disampaikan karena kendala waktu yang sedikit dan nafas yang sudah ngos-ngosan.

Demo disesuaikan dengan kompetensi para peserta yang hadir.  Peserta yang hadir adalah 50an (mungkin kurang) siswa SMK di bidang Rekayasa Perangkat Lunak.

vs3

DSC_1477 

Selain saya juga ada pembicara lain, yaitu :

Suherman yang berbicara pentingnya berkomunitas dan perkenalan MUGI, dilanjutkan dengan Windows Experience pada Windows 7.

vs4

DSC_1470

Dan pembicara terakhir adalah Lailatul Qadariah yang bercerita tentang Silverlight 4 & Its Application.

vs5

DSC_1481

Akhir kata, semoga wanita ini bisa jadi MVP, biar ngga neg melihat saat MVP Gathering yang isinya pria semua :P

Have a nice weekend.

Share this post: | | | |
Windows Phone Developer Tools Berulah Kembali

Seperti yang telah diberitakan di http://developer.windowsphone.com/ atau lebih tepatnya di sini, bahwa Windows Phone Developer Tool CTP Refresh sudah diunduh dan dapat digunakan pada VS2010 RTM. Klik di sini untuk mengunduh.

Jangan ragu untuk mengunduh karena filenya kecil, cuma 3,2MB saja Emotions_Smile_icon_DEVIL_2940

image

Seperti waktu yang lalu, prilaku vm_web.exe sebesar ini akan melakukan proses download file-file yang diperlukan lainnya sebesar 177MB (begitu yang terlihat saat proses download dilakukan)…d***, masih bikin ulah saja nih si Windows Phone Developer Tool ini Emotions_Smile_icon_DEVIL_2940

Sebenarnya apa isi paket sebesar 177MB itu? Berikut adalah file-file tersebut :

image

Dan ternyata totalnya tidak 177MB tetapi sekitar 192MB. File-file ini akan dapat ditemui pada folder %TEMP% saat proses installasi berlangsung, dan file-file tersebut akan hilang setelah proses installasi selesai dilakukan. Jadi bagi yang ingin mengkoleksi file-file tersebut dapat dilakukan dengan meng-copy file-file tersebut dari %TEMP% ke tempat lain, agar nanti dapat digunakan kembali oleh teman, kerabat, pacar atau istri teman anda yang ingin menginstall Windows Phone Developer Tool terbaru ini.

Setelah proses installasi selesai maka anda dapat memulai bermain dengan Windows Phone Developer Tool ini dengan dua cara :

Pertama, dengan menjalankan Microsoft Visual Studio Express for Windows Phone, yang tiba-tiba telah berada pada Start menu.

wp2

Kedua, dengan menjalankan Visual Studio 2010 yang telah anda miliki.

image

Bersyukurlah bagi para developer yang berbicara dengan bahasa C#, anda semua dapat menikmati template Silverlight for XNA Windows Phone Game. Bagi developer yang berbicara dengan bahasa VB.NET, anda semua belum terlambat untuk kembali ke jalan yang benar {statementnya bakal bikin rame nih} Emotions_Smile_icon_DEVIL_2940

Jangan berhenti sampai Windows Phone Developer Tool saja, harus diteruskan dengan mengunduh dan menginstall Blend 4 RC, Blend Add-in Preview 2 for Windows Phone dan Blend Software Development Kit (SDK) Preview 2 for Windows Phone.

wp4

Selamat mencoba dan selamat menikmati detik-detik terakhir week end anda.

Share this post: | | | |