DHTML设计VC界面《二》- 背景
首先我们生成一个基于DHtmlDialog编程的DHtmlUIDemo工程来做实现这个UI背景
- HTML资源准备
把美工做好的HTML替换到程序的HTML文件中，图片资源文件放到res/下
HTML代码如下
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title>maindialog</title>
- <style>
- body {
- margin:0;
- color:#fff;
- font-size:12px;
- }
- .sbTxt
- {
- color:#FFF;
- float:left;
- font:normal 12px 'Trebuchet MS','Arial';
- }
- .wh
- {
- color:#FFF;
- float:left;
- font:normal 9px 'Trebuchet MS','Arial';
- }
- .logout
- {
- cursor:hand;
- color:#FFF;
- float:left;
- font:normal 9px 'Trebuchet MS','Arial';
- text-decoration:underline;
- }
- .setting
- {
- cursor:hand;
- color:#FFF;
- float:left;
- font:normal 9px 'Trebuchet MS','Arial';
- text-decoration:underline;
- }
- .whs
- {
- color:#FFF;
- float:left;
- font:normal 15px 'Trebuchet MS','Arial';
- }
- .td_normal
- {
- cursor:hand;
- }
- .td_normal span
- {
- color:#FFF; /* 默认链接颜色 */
- float:center;
- text-decoration:none;
- font:normal 8px 'Trebuchet MS','Arial';
- }
- .td_hover
- {
- cursor:hand;
- background: url(res/button.png) no-repeat left center;
- }
- .td_hover span
- {
- color:#FFF; /* 默认链接颜色 */
- float:center;
- text-decoration:none;
- font:normal 8px 'Trebuchet MS','Arial';
- }
- .td_gray
- {
- filter:gray;
- }
- .td_gray span
- {
- color:#999; /* 默认链接颜色 */
- float:center;
- text-decoration:none;
- font:normal 8px 'Trebuchet MS','Arial';
- }
- .text
- {
- border:1px solid #3261a7;
- font:normal 12px 'Trebuchet MS','Arial';
- }
- .bl
- {
- color:#FFF;
- font:normal 9px 'Trebuchet MS','Arial';
- }
- .btn {
- background:url(res/btn.gif) no-repeat;
- height:35px;
- width:81px;
- color:#fff;
- border:none;
- cursor:pointer;
- font-size:14px;
- }
- /*for tab*/
- .tab1,.tab2{
- border: 1px solid #CAE2FD;
- border-bottom:none;
- }
- .tab2{
- border-left:none;
- }
- .tab_current
- {
- cursor:hand;
- border-bottom:1px solid #406DB0;
- font:normal 9px 'Trebuchet MS','Arial';
- height:23px;
- padding:2px 6px 0 6px;
- line-height:19px;
- text-align:center;
- color:#ffffff;
- }
- .tab_normal
- {
- cursor:hand;
- font:normal 9px 'Trebuchet MS','Arial';
- height:23px;
- padding:2px 6px 0 6px;
- line-height:19px;
- text-align:center;
- border-bottom: 1px solid #CAE2FD;
- color:#aeaeae;
- }
- .tab_hover
- {
- cursor:hand;
- border-bottom:1px solid #CAE2FD;
- font:normal 9px 'Trebuchet MS','Arial';
- height:23px;
- padding:2px 6px 0 6px;
- line-height:19px;
- text-align:center;
- color:#ffffff;
- }
- .tab {
- position:relative;
- z-index:2;
- top:4px;
- }
- .content
- {
- width:100%;
- height:90%;
- clear:both;
- padding-top:5px;
- background:#406DB0;
- border:1px solid #CAE2FD;
- position:relative;
- z-index:1;
- }
- .statusBar {
- height:20px;
- position:absolute;
- bottom:0;
- z-index:100;
- width:100%;
- border:none;
- background:url(res/statusbar_bg.jpg) repeat-x #7FA7E2;
- }
- .statusBar img{
- position:absolute;
- right:0;
- bottom:0;
- }
- </style>
- </head>
- <body leftmargin="0" topmargin="0">
- <img id=bkd style="position:absolute;width:100%;height:100%;z-index:-10" src="res/bg.jpg">
- <table id=tbOnline class="tab" width=100% border=0 cellpadding=0 cellspacing=0>
- <tr><td valign=top>
- <table width=100% cellpadding=0 cellspacing=0 border=0>
- <tr>
- <td align="left" valign=top>
- <table>
- <tr><td height=70>
- <table cellpadding="0" cellspacing="0" border="0" id="tbToolbar">
- </table>
- </td></tr>
- <tr><td valign=bottom>
- <table id=tbTab cellpadding="0" cellspacing="0" border=0>
- </table>
- </td></tr>
- </table>
- </td>
- <td align="right" valign="top">
- <table>
- <tr><td valign=bottom><div class=bl id=divNickname></div></td><td> </td><td valign="bottom"><span class=setting id=divSetting>设置</span></td><td><span class=whs>|</span></td><td valign="bottom"><span class=logout id=divLogout>注销</span></td><td> </td></tr></table>
- </td>
- </tr>
- </table>
- </td></tr>
- </table>
- <div class=content id=content></div>
- <div class="statusBar" id=statusBar><span class="sbTxt" id="sbTxt"></span><img id=imgStatus src="res/icon_resize.gif" alt="调整窗口大小" /></div>
- </body>
- </html>
2. 基本代码准备
2.1包含CHtmlEditor类库；
2.2书写几个基本函数，主要用于替换HTML内部的相对地址到程序绝对地址，为什么有这份工作呢？因为我们的Demo程序使用的Html是包含在程序内部的HTML资源，那么默认资源寻址将对于exe文件有效，这是什么意思呢？，假如你的html里面有一段<img src=res/title.gif>，那么解析器并不会去找当前目录下的res子目录，而是会去找exe资源中的叫做"res/title.gif"的内部资源，我们必须手工将所有相对地址转向到"file///你的执行文件目录/res/图片资源"这样的地址，当然还有另外一种办法，就是让程序初始化不要加载exe里的html资源，而是直接加载硬盘上的html文件，这样相对寻址就会有效了，不需要做file:///这样的转换
- std::string _replace(std::string &str, const char *string_to_replace, const char *new_string)
- {
- int index = str.find(string_to_replace);
- while(index != std::string::npos)
- {
- str.replace(index, strlen(string_to_replace), new_string);
- index = str.find(string_to_replace, index + strlen(new_string));
- }
- return str;
- }
- string _addabsurl(string abs)
- {
- _replace(abs,"/","//");
- char path[_MAX_PATH];
- ::GetModuleFileName(0,path,sizeof(path));
- string tmp = path;
- int pos = tmp.rfind('//');
- string folder = tmp.substr(0,pos);
- char url[_MAX_PATH];
- sprintf_s(url,sizeof(url),"file:///%s//%s",folder.c_str(),abs.c_str());
- return url;
- }
- string _repleaseurl(string src)
- {
- string filter = "res://";
- if(src.substr(0,filter.length())!=filter)
- return src;
- src = src.substr(filter.length(),src.length()-filter.length());
- int pos = src.find('/');
- string abs = src.substr(pos+1,src.length()-pos-1);
- return _addabsurl(abs);
- }
- string _repleaserule(string src)
- {
- int pos = src.find('(');
- int pos2 = src.find(')');
- string abs = src.substr(pos+1,pos2-pos-1);
- string chg = _addabsurl(abs);
- return _replace(src,abs.c_str(),chg.c_str());
- }
2.3 CDHtmlUIDemoDlg内部基本初始化代码
我们需要在OnNavigateComplete当页面加载完成后把页面内部图片地址做绝对转换
- void CDHtmlUIDemoDlg::ChangeImgSrc(string tag)
- {
- CComPtr<IHTMLElement> elem;
- CDHtmlDialog::GetElement(tag.c_str(),&elem);
- cHtmlImg img(elem);
- if(img.Valid())
- {
- img.SetSrc(_repleaseurl((LPCTSTR)img.GetUrl()).c_str());
- }
- }
- cHtmlStyleSheet CDHtmlUIDemoDlg::GetStyleSheet()
- {
- try
- {
- CComPtr<IHTMLStyleSheetsCollection> i_Collect;
- CComQIPtr<IHTMLStyleSheet, &IID_IHTMLStyleSheet> i_Sheet;
- if(this->m_spHtmlDoc==NULL)
- throw string("empty");
- this->m_spHtmlDoc->get_styleSheets(&i_Collect);
- long s32_Len;
- i_Collect->get_length(&s32_Len);
- if(s32_Len<=0)
- throw string("Error");
- CComVariant v_Index(0);
- CComVariant v_StyleSheet;
- i_Collect->item(&v_Index, &v_StyleSheet);
- i_Sheet = v_StyleSheet.pdispVal;
- return cHtmlStyleSheet(i_Sheet);
- }
- catch(string)
- {
- return cHtmlStyleSheet(0);
- }
- }
- void CDHtmlUIDemoDlg::OnNavigateComplete(LPDISPATCH pDisp, LPCTSTR szUrl)
- {
- CDHtmlDialog::OnNavigateComplete(pDisp, szUrl);
- ChangeImgSrc("bkd");
- ChangeImgSrc("logoLogin");
- ChangeImgSrc("logoLogining");
- ChangeImgSrc("progress");
- ChangeImgSrc("imgStatus");
- cHtmlStyleSheet sheet = this->GetStyleSheet();
- if(sheet.Valid())
- {
- cHtmlStyle st = sheet.GetRule(".btn");
- BSTR b;
- if(st.Valid())
- {
- st.mi_RuleStyle->get_background(&b);
- CString x = _repleaserule((LPCTSTR)CString(b)).c_str();
- st.mi_RuleStyle->put_background(x.AllocSysString());
- }
- st = sheet.GetRule(".td_hover");
- if(st.Valid())
- {
- st.mi_RuleStyle->get_background(&b);
- CString x = _repleaserule((LPCTSTR)CString(b)).c_str();
- st.mi_RuleStyle->put_background(x.AllocSysString());
- }
- st = sheet.GetRule(".statusBar");
- if(st.Valid())
- {
- st.mi_RuleStyle->get_background(&b);
- CString x = _repleaserule((LPCTSTR)CString(b)).c_str();
- st.mi_RuleStyle->put_background(x.AllocSysString());
- }
- }
- }