Pada postingan saya yang ketiga tentang WCF RIA Services ini, saya akan melanjutkan pembahasan dari postingan saya yang ini dan ini. Di 2 postingan saya sebelumnya, kita sudah berhasil memunculkan data produk dari database ke dalam DataGrid. Namun, diperlukan waktu beberapa detik untuk memunculkan semua data tersebut karena jumlah datanya sangat banyak dan kita menampilkan data yang banyak tersebut sekaligus.
Nah, bagaimana caranya agar performansinya meningkat? Jawabannya adalah dengan menggunakan WCF RIA Services dan membatasi jumlah data yang muncul dalam 1 waktu. But how do we do this? It’s simple. I’ll explain it to you…
Pertama-tama, hapus semua kode yang ada di dalam event OnNavigatedTo yang kita tambahkan pada postingan saya yang ini. Lalu, drag and drop DomainDataSource dari toolbox ke dalam ProductPage.xaml Anda sehingga kode di dalam ProductPage.xaml Anda akan menjadi seperti berikut:
1: <navigation:Page x:Class="Silverworks.ProductPage"
2: xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
3: xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
4: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8: mc:Ignorable="d"
9: xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
10: d:DesignWidth="640" d:DesignHeight="480"
11: Style="{StaticResource PageStyle}">
12: <Grid x:Name="LayoutRoot">
13:
14: <riaControls:DomainDataSource />
15:
16: <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
17:
18: <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
19:
20: <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
21: Text="{Binding Path=ApplicationStrings.ProductPageTitle, Source={StaticResource ResourceWrapper}}" />
22: <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
23: Text="Content of the Product Page" />
24:
25: <sdk:DataGrid x:Name="ProductsDataGrid" IsReadOnly="True"/>
26: </StackPanel>
27: </ScrollViewer>
28: </Grid>
29: </navigation:Page>
Perhatikan baris yang saya beri warna kuning. Ketika kita mendrag DomainDataSource dari toolbox ke dalam ProductPage.xaml, Visual Studio secara otomatis akan menambahkan namespace tersebut. Selanjutnya, kita akan menambahkan namespace baru:
1: xmlns:local="clr-namespace:Silverworks.Web"
Penambahan namespace ini bertujuan agar kita dapat mengakses entity dari model yang telah kita buat sebelumnya yang saya jelaskan disini.
Next, ganti kode dalam DomainDataSource Anda dengan kode berikut…
1: <riaControls:DomainDataSource x:Name="ProductsDataSource" QueryName="GetProductsQuery" AutoLoad="True" PageSize="10">
2: <riaControls:DomainDataSource.DomainContext>
3: <local:AdventureWorksContext />
4: </riaControls:DomainDataSource.DomainContext>
5: </riaControls:DomainDataSource>
Dan ganti kode dalam DataGrid dengan kode berikut…
1: <sdk:DataGrid x:Name="ProductsDataGrid" IsReadOnly="True" ItemsSource="{Binding ElementName=ProductsDataSource, Path=Data}" />
Tekan F5 dan lihat apa yang terjadi.
Waktu yang diperlukan untuk meload data ke DataGrid menjadi lebih singkat namun hanya muncul 10 data. Hal itu di karenakan kita meminta DomainDataSource agar hanya menampilkan 10 data per halaman. Agar kita tetap bisa melihat seluruh data, kita harus menambahkan DataPager.
Drag and drop DataPager dari toolbox ke dalam ProducPage.xaml dan ganti kodenya dengan kode berikut…
1: <sdk:DataPager x:Name="ProductsDataPager" Source="{Binding ElementName=ProductsDataSource, Path=Data}" />
Setelah itu, hapus ScrollViewer dari ProductPage.xaml agar tampilan yang kita dapatkan lebih bagus sehingga kode didalam ProductPage.xaml Anda akan menjadi seperti ini:
1: <navigation:Page x:Class="Silverworks.ProductPage"
2: xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
3: xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
4: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8: xmlns:local="clr-namespace:Silverworks.Web"
9: mc:Ignorable="d"
10: xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
11: d:DesignWidth="640" d:DesignHeight="480"
12: Style="{StaticResource PageStyle}">
13: <Grid x:Name="LayoutRoot">
14:
15: <riaControls:DomainDataSource x:Name="ProductsDataSource" QueryName="GetProductsQuery" AutoLoad="True" PageSize="10">
16: <riaControls:DomainDataSource.DomainContext>
17: <local:AdventureWorksContext />
18: </riaControls:DomainDataSource.DomainContext>
19: </riaControls:DomainDataSource>
20:
21: <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
22:
23: <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
24: Text="{Binding Path=ApplicationStrings.ProductPageTitle, Source={StaticResource ResourceWrapper}}" />
25: <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
26: Text="Content of the Product Page" />
27:
28: <sdk:DataGrid x:Name="ProductsDataGrid" IsReadOnly="True" ItemsSource="{Binding ElementName=ProductsDataSource, Path=Data}" />
29:
30: <sdk:DataPager x:Name="ProductsDataPager" Source="{Binding ElementName=ProductsDataSource, Path=Data}" />
31:
32: </StackPanel>
33: </Grid>
34: </navigation:Page>
Sekarang tekan F5 dan coba pindah ke halaman selanjutnya dengan menggunakan DataPager.
Aplikasi kita tidak akan berjalan lagi. Why? Karena didalam query GetProducts kita tidak mendefinisikan kriteria untuk sorting. Jadi, buka file AdventureWorksService.cs dan tambahkan kode berikut didalam query GetProducts…
1: public IQueryable<Product> GetProducts()
2: {
3: return this.ObjectContext.Products.OrderBy(product => product.ProductID);
4: }
Kode tersebut menyortir produk secara ascending berdasarkan ProductID.
Now, hit F5 and try to navigate through the pages… Enjoy…
The source code can be downloaded here.