Page 0: Page 1: Hello MVVM! 하승민(승미) 실버라이트 코리아 Microsoft Silverlight MVP antasis9@gmail.com Page 2: Part I ( Start Developing ) Page 3: Introduction Designer Programmer Page 4: Image gallery Page 5: How 같이 협업해야 하는데.. 어떻게 하지? x:Name을 이용해 이름을 정의하자 Page 6: Define ImageListBox (ListBox) SearchTextBox (TextBox) SearchButton (Button) Page 7: Documentation x:Name 타입 설명 ImageListBox ListBox 이미지 출력 SearchTextBox TextBox 검색어 입력 SearchButton Button 검색 버튼 Page 8: Let’s go~ 이제 이름도 다 정의했고… 이제 협업을 위한 준비를 마쳤군. 개발을 시작해 볼까? Page 9: Demo* Page 10: Let’s go~ 개발 완료 ^^! 우릮 환상의 콤비! Page 11: Part II ( Renewal ) Page 12: New Image gallery CoverFlow CheckBox Page 13: Let’s go~ 컨트롤이 바뀌었네 x:Name 그리고 컨트롤 타입을 재정의 해야겠어 Page 14: New Image gallery ImageCoverFlow (CoverFlow) SearchComboBox (ComboBox) Page 15: Documentation x:Name 타입 기존에 작성했던 문서도 수정 설명 ImageListBox ImageCoverFlow ListBox CoverFlow 이미지 출력 SearchTextBox SearchComboBox TextBox ComboBox 검색어 입력 검색어 선택 SearchButton Button 검색 버튼 Page 16: Programmer.. 흠.. Control 타입을 변경하고 이벤트도 변경해야겠네.. 아무리 봐도 디자인 말곤 변한 게 없는데, 왜 이렇게 코드를 많이 고쳐야 하는 거지? Page 17: What is the problem? - 사용하는 Control이 변경된다면 코드를 수정해야 한다. - 매번 컨트롤에 이벤트 핸들러를 연결해야 한다. Page 18: Designer.. 디자인 변경할 때마다 x:Name을 새로 정해야하는게 너무 불편해 매번 문서를 갱신하는 것도 어렵고, 오래된 프로젝트 같은 경우엔 문서를 매번 찾아보면서 해야 하는 번거로움이 있단 말이야 Page 19: What is the problem? - x:Name을 꼭! 지켜서 디자인해야 한다. - Control 타입을 미리 정해놓기 때문에 다른 컨트롤을 사용할 수 없다. (디자이너의 상상력이 크게 제한된다!!!) Page 20: What is the problem? x:Name 타입 설명 ImageListBox ImageCoverFlow ListBox CoverFlow 이미지 출력 SearchTextBox SearchComboBox TextBox ComboBox 검색어 입력 검색어 선택 SearchButton Button 검색 버튼 - x:Name을 관리해야한다. - x:Name이 많아진다면? Page 21: Part III ( MVVM? ) Page 22: Can MVVM be solution? - 사용하는 컨트롤이 변경된다면 코드를 수정해야 한다. - 매번 컨트롤에 이벤트 핸들러를 연결해야 한다. Page 23: Can MVVM be solution? - x:Name을 꼭! 지켜서 디자인해야 한다. - Control 타입을 미리 정해놓기 때문에 다른 컨트롤을 사용할 수 없다. (디자이너의 상상력이 크게 제한된다!!!) Page 24: Material of MVVM View View Model Model Page 25: Material of MVVM 데이터를 객체화 Model Database의 데이터 OpenAPI를 이용한 검색 결과.. Page 26: Material of MVVM Model을 이용해서.. 데이터 제공 View Model Command를 이용해서.. 기능 제공 이미지 검색 이미지 검색 결과 Page 27: Material of MVVM 디자인(XAML) View Data Binding을 이용해서.. ViewModel에서 제공하는 데이터와 기능을 이용 Page 28: Material of MVVM View Command Binding View Model 사용 Model Page 29: Image gallery Page 30: Programmer.. MVVM으로 생각해보자 내가 제공할 기능 검색 (SearchCommand) 내가 제공할 데이터 검색 결과 (SearchResult) Page 31: Material of MVVM View View Model Model 기능 : SearchCommand 데이터 : SearchResult Page 32: Designer.. 난, 검색을 하고 싶을 때, SearchCommand를 실행해주고, 결과를 출력하고 싶은 곳에, SearchResult를 바인딩 해주면 끝! Page 33: Material of MVVM 버튼 클릭 시.. SearchCommand 실행 View Command Binding View Model Model ListBox에 SearchResult 바인딩 기능 : SearchCommand 데이터 : SearchResult Page 34: Demo* Page 35: New Image gallery CoverFlow ComboBox Page 36: Programmer.. 난 변경할게 없을 것 같아 Page 37: Material of MVVM View View Model Model 기능 : SearchCommand 데이터 : SearchResult Page 38: Designer.. CheckBox의 아이템이 선택된 경우에 SearchCommand를 실행하도록 변경해야겠네 그리고 CoverFlow에 SearchResult를 바인딩하자 Page 39: Material of MVVM CheckBox 선택 시.. SearchCommand 실행 View Command Binding View Model Model CoverFlow에 SearchResult 바인딩 기능 : SearchCommand 데이터 : SearchResult Page 40: Demo* Page 41: Part IV (Conclusion) Page 42: Conclusion x:Name Control Type Event Handler Page 43: Conclusion Unit Test Page 44: Demo* Page 45: Q&A Page 46: Page 47: