一种全新的软件界面设计方法

原创 2004年07月29日 13:18:00

一种全新的软件界面设计方法

撰文:Aweay

你可转载,拷贝,但必须加入作者署名Aweay,如果用于商业目的,必须经过作者同意。

下载实例代码

关键字:COM MySpy IE SetUIHanlder IcustomDoc IDocHostUIHandler GetExternal

前言

作者在解决各种问题的时候喜欢首先使用C++ Builder来尝试,这篇文章也是这样,但这并不影响其他开发工具的使用者阅读,因为这都是微软的开发技术,选择什么工具并不重要,我们理解了他的原理可以使用任何工具实现同样的功能。

正文

使用过VC.Net的朋友可能知道,在VC.Net中全新提供了一种基于Web的界面设计方法,不过可能真正用到的人很少,至少我在国内的软件中没有看到过这样的界面设计方法。当初使用VC.net的时候就希望BCB的下个版本可以加入这样灵活的界面设计方法,但是到现在还没有等到,我想也不能一直这样等下去,于是就自己研究其中的实现方法,终于让我研究出来。这篇文章就是讨论这样方法,以及在软件设计设计中的可行性。

说了这么多,可能还有朋友不知道这样的界面到底有什么不同,有什么优点呢?如果你也有同样的好奇感的话,请你继续看下去。

Windows2000下,大家经常使用控制面板/添加、卸载软件的对话框就是基于这样的界面(Xp下暂时不清楚),我不说出来可能很少有人知道-那个对话框整个就是个网页?什么你不相信?如果是网页为什么能和本地的计算机程序交互?为什么不能选择网页里面的文字?为什么不能弹出右键菜单?如果是网页,那它的html代码在那里?

为了证明上面的说法,我们需要一些特殊的软件,这个软件就是作者写的MySpy,可以到作者的站点(http://siney.yeah.net)免费下载使用,我们可以从MySpy的界面中看到添加/删除程序的对话框是个Internet Explorer_Server,这说明它是个网页,

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

MySpyWeb页面还可以看到这个页面的地址是:res://sp3res.dll/default.hta,

近一步使用MySpy得到这个网页的代码(不能直接右键获取代码),部分如下:

<?xml:namespace prefix = st1 />

<HTML xmlns:ctls><HEAD><TITLE id=ARP>添加/删除程序</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312"><BASE href=res://appwiz.cpl/><LINK href="arp.css" type=text/css rel=stylesheet>

<STYLE>>ctls/:PLACES { behavior: url(places.htc); }ctls/:LISTBOX { behavior: url(listbox.htc); }ctls/:ACCEL { behavior: url(accel.htc); }.PlacesBar {background-color:threedshadow}.Hide {display:none}.NonClientBackground {                          background-color: buttonface;}.Header {                                       padding-bottom: 5px;vertical-align: text-top; }.GroupImage {                                   margin-right: 5px;}.GroupDesc {padding-left: 1em;padding-right: 1em;}.AppNameRow {}.AppImageTD {width: 20px; padding: '4px 2px 2px 2px';}.InfoPane {                                     padding-top:4px;                            vertical-align: top;}.PropLabel {width: 7em;padding-top: 2px;padding-bottom: 2px;padding-right: 3px;text-align: right;}.PropValue {width: 6em;text-align: right;padding-right: 7px;}.AddPropLabel {padding-top: 2px;padding-bottom: 2px;padding-right: 3px;text-align: right;}.AddPropValue {width: 13em;text-align: right;padding-right: 7px;}.ButtonDescPane {                               padding-top: 5px;                           padding-bottom: 7px;padding-right: 5px;}.ButtonPane {                                   width: 15em;                                padding: 5px;                               text-align: right;}.FakeAnchor {cursor:hand;}#idClientCatName {font-weight: bold;padding-bottom: 1ex;}.disabled {color: graytext;}#idTblExtendedProps.Focus {color: highlighttext;}</STYLE>

 

嗬嗬,是不是很神奇呢,这只是一个应用的例子,其实还有很多软件的界面使用了上面的方法来创建界面,比如Norton AntiVirsu,MS Visual Studio.netC# Builder等。其实深入仔细思考的话,这样的界面最困难的是如何和本地代码交互,为什么在网页里点一个按钮能执行自己的代码呢?有过COM编程经验的人,可能会想到用COM编写一个外部对象,在网页中使用脚本创建这个对象,然后调用对象的方法似乎可以完成这样的功能?但是这里有很多不好的地方:

1.         需要注册COM的本地运行安全,否则IE会有安全警告,这肯定是最终用户不愿意看到的;

2.         用户可以轻松从html代码里获得COM对象的使用方法(就像上面用MySpy获得代码一样),这样他们可以轻松使用你的COM对象完成他们自己的界面,这样不够隐蔽,不安全。

也许还有更多不好的地方,但暂时作者没有想到,因为微软及其他软件公司都不是这样做的,他们也许知道更多。下面我们就来讨论一种既安全又隐蔽的实现方法。

IE4开始,微软提供了一个ICustomDoc接口,ICustomDocSetUIHandler允许用户设置一个基于IDocHostUIHandler的接口来接管界面处理器,在IDocHostUIHandler提供了很多的虚拟方法,需要程序员来重载他们实现不同的定制功能,这里有一篇文章详细介绍了这些信息http://msdn.microsoft.com/library/default.asp?url=/workshop/browser/hosting/wbcustomization.asp在这里我们需要重载GetExternal方法来扩展IE DOM,如果我们成功的扩展了DOM,那么我们就这可以这样编写html代码来实现与本地程序交互,例如:

function MyFunc()

{

??? external.HelloWorld(); //HelloWorld是我们扩展的方法

}

<html>

<head>

<SCRIPT language="JScript">

function MyFunc()

{

    external.HelloWorld(); //HelloWorld是我们扩展的方法

}

</SCRIPT>

</head>

<body>

<input type="Button" value="Show hello world" onClick="MyFunc();" />

</body>

</html>

HelloWorld就是我们扩展的一个方法,当点击按钮的时候external对象会调用HelloWorld方法调用本地代码,对于external对象则会调用上面提到的GetExternal方法来查询是否提供了扩展,下面是如何实现GetExternal方法来实现扩展external对象,代码如下:

class MyDocHandler :public IDocHostUIHandler

{

  long refcount;

public:

  MyDocHandler() :refcount(1){ }

  virtual HRESULT STDMETHODCALLTYPE QueryInterface(REFIID classid, void** intf) {

    if (classid == IID_IUnknown)

    {

      *intf = (IUnknown*)this;

      AddRef();

    }

    else if (classid == IID_IDocHostUIHandler)

    {

      *intf = (IDocHostUIHandler*)this;

      AddRef();

    }

    else if (classid == IID_IDispatch)

    {

      *intf = (IDispatch*)this;

      AddRef();

    }

    else

      return E_NOINTERFACE;

    return S_OK;

  }

  virtual ULONG STDMETHODCALLTYPE AddRef() {

    InterlockedIncrement(&refcount);

    return refcount;

  }

  virtual ULONG STDMETHODCALLTYPE Release() {

    InterlockedDecrement(&refcount);

    if (refcount == 0)

      delete this;

    return refcount;

  }

  //返回S_OK,屏蔽掉右键菜单

  virtual HRESULT STDMETHODCALLTYPE ShowContextMenu(

    /* [in] */ DWORD dwID,

    /* [in] */ POINT __RPC_FAR *ppt,

    /* [in] */ IUnknown __RPC_FAR *pcmdtReserved,

    /* [in] */ IDispatch __RPC_FAR *pdispReserved) {

        return S_OK;

    }

  virtual HRESULT STDMETHODCALLTYPE GetHostInfo(

    /* [out][in] */ DOCHOSTUIINFO __RPC_FAR *pInfo) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE ShowUI(

    /* [in] */ DWORD dwID,

    /* [in] */ IOleInPlaceActiveObject __RPC_FAR *pActiveObject,

    /* [in] */ IOleCommandTarget __RPC_FAR *pCommandTarget,

    /* [in] */ IOleInPlaceFrame __RPC_FAR *pFrame,

    /* [in] */ IOleInPlaceUIWindow __RPC_FAR *pDoc) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE HideUI( void) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE UpdateUI( void) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE EnableModeless(

    /* [in] */ BOOL fEnable) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE OnDocWindowActivate(

    /* [in] */ BOOL fActivate) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE OnFrameWindowActivate(

    /* [in] */ BOOL fActivate) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE ResizeBorder(

    /* [in] */ LPCRECT prcBorder,

    /* [in] */ IOleInPlaceUIWindow __RPC_FAR *pUIWindow,

    /* [in] */ BOOL fRameWindow) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE TranslateAccelerator(

    /* [in] */ LPMSG lpMsg,

    /* [in] */ const GUID __RPC_FAR *pguidCmdGroup,

    /* [in] */ DWORD nCmdID) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE GetOptionKeyPath(

    /* [out] */ LPOLESTR __RPC_FAR *pchKey,

    /* [in] */ DWORD dw) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE GetDropTarget(

    /* [in] */ IDropTarget __RPC_FAR *pDropTarget,

    /* [out] */ IDropTarget __RPC_FAR *__RPC_FAR *ppDropTarget) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE GetExternal(

    /* [out] */ IDispatch __RPC_FAR *__RPC_FAR *ppDispatch) {

      *ppDispatch = new MyCommandHandler();

      return S_OK;

    }

  virtual HRESULT STDMETHODCALLTYPE TranslateUrl(

    /* [in] */ DWORD dwTranslate,

    /* [in] */ OLECHAR __RPC_FAR *pchURLIn,

    /* [out] */ OLECHAR __RPC_FAR *__RPC_FAR *ppchURLOut) {

        return E_NOTIMPL;

    }

  virtual HRESULT STDMETHODCALLTYPE FilterDataObject(

    /* [in] */ IDataObject __RPC_FAR *pDO,

    /* [out] */ IDataObject __RPC_FAR *__RPC_FAR *ppDORet) {

        return E_NOTIMPL;

    }

};

上面重载了ShowContextMenu方法屏蔽掉右键菜单,使用户不能得到网页代码,关于GetExternal是这样实现的:

  virtual HRESULT STDMETHODCALLTYPE GetExternal(

    /* [out] */ IDispatch __RPC_FAR *__RPC_FAR *ppDispatch) {

      *ppDispatch = new MyCommandHandler();

      return S_OK;

    }

可以看到只是简单返回了MyCommandHandler对象,MyCommandHandler必须继承自IDispatch接口来实现支持自动化的调用方式,它是这样实现的:

class MyCommandHandler : public IDispatch

{

  long refcount;

public:

  MyCommandHandler() :refcount(1){ }

  virtual HRESULT STDMETHODCALLTYPE GetTypeInfoCount(

            /* [out] */ UINT *pctinfo){

    return S_OK;

  }

  virtual HRESULT STDMETHODCALLTYPE GetTypeInfo(

      /* [in] */ UINT iTInfo,

      /* [in] */ LCID lcid,

      /* [out] */ ITypeInfo **ppTInfo){

      return S_OK;

  }

        virtual HRESULT STDMETHODCALLTYPE GetIDsOfNames(

            /* [in] */ REFIID riid,

            /* [size_is][in] */ LPOLESTR *rgszNames,

            /* [in] */ UINT cNames,

            /* [in] */ LCID lcid,

            /* [size_is][out] */ DISPID *rgDispId){

            *rgDispId=1;

            return S_OK;

        }

        virtual /* [local] */ HRESULT STDMETHODCALLTYPE Invoke(

            /* [in] */ DISPID dispIdMember,

            /* [in] */ REFIID riid,

            /* [in] */ LCID lcid,

            /* [in] */ WORD wFlags,

            /* [out][in] */ DISPPARAMS *pDispParams,

            /* [out] */ VARIANT *pVarResult,

            /* [out] */ EXCEPINFO *pExcepInfo,

            /* [out] */ UINT *puArgErr){

            if(dispIdMember==1)

            {

              MessageBox(0,"Hello World","Hello",0); //place your code here

              frmweb->Edit1->Text="Hello World(这也可以?)";

            }

            return S_OK;

        }

  virtual HRESULT STDMETHODCALLTYPE QueryInterface(REFIID classid, void** intf) {

    if (classid == IID_IDispatch)

    {

      *intf = (IDispatch*)this;

      AddRef();

    }

    else

      return E_NOINTERFACE;

    return S_OK;

  }

  virtual ULONG STDMETHODCALLTYPE AddRef() {

    InterlockedIncrement(&refcount);

    return refcount;

  }

  virtual ULONG STDMETHODCALLTYPE Release() {

    InterlockedDecrement(&refcount);

    if (refcount == 0)

      delete this;

    return refcount;

  }

};

如果大家了解一些COM知识,我们知道这里关键的是GetIDsOfNamesInvoke方法的实现,因为自动化对象只能通过这样的方式来调用,而不能使用函数指针直接调用虚拟方法,GetIDsOfNames查询指定的函数名的调用ID,就是说如果有一个方法是“HelloWorld”,那么它会先调用GetIDsOfNames方法来查询这个方法是否支持,如果支持则给出该方法的调用ID(通过修改rgDispId[out]参数),如果不支持则返回E_NOTIMPL,他的实现简单如下:

        virtual HRESULT STDMETHODCALLTYPE GetIDsOfNames(

            /* [in] */ REFIID riid,

            /* [size_is][in] */ LPOLESTR *rgszNames,

            /* [in] */ UINT cNames,

            /* [in] */ LCID lcid,

            /* [size_is][out] */ DISPID *rgDispId){

            *rgDispId=1;

            return S_OK;

        }

这里我们假定了只有一个扩展函数HelloWorld,如果有多个,我们需要比较rgszNames参数的函数名返回不同的调用ID,有了调用ID,实现Invoke方法就很简单了:

virtual HRESULT STDMETHODCALLTYPE Invoke(

            /* [in] */ DISPID dispIdMember,

            /* [in] */ REFIID riid,

            /* [in] */ LCID lcid,

            /* [in] */ WORD wFlags,

            /* [out][in] */ DISPPARAMS *pDispParams,

            /* [out] */ VARIANT *pVarResult,

            /* [out] */ EXCEPINFO *pExcepInfo,

            /* [out] */ UINT *puArgErr){

            if(dispIdMember==1)

            {

              MessageBox(0,"Hello World","Hello",0); //place your code here

              frmweb->Edit1->Text="Hello World(这也可以?)";

            }

            return S_OK;

        }

根据dispIdMember的不同实现不同的代码,如果方法是有参数的可以在pDispParams中取得,如果有什么不明白可以参考MSDN和一些COM的书籍,这里就不详细解释了。

最后我们要做的就是使我们的浏览器知道我们扩展了external,代码如下:

  dochandler = new MyDocHandler;

  webBrowser->Navigate(WideString(L"E://Projects//extWeb//ext.htm"));

  while(webBrowser->Busy)

      Application->ProcessMessages();

  ICustomDoc *custdoc;

  webBrowser->Document->QueryInterface(&custdoc); //取得IcustomDoc接口

  if (custdoc)

  {

    custdoc->SetUIHandler(dochandler); //设置我们自己的界面处理器

    custdoc->Release();

  }

注意上面的粗体“我们的浏览器”,因为这样的扩展仅针对与自己程序里使用WebBrowser控件,不影响IE本身的扩展,也就是说那个ext.htm文件只能在我们的程序中有效,就算其他用户得到了这段htm代码也不能正常运行的,如果你想测试,你得到的是:

因为他们并不知道如何扩展external对象,这点就解决了刚才我们说的使用COM的问题。

说句实话设计这样界面还是有一定难度的,那么它在实际开发中到底有什么好处呢?我想至少有以下几点:

1.       界面设计和程序逻辑设计分离,美工可以和程序员一起工作,界面设计再也不是没有审美细胞程序员的问题;

2.       轻松实现Skin功能,界面的改变不需要重新编译代码,只需要换一个不同htm代码文件就可以;

3.       再也无法使用Spy工具获得窗体Handler做各种Hook,使你的程序运行的更安全;

4.       充分使用IE现有技术,搭建功能更强大的软件;

5.       使你的软件看起来更酷,更专业。

怎么样?心动了吗?赶快改善你的界面吧。如果你有更多想法,可以通过 siney@yeah.net 取得联系。

Qt基础——让使用Designer创建的UI也能自动适应窗口大小

我们知道,通过Qt的各种Layout可以实现控件的自动布局。 但是在使用Qt Designer创建的UI时,发现UI始终是设计时的样子,无法随着容器的放大缩小自适应地变化。 通过之前对ui...
  • imxiangzi
  • imxiangzi
  • 2015年12月26日 10:33
  • 3131

web网页 页面布局的几种方式

网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动...
  • lyyo_cd
  • lyyo_cd
  • 2017年06月16日 12:19
  • 2801

一种改善软件用户界面友好性操作的方法

申请号:CN 201510022207 申请日期:2015年1月16日 申请人:浪潮电子信息产业股份有限公司【摘要】 本发明公开一种改善软件用户界面友好性操作的方法,属于数据优化领域,具体步...
  • sentimentalBunny
  • sentimentalBunny
  • 2016年04月20日 14:21
  • 2301

全新的移动界面设计素材

Pintrest Login App Screen PSD 免费下载 Profile Settings for iPhone 5 Retina Ready 免费下载 iPhon...
  • ejinxian
  • ejinxian
  • 2014年07月04日 06:29
  • 755

2017年你的用户界面设计该换一种颜色搭配了

2017年的年度色彩已经发布,设计师应该如何运用这一新的流行配色呢?
  • pbids
  • pbids
  • 2017年01月05日 11:25
  • 256

一种全新的深亚微米IC设计方法

一种全新的深亚微米IC设计方法   类别:电子综合   阅读:910                            ...
  • autumn20080101
  • autumn20080101
  • 2012年10月18日 14:02
  • 596

vc界面的全新设计方法

  • 2009年06月11日 02:20
  • 217KB
  • 下载

软件工程之用户界面设计

在人和机器的互动过程中,有一架美丽的彩虹桥,就是我们所说的界面,软件界面的美观与否,直接影响着用户的心情。让软件更加生动,有自己的个性,自成一家,独成一派,有着自己鲜明的风格,正如微软和苹果一样。 功...
  • u010850027
  • u010850027
  • 2014年01月01日 20:23
  • 2469

机房收费系统--界面设计,人与软件之间的问题

作为一名程序员,设计出的软件是否好,不仅仅是说代码设计的多么优秀,算法有多么严密!是好是坏更多的还是用户说了算!对于用户来说,一款好的软件意味着“实用,易用,美观”       听说软件行业很少发生那...
  • chenjinge7
  • chenjinge7
  • 2012年12月22日 21:36
  • 760

(软工视频总结)之软件维护和用户界面设计

软件维护是软件开发中的最后阶段,也是最长的阶段,不能小觑呀!软件维护所花费的人力、物力和财力在软件开发周期中占很大部分。        软件维护说白了就是一个在软件投入使用后,为了满足用户的新需求或...
  • u013031565
  • u013031565
  • 2014年12月03日 09:05
  • 1037
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一种全新的软件界面设计方法
举报原因:
原因补充:

(最多只允许输入30个字)