win32 htmlayout点击按钮创建新窗口，以及按钮图片样式

最近在做一个C++ win32的桌面图形程序，我不是C++程序员，做这个只是因为最近没什么java的活。

windows api，之前接触的时候，还是大学，那时用这个开发打飞机游戏纯粹是娱乐。现在基本忘光了。

我要实现的最初的需求也很简单，就是做一个界面，上面有按钮，点击按钮出现新的窗口。界面是htmlayout来做。所以就是看着代码，边学边做，完全摸着石头过河，这篇文章也没啥技术含量。

第一步，使用htmlayout，创建一个简单窗口，这在我上一篇文章有详细记述：http://www.cnblogs.com/rixiang/p/6605416.html

要说明一点，项目大的框架，例如如何htmlayoout怎样引入sdk等等在上述链接的文章里说明。本篇文章只具体记录我解决的问题。就是【win32 htmlayout点击按钮创建新窗口，以及按钮图片样式】。

第二步，点击按钮打开另一个新的窗口

这里我花了些时间摸索win32窗口的原理，其必要的流程是要先注册窗口ATOM MyRegisterClass(HINSTANCE hInstance)，然后调用CreateWindow这一win32 API，之后

ShowWindow(hWnd, nCmdShow); 以及UpdateWindow(hWnd); main函数的话，接下来就是消息循环。

这里的重点，也就是我之前没注意到搞错过的事情，就是创建子窗口的时候，其CreateWindow中父窗口句柄的参数一定要放入父窗口的hWnd。另外就是注册lpszClassName一定要和创建的lpszClassName一致。

所以就是，触发点击按钮事件时，在该事件函数里调用创建子窗口的方法，接着进行子窗口注册、创建、显示、更新、消息循环的过程。

在创建子窗口后，通过EnableWindow(hWndPar,FALSE);函数使父窗口暂时失效，在关闭子窗口的时候，再启用父窗口。

第三步，窗口样式

我希望达到的样式是，界面没有默认的帮助菜单，以及右上角的X关闭。界面上只有按钮，关闭按钮也是自己定义。并且按钮背景图片是自己定义的。

实现了第二步的基础上又用了大概一天时间摸索。最后发现，取消默认的帮助菜单其实是需要在窗口注册函数里定义：

wcex.lpszMenuName    = NULL;//MAKEINTRESOURCE(IDC_WIN32HTML);

之后又困惑于自己CSS里定义的按钮背景图片为何没有生效，最后我试着把html加载路径由相对路径改为绝对路径就OK了。

2017年6月27日补充：要达到界面没有默认的帮助菜单，以及右上角的X关闭的效果，CreateWindow函数的第三个函数需要为：WS_CLIPCHILDREN|WS_CLIPSIBLINGS|WS_POPUP

hwnd = CreateWindow("66", NULL, WS_CLIPCHILDREN|WS_CLIPSIBLINGS|WS_POPUP,
CW_USEDEFAULT, 0, 0, 0, hWndPar, NULL, hInst, NULL);

最后效果：



点击上面的按钮则弹出新窗口，点击下面的按钮则直接退出。



下面是源代码，以后扩展下也许会放到github，暂时就直接贴代码了。作为java程序员，感觉桌面窗口程序开发也是非常常见的需求，以后可以做一个总结，把python、C++等等多种桌面窗口程序demo做个合集，放到github：

Win32Html.cpp，这里定义的是main函数和主窗口:

// Win32Html.cpp : 定义应用程序的入口点
#include "stdafx.h"
#include "Win32Html.h"
#include "New.h"

#include <htmlayout.h>
#include "behaviors/notifications.h"
#include <htmlayout_behavior.hpp>

#pragma comment(lib,"HTMLayout.lib")
#define MAX_LOADSTRING 100

// 全局变量:
HINSTANCE hInst;                                // 当前实例
TCHAR szTitle[MAX_LOADSTRING];                    // 标题栏文本
TCHAR szWindowClass[MAX_LOADSTRING];            // 主窗口类名

// 此代码模块中包含的函数的前向声明:
ATOM                MyRegisterClass(HINSTANCE hInstance);
BOOL                InitInstance(HINSTANCE, int);
LRESULT CALLBACK    WndProc(HWND, UINT, WPARAM, LPARAM);
INT_PTR CALLBACK    About(HWND, UINT, WPARAM, LPARAM);

// 父窗口句柄
HWND hWnd;

#include "New.h"

int APIENTRY _tWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPTSTR    lpCmdLine,
_In_ int       nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);

MSG msg;
HACCEL hAccelTable;

// 初始化全局字符串
LoadString(hInstance, IDS_APP_TITLE, szTitle, MAX_LOADSTRING);
LoadString(hInstance, IDC_WIN32HTML, szWindowClass, MAX_LOADSTRING);
MyRegisterClass(hInstance);

// 执行应用程序初始化:
if (!InitInstance (hInstance, nCmdShow))
{
return FALSE;
}

hAccelTable = LoadAccelerators(hInstance, MAKEINTRESOURCE(IDC_WIN32HTML));

// 主消息循环:
while (GetMessage(&msg, NULL, 0, 0))
{
if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg))
{
TranslateMessage(&msg);
DispatchMessage(&msg);
}
}

return (int) msg.wParam;
}

//
//  函数: MyRegisterClass()
//
//  目的: 注册窗口类。
//  作者: sonne
//  日期: 2017-03-23
//
ATOM MyRegisterClass(HINSTANCE hInstance)
{
WNDCLASSEX wcex;

wcex.cbSize = sizeof(WNDCLASSEX);

wcex.style            = CS_HREDRAW | CS_VREDRAW;
wcex.lpfnWndProc    = WndProc;
wcex.cbClsExtra        = 0;
wcex.cbWndExtra        = 0;
wcex.hInstance        = hInstance;
wcex.hIcon            = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_WIN32HTML));
wcex.hCursor        = NULL;//LoadCursor(NULL, IDC_ARROW);
wcex.hbrBackground    = (HBRUSH)(COLOR_WINDOW+1);
wcex.lpszMenuName    = NULL;//MAKEINTRESOURCE(IDC_WIN32HTML);
wcex.lpszClassName    = szWindowClass;
wcex.hIconSm        = LoadIcon(wcex.hInstance, MAKEINTRESOURCE(IDI_ICON));

return RegisterClassEx(&wcex);
}

//
//   函数: InitInstance(HINSTANCE, int)
//
//   目的: 保存实例句柄并创建主窗口
//   作者: sonne
//   日期: 2017-03-23
//   注释:
//
//        在此函数中，我们在全局变量中保存实例句柄并
//        创建和显示主程序窗口。
//
BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
hInst = hInstance; // 将实例句柄存储在全局变量中

hWnd = CreateWindow(szWindowClass,  NULL, WS_CLIPCHILDREN|WS_CLIPSIBLINGS|WS_POPUP/*WS_OVERLAPPED*/,
CW_USEDEFAULT, 0, 1000, 1000, NULL, NULL, hInstance, NULL);

if (!hWnd)
{
return FALSE;
}

ShowWindow(hWnd, nCmdShow);
UpdateWindow(hWnd);

return TRUE;
}

void OnButtonClick(HELEMENT button);

struct DOMEventsHandlerType: htmlayout::event_handler
{
DOMEventsHandlerType(): event_handler(0xFFFFFFFF) {}
virtual BOOL handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params )
{
switch( params.cmd )
{
case BUTTON_CLICK:              OnButtonClick(params.heTarget); break;// click on button
case BUTTON_PRESS:              break;// mouse down or key down in button
case BUTTON_STATE_CHANGED:      break;
case EDIT_VALUE_CHANGING:       break;// before text change
case EDIT_VALUE_CHANGED:        break;//after text change
case SELECT_SELECTION_CHANGED:  break;// selection in <select> changed
case SELECT_STATE_CHANGED:      break;// node in select expanded/collapsed, heTarget is the node
case POPUP_REQUEST:
break;// request to show popup just received,
//     here DOM of popup element can be modifed.
case POPUP_READY:               break;// popup element has been measured and ready to be shown on screen,
//     here you can use functions like ScrollToView.
case POPUP_DISMISSED:           break;// popup element is closed,
//     here DOM of popup element can be modifed again - e.g. some items can be removed
//     to free memory.
case MENU_ITEM_ACTIVE:                // menu item activated by mouse hover or by keyboard
break;
case MENU_ITEM_CLICK:                 // menu item click
break;

// "grey" event codes  - notfications from behaviors from this SDK
case HYPERLINK_CLICK:           break;// hyperlink click
case TABLE_HEADER_CLICK:        break;// click on some cell in table header,
//     target = the cell,
//     reason = index of the cell (column number, 0..n)
case TABLE_ROW_CLICK:           break;// click on data row in the table, target is the row
//     target = the row,
//     reason = index of the row (fixed_rows..n)
case TABLE_ROW_DBL_CLICK:       break;// mouse dbl click on data row in the table, target is the row
//     target = the row,
//     reason = index of the row (fixed_rows..n)

case ELEMENT_COLLAPSED:         break;// element was collapsed, so far only behavior:tabs is sending these two to the panels
case ELEMENT_EXPANDED:          break;// element was expanded,

}
return FALSE;
}

} DOMEventsHandler;

LRESULT CALLBACK HTMLayoutNotifyHandler(UINT uMsg, WPARAM wParam, LPARAM lParam, LPVOID vParam)
{
// all HTMLayout notification are comming here.
NMHDR*  phdr = (NMHDR*)lParam;

switch(phdr->code)
{
case HLN_CREATE_CONTROL:    break; //return OnCreateControl((LPNMHL_CREATE_CONTROL) lParam);
case HLN_CONTROL_CREATED:   break; //return OnControlCreated((LPNMHL_CREATE_CONTROL) lParam);
case HLN_DESTROY_CONTROL:   break; //return OnDestroyControl((LPNMHL_DESTROY_CONTROL) lParam);
case HLN_LOAD_DATA:         break;
case HLN_DATA_LOADED:       break; //return OnDataLoaded((LPNMHL_DATA_LOADED)lParam);
case HLN_DOCUMENT_COMPLETE: break; //return OnDocumentComplete();
case HLN_ATTACH_BEHAVIOR:   break;
}
return 0;
}

//
//  函数: WndProc(HWND, UINT, WPARAM, LPARAM)
//
//  目的: 处理主窗口的消息。
//  作者: sonne
//  日期: 2017-03-23
//  WM_COMMAND    - 处理应用程序菜单
//  WM_PAINT    - 绘制主窗口
//  WM_DESTROY    - 发送退出消息并返回
//
//
LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
int wmId, wmEvent;
PAINTSTRUCT ps;
HDC hdc;
LRESULT lResult;
BOOL    bHandled;

// HTMLayout +
// HTMLayout could be created as separate window
// using CreateWindow API.
// But in this case we are attaching HTMLayout functionality
// to the existing window delegating windows message handling to
// HTMLayoutProcND function.
lResult = HTMLayoutProcND(hWnd,message,wParam,lParam, &bHandled);
if(bHandled)
return lResult;

// 相对路径
char* chRelativePath = "htmlayoutDemo.htm";
WCHAR wsRelativePath[256];

switch (message)
{
case WM_CREATE:
{
// Normally HTMLayout sends its notifications
// to its parent.
// In this particular case we are using callback function to receive and
// and handle notification. Don't bother the desktop window (parent of this window)
// by our notfications.
HTMLayoutSetCallback(hWnd,&HTMLayoutNotifyHandler,0);

// attach DOM events handler so we will be able to receive DOM events like BUTTON_CLICK, HYPERLINK_CLICK, etc.
htmlayout::attach_event_handler(hWnd, &DOMEventsHandler);

memset(wsRelativePath,0,sizeof(wsRelativePath));
//char* 转LPCWSTR
MultiByteToWideChar(CP_ACP, 0, chRelativePath, strlen(chRelativePath)+1, wsRelativePath,
sizeof(wsRelativePath)/sizeof(wsRelativePath[0]));

//使用绝对路径
WCHAR wsPath[MAX_PATH];
GetCurrentDirectoryW(2048,wsPath);
wcscat(wsPath,L"\\");
wcscat(wsPath,wsRelativePath);

HTMLayoutLoadFile(hWnd,wsPath);

SetWindowText(hWnd,"身份认证系统");
SetForegroundWindow( hWnd );

//窗口初始化
DWORD dWidth = HTMLayoutGetMinWidth(hWnd);
DWORD dHeight = HTMLayoutGetMinHeight(hWnd,dWidth);
int cx = GetSystemMetrics(SM_CXSCREEN);
int cy = GetSystemMetrics(SM_CYSCREEN);
SetWindowPos(hWnd,HWND_TOPMOST,cx/2-dWidth/2,cy/2-dHeight/2,dWidth,dHeight,SWP_NOZORDER);
HRGN hRgn;
RECT rect;
GetWindowRect(hWnd,&rect);
hRgn = CreateRoundRectRgn(0,0,rect.right-rect.left,rect.bottom-rect.top,20,20);
SetWindowRgn(hWnd,hRgn,TRUE);
}
break;
case WM_COMMAND:
wmId    = LOWORD(wParam);
wmEvent = HIWORD(wParam);
// 分析菜单选择:
switch (wmId)
{
case IDM_ABOUT:
DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);
break;
case IDM_EXIT:
DestroyWindow(hWnd);
break;
default:
return DefWindowProc(hWnd, message, wParam, lParam);
}
break;
case WM_PAINT:
hdc = BeginPaint(hWnd, &ps);
// TODO: 在此添加任意绘图代码...
EndPaint(hWnd, &ps);
break;
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProc(hWnd, message, wParam, lParam);
}
return 0;
}

// “关于”框的消息处理程序。
INT_PTR CALLBACK About(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
UNREFERENCED_PARAMETER(lParam);
switch (message)
{
case WM_INITDIALOG:
return (INT_PTR)TRUE;

case WM_COMMAND:
if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL)
{
EndDialog(hDlg, LOWORD(wParam));
return (INT_PTR)TRUE;
}
break;
}
return (INT_PTR)FALSE;
}

//************************************
// 作      者:    sonne
// 函  数  名:  OnButtonClick
// 功      能:  按钮响应事件
// 完  整  名:  OnButtonClick
// 访  问  权:  public
// 返回值类型:  VOID
// 方法限定符:
//************************************
void OnButtonClick(HELEMENT button)
{
htmlayout::dom::element cBut = button;
if (!wcscmp(cBut.get_attribute("id"),L"button1"))
{
NEW::InitInstance(hInst, 0, hWnd, szWindowClass);
}
//关闭按钮
if (!wcscmp(cBut.get_attribute("id"),L"button2"))
{
PostMessage(hWnd,WM_DESTROY,NULL,NULL);
}
}

New.h，这里定义的是点击按钮弹出的新窗口的一系列方法:

#pragma once

#include <htmlayout.h>
#include "behaviors/notifications.h"
#include <htmlayout_behavior.hpp>

namespace NEW
{
#define MAX_LOADSTRING 100
// 全局变量:
HINSTANCE hInst;                                // 当前实例
TCHAR szTitle[MAX_LOADSTRING];                    // 标题栏文本
TCHAR szWindowClass[MAX_LOADSTRING];            // 主窗口类名

// 此代码模块中包含的函数的前向声明:
ATOM                MyRegisterClass(HINSTANCE hInstance);
BOOL                InitInstance(HINSTANCE, int);
LRESULT CALLBACK    WndProc(HWND, UINT, WPARAM, LPARAM);
INT_PTR CALLBACK    About(HWND, UINT, WPARAM, LPARAM);

//
//  函数: WndProc(HWND, UINT, WPARAM, LPARAM)
//
//  目的: 处理主窗口的消息。
//  作者: sonne
//  日期: 2017-03-27
//
//  WM_COMMAND    - 处理应用程序菜单
//  WM_PAINT    - 绘制主窗口
//  WM_DESTROY    - 发送退出消息并返回
//
//
LRESULT CALLBACK NewWndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
int wmId, wmEvent;
PAINTSTRUCT ps;
HDC hdc;
LRESULT lResult;
BOOL    bHandled;
lResult = HTMLayoutProcND(hWnd,message,wParam,lParam, &bHandled);
if(bHandled)
return lResult;

char* path = "newPage.htm";
WCHAR wsz[256];

switch (message)
{
case WM_CREATE:
memset(wsz,0,sizeof(wsz));
MultiByteToWideChar(CP_ACP, 0, path, strlen(path)+1, wsz, sizeof(wsz)/sizeof(wsz[0]));
HTMLayoutLoadFile(hWnd,wsz); //Hello.htm需要放在和exe同一目录,记得把dll也copy过去
break;

case WM_COMMAND:
wmId    = LOWORD(wParam);
wmEvent = HIWORD(wParam);
switch (wmId)
{
case IDM_ABOUT:
DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);
break;
case IDM_EXIT:
DestroyWindow(hWnd);
break;
default:
return DefWindowProc(hWnd, message, wParam, lParam);
}
break;
case WM_PAINT:
hdc = BeginPaint(hWnd, &ps);
EndPaint(hWnd, &ps);
break;
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProc(hWnd, message, wParam, lParam);
}
return 0;
}

//
//  函数: MyRegisterClass()
//
//  目的: 注册窗口类。
//  作者: sonne
//  日期: 2017-03-27
//
ATOM NewRegisterClass(HINSTANCE hInstance)
{
WNDCLASSEX wcex;

wcex.cbSize = sizeof(WNDCLASSEX);

wcex.style            = CS_HREDRAW | CS_VREDRAW;
wcex.lpfnWndProc    = (WNDPROC)NewWndProc;
wcex.cbClsExtra        = 0;
wcex.cbWndExtra        = 0;
wcex.hInstance        = hInstance;
wcex.hIcon            = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_WIN32HTML));
wcex.hCursor        = LoadCursor(NULL, IDC_ARROW);
wcex.hbrBackground    = (HBRUSH)(COLOR_WINDOW+1);
wcex.lpszMenuName    = MAKEINTRESOURCE(IDC_WIN32HTML);
wcex.lpszClassName    = "hh";
wcex.hIconSm        = LoadIcon(wcex.hInstance, MAKEINTRESOURCE(IDI_SMALL));

return RegisterClassEx(&wcex);
}

//
//   函数: InitInstance(HINSTANCE, int)
//
//   目的: 保存实例句柄并创建主窗口
//
//   注释:
//
//        在此函数中，我们在全局变量中保存实例句柄并
//        创建和显示主程序窗口。
//   作者: sonne
//   日期: 2017-03-27
//
BOOL InitInstance(HINSTANCE hInstance, int nCmdShow, HWND hWndPar, TCHAR szWindowClass[])
{
HWND newHWnd;
hInst = hInstance; // 将实例句柄存储在全局变量中
htmlayout::dom::element root;
char szCurrPath[MAX_PATH];
GetCurrentDirectory(MAX_PATH,szCurrPath);

NewRegisterClass(hInst);

newHWnd = CreateWindow("hh", NULL, WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, hWndPar, NULL, hInst, NULL);

EnableWindow(hWndPar,FALSE);

if (!newHWnd)
{
return FALSE;
}

ShowWindow(newHWnd, 5);
UpdateWindow(newHWnd);

MSG msg;
HACCEL hAccelTable;
hAccelTable = LoadAccelerators(hInst, (LPCTSTR)IDR_ACCELERATOR);
while (GetMessage(&msg, NULL, 0, 0))
{
if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg))
{
TranslateMessage(&msg);
DispatchMessage(&msg);
}
}
Sleep(100);
EnableWindow(hWndPar,TRUE);
SetForegroundWindow( hWndPar );
BringWindowToTop(hWndPar);
root = htmlayout::dom::element::root_element(hWndPar);
if (root)
{
root.refresh();
}
SetCurrentDirectory(szCurrPath);
return TRUE;
}

// “关于”框的消息处理程序。
INT_PTR CALLBACK About(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
UNREFERENCED_PARAMETER(lParam);
switch (message)
{
case WM_INITDIALOG:
return (INT_PTR)TRUE;

case WM_COMMAND:
if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL)
{
EndDialog(hDlg, LOWORD(wParam));
return (INT_PTR)TRUE;
}
break;
}
return (INT_PTR)FALSE;
}

}

Resource.h:

//{{NO_DEPENDENCIES}}
// Microsoft Visual C++ generated include file.
// Used by Win32Html.rc
//

#define IDS_APP_TITLE            103

#define IDR_MAINFRAME            128
#define IDD_WIN32HTML_DIALOG    102
#define IDD_ABOUTBOX            103
#define IDM_ABOUT                104
#define IDM_EXIT                105
#define IDI_WIN32HTML            107
#define IDI_SMALL                108
#define IDC_WIN32HTML            109
#define IDC_MYICON                2

//{{NO_DEPENDENCIES}}
// Microsoft Visual C++ 生成的包含文件。
// 供 Settings.rc 使用
//
#define IDI_ICON                        101
#define IDR_ACCELERATOR                 102
#define IDD_MASK                        103
#define IDC_X                           1002

#ifndef IDC_STATIC
#define IDC_STATIC                -1
#endif
// 新对象的下一组默认值
//
#ifdef APSTUDIO_INVOKED
#ifndef APSTUDIO_READONLY_SYMBOLS

#define _APS_NO_MFC                    130
#define _APS_NEXT_RESOURCE_VALUE    129
#define _APS_NEXT_COMMAND_VALUE        32771
#define _APS_NEXT_CONTROL_VALUE        1000
#define _APS_NEXT_SYMED_VALUE        110
#endif
#endif

htmlayoutDemo.htm：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
font:12px Helvetica,Georgia,Arial,sans-serif;
margin:0;
padding:0;
background:#fff;
}
ul{
list-style-type: none;
margin:0px;
}
.bStyle1 {
background:url(test_button1.png) top left no-repeat;
width:180px;
height:130px;
border:none;
cursor:pointer;
}
.bStyle2 {
background:url(test_button2.png) top left no-repeat;
width:180px;
height:130px;
border:none;
cursor:pointer;
}
</style>
<title>
new page
</title>
</head>
<body>
<h2>htmlayout demo.</h2>
<ul>
<li><input type="button" id="button1" class="bStyle1"/></li>
<li><input type="button" id="button2" class="bStyle2"/></li>
</ul>
</body>
</html>

项目结构：



github代码地址：

https://github.com/SonnAdolf/sonne_desktop_graphical_development