4.웹브라우저 만들기

본장에서는 웹브라우저를 만드는 방법을 설명합니다. 본장에서 만드는 웹브라이우저는 MFC에서 제공하는 CHtmlView클래스를 이용하여 웹브라우저를 만드는 방법입니다. CHtmlView은 인터넷 익스플로어 4.0 이상급이 설치되어 있을경우 OLE를 이용하여 웹브라우저를 구동하는 것입니다. 본장에서 제작하는 예제는 인터넷 익스플로어가 컴퓨터에 설치 되었을때만 가동이 가능합니다.

대상: 중급,고급

구분: 선택

공부방법: 웹브라우저 화면을 자신의 프로그램에 내장시키고자 할경우 예제를 보면서 이해하시기를 바랍니다.

1.CHtmlView

CHtmlView는 View클래스에 인터넷 익스플로어 화면이 링크되어 있는 것입니다. 간단하게 보면 CHtmlView라는 CView에 OLE를 이용하여 익스플로어를 삽입한것입니다. 그렇기 때문에 인터넷 익스플로어 4.0이 있어야 합니다. 다음은 CHtmlView의 중요 맴버 함수들입니다.

<1>인터넷 접속함수 Navigate2

Navigate2 함수는 URL 접속함수입니다. 예를 들어서 "www.zikimi.co.kr" 이라는 URL에 접속하고자 한다면 Naviage2함수를 이용하여 다음과 같이 하면 됩니다.

Navigate2("www.zikimi.co.kr",NULL,NULL);

위와 같이하면 www.zikimi.co.kr 주소로 접속하게 되며 현재 View화면에 결과가 출력되게 됩니다. 두번째 인자는 웹브라이우 스타일을 설정하는 값이며 세번째 인자는 윈도우 Target 프레임을 의미합니다. 웹브라우저는 다양하게 윈도우가 분할될수 있습니다. 이렇게 분할된 윈도우에서 특정 윈도우를 설정할때는 3번재 인자에 윈도우 명을 설정하면 됩니다.

<2>이전으로 이동하기

웹브라우저에서 그림 5-4-1과 같은 버튼을 클릭하면 바로 전에 접속한 URL로 이동하게 됩니다.

(그림 5-4-1)웹브라우저에서 이전 이동버튼

이때 사용하는 함수는 GoBack 입니다. 간단하게 다음과 같이 설정하면 됩니다.

GetBack();

<3>다음으로 이동하기

웹브라우저에서 그림 5-4-2와 같은 버튼을 클릭하게 되면 현재 URL 앞에 접속된 URL로 이동하게 됩니다.

(그림 5-4-2)웹브라우저에서 다음으로 이동할때

이때 사용하는 함수는  GoForward 입니다. 다음과 같이 설정하면 인터넷 익스플로어에서 그림 5-4-2 버튼을 클릭한것과 같은 기능을 합니다.

GoForward();

<4>멈추기

웹브라우저에서 그림 5-4-3과 같은 버튼을 클릭하게 되면 현재 접속중이 URL의 접속을 중단합니다.

(그림 5-4-3)현재 접속중이 URL 접속 중단시

이때 사용하는 함수는 Stop 입니다. 이함수는 인자없이 다음과 같이 사용합니다.

Stop();

<4>홈페이지로 이동

웹브라우저에서 그림 5-4-4와 같은 버튼을 클릭하게 되면 웹브라우저에 설정한 홈페이지로 이동합니다.

(그림 5-4-4)홈페이지로 이동

이때 사용하는 함수는 GoHome입니다. 사용법은 다음과 같습니다.

GoHome();

<5>검색하기

검색하기는 웹브라우저에서 그림 5-4-5와 같은 버튼을 클릭하였을때 실행되는 항목입니다.

(그림 5-4-5)검색하기

이때 사용하는 함수는 GoSearch(); 입니다. 사용법은 다음과 같습니다.

GoSearch();

<6>다시 로드하기

웹브라우저에서 그림 5-4-6과 같은 버튼을 클릭하게 되면 현재 주소의 내용을 다시 로드합니다.

(그림 5-4-6) 다시로드하기

이때 사용하는 함수는 Refresh(); 입니다. 사용법은 다음과 같습니다.

Refresh();

<7>글꼴 바꾸기

인터넷 익스플로어에 보면 글꼴을 □가장크게□,□크게□,□중간□,□작게□,□아주작게□ 5개의 단계로 분리할수 있습니다. 이렇게 5개의 단개로 분리할때는 COleVariant 형의 변수를 사용하여 인자르 long값을 사용하면 됩니다. 다음은 5개의 글꼴에 해당하는 값들입니다.

COleVariant vaZoomFactor(4l);//가장 크게

COleVariant vaZoomFactor(3l);//크게

COleVariant vaZoomFactor(2l);//중간

COleVariant vaZoomFactor(1l);//작게

COleVariant vaZoomFactor(0l);//아주작게

위와 같이 vaZoomFactor 변수에 값을 설정한후에 ExecWB 함수를 이용하여 다음과 같이 하면 해당 크기로 변경됩니다.

ExecWB(OLECMDID_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER,

&vaZoomFactor, NULL);

2.웹브라우저 예제 ExBrowser

ExBorwer은 MDI 형태로 만들었으며 CHtmlView를 이용하여 웹브라우저를 내장시킨 예제 입니다. 이예제를 만들기 위해서는 AppWizard를 이용하여 프로젝트를 만들때 그림 5-4-7과 같은 형태로 설정하여야 합니다.

(그림 파일)

(그림 5-4-7)ExBrowser 프로젝트 만들기

ExBrowser 프로젝트를 만들기 위해서는 그림 5-4-7의 ⓐ항목처럼 AppWizard의 Step4에서 Internet Explorer ReBars 항목을 체크합니다. 이렇게 하는 이유는 Rebar를 이용하여 툴바 밑에 콤보박스를 설정하기 위해서 입니다. 이렇게 설정한후에 AppWizard Step6에서느 CExBrowerView를 CHtmlView로 설정합니다. 이렇게 함으로써 인터넷 익스플로어를 삽입할수 있는 프로젝트를 만들수가 있습니다.

그림 5-4-8의 ExBrowser의 전체 구조입니다.

(그림 파일)

(그림 5-4-8)ExBrower 의 전체 구조

그림 5-4-8의 ⓐ항목은 ExBrower의 전체 형태입니다. MDI 형태로 여러개의 CHtmlView를 로드할수 있는 형태이며 각각의 View에서는 ①~⑦항목까지의 기능이 수행됩니다. 이때 이내용을 코딩하는 부분은 CHtmlView를 상속받은 CExBrowserView 입니다. 다음은 ①부터 ⑦ 항목까지의 내용을 코딩한 것입니다.

(1)①항목

void CExBrowserView::OnNext()

{

GoForward();

}

(2)②항목

void CExBrowserView::OnPrev()

{

GoBack();

}

(3)③항목

void CExBrowserView::OnStop()

{

Stop();

}

(4)④항목

void CExBrowserView::OnHome()

{

GoHome();

}

(5)⑤항목

void CExBrowserView::OnSerach()

{

GoSearch();

}

(6)⑥항목

void CExBrowserView::OnReferch()

{

Refresh();

}

(7)⑦항목

//가장 크게

void CExBrowserView::OnViewFontsLargest()

{

COleVariant vaZoomFactor(4l);

ExecWB(OLECMDID_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER,

&vaZoomFactor, NULL);

}

//크게

void CExBrowserView::OnViewFontsLarge()

{

COleVariant vaZoomFactor(3l);

ExecWB(OLECMDID_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER,

&vaZoomFactor, NULL);

}

//보통

void CExBrowserView::OnViewFontsMedium()

{

COleVariant vaZoomFactor(2l);

ExecWB(OLECMDID_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER,

&vaZoomFactor, NULL);

}

//작게

void CExBrowserView::OnViewFontsSmall()

{

COleVariant vaZoomFactor(1l);

ExecWB(OLECMDID_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER,

&vaZoomFactor, NULL);

}

//가장 작게

void CExBrowserView::OnViewFontsSmallest()

{

COleVariant vaZoomFactor(0l);

ExecWB(OLECMDID_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER,

&vaZoomFactor, NULL);

}

<2>웹브라우저 View로드하기

그림 5-4-8의 ⑧ 항목처럼 ExBrowser은 툴바 밑에 콤보박스가 있습니다. 이콤보박스는 CComboBox를 상속받은 CMyCombo클래스 입니다. 먼저 CComboBox를 상속받은 CMyCombo를 만들고 이함수에서 PreTranslateMessage 함수를 생성하고 이함수에 다음과 같이 코딩합니다.

BOOL CMyCombo::PreTranslateMessage(MSG* pMsg)

{

if(pMsg->message==WM_KEYDOWN && pMsg->wParam==VK_RETURN)

{

CString data;

GetWindowText(data);

int num=AddString(data);

SetCurSel(num);

((CMainFrame *)AfxGetMainWnd())->ChangeAddress();

}

return CComboBox::PreTranslateMessage(pMsg);

}

위와 같이 코딩을 하게 되면 콤보박스 에디터상자에 데이터를 입력하고 Enter키를 누르게 되면 에디터박스에 입력된 내용이 콤보박스 리스트로 설정되고 메인프레임에 ChangeAddress함수를 호출합니다. 이함수는 다음과 같습니다.

void CMainFrame::OnChangeAddress()

{

CString address;

m_Address.GetWindowText(address);

AfxGetApp()->OpenDocumentFile(address);

}

void CMainFrame::ChangeAddress()

{

OnChangeAddress();

}

ChangeAddress함수는 다시 OnChangeAddress함수를 호출하게 되고 이함수에서는 콤보박스 에디터상자에 있는 데이터를 얻어서 OpenDocumentFile를 사용하여 새로운 차일드 윈도우를 생성하게 됩니댜. OnChangeAddress는 ChangeAddress에서 호출하며 콤보박스 리스트에서 새로운 항목을 선택하였을때도 발생됩니다. 이때는 메시지 매크로에 다음과 같이 설정하여 OnChangeAddress함수가 수행되도록 하였습니다.

ON_CBN_SELCHANGE(ID_ADDRESS,OnChangeAddress)

CMyCombo 클래스이 변수를 메인프레임에 m_Address 설정하고 ReBar에 이콤보박스를 설정합니다. OnCreate 함수에서 Rebar에 툴바와 다이얼로그 바를 설정하는 항목을 다음과 같이 고칩니다.

m_Address.Create(WS_VISIBLE|WS_CHILD|WS_BORDER|CBS_DROPDOWN ,

CRect(0,0,200,200),this,ID_ADDRESS);

if (!m_wndReBar.Create(this) ||

!m_wndReBar.AddBar(&m_wndToolBar) ||

!m_wndReBar.AddBar(&m_Address,NULL,NULL,RBBS_BREAK))

{

TRACE0("Failed to create rebar\n");

return -1;      // fail to create

}

m_wndDlgBar항목을 제거하고 m_Address를 새로 만든다음 ReBar를 만들고 m_wndDlgBar대신에 m_Address를 설정하였습니다. 이때 RBBS_BREAK 옵션을 사용한것은 콤보박스가 툴바 바로 다음 라인에 삽입하기 위해서입니다. 이렇게 하면 콤보박스에서 입력된 문자열로 OpenDocumentFile이 수행되게 됩니다.

OpenDocumentFile이 수행되면 새로운 차일드 윈도우가 만들어지고 이윈도우 타이틀에 해당 주소가 설정됩니다. View윈도우의 OnInitialUpdate 함수에서는 도큐먼트의  Tilte명을 받고 이명으로 URL에 접속을 하도록 하였습니다. 이내용은 다음과 같습니다.

void CExBrowserView::OnInitialUpdate()

{

CHtmlView::OnInitialUpdate();

CExBrowserDoc* pDoc = GetDocument();

Navigate2(pDoc->GetTitle(),NULL,NULL);

}

위와 같이하면 ExBrowser 프로그램이 완료 됩니다.