Silverlight-모델보기

이 장에서는 Silverlight의 소프트웨어 개발에서 중요한 기술인 View Models.

  • 그만큼 view model 모델에서 뷰를 분리하여 분리 된 프리젠 테이션이라는 기술을 도입하는 핵심 부분입니다.

  • View Models 분리 된 프리젠 테이션을 달성하는 단방향을 제공하고, Silverlight의 데이터 바인딩을 활용하여 사용자 인터페이스에 필요한 코드 양을 줄이는 방법을 살펴 보겠습니다.

UI 개발 과제

View Models사용자 인터페이스 소프트웨어를 개발할 때 자주 발생하는 특정 문제를 해결하도록 설계되었습니다. 아마도 가장 중요한 것은 사용자 인터페이스 코드가 특히 자동화 된 단위 테스트에서 떼어 낼 수없는 테스트가 어려운 경우가 많다는 것입니다. 코드의 지속적인 유연성과 유지 관리성에 영향을 미칠 수있는 코드 품질 문제도 있습니다.

  • Visual Studio의 디자인 도구가 당신을 이끌고있는 최소한의 저항의 길을 따르면 결국 코드 뒤에 너무 많은 코드를 넣을 수 있습니다.

  • 많은 양의 애플리케이션 기능이 뒤에있는 코드에 추가되는 것은 매우 일반적입니다.

  • 실제로 비즈니스 논리를 사용자 인터페이스 클래스에 넣을 계획을 세운 개발자는 거의 없지만 Visual Studio가 이벤트 처리기를 배치하는 곳이기 때문에 작업을 수행하기에는 너무 편리한 곳이됩니다.

  • 수업이 잘 정의되고 합리적으로 제한된 책임이 있다면 소프트웨어를 개발하고 유지하기가 더 쉽다는 것이 널리 알려져 있습니다.

  • 이면의 코드는 필요한 곳에서 사용자 인터페이스를 구성하는 객체와 직접 상호 작용하는 것입니다.

  • 문제를 일으키는 경향이있는 애플리케이션의 동작 방식을 결정하는 코드를 입력하자마자.

  • 응용 프로그램 논리는 사용자 인터페이스와 관련된 코드로 흐를 수있을뿐만 아니라 일부 개발자는 중요한 응용 프로그램 상태를 유지하기 위해 컨트롤 및 다른 사용자 인터페이스 개체에 의존하기 시작합니다.

  • 모델은 단순히 데이터를 보유하고 뷰는 단순히 형식이 지정된 날짜를 보유하며 컨트롤러 (ViewModel)는 둘 사이의 연결 역할을합니다. 컨트롤러는 뷰에서 입력을 받아 모델에 배치하거나 그 반대로 할 수 있습니다.

분리 된 프레젠테이션

응용 프로그램 논리를 코드 또는 XAML에 배치하여 발생하는 문제를 방지하려면 다음과 같은 기술을 사용하는 것이 가장 좋습니다. separated presentation. 사용자 인터페이스 개체로 직접 작업하는 데 필요한 최소한의 XAML 및 코드가있는 사용자 인터페이스 클래스에는 아래 왼쪽에 표시된 것처럼 복잡한 상호 작용 동작, 응용 프로그램 논리 및 기타 모든 것에 대한 코드도 포함됩니다.

분리 프레젠테이션의 중요한 기능-

  • 분리 된 프리젠 테이션을 사용하면 사용자 인터페이스 클래스가 훨씬 간단 해집니다. 물론 XAML이 있지만 뒤에있는 코드는 실제적인 작업을 거의 수행하지 않습니다.

  • 응용 프로그램 논리는 별도의 클래스에 속합니다. model.

  • 많은 개발자가 데이터 바인딩을 사용하여 XAML의 요소를 모델의 속성에 직접 연결하려고합니다.

  • 문제는 model 사용자가 애플리케이션과 상호 작용하는 방식이 아니라 애플리케이션이 수행하는 작업에 전적으로 관심이 있습니다.

  • 대부분의 사용자 인터페이스에는 애플리케이션 모델에 속하지 않는 일부 상태가 있습니다. 예를 들어, 사용자 인터페이스에서 드래그 앤 드롭을 사용하는 경우 항목이 지금 드래그되는 위치, 가능한 드롭 대상 위로 이동할 때 모양이 어떻게 변경되어야하는지, 드롭 대상이 어떻게 될 수 있는지 등을 추적해야합니다. 항목을 드래그하면 변경됩니다.

  • 이러한 종류의 상태는 놀라 울 정도로 복잡해질 수 있으며 철저한 테스트가 필요합니다.

  • 실제로는 일반적으로 사용자 인터페이스와 모델 사이에 다른 클래스가 있어야합니다. 여기에는 두 가지 중요한 역할이 있습니다.

    • 첫째, 특정 사용자 인터페이스보기에 맞게 애플리케이션 모델을 조정합니다.

    • 둘째, 사소하지 않은 상호 작용 논리가 존재하는 곳입니다. 즉, 사용자 인터페이스가 원하는 방식으로 작동하도록하는 데 필요한 코드를 의미합니다.

모델 /보기 /보기 모델

View Model분리 된 프리젠 테이션 접근법의 한 예이지만 각 레이어에 어떤 종류의 것이 있는지 정확히 설명하겠습니다. 세 개의 레이어가 있습니다-

  • Model
  • View
  • ViewModel

모델

이것은 classic 사용자 인터페이스와 직접적인 관계가없는 일반 C # 클래스로 구성된 개체 모델.

일반적으로 모델 코드는 사용자 인터페이스 라이브러리에 대한 참조없이 컴파일 할 수 있습니다. 실제로 똑같은 소스 코드를 Silverlight 응용 프로그램, 일반 .NET 콘솔 응용 프로그램 또는 서버 측 웹 코드로 컴파일 할 수있을 것입니다.

모델의 유형은 애플리케이션이 작동하는 개념을 나타내야합니다.

전망

보기는 일반적으로 UserControl이거나 MainPage이거나 페이지의 일부일 수 있습니다.

대부분의 Silverlight 응용 프로그램에서 사용자 인터페이스를 UserControl 또는 각 부분에 대한보기를 정의하는 작은 부분으로 분할하는 것이 좋습니다.

Silverlight 응용 프로그램은이 점에서 고유하지 않습니다. 분명히 Silverlight와 관련된 것은 View입니다. 사용자 인터페이스가 세밀할수록 더 나은 결과를 얻을 수 있습니다. 같은 파일을 작업하는 다른 개발자들에게 넘어갈 가능성이 적을뿐만 아니라, 작고 단순하게 유지하면 자연스럽게 스파게티와 같은 코드로 이어지는 지름길을 막을 수 있습니다.

예를 들어, View 목록의 개별 항목을 나타냅니다.

ViewModel

마지막으로 View, 당신은 ViewModel. 그래서 이것은 a의 중요한 기능 중 하나입니다ViewModel 수업.

특정보기를 제공하기 위해 존재합니다. 그만큼ViewModel 목록에 표시되는 특정 데이터 항목과 같이 사물을 표시하는 특정 방식에 특화되어 있습니다.

이것이 ViewModel; 특히 특정 뷰에 대한 기본 모델을 조정합니다. 모델처럼ViewModel일반 C # 클래스이기도합니다. 특정 유형에서 파생 될 필요가 없습니다.

일부 개발자는 일부 공통 기능을 기본 ViewModel 클래스에 추가하는 것이 편리하다고 생각하지만 패턴은이를 요구하지 않습니다. 특히ViewModelSilverlight 특정 유형에서 파생되지 않습니다. 그러나 모델과 달리 속성에서 Silverlight 유형을 사용할 수 있습니다.

예를 들어, ViewModel은 사용자 인터페이스의 특정 부분이 특정 조건에서만 표시되도록 선택할 수 있으므로 Silverlight 요소가 Visibility 속성에 사용하는 유형 인 System.Windows.Visibility 유형의 속성을 제공 할 수 있습니다. 이를 통해 패널과 같은 요소의 가시성을 ViewModel에 직접 바인딩 할 수 있습니다.

우리가 사용할 간단한 예를 살펴 보겠습니다. Model-View-ViewModel (MVVM) 접근하다.

Step 1 − 새 Silverlight 응용 프로그램 프로젝트 만들기 SilverlightMVVMDemo.

Step 2 − 아래와 같이 프로젝트에 세 개의 폴더 (Model, ViewModel, Views)를 추가합니다.

Step 3 − Model 폴더에 StudentModel 클래스를 추가하고 해당 클래스에 아래 코드를 붙여 넣습니다.

using System.ComponentModel; 
 
namespace SilverlightMVVMDemo.Model { 

   public class StudentModel {} 
	
   public class Student : INotifyPropertyChanged { 
      private string firstName; 
      private string lastName;  
		
      public string FirstName { 
         get { return firstName; } 
			
         set {
            if (firstName != value) { 
               firstName = value; 
               RaisePropertyChanged("FirstName"); 
               RaisePropertyChanged("FullName"); 
            } 
         } 
      }
		
      public string LastName { 
         get { return lastName; } 
			
         set { 
            if (lastName != value) { 
               lastName = value; 
               RaisePropertyChanged("LastName"); 
               RaisePropertyChanged("FullName"); 
            } 
         } 
      }  
		
      public string FullName { 
         get { 
            return firstName + " " + lastName; 
         } 
      } 
		
      public event PropertyChangedEventHandler PropertyChanged; 
		
      private void RaisePropertyChanged(string property) { 
         if (PropertyChanged != null) { 
            PropertyChanged(this, new PropertyChangedEventArgs(property)); 
         } 
      } 
   } 
}

Step 4 − ViewModel 폴더에 다른 StudentViewModel 클래스를 추가하고 다음 코드를 붙여 넣습니다.

using SilverlightMVVMDemo.Model; 
using System.Collections.ObjectModel;
  
namespace SilverlightMVVMDemo.ViewModel { 

   public class StudentViewModel { 
	
      public ObservableCollection<Student> Students {  
         get;  
         set;  
      }  
		
      public void LoadStudents() { 
         ObservableCollection<Student> students = new ObservableCollection<Student>(); 
				
         students.Add(new Student { FirstName = "Mark", LastName = "Allain" }); 
         students.Add(new Student { FirstName = "Allen", LastName = "Brown" }); 
         students.Add(new Student { FirstName = "Linda", LastName = "Hamerski" });
			
         Students = students; 
      } 
   } 
}

Step 5 − 추가 Silverlight User Control 마우스 오른쪽 버튼을 클릭하여 Views 폴더 및 선택 Add New Item….

Step 6− 추가를 클릭합니다. 이제 XAML 파일이 표시됩니다. 다음 코드를StudentView.xaml 다른 UI 요소를 포함하는 파일.

<UserControl x:Class = "SilverlightMVVMDemo.Views.StudentView" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <StackPanel HorizontalAlignment = "Left">
		
         <ItemsControl ItemsSource = "{Binding Path=Students}">
			
            <ItemsControl.ItemTemplate>
				
               <DataTemplate> 
					
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}" 
                        Width = "100" Margin = "3 5 3 5"/> 
								
                     <TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"  
                        Width = "100" Margin = "0 5 3 5"/> 
								
                     <TextBlock  Text = "{Binding Path = FullName, Mode=OneWay}" 
                        Margin = "0 5 3 5"/> 
								
                  </StackPanel>
						
               </DataTemplate> 
					
            </ItemsControl.ItemTemplate>
				
         </ItemsControl> 
			
      </StackPanel> 
		
   </Grid> 
	
</UserControl>

Step 7 − 이제 StudentView 당신의 MainPage.xaml 아래와 같이 파일.

<UserControl x:Class = "SilverlightMVVMDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:views = "clr-namespace:SilverlightMVVMDemo.Views" 
   mc:Ignorable = "d" 
   d:DesignHeight = "576.316" d:DesignWidth = "863.158"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <views:StudentView x:Name = "StudentViewControl" Loaded = "StudentViewControl_Loaded"/> 
   </Grid> 
	
</UserControl>

Step 8 − 다음은 구현입니다. Loaded 이벤트 MainPage.xaml.cs 파일을 업데이트합니다. View ~로부터 ViewModel.

using System.Windows; 
using System.Windows.Controls; 
 
namespace SilverlightMVVMDemo { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent();
      }
   } 
	
   private void StudentViewControl_Loaded(object sender, RoutedEventArgs e) { 
      SilverlightMVVMDemo.ViewModel.StudentViewModel 
      studentViewModelObject = new SilverlightMVVMDemo.ViewModel.
      StudentViewModel(); 
      studentViewModelObject.LoadStudents();  
      StudentViewControl.DataContext = studentViewModelObject;  
   } 
}

Step 9 − 위 코드가 컴파일 및 실행되면 웹 페이지에 다음과 같은 출력이 나타납니다.

UI 대 ViewModel

MVVM 접근 방식에서 가장 어려운 부분 중 하나는 구분선이 어디로 와야하는지 알아내는 것입니다. 어떤 것이 어디에 속하는지 항상 분명하지는 않습니다.

  • 특히 일부 사용자 인터페이스 요소는 엄격한보기에 따라 ViewModel에 속해야하는 기능을 제공합니다.

  • 일반적으로 모든 동작이 View 너무 ViewModel 친한.

  • 그 이유 중 일부는 재사용을 위해 ViewModel 동작을 패키징하는 표준 방법이 없기 때문입니다. 특히 Visual Studio 또는 Blend와 같은 디자인 환경을 사용하려는 경우에는 그렇지 않습니다.

MVVM의 장점

MVVM은 다음과 같은 이점을 제공합니다.

  • 프레젠테이션 문제 분리 (View, ViewModel, Model)

  • 테스트 가능하고 관리 가능한 코드를 정리합니다. 단위 테스트에 프레젠테이션 계층 논리를 포함 할 수 있습니다.

  • 코드 뒤에 코드가 없으므로 프레젠테이션 계층과 논리가 느슨하게 결합됩니다.

  • 더 나은 데이터 바인딩 방법.

MVVM의 단점

간단한 UI의 경우 MVVM은 과잉 일 수 있습니다. 복잡한 데이터 바인딩이있는 경우 디버깅이 약간 어려울 수 있습니다.