Windows Phone 7 Tools Beta dapat diunduh dengan cara bertamu terlebih dahulu di : http://developer.windowsphone.com/
Posting-posting yang berhubungan dengan ini bisa dibaca pada link berikut :
Trus developer toolnya dimana? Seperti biasa dapat diunduh di sini. Tapi siap-siapkan bandwidth dan waktu untuk installasi, karena installasi dilakukan secara ‘online’ :)
Silakan bangun dari mimpi dan mulai menulis untaian program untuk Windows Phone 7. Dan kemudian coba main-main pada alamat berikut ini :
http://www.bloomberg.com/news/2010-07-14/microsoft-pays-developers-to-build-mobile-apps-to-help-catch-up-with-apple.html
Berikut ini adalah kasta dari MSDN Subscription.
Sumber : http://msdn.microsoft.com/en-us/subscriptions/subscriptionschart.aspx
Jadi kasta yang paling tinggi dengan fitur terlengkap adalah Visual Studio Ultimate with MSDN, tidak hanya mendapatkan lisensi Visual Studio (VS2005-VS2010), tetapi juga sistem operasi (DOS, Win3.11, XP sampai Windows 7 baik versi Home, Professional sampai Ultimate), office, server (Office 2003 sampai Office 2010) etc.
Makanya tidak heran subscription kasta ini berharga mahal, sekitar $11.899 untuk 1 tahun, sekitar Rp. 100juta (atau $3.799 untuk renew sekitar Rp. 30juta). Dan minggu ini saya mendapatkan kiriman berupa 3 Visual Studio Ultimate with MSDN subscription, yang artinya berharga total Rp. 300juta (lebay). Om Somasegar (Senior Vice President, Microsoft Developer Division) mengamanatkan untuk membagikan ketiga subscription ini kepada orang-orang yang belum pernah merasakan, menikmati, menginstall dan menulis kode dengan Visual Studio dan teman-temannya.
{FAQ}
Q : Isinya cuma VS 2010 doang?
A : kan sudah dibilang di atas, kalau isinya lengkap dari OS, App etc.
Q : 100 juta? Mahal banget ya? Kenapa ngga dijual di Kaskus aja gan? Kan lumayan tuh 300juta :P
A: grrrr….mau kena bata merah? dasar nubitol!!! 
Dan minggu ini pula, ketiga subscription ini dibagikan kepada tiga orang yang masing-masing berstatus Dosen, Mahasiswa & Freelancer. Semoga berguna!!
Have a nice weekend. . .
Bila kebetulan anda mengunduh Expression Studio 4, maka (sekali lagi) anda dapat bertemu dengan Expression Encoder 4 Pro, dan jendela berikut ini akan dapat dilihat setiap aplikasi ini dijalankan.
{Expression Encoder 4 Pro}
Ada 3 tipe project yang dapat dipilih, yaitu :
- Transcoding Project yang dapat digunakan untuk melakukan encode (saja) sesuai format dan kompresi yang diinginkan.
- Silverlight Project yang dapat digunakan tidak hanya melakukan encode tetapi juga akan mem-publish hasil encode agar dapat dilihat dengan menggunakan silverlight media player (yang artinya harus dibuka saat pada web browser).
- Live Broadcasting Project yang dapat digunakan untuk melakukan encode dan langsung mem-broadcast hasil encode via ‘Real Time Streaming Protocol’. Sumber yang dapat di-encode dapat berupa file atau dari live source seperti web cam atau tv tunner.
{Broadcast}
Setelah memilih Live Broadcasting Project, maka ada tiga hal penting yaitu :
Source
Pilih Add a Live Source maka area Live Sources akan terisi, dan dengan memilih Add a file Source maka area File Sources akan terisi. Sebagai contoh akan dipilih Add a Live Source. Kemudian tinggal pilih device yang akan mengeluarkan video pada Video Device, dan device yang akan mengeluarkan audio pada Audio Device.
Setelah itu klik tombol Cue.
Encode
Bagian Encode adalah pilihan format dan kompresi yang diinginkan.
Output
Disini dipilih cara mengeluarkan hasil encode, sesuai dengan sub judul makan akan dipilih Broadcast.
Setelah ketiga hal tersebut dilakukan maka proses encode dapat dimulai.
Cara melihat broadcast ini dapat dilakukan dengan cara menggunakan media player seperti Windows Media Player dengan memasukkan url mms://127.0.0.1:8080 seperti gambar berikut.
Dan berikut hasilnya.
Bagi yang tidak ingin menggunakan Windows Media Player maka ada alternatif akses via web dengan menggunakan Silverlight Media Player.
Tentu ada keterlambatan video yang akan kita lihat, karena ada proses pengambilan gambar dan encode kemudian baru di-broadcast.
Dari gambar di atas, paket yang dikirimkan via RTSP hanya satu ukuran yang akan berlaku sama untuk semua client yang terkoneksi. Format dan kompresi yang dipilih oleh user akan berpengaruh terhadap ukuran file video yang dikirim, makin bagus kualitas video maka ukuran file akan relatif besar. Bila ukuran paket yang dikirimkan melalui RTSP hanya 1452byte otomatis informasi yang disampaikan akan sedikit. Kecuali anda adalah juragan bandwidth yang mempunyai kecepatan download yang mumpuni. Sayangnya tidak semua user yang terkoneksi adalah juragan bandwith, tetapi ada kemungkinan terselip para pakir bandiwth.
{IIS Smooth Streaming}
Untuk kasus tersebut di atas maka dapat digunakan solusi seperti berikut ini.
Solusi ini hanya menggunakan protokol HTTP. Dengan solusi ini maka ukuran paket yang dikirim akan berbeda-beda, dengan isi informasi yang sama tetapi kualitas video yang berbeda. Bagi para juragan bandwith akan diberikan kualitas yang mempunyai kemampuan download yg cepat, sedangkan bagi pakir bandwith akan dikirimkan paket dengan kualitas yang sesuai. Kemampuan download client akan selalu ‘dipantau’ sehingga bila suatu saat client tiba-tiba mempunyai kemampuan download yg ok, maka secara otomatis file yang akan didownload akan meningkat pula kualitasnya, begitu pula sebaliknya.
Sebagai contoh, para pakir bandwith akan menerima kualitas video seperti berikut ini, ukuran paket hanya 300Kb.
Sedangkan bagi yang mempunyai koneksi cepat dapat menerima kualitas video seperti ini.
Dapat dilihat pada gambar, kualitas lebih jernih. Karena paket yang diterima berukuran 2,436MB. Pada gambar di atas dapat dilihat peningkatan ukuran paket yang didownload, sesuai dengan kecepatan yang dimiliki oleh client.
Source
IIS Smooth Streaming ‘mengharuskan’ source video lebih dari satu dengan kualitas yang berbeda, dari kualitas untuk downrate 300kb sampai 2,436Mb. Untuk membuat source video ini maka dapat digunakan Expression Encoder dengan memilih Transcoding Project. Dan memilih IIS Smooth Streaming sebagai Output Format.
Jika file video dengan nama file ProjectNatal.wmv di-encode dengan format IIS Smooth Streaming maka berikut ini adalah hasilnya.
Dari gambar di atas dapat dilihat file ProjectNatal.wmv akan diubah menjadi beberapa file ProjectNatal_{ukuran paket}.ismv, dari ukuran paket per 230Kb sampai 1,664Mb. Selain itu juga terdapat dua file tambahan, yaitu :
- ProjectNatal.ism adalah file Server manifest yang berisi informasi hubungan antara media track, bitrate dan file yang ada. File ini diperlukan oleh IIS Smooth Streaming server.
- ProjectNatal.ismc, adalah file Client manifes yang berisi informasi yang diterima oleh client berupa available stream, codec yang digunakan, bitrates encoded, resolusi video, marker, caption dan lain-lain.
Server
Saatnya ‘Source’ di atas ‘di-deploy’ pada IIS sebagai web server. Namun sebelumnya IIS harus ‘di-tambahkan’ kemampuan Smooth Streaming dengan mendownload kemampuan tersebut di http://www.iis.net/download/LiveSmoothStreaming. Setelah diinstall maka kemampuan tersebut dapat dilihat via Internet Information Server (IIS) Manager.
Deployment
Selanjutnya adalah menambahkan Application pada Default Web Site dengan nama smooth yang berisi file ismv, ism dan ismc.
Selanjutnya mendaftarkan file Server manifest dengan cara memilih seperti pada gambar berikut ini.
Kemudian pilih Add dan daftarkan file Server manifest.
Q : Apakah harus mendaftarkan file Server manifest ?
A : Tentu, tidak…walau tidak didaftarkan juga masih akan Smoooooth :P
Player
Selanjutnya adalah membuat Video Player dengan memanfaatkan Silverlight dan tentu saja harus support Smooth Streaming. Untuk itu perlu di-download terlebih dahulu library yang akan mempermudah pembuatannya, library tersebut dapat ditemui di http://www.iis.net/download/SmoothClient. Setelah file didapat dan di-install maka Microsoft.Web.Media.SmoothStreaming.dll dapat ditemui pada folder C:\Program Files\Microsoft SDKs\IIS Smooth Streaming Client\v1.0 atau C:\Program Files (x86)\Microsoft SDKs\IIS Smooth Streaming Client\v1.0 bagi pemakai OS x64.
Untuk membuat video player ini dapat menggunakan Expression Blend atau Visual Studio, berikut adalah langkah yang dapat diikuti untuk membuat video player dengan Expression Blend 4.
Setelah project Silverlight dibuat, maka tambahkan Microsoft.Web.Media.SmoothStreaming.dll sebagai reference.
Setelah langkah di atas dilakukan maka namespace Microsoft.Web.Media.SmoothStreaming dapat didaftarkan pada file MainPage.xaml seperti yang dilihat pada baris ke-5. Kemudian tinggal ditambahkan element untuk menampilkan video yang dapat dilihat pada baris ke-9. Pada element SmoothStreamingMediaElement ini terdapat atribut SmoothStreamingSource yang berisi file Server manifest.
1: <UserControl
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: x:Class="SilverlightApplication1.MainPage"
5: xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
6: Width="640" Height="480">
7:
8: <Grid x:Name="LayoutRoot" Background="White">
9: <SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="http://localhost/smooth/ProjectNatal.ism/Manifest" Grid.Row="0" />
10: <StackPanel Orientation="Horizontal" Grid.Row="1">
11: <Slider x:Name="VolumeBar" Width="459" Value="{Binding Volume, ElementName=SmoothPlayer, Mode=TwoWay}" Height="31" VerticalAlignment="Bottom" />
12: <Button x:Name="PlayButton" Content="Play" Width="50" Click="PlayButton_Click" Loaded="PlayButton_Loaded" Height="31" VerticalAlignment="Bottom"/>
13: <Button x:Name="StopButton" Content="Stop" Width="50" Click="StopButton_Click" Height="31" VerticalAlignment="Bottom" />
14: </StackPanel>
15: </Grid>
16: </UserControl>
Untuk event-handler element slider dan button dapat dilihat pada kode di bawah ini. Pada baris ke-11 dapat dilihat pendaftaran namespace Microsoft.Web.Media.SmoothStreaming.
1: using System;
2: using System.Windows;
3: using System.Windows.Controls;
4: using System.Windows.Documents;
5: using System.Windows.Ink;
6: using System.Windows.Input;
7: using System.Windows.Media;
8: using System.Windows.Media.Animation;
9: using System.Windows.Shapes;
10:
11: using Microsoft.Web.Media.SmoothStreaming;
12:
13: namespace SilverlightApplication1
14: {
15: public partial class MainPage : UserControl
16: {
17: public MainPage()
18: {
19: // Required to initialize variables
20: InitializeComponent();
21: }
22:
23: private void PlayButton_Loaded(object sender, RoutedEventArgs e)
24: {
25: switch (SmoothPlayer.AutoPlay)
26: {
27: case false:
28: PlayButton.Content = "Play";
29: break;
30: case true:
31: PlayButton.Content = "Pause";
32: break;
33: }
34: }
35:
36: private void PlayButton_Click(object sender, RoutedEventArgs e)
37: {
38: switch (SmoothPlayer.CurrentState)
39: {
40: case SmoothStreamingMediaElementState.Playing:
41: SmoothPlayer.Pause();
42: PlayButton.Content = "Play";
43: break;
44:
45: case SmoothStreamingMediaElementState.Paused:
46: SmoothPlayer.Play();
47: PlayButton.Content = "Pause";
48: break;
49:
50: case SmoothStreamingMediaElementState.Stopped:
51: SmoothPlayer.Play();
52: PlayButton.Content = "Pause";
53: break;
54: }
55: }
56:
57: private void StopButton_Click(object sender, RoutedEventArgs e)
58: {
59: SmoothPlayer.Stop();
60: PlayButton.Content = "Play";
61: }
62:
63: }
64: }
Setelah project di-build, maka folder ClientBin, file Default.html dan Silverlight.js dapat di-copy ke folder “smooth” tempat video & file manifest disimpan. Maka video siap dinikmati dengan smooth sesuai dengan bandwidth yang dimiliki oleh user.
{Event}
Tulisan di atas adalah materi sederhana yang dibawakan saat saya kebetulan sebagai tamu pada acara yang bertempat pada Aula BAPPEDA Provinsi Kalimantan Selatan.
Pada acara ini, kebetulan pesertanya yang datang sekitar 250 orang ini saya bercerita tentang Expresion Encoder untuk transcoding video, publish dan broadcasting. Selain itu juga mestinya menceritakan teknologi IIS Smooth Streaming, tetapi karena waktu yang diberikan terlalu sedikit (30 menit untuk 3 pembicara dari MUGI) maka IIS Smooth Streaming terpaksa harus di-cut.
Alhamdulillah tidak ada masalah dengan projector :)
This is it…..akhir kata selamat menikmati akhir pekan.
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.
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 :
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.
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.
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!
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.
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();
10: bi.SetSource(stream);
11:
12: double cx = (double)bi.PixelWidth;
13: double cy = (double)bi.PixelHeight;
14:
15: // resize ukuran gambar yang ditampilkan
16: if (cx > 390.0 || cy > 390.0)
17: {
18: if (cx >= cy)
19: {
20: cy *= 390.0 / cx;
21: cx = 390.0;
22: }
23: else
24: {
25: cx *= 390.0 / cy;
26: cy = 390.0;
27: }
28: }
29: Image image = new Image();
30: image.Source = bi;
31:
32: WriteableBitmap wb1 = new WriteableBitmap((int)cx, (int)cy);
33: ScaleTransform transform = new ScaleTransform();
34: transform.ScaleX = cx / bi.PixelWidth;
35: transform.ScaleY = cy / bi.PixelHeight;
36: wb1.Render(image, transform);
37: wb1.Invalidate();
38:
39: Image gambar = new Image();
40: gambar.Source = wb1;
41:
42: label1.Content = fi.Name;
43: DropArea.Children.Add(gambar);
44:
45: gambar.MouseLeftButtonDown += new MouseButtonEventHandler(OnButtonDown);
46: gambar.MouseMove += new MouseEventHandler(OnMouseMove);
47: gambar.MouseLeftButtonUp += new MouseButtonEventHandler(OnButtonUp);
48: }
49: catch (Exception)
50: {
51: }
52: }
53: }
Hal lain yang perlu diubah adalah event handler berikut ini :
1: private void OnButtonDown(object sender, MouseButtonEventArgs e)
2: {
3: ((FrameworkElement)sender).SetValue(Canvas.ZIndexProperty, _zindex++);
4:
5: _lastx = e.GetPosition(null).X;
6: _lasty = e.GetPosition(null).Y;
7:
8: ((FrameworkElement)sender).CaptureMouse();
9: _dragging = true;
10: }
Pada event handler ini yang ditambahkan adalah pada baris ke-3, yang bertujuan untuk mengubah nilai dari ZIndex dari gambar yang dipilih, sehingga ketika tombol ditekan pada suatu objek gambar, nilai ZIndex objek gambar itu akan bertambah. Artinya bila gambar tersebut tertindih oleh gambar-gambar yang lain, ketika dipilih gambar tersebut akan nyembul di atas gambar-gambar lainnya :)
Berikut hasilnya :
Dan berikut solution yang bisa langsung dicoba.
Setelah mencoba fitur Drop pada Silverlight 4.0 di sini, maka lucu rasanya kalau cuma ngedrop gambar tapi didiamkan begitu saja tanpa diapa-apain. Pada posting kali ini akan dicoba memberikan kemampuan agar gambar yang di-drop dapat digerakan sesuai keinginan user.
Berikut ini adalah kode terakhir pada posting yang membahas fitur Drop.
1: private void DropArea_Drop(object sender, DragEventArgs e)
2: {
3: if (e.Data != null)
4: {
5: FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
6:
7: foreach (FileInfo fi in files)
8: {
9: DropArea.Children.Clear();
10:
11: using (Stream stream = fi.OpenRead())
12: {
13: try
14: {
15: BitmapImage bi = null;
16:
17: bi = new BitmapImage();
18: bi.SetSource(stream);
19:
20: double cx = (double)bi.PixelWidth;
21: double cy = (double)bi.PixelHeight;
22:
23: // resize ukuran gambar yang ditampilkan
24: if (cx >= cy)
25: {
26: cy *= 390.0 / cx;
27: cx = 390.0;
28: }
29: else
30: {
31: cx *= 390.0 / cy;
32: cy = 390.0;
33: }
34:
35: Image image = new Image();
36: image.Source = bi;
37:
38: WriteableBitmap wb1 = new WriteableBitmap((int)cx, (int)cy);
39: ScaleTransform transform = new ScaleTransform();
40: transform.ScaleX = cx / bi.PixelWidth;
41: transform.ScaleY = cy / bi.PixelHeight;
42: wb1.Render(image, transform);
43: wb1.Invalidate();
44:
45: Image gambar = new Image();
46: gambar.Source = wb1;
47:
48: label1.Content = fi.Name;
49: DropArea.Children.Add(gambar);
50: }
51: catch (Exception)
52: {
53: }
54: }
55: }
56: }
57: }
Pada baris ke-49 dapat dilihat objek gambar yang “ditambahkan ke dalam” objek“ DropArea. Objek gambar adalah file gambar yang kita drop pada aplikasi Silverlight ini. Agar objek itu dapat kita gerakan ke area yang diinginkan maka objek tersebut mesti ditambahkan kemampuan, sebagai berikut :
- Event handler ketika mouse diklik pada objek gambar.
- Event handler ketika mouse digerakkan saat tombol kiri mouse masih ditekan.
- Event handler ketika tombol kiri mouse dilepas.
Dengan ketiga kemampuan tersebut maka kita dapat memilih objek yang akan digerakkan dengan cara mengkliknya, menahan dan menggerakkan objek tersebut ke lokasi yang diinginkan. Ketika objek telah mencapat lokasi yang diinginkan maka ketika tombol mouse diangkat, objek akan menetap pada lokasi tersebut.
Untuk mendaftarkan ketiga kemampuan tersebut dapat digunakan baris berikut ini :
gambar.MouseLeftButtonDown += new MouseButtonEventHandler(OnButtonDown);
gambar.MouseMove += new MouseEventHandler(OnMouseMove);
gambar.MouseLeftButtonUp += new MouseButtonEventHandler(OnButtonUp);
Dari contoh di atas dapat dilihat objek gambar sudah mempunyai ketiga kemampuan yang telah disebutkan di atas, dimana masing-masing kemampuan tersebut akan memanggil method OnButtonDown, OnMouseMove dan OnButtonUp.
{OnButtonDown}
Method ini akan dipanggil ketika objek gambar diklik. Yang dilakukan adalah mengambil nilai x,y dari objek tersebut. Kemudian memberikan status bahwa objek dapat digerakkan.
private void OnButtonDown(object sender, MouseButtonEventArgs e)
{
_lastx = e.GetPosition(null).X;
_lasty = e.GetPosition(null).Y;
((FrameworkElement)sender).CaptureMouse();
_dragging = true;
}
{OnMouseMove}
Method ini akan membuat objek gambar dapat digerakkan selama tombol kiri mouse ditekan.
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (_dragging)
{
double x = e.GetPosition(null).X;
double y = e.GetPosition(null).Y;
double dx = x - _lastx;
double dy = y - _lasty;
_lastx = x;
_lasty = y;
((FrameworkElement)sender).SetValue(Canvas.LeftProperty, (double)((FrameworkElement)sender).GetValue(Canvas.LeftProperty) + dx);
((FrameworkElement)sender).SetValue(Canvas.TopProperty, (double)((FrameworkElement)sender).GetValue(Canvas.TopProperty) + dy);
}
}
{OnButtonUp}
Sedangkan Method ini akan dipanggil ketika tombol kiri mouse di lepas.
private void OnButtonUp(object sender, MouseButtonEventArgs e)
{
((FrameworkElement)sender).ReleaseMouseCapture();
_dragging = false;
}
Dan gambar yang di-drop akhirnya bisa digerakkan ke lokasi yang diinginkan.
Source contoh ini dapat diunduh pada link di bawah ini.
More Posts
Next page »