원본: http://silverlight.net/Quickstarts/Remote/323aac2f-14cc-4dd8-bb40-fa2cb3c2e522.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
이번 시간에는 서버와의 통신 없이 관리되는 코드 (.cs 파일)을 이용해서 HTML Document Object Model (DOM)에 동적으로 액세스할 수 있는 방법을 설명합니다.
사전 준비 사항
- Visual Studio 2008 (90일 평가판)
- Visual Studio 2008용 Silverlight Tools 베타 2
Test 페이지에 HTML 엘리먼트 추가하기
먼저, 생성할 테스트 페이지에 버튼 및 텍스트 박스, 등의 HTML 엘리먼트를 추가할 것입니다.
1. Visual C#의 Silverlight 응용 프로그램 프로젝트 하나를 만듭니다. 솔루션에 컨트롤을 호스팅할 새 웹 추가 옵션이 선택되어진 것을 확인합니다. 저는 프로젝트 이름을 EloiHtmlDom으로 설정하였습니다. (참고: Silverlight 응용 프로그램 만들기)
2. 시작 페이지를 HTML 테스트 페이지로 설정하고 소스뷰를 엽니다.
시작 페이지 설정은 EloiHtmlDomWeb의 마우스 우측 클릭하여 속성 페이지 – 시작 옵션에서 변경 가능하며 간단히 HTML 테스트 파일에 마우스 우측 클릭하여 시작 페이지로 설정으로도 변경 가능합니다.
속성 페이지에서 설정하는 화면
3. <object> 태그를 찾아 height 속성을 “100%”에서 “10%”로 변경합니다.
4. </iframe> 태그 뒤에 다음 HTML 코드를 추가합니다. 이 코드에는 두 개의 버튼과 텍스트 박스 세 개를 포함하고 있습니다.
|
<div id=”basic1”> <h3> Silverlight 관리되는 코드로 HTML 버튼 다루기</h3> <hr /> <strong>첫 번째 텍스트 박스의 텍스트를 두 번째 텍스트 박스에 대문자로 변경</strong><br /> <label>여기에 텍스트를 입력하세요:</label> <input type=”text” id=”txtInput” disabled=”disabled” size=”35” /> <button type=”button” id=”btnUCtxt”>대문자 처리</button> <br /><br /> <label>처리 결과:</label> <input type=”text” id=”txtOutput” size=”60” /> </div> <br /><br /> <div id=”basic2”> <button type=”button” id=”btnGetProperties”>속성 가져오기</button><br /> <input type=”text” id=”txtOutputProperties” size=”60” /> </div> |
5. 응용 프로그램을 실행 시키면(ctrl + F5 키를 이용하여 디버깅을 사용하지 않고 실행 시킵니다.) 대문자 처리 버튼과 속성 가져오기 버튼, 텍스트 박스 3개를 볼 수 있습니다. 먼저 첫 번째 텍스트 박스 에 대해서 다루려고 합니다. 현재 value는 없고 disabled 상태입니다.
관리되는 클래스에서 HTML 페이지 연결하기
관리되는 클래스에서 HTML 페이지에 연결하기 위해 먼저 Page 생성자에서 참조를 초기화 합니다.
1. 코드 비하인드 파일을 (Page.xaml.cs) 열어 Page 클래스를 찾습니다.
2. using 키워드를 사용하여 System.Windows.Browser 네임스페이스를 추가합니다.
3. HtmlDocument 타입의 클래스 레벨 _doc 변수를 선언합니다.
4. Page 생성자의 _doc 변수를 초기화합니다.
현재 HTML 페이지의 인스턴스로 _doc 변수를 사용합니다.
|
namespace EloiHtmlDom { Public partial class Page : UserControl { private HtmlDocument _doc; public Page() { InitializeComponent(); _doc = HtmlPage.Document; |
‘
HTML DOM 속성에 액세스하기
다음은 첫 번 째 txtInput 텍스트 박스의 속성을 동적으로 속성을 변경해보도록 하겠습니다.
1. Page 생성자의 끝 부분에 다음 코드를 추가합니다.
HTML document object의 GetElementById 메서드를 사용해서 disabled 상태를 변경하고 새로운 값을 설정합니다.
CS
|
// Return for all pages except those ending in TestPage.html if (_doc.DocumentUri.AbsoluteUri.EndsWith(“TestPage.html”) != true) return; _doc.GetElementById(“txtInput”).SetProperty(“disabled”, false); _doc.GetElementById(“txtInput”).SetAttribute(“value”, “This is set from managed code.”); |
2. 응용 프로그램을 실행 시킵니다.
txtInput 텍스트 박스에는 “This text is set from managed code.”가 나타날 것입니다. 그리고 입력 가능하게 되었습니다.
HTML DOM 엘리먼트의 이벤트 처리
HTML DOM 엘리먼트의 이벤트를 처리할 이벤트 핸들러를 추가합니다.
1. Page 생성자의 끝 부분에 아래 코드를 추가하여 대문자 처리 버튼의 onclick 이벤트의 이벤트 핸들러를 추가합니다.
btnUCtxt 엘리먼트에 참조를 btnUC 인스턴스 변수에 대입하고 btnUC 변수를 사용하여 버튼의 onclick 이벤트에 이벤트 핸들러를 추가합니다.
CS
|
// Add event handler for Uppercase Text button. HtmlElement btnUC = _doc.GetElementById(“btnUCtxt”); btnUC.AttachEvent(“onclick” new EventHandler<HtmlEventArgs>(this.OnUCtextClicked)); |
2. 대문자 처리 버튼의 onclick 이벤트의 OnUCtextClicked라는 이벤트 핸들러를 작성합니다.
3. 이벤트 핸들러에서 HTML 엘리먼트의 속성을 읽거나 씁니다.
예를 들어, 다음의 OnUCtextClicked 이벤트 핸들러에서 SetAttribute와 GetAttribute 메서드는 속성 값을 쓰고 읽기위해 txtInput과 txtOutput 엘리먼트에서 사용됩니다. txtInput 엘리먼트에 입력된 텍스는 대문자로 변환되고 txtOutput 엘리먼트의 value 속성에 할당됩니다.
CS
|
void OnUCtextClicked(object sender, HtmlEventArgs e) { HtmlElement input = _doc.GetElementById(“txtInput”); HtmlElement output = _doc.GetElementById(“txtOutput”); output.SetAttribute(“value”, input.GetAttribute(“value”).ToUpper()); } |
4. 응용 프로그램을 실행하고 대문자 처리 버튼을 클릭합니다.
HTML DOM에서 메서드 호출하기
마지막으로 HTML DOM에서 메서드를 호출합니다.
1. Page 생성자의 끝 부분에 아래 코드를 추가하여 속성 가져오기 버튼의 onclick 이벤트의 이벤트 핸들러를 추가합니다.
첫 번째 버튼과 마찬가지로 btnGetProperites 엘리먼트 참조를 btnPropGet 인스턴스 변수에 대입하고 속성 가져오기 버튼의 onclick 이벤트의 이벤트 핸들러를 추가합니다.
CS
|
// Add event handler for Get Properties button. HtmlElement btnPropGet = _doc.GetElementById(“btnGetProperties”); btnPropGet.AttachEvent(“onclick”, new EventHandler<HtmlEventArgs>(this.OnGetPropClicked)); |
2. 속성 가져오기 버튼의 OnGetPropClicked라는 onclick 이벤트 핸들러를 작성합니다.
3. 이벤트 핸들러에서 호출하려는 메서드의 HTML 엘리먼트에 동적 참조를 얻고 메서드를 호출합니다.
.
예를들어, 다음 OnGetPropClicked 이벤트 핸들러는 현재 페이지의 포트번호와 쿠키 상태, URI (Uniform Resource Identifier)를 나타낼 HtmlPage 개체를 사용하는 방법을 보여줍니다.
CS
|
void OnGetPropClicked(object sender, HtmlEventArgs e) { string outputText = “”; // _doc 선언한 곳 밑에 아래 주석과 같이 _count 변수를 초기화합니다. // private int _count = 0; _count++; switch (_count % 3) { case 0: outputText = “DocumentUri.AbsolutePath: “ + HtmlPage.Document.DocumentUri.AbsolutePath; break; case 1: outputText = “Cookies Enabled: “ + HtmlPage.BrowserInformation.CookiesEnabled.ToString() break; case 2: outputText = “Port: “ + HtmlPage.Document.DocumentUri.Port.ToString(); break; } _doc.GetElementById(“txtOutputProperties”).SetAttribute(“value”, outputText); } |
4. 응용 프로그램을 실행하고 속성 가져오기 버튼을 여러 번 클릭합니다.
버튼을 클릭할 때마다 txtOutputProperties 엘리먼트는 페이지의 URI와 쿠키 사용 가능 여부, URI를 위한 포트 번호 중 하나를 나타납니다.
행복한 하루 보내세요~^.^
EloiHtmlDomTestPage.html
Page.xaml.cs
'Silverlight(Tools, Tech.)' 카테고리의 다른 글
| [엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1) (2) | 2008/10/21 |
|---|---|
| [엘리의 실버라이트 2.0] Silverlight 시작 (6) | 2008/10/02 |
| [엘리의 실버라이트 2.0] 관리되는 코드에서 HTML DOM에 액세스 (3) | 2008/09/21 |
| [엘리의 실버라이트 2.0] Syndication Feeds 액세스 (0) | 2008/09/11 |
| [엘리의 실버라이트 2.0] Plain XML 보내기 • 받기 (0) | 2008/09/06 |
| [엘리의 실버라이트 2.0] 스플래시 스크린 만들기 (0) | 2008/08/25 |
