Delphi程序与Html界面的交互方法

Delphi程序与Html界面的交互方法 在用Delphi、Visual Basic等可视化快速开发工具编写Windows应用程序时，常会遇到这样几个问题： 1) 希望程序界面美观。在Delphi中，开发人员通常使用各种控件来实现界面的风格化，但缺点是造成应用程序体积较大，且在升级时常会被控件版本与Delphi版本不兼容带来的问题所困扰。 2) 希望应用程序在功能不变的情况下具有不同的界面风格。这常常通过换“皮肤“的技术来实现，但一般实现“换肤“功能的控件体积都较大，且界面反应速度比较慢，而且 “皮肤“的制作比较麻烦。 3) 程序界面的维护困难。为了使界面与代码实现相分离而获得“换肤“等灵活性，通常要用到一些设计模式的技术，这对于不熟悉设计模式的开发人员来说比较困难。 微软在 Windows xp 之后的产品，包括 Vista, Windows 7 的应用程序的结构及部署将有重大变革，其中一项就是应用程序的界面完全以XML的一个扩展集XAML语言来描述，以便达到界面的高度可定制性。其中 Silverlight 就是一个典型的应用。从中或许我们可以得到一些启示。在 Delphi 中类似的解决方案就是使用浏览器控件加载 HTML 页面。 微软的网页浏览器 Internet Explorer 的核心被设计为可以嵌入到应用程序中重用的ActiveX组件，它有极强的可编程能力和与容器交互的能力，使得开发人员能够快速地开发出功能强劲的应用程序。我们平常运行的 iexplorer.exe 其实只是一个外壳程序，真正的浏览网页、记录历史等工作是由嵌入其窗口的封装在 shdocvw.dll 中的 WebBrowser Control 来完成的。 Shdocvw.dll 的功能则是调用 mshtml.dll 来解析网页，以及在它的窗口中嵌入其它活动文档组件（如 Microsoft Office、Adobe Acrobat 等应用程序的文档都可以嵌入到浏览器窗口中查看）。而 mshtml.dll 一方面处理 HTML 解析以及作为脚本引擎、java 虚拟机、ActiveX 控件、插件的宿主，另一方面，它实现了活动文档服务器接口，允许应用程序以标准的 COM 接口来把它嵌入到程序中并通过它暴露的接口来访问其中的网页及网页元素。 通过 shdocvw.dll 提供的丰富接口，网页中的元素可以访问外壳应用程序提供的属性和方法（如 window.external.AddFavorite(location.href, document.title) 则是调用IE的 AddFavorite 方法把当前页添加到收藏夹），而通过 mshtml.dll 提供的接口，外壳应用程序则反过来可以访问网页中元素的属性、方法、行为、事件等等。解决文章开头提出的几个问题的方法就是基于 shdocvw.dll 和 mshtml.dll 实现的。一些著名软件如：Microsoft Money、Microsoft Visual Studio .NET、Macromedia Dreamweaver MX 2004 等都运用了这种技术。 针对上面的这些现状和需求，我们大概可以想到如下的方法 1) 程序的界面完全由制作网页来完成。网页在文字、图像、声音等方面具有强大的表现能力，运用所见即所得的网页制作工具可以轻松制作出图文并茂的网页。以网页作为程序的界面，其效果胜过任何界面控件。 2) “换肤“功能容易实现。只需制作不同风格的网页，即可轻松实现样式各异的程序界面。 3) 程序的功能在应用程序内部编写代码来实现，并通过一个自动化接口提供给网页中的元素调用。这就实现了程序界面和代码的分离，网页布局及风格的改变不会影响到程序的实现。 下面就让我们来看看具体的两种实现方式。 一，通过 Webbrowser 控件与特殊的 url 地址来实现。这种方法比较简单。 点击按钮后通过 js 来改变 Webbrowser 的地址栏的地址，然后在 webbrowser 的 BeforeNavigate2 事件中根据 url 来做出相应的处理以达到交互的效果。或者索性就是通过 html 的“链接锚点”来实现，就是类似 [CODE_LITECall[/CODE_LITE] 这样子。处理代码如下 procedure TMainForm.wbMainBeforeNavigate2(Sender: TObject;   const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData,   Headers: OleVariant; var Cancel: WordBool); var   urlString: TStringList; begin   urlString := Split(URL, '$');   if Pos('OpenCard', URL) > 0 then     ShellExecute(Self.Handle, 'Open', Pchar(HanWangPath),       nil, nil, SW_SHOWNORMAL);   end; end; 二，通过 Windows 提供的接口来实现交互。这种方式相对效率要高。大概需要做以下的三步工作 1　实现 GetExternal 接口方法 WebBrowser Control提供的接口使得外壳应用程序可以用自己的对象、方法和属性等来扩展IE的对象模型（DOM），以达到个性化定制的目的。在网页中访问外壳应用程序的扩展则通过文档的“external“对象来实现，如外壳程序提供了名为AddFavorite的方法，网页中就通过window.external.AddFavorite()来调用。实现这一功能的核心是IDocHostUIHandler接口的GetExternal方法： HRESULT GetExternal(IDispatch **ppDispatch); 在自定义的WebBrowser Control中实现IDocHostUIHandler接口，当网页元素通过“external“对象访问外壳扩展的属性和方法时，GetExternal方法就会被调用，在此方法的中将实现外壳程序属性和方法的自动化接口传递给ppDispatch即可。自定义的WebBrowser Control示例代码如下，在其中将GetExternal包装为OnGetExternal事件供外部程序调用。IDocHostUIHandler接口有15个方法，此处我们只关心GetExternal方法，故略去其余14个（省略号处为略去的代码）。 unit ZoCWebBrowser; interface uses   Variants,IEConst, Windows, SysUtils, Classes, SHDocVw, ActiveX, shlObj, MSHTML, comobj; type   ……   TGetExternalEvent = function(out ppDispatch: IDispatch): HRESULT of object;          //定义OnGetExternal事件类型   TZoCWebBrowser = class(TWebBrowser, IDocHostUIHandler)   private     ……     FOnGetExternal: TGetExternalEvent;   protected     ……     function GetExternal(out ppDispatch: IDispatch): HRESULT; stdcall;   published     ……     property OnGetExternal: TGetExternalEvent read FOnGetExternal write FOnGetExternal;   end;   …… implementation …… function TZoCWebBrowser.GetExternal(out ppDispatch: IDispatch): HRESULT; begin   if Assigned(FOnGetExternal) then     Result := FOnGetExternal(ppDispatch)   else     Result := S_FALSE; end; initialization   OleInitialize(nil); finalization   try     OleUninitialize;   except   end; end. 2　实现外壳程序扩展自动化接口 在Delphi的“New Items“对话框中，切换到“ActiveX“页，选择“Automation Object“，新建一个自动化对象，并在“CoClass Name“一栏中填入接口名“MyExternal“，“Instancing“选择为“Internal“，表示该对象只能在程序内部被创建，外部程序不能直接创建。点击“OK“按钮后在Type Library编辑对话框中为IMyExternal接口添加两个方法ShowAboutBox和SwitchUI，此时代码大致如下所示： unit MyExternalImpl; {$WARN SYMBOL_PLATFORM OFF} interface uses   ComObj, ActiveX, Project1_TLB, StdVcl; type   TMyExternal = class(TAutoObject, IMyExternal)   protected     procedure ShowAboutBox; safecall;     procedure SwitchUI; safecall;   end; implementation uses ComServ; procedure TMyExternal.ShowAboutBox; begin   MessageBox(MainForm.Handle, ’GetExternal Demo’, ’ZoCWebBrowser’, MB_OK or MB_ICONASTERISK); end; procedure TMyExternal.SwitchUI; begin   ShowSwitchUIForm;       //显示切换程序界面对话框 end; initialization   TAutoObjectFactory.Create(ComServer, TMyExternal,     Class_MyExternal, ciInternal, tmApartment); end. 3　从网页中调用外壳程序接口 在程序主窗口中放置一个自定义的WebBrowser Control，命名为ZoCWebBrowser，编写它的OnGetExternal事件（由网页中的window.external调用触发），代码如下： function TMainForm.ZoCWebBrowserGetExternal(   out ppDispatch: IDispatch): HRESULT; var   MyExternal: TMyExternal; begin   MyExternal:= TMyExternal.Create;         //创建实现自动化接口的对象   ppDispatch :=MyExternal;     //将对象接口传递给WebBrowser Control //这样当“external“对象被调用时，真正被调用的是我们实现的TMyExternal对象   Result :=S_OK; end; 调用方法如下： 〈BUTTON onclick=“ window.external.ShowAboutBox“〉关于〈/BUTTON〉 〈BUTTON onclick=“ window.external.SwitchUI“〉切换界面〈/BUTTON〉 4　总结 从上面的例子可以看到，我们以及其简单的方式实现了程序界面与实现的分离，这有利于程序的维护和扩展。传统方式下，界面设计和编码通常都由程序员来完成，一来造成程序员负担较重，二来难以保证界面质量。实用上述方法，程序界面可以由专业美工人员来设计，他可以在完全不知道程序如何实现的情况下设计出完整的界面，而程序员只需专注于代码的编写，并将必要的方法和属性通过一个自动化接口暴露出来。合并的时候，在网页中合适的位置放入所需的按钮或其它网页元素，并赋予简单的脚本调用即可。