Bài giảng Mạng Silverlight - Chương 7: Làm việc với dữ liệu trong Silverlight

Nội dung text: Bài giảng Mạng Silverlight - Chương 7: Làm việc với dữ liệu trong Silverlight

1. CHƢƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 1 Các công nghệ để truy cập dữ liệu trong Silverlight Trong các ứng dụng trên nền tảng Silverlight 2 có cho phép truy cập dữ liệu theo nhiều công nghệ hay phƣơng thức khác nhau. Cách đơn giản nhất để hiển thị và tƣơng tác ngƣời dùng là Data Binding. Cách khác nữa để truy cập dữ liệu từ ứng dụng máy khách, nhƣ là một sự thay thế tối ƣu của cookie, chúng ta có thể sử dụng công nghệ Isolated Storage. Silverlight cũng cho phép đọc và ghi trên dữ liệu XML bằng cách sử dụng XmlReader hoặc LINQ to XML . Ngoài ra cách phổ biến trong các ứng dụng hiện nay thƣờng làm đó là truy cập dữ liệu SQL Server thông qua các công nghệ Web service, WCF và ADO.Net Data Service. Trong chƣơng này chúng ta sẽ tìm hiểu một số công nghệ để truy cập dữ liệu sau: - Data Binding - Isolated Storage - Xử lý dữ liệu XML với LINQ to XML - Truy cập cơ sở dữ liệu SQL Server với Web Service(WCF) 2 Sử dụng Data Binding Data Binding cung cấp một cách đơn giảm cho ứng dụng nền tảng silverlight truy cập và tƣơng tác tới dữ liệu. Thông thƣờng Data Binding quản lý dữ liệu theo luồng giữa ngƣời dùng và các đối tƣợng dữ liệu. Tức kà khi một binding đƣợc tạo và dữ liệu có thay đổi, thì giao diện ngƣời dùng cũng đƣợc trình bày và thay đổi theo dữ liệu(tự động ánh xạ ). Tƣơng tự khi ngƣời dùng thay đổi trên giao diện thì nó cũng có thể làm thay đổi đối tƣợng dữ liệu. Ví dụ nhƣ khi ngƣời dùng thay đổi giá trị trên một TextBox, giá trị dữ liệu cũng tự động cập nhật theo thay đổi đó. o Sự liên kết giữa giao diện người dùng và dữ liệu - Binding Object: Nhƣ là một xúc tác ở giữaBindingTarget và Binding Source - Binding Source: Chứa các thuộc tính dữ liệu, còn có thể là đối tƣợng của CLR - Binding Target: Là các thuộc tính giao diệu ngƣời dùng để có thể hiển thị hoặc thay đổi tới dữ liệu. Binding target có thể là DependencyProperty của FramworkElement - Value Converter: Thành phần tùy chọn để áp dụng cho những trƣờng hợp dữ liệu cần phân tích hoặc chuyển đổi Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 1
2. - Điều hƣớng của luồng dữ liệu: Quyết định tới việc tƣơng tác dữ liệu qua lại giữa Binding Source và Binding Target (xem chi tiết mục dƣới) Ví dụ dƣới đây sẽ chỉ rõ cách trình bày thuộc tính màu của chữ (ForeGround Color) của một TextBox: Mã XAML: Mã C# : //Tạo một lớp MyColors đã thực thi giao tiếp INotifyPropertyChanged. MyColors textcolor = new MyColors(); // Brush1 thiết lập một SolidColorBrush với giá trị màu Red. textcolor.Brush1 = new SolidColorBrush(Colors.Red); // Thiết lập DataContext của MyTextBox. MyTextBox.DataContext = textcolor; Khi sử dụng DataContext trong mã C# trên đây, nó cho phép các thẻ UI thừa kế thông tin về dữ liệu nguồn. Ví dụ giống nhƣ trong ASP.NET bạn sử dụng phƣơng thƣớc gán DataSouce để hiển thị dữ liệu trên một Grid. o Các phương thức điều hướng của luồng dữ liệu Mỗi một kiểu binding data đều có một phƣơng thức điều hƣớng luồng dữ liệu(Mode propery). Cái này quyểt định khi nào và làm thế nào để dữ liệu chảy tràn. Có 3 phƣơng thức điều hƣớng luồng dữ liệu sau - OneTime: binding dữ liệu tới target (giao diện ngƣời dùng) một lần và sau đó kết thúc kết nối không binding nữa. Phƣơng thức này phù hợp khi hiển thị dữ liệu mà ít khi hoặc không bao giờ cần thay đổi. - OneWay: Binding dữ liệu tới target và giữ nó đến khi Source (nguồn dữ liệu) thay đổi thì target cũng thay đổi theo. Phƣơng thức này phù hợp khi trình bày dữ liệu mà ngƣời dùng không đƣợc phép thay đổi - TwoWay: Binding dữ liệu tới target và giữ nó đến khi source thay đổi thì target cũng thay đổi theo, nhƣng khi target thay đổi thì source cũng thay đổi theo. Phƣơng thức này phù hợp khi trình bày dữ liệu mà cho phép ngƣời dùng thay đổi dữ liệu nguồn o Change Notification Để cho hợp lệ với các thay đổi giá trị giữa Source object và Target objects thì chúng ta phải thực thi một interface là InotifyPropertyChanged. Trong InotifyPropertyChanged có cung cấp một event PropertyChanged. Trong ví dụ dƣới đây. Class MyColors thực thi giao tiếp InotifyPropertyChanged cho phƣơng thức OneWay namespace DataBinding { //Tao mot class thua ke interface INotifyPropertyChanged public class MyColors : INotifyPropertyChanged { private SolidColorBrush _Brush1; // Khai bao su kien PropertyChanged. public event PropertyChangedEventHandler PropertyChanged; //Tao thuoc tinh cua SolidColorBrush public SolidColorBrush Brush1 { get { return _Brush1; } Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 2
3. set { _Brush1 = value; // Goi NotifyPropertyChanged khi thuoc tinh nguon duoc cap nhap NotifyPropertyChanged("Brush1"); } } public void NotifyPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } } 3 Sử dụng Isolated Storage Silverlight dùng Isolated Storage nhƣ một hệ thống file ảo để lƣu trữ dữ liệu trong một thƣ mục ẩn trên máy tính của bạn. Nó chia dữ liệu vào làm 2 phân riêng biệt: Phần thứ nhất chứa các thông tin quản lý nhƣ dung lƣợng cho phép và phần thứ 2 chứa dữ liệu thực sự. Mỗi ứng dụng Silverlight đƣợc phân bố một vùng riêng trong hệ thống lƣu trữ này với dung lƣợng lƣu trữ mặc nhiên là 1 MB. o Ưu điểm: - Isolated Storage là một thay thế tuyệt vời cho cookie, đặc biệt là nếu bạn đang làm việc với một tập lớn dữ liệu. Một số ví dụ về khả năng của Isolated Storage bao gồm undo lại một số thao tác của ứng dụng, hay giỏ hàng, các cài đặt về cửa sổ hay bất kỳ cài đặt nào mà bạn muốn truy cập vào lần nạp tiếp theo. - Isolated Storage lƣu trữ theo ngƣời dùng cho phép các ứng dụng lƣu giữ các cài đặt cho từng ngƣời dùng riêng biệt. o Một số vấn đề có thể xảy ra: - Ngƣời quản trị có thể đặt giới hạn đĩa trên mỗi ngƣời dùng và assembly, không có bất kỳ cảnh báo nào về không gian trống còn lại. Vì lý do này, bạn nên kiểm tra và bắt các ngoại lệ trong ứng dụng của bạn. - Dù rằng Isolated Storage đƣợc đặt trong một thƣ mục ẩn trong hệ thống, nhƣng không có nghĩa ngƣời dùng không thể tìm ra thƣ mục này, do vậy Isolated Storage không hoàn toàn an toàn và ngƣời dùng có thể thay đổi hoặc xóa các file. Tuy nhiên, nếu muốn ngƣời dùng không thể thay đổi các file, bạn có thể dùng các lớp mã hóa để mã lại các file này trƣớc khi lƣu. - Các máy tính có thể bị khóa bởi các chính sách bảo mật và các ứng dụng sẽ không thể lƣu đƣợc vào IsolatedStorage. Cụ thể hơn, bạn cần có IsolatedStorageFilePermission để có thể làm việc đƣợc với IsolatedStorage Giờ hãy xem qua ví dụ về việc lƣu và đọc dữ liệu từ IsolatedStorage. Nhớ rằng bạn cần dùng using để tham chiếu đến namespace System.IO.IsolatedStorage cũng nhƣ là System.IO. Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 3
4. using System.Windows.Controls; using System.IO.IsolatedStorage; using System.IO; using System; namespace Samples_Chap7 { public partial class Page : UserControl { public Page() { InitializeComponent(); //Luu du lieu vao file dulieu.txt SaveData("Day la du lieu cua toi", "dulieu.txt"); //Lay du lieu tu file dulieu.txt string test = LoadData("dulieu.txt"); } private void SaveData(string data, string fileName) { //Lay Isolated Storage cua nguoi dung danh cho ung dung using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication()) { using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Create, isf)) { using (StreamWriter sw = new StreamWriter(isfs)) { //Luu du lieu sw.Write(data); sw.Close(); } } } } private string LoadData(string fileName) { string data = String.Empty; //Lay Isolated Storage cua nguoi dung danh cho ung dung using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication()) { using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Open, isf)) { using (StreamReader sr = new StreamReader(isfs)) { string lineOfData = String.Empty; while ((lineOfData = sr.ReadLine()) != null) //Doc du lieu data += lineOfData; } } } return data; } } } Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 4
5. 4 Khái quát về làm việc với dữ liệu XML, LINQ to XML Trong Silverlight bạn có thể phân tích dữ liệu XML bằng một trong hai cách là LINQ to XML hoặc XmlReader Đối với những tài liệu XML lớn đòi hỏi việc tải dữ liệu về tốn nhiều bộ nhớ trong làm giảm hiệu suất chƣơng trình. Trong trƣờng hợp này chúng ta nên sử dụng XmlReader với những đặc tính nhƣ đọc dữ liệu nhanh, forward-only, non-caching parser. Ngƣợc lại với những tài liệu XML nhỏ hơn bạn nên sử dụng LINQ to XML, nó cung cấp những tính năng và tiện ích hữu dụng hơn XmlReader Trong phần này chúng tôi sẽ hƣớng dẫn các bạn về cách xử lý dữ liệu xml với LINQ to XML( Silverlight). o Khái quát về LINQ to XML LINQ to XML cũng giống nhƣ Document Object Model(DOM) trong đó nó đem tài liệu XML này vào trong bộ nhớ. Bạn có thể truy vấn và thay đổi tài liệu này, sau khi thay đổi nó bạn có thể lƣu nó và một file hoặc chuyển đổi hóa nó (Serialize) rồi gửi nó thông qua mạng Internet. Tuy nhiên LINQ to XML khác biệt so với DOM ở chỗ: Nó cung cấp một đối tƣợng mới nhẹ nhàng hơn và dễ dàng làm việc với chúng hơn, ngoài ra LINQ to XML còn là sự cải tiến của ngôn ngữ Visual C# 2008. Một lợi thế quan trọng nhất của LINQ to XML là nó tích hợp với Language-Integrated Query (LINQ). Với sự tích hợp này nó cho phép bạn viết câu truy vấn tài liệu XML khi ở trong bộ nhớ để trả về tập hợp các Element và attribute. LINQ to XML có thể so sánh đƣợc với các chức năng của XPath và Xquery. o Tạo một XAML động với LINQ to XML Trong mục này chúng ta sẽ chỉ rõ các tạo một control TextBlock bằng LINQ to XML. Trƣớc tiên để tùy chỉnh project silverlight trong Visual Studio chúng ta chạy ví dụ dƣới đây 1. Trong Solution Explorer, thêm assembly reference tới System.Xml.Linq.dll 2. Thay đổi nội dung file page.xaml của bạn theo mã dƣới đây 3. Trong file page.xaml.cs thêm các khai báo using sau đây using System.Windows.Markup; using System.Xml.Resolvers; using System.Xml; using System.Xml.Linq; using System.IO; using System.Text; Dƣới đây là ví dụ chi tiết về tạo một đối tƣợng XElement và lƣu nó với thông tin liên hệ. // Tao XElement de luu thong tin lien he ban be XElement contacts = new XElement("Contacts", new XElement("Contact1", new XElement("Ten", "Pham Chi Cuong"), new XElement("DienThoai", "0906 123 480"), new XElement("DiaChi", new XElement("DuongPho", "Nguyen Hong"), new XElement("ThanhPho", "HaNoi") Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 5
6. ) ), new XElement("Contact2", new XElement("Ten", "Tran Duy Bien"), new XElement("DienThoai", "0904 252 161"), new XElement("DiaChi", new XElement("DuongPho", "Pham Van Dong"), new XElement("ThanhPho", "HaNoi") ) ) ); // Tao TextBlock1 // Luu y rang Element nay phai khai bao 2 XAML namespace XElement textBlock1 = XElement.Parse( @" "); // Lay child Element cua contact1 XElement contact1 = contacts.Element("Contact1"); // Gan gia tri vao thuoc tinh Text o cuoi cung voi noi dung cua cac contact trong xml textBlock1.LastAttribute.SetValue(contact1.ToString()); // Lay child element thu hai XElement contact2 = contacts.Element("Contact2"); // Tao TextBlock2 // Luu y rang Element nay phai khai bao 2 XAML namespace XNamespace xmlns = " "; XElement textBlock2 = new XElement(xmlns + "TextBlock", new XAttribute(XNamespace.Xmlns + "x", " "), new XAttribute("Canvas.Top", 250), new XAttribute("Width", "600"), new XAttribute("Text", contact2.ToString()) ); // Them TextBlock1 vao trong trang LayoutRoot.Children.Add(XamlReader.Load(textBlock1.ToString()) as UIElement); // Them TextBlock2 vao trong trang LayoutRoot.Children.Add(XamlReader.Load(textBlock2.ToString()) as UIElement); o Cách load file XML từ một URI bất kỳ 1. Tạo một đối tƣợng WebClient, thêm trình xử lý (handler), Gọi phƣơng thức OpenReadAsync. Làm theo mã lệnh dƣới đây WebClient wc = new WebClient(); wc.OpenReadCompleted += wc_OpenReadCompleted; wc.OpenReadAsync(new Uri(uriString)); 2. Thực thi hàm callback wc_OpenReadCompleted private void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e) { //Kiem tra thuoc tinh Error cho cac loi if (e.Error != null) { OutputTextBlock.Text = e.Error.Message; Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 6
7. return; } //Neu khong co loi, Lay du lieu stream ve va phan tich chung toi XDocument thong qua phuong thuc Load using (Stream s = e.Result) { XDocument doc = XDocument.Load(s); OutputTextBlock.Text = doc.ToString(SaveOptions.OmitDuplicateNamespaces); } } 5 Truy cập dữ liệu SQL Server với WCF Trong phần này chúng ta sẽ xây dựng một ứng dụng nhỏ để kết nối với CSDL SQL Server. Để hoàn thiện đƣợc ứng dụng này chúng ta cần tập hợp đƣợc những kỹ năng sau - Kết nối tới một WCF Web Service - Sử dụng LINQ để truy vấn và trả về dữ liệu - Sử dụng Control DataGrid để hiển thị dữ liệu o Khởi tạo chương trình Tạo một Project Web Application (File -> New ->Project -> Silverlight Application) . Chúng ta đặt tên cho ứng dụng này là SQLData Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 7
8. Bấm OK chúng ta sẽ có một Solution nhƣ hình vẽ dƣới đây o Tìm hiểu về LINQ to SQL LINQ to SQL là một phiên bản hiện thực hóa của O/RM (object relational mapping) có bên trong .NET Framework bản “Orcas” (nay là .NET 3.5), nó cho phép bạn mô hình hóa một cơ sở dữ liệu dùng các lớp .NET. Sau đó bạn có thể truy vấn cơ sở dữ liệu (CSDL) dùng LINQ, cũng nhƣ cập nhật/thêm/xóa dữ liệu từ đó. LINQ to SQL hỗ trợ đầy đủ transaction, view và các stored procedure (SP). Nó cũng cung cấp một cách dễ dàng để thêm khả năng kiểm tra tính hợp lệ của dữ liệu và các quy tắc vào trong mô hình dữ liệu của bạn. Để biết thêm về công nghệ này bạn có thể xem chi tiết tại ScottGu's tutorial o Thêm LINQ to SQL Classes - Bằng cách chuột phải vào Server Project và chọn Add -> New Item sau đó chọn LINQ to SQL Classes. class này có tên là DataClasses1.dbml Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 8
9. - Chúng ta mở Server Explorer (View->Server Explorer) và chọn cơ sở dữ liệu AdventureWorkLTs (đã cài đặt sẵn trong SQL Server hoặc có thể download ở Microsoft.com) - Sau khi đã mở kết nối tới CSDL AdventureWorkLTs, chúng ta tiếp tục kéo bảng Customer vào DataClasses1.dbml trong đã mở trong Designer - Nhiều khả năng sẽ bạn sẽ nhận đƣợc cảnh báo nhƣ hình vẽ dƣới đây, bạn bấm vào Yes để tiếp tục Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 9
10. - Sau khi kéo vào vùng trống của DataClasses1.dbml sẽ nhìn thấy đƣợc khả năng chuyển hóa từ đối tƣợng bảng (Customer table) sang mô hình lớp nhƣ hình vẽ dƣới đây Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 10
11. o Tạo Web Service (WCF) - Chuột phải vào Web Project chọn Add New, bên trong templates chọn WCF Service Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 11
12. - Kết quả nhận đƣợc từ việc tạo trên là 3 file theo hình vẽ dƣới đây - Mở file IService1.cs bạn sẽ thấy đoạn mã đã đƣợc tạo săn dƣới đây public interface IService1 { [OperationContract] void DoWork(); } - Thay đổi đoạn mã trên bằng đoạn mã dƣới đây public interface IService1 { [OperationContract] List GetCustomersByLastName(string lastName); } - Mở file Service1.svc, thêm viết đoạn mã nhƣ dƣới đây public List GetCustomersByLastName(string lastName) { DataClasses1DataContext db = new DataClasses1DataContext(); var matchingCustomers = from cust in db.Customers where cust.LastName.StartsWith(lastName) select cust; return matchingCustomers.ToList(); } - Lƣu ý Mặc định của WCF sử dụng wsHttpBinding, xem trong file Web.config Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 12
13. - Tuy nhiên nó chỉ hỗ trợ trong basic binding (SOAP 1.1, etc.), vì vậy bạn cần thay đổi binding tƣơng ứng nhƣ sau o Tạo ứng dụng Silverlight - Tiếp theo chúng ta sẽ tạo một ứng dụng Silverlight và tƣơng tác với web service WCF vừa tạo đƣợc. Chuột phải vào references trong silverlight project và chọn Add Service Reference - Sau khi chọn Add Service Reference, bạn bấm chuột vào Discover và chọn Services in Solution. Service mà bạn vừa tạo sẽ đƣợc tìm thấy và hiện thị. Bấm OK - Service sau khi đã đƣợc thêm vào project của bạn, bạn có thể truy cập vào Web service này. Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 13
14. o Tạo XAML - Trong file Page.xaml bạn thêm đoạn mã dƣới đây - Bên màn hình Designer sẽ thấy nhƣ hình ảnh sau Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 14
15. - Đặt các Control sau đây vào hàng thứ nhất của Datagrid - Đặt các Control sau đây vào hàng thứ nhất của Grid - Kéo thả DataGrid trong toolbox vao trong XAML o Viết xử lý sự kiện cho nút Search - Mở file page.xaml.cs thêm đoạn mã dƣới đây public Page() { InitializeComponent(); Loaded += new RoutedEventHandler(Page_Loaded); } void Page_Loaded(object sender, RoutedEventArgs e) { Search.Click += new RoutedEventHandler(Search_Click); } void Search_Click(object sender, RoutedEventArgs e) { //Gan Service1Client toi mot doi tuong o local là webService ServiceReference1.Service1Client webService = new SQLData.ServiceReference1.Service1Client(); //Cai dat trinh xu ly su kien webService.GetCustomersByLastNameCompleted += new EventHandler (webService_GetCustomersByLastNameCompleted); //Goi asynchronous webService.GetCustomersByLastNameAsync(LastName.Text); void webService_GetCustomersByLastNameCompleted(object sender, SQLData.ServiceReference1.GetCustomersByLastNameCompletedEventArgs e) { //Trinh bay ket qua vao Datagrid theDataGrid.ItemsSource = e.Result; } Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 15
16. o Kết quả hiển thị Microsoft Vietnam LLC – DPE team | Chương VII: Làm việc với dữ liệu trong Silverlight 16