Arsip untuk ‘XAML’ Kategori

h1

Belajar Silverlight 1.0

Agustus 10, 2008

Yow.. yoww… Basi gak basi, gapapa lah.. namanya juga ilmu. Heheheee!

Buat yang baru banget belajar Silverlight, yuk kita belajar bareng! Jangan khawatir… Silverlight itu umurnya baru sekitar 1 tahun. Jadi sama sekali nggak terlambat kalau baru belajar sekarang.

“Sekarang?”

“Iya sekarang. Gak usah tunggu besok dahh..”

“Tapi kan susah?”

“Siapa bilang? Coba aja ikutin langkah di bawah ini..”

  1. Supaya rapih, bikin folder dulu deh. Misalnya nama foldernya BelajarSilverlight dan ada di drive D. Jadi lengkapnya D:\BelajarSilverlight\.
  2. Siapin file JavaScript yang namanya Silverlight.js. Script ini bisa didapat kalau udah install Silverlight 1.0 SDK. Setelah install SDK nya, kita bisa ambil file Silverlight.js di C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\Silverlight.js\. File Silverlight.js ini merupakan script pembantu yang memungkinkan content Silverlight untuk bisa tampil di halaman web.
  3. Nah, copy file Silverlight.js ke D:\BelajarSilverlight\. Jangan lupa… copy file Silverlight.js-nya, jangan folder Silverlight.js-nya.
  4. Yang namanya content Silverlight itu akan tampil di suatu halaman web. Nah, maka dari itu kita buat sebuah halaman web (masih tetep di folder D:\BelajarSilverlight\). Misalnya kita beri nama belajar.html. 
    <html>
<head>
    <title>Belajar Silverlight</title>
</head>
<body>

</body>
</html>
  5. Nah, pada halaman belajar.html, siapin sebuah elemen div. Elemen div ini  nantinya akan berfungsi sebagai “rumah” bagi content Silverlight. 
    <html>
<head>
    <title>Belajar Silverlight</title>
</head>
<body>
    <div id="rumahnyaSilverlight" style="width:400px; height:400px;"></div>
</body>
</html>
  6. Trus jangan lupa bikin referensi ke Silverlight.js. 
    <html>
<head>
    <title>Belajar Silverlight</title>
    <script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
    <div id="rumahnyaSilverlight" style="width:400px; height:400px;"></div>
</body>
</html>
  7. Hmm.. sekarang kita bikin content Silverlight-nya. Gak usah repot-repot deh, kita cuma mau bikin tulisan Silverlight is cool! aja kok. Nah, pertama-tama, buat sebuah file kosong di folder D:\BelajarSilverlight\ dengan nama belajar.xaml.
  8. Di dalam belajar.xaml, kita bikin dulu Canvas utama. Canvas ini adalah induk dari semua objek Silverlight. Artinya, semua objek Silverlight akan berada di dalam Canvas ini. Nah, pada Canvas utama ini kita harus kasih properti xmlns untuk memberitahukan namespace Silverlight mana yang kita pakai dan (kalau perlu) kasih properti xmlns:x untuk memberitahukan namespace XAML mana yang kita pakai. Nah, selain xmlns dan xmlns:x, Canvas juga memiliki properti lain, misalnya Background untuk mengatur warna latar belakang, Width untuk mengatur lebar Canvas dan Height untuk mengatur tinggi Canvas. 
    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Blue" Width="400" Height="400">

</Canvas>
  9. Kemudian kita buat tulisan Silverlight is cool! dengan menggunakan TextBlock 
    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Blue" Width="400" Height="400">

    <TextBlock Text="Silverlight is Cool!" />

</Canvas>
  10. Nah.. urusan halaman web udah selesai, urusan content Silverlight udah selesai. Trus sekarang tinggal menghubungkan halaman web dengan content Silverlight, tentunya dibantu dengan script pada Silverlight.js.
  11. Kita buat file JavaScript di folder D:\BelajarSilverlight\ dengan nama belajar.js (supaya rapih dan mudah diingat). File JavaScript ini akan menghubungkan content Silverlight dengan Silverlight.js. Pada belajar.js, kita akan membuat sebuah fungsi yang memanggil fungsi. Nah lho?? Gapapa lah… gampang lah itu.. Jadi gini. Di Silverlight.js, ada fungsi yang bernama createObject. Nah, fungsi inilah yang akan kita panggil. Fungsi ini butuh beberapa parameter untuk menentukan tampilan dan perilaku content Silverlight kita. Misalnya, file XAML mana yang jadi content Silverlight, elemen div mana yang jadi rumah bagi content Silverlight, berapa lebar dan tinggi content Silverlight, apa warna background Silverlight, dan seterusnya. Fungsi ini akan kita panggil di dalam file belajar.js, atau lebih tepatnya lagi di dalam sebuah fungsi pada file belajar.js.
  12. Kenapa harus membuat fungsi lagi untuk memanggil fungsi createObject? Karena untuk memudahkan kita memanggilnya pada halaman web. Yups! Kita gak mau repot menulis script panjang-panjang di halaman web kan? So… idenya adalah: nanti di halaman web nya kita akan memanggil sebuah fungsi pada belajar.js. Nah, cukup dengan memanggil fungsi tersebut, maka kita bisa menampilkan content Silverlight di halaman web.
  13. Nah kita buat fungsi yang kita bahas barusan dengan nama createMySilverlight. 
    function createMySilverlight(hostName)
{
    var host = document.getElementById(hostName);

    Silverlight.createObject
    (
        "belajar.xaml", host, "MySilverlightControl",
        {
            width:'400',
            height:'400',
            inplaceInstallPrompt:false,
            background:'Black',
            isWindowless:'true',
            framerate:'24',
            enableFramerateCounter:'false',
            version:'1.0'
        },
        {
            onError:null,
            onLoad:null
        },
        null
    );
}
  14. Ok! Hampir selesai nih. Kembali ke halaman web, kita panggil fungsi createMySilverlight setelah elemen div dan jangan lupa bikin referensi ke belajar.js.
    15. <html>
<head>
    <title>Belajar Silverlight</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="belajar.js"></script>
</head>
<body>
    <div id="rumahnyaSilverlight" style="width:400px; height:400px;"></div>
</body>
</html>
  15. Kalau semua sudah beres, maka kita bisa lihat hasilnya (halaman belajar.html) di browser.

image

Nahh.. gampang kan? Selamat belajar Silverlight!

Ditulis dalam SilverLight, XAML | Bertanda | Leave a Comment »

h1

Control Xaml dan Media pada ASP.NET Future

Agustus 10, 2008

Control Xaml dan Media pada ASP.NET Future

ASP.NET Future bukan barang baru, karena sejak July 2007 sudah bisa kita temui versi CTP-nya. Pada ASP.NET Future dipastikan sudah banyak yang tahu kalau di dalamnya terdapat control Xaml dan Media, yang keduanya sangat berhubungan dengan Silverlight (versi 1.0). ASP.NET Future dapat dibilang sebagai add-on dari ASP.NET AJAX Extension. Oleh karena itu untuk menggunakan control ini harus dipastikan bawah project web yang digunakan adalah project yang AJAX-enabled. Dan setiap kita akan menggunakan control ini dipastikan pula pada halaman tersebut (master page yang digunakan oleh halaman tersebut) sudah terdapat control ScriptManager (<asp:ScriptManager>).

Bagi yang sudah sering bermain dengan Silverlight pasti sudah mengetahui untuk ‘menampilkan’ file XAML ini diperlukan beberapa file yang terkain seperti Silverlight.js serta serta mesti melakukan beberapa langkah yang harus dilakukan, seperti membuat area dengan tag <div> pada halaman HTML (bisa file lain seperti ASPX, PHP, atau JSP) kemudian diperlukan mesti membuat fungsi dengan Javascript untuk membuat control Silverlight pada area yang telah dibuat tersebut.

Control Xaml

Dengan control Xaml [ <asp:Xaml> ] dari ASP.NET Future maka langkah-langkah tersebut di atas tidak perlu lagi dilakukan, tetapi ada ‘hal’ yang mesti kita ‘bayar’ sebagai ganti ‘kemudahan’ tersebut (setiap kemudahan selalu ada hal lebih lainnya yang harus di bayar, ini adalah konsep dasar dari kekekalan energi, atau berdasarkan hukum Equivalent Exchange dari ilmu Alchemist : “People cannot gain anything without sacrificing something, You must present something that equal value in order to gain something”, atau berdasarkan ucapan Antoine Lavoisier tentang Law of conservation of matter – ngga nyambung nih) yaitu untuk menggunakan control ini halaman ASPX tersebut harus berada pada web project AJAX-enable (seperti yang telah disebutkan di atas).

Setelah ASP.NET Future diinstall, maka dapat dilihat terdapat control tambahan pada Toolbox.

future1

Drap dan drop pada bagian yang diinginkan kemudian tinggal tunjuk letak file XAML yang ingin ditampilkan.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Xaml ID="Xaml1" runat="server"
            Height="100px"
            Width="300px"
            XamlUrl="Page.xaml">
        </asp:Xaml>
    </div>
    </form>
</body>
</html>

Bila pada file Page.xaml terdapat event untuk meng-handle ketika tombol sebelah kiri mouse diklik seperti berikut :

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="640"
        Height="480"
        Background="White"
        >
  <TextBlock Text="Hello Silverlight" MouseLeftButtonDown="Mouse_Click" />
</Canvas>

Dan fungsi Mouse_Click disimpan didalam file Page.xaml.js dengan isi sebagai berikut :

function Mouse_Click(sender, eventArgs)
{
    alert('Hello Silverlight');
}

Dengan kasus di atas dengan mengklik elemen TextBlock maka dipastikan akan ditampilkan dialog box.

Control Media

Dapat dikatakan dengan menggunakan control ini kita akan mempunyai Silverlight Media Player cukup dengan menulis beberapa baris kode seperti berikut :

<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <asp:Media ID="Media1" runat="server"
            Height="240px"
            Width="320px"
            MediaSkin="Professional"
            MediaUrl="video.wmv">
 </asp:Media>

Ada beberapa MediaSkin yang dapat menjadi pilihan, berikut contoh skin untuk control ini.

future2 future3

Pada control ini juga dapat dibuat Chapter yang nanti dapat ditampilkan seperti pada contoh gambar berikut:

future4

Dapat dilihat pada bagian bawah gambar di atas ini, terdapat gambar yang merupakan Chapter pada film yang ditampilkan. Untuk membuat seperti itu maka dapat dilakukan dengan menulis kode seperti berikut ini.

<asp:Media ID="Media1" runat="server"
            Height="240px"
            Width="320px"
            MediaSkin="Classic"
            MediaUrl="video.wmv">
            <Chapters>
                <asp:MediaChapter TimeIndex="23"
                    Title="Fantastic 4"
                    ImageUrl="f4.jpg" />
                <asp:MediaChapter TimeIndex="64"
                    Title="Jumper"
                    ImageUrl="jumper.jpg" />
                <asp:MediaChapter TimeIndex="87"
                    Title="Cloverfield"
                    ImageUrl="cloverfield.jpg" />
            </Chapters>
</asp:Media>

Done, lumayan untuk mengisi waktu istirahat karena sekarang tidak bisa lagi mendapatkan DVD (bajakan – baik film ataupun software) di Bandung, karena razia besar-besaran yang membuat seluruh penjual baik besar dan kecil menghilang…hmm

Ditulis dalam ASP .Net, SilverLight, XAML | Bertanda , , , | Leave a Comment »