May 2010 - Posts
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 :
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.
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.
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.
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 :
Bila ingin mencoba contoh di atas, maka dapat segera mengunduh file di bawah ini.
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.
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.
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.
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}
{Data Master}
{User Management}
{Profile}
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.
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.
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.
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.
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.
Kalau anda sudah sadar dan menganggap hal ini tidak perlu, tinggal kembali ke menu Tools > Extension Manager untuk melakukan disable atau uninstall fitur ini.
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.
Saat akan mengunduh pun akan diberikan pilihan versi Visual Studio.
Dan dilanjutkan dengan memilih Tool > Import and Export Settings. Dan berikut adalah hasilnya.
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.
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.
Dan diakhiri dengan Demo.
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.
Selain saya juga ada pembicara lain, yaitu :
Suherman yang berbicara pentingnya berkomunitas dan perkenalan MUGI, dilanjutkan dengan Windows Experience pada Windows 7.
Dan pembicara terakhir adalah Lailatul Qadariah yang bercerita tentang Silverlight 4 & Its Application.
Akhir kata, semoga wanita ini bisa jadi MVP, biar ngga neg melihat saat MVP Gathering yang isinya pria semua :P
Have a nice weekend.
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 
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
Sebenarnya apa isi paket sebesar 177MB itu? Berikut adalah file-file tersebut :
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.
Kedua, dengan menjalankan Visual Studio 2010 yang telah anda miliki.
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}
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.
Selamat mencoba dan selamat menikmati detik-detik terakhir week end anda.