3주 실습강의 2009. 1학기, 소프트웨어 설계 및 실험(Ⅰ)

Preview 데이터 바인딩 실버라이트의 데이터 바인딩 데이터 흐름 DataContext INotifyPropertyChanged Data binding 예제 이주의 실습

데이터 바인딩 UI와 데이터소스 사이에 데이터가 사용될 수 있도록 연결하는 방법. 데이터를 표시하는 작업과 데이터를 다루는 작업을 분리. 비즈니스 오브젝트와 UI를 분리. 웹 페이지에는 HTML 태그와 데이터가 같이 섞여있기 때문에, 사용자가 데이터를 조작하려면 서버에게 또다시 필요한 요청을 해야 합니다. 이렇게 하면 서버가 같은 데이터에 다시 액세스하고 그것을 클라이언트에서 요구한 형식으로 만든 후, 새로운 페이지를 클라이언트로 전송합니다. 서버는 다시 한 번 HTML 페이지에 포함된 동일한 데이터를 클라이언트로 전송하는 것이지요. 이런 문제를 해결하기 위해 등장한 것이 데이터 바인딩(data binding)입니다. 데이터 바인딩은 인터넷 익스플로러 Dynamic HTML의 한 부분으로, 데이터와 HTML을 구분하기 때문에 데이터를 조작하기 위해 서버에 갔다 올 필요 없이 클라이언트 상에서 수행할 수 있습니다.

실버라이트의 데이터 바인딩 WPF의 바인딩 개념을 사용. 모든 개체들의 속성이 바인딩을 지원한다. 데이터 템플릿과 스타일을 통해 데이터 표현이 자유롭고 유연하다. UI로부터 비즈니스 로직을 완벽히 분리할 수 있다.

실버라이트의 데이터 바인딩 Dependency Property Property Binding Engine Binding Target Binding Source FrameWork Element Object Dependency Property Binding Engine Property

데이터 흐름 OneTime OneWay TwoWay 초기에 한번만 바인딩하고 연결이 끊어짐. 소스에서 타겟으로 바인딩 소스 데이터가 변경되면 타겟으로 통보되어 변경됨 TwoWay 소스타겟, 타겟소스 양방향 바인딩 사용자가 UI에 표시된 값을 변경하면 소스에 반영됨

DataContext System.Windows.FrameworkElement 클래스 SetBinding 메서드 DataContext는 부모 컨트롤에서 자식 컨트롤로 상속 같은 데이터 소스를 여러 컨트롤에 바인딩 할 때 사용 DataContext 속성에 데이터 소스를 할당 XAML에서 바인딩 표현식으로 사용 LayoutRoot.DataContext = mediaData; 실버라이트2의 모든 컨트롤은 FrameworkElement 클래스를 상속 받습니다. 그래서 모든 컨트롤은 FrameworkElement 의 DataContext라는 속성을 가지고 있습니다. DataContext 속성을 이용한 데이터바인딩은 간단합니다. DataContext 속성에 바인딩 소스로 사용할 객체를 대입 XAML 에서 바인딩 표현식을 이용하여 원하는 방식으로 데이터를 표현하면 됩니다. <TextBlock Text=“{Binding '', Path=Title}” …

DataContext 상속 최상위 Grid 컨트롤의 DataContext 설정 자식 컨트롤에서 상속되어 여러 컨트롤에서 사용 public class MediaMetadata { public string Title { get; set; } public string Description { get; set; } public string Uploader { get; set; } public DateTime UploadTime { get; set; } public stringThumbnail { get; set; } } DataContext의 재미있는 특징은 DataContext의 속성값은 자식 컨트롤의 DataContext 속성으로 상속이 된다는 것입니다. 자식 컨트롤에서 DataContext 값에 데이터 소스를 설정할 필요 없이 XAML에서 바인딩 표현식을 이용해서 값을 사용할 수 있습니다.

INotifyPropertyChanged 바인딩 된 데이터가 변경이 되면 즉시 UI에 반영 바인딩 소스 오브젝트에 반드시 INotifyPropertyChanged 인터페이스 구현 public class MediaMetadata : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; … } 바인딩 소스의 값이 변경되면 UI에 표현된 값도 변경이 되면 좋겠습니다. 이를 위해서 데이터 소스에 INotifyPropertyChanged 인터페이스를 구현해서 PropertyChanged 이벤트를 구현해 주면 가능합니다.

Data Binding 예제(1) Visual C# -> Silverlight -> Silverlight 응용 프로그램

Data Binding 예제(2) ASP.NET 웹 응용 프로그램 프로젝트

Data Binding 예제(3) public class MyColors { private SolidColorBrush changingColor; public SolidColorBrush ChangingColor get { return changingColor; } set { changingColor = value; } }

Data Binding 예제(4) <Grid x:Name="LayoutRoot" Background="White"> <TextBlock x:Name="TextBlock1" Foreground="{Binding ChangingColor}" Margin="10"> 컴퓨터 소프트웨어 설계 및 실험 DataBinding Sample. </TextBlock> </Grid>

Data Binding 예제(5) public partial class Page : UserControl { MyColors myColor = new MyColors(); public Page() InitializeComponent(); myColor.ChangingColor = new SolidColorBrush(Colors.Red); this.TextBlock1.DataContext = myColor; }

Data Binding 예제(6) MouseLeftButtonDown="UserControl_MouseLeftButtonDown“ UserControl에 추가 -> CS에 UserControl_MouseLeftButtonDown 함수 생성 private void UserControl_MouseLeftButtonDown(object sender,MouseButtonEventArgs e) { myColor.ChangingColor = new SolidColorBrush(Colors.Blue); }

Data Binding 예제(7) using System.ComponentModel; namespace에 추가 public class MyColors:INotifyPropertyChanged MyColor 클래스에 추가 public event PropertyChangedEventHandler PropertyChanged; set { changingColor = value; NotifyPropertyChanged("ChangingColor"); }

Data Binding 예제(8) public void NotifyPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } public class MyColors : INotifyPropertyChanged 안에 함수 추가

Data Binding 예제(10) Application Package Site of Origin Application Assembly Resource File Content File Site of Origin Files 리소스(Resource) 파일 – 패키지 파일중 어셈블리 파일에 포함(바이너리 형태로 저장) 경로 : ex)Image/1.jpg 컨텐트(Content) 파일 – 패키지에 포함 경로 : ex)/Image/1.jpg Site of Origin 파일 – 패키지에 포함되지 않음(웹 사이트의 리소스 등) 경로 : 실버라이트 배포 패키지(.xap) 파일의 상대경로 or 절대경로 ex)http://imgnews.naver.com/image/thumb120/038/2009/01/17/1992662.jpg

Data Binding 예제(10) 1. 프로젝트에 ‘Images’폴더 생성 2. ’Images’ 폴더에 이미지 파일 추가 3. 이미지 파일의 속성-> 빌드 작업 -> 내용

Data Binding 예제(11) <Grid x:Name="LayoutRoot" Background="White"> <Image Source="/Images/6.jpg"/> </Grid>

Data Binding 실습(1) 사진첩 만들기

Data Binding 실습(2) List Box 각 항목 선택시 동작하는 함수 생성 <ListBox HorizontalAlignment="Left" Margin="8,8,0,8" Width="146" x:Name="MyList" SelectionChanged="MyList_SelectionChanged"> <ListBox.ItemTemplate> <DataTemplate> <Image Source="{Binding Path=ThumbNail}" Width="70" Height="100"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> List Box 각 항목 선택시 동작하는 함수 생성 List Box의 각 list의 data를 이미지로 지정

Data Binding 실습(3) 1. 프로젝트에서 클래스 추가 -> 2. ImageClass.cs 생성