使用delphi开发OCX插件
在c/s开发主导的时代，delphi无疑是windows开发的佼佼者，号称 vb killer，随着 java 和 c#的崛起，互联网开发时代来到，delphi也就失去了往日的光环，虽然现在绝大部分项目工作都是java web项目，但众所周知，web应用，要跟硬件打交道，特别是在浏览器中，单纯的jsp或者html、js，都无法实现，由于企业应用开发少不了要与硬件对接，如考勤机（人脸识别或指纹机）、门禁机、pda（盘点机）等等，要实现在浏览器中对接硬件，其中一个可行方案就是开发ie浏览器下的ocx插件，ocx的本质就是一个c/s程序，可以访问浏览器所在电脑的资源，最常见的就是dll，通过dll操作与电脑相连的硬件。因为delphi太久没用，而ocx插件的开发也不是经常需要，导致每次开发都要翻看 以前的项目或资料重温技术实现，最近又有一个项目，即使用便携式指纹机实现硬件控制集团查看薪金权限，薪资管理员除了有系统功能操作权限外，还需要到人事部登记指纹，领取指纹机，在操作工资相关功能前，进行指纹认证，认证通过才能正常操作系统，趁着这次项目，把ocx开发过程记录下来，以备以后的不时之需，也供其他同行参考。
闲话少说，直入正题，本文提及的项目，使用delphi 7，下面从新建一个ocx项目开始，一步一步指引如何用delph 7开发一个可以在 ie 上运行的ocx插件；
一、插件activex工程
1、启动delphi，点击菜单 file->new->other：
2、选择【activex】标签页，选中active form图标：
注：本案例中的ocx插件有用户交互界面，所以使用 activex form。
3、为activex项目和窗体对象命名：
由上图可见，只需修改activex窗体名称、窗体实现代码文件名、项目名即可，其他选项默认。
点击【ok】按钮完成项目创建，完成创建后的界面如下图：
4、保存项目
点击菜单 file->save all，在弹出的保存框，选择一个保存的目录，然后一直点击【保存】即可：
至此已完成一个activex项目的创建，可以点击菜单 view->units浏览delphi创建的相关代码文件：
上面三个文件是delphi自动产生的，其概要作用是：
fingerenrollformimpl：ocx的实现类，编写代码基本都在这个文件中进行；
officeocx：项目组织文件，一般不需要手工修改，由delphi自动维护；
officeocx_tlb：ocx类库代码文件，一般也不需要手工修改；
二、设计ocx接口方法
应用程序（本例即浏览器中的js代码）通过ocx提供的接口与ocx进行交互，delphi会自动为ocx插件创建接口，我们只需跟进实际业务需要，为ocx接口增加相应的方法即可，如本案例需要添加5个接口方法：
initdevice：链接指纹机；
setuser：设置当前登记指纹的用户资料；
getresult：获取指纹登记结果，0 失败，1成功；
getfinger1：获取已登记的第一枚指纹数据；（每个用户登记两枚指纹，此款指纹机可以将采集的指纹信息转换成字符串，以便存储在数据库中）
getfinger2：获取已登记的第二枚指纹数据；
下面介绍如何添加接口；
1、点击菜单 view->type libraly：
注：type libraly 是delphi中一个很重要的工具，尤其是开发类库这一类的项目，必不可少。
2、在弹出的对话框中，右键左边目录树中的，然后选择 new->method：
3、为新的方法命名为：initdevice，然后为方法添加参数：
4、完成以上操作后，点击菜单栏的刷新图标：
刷新后可查看fingerenrollformimpl代码中是否已包含此方法：
注：如找不到fingerenrollformimpl文件，可以点击菜单 view->units进行选择并打开；
5、重复2-4步骤添加其他方法，下面只列出setuser方法截图说明，其他方法的创建类似，记得每个方法改名和添加完参数后，要点击刷新图标：
5个方法创建后显示如下：
三、为接口方法添加代码
这一部分是常规的delphi开发，跟ocx插件开发技术本身并没有直接关系，所以如果使用delphi开发ocx插件，需要有一定的delphi开发基础，本案例并不会细谈如何使用delphi进行软件开发，接口方法都是根据实际业务需要进行代码开的，这里只展示ocx窗体界面最终的效果：
窗体上有一个特殊的控件：，这个控件在安装了厂家提供的指纹机驱动程序后，可以导入到delphi中进行使用，所以非常方便，下面顺带介绍一下如何导入操作系统中已安装的控件：
点击菜单 component->import activex control...：
在弹出的对话框中：
点击【install】后，可以在【activex】中看到这个控件：
已安装的第三方控件，可以像其他常规控件一下，拖拽到窗体上进行开发，非常方便！
四、编译ocx插件
编译之后，在项目代码保存路径下可以看到已生成ocx插件：
把这个ocx文件拷贝到web项目下，就可以发布了。
五、发布并访问ocx插件：
有了以上的ocx文件，就可以将它拷贝到web项目下，在页面中引入并使用它；
本案例为java web项目，服务器环境是tomcat 6和jdk 1.6；
1、将 ftnfingerenrollform.ocx 文件拷贝到web项目某目录下，如：
注：webroot 为web 项目代码根目录；
2、新建一个jsp文件 ocxtest.jsp：
注：jsp文件的存放目录没有特别要求，只要tomcat启动后，能通过ie浏览器访问到即可；
jsp文件代码如下：
<%@page language="java" contenttype="text/html;charset=utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme() + "://"
+ request.getservername() + ":" + request.getserverport()
+ path;
%>
<!doctype html>
<html>
<head>
<title>ocx插件测试</title>
<script type="text/javascript">
</script>
</head>
<body>
<object id="fingerenroll" classid="clsid:061d3a76-b267-465a-9529-f438aadd90b9"
codebase="<%=basepath%>/frame/activex/ftnfingerenrollform.ocx#version=1,0,0,0"
width="606" height="271"
>
</object>
</body>
</html>
object标签的 classid 值来自delphi项目的 ftnfingerenrollform_tlb.pas：
codebase属性值为 ocx 文件在 web 项目中的 url，#version=1,0,0,0 为 ocx 控件的版本号，可以在delphi中进行查看：
点击菜单 project->options...：
3、启动tomcat，在ie中输入jsp文件的url：
可见ocx插件被成功加载了；
在ie中加载activex插件，需要做一系列的配置，如果发布到外网使用，可能还需要证书和签名，由于平常的项目都是企业内部的应用系统，所以一般将ie安全级别降低，并将服务器ip设置为信任站点，具体的配置可以百度一下，网上有很多相关资料。
六、调用ocx接口方法
接下来演示如何在js中调用ocx接口方法，这点很重要，如果js能调用ocx接口方法，就意味着可以在浏览器中操作电脑上的所有资源，这在纯浏览器环境中是做不到的。
1、修改ocx代码
在修改ocx代码之前，需要修改ocx项目的一些属性，由于html页面装载ocx插件时需要指定文件版本号，浏览器第一次加载之后，就算ocx代码被修改了，但是版本号没有改，浏览器是不会加载新的ocx插件的。
在delphi中打开ocx项目，点击菜单 project->options...：
参照以上红框的选项进行设置，点击【ok】按钮，以后修改代码后，点击 project->build ftnfingerenrollform时，delphi会自动为版本号加1，可以右键生成的 ftnfingerenrollform.ocx文件进行查看：
在delphi中修改 getresult 方法，简单的返回一个数值10，返回到jsp的js脚本调用中，如果js能正确显示该数值，证明接口调用成功。
下面是 getresult 方法代码：
function tfingerenrollform.getresult: sysint;
begin
result:= 10;
end;
2、重新构建ocx项目，点击菜单 project->build ftnfingerenrollform，将新生成的 ftnfingerenrollform.ocx 重新拷到web项目发布目录下，覆盖原来的文件；
3、修改jsp文件，增加一个按钮，点击调用 getresult 方法，将该方法返回的值 alert 出来：
<%@page language="java" contenttype="text/html;charset=utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme() + "://"
+ request.getservername() + ":" + request.getserverport()
+ path;
%>
<!doctype html>
<html>
<head>
<title>ocx插件测试</title>
<script type="text/javascript">
function testgetresult() {
var ocx = document.getelementbyid("fingerenroll");
if (ocx) {
var i = ocx.getresult();
alert('getresult返回的值为：' + i);
} else {
alert("ocx控件装载失败！");
}
}
</script>
</head>
<body>
<object id="fingerenroll" classid="clsid:061d3a76-b267-465a-9529-f438aadd90b9"
codebase="<%=basepath%>/frame/activex/ftnfingerenrollform.ocx#version=1,0,0,4"
width="606" height="271"
></object>
<br/>
<input type="button" value="test getresult" onclick="testgetresult();"/>
</body>
</html>
注意 version=1,0,0,4要跟ocx文件的版本号一致；
4、在ie浏览器中验证结果：
七、ocx控件最终效果测试
jsp代码：
<%@page language="java" contenttype="text/html;charset=utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme() + "://"
+ request.getservername() + ":" + request.getserverport()
+ path;
%>
<!doctype html>
<html>
<head>
<title>ocx插件测试</title>
<script type="text/javascript">
function getocx() {
return document.getelementbyid("fingerenroll");
}
function initdevice() {
var ocx = getocx();
var i = ocx.initdevice();
}
function setuser() {
var ocx = getocx();
ocx.setuser(document.getelementbyid("usercode").value, document.getelementbyid("username").value,
document.getelementbyid("deptname").value, document.getelementbyid("compname").value);
}
function getfinger() {
var ocx = getocx();
document.getelementbyid("finger1").value = ocx.getfinger1();
document.getelementbyid("finger2").value = ocx.getfinger2();
}
</script>
</head>
<body>
<input type="button" value="连接设备" onclick="initdevice();"/>
<br/>
<br/>
工号：<input type="text" value="tx8888" id="usercode"/>
姓名：<input type="text" value="张三" id="username"/>
部门：<input type="text" value="人事部" id="deptname"/>
公司：<input type="text" value="dmp" id="compname"/>
<input type="button" value="写入用户信息" onclick="setuser();"/>
<br/>
<br/>
<object id="fingerenroll" classid="clsid:061d3a76-b267-465a-9529-f438aadd90b9"
codebase="<%=basepath%>/frame/activex/ftnfingerenrollform.ocx#version=1,0,0,19"
width="650" height="271"
></object>
<br/>
<br/>
<br/>
<input type="button" value="读取指纹" onclick="getfinger();"/>
<br/>
<br/>
指纹1：
<br/>
<textarea rows="3" cols="100" id="finger1"></textarea>
<br/>
<br/>
指纹2：
<br/>
<textarea rows="3" cols="100" id="finger2"></textarea>
</body>
</html>
上一篇： jQuery实现雪花飘落效果
下一篇： jquery循环
推荐阅读
-
详解如何使用Android Studio开发Gradle插件
-
使用ASP.NET MVC引擎开发插件系统
-
使用ASP.NET MVC引擎开发插件系统
-
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
-
使用 webpack 各种插件提升你的开发效率
-
使用python开发vim插件及心得分享
-
Android开发的插件Code Generator与LayoutCreator的安装与使用，提升你的开发效率
-
vue插件开发之使用pdf.js实现手机端在线预览pdf文档
-
JavaScript开发中如何使用jQuery jqPlot插件绘制柱状图
-
开发中解决Access-Control-Allow-Origin跨域问题的Chrome神器插件,安装及使用