一.前言
本文将用VS2013, ATL向导制作一个简单的OCX控件, 并用JS调用控件接口, 该控件包含两个接口:
AddInt(LONG a, LONG b, LONG* ret):整形相加并传出;
AddStr(BSTR str1, BSTR str2, BSTR* ret):字符串相加并传出.
二.OCX制作
1.新建项目
1.1 以管理员身份打开VS2013->新建项目->ATL项目, 输入项目名称(此处为缺省值ATLProject2)->下一步
1.2 勾选支持MFC并单击完成
2.添加方法类:
2.1 在资源管理器中, 右键项目名称-> 添加->类
2.2 输入类名, progID并点击下一步;
注:progID 为该类的对象ID, 后面JS调用中的objectID即为此ID, 可以在文件 [类名].rgs 文件中找到对应ProgID.以及CLSID
2.3 选择支持连接点->下一步
2.4 将IObjectSafty移动到右侧支持列表->下一步;
注: 选择该项可以去除JS在OCX调用过程中的网页安全提示.
2.5 剩下其它下选择默认即可->最后单击完成.
3.添加方法AddInt()和AddStr():
3.1 在类视图中, 选择[I+类名] (本例为:IAddFunc)->右键添加->添加方法:
3.2 首先输入方法名”AddInt”, 再分别添加两个输入参数(arg1,arg2)和一个输出参数(ret), 如图:
注:
(1)输入参数特性选择:in;
(2)函数返回值特性选择:retval(选择此项后不能再添加参数)
3.3 添加完成后, 点击完成按钮, 完成AddInt([in]Long, [in]Long, [out, retval]Long*)方法的添加:
3.4同样方式, 添加方法AddStr([in]Bstr, [in]Bstr, [out, retval]Bstr*);
注只有在参数类型为XXX*时(如Long*, Bstr*), 才能将特性选择为retval.
4.方法实现:
4.1 在类视图中选择IAddFunc, 下方出现两个新增方法, 双击方法进入到代码页面:
4.2 为两个方法分别添加代码:
// CAddFunc
STDMETHODIMP CAddFunc::AddInt(LONG arg1, LONG arg2, LONG* ret)
{
AFX_MANAGE_STATE(AfxGetStaticModuleState());
// TODO: 在此添加实现代码
*ret = arg1 + arg2;
return S_OK;
}
STDMETHODIMP CAddFunc::AddStr(BSTR str1, BSTR str2, BSTR* ret)
{
AFX_MANAGE_STATE(AfxGetStaticModuleState());
// TODO: 在此添加实现代码
CString cstr1(str1);
CString cstr2(str2);
CString cstrRet = cstr1 + cstr2;
*ret = cstrRet.AllocSysString();
return S_OK;
}
5.点击->生成->生成解决方案.此时会生成对应的.ocx或.dll文件.VS会自动完成注册.接下来开始调用测试.
三.JS调用OCX控件接口
按照上述步骤生成控件后, VS已经自动注册了, 我们接下来可以直接调用.
1.在工程目录下, 会在控件注册的同时, 生成一个以方法类命名的htm文件(此例中的文件名为:AddFunc.htm), 文本工具打开:
可以看到在OBJECT标签中, 已经为我们填好了ID(对象id), 以及CLASSID(控件唯一标识), 该值也可以在AddFunc.rgs文件中查到.
2.接下来, 我们只需分别在HEAD和BODY标签中分别加入调用方法和页面控件的JS代码, 如图:
注:请保证OBJECT标签中的ID和CLASSID与您工程中AddFunc.rgs中的一致.
源码如下:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<TITLE>对象 AddFunc 的 ATL 测试页</TITLE>
<script language="javascript" type="text/javascript">
function Button1_onclick() {
var a = form1.add1.value;
var b = form1.add2.value;
try{
var result = AddFunc.AddInt(a, b);
alert(result);
}
catch(e){
alert(e.name + ": " + e.message)
}
}
function Button2_onclick() {
var a = form1.str1.value;
var b = form1.str2.value;
try{
var result = AddFunc.AddStr(a, b);
alert(result);
}
catch(e){
alert(e.name + ": " + e.message)
}
}
</script>
</HEAD>
<BODY>
<OBJECT ID="AddFunc" CLASSID="CLSID:3010B5D7-BE50-49F7-980F-D7A9C05861C4"></OBJECT>
<form id="form1">
add1<input name="add1" id="add1" type="text" value="1" size=20><br/>
add2<input name="add2" id="add2" type="text" value="2" size=20><br/>
<input id="Button1" type="button" value="addInt" onclick="return Button1_onclick()" /> <br/><br/>
str1<input name="str1" id="str1" type="text" value="Hello" size=20><br/>
str2<input name="str2" id="str2" type="text" value=" World!" size=20><br/>
<input id="Button2" type="button" value="addStr" onclick="return Button2_onclick()" />
</form>
</BODY>
</HTML>
3.最后一步用IE浏览器打开.htm文件, 我在文本框中写了默认值, 1,2来测试AddInt; Hello, World!来测试AddStr, 您也可以自己修改默认值, 并点击对应按钮测试:
关于文件扩展名, .ocx和.dll文件本质 一样只是后缀不同, 后缀名可以在:工程->右键属性->常规->目标扩展名:当中修改.
点击确定并重新生成即可.
- 好了, 至此OCX制作及调用就完成了!
关于OCX注册及打包可参照以下链接中的最后一步:
MFC创建OCX入门-详细完整流程(JS调用测试, 去除安全提示, exe打包