[Windows 8] Building Data-Bound Metro Style Apps (1)

지난 포스팅은 잘 보셨나요? 이번 포스팅에서 다룰 내용은 Windows 8에선 어떻게 데이터를 바인딩할건지에 대해서 알아보려고 합니다.

 무엇보다도 앱의 기능중 가장 필수인 것은 인터넷에 있는 정보를 그대로 바인딩해서 가지고 오는 것이지요. 그래야 내용물이 항상 최신으로 유지되고 있을테니까요. 여기에선 Bing 검색 API를 사용해서 자신이 원하는 사진을 가져오는 것을 구현해보려고 합니다. 우선은 Blank Application으로 프로젝트를 하나 생성합니다. 그 후에 BlankPage에 다음과 같이 ListBox를 하나 구현합니다.

 

 

자 중간에 Binding이라는 문구가 보이시나요? 이 부분을 통해서 인터넷의 정보를 받아올겁니다. 물론 그것에 대한 코드가 cs파일에 정의되어야 하겠지요. 그보다도 ListBox의 구성을 보면 전체의 ItemTemplate안에 DataTemplate가 들어 있는 것을 확인할 수 있습니다. 결론적으로 DataTemplate을 통해서 내용물을 구성하고 이것이 하나의 ListBox의 Item이 되는 것이지요.

일단 여기까지 수행하면 다음의 결과를 얻을 수 있습니다.

 

 

왼쪽에 ListBox가 생긴 것을 확인할 수 있습니다. 이제 Data를 Binding할 소스를 찾아야 합니다. 앞에서 소개한 것처럼 Bing 검색 API를 이용해보고자 합니다. 이를 위해서는 몇가지 절차를 거쳐야 합니다.

우선 http://www.bing.com/toolbox/bingdeveloper/ 로 들어가시면 Bing 개발자용 사이트가 등장합니다. 물론 msn 계정이 있어야 로그인이 되겠지요? 두가지 메뉴가 있는데 저희가 선택할 메뉴는 바로 '가입-Bing 검색 API'입니다. 여기로 들어가시면 딱 이런 창이 뜹니다.

 

 

여기서 중간의 Add 버튼을 누르게 되면 뭘 쓰라고 뜹니다.

 

 

이런 식으로 써주고 약관을 동의하면 해당 AppID가 하나 활성화됩니다. 이 AppID를 코드에서 활용해보겠습니다.

 

자 일단 기존 프로젝트의 Explorer창에서 새 Class를 생성합니다. 그리고 이름을 BingImage라고 짓습니다. 그럼 떡하니 코드가 실행되는데 아까 바인딩한 정보가 필요합니다. 그래서 해당 클래스에서 그 정보를 받는 것에 대한  get set 구문을 적어줍니다.

 

 

자 다시 BlankPage.xaml.cs로 돌아와서 다음과 같은 이벤트핸들러를 생성해줍니다.

 

 

지난 포스팅에서 알려드린 기능을 활용하면 메서드는 손쉽게 만들 수 있다고 했습니다. 이렇게 하면 이 BlankPage가 열렸을때 발생하는 이벤트가 될겁니다. 여기다가 이제 그 bing API한테서 받아오는 정보를 넣어주게 됩니다. 그걸 수행하는 메서드를 FetchBingPics라고 하고 두개의 변수를 받도록 합니다.

 

대략적인 기능이라면 Seattle을 집어넣으면 PhotoList에서 해당 문구와 관련된 이미지를 이 BlankPage에 넣어주는 역할을 할 겁니다.

자 이제 본격적인 데이터 바인딩입니다. 먼저 온라인을 통한 정보를 받아오기 위해서는 다음의 네임 스페이스가 포함되어야 합니다.

 

 

이제는 아까 생성했던 FetchBingPics 메서드를 마저 채워야 합니다. 지난 시간에도 잠깐 언급했었지만 거의 대부분의 별개 메서드에 대해서는 비동기식 처리를 해줘야 합니다. 따라서 해당 메서드에는 async가 붙어야 됩니다. 그리고 아까 두개의 변수를 집어넣게끔 되어있는데 그에 대한 처리도 같이 해줘야 합니다.

 

 

여기서부터는 인터넷으로부터 직접 받아오는 BingAppID를 이용해야 합니다. 다음과 같이 구현해줍니다.

 

 

아까 받은 AppID를 저기의 strBingAppID에 집어넣고 그걸 GetAsync를 통해서 넣어주면 됩니다. 이렇게 구성하면 Bing에는 AppID를 통해서 strKeyword에 해당하는 문구를 검색하겠지요. 아까와 같은 예제라면 Seattle이 될거고요. 이렇게 해서 검색 정보를 받아올 수 있습니다. 이제 이걸 BlankPage에 뿌려줄 코드가 필요해지겠지요. 사실 HOL에서는 그 코드를 아까 생성한 BingImage.cs 클래스에 작성해준다고 했는데 Consumer Preview로 넘어오면서 클래스간에서 정보를 받아오는게 안되더군요. 그래서 그냥 메인 페이지 상에 삽입해줬습니다.

 

 

이 부분에 대한 코드는 저도 다시 공부해봐야 할 것 같습니다. 일단 제가 이해한 바로는 BingSeachAPI로부터 xml 파일을 받고 이를 doc 파일로 파싱을 시킵니다. 그래서 이 doc파일안의 내용물을 하나씩 살펴봐서 필요정보의 value만 받아오는 것으로 읽혀지네요.

마지막으로 control에 대한 정의를 해줘야 합니다. 우선은 다음과 같이 정의해줍니다.

 

 

그러니까 control에 들어있는 개체의 종류가 ListBox일때 그안의 ItemSource를 여기서 받으라는 거겠지요. 결과는 다음과 같습니다.

 

 

생각보다 Seattle의 이미지를 잘 받아오네요. 여기다가 한번 검색 박스를 집어넣어 볼까요?

우선 ListBox의 영역을 고정하기 위해서 하나의 StackPanel로 지정해줍니다. 지금 되어 있는 것이 전부 Vertical로 되어 있으니까 역시 StackPanel의 Orientation도 Vertical로 하는 것이 좋겠지요.

 

 

그리고 앞에서 만든 ListBox 위에 다음의 StackPanel을 하나더 삽입합니다. 그리고 검색 도구들을 삽입해주면 됩니다.

 

 

그러면 결과가 다음과 같이 나옵니다.

 

 

 

자 이제 본격적인 검색기능을 코드에 넣어주면 됩니다. 그런데 사실 간단합니다. 아까 보시면 넘어오는 주소의 맨 뒤에 string이 붙는 걸 유념하셨으면 아마 TextBox를 통해서 받은 string을 저기에 넣으면 되지 않을까요? 그렇게 구현해보려고 합니다.

 

자 우선 버튼이 눌렸을 때의 이벤트를 생성해야 하는데 이건 VS2010때와 같습니다. 그냥 Search 버튼을 두번 따닥 눌러주면 되는 것이지요. 그러면 코드상에 다음의 이벤트가 자동으로 생성됩니다.

 

 

여기다가 아까의 FetchBingPics 메서드를 집어넣으면 됩니다.

 

 

결과를 한번 확인해보겠습니다.

 

 

Seoul이라고 검색하면 잘 나옵니다. 그런데 여기서도 치명적인 문제가 발생하네요. 하단부 ScrollBar가 안보이네요..

이는 검색결과가 많아지면서 StackPanel이 늘어지는 현상입니다. 그래서 ListBox의 Height를 고정하면 해결할 수 있습니다. 그런데 문제는 이렇게 했을 경우에는 해상도가 다른 pc에서는 결과가 이상하게 나올 수 있다는 겁니다.

이때는 StackPanel을 쓰지말고 기존에 LayoutRoot로 깔린 Grid의 행렬로 처리해보겠습니다. 일단 가로 배열이니까 RowDefinition이 필요합니다. 저는 첫번째 Row는 10% 두번때 Row는 다 쓰게끔 처리했습니다.

 

 

그 후에 각각의 개체들을 Grid의 Row에 넣어줍니다. 즉 아까 검색 도구로 묶어놓은 StackPanel은 Grid.Row가 0, ListBox는 1로 하면 되겠지요.

 

 

참고로 리스트박스에는 Margin도 줬습니다.

이렇게 하면 ScrollBar가 정상적으로 나옵니다. 한번 보시죠.

 

 

이번 포스팅에서는 데이터 바인딩과 Search 기능을 삽입해보았습니다. 완성하기까지 도움을 주신 많은 분들께 감사의 글을 올립니다.