一種全新的軟件界面設計方法

撰文: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" />

在MySpy的Web頁面還可以看到這個頁面的地址是：res://sp3res.dll/default.hta,

近一步使用MySpy得到這個網頁的代碼（不能直接右鍵獲取代碼），部分如下：

<?xml:namespace prefix = st1 />

<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.net，C# Builder等。其實深入仔細思考的話，這樣的界面最困難的是如何和本地代碼交互，爲什麼在網頁裏點一個按鈕能執行自己的代碼呢？有過COM編程經驗的人，可能會想到用COM編寫一個外部對象，在網頁中使用腳本創建這個對象，然後調用對象的方法似乎可以完成這樣的功能？但是這裏有很多不好的地方：

1. 需要註冊COM的本地運行安全，否則IE會有安全警告，這肯定是最終用戶不願意看到的；

2. 用戶可以輕鬆從html代碼裏獲得COM對象的使用方法（就像上面用MySpy獲得代碼一樣），這樣他們可以輕鬆使用你的COM對象完成他們自己的界面，這樣不夠隱蔽，不安全。

也許還有更多不好的地方，但暫時作者沒有想到，因爲微軟及其他軟件公司都不是這樣做的，他們也許知道更多。下面我們就來討論一種既安全又隱蔽的實現方法。

從IE4開始，微軟提供了一個ICustomDoc接口，ICustomDoc的SetUIHandler允許用戶設置一個基於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>

function MyFunc()

{

external.HelloWorld(); //HelloWorld是我們擴展的方法

}

</SCRIPT>

</head>

<body>

</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知識，我們知道這裏關鍵的是GetIDsOfNames和Invoke方法的實現，因爲自動化對象只能通過這樣的方式來調用，而不能使用函數指針直接調用虛擬方法，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. 使你的軟件看起來更酷，更專業。

怎麼樣？心動了嗎？趕快改善你的界面吧。如果你有更多想法，可以通過 [email protected] 取得聯繫。

一種全新的軟件界面設計方法

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

深入C++ Builder之編寫自己的元件－深入分析VCL繼承、消息機制（2）

深入C++ Builder之編寫自己的元件－深入分析VCL繼承、消息機制（3）

讓TList類型安全

在C++ Builder6中使用XML

一種全新的軟件界面設計方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結