Programowanie aplikacji internetowych 2013/2014 Instrukcja laboratoryjna cz.6 Technologia Silverlight cz.2 Prowadzący: Tomasz Goluch Wersja: 3.0
I. Model danych (tworzenie bazy na podstawie modelu). Cel: Utworzenie bazy danych na podstawie własnego modelu danych Uruchom Visual Studio 2012. W projekcie MyProject.Web (zwanym projektem WEB 1 ) dodaj nowy plik ADO.NET Entity Data Model MyProjectEntities.edmx (Visual C#). Wybierz: Empty Model Finish. W oknie designera kliknij PPM 2 i wybierz: Add Entity Entity name: Customer, Property name: CustomerID OK. Kliknij na nowym entity PPM, dodaj nowe Scalar Property i nadaj mu nazwę: FirstName oraz ustaw ograniczenie na maksymalną długość 50 znaków (Properties Facets Max Length: 50) identyczne kroki wykonaj dla property LastName). Dodaj nowe entity o nazwie CustomerAddress zawierające klucz własny AddressId oraz pole ModifiedDate. 1 Można wykorzystać poprzednie zadanie albo utworzyć nowy Silverlight Navigation Application projekt. 2 PPM Prawy przycisk myszy. 1
Kliknij PPM na Customer Entity i wybierz: Add Association Association Name: CustomerCustomerAddress. Nowo dodana asocjacja powinna być widoczna w modelu danych. 2
Dodaj nowy plik bazy danych: Add New Item SQL Server Database MyDatabase.mdf Add. W celu utworzenia bazy danych kliknij PPM na pustym miejscu modelu danych i wybierz: Generate Database from Model Next Finish. Na nowo wygenerowanym skrypcie SQL kliknij PPM i wybierz: Execute SQL jako Server name wybierz bazę danych w której chcesz utworzyć nowe tabele i wybierz Connect. W oknie Serwer Eksplorer a obejrzyj nowo dodane tabele. II. Model danych (odtwarzanie modelu danych z bazy). Cel: Zbudowanie modelu danych w oparciu o istniejącą bazę danych. Pobierz przykładową bazę danych ze strony: http://msftdbprodsamples.codeplex.com/releases/view/37109#downloadid=106391 W projekcie MyProject.Web (zwanym projektem WEB 3 ) dodaj nowy plik ADO.NET Entity Data Model MyProjectEntities.edmx (Visual C#). 3 Można wykorzystać poprzednie zadanie albo utworzyć nowy Silverlight Navigation Application projekt. 3
Wybierz kreatora generowania modelu Generate from Database New Connection Microsoft SQL Server Database File Continue Browse dodaj wcześniej pobrany plik bazy danych (AdventureWorksLT2008_Data.mdf) OK. Wybierz: Use Windows Authentication Test Connection OK Zostaw zaznaczoną opcję: Save entity connection settings in Web.Config as: i podaj nazwę dla tego połączenia np.: My_DataEntities. 4
Zaakceptuj komunikat proponujący dodanie pliku bazy danych do projektu WEB. W oknie kreatora wybierz tabele: Customer i CustomerAddress i podaj nazwę modelu np.: My_DataModel. Do projektu zostanie automatycznie dołączony plik bazy danych oraz plik mapera obiektoworelacyjnego (tzw. narzędzie ORM). 5
III. Pobieranie danych za pomocą serwisu WCF. Cel: Wypełnianie listy kontrolki DataGrid na podstawie wywołania usługi oraz przekazywanie informacji pomiędzy widokami. W projekcie WEB dodaj nowy folder o nazwie Services i dodaj do niego nowy plik Silverlight-enabled WCF Service MyService.svc (Visual C#) usługa WCF udostępniająca dane aplikacji Silverlight. Do pliku dodaj prostą usługę WEB GetCustomers() 4 : W celu dodania rozwiązania wybierz w projekcie MyProject.CustomerModule: References PPM Add Service Reference Discover (Namespace: Services) OK. Uwaga w przypadku problem z pobraniem meta danych opisujących serwis może pomóc przebudowanie projektu WEB. 4 Metoda operuje na danych typu Klient i Adres klienta. Potraktujemy je jako dane gracza. 6
Przeciągnij z paska narzędzi do pliku klienta MyCustomerList.xaml kontrolkę DataGrid, dwa przyciski oraz kontrolką Grid. A następnie uzupełnij kod XAML zgodnie z poniższym przykadem: Proszę przedstawić działający program prowadzącemu. IV. Prezentacja danych w widoku. Cel: Przykład prezentacji danych w widoku podejście z wykorzystaniem kodu stron (ang. Code Behind). Następujący kod napisany intuicyjnie w plikach *.cs odpowiadających im widoków (stron) jest przykładem programowania które można nazwać antywzorcem i powinien być on wykorzystywany jedynie w małych aplikacjach. Normalnie dodalibyśmy kod do pliku MyCustomerList.xaml.cs (ang. code-behind): 7
W konstruktorze zaznaczyliśmy buforowanie strony w pamięci podręcznej. Metoda OnNavigatedTo() pozwala na wywołanie usługi i wypełnienie kontrolki DataGrid. Proszę przedstawić działający program prowadzącemu. Dodaj widok szczegółów klienta dodając w projekcie klienta do katalogu Views nowy plik Silverlight Child Window MyCustomerDetail.xaml (Visual C#). Kod okna ChildWindow wyświetlającego szczegóły klienta wygląda by następująco: 8
Wewnątrz klasy CustomerDetail umieszczamy zmienną i właściwość MyCustomer ustawiająca DataContext udostępniając systemowi wiązania obiekt klasy MyCustomer jako bazę dla wszystkich instrukcji wiązania. Dodajemy w pliku CustomerList.xaml kod obsługi przycisków EditCustomer oraz SetDate 5. Dodanie funkcjonalności do przycisków. Dodanie dwóch procedur obsługi zdarzeń w konstruktorze. 5 Wydmuszkę metody tworzymy automatycznie dwukrotnym kliknięciem na przycisku w widoku designera. 9
Dodanie wiązania obustronnego dla pól: FirstName i LastName. Okno szczegółów klienta powinno pozwalać na ich edycję. Proszę przedstawić działający program prowadzącemu. V. Wzorzec MVVM. Cel: Przykład implementacji wcześniej przytoczonej funkcjonalności przy użyciu wzorca Model/Vie/ ViewModel. Dodaj w projekcie klienta nowy folder ViewModels w którym będziesz przechowywał modele widoku dedykowane dla każdego utworzonego widoku. Dodaj do folderu ViewModel klasę bazową dla wszystkich modeli widoków nowy plik klasy Class ViewModel.cs (Visual C#). Klasa ViewModel powinna implementować interfejs INotifyPropertyChanged w celu umożliwienia wiązań z innymi klasami. Aby zaimplementować model widoku dla strony z listą, Dodaj do folderu ViewModel klasę modelu widoku dla widoku CustomerList nowy plik klasy Class CustomerListViewModel.cs (Visual C#). Klasa CustomerListViewModel dziedziczy po ViewModel. 10
Posiada właściwość SelectedCustomer która służy do śledzenia który pracownik z listy został zaznaczony. Przenosi to odpowiedzialność za utrzymywanie tej informacji w widoku CustomerList. Kolejną właściwością jest Customers zawiera ona pełną listę klientów uzyskaną poprzez wywołanie usługi WCF. Będzie ona wykorzystywana w celu wypełnienia kontrolki DataGrid. Następnie dodajemy zdarzenie CustomersLoadded oraz metodę ładującą klientów LloadCustomers(). Metody OnCustomersLoaded() oraz SetModifiedDateToSelectedCustome()r. 11
Aby powiązać kontrolkę DataGrid z kolekcją Customers i właściwością SelectedCustomer, należy odpowiednio zaktualizować jej kod XAML: Wiązanie dla właściwości SelectedCustomer jest w obie strony co oznacza, że zarówno kontrolka DataGrid jak i kod mogą aktualizować te wartość. Musimy wewnątrz klasy CustomerList dodać model widoku zmienić ciało metody OnNavigatedTo. 12
Natomiast metoda SetDate_Click powinna teraz wykonywać metodę bezpośrednio z widoku. Uruchomić projekt WEB lista klientów powinna działać bez zmian. Zalety: Oddzielenie kontrolki DataGrid od kodu strony. Usunięcie z kodu strony wywołania usługi dostępu do danych (łatwa wymiana na inny bez zmian w kodzie strony). Logika funkcji modyfikującej stronę jest przeniesiona poza stronę. Kod strony nie manipuluje bezpośrednio klasą Customer, co pozwala na łatwą wymianę tej klasy. Proszę przedstawić działający program prowadzącemu. VI. Kod wielokrotnego użytku. Cel: Przykłady wyodrębniania kodu wielokrotnego użytku. Utwórz nowy folder Services w projekcie klienta dodaj nowy plik Class CustomerDataService.cs (Visual C#). 13
Wyłącznym celem tej klasy jest zapewnienie interfejsu do danych klienta który może być z łatwością rozbudowywany. Aby wspomagać użycie klasy CustomerDataService należy w klasie CustomerListViewModel dodać obiekt tej klasy i przebudować funkcję LoadCustomers(). Uruchomić projekt WEB lista klientów powinna działać bez zmian. Proszę przedstawić działający program prowadzącemu. 14