OCX控制元件開發及WEB Javascript如何使用OCX控制元件
一、OCX控制元件開發
1、使用IDE版本: VS2010
2、.基於MFC技術 開發OCX控制元件。
3、.基本OCX開發過程
3.1、開啟VS 2010 新建專案,選擇MFC模板,“MFC ActiveX控制元件” “ Visual C++ 專案”,輸入名字後,一路預設就可以了。
3.2、下面對怎樣加入ocx事件與方法說明一下,選擇“類似圖” ,如圖紅框所示:
選擇某個紅框的內容右擊,選擇新增方法。 這時出現旁邊這個對話,提示輸入方法名稱。
注:第一個紅框是方法 作用:是外面可以呼叫的方法。
第二個紅框是事件 作用:OCX控制元件將資訊傳送到外面。
4.ocx控制元件引入對話方塊
4.1 在資源檢視上 新增一個對話方塊的資源或者直接選擇”插入Dialog“項。 然後在對話方塊上右擊選擇”新增類“項,輸入你要的類名。
4.2、然後選擇屬性,將visible值 設定成true、將Border 值設定成 None、將Style 值設定成 Child、將System Modal 值設定成True。
4.3、然後再選擇類檢視,在有個類名”Ctrl“字樣的類上右擊選擇新增變數,該變數的型別是剛剛加入的類。
4.4、還是在類似圖介面,選擇同上的類,右擊開啟類嚮導,選擇訊息視窗,新增WM_CREAT訊息事件,如圖所示:
新增好後,在該函式中加入如下程式碼:
將該變數m_dlgTest換成 你剛剛命名的對話方塊類變數,就可以。m_dlgTest.Create(IDD_DIALOG1,this);
4.5、修改4.4中”Ctrl“檔案中OnDraw函式,將原來畫橢圓的程式碼刪除,加上如下程式碼:
//pdc->FillRect(rcBounds, CBrush::FromHandle((HBRUSH)GetStockObject(WHITE_BRUSH))); //pdc->Ellipse(rcBounds); m_dlgTest.MoveWindow(rcBounds, TRUE); CBrush brBackGnd(TranslateColor(AmbientBackColor())); pdc->FillRect(rcBounds, &brBackGnd);
上面註釋的 是要刪除的。添加註釋下面的程式碼。同上處理,將變數更換你的類變數。
5、ocx中再引入OCX控制元件。
5.1 、在你要加入OCX控制元件的資源上右擊 選擇”插入 ActiveX 控制元件“項,然後選擇你所要加入的OCX控制元件。
5.2、如果不讓這個ocx顯示,請選擇屬性將visible值 設定成false。預設是true。
5.3、在資源的ocx控制元件上右擊選擇新增變數,輸入變數名。
5.4、然後在解決方案資源管理介面上選擇有”APP“字樣類的檔案,在其InitInstance()函式中的if(bInit)處理里加入如下程式碼:
if (bInit)
{
// TODO: 在此新增您自己的模組初始化程式碼。
AfxEnableControlContainer();
SetDialogBkColor(RGB(255,255,255));
}
二、Web Javascript使用OCX控制元件
1、首先建立一個html檔案,中間要<object></object>標籤。如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OCX測試</title>
</head>
<body>
<object ID="myocx" classid="clsid:AA77E166-CE88-4C96-959D-609EF141539A" WIDTH=200 HEIGHT=200></object>
</body>
</html>
注:<object>標籤中 classid的來源是ocx。 可以在源ocx工程中有個副檔名叫”.idl“文中找到這個classID,(一般是最後一個)
2、Javascript使用ocx的方法。var myocxTest = document.getElementById("myocx"); myocxTest 就可以使用OCX控制元件的方法了。
3、Javascript使用OCX事件,即OCX返回資訊到網頁上。方法:
<script event="ocx控制元件的事件" for="myocx">
你處理資訊的程式碼
</script>
4、在第3條基礎上,即ocx返回資訊到介面上,在這個處理中還需使用該ocx的方法。如果在上述3的程式碼中直接加上ocx的事件,會將瀏覽器卡死,無法正常使用。但是如果將ocx的事件用定時器延時一段時間後就可以正常。原因:可能是因為ocx將資訊返出來後還來不及銷燬,網頁又開始使用ocx的方法。所以使網頁執行緒堵塞造成卡死現象。【這是我看到現象後總結的,不一定是真理,如果有博友知道其原理請告知,分享你的技術,服務萬千前端開發者】
<script event="ocx控制元件的事件" for="myocx"> <pre name="code" class="javascript"><span style="white-space:pre"> </span>setTimeout(function(){
<span style="white-space:pre"> </span>myocx.getName();
},1500);
</script>