.NET 3.5 Clinic - Silverlight presentation and demos
Seperti yang saya janjikan kemarin, hari ini saya publish materi presentasi Silverlight dan demo kode. Sebenarnya awalnya saya tidak ingin menggunakan model presentasi, pengennya sih ngobrol dan kita solving case saja. Akan tetapi mengingat peserta yang datang 99% belum pernah code menggunakan Silverlight ya akhirnya harus menjelaskan dari awal.
Untuk menjelaskan dari awal, slide dan demo yang menurut saya paling cocok adalah slide dari Scott Guthrie. Meski demikian, saya berikan beberapa penambahan yang sesuai dengan karakteristik yang sekarang. Seperti misalnya, saya tambahkan dukungan ADO .NET Data Service. Yakni bagaimana Silverlight bisa mengkonsumsi ADO .NET Data Service selain tentu saja Web Service. ADO .NET Data Service dulu memiliki code name "Astoria". Dan tidak lupa hal yang sangat mendasar yakni bagaimana cara memahami Silverlight project yang diintegrasikan ke dalam aplikasi ASP .NET Anda.
Berikut ini adalah apa yang saya sampaikan di .NET Clinic tanggal 17 Januari 2008 :
- Silverlight + .NET Overview
- Getting Started
- XAML
- Shapes
- Controls
- Layout
- Brushes and Transforms
- Events and Code
- Building Custom Controls
- HTML and Script Integration
- File Open Dialog
- HTTP Network Access
- Web Services
- ADO .NET Data Services - NEW
- Isolated Storage
Pertama, bukalah Visual Studio 2008 Anda. Klik File --> New Project. Pilih "Silverlight Project" dari template yang ada. Saya menggunakan bahasa Visual C#. Berilah nama "SilverlightDemos". Setelah itu buatlah sebuah website baru bertipe "ASP .NET 3.5 Extensions Web Site" dari template yang tersedia, beri nama "SilverlightWebDemos". Jadi, sekarang Solution Explorer Anda berisi 2 project yakni :
- Silverlight Project bernama "SilverlightDemos"
- ASP .NET 3.5 Extensions bernama "SilverlightWebDemos"
Part I - Bekerja dengan SilverlightWebDemos
Klik pada "SilverlightWebDemos", lalu klik kanan dan pilih "Add New Item".
Dari template yang ada, pilih "ADO .NET Entity Data Model". Beri nama "Northwind.edmx". Saya akan menggunakan database Northwind sebagai contoh.
Sesaat akan tampil pesan seperti di bawah ini, klik Yes saja. Anda pasti tahu maksudnya bukan ? :)
Setelah klik Yes, kemudian akan ditampilkan "Entity Data Model Wizard". Lalu pilih "Generate from database" dan klik tombol Next.
Isikan koneksi string database Northwind yang ada pada komputer Anda. Kemudian klik tombol Next.
Pilihlah "Database Objects" yang ingin Anda sertakan di dalam ADO .NET Entity Data Model. Saya hanya memilih "Tables" saja. Hilangkan centang pada Views dan Stored Procedure. Lalu klik Finish.
Tunggulah beberapa saat. Setelah itu Visual Studio akan menampilkan struktur ADO .NET Entity Data Model untuk database Northwind Anda sebagai berikut :
Ok. Semua sudah dilakukan dengan baik. Yang Anda lihat sebenernya representasi code yang ditampilkan secara visual. Di belakang layar, Anda sudah dibuatkan class-class yang berhubungan dengan table yang Anda letakkan di dalam ADO .NET Entity Data Model.
Langkah berikutnya adalah membuat ADO .NET Data Service pada aplikasi web Anda agar dapat diconsume oleh Silverlight.
Klik kanan kembali pada project website Anda. Lalu pilih "Add New Item".
Dari template yang ada, pilih "ADO .NET Data Service" dan beri nama "Northwind.svc" dan klik tombol Add.
Setelah itu akan ditampilkan halaman code sebagai berikut :
Perhatikan area yang saya beri warna merah. Itu adalah area tempat Anda menambahkan kode yang diperlukan agar ADO .NET Data Service dapat berfungsi dengan baik. Tambahkan kode berikut ini pada dua area merah tersebut :
NorthwindModel.NortwindEntities adalah class yang terbentuk saat Anda melakukan generate via ADO .NET Entity Model Wizard di langkah sebelumnya. Anda bisa melihatnya pada file web.config untuk lebih jelasnya. Sedangkan config.SetResourceContainerAccessRule() itu adalah method yang harus Anda panggil untuk membuat entity yang ada bisa Anda akses berdasarkan apa hak aksesnya (bisa All, AllRead, Write, dsb). Anda bisa mengacu pada dokumentasi ADO .NET Data Service untuk mendapatkan informasi yang lebih detail mengenai ini.
Setelah semua sudah diisi, simpanlah hasil perubahan Anda. Dan saatnya sekarang Anda mengkonsumsi service-nya melalui browser. Caranya adalah klik kanan pada file "Northwind.svc" lalu klik "View in Browser". Perhatikan address yang terbentuk. Nah, alamat inilah yang nanti akan kita butuhkan di project Silverlight kita sebagai sumber data.
Sesaat akan ditampilkan tampilan XML berformat ATOM.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
- <service xml:base="http://localhost:53980/SilverlightWebDemos/Northwind.svc/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns="http://www.w3.org/2007/app">
- <workspace>
<atom:title>Default</atom:title>
- <collection href="Categories" mce_href="Categories">
<atom:title>Categories</atom:title>
</collection>
- <collection href="CustomerDemographics" mce_href="CustomerDemographics">
<atom:title>CustomerDemographics</atom:title>
</collection>
- <collection href="Customers" mce_href="Customers">
<atom:title>Customers</atom:title>
</collection>
- <collection href="Employees" mce_href="Employees">
<atom:title>Employees</atom:title>
</collection>
- <collection href="Order_Details" mce_href="Order_Details">
<atom:title>Order_Details</atom:title>
</collection>
- ... remove for brevity ...
</workspace>
</service>
Sekarang test-lah service Anda menggunakan beberapa URL sebagai berikut :
http://localhost:53980/SilverlighWebDemos/Northwind.svc/Products
http://localhost:53980/SilverlighWebDemos/Northwind.svc/Products(1)
http://localhost:53980/SilverlighWebDemos/Northwind.svc/Products(1)/Suppliers
Yes ! That's ADO .NET Data Services. Sekarang hanya melalui URL saja Anda bisa mendapatkan data yang jauh lebih mudah dibandingkan web service. :) Terakhir, pada project SilverlightWebDemos, klik kanan lalu pilih "Add Silverlight Link" dan arahkan pada "SilverlightDemos". That's it. Saat nanti Anda mem-build website atau Silverlight project-nya, maka otomatis library hasil compile terbaru dari Silverlight project itu akan secara otomatis di-copy-kan ke website-nya.
Part II
Sekarang klik pada SilverlightDemos, lalu tambahkan sebuah folder baru bernama "10_Astoria". Ini hanyalah penamaan saja, saya hanya mengurutkan dari sample demo yang dibuat oleh Scott Guthrie. Demo file dari Scott Guthrie tidak menyertakan ADO .NET Data Services, jadi saya lengkapi. :)
Desain Silverlight yang saya buat tidak neko-neko, cuku sebuah TextBlock saja yang nanti akan me-retrieve data dari server menggunakan ADO .NET Data Service. Ya, Anda bisa memodifikasi dengan lebih baik lagi menggunakan Expression Blend untuk menghasilkan desain UI yang lebih intuitive dan interaktif.
Klik kanan pada folder "10_Astoria" lalu pilih "Add New Item" dan dari template yang ada lalu klik "Silverlight" dan klik "Silverlight Page". Beri nama "AstoriaTest.xaml".
Sesaat kemudian akan terbentuk file AstoriaTest.xaml di folder "10_Astoria". Perhatikan pada code .xaml yang dihasilkan, lalu tambahkan TextBlock sehingga seperti di bawah ini :
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightDemos._10_Astoria.AstoriaTest;assembly=../ClientBin/SilverlightDemos.dll"
Width="640"
Height="480"
Background="White"
>
<TextBlock x:Name="txtResult" FontFamily="Tahoma" FontSize="16"></TextBlock>
</Canvas>
Adapun x:Name itu padanannya jika di ASP .NET adalah ID. Artinya nanti Anda bisa mengacu referensi TextBlock itu menggunakan pola txtResult.[member]. Masuklah ke code behind dari AstoriaTest.xaml tersebut, lalu isilah dengan kode berikut ini :
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Data.WebClient;
namespace SilverlightDemos._10_Astoria {
public class Region {
public int RegionID { get; set; }
public string RegionDescription { get; set; }
}
public partial class AstoriaTest : Canvas {
public void Page_Loaded(object o, EventArgs e) {
// Required to initialize variables
InitializeComponent();
WebDataContext context = new WebDataContext("http://localhost:53980/SilverlightWebDemos/Northwind.svc");
WebDataQuery<Region> regions = context.CreateQuery<Region>("/Region?$orderby=RegionDescription");
foreach(Region reg in regions) {
txtResult.Text += reg.RegionDescription.Trim() + Environment.NewLine;
}
}
}
}
Perhatikan yang saya cetak tebal pada kode tersebut.
Bagian pertama saya membuat local class bernama Region agar bisa saya put sebagai tipe data untuk class collection WebDataQuery<T> agar Silverlight saya dapat mengkonsumsi ADO .NET Data Services sebagai sumber datanya dengan cara yang lebih mudah. Saya menggunakan library yang disediakan oleh Microsoft agar Silverlight dapat mengakses ADO .NET Data Service. Library tersebut ada di dalam assembly "Microsoft.Data.WebClient". Dan perlu Anda ketahui bahwa ada 2 versi assembly ini yakni "Microsoft.Data.WebClient" yang terdapat pada folder "C:\Program Files\Reference Assemblies\Microsoft\Framework\ASP.NET 3.5 Extensions" dan library sebagai SilverlightAddsOn yang di download terpisah khusus untuk Silverlight. Namanya sama-sama "Microsoft.Data.WebClient", tetapi berbeda pada versioning. Khusus untuk Silverlight, Anda tidak bisa menggunakan library yang berada di dalam folder "C:\Program Files\Reference Assemblies\Microsoft\Framework\ASP.NET 3.5 Extensions", tetapi harus mendownload secara terpisah dari sini.
Setelah itu compile-lah Silverligh project Anda. Secara otomatis, struktur folder dan file-file presentation layer serta .DLL yang dihasilkan akan dicopy-kan ke website Anda. Dan sekarang Silverlight Anda sudah bisa mengkonsumsi ADO .NET Data Service. Perlu dicatat bahwa saat ini Silverlight belum mengizinkan pemanggilan lintas domain (cross domain), jadi artinya setelah Anda buat code tersebut di Silverlight project, maka silverlight host-nya harus Anda buat lagi di website-nya. Anda tidak bisa langsung menjalankannya dari Silverlight project baik melalui View in Browser maupun Build. Sintaks javascript untuk memanggil Silverlight plug-in harus Anda buat di dalam website yang berisi ADO .NET Data Service ini.
Kombinasi antara ADO .NET Entity Data Model dan ADO .NET Data Service sangat mempercepat waktu development dan sangat fleksibel. Meski demikian, pendekatan dalam bekerja dengan ADO .NET Data Service bisa juga menggunakan custom business object, tidak melulu ADO .NET Entity Data Model. Kata "Data" pada "Data Service" tidak melulu identik dengan "Database". Itu bisa berarti ANY DATA !. ADO .NET Data Service bekerja dengan semua tipe-tipe yang mengimplementasikan IQueryable<T>. Artinya juga Anda bisa membuat dengan pendekatan LINQ to SQL karena DataContext yang dihasilkannya mengexpose individual entities sebagai turunan dari tipe Table<T> yang juga mengimplementasikan IQueryable<T>. Coba perhatikan pada bagian ini :
public class Northwind : WebDataService<NorthwindModel.NorthwindEntities>
Dan lakukan sedikit reflection pada WebDataService, maka kita akan tahu bahwa class yang dia tangkap haruslah bersifat IQueryable<T>. Artinya bisa saja Anda menggunakan pendekatan seperti ini (misal) :
// Single entity for Employee object
public class Employee {
public int EmployeeId { get; set; }
[DataWebKey]
public string EmployeeName { get; set; }
public Employee(int employeeId, string employeeName) {
EmployeeId = employeeId;
EmployeeName = employeeName;
}
}
public class EmployeeContainer {
private List<Employee> _employees;
private EmployeeContainer() {
_employees = new List<Employee> { new Employee(1, "Agung Riyadi"),
new Employee(2, "Akbar Putra Riyadi"),
new Employee(3, "Mentari Ayu"),
new Employee(4, "Bayu Aji Putra Riyadi")
};
}
public IQueryable<Employee> Employees {
get { return _employees.AsQueryable(); }
}
}
Dan Anda memanggil pada ADO .NET Data Service sebagai berikut :
public class Northwind : WebDataService<EmployeeContainer>
Cool yah !
:)
Note:
Mohon maaf untuk attachmentnya, saya selalu gagal untuk upload. Jadi, yang berminat bisa lewat jalur pribadi, posting email Anda di halaman ini via comment, atau bisa mengunduh langsung dari situs Scott Guthrie. Khusus yang lewat jalur pribadi dan comment maka saya akan kirimkan saja via email slide presentasi + demo-nya.