LOVAPI

약속도 많고 이런 저런 업무 때문에 간만에 글을 씁니다.

오늘 보셨나요 GSL 2 임요환 vs 이윤열 !! 와우~ 잼있네요~ 씽나네요~ 둘 다 잘 싸웠습니다.

스타크래프트 2 방송경기 중에 이렇게 전세의 향방을 어디로 둬야 할 지 모를 게임  처음이군요.

사실 GSL1 이나  GSL2 이전 경기는 확실히 중소규모 경합이 일어나면 전세를 확인 할 수 있는 게 대부분이었으니 ㅎㅎ

오늘 해볼 공부는

- WebBrowser 컨트롤

입니다.

네 배포 된 프로그램 내서 별도 브라우저 없이(엄밀히 하자면 있겠죠)

웹 서핑이 가능하게 해주는 컨트롤 사용이죠~ 한번 쉽게 가 보아요~

아래와 같이 템플릿을 구성하시고

그리고 툴 박스를 이용하여 이렇게 화면을 꾸며보세요.

또한 원래 있던 “MYAPPLICATION”을 “WebBrowser 컨트롤”로

“page name” 을 “웹 브라우징”으로 변경 해보세요. 

해당 컨트롤 마우스 우 클릭 후 Properties를 선택하면 그 항목 중 무엇을 바꾸어야 할지는 다 보일 겁니다.

이 프로그램은 다음과 같이 동작할 겁니다.

Button 을 누르게 되면 TextBox에서 입력한 주소 값을 아래 WebBrowser 컨트롤에서 보여줄 것

그러기 위해서는 TextBox의 TextBox문구를 사용 가능한 URL을 표기 해놓아야 혼동이 되지 않겠죠?

그럼 바꿉시다. http://lovapi.tistory.com 으로  유후~

그리고 저번 포스트에서 배운걸 그대로 사용합니다.

Button 컨트롤을 더블 클릭하면 기본이벤트가 Button의 Click 이벤트이고 그렇게 이벤트 핸들러에 등록될 함수를 만듭시다.

Button 컨트롤 더블클릭 ㄱㄱ

이렇게 함수가 생겼죠?

혹 궁금해 하시는 분을 위해서 추가 설명 드리겠습니다.

private void button1_Click(object sender, RoutedEventArgs e)  …  함수의 이벤트는 어디에 생성되느냐 ?

눈치 빠르신 분들은 찾으셨을 겁니다.

네 맞습니다. 웹 프로그래밍 같은 느낌으로 XAML에 정의가 되어있네요. 참 쉽죠잉~

자 그럼 WebBrowser에 대해서 사용법을 알아야 하는데, Button 아래 선언된 XAML코드가 보입니다.

사실 C#.NET 코드로 제어를 하려면 저 녀석의 네임스페이스와 선언방식을 알아야 되죠.

그래서 우리는 아래와 같이 WebBrowser 컨트롤의 Properties를 먼저 찾아봅시다.

WebBrowser 타입 클래스의 webBrowser1 이라고 변수가 정의 되어있네요.

ASP. NET을 기억해 봅니다. .ascx 파일에서 정의된 일부 개체들은 속성에 정의된 명칭대로 변수로 호출 되었죠?

그 기억으로 해당 함수(사실 C#에선 메서드-Method-라고 부릅니다)내에서 this. 찍어보니…

아니나 다를까… 있군요. 사용해봅시다. 어느 VS/VS.NET의 WebBrrowser 컨트롤과 마찬가지로

Navigate라는 멤버 메서드가 해당 웹페이지로 이동이 되겠습니다.

WebBrowser.Navigate는 두 개의 메서드 로 오버로딩 되어있는데 저는 다음의 메서드를 사용합니다.

public void Navigate ( 	Uri url )

Uri 클래스는 생성자를 통해 string 형 값으로 개체를 생성할 수 있군요.

public Uri ( string uriString )

그리하여 완성된 코드는 다음과 같습니다.

1. string 형 str 변수를 만들고 현재 textBox1의 Text에 든 값을 할당한다.

2. Uri 객체를 str 변수데이터를 생성자의 인자로 하는 동적 인스턴스 객체 u를 만든다.

3. webBrowser1.Navigate에 u를 인자로 하는 값을 호출한다(그러면 페이지가 보입니다)

객체, 인스턴스, 인자 헷갈리는 단어들은 그냥 무시하셔도 될 겁니다.

OOP를 공부하게 되면 객체니 인스턴스니 객체의 인스턴스니 뭐니 하는 건 지겹게 보시겠습니다만

그런 깊이를 가질 상황은 아직은 아니니까요

저도 처음엔 칼같이 사용해왔으나 지금은 혼용되거나 중의적으로 쓰고 있는 게 많기도 하고…

디버그 해봅시다

뭐.. 볼 거 없이 잘 되겠지만.. 후후 으하하하하!

 


잘 되죠? 본인이 원하는 사이트로 주소를 바꿔서도 해보세요. 잘 될 겁니다.

절 믿으세요 ~_~. 설명은 잘 못해도 이런 삽질을 좀 단순한 건 잘합니다!


다음 포스트에는 다시 무엇을 할 지 고민해 보아야겠습니다.

물론 모든 IDE를 가진 언어의 목차 라는 게 있는데 일반적으로 컨트롤 다음에는 GDI인데

이 녀석은 컨트롤에 GDI개체들이 있네요 -ㅅ-. 거기다 좀 찾아봤더니 GDI개체들에 효과 주는 툴도 MS에서 내 놓았고…

그래서 좀 도움이 되는 걸 찾아보려고 합니다

찰즈 페졸드 아저씨의 관련 책(PDF가 있더군요)과, 샘플코드 위주로 찾아보고 포스팅 해야겠습니다.

그게 서로 서로 도움이 될 거 같기도 하구요 ~_~

그럼 슷하2 나 잠시 하고 자야겠습니다.

밤새 건조한 방에서 잤더니 코가 건조해서 쌍 코피가 날 기세로 잠을 설쳤더니

오늘은 좀 피곤하네요. 그래서 간략하게 두 지만 해볼까 합니다.

- Text 관련 컨트롤

- Button 컨트롤

두 가지를 컨트롤을 한번에 해보도록 하죠.

백문이 불여일코딩 (百闻 不如一Coding) ! 따라쟁이가 되어봅시다.

Windows Phone Application 템플릿으로 이런 프로젝트를 만들겠습니다.

그럼 이런 페이지가 열리게 되죠

그럼 좌측 상단 Toolbox에서 다음 컨트롤을 드래그하여 디자이너로 옮겨봅시다.

Toolbox를 고정으로 제어하는건 스스로 하세요(핀셋 아이콘 낄낄)

총 세가지 컨트롤을 드래그하여 옮겼습니다.

첫 번째는 TextBlock, 두 번째는 TextBox, 세 번째는 Button 컨트롤입니다.

간략한 사용 예를 보기 위하여 우리는

TextBox 에 입력한 값을 Button을 누르면 TextBlock에 적용되도록 하는 프로그램을 만들어 봅시다.

[기본상식]

우리가 디자이너에 올린 Button은 디자이너모드 Propertie를 보면 button1이라는 이름이 붙어있습니다.

Properties 뷰를 통하여 우리는 해당 컨트롤(객체)에 사용되는 속성들(바인딩 데이터, 스타일 등)을 조절하게 되며

Properties 와 따라다니는 Events 탭을 통하여 이벤트 핸들러에서 사용할 메서드를 정의 할 수 있습니다.

TextBox, TextBlock도 Properties가 있으니 한번 훑어 보세요.

디자이너에서 Button 컨트롤 객체를 더블클릭 합니다.

그럼 .NET 개발하시던 분들은 낯익은 그 모습,

네 맞습니다 비하인드 코드로의 C#파일 내부가 보이게 됩니다.(그냥 F7을 누르면 보이기도 합니다)

다음과 같은 모습이지요.

저 아래 음영처리 된 부분이 button 컨트롤의 클릭 이벤트 시 동작하는 메서드가 되겠습니다.

다음과 같이 메서드를 수정합니다.

[시술 전]

[시술 후]

단 한 줄 추가 되었습니다.

C# 문법을 아시거나 대충 객체를 정의 하여 사용하는 언어를 사용해 보신 분들은 알만한 쉬운 문법이죠.

this.textBlock1.Text = this.textBox1.Text;

현재 객체 속의 textBlock1 객체의 Text 라는 속성(Propertie)에

현재 객체 속의 textBox1 객체의 Text 라는 속성을 할당하라.

여담이지만 TextBox 와 TextBlock 의 Text라는 속성의 자료 형은 string으로 동일합니다.

따라서 화면의 버튼을 누르게 되면 Textbox에 입력한(디버깅을 하셔서 TextBox 텍스트를 지우고 새 값을 입력하신 후)

값이 TextBlock으로 써지는 것을 확인 하실 수 있을 겁니다.

또는 F5를 눌러 디버깅화면으로 넘어 가 봅시다.

 


위의 순서로(중간에 페이지 하나 더 있는데 너무 빨리 지나가 캡쳐가 안되네요) 프로그램을 확인할 수 있고

프로그램 테스트를 해 봅시다.

 

자 우리가 원했던 대로 프로그램이 동작하네요.

어때요 참 쉽죠?



ps. toolbox에 있는 여러가지 컨트롤들로 연습해 보시길 바랍니다.
다음 포스트 에서는 WebBrowser 컨트롤 하나 하고 컨트롤은 그냥 넘기고 싶네요.