Email Password Remember me?  Lost your password?

• Download project (VC++ 7.1) - 110 Kb
• Download executable (MFC 7.1 static linked) - 175 Kb

Figure. 1 The demo dialog with HTML skin

Introduction

This program demonstrates how to use CDHtmlDialog and SetWindowRgn functions to give a dialog non-rectangular HTML skins. If you are familiar with HTML, it will be faster than other ways to deal with beautiful skins. The idea comes from the article, "Gimme Some Skin... VideoSkins", but I use CDHtmlDialog instead. There was an article, "Create Skins from Ordinary Web Pages", on CodeProject from the same author, but I can not reach it now.

Hope it is useful to you. I have tested my sample under Win98/Win2000/Win2003, with IE6 SP1.

Using the code

You need to change the following items to make the dialog into your own:

1. Content of the external HTML file _Html_Skin.htm.
2. The GIF mask images.
3. The handlers for HTML events in the file HtmlSkinDlg.cpp.

Features

1. Non-rectangular skinned dialog.
2. Three skins in one external HTML page.
3. Some unwanted behaviors of the browser control are banned.
   • Context menu is available only in edit control.
   • Text selection is available only in edit control.
   • Dropping file is not available. But you can drag and drop text between edit controls.
   • All the function keys F1-F12 and Escape key do not work.
   • Ctrl-P for printing is banned.
   • User can not press Ctrl-N to open a new browser window for the current URL.
4. You will be dragging the whole window if you drag anywhere in the UI, except the scroll bar and inside edit controls.
5. In Win2000, rectangular dragging outline always fits the current size of the whole window.
6. In Win2000/XP/2003, with 16 bits or higher colors, window can be set transparent.
7. Layout almost does not change when the system's theme is changed.

Compare between Figures 2a and 2b, Figures 3a and 3b, you can notice that the width of the scroll bar is the only minor difference of the same skin under two different themes.

Figure. 2a Luna skin, Windows classic theme.

Figure. 2b Luna skin, theme with super big font.

Figure. 3a WebFX skin, Windows classic theme.

Figure. 3b WebFX skin, theme with super big font.

Defects

1. The very HTML page I use in my sample needs IE5.5+.
2. The "WinClassic" skin only fits the Windows Classic theme of the system.
3. This sample supports external page only. If you want to put the HTML page and images into resource, please refer to my other article: CDHtmlDialog with CSS, JavaScript and images.
4. Loading a HTML page with beautiful images and layout may take a long time, so maybe you can add a splash screen before your skin page is loaded. Refer to this article: CSplashScreenEx.

Points of Interest

1. Dropping target can mess up the page.

   In the dialog's OnInitDialog() member, I have banned the dropping file action like this:

   //refuse dragging file into this dialog
   
   m_pBrowserApp->put_RegisterAsDropTarget(VARIANT_FALSE);

   But when I attempt to drop a file into the dialog, the content is messed up when mouse pointer is passing across the border. I notice that the key is the margin of the HTML body. In the HTML page, the following must be added to avoid the mess:

   <STYLE type=text/css>
   ...
   BODY {
     ...
     MARGIN-BOTTOM: 0px;
     MARGIN-RIGHT: 0px;
     ...
   }
   ...
   </STYLE>

2. First entrance of OnDocumentComplete is not for your external HTML page.

   The first one is for the internal HTML page in the program resource, so you may check this as follows:

   void CHtmlSkinDlg::OnDocumentComplete(LPDISPATCH , LPCTSTR szUrl)
   {
     CString sUrl=szUrl;
     sUrl.MakeLower();
     if( sUrl != _sDestUrl )
     {
       //OnDocumentComplete for built-in resource or other URLs,
   
       //not for your external page
   
       //...
   
     }
     else
     {
       //OnDocumentComplete for your external page
   
       //...
   
     }
   }

History

25 Oct 2004

Version 1.0.0.2

• [Article] Images, text and zip files are all updated.
• [Source code] Added a macro DHTML_EVENT_TAG_ALL.
• [Source code] Killed some defects on banning accelerators. Behavior inside edit control is normal now.
• [Source code] Used class CLayeredWindowHelperST to make window transparent.
• [Source code] Used GIFs instead of BMPs for small size of files.

20 Oct 2004

Version 1.0.0.1, initial release.

By the way

:) This is my second article on CodeProject. Welcome to my page iTreeSoft.

You must Sign In to use this message board.

Per page 102550

FirstPrevNext

Superb! Paul Roberts 6:15 27 Nov '08   This is going to save me so much time and give me the glossy look I was after. Thank you very much! Sign In·View Thread·PermaLink Great code! sodar 17:31 8 Jul '08   Thanks for your share! modified on Tuesday, July 8, 2008 10:37 PM Sign In·View Thread·PermaLink CDHtmlDialog compatibility with Vista John Tan Jin Kiat 21:53 28 Nov '07   Hi, Sorry, I have a question related to CDHtmlDialog but not related to this project though. I am using CDHtmlDialog for my application. The statement below works perfectly fine under XP, but in Vista, it simply refuse to load. <IMG src="file:banner.gif"> I have tried disabling the UAC but is still fail. Any idea why? John Sign In·View Thread·PermaLink 2.00/5 Link on welcome page not working Amit2203 22:40 17 Jul '07   open application and select Welcome Tab. There is a link to iTreeSoft. When click on it, URL is not opened. Any idea why it is not opened. I got the same problem in my application. From HTML page click on link is not opened like: function openwindow2() { w=open('http://www.yahoo.com','windowname2','menubar'); } Amit Sign In·View Thread·PermaLink em... seems all iTreeSoft stuff is out of date... iTreeSoft 4:44 26 Mar '08   planning to refresh some iTreeSoft things... Sign In·View Thread·PermaLink Solved. iTreeSoft 4:26 29 Mar '08   === Modify the function below in this sample code, void CHtmlSkinDlg::OnNewWindow2(LPDISPATCH FAR* ppDisp, BOOL FAR* Cancel) { *Cancel = TRUE; // cancel when needed } === like this, void CHtmlSkinDlg::OnNewWindow2(LPDISPATCH FAR* ppDisp, BOOL FAR* Cancel) { *Cancel = FALSE; } === then URL can be opened in a new window. Sample code will be updated sometime later. Sign In·View Thread·PermaLink Hitting return key closes the application nutz06 23:48 10 Jun '07   Hi everyone. I noticed that hitting the return key makes the application close. I do not know why and I cannot handle this bug. However I cannot catch the key and just dismiss its use, because my CDHTMLDialog based application must be usable with keyboard only (tab + enter + space). Do you have any solution to this ? Thanks ! nutz Sign In·View Thread·PermaLink Re: Hitting return key closes the application Member 3077090 9:16 9 Jan '08   Hi, You must implement the method OnOk() of CDHTMLDialog class with empty body. Sign In·View Thread·PermaLink How To Make Internet Explorer GUI "Draggable" Amit2203 23:09 1 Feb '07   How to make Internet Explorer GUI "draggable" so that users can click on some image, region or text INSIDE OF the displayed web page and, holding down their mouse, drag the ENTIRE browser window anywhere on the desktop. There are several ways to do this but the easiestr and most reliable I've found so far is the following: href="http://www.codeguru.com/Cpp/frameworks/advancedui/skins/article.php/c6055/ I tried this approach, but my applivation's OnBeforeNavigate2() not called on Dragging. What missed or what approach is used in this project. Thanks, Amit Sign In·View Thread·PermaLink Re: How To Make Internet Explorer GUI "Draggable" Amit2203 5:43 2 Feb '07   Well i see the solution here: BEGIN_DHTML_EVENT_MAP( ... ) //ban the selecting action DHTML_EVENT_TAG_ALL(DISPID_HTMLELEMENTEVENTS_ONSELECTSTART, OnHtmlSelectStart ) //handle all the dragging action DHTML_EVENT_TAG_ALL(DISPID_HTMLELEMENTEVENTS_ONDRAGSTART, OnHtmlDragStart ) //handle all the context menu DHTML_EVENT_TAG_ALL(DISPID_HTMLELEMENTEVENTS_ONCONTEXTMENU, OnHtmlContextMenu ) END_DHTML_EVENT_MAP() Any other ideas? Why OnBeforeNavigate2() not called on Dragging when we use CHTMLDialog? Thanks, Amit Sign In·View Thread·PermaLink Need Help on Http Header to add my own User-Agent rex_chen 8:09 13 May '06   I use CDHTMLDialog to program a simple web browser, and I had a trobule on Http Header modify. I want add my own "User-Agent" when client use my application to browse web. //------------------------------------------------------------------------------------------------ #define WM_NVTO          (WM_USER+1000) class NvToParam { public:      CString URL;      DWORD Flags;      CString TargetFrameName;      CByteArray PostedData;      CString Headers;      DWORD dwPostDataLen; }; //------------------------------------------------------------------------------------------------ LRESULT Ccdhtml_t1Dlg::OnNvTo(WPARAM wParam, LPARAM lParam) {      NvToParam* pNvTo = (NvToParam*)wParam;           CDHtmlDialog::Navigate((LPCTSTR)pNvTo->URL, pNvTo->Flags, (LPCTSTR)pNvTo->TargetFrameName, (LPCTSTR)pNvTo->Headers, pNvTo->PostedData.GetData());      delete pNvTo;      return 1; } //------------------------------------------------------------------------------------------------ void Ccdhtml_t1Dlg::OnBeforeNavigate2(LPDISPATCH pDisp, VARIANT FAR* URL, VARIANT FAR* Flags, VARIANT FAR* TargetFrameName, VARIANT FAR* PostData, VARIANT FAR* Headers, BOOL FAR* Cancel) {           CString strHeaders(V_BSTR(Headers));           if(strHeaders.Find("User-Agent:LHPBrowser 1.0") < 0)// Check User-Agent           {                *Cancel = TRUE; // Cancel this request                if(!strHeaders.IsEmpty())                     strHeaders += "\r\n";                strHeaders += "User-Agent:LHPBrowser 1.0";// Add Customize Http Header                NvToParam* pNvTo = new NvToParam;                ASSERT(V_VT(URL) == VT_BSTR);                ASSERT(V_VT(TargetFrameName) == VT_BSTR);                ASSERT(V_VT(PostData) == (VT_VARIANT | VT_BYREF));                ASSERT(V_VT(Headers) == VT_BSTR);                ASSERT(Cancel != NULL);                USES_CONVERSION;                VARIANT* vtPostedData = V_VARIANTREF(PostData);                CByteArray array;                if (V_VT(vtPostedData) & VT_ARRAY)                {                     // must be a vector of bytes                     ASSERT(vtPostedData->parray->cDims == 1 && vtPostedData->parray->cbElements == 1);                     vtPostedData->vt |= VT_UI1;                     COleSafeArray safe(vtPostedData);                     DWORD dwSize = safe.GetOneDimSize();                     LPVOID pVoid;                     safe.AccessData(&pVoid);                     array.SetSize(dwSize);                     LPBYTE lpByte = array.GetData();                     memcpy(lpByte, pVoid, dwSize);                     safe.UnaccessData();                }                // make real parameters out of the notification                CString strTargetFrameName(V_BSTR(TargetFrameName));                CString strURL(V_BSTR(URL));                DWORD nFlags = V_I4(Flags);                //=====================================================                pNvTo->URL = strURL;                pNvTo->Flags = nFlags;                pNvTo->TargetFrameName = strTargetFrameName;                pNvTo->PostedData.Copy(array);                pNvTo->Headers = strHeaders;                //=====================================================                               // Post msg                PostMessage(WM_NVTO,(WPARAM)pNvTo);                return;           }      CDHtmlDialog::_OnBeforeNavigate2( pDisp, URL, Flags, TargetFrameName, PostData, Headers, Cancel );                    } ---------------------------------------------------------- After the testing, I found it will work fine on "http reqest", "http form get" and "http form post". But if my http form is "multipart/form-data" (upload file form), some of the post datas will lost. How should I fix it? Does any one can help me? Or any better method to add http header when navigate a url? Sign In·View Thread·PermaLink Other disabled functions Scott Owen 12:26 9 May '06   In CRegionDHtmlDialog::PreTranslateMessage, you could also check for Ctrl+'F' for the IE search dialog and Ctrl+'5' for select all. For disabling the select all, you would also need to check for Ctrl+0x65. 0x65 is the numpad '5' when the numlock is on. -- modified at 18:42 Tuesday 9th May, 2006 Sign In·View Thread·PermaLink COOL! iTreeSoft 4:35 26 Mar '08   Sign In·View Thread·PermaLink Can CDHtmlDialog be used in CView? Eternity3577 11:04 17 Jan '05   Hi. This is a really nice and useful example, thanks a lot for taking time to post it. Now my question: can this class (or the base CDHtmlDialog) be used in a Document/View architecture? I'm trying to write an app. which will have the tree view on a left pane, splitter in the middle and browser object in a right pane. I know, that CHtmlView is designed for use in views, but it lacks a lot of useful stuff available in CDHtmlDialog, particularly comfortable DHTML events handling. I want this app. to have bi-directional communication with the browser and not only passive display of HTML content. Any suggestions? Thank you in advance. Sign In·View Thread·PermaLink Maybe ATL or find in articles... iTreeSoft 17:10 18 Jan '05   Hi, I am not familiar with Document/View architecture. CHtmlView can notify you some of the HTML events, such as OnDocumentComplete and so on. If CHtmlView is not suitable for your app, maybe you should use ATL to utilize the component inside CHtmlView or the system's IE component directly. Maybe there are solutions for CHtmlView in some articles, good luck! Sign In·View Thread·PermaLink Re: Can CDHtmlDialog be used in CView? gillnrb 1:21 21 May '06   That is exactly, what I need! Do you have a solution yet? Thanks, Norbert Sign In·View Thread·PermaLink OnHtmlDragStart Effiniti 0:58 10 Jan '05   In OnHtmlDragStart I notice you move the window using ::SendMessage(m_hWnd,WM_NCLBUTTONDOWN,HTCAPTION,0); However it does not work for img elements, it cannot be moved. Any solution/work around to this? Sign In·View Thread·PermaLink Make it the div background image... iTreeSoft 14:47 10 Jan '05   Well, I guess sendmessage is not the point. Try to make the image as div background image, like this <div style="width:30px;height:30px;BACKGROUND-IMAGE: url(tab.active.png);background-repeat:no-repeat;"></div> . I have no better solution now. Tell me if you find one. Good luck! Sign In·View Thread·PermaLink Re: Make it the div background image... Effiniti 20:58 10 Jan '05   Thanks. This is quite a good workaround for this issue. I was wondering if you tried with different parameters for: ::SendMessage(m_hWnd,WM_NCLBUTTONDOWN,HTCAPTION,0); Did you try other parameters such as HTCLIENT and also did you try to pass in a POINTS struct which has the current position of the window? I cannot understand why sending the WM_NCLBUTTONDOWN message does not work for <img> elements? Sign In·View Thread·PermaLink CDHtmlDialog and IE version testgames@gmail.com 4:33 5 Jan '05   Does anybody knows if CDHtmlDialog class of VC++ 7 depend on IE version. If it does, what is the minimum supported version? Thanks Gil Sign In·View Thread·PermaLink It should. iTreeSoft 23:57 5 Jan '05   It should depends on the version of IE. But does it really matter? IE 5.5+ is OK. If you need some advanced HTML effects, IE 6.0+ maybe better. Sign In·View Thread·PermaLink Re: It should. testgames@gmail.com 1:38 6 Jan '05   Hi, My application need to support IE 5 users as well. I tried to search for microsoft documentation on this subject but didn't find anything. Do you have an answer? Sign In·View Thread·PermaLink So test it first. iTreeSoft 3:16 6 Jan '05   What I can think of is to make a simple demo using CDHtmlDialog and test it in a system with IE 5.0. Good luck. Sign In·View Thread·PermaLink Re: So test it first. testgames@gmail.com 0:44 9 Jan '05   That's exactly what I'm doing... Great Job, Thanks Anyway Sign In·View Thread·PermaLink How to do about frameset newman2088 6:46 16 Nov '04   I use frameset in DHtmldialog project, events not be fired when select element in frame. Sign In·View Thread·PermaLink 5.00/5

Last Visit: 11:53 23 Nov '09     Last Update: 11:53 23 Nov '09 12 Next »