Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Hacking Mouse Scroll Event pada Silverlight 1.0

Silverlight 1.0 hanya memiliki mouse yang terbatas yaitu MouseMove, MouseEnter, MouseLeave, MouseLeftButtonDown dan MouseLeftButtonUp. Dari kelima event yang dimiliki oleh Silverlight 1.0 tersebut tidak bisa untuk menangkap event yang terjadi pada waktu scroll mouse berputar. Mouse scroll dapat diakali (hack) dengan memanfaatkan elemen HTML <select> dengan event onchange. Saat fokus pada element <select> dan scroll mouse diputar, index pada element tersebut akan berubah. Perilaku ini dapat dimanfaatkan untuk menangkap event scroll pada mouse.

Berukut langkah-langkah untuk melakukan hack terhadap event mouse scroll.

Buat halaman HTML yang dijadikan sebagai host Silverlight dengan nama file zoom.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Zoom by Scroll Demo</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="zoom.html.js"></script>
<script type="text/javascript" src="zoom.xaml.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost" style="border: solid 1px #7f7f7f; display: inline;">
</div>
<script type="text/javascript">
createSilverlight();
</script>
</
body>
</html>

Buat file XAML untuk menampilkan sebuah foto dengan nama file zoom.xaml.

<Canvas xmlns=http://schemas.microsoft.com/client/2007 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Image x:Name="Photo" Source="images/Foto002.jpg"> <Image.RenderTransform> <ScaleTransform x:Name="ZoomTransform" ScaleX="0.8" ScaleY="0.8" /> </Image.RenderTransform> </Image> </Canvas>

Buat code-behind JavaScript untuk membuat object Silverlight dengan nama file zoom.html.js.

function createSilverlight()
{
    var zoom = new Masykur.Demo.Zoom();
    Silverlight.createObjectEx({
        source: 'zoom.xaml',
        parentElement: document.getElementById('SilverlightPlugInHost'),
        id: 'SilverlightPlugIn',
        properties: {
            width: '800',
            height: '600',
            background:'#ffffff',
            isWindowless: 'false',
            version: '1.0'
        },
        events: {
            onError: null,
            onLoad: Silverlight.createDelegate(zoom, zoom.handleLoad)
        },        
        context: null 
    });
}

if (!window.Silverlight) 
    window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
    return function() {
        return method.apply(instance, arguments);
    }
}

Nah terakhir adalah code-behind XAML untuk menangani event object Silverlight dengan nama file zoom.xaml.js. Code ini yang akan digunakan untuk melakukan hack terhadap event mouse scroll.

if (!window.Masykur) {
    window.Masykur = {};
}
Masykur.registerNamespace = function (ns)
{
    var nsParts = ns.split(".");
    var root = window;

    for(var i=0; i<nsParts.length; i++) {
        if(typeof root[nsParts[ i ]] == "undefined") {
            root[nsParts[ i ]] = new Object();
        }
        root = root[nsParts[ i ]];
    }
}

Masykur.registerNamespace("Masykur.Demo");

Masykur.Demo.Zoom = function() 
{
}

Masykur.Demo.Zoom.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        this.plugIn = plugIn;
        this.userContext = userContext;
        this.rootElement = rootElement;
        this.photo = rootElement.findName('Photo');
        this.zoomTransform = rootElement.findName('ZoomTransform');
        this.photo.addEventListener("MouseMove", 
Silverlight.createDelegate(this, this.handleMouseMove)); this.createZoomScroll(); }, handleMouseMove : function(sender, eventArgs) { this.selZoom.focus(); }, zoom : function(scale) { this.zoomTransform.scaleX = scale; this.zoomTransform.scaleY = scale; }, createZoomScroll : function() { this.selZoom = document.createElement("select"); for (var i = 0; i < 19; i++) { var opt = document.createElement("option"); this.selZoom.appendChild(opt); } this.selZoom.selectedIndex = 16; var obj = this; this.selZoom.onchange = function() { var _zoom = 0.1 + (this.selectedIndex / 20); obj.zoom(_zoom); }; var bd = document.getElementsByTagName('body'); bd[0].appendChild(this.selZoom); // hide scroll element this.selZoom.style.position = 'absolute'; this.selZoom.style.top = -100; } }

Inti dari hacking ini adalah memanfaatkan elemen HTML <select>. Pada waktu Silverlight di-load, akan menginisialisasi semua elemen yang ada dan diakhir inisialisasi dibuat sebuah elemen <select>. Pembuatan elemen <select> dilakukan pada fungsi createZoomScroll(). Buat elemen <select> secara runtime menggunakan method document.createElement("select") dan tambahkan option sebanyak yang diperlukan. Setelah elemen <select> dibuat, tempatkan pada halaman dan sembunyikan dengan meletakkan posisinya pada lokasi negatif. Untuk membuat agar elemen <select> selalu di-focus, pada event MouseMove, dipanggil fungsi focus(). Selanjutnya buat event handler untuk event onchange pada element <select> dan panggil fungsi zoom() untuk melakukan zooming.

Demikian tips hacking Silverlight ini, semoga bermanfaat.


Categories: Silverlight
Permalink | Comments (0) | Post RSSRSS comment feed

Comments

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading