브라우저를 포함한 창의 크기를 HTML 소스에 따라 자동 조정하기

서론
델파이 프로그램을 만들다 보면 공지사항 팝업창의 경우 일일이 컴포넌트를 배치하여 프로그래밍 하는 것 보다는 손쉽게 HTML로 화면을 제적하고, 폼 안에 브라우저를 넣어서 필요한 화면을 HTML로 보여줄 경우가 있습니다. 이런 경우, 팝업 형태의 폼을 한 만들고 TWebBrowser나 TEmbeddedWB 컴포넌트를 위로 올려서 디자인된 HTML 화면 크기에 맞도록 ClientWidth, ClientHeight 값을 조정하여 하곤 하였습니다.
하지만, 이런 식으로 작업을 하게 되면 팝업 창으로 표시할 각 HTML 내용들이 모두 같은 크기라면 문제가 없지만, 서로 다른 크기라면 그 각각의 경우를 위하여 프로그램 소스에서 직접 ClientWidth, ClientHeight를 따로따로 코딩해 주어야 하고, 다시 배포하는 등의 유지보수에서 문제가 있었습니다.
이를 한번 배포한 프로그램의 수정없이 팝업 창의 크기를 HTML 상에서 자동으로 조정하여 별도의 유지보수 노력을 줄여보자 합니다.


준비사항
아래 코드 구현 부분을 살펴보시면 아시겠지만, HTML 문서 내부를 직접 접근해야 하기 때문에, IHTMLDocument3 인터페이스가 포함되어 있는 EmbeddedWB 패키지나, MSHTML ActiveX를 Export하여 MSHTML 라이브러리 유닛을 사용할 수 있는 환경을 만들어 두셔야 합니다.


직접 팝업 창의 크기를 조정하는 방법
보통은 아래와 같이 직접 팝업 창의 크기를 소스상에서 ClientWidth, ClientHeight 값을 조정하여 구현하였었습니다.

var
 ANormalPopupForm:TNormalPopupForm;
begin
 ANormalPopupForm:=TNormalPopupForm.Create(self);
 with ANormalPopupForm do
  try
    ClientWidth:=455;
    ClientHeight:=408;
    URL:='http://demo.com/demo.html';
    Position:=poOwnerFormCenter;
    ShowModal;
  finally
    ANormalPopupForm.Free;
  end;
end;

앞서 서론에서도 이야기 했듯이 위와 같이 작업을 해 두면 불시에 팝업할 HTML 디자인이 455 X 408 크기가 아니면 크기를 다시 조정하여 빌드하고 재배포를 하는 등의 불필요한 막일(?)을 하게 됩니다.


코드의 변경없이 HTML 작업만으로 팝업 창의 크기가 자동으로 조정되도록 만드는 방법
위와 같은 문제점을 해결하고자, HTML 작업시 HTML 내용 안에 HIDDEN 값으로  ClientWidth, ClientHeight 값을 정해주고 델파이 프로그램에서 HTML 내용 안에 있는  ClientWidth, ClientHeight HIDDEN 값을 읽어서 동적으로 창의 크기를 설정하는 것입니다. 이를 위해서 MS HTML DOM 구조를 약간 이해해야 합니다.
일단 아래 구현한 소스를 보시기 바랍니다.

uses MSHTML_TLB, EmbeddedWB;

procedure TPopupBriwser.BrowserDocumentComplete(Sender:TObject; ...);
var
  nValue:integer;
  AHTMLDocument3:IHTMLDocument3;
  AHTMLElement:IHTMLElement;
begin
  if (pDisp=FDisp) then
  begin
    try
      if (EmbeddedWB.Document<>nil) and
        Succeeded(EmbeddedWB.Document.QueryInterface(IHTMLDocument3,AHTMLDocument3)) then // IE 5.0 부터 지원함.
      begin
        AHTMLElement:=AHTMLDocument3.getElementById('ClientWidth');
        nValue:=AHTMLElement.getAttribute('VALUE',0);
        ClientWidth:=nValue;

        AHTMLElement:=AHTMLDocument3.getElementById('ClientHeight');
        nValue:=AHTMLElement.getAttribute('VALUE',0);
        ClientHeight:=nValue;
      end;
    except
    end;
  end;
end;

위 코드가 제대로 동작하기 위해서는 HTML 작업시에 다음과 같이 팝업창의 폭과 높이에 대한 정보를 넘겨 주어야 합니다.

위와 같이 HTML을 코딩하고 해당 내용을 팝업창의 브라우저에 표시하면 HIDDEN에 주어진 값으로 팝업창의 크기가 동적으로 변경되게 됩니다.

참고로,

if (pDisp=FDisp) then

이부분은 페이지의 완전한 다운로드를 검사하기 위한 코드로, OnBeforeNavigate2 에서

if (FDisp<>nil)
FDisp:=pDisp;

이런식으로 만들어 주면 됩니다.


결론
브라우저 팝업창의 크기를 동적으로 조정하기 위하여 HTML 내용에 HIDDEN 값을 할당하여 처리하는 간단한 방법을 살펴보았습니다. HTML 내용 내의 항목에 직접 접근하여 처리하는 방법으로 창의 크기를 동적으로 조정하는 것 뿐만 아니라, 비슷한 방식으로 HTML을 다양하게 활용하여 여러 부분에 응용이 가능하겠죠. 단순히 표시만 하는 HTML 브라우저가 아니라, 직접 내용과 델파이 프로그램간의 긴밀한 연동으로 좀더 디자인적으로 유연하고 손쉽게 개발을 할 수 있습니다.