Click here to Skip to main content
15,867,488 members
Articles / Web Development / HTML
Article

Dialog with HTML skin using CDHtmlDialog and SetWindowRgn

Rate me:
Please Sign up or sign in to vote.
4.83/5 (15 votes)
27 Oct 20043 min read 194.7K   5.8K   82   32
Describes how to use an external HTML page as a non-rectangular skin of a dialog.

Figure. 1 The demo dialog with HTML skin

Image 1

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.

Image 2

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

Image 3

Figure. 3a WebFX skin, Windows classic theme.

Image 4

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

Image 5

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:

    HTML
    <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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
China China
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralLink on welcome page not working Pin
Amit220317-Jul-07 21:40
Amit220317-Jul-07 21:40 
Generalem... seems all iTreeSoft stuff is out of date... Pin
iTreeSoft26-Mar-08 3:44
iTreeSoft26-Mar-08 3:44 
AnswerSolved. Pin
iTreeSoft29-Mar-08 3:26
iTreeSoft29-Mar-08 3:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.