cz.2

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 WEB1) dodaj nowy plik ADO.NET Entity
Data Model – MyProjectEntities.edmx (Visual C#).
Wybierz: Empty Model → Finish.
W oknie designera kliknij PPM2 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
2
Można wykorzystać poprzednie zadanie albo utworzyć nowy Silverlight Navigation Application projekt.
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 WEB3) 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
SetDate5.
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