Arsip untuk ‘SilverLight’ Kategori

h1

Alternatif Melihat Tayangan Olimpiade Menggunakan Silverlight 2

Agustus 14, 2008

Alternatif Melihat Tayangan Olimpiade Menggunakan Silverlight 2


foto berita artikel

Microsoft, MSN dan NBC akan menyanggupi kerja sama dengan perusahaan Redmond dalam bisnis “groundbreaking online” pada pesta Olimpiade untuk memberikan tontonan kepada para pengguna Internet. Perusahaan Redmond menginginkan agar tontonan dapat dilihat tidak hanya melalui tv kabel tapi juga dapat dilihat melalui siaran Olimpiade di Internet. Silverlight 2 akan ditempatkan pada bagian tengah pada sistem kompetisi olah raga, bersamaan dengan NBCOlympics.com yang merupakan situs dari MSN. Scott Guthrie merupakan corporate vice president of the Developer Division at Microsoft mengatakan hotspot online akan menjadi aplikasi terbesar yang dibangun oleh Silverlight semenjak perusahaan ini meluncurkan alternatif untuk Adobe Flash.

NBCOlympics.com pada situs milik MSN akan memberikan pengalaman langsung kepada penggemar olahraga tidak seperti sebelumnya, disini mereka diijinkan untuk melihat apa yang ia inginkan. NBCOlympics.com akan menyiarkan 20 saluran secara online pada format video yang tersedia pada web. Untuk menaruh hal ini kedalam prespektif, jika anda ingin menyaksikan 2008 Summer Olympics merupakan pekerjaan yang akan menyita banyak waktu.

Erik Jorgensen, wakil ketua perusahaan MSN, mengungkapkan bahwa akan ada lebih dari 3,000 jam dalam kontent video. Di dalam konteks ini, NBCOlympics.com di MSN tidak hanya tempat hiburan online nomor satu untuk 2008 Beijing Olympic Games, tetapi juga sumber utama dari download Silverlight. Situs web mempunyai potensi untuk menyebarkan Silverlight untuk point dimana plug-in akan dapat digunakan pada format Flash sebagai standard untuk media interaktif dan pengalaman interaktif pada web. Guthrie mengatakan bahwa pengguna yang akan mendowload dan menginstall pug-in Silverlight browser hanya akan memerlukan waktu 10 detik saja.

Silverlight memungkinkan kemampuan baru seperti adanya pengelihatan “control room”, dimana mengizinkan kebanyakan aliran video untuk dilihat secara serempak dan dimungkinkan untuk memutar ulang dari Windows Media Player pada PC dan Mac. Fitur dari gambar tersebut akan mengizinkan penonton untuk melihat secara simultan untuk multiple feeds dan dapat dengan cepat memindahakan kesaluran yang lain yang ingin dilihatnya.

Ditulis dalam SilverLight | Bertanda | Leave a Comment »

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

Lebih Jauh Tentang Silverlight

Agustus 10, 2008

Lebih Jauh Tentang Silverlight


foto berita artikel

Microsoft Silverlight sebagai sebuah aplikasi baru dari sisi client telah mengalami dua masa pengembangan hingga saat ini. Dimulai dari versi Silverlight 1.0 RC yang hanya mengandalkan Javascript dalam penanganan obyek-obyeknya, hingga Silverlight 1.1 Alpha Refresh yang mengusung teknologi .NET Framework yang dilengkapi dengan komponen akses database server, Data Access LINQ. Format .NET Framework sendiri telah membuat Silverlight didukung tidak hanya Javascript saja, tetapi juga VB.NET dan C#, serta IronPython, IronRuby dan VBx.

Di masa yang akan datang, Microsoft juga akan mengembangkan Silverlight dengan komponen akses database ke database server dengan mempergunakan layanan web service. Komponen database yang akan memperlengkapi Silverlight ini adalah Data Access LINQ.

Silverlight sendiri merupakan aplikasi client-side yang dibangun dengan mempergunakan dasar XAML (Extensible Application Markup Language). XAML terdiri atas baris-baris perintah yang mengikuti aturan penulisan XML yang dipakai untuk membentuk obyek-obyek yang diinginkan. Silverlight memakai XAML untuk membuat obyek-obyek grafis, animasi maupun multimedia. XAML sendiri dapat dibuat dengan mengetikkan baris-baris perintah pada notepad secara langsung atau juga mempergunakan aplikasi development. Adapun aplikasi development yang dapat dipakai ada 2 (dua), yaitu Microsoft Expression Blend 2 dan Visual Studio 2008. Microsoft Ekspression Blend 2 merupakan aplikasi pembantu yang ditujukan untuk para web designer, sedangkan Visual Studio 2008 Orcas diperuntukkan khususnya bagi para programmer dan developer web. Microsoft Expression Blend 2 sendiri banyak digunakan untuk mengembangkan pembuatan obyek-obyek animasi, grafis dan multimedia dengan mempergunakan prinsip WYSIWYG (What You See Is What You Get), sehingga user dapat melakukan editing  dimana hasilnya dapat langsung dilihat. Selain itu tool in juga memudahkan user dalam membuat animasi dengan fasilitas ‘timeline’ yang tersedia.

Untuk dapat menikmati Microsoft Silverlight ini, Anda dapat melakukan download installer melalui web resminya di http://www.silverlight.net. Di dalam situs resmi Silverlight ini dapat diperoleh file installasi Silverlight 1.0 RC, Silverlight 1.1 Alpha Refresh (plug in Silverlight 1.1), Silverlight 1.0 SDK (berisi kumpulan contoh dan dokumentasi Silverlight 1.0) dan  Silverlight 1.1 SDK Alpha Refresh July 2007 (berisi kumpulan contoh dan dokumentasi Silverlight 1.1).(dna)

Ditulis dalam SilverLight | Bertanda | Leave a Comment »

h1

Silverlight 2.0

Agustus 10, 2008

Silverlight 2.0

Setelah Silverlight 1.1, maka di quarter ke satu 2008, bakal ‘terlihat’ Silverlight 2.0 (seperti apa yang ditulis oleh Om ScottGu). Ada apa di Silverlight 2.0?

Ini yang sudah saya tunggu-tunggu, yaitu Rich Control seperti berikut :

  • Core Form Control : textbox, checkbox, radiobutton dkk.
  • Layout Control : panel, grid dkk.
  • Functionality Control : tab, slider, scroll, progressbar dkk.
  • Data Manipulation Control : DataGrid dkk.

Artinya tidak perlu lagi membuat dan memanipulasi sendiri untuk membuat kontrol-kontrol seperti ini, artinya tidak perlu lagi menggunakan Silverlight Control Toolkit yang ada di CodePlex. Artinya nanti aplikasi web akan lebih menyenangkan bila menggunakan Silverlight (semoga).

Tetapi Q1 2008 masih ‘terlalu lama’ untuk sesuatu yang sangat ditunggu-tunggu.

Ditulis dalam SilverLight | 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 »