[강좌-Delphi] 웹브라우저(TWebBrowser)의 사용자 인터페이
스 커스터마이징[데모]
이 글에서는 이전 글 [강좌-Delphi] 웹브라우저(TWebBrowser)의 사용자 인터페이스 커스터마이징에서 살펴 본 웹브라우저를 사용자 화 하기 위한 기본 클래스인 TWBContainer를 활용하는 사례를 살펴 보도록 하겠습니다.
데모를 위한 요구사항을 다음과 같은 요구사항이 있다고 가정합니다.
- 웹브라우저에서 표시되는 다이얼로그 박스내 Display되는 TEXT를 HTML이용하여 표시하고 싶다.
- HTML은 다이얼로그의 원래 일부인 것처럼 동작 해야 한다.
- 다이얼로그는 웹브라우저를 포함시킨 응용 어플리케이션의 테마를 사용해야 한다.
- 다이얼로그 박스는 사용자가 지정한 팝업 메뉴를 Display할 수 있다.
우리가 만들 데모 프로그램은 위와 같은 다이얼로그를 에뮬레이션 하며 웹브라우저 상에 표현되는 컨트롤들을 얻기 위해 이전 글에서 작성한 TWBContainer 클래스를 이용할 것입니다. 아주 잘 만들어진 코드는 아니겠지만 TWBContainer를 활용하는 방법에 대한 이해를 돕기에는 충분 합니다.
우리가 작성할 데모 프로젝트는 두 단계로 나누어서 설명 하도록 합니다. 1단계는 TWebBrowser를 커스터마이징 하지 않은 상태의 기본 어플리케이션으로 기본적으로 어떤 동작을 하는지 살펴볼 수 있고, 두번째 단계에서는 커스터마이징 한 후에 어떻게 변하게 되는지 비교해 볼 수 있도록 구성 했습니다.
1단계 : 기본프로젝트 작성하기
1) 새 프로젝트를 만듭니다.
File>New>VCL Form Application delphi 클릭
2) 폼을 다음과 같이 구성 합니다.
- Form의 BorderStyle을 "bsDialog"로 지정
- Form에 TButton 컴포넌트를 하나 추가하고 Caption을 '닫기'로 지정하고 버튼의 OnClick 이벤트에 다음 코드
를 작성 합니다.
procedure TForm1.Button1Click(Sender: TObject); begin Close; // close the application end;
- Form에 TPopupMenu 컴포넌트를 추가하고 메뉴 아이템(Menu Item)을 하나 추가하여 Caption을 "CSS
보기"로 지정 합니다.
- Form에 TWebBrowser 컴포넌트를 추가하고 Align 프로퍼티를 "alTop"으로 지정하고 폼에 적당히 사이즈를
늘려 줍니다. TWebBrowser.PopupMenu에 위에 추가된 TPopupMenu컴포넌트를 지정합니다(아마도
"PopupMenu1" 이 되겠군요).
- 폼의 소스의 Use절에 "XPMan" 유닛(Delphi7 이후 버전에 존재함)을 추가합니다. 이 유닛은 프로그램의 테마
를 이용할 수 있도록 합니다.(델파이 프로젝트의 리소스파일에서 기본 테마를 지정하면 하지 않아도 됩니다.)
3) 폼의 OnCreate 이벤트를 다음과 같이 작성합니다.
procedure TForm1.FormCreate(Sender: TObject);
begin;
// load content
WebBrowser1.Navigate(
ExtractFilePath(ParamStr(0)) + 'DlgContent.html'
);
end;
4) HTML파일을 다음과 같이 작성 합니다. 파일명은 "DlgContent.html"로 저장합니다. 위 소스에서 이 파일을
OnCreate 이벤트에서 파라미터로 전달하여 열도록 할 것입니다.
<html>
<head>
<title>Demo Dialog Content</title>
<script type="text/javascript">
function ViewArticle() {
wdw = window.open();
wdw.document.location =
"http://www.delphidabbler.com/articles?article=18";
}
</script>
</head>
<body>
<h1>
About this demo
</h1>
<p>
This demo relates to the DelphiDabbler.com article "How to
customise the TWebBrowser user interface".
<input
type="button"
name="button"
id="button"
value="View article..."
onclick="ViewArticle();"
/>
</p>
<p>
© Copyright P D Johnson
(<a href="http://www.delphidabbler.com/"
target="_blank">delphidabbler.com</a>), 2004-2006.
</p>
<p class="ruled">
Right click above the line to see the custom pop-up menu.
</p>
</body>
</html>
위 HTML코드는 다음 내용이 포함된 코드를 정의 합니다.
- 문서 내에서 정의되지 않은 .ruled 라는 CSS class를 이용하여 문단의 스타일이 포함된 TEXT
- 클릭하면 새 운도우를 오픈하는 자바스크립트를 실행하는 버튼
- 새창으로 웹페이지를 네비게이션 하기 위한 클릭 가능한 TEXT
다음 화면은 위 프로젝트를 직접 실행했을 때의 윈도우 폼이며 팝업메뉴 클릭시 나오는 메뉴를 보여줍니다. 여기서는 아직 커스터마이징 되지 않은 TWebBrowser를 이용했을 때 기본적인 동작이 이러함을 보여 줍니다.
지금까지 작성한 프로그램의 다이얼로그 박스는 다음과 같은 문제가 있을 수 있습니다.
- 다이얼로그 박스인데 웹브라우저가 디스플레이 되면서 기본 테두리와 스크롤바가 생겼다.
- HTML이 기본 스타일로 로딩 되었다.
- 폼의 Close버튼은 어플리케이션의 테마가 적용 되었지만 웹브라우저 않에 있는 "View Article" 웹 버튼 콘트롤
은 테마가 적용되지 않아서 이질 적으로 보인다.
- 팝업메뉴 프로퍼티를 지정 했음에도 불구하고 기본 브라우저의 컨텍스트 메뉴가 디스플레이 되었다.
2단계 : 커스터마이징 적용 하기
이제 [강좌-Delphi] 웹브라우저(TWebBrowser)의 사용자 인터페이스 커스터마이징 에서 개발 했던 클래스를 이용하는 부분 입니다.
Use절에 추가해야 할 유닛
- IDocHostUIHandler, TNulWBContainer, TWBContainer클래스가 작성된 유닛
- ActiveX, SysUtils
1단계에서 작성된 TForm1의 프로퍼티로 TWBContainer 타입의 FWBContainer 필드를 추가 합니다.
다음으로 1단계에서 작성했던 폼의 OnCreate 이벤트 핸들러를 다음과 같이 수정 합니다.
procedure TForm1.FormCreate(Sender: TObject); const // 기본 CSS 스타일 템플릿 설정 cCSSTplt = 'body {'#13#10 + ' background-color: %0:s;'#13#10 + ' color: %1:s;'#13#10 + ' font-family: "%2:s";'#13#10 + ' font-size: %3:dpt;'#13#10 + ' margin: 4px;'#13#10 + '}'#13#10 + 'h1 {'#13#10 + ' font-size: %3:dpt;'#13#10 + ' font-weight: bold;'#13#10 + ' text-align: center;'#13#10 + '}'#13#10 + 'input#button {'#13#10 + ' color: %1:s;'#13#10 + ' font-family: "%2:s";'#13#10 + ' font-size: %3:dpt;'#13#10 + '}'#13#10 + '.ruled {'#13#10 + ' border-bottom: %4:s solid 2px;'#13#10 + ' padding-bottom: 6px;'#13#10 + '}'; var FmtCSS: string; // CSS 저장 변수 begin // 시스템 컬러로 기본 CSS 설정 FmtCSS := Format( cCSSTplt, [ColorToHTML(Self.Color), ColorToHTML(Self.Font.Color), Self.Font.Name, Self.Font.Size, ColorToHTML(clInactiveCaption)] ); // 웹브라우저 컨테이너(TWBContainer를 생성하고 프로퍼티를 기본 값으로 설정 fWBContainer := TWBContainer.Create(WebBrowser1); fWBContainer.UseCustomCtxMenu := True; // 사용자 팝업메뉴 사용 활성 fWBContainer.Show3DBorder := False; // 테두리 없음 fWBContainer.ShowScrollBars := False; // 스크롤바 표시 안함 fWBContainer.AllowTextSelection := False; // 텍스트 선택 비활성 처리 fWBContainer.CSS := FmtCSS; // 위에서 설정한 기본 CSS 사용
// 웹페이지 컨텐츠를 로딩 fWBContainer.HostedBrowser.Navigate( ExtractFilePath(ParamStr(0)) + 'DlgContent.html' ); end;
위 소스는 다음과 같습니다.
- 다이얼로그 박스에 표시될 HTML문을 만들때 사용할 기본 스타일시트(CSS)를 지정
- 이 CSS는 런타임시에 시스템 폰트정보를 얻어서 CSS 템플릿의 동적 속성값(예 : ont-family: "%2:s" )을 채워서 FmtCSS 문자열 변수에 저장(여기에서 ColorToHTML이라는 Helper 함수를 사용됨)
- ColorToHtml Helper Function
function ColorToHTML(const Color: TColor): string;
var
ColorRGB: Integer;
begin
ColorRGB := ColorToRGB(Color);
Result := Format(
'#%0.2X%0.2X%0.2X',
[GetRValue(ColorRGB), GetGValue(ColorRGB), GetBValue(ColorRGB)]
);
end;
- TWebBrpwser를 파라미터로 넘겨주는 컨테이너 객체(TWBContainer) 생성
- 마지막으로 앞서 만들었던 원본 HTML파일 문서를 웹브라우저에 로딩(웹브라우저 컨트롤을 엑세스 하기 위한 컨테이너 객체의 HostedBrowser 프로퍼티의 사용이 제외된)
다음으로 프로그램의 완전성을 위하여 폼의 OnDestroy 이벤트 핸들러에서 OnCreate 이벤트에서 생성한 컨테이너 객체 FWBContainer를 해제 하는 코드를 작성합니다.
추가로 팝업메뉴에 추가한 메뉴 아이템의 클릭 이벤트를 추가 합니다.
procedure TForm1.FormDestroy(Sender: TObject); begin fWBContainer.Free; // free the container pbject end; procedure TForm1.ShowtheCSS1Click(Sender: TObject); begin ShowMessage(fWBContainer.CSS); // display the CSS code end;
이제 모든 코드가 작성 되었고 실행할 준비가 되었습니다. 컴파일 후에 실행 해 봅니다.
우리가 원했던 위 기본 프로젝트의 문제가 모두 해결된 결과를 볼 수 있습니다.
전체 소스코드
데모 프로젝트의 소스는 다음과 같이 구분하여 바로 재활용 할 수 있도록 합니다.
- CustomWebBrowserBasic,dpr / .dproj: 데모 프로젝트 및 프로젝트 설정 파일
- uCustomWebBrowserBasic.pas / .dfm : 데모 프로젝트의 메인 폼 (다이얼로그 타입)
- uContainer.pas : 실제 프로젝트에서 uses 절에 포함할 컨테이너 메인 유닛으로 TWBContainer 객체 선언 및 구현
- IntfDocHostUIHandler.pas : IDocHostUIHandler 인터페이스 선언 및 구현
- uNullContainer.pas : 아무것도 하지 않는 Null컨테이너 객체 선언 및 구현
- DlgContent.html : 메인폼내 다이얼로그 메시지를 위한 HTML파일
데모 소스 다운로드 : 
DelphiDemo_CustomWebBrowser.zip
참조 : http://delphidabbler.com/articles?article=18
'프로그래밍 > Delphi' 카테고리의 다른 글
| [Demo-Delphi]웹브라우저에서 자바스크립트로 델파이 코드 실행하기 (0) | 2018.10.30 |
|---|---|
| [Delphi/Tip] 디렉토리 선택 다이얼로그 호출하기 (0) | 2018.10.18 |
| [강좌-Delphi]웹브라우저(TWebBrowser)의 사용자 인터페이스 커스터마이징 (0) | 2018.10.06 |
| [강좌-Delphi]웹브라우저에서 자바스크립트로 델파이 코드 실행하기 (0) | 2018.10.06 |
| [Delphi/Tip] 프로그램간 메시지 전송 (1) | 2018.09.27 |
