[Windows Phone7] mini Browser Sample 분석
created:2010-03-19
updated:2015-07-03
Windows Phone 7 코드 샘플 4가지를 분석해 보는 시간을 갖도록 하겠습니다. 총 4가지의 샘플을 분석하는 이유는 보통 C#에서 쓰던 클래스 라이브러리가 있지만, Windows Phone7으로 오면서 달라진 점도 있을수 있고, 또 위치 정보 서비스 또는 가속도 같은 경우에는 에뮬레이터 설정을 바꿔줘야 하는 경우가 있기 때문에 분석의 필요성을 느꼈습니다.
**mini Browser **
****
먼저 [미니 브라우저에 대한 샘플 코드](http://msdn.microsoft.com/en-us/library/ff431744(VS.92).aspx "[http://msdn.microsoft.com/en-us/library/ff431744(VS.92).aspx]로 이동합니다.")를 다운 받으시고, 압축을 푸세요. 물론, 지금 이 글을 보시는 분들은 [Windows Phone 7 개발 환경이 구축](http://ash84.tistory.com/entry/윈도우-폰의-반격-윈도우-폰-앱-개발환경-공개 "[http://ash84.tistory.com/entry/윈도우-폰의-반격-윈도우-폰-앱-개발환경-공개]로 이동합니다.")되어 있어야 합니다. sln파일을 더블클릭 하시면, 다음과 같은 화면이 나올것입니다.
일단 어떻게 동작하는지 먼저 구경을 해보자구요. 금강산도 식후경이라는 말이 있듯이 분석을 하기전에 동작하는 모습을 봐야 감이 잡히겠죠^^
동작 시켜보면 알겠지만, 그냥 브라우저 입니다. 위의 창에 웹 사이트 주소를 입력하고 GO 버튼을 누르면 해당웹사이트로 이동하는 프로그램입니다. 사실 별거 없죠. 그럼 파헤쳐 볼까요?
**User Interface**
****
그럼 먼저 UI를 파헤쳐 보겠습니다. 솔루션 탐색기에서 MainPage.xaml 을 누르시면 위와 같은 UI가 나오게 됩니다. 기존의 Winform 어플리케이션과 달리 Windows Phone 7에서는 xaml로 UI를 개발하죠(물론 드래그앤 드롭으로 컨트롤을 배치할 수 있습니다.) App.xaml은 아니니까 누르지마시구요.
창를 보게되면 왼쪽에는 UI가, 오른쪽에는 xaml 코드를 보실수가 있는데, UI와 xaml 코드가 서로 호환이 된다고 보시면 됩니다. 즉, UI의 어떤 속성을 바꾸면 xaml 코드에서서 어떤 부분이 바뀌게 되는것이지요.
UI를 뜯어보면 크게 5가지가 보입니다. 작은 타이틀, 큰 타이틀, 주소창, GO 버튼 그리고 실제 웹페이지가 표시되는 부분입니다. 비주얼 스튜디오의 오른쪽을 보시면, **Document Outline** 이라는 메뉴가 보일것입니다. **Document Outline**을 누르면 현재 UI의 전체적인 구조를 보실수가 있습니다. 크게 하나의 Grid 컨트롤(LayoutRoot)안에 두개의 Grid, TitleGrid 와 ContentGrid 가 있습니다. TitleGrid 안에는 두개의 TextBlock이 있습니다. 이 두개의 TextBlock 을 이용해서 “My First Application” 이라는 것과 “Mini Browser”라는 것을 표시해 주고 있는것이지요.그럼 ContentGrid 안에는 무엇이 있는지 볼까요?
ContentGrid 안에는 TextBox 와 Button 그리고 WebBrowser 컨트롤이 있습니다. 즉, 우리가 UI 화면만으로 봤을때는 그냥 다 하나의 바탕안에 있는것 처럼 보이지만 실제로는 Grid로 나누어서 관리를 하고 있고 이러한 것을 지원해 주기 위해서 Document Outline 이라는것이 존재하는 것 입니다.
기존의 윈모바일의 윈폼 Application을 개발할때에는 사실 이런 부분이 많이 부족했었습니다. 하나의 Panel안에 여러 컨트롤들을 넣고 페이지 별로 관리를해도 사실 시각적으로 포함관계를 알수 없으면 개발할때 답답할 경우가 많았는데 이제는 그럴 염려는 없을것 같네요.
ContentGrid를 살펴보면 3가지 컨트롤로 이루어져 있는데, 왜 TextBox와 Button이 존재하는 것일까요?
사실 .NET 에서 제공하는 Web Browser 컨트롤은 웹 페이지를 보여주는 역할만 하기 실제 우리가 익스플로러나 기타의 웹 브라우저 처럼 URL을 입력하는 창은 없습니다. 때문에 TextBox에 URL을 입력하고 Button을 누르면 해당 TextBox에 입력한 주소의 웹페이지를 WebBrowser 컨트롤에 보여주게 되는것이지요.
그럼 코드를 살펴 볼까요?
**Code **
****
UI 를 MainPage.xaml 을 보았기 때문에 코드도 MainPage.xaml.cs 를 보시면 됩니다. 보시면 다음과 같이 되어 있습니다.
public MainPage()
{
InitializeComponent();
SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
}
우선 위의 코드가 생성자를 나타낸 다는 것은 다 아실테고, InitializeComponent() 함수는 윈폼 Application을 만들때 부터 자동으로 생기는 함수로 UI에 대한 초기화 작업이 되어 있는 부분입니다. 지금 보실 필요는 없고.
SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape
SupportedPageOrientation.Portrait
다음 코드를 보시면, **SupportedOrientations **이라는 enum 형식의 것이 있는데, 이것은 현재 개발하는 어플에서 제공하는 Orientations (방향)을 지정할 수가 있습니다. 즉, 위의 코드에서는 Portrait (세로) 와 Landscape(가로) 모드를 다 지원한다는 것입니다. 실제로 에뮬레이터에 올려보시면, 세로에서 가로로 돌렸을때 “Mini Browser”라는 글씨가 제대로 보이지만, Landscape 를 빼게되면 돌려도 글자가 누운 상태로 보이게 됩니다. 개발하는 어플리케이션에 따라서 그런 부분을 고려해주어야 겠지요.
private void button1_Click(object sender, RoutedEventArgs e)
{
string site;
site = textBox1.Text;
webBrowser1.Navigate(newUri(site, UriKind.Absolute));
}
다음은 버튼 처리에 관한 코드입니다. 보시는것 처럼 아주 간단한데요 TextBox 에서 Text 를 받아와서 웹페이지를 보여주는 부분입니다. WebBrowser 객체에서 해당 주소의 웹페이지를 호출하는 함수는 Navigate 입니다. Navigate 함수는 파라미터로 Uri 를 받고 있기 때문에 다음과 같이 넣어 준것입니다.
Uri의 생성자를 보면 다양한 형식으로 오버로드 되어 있는것을 볼수 있는데요. 그 중에서 여기서는
**
Uri(String, UriKind)
**라는 것을 사용합니다. String 에는 웹 페이지 주소가 들어가게 되는데,UriKind 는 무엇일까요?
UriKind 라고 하는 것은 Uri의 종류를 정의한다고 나와있습니다. (Defines the kinds of [Uri](http://msdn.microsoft.com/en-us/library/system.uri.aspx)s) 즉, 현재 쓰려고하는 Uri 가 절대 주소(example: http://www.contoso.com/index.html)인지 상대주소(example: /index.html) 인지를 나타내는것입니다. UriKind 는 enum 형식이고 3가지의 값을 가지고 있습니다.
****
**– RelativeOrAbsolute **
**– Absolute **
**– Relative **
****
RelativeOrAbsolute 는 절대 주소인지 상대주소인지 애매할때 설정해 두는 것이라고 합니다. 사용자가 어떤 주소를 쓸지 모를때에 설정해 두면 좋을것 같네요
**정리**
첫번째 샘플 코드 분석이었는데, 미니 브라우저는 생각보다 쉽게 구현할 수 있게 되어 있었습니다. 사실 기존의 .Net Compact Framework 나 윈 모바일에서도 이 부분은 webBrowser 컨트롤을 통해서 쉽게 구현이 가능한 부분이었습니다.
하지만, Document Outline 이라던지, SupportedOrientations 같은 부분을 보면서, 기존의 윈 모바일보다 좀더 쉽게 구현할 수 있게 제공하는것 같습니다. MS는 개발자에게는 친절하다는 생각이 들었습니다.