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

Mengkombinasikan Silverlight dengan HTML

Silverlight memang sangat tangguh untuk menampilkan antar muka pengguna (user interface) yang interaktif dan menarik. Pada silverlight 1.0 fasilitas yang tersedia masih sangat terbatas, hanya dapat digunakan untuk menggambar vektor, animasi dan multimedia. Pada Silverlight 1.0 belum dikenal istilah kontrol termasuk kontrol sederhana seperti input textbox, combobox, dll. Pada Silverlight 2.0 baru akan ada kontrol baik yang out of the box telah tersedia maupun kontrol yang dibuat sendiri.

Permasalahan saat ini adalah kontrol HTML (contoh: Ajax Control Toolkit, Rich Text Editor, dll) jumlahnya sangat banyak dan tidak mungkin semua diubah menjadi kontrol Silverlight. Satu lagi permasalahan adalah jika menggunakan kontrol Silverlight 2.0, kesulitannya adalah mengkomunikasikan antara code-behind C# dengan Javascript.

Untuk memenuhi keterbatasan ini, dapat digunakan kombinasi antara Silverlight dan kontrol HTML yang sudah ada. Dengan mengkombinasikan keduanya, tidak perlu lagi mengubah semua kontrol yang sudah stabil di HTML menjadi objek Silverlight.

Penggabungan antara HTML dan Silverlight diperlukan pengaturan atribut isWindowless: 'true' pada waktu create object Silverlight. Jika isWindowless: 'false' maka kontrol HTML akan selalu berada di bawah Silverlight.

createSilverlight = function()
{
    var scene = new LayeredPage();
    Silverlight.createObjectEx({
        source: 'scene.xaml',
        parentElement: document.getElementById('SilverlightPlugInHost'),
        id: 'SilverlightPlugIn',
        properties: {
            width: '800',
            height: '600',
            background: 'transparent',
            isWindowless: 'true',
            version: '1.0',
            framerate: "25"
        },
        events: {
            onError: null,
            onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
        },       
        context: null
    });

}

Dengan mengeset isWindowsless menjadi 'true' ada sesuatu yang harus dibayar yaitu tiap ada perubahan, semua element XAML akan dirender ulang. Jika isWindowless diset 'false', hanya elemen yang berubah saja yang akan dirender. Jika elemen tidak terlalu banyak animasi, hal tersebut bukan masalah. Jika banyak animasi, performance dapat ditingkatkan dengan menurunkan framerate dari default-nya 60pfs menjadi 25-30fps.


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