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

Preview RIA 웹과 실버라이트의 실행 구조 Silverlight with VS 2008 데이터 바인딩 실버라이트의 데이터 바인딩 데이터 흐름 DataContext INotifyPropertyChanged 데이터바인딩 예제 실습과제 주의사항

RIA (Rich Internet Application) 통신과 HTML 표현의 한계를 보완하기 위한 기술 사용자 경험 보완 새로고침 없이 서버와 통신 Classic HTML AJAX Flash & Flex Silver Light ActiveX & SmartClient WPF (XBAP) 가벼움 무거움 대표적인 RIA 기술

RIA (Rich Internet Application) AJAX 검색어 자동완성 FLEX CGV홈페이지

RIA (Rich Internet Application) Web Server Page 1 Page 2 Page 3 Page 4 HTML RIA (Rich Internet Application) Data Data Data Web Server 기존 웹 사이트 RIA Classic Web RIA 장점 클라이언트에게 최대한 가벼운 환경을 제공한다. 풍부한 UI를 표현할 수 있다. 사용자 경험을 극대화할 수 있다. 단점 UI표현의 많은 제약을 가지고 있다. 지능적인 페이지를 만들기에는 많은 한계를 가지고 있다. 기존의 사용자 경험이 무시될 수도 있다. 환경에 적합하지 않은 RIA 기술을 선택할 경우 효율성이 떨어질 수 있다. 대부분의 RIA 기술들은 검색엔진에 노출도리 수 없다.

웹의 실행구조 1.웹 서버에서 HTML을 다운받음 3.저장한 HTML을 브라우저 파서가 파싱하여 보여줌

실버라이트의 실행구조 1.웹 서버에서 HTML과 DLL을 다운받음 3.저장한 XAML파일은 브라우저에 임베디드 됨 2.다운받은 XAML과 DLL은 인터넷 임시 폴더에 저장됨 4.브라우저에 포함된 XAML파일은 실버라이트 런타임에 의해서 실행됨

기본 컨트롤(1) 컨트롤 설명 Button 주로 작업을 수행하도록 명령을 내리는 버튼 컨트롤 Calendar 날짜 형식의 데이터를 입력 받고자 할 때 사용하는 컨트롤 CheckBox 사용자가 설정/해제할 수 있는 박스 모양의 컨트롤 (다중 선택 가능) RadioButton 사용자가 설정/해제할 수 있는 원 모양의 컨트롤 (다중 선택 불가) HyperLinkButton 하이퍼링크 스타일의 버튼 컨트롤 Image 이미지를 화면에 표시하는 컨트롤 DatePicker 텍스트박스와 달력 컨트롤을 조합하여 만든 컨트롤

기본 컨트롤(2) 컨트롤 설명 ScrollViewer 컨텐츠의 내용이 지정된 컨텐츠 영역보다 더 클 때 상하 또는 좌우의 스크롤바를 표시하여 컨텐츠의 나머지 내용을 볼 수 있도록 하는 컨트롤 Slider 특정 범위 안에 있는 값을 선택할 수 있도록 하는 컨트롤 Panel 다른 컨트롤의 컨테이너 역할을 하는 컨트롤 Tab 여러 개의 UI를 하나의 지정된 영역에 표시할 때 사용하는 컨트롤 http://msdn.microsoft.com/en-us/library/cc838158(vs.95).aspx

Silverlight with VS 2008 (1)

Silverlight with VS 2008 (2) Visual C# -> Silverlight -> Silverlight 응용 프로그램

Silverlight with VS 2008 (3) ASP.NET 웹 응용 프로그램 프로젝트

Silverlight with VS 2008 (4)

Silverlight with VS 2008 (5)

Silverlight with VS 2008 (6)

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

실버라이트의 데이터 바인딩 WPF(Windows Presentation Foundation)의 바인딩 개념을 사용. 모든 개체들의 속성이 바인딩을 지원한다. 데이터 템플릿과 스타일을 통해 데이터 표현이 자유롭고 유연하다. 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) 1. 프로젝트에서 클래스 추가 -> 2. myColor.cs 생성

Data Binding 예제(2) GET, SET Method 생성

Data Binding 예제(3) GET, SET Method 생성

Data Binding 예제(4) MainPage.xaml.cs 파일 myColor.cs 파일

Data Binding 예제(5) Button에 Click 이벤트 발생시 동작할 함수를 <새 이벤트 처리기>를 클릭하여 만들어 준다. MainPage.xaml.cs 파일에 생성된 함수에 color.ChangingColor= new SolidColorBrush(Colors.Blue); 를 추가하여 실행하여 본다.

Data Binding 예제(6) 실행을 하여 버튼을 클릭하면 글의 색이 푸른색으로 변하여야 할 것 같으나 변하지 않는다. myColor.cs 파일 에 다음과 같이 추가한다. 붉은 네모 상자로 된 부분이 추가된 부분이다. 실행하여 버튼을 ] 클릭하면 글자색 이 푸른색으로 변 한다.

실습 과제(사진첩 만들기)

실습 과제(사진첩 만들기) 아래 코드를 MainPage.xaml의 Grid 태그 내부에 적어 넣는다. 리스트에서 그림을 선택 시 큰 그림을 바꿔주는 코드를 작성한다. 그럼 수고하세요~

주의사항 ASP.NET과는 다르게 디자인 페이지가 없습니다. 따라서 여러분들이 직접 코딩을 하여 디자인해야 합니다. 다음 주에 실버라이트 디자인 툴인 블렌드를 가르쳐 드릴 것입니다. XXX.xaml 파일을 수정한 후에 반드시 저장을 하세요. 그렇지 않으면 .xaml.cs 파일에서 각 컴포넌트의 ID에 접근할 수 없습니다. 실행 전에 빌드 탭의 ‘솔루션 다시 빌드’ (단축키:Ctrl+Alt+F7)을 한 후 실행하여야 합니다.