1、武 汉 工 程 大 学计算机科学与工程学院现代软件技术实验报告2专业班级 实验时间学生学号 实验地点学生姓名 指导教师实验项目 Using MVVM pattern to realize a customer management system实验类别 基本型实验 实验学时 6实验目的及要求实验要求：Windows 7 或以上操作系统、Visual Studio .Net 2010 或以上版本的应用程序，SQL Server 2005 数据库或以上版本、Windows Phone 7 Toolkit 7.0 或以上版本。学生应按指导教师的要求独立完成实验，并按要求撰写实验报告（应包含实验核心程
2、序、实验过程和结果中的关键图片） 。成 绩 评 定 表类 别 评 分 标 准 分值 得分 合 计上机表现 按时出勤、遵守纪律认真完成各项实验内容 30 分报告质量 程序代码规范、功能正确填写内容完整、体现收获 70 分说明：评阅教师： 日 期： 年 月 日计算机科学与工程学院现代软件技术实验报告 第 2 页 共 13 页 2实 验 内 容(1) Creating the Data ModelThe model is a single class named Accomplishment. The Accomplishment class implements the INotifyProper
3、tyChanged interface and the PropertyChanged event. This allows the class to notify its views when a property value changes, and then the views can update the user interface based on that change. In this application, the user can only change the Count and Completed properties, so you only need to rai
4、se the PropertyChanged event in those properties. You will test the data binding in the final procedure.(2) Creating the ViewModelIn this procedure, you create the ViewModel, which is the link between the Model and the View. The ViewModel is a collection that contains objects from the Model, in this
5、 case Accomplishment objects. The ViewModel uses an ObservableCollection. This allows it to notify its views when items in the collection change and the views can update the user interface based on that change.The ViewModel contains the code to get the collection of accomplishments. First, you check
6、 the isolated storage to see if the accomplishments are already saved. If yes, you use isolated storage to populate the collection. If not, you populate the collection with default accomplishments. In a later procedure, you will add the code to save the accomplishments to isolated storage.(3) Creati
7、ng the First ViewIn this procedure, you create a view to display the item accomplishments. In a later procedure, you will display the view on a page and connect it to the ViewModel by setting its data context. Note that there is no code behind this view.The view is a user control that contains a Lis
8、tBox bound to the data. Each item in the ListBox has the following three columns.(4) Creating the Main Application PageIn this procedure, you create the main application page. The main page contains the two views that you created previously. The first view contains the items and the second view cont
9、ains the levels. In the code, first you create a new instance of the ViewModel and use it to get the data. Then you connect each View to the ViewModel, choosing the data from the ViewModel that you want to see in the View. In a later procedure, you will add the code to maintain the page state when t
10、he user navigates away from your application and back.(5) Maintaining Page StateIn this procedure, you add the code to maintain the page state. If the user navigates away from your application and then back, you want to maintain the page state. If the user starts a new instance of the application fr
11、om the application list, you do not want to maintain the page state. For more information, see Execution Model for Windows Phone.First, you create a utility class that has one property named IsLaunching. You use the property to track if the user has started a new instance of the application. The onl
12、y state that you need to maintain in this application is the ViewModel. Silverlight for Windows Phone provides a page state object, and you can store the entire ViewModel in the state as one object. You do not need to store the items from the ViewModel collection individually. When the user returns
13、to the application, you can retrieve the ViewModel from the state and bind the views to it. You will test the page state in the final procedure.计算机科学与工程学院现代软件技术实验报告 第 13 页 共 13 页 13(6) Saving Data to Isolated StorageIn this procedure, you will add the code to save the application data to isolated st
14、orage. In this application, you will save the data in the isolated storage settings dictionary, not a text file. For more information about the types of isolated storage, see Isolated Storage Overview for Windows Phone. For more information about the local settings dictionary, see the IsolatedStorag
15、eSettings class. You will test the isolated storage in the final procedure.The data that you save to isolated storage are the Accomplishment objects, which are data-bound. When the user exits your application, Windows Phone automatically calls Save to save the isolated storage. Because you want to s
16、ave the data only when the user explicitly clicks the Save button, not when the user exits the application, you must break the connection between the isolated storage and the data-bound object. To do that, you save a copy of the Accomplishment object instead of the actual object itself.(7) Adding th
17、e Application BarIn this application, the user chooses when they want to save their data by clicking a Save button. In this procedure, you add a Save button to the application bar. For the buttons icon, you will use one of the standard Windows Phone icons. For more information, see Application Bar f
18、or Windows Phone.实验详细设计如下：(1)Creating the Data ModelTo create the data model：1.In Solution Explorer, right-click the folder Model, point to Add and then click Class.The Add New Item dialog appears, with the class template selected.2.In the Name box, type Accomplishment.cs or Accomplishment.vb, and t
19、hen click Add.A new class is added to the project in the Model folder, and opens in the code editor.3.Replace the code with the following code:using System;using System.ComponentModel;namespace MVVMTestApp.Modelpublic class Accomplishment : INotifyPropertyChanged/ The name of the accomplishment.publ
20、ic string Name get; set; / The type of the accomplishment, Item or Level.public string Type get; set; / The number of each item that has been collected.private int _count;public int Count计算机科学与工程学院现代软件技术实验报告 第 13 页 共 13 页 13getreturn _count;set_count = value;RaisePropertyChanged(“Count“);/ Whether a
21、 level has been completed or notprivate bool _completed;public bool Completedgetreturn _completed;set_completed = value;RaisePropertyChanged(“Completed“);public event PropertyChangedEventHandler PropertyChanged;private void RaisePropertyChanged(string propertyName)if (this.PropertyChanged != null)th
22、is.PropertyChanged(this, new PropertyChangedEventArgs(propertyName);/ Create a copy of an accomplishment to save./ If your object is databound, this copy is not databound.public Accomplishment GetCopy()Accomplishment copy = (Accomplishment)this.MemberwiseClone();return copy;计算机科学与工程学院现代软件技术实验报告 第 13
23、 页 共 13 页 134.On the File menu, click Save All. (Ctrl+Shift+S)5.On the Build menu, click Build Solution. (Ctrl+Shift+B) （2） Creating the ViewModel1. In Solution Explorer, right-click the folder ViewModel, point to Add and then click Class.The Add New Item dialog appears, with the class template sele
24、cted.2. In the Name box, type ViewModel.cs or ViewModel.vb, and then click Add.A new class is added to the project in the ViewModel folder, and opens in the code editor.3. Replace the code with the following code:using System;using System.Windows;using System.Collections.ObjectModel;using System.IO.
25、IsolatedStorage;using MVVMTestApp.Model;namespace MVVMTestApp.ViewModelNamespacepublic class ViewModelpublic ObservableCollection Accomplishments get; set; public void GetAccomplishments()if (IsolatedStorageSettings.ApplicationSettings.Count 0)GetSavedAccomplishments();elseGetDefaultAccomplishments(
26、);计算机科学与工程学院现代软件技术实验报告 第 13 页 共 13 页 13public void GetDefaultAccomplishments()ObservableCollection a = new ObservableCollection();/ Items to collecta.Add(new Accomplishment() Name = “Potions“, Type = “Item“ );a.Add(new Accomplishment() Name = “Coins“, Type = “Item“ );a.Add(new Accomplishment() Name
27、= “Hearts“, Type = “Item“ );a.Add(new Accomplishment() Name = “Swords“, Type = “Item“ );a.Add(new Accomplishment() Name = “Shields“, Type = “Item“ );/ Levels to completea.Add(new Accomplishment() Name = “Level 1“, Type = “Level“ );a.Add(new Accomplishment() Name = “Level 2“, Type = “Level“ );a.Add(n
28、ew Accomplishment() Name = “Level 3“, Type = “Level“ );Accomplishments = a;/MessageBox.Show(“Got accomplishments from default“);public void GetSavedAccomplishments()ObservableCollection a = new ObservableCollection();foreach (Object o in IsolatedStorageSettings.ApplicationSettings.Values)a.Add(Accom
29、plishment)o);计算机科学与工程学院现代软件技术实验报告 第 13 页 共 13 页 13Accomplishments = a;/MessageBox.Show(“Got accomplishments from storage“);4. On the File menu, click Save All. (Ctrl+Shift+S)5. On the Build menu, click Build Solution. (Ctrl+Shift+B)(3)Creating the First View1. In Solution Explorer, right-click the f
30、older View, point to Add and then click New Item.2. In the list of file types, click Windows Phone User Control.3. In the Name box, type ItemView.xaml, and then click Add.A new XAML file is added to the project in the View folder, and opens in the designer. By default, there is an empty GRID element
31、 in the XAML file.4. In the GRID element, add the following code:XAMLCopy 5. On the File menu, click Save All. (Ctrl+Shift+S)6. On the Build menu, click Build Solution. (Ctrl+Shift+B)(4)Creating the Main Application Page1. In Solution Explorer, right-click MainPage.xaml and then click View Code.The
32、code-behind file opens in the code editor.2. Replace the code with the following code:using System;using System.Linq;using System.Windows;using Microsoft.Phone.Controls;using MVVMTestApp.ViewModelNamespace;namespace MVVMTestApppublic partial class MainPage : PhoneApplicationPageprivate ViewModel vm;
33、/ Constructorpublic MainPage()InitializeComponent();vm = new ViewModel();protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)base.OnNavigatedTo(e);/ Later, you will replace this next line with something better.vm.GetAccomplishments();计算机科学与工程学院现代软件技术实验报告 第 13 页 共 13
34、 页 13/ There are two different views, but only one view model./ So, use LINQ queries to populate the views./ Set the data context for the Item view.ItemViewOnPage.DataContext = from Accomplishment in vm.Accomplishments where Accomplishment.Type = “Item“ select Accomplishment;/ Set the data context f
35、or the Level view.LevelViewOnPage.DataContext = from Accomplishment in vm.Accomplishments where Accomplishment.Type = “Level“ select Accomplishment;/ If there is only one view, you could use the following code/ to populate the view./AccomplishmentViewOnPage.DataContext = vm.Accomplishments;3. On the
36、 File menu, click Save All. (Ctrl+Shift+S)4. On the Build menu, click Build Solution. (Ctrl+Shift+B)(5)Maintaining Page State1. In Solution Explorer, right-click the project MVVMTestApp, point to Add and then click Class.2. In the Name box, type StateUtilities.cs or StateUtilities.vb, and then click
37、 Add.A new class is added to the project, and opens in the code editor.3. Replace the code with the following code:using System;namespace MVVMTestApppublic static class StateUtilitiesprivate static Boolean isLaunching;计算机科学与工程学院现代软件技术实验报告 第 13 页 共 13 页 13public static Boolean IsLaunchingget return i
38、sLaunching; set isLaunching = value; 4. In Solution Explorer, right-click App.xaml and then click View Code.5. Locate the Application_Launching method and replace it with the following code:private void Application_Launching(object sender, LaunchingEventArgs e)StateUtilities.IsLaunching = true;6. Lo
39、cate the Application_Activated method and replace it with the following code:private void Application_Activated(object sender, ActivatedEventArgs e)StateUtilities.IsLaunching = false;7. In Solution Explorer, right-click MainPage.xaml and then click View Code.The code-behind file opens in the code editor.8. In the MainPage class, in the OnNavigatedTo method, locate the call to GetAccomplishments. It looks like the following:/ Later, you will replace this next line with something better.vm.GetAccomplishments();Replace it with the following code:if (!StateUtilities.IsLaunching
