Just another side of me

My name is Veri, MSP from ITB. Enjoy my blog...
See also: Other Geeks@INDC

WCF RIA Services with Silverlight 4 (part 2)

Oke, di postingan saya yang kedua ini, saya akan melanjutkan pembahasan dari postingan saya yang ini. Setelah tampilan dari aplikasi Anda selesai, sekarang saatnya menampilkan data ke dalam ProductPage yang telah Anda buat sebelumnya.

So, let’s begin the fun part right away…

Pertama-tama, kita akan menambahkan ADO.NET Entity Data Model ke dalam project dengan cara mengklik kanan Web Project Anda dan pilih Add New Item lalu pilih ADO.NET Entity Data Model dan beri nama AdventureWorksDataEntities…

Entity

Setelah itu, pilih generate from database dan lakukan koneksi ke database AdventureWorks Anda seperti pada gambar dibawah…

EDM Wizard

Klik Next lalu pilih tabel Product, ProductCategory dan ProductSubcategory dari database dan beri nama Namespace-nya AdventureWorksModel…

EDM Wizard 2

Klik Finish dan Visual Studio secara otomatis akan men-generate model dari database uang kita pilih.

Setelah itu, build project Anda dengan menekan F6 dan kita akan menambahkan Domain Service Class yang saya beri nama AdventureWorksService ke dalam Web Project…

Add New Item

Setelah itu, akan muncul sebuah window baru yang meminta kita untuk memilih tabel dari model yang telah kita buat sebelumnya. Pilih ketiga tabel tersebut dan beri tanda juga pada kolom Enable Editing. Jangan lupa juga untuk men-check “Generate associated class for metadata”…

New DSC

Sekarang di dalam Web Project Anda akan terdapat 2 file baru yaitu AdventureWorksService.cs dan AdventureWorksService.metadata.cs. Dalam file yang pertama, terdapat fungsi-fungsi yang memudahkan kita untuk bekerja dengan data. Sedangkan di file yang kedua, kita telah mendefinisikan semua entity yang ada dan kita juga dapat menambahkan rule-rule tertentu pada aplikasi.

Nah, selanjutnya kita akan menambahkan DataGrid ke dalam ProductPage kita. Untuk menambahkannya, tinggal drag and drop dari toolbox saja. Setelah itu, tambahkan property Name dan IsReadOnly pada DataGrid tersebut. ProductPage.xaml Anda sekarang akan berisi kode sebagai berikut…

  1: <navigation:Page xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="Silverworks.ProductPage" 
  2:            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3:            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4:            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5:            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6:            mc:Ignorable="d"
  7:            xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
  8:            d:DesignWidth="640" d:DesignHeight="480"
  9:            Style="{StaticResource PageStyle}">
 10:     <Grid x:Name="LayoutRoot">
 11:         <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
 12:             <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
 13:                 <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
 14:                            Text="{Binding Path=ApplicationStrings.ProductPageTitle, Source={StaticResource ResourceWrapper}}" />
 15:                 <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
 16:                            Text="Content of the Product Page" />
 17:                 <sdk:DataGrid x:Name="ProductsDataGrid" IsReadOnly="True"/>
 18:             </StackPanel>
 19:         </ScrollViewer>
 20:     </Grid>
 21: </navigation:Page>

Setelah itu, buka ProductPage.xaml.cs Anda dan tambahkan namespace berikut.

  1: using Silverworks.Web;

Tambahkan juga kode berikut ke dalam Event OnNavigatedTo…

  1: AdventureWorksContext ctx = new AdventureWorksContext();
  2: ProductsDataGrid.ItemsSource = ctx.Products;
  3: ctx.Load<Product>(ctx.GetProductsQuery());

Sekarang ProductPage.xaml.cs Anda akan terlihat seperti ini…

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Net;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Documents;
  8: using System.Windows.Input;
  9: using System.Windows.Media;
 10: using System.Windows.Media.Animation;
 11: using System.Windows.Shapes;
 12: using System.Windows.Navigation;
 13: using Silverworks.Web;
 14: 
 15: namespace Silverworks
 16: {
 17:     public partial class ProductPage : Page
 18:     {
 19:         public ProductPage()
 20:         {
 21:             InitializeComponent();
 22:         }
 23: 
 24:         // Executes when the user navigates to this page.
 25:         protected override void OnNavigatedTo(NavigationEventArgs e)
 26:         {
 27:             AdventureWorksContext ctx = new AdventureWorksContext();
 28:             ProductsDataGrid.ItemsSource = ctx.Products;
 29:             ctx.Load<Product>(ctx.GetProductsQuery());
 30:         }
 31: 
 32:     }
 33: }

Oke, sekarang saya akan menjelaskan sedikit tentang 3 baris kode yang baru saja saya tambahkan ke dalam ProductPage.xaml.cs:

  1. Pertama, kita membuat object dari kelas AdventureWorksContext yang mengandung fungsi-fungsi dan entity dari model yang kita buat di Silverwoks.Web.
  2. Pada baris kedua, kita mendefinisikan ItemsSource untuk DataGrid yang telah kita buat.
  3. Pada baris ketiga, kita me-load Products yang di spesifikasikan didalam fungsi GetProductsQuery yang ada didalam file AdventureWorksService.cs pada Silverworks.Web.

Well, that’s it. Easy, huh? Just hit F5 and click on the Product button.

Hasil

Mungkin Anda akan menyadari bahwa dibutuhkan waktu untuk me-load semua data ke dalam DataGrid. Hal ini dikarenakan kita me-load semua data yang ada sekaligus. Jadi, apabila komputer Anda kurang mumpuni, akan dibutuhkan waktu yang agak lama untuk memunculkan data tersebut. Nah, pertanyaannya sekarang adalah, apakah kita bisa mengurangi beban komputer dengan hanya me-load beberapa data dalam 1 waktu? Jawabannya adalah “bisa, dengan menggunakan WCF RIA Services”. Bagaimana cara menggunakannya? Akan saya jelaskan pada postingan berikutnya… So, stay tuned…

Source code program bisa di download disini... 

Ciao for now…

Share this post: | | | |

Comments

Twitter Trackbacks for WCF RIA Services with Silverlight 4 (part 2) - Just another side of me [netindonesia.net] on Topsy.com said:

Pingback from  Twitter Trackbacks for                 WCF RIA Services with Silverlight 4 (part 2) - Just another side of me         [netindonesia.net]        on Topsy.com

# July 10, 2010 10:02 PM

Just another side of me said:

Pada postingan saya yang ketiga tentang WCF RIA Services ini, saya akan melanjutkan pembahasan dari postingan

# July 16, 2010 1:47 PM

My life as a MSP said:

Pada postingan saya yang ketiga tentang WCF RIA Services ini, saya akan melanjutkan pembahasan dari postingan

# August 13, 2010 8:59 AM