DHTML设计VC界面《二》- 背景

最新推荐文章于 2024-08-23 15:53:59 发布

nieoding

最新推荐文章于 2024-08-23 15:53:59 发布

阅读量4.6k

点赞数

文章标签： string border html stylesheet path exe

本文链接：https://blog.csdn.net/IamNieo/article/details/2860298

版权

首先我们生成一个基于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());
        }
    }
}
 
 

nieoding

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DHTML设计VC界面《二》- 背景

首先我们生成一个基于DHtmlDialog编程的DHtmlUIDemo工程来做实现这个UI背景 HTML资源准备把美工做好的HTML替换到程序的HTML文件中，图片资源文件放到res/下 HTML代码如下html>head> title>maindialogtitle> style>body
复制链接

扫一扫