摘要:針對當前課程系統建設的客觀要求,介紹了基于ActiveX的精品課程制作工具的開發,提出了課程開發系統的功能模塊設計、體系結構,并描述了軟件實現中的關鍵技術,這對讀者學習基于.NET的開發和ActiveX控件的應用有著一定的借鑒意義。
關鍵詞:精品課程;功能模塊;控件;ActiveX
中圖分類號:TP311文獻標識碼:A文章編號:1009-3044(2008)26-1738-03
The Development and Design of Curriculum System Making Tools
HUANG Shu-qin
(School of Information Engineering,Anhui University of Finance Economics, Bengbu 233041, China)
Abstract: In allusion to the objective requirement of curriculum system now, the paper introduces the development of perfect curriculum making tools based on ActiveX, presents functional module design and system structure of perfect curriculum development system, at last depicts the key techniques of software realization. It is significant to learn software development based on .NET and to apply ActiveX control for reader.
Key words: perfect curriculum; functional module; control; ActiveX
1 引言
目前的課程系統制作大都是通過制作網站完成,不僅低效,而且需要使用者進行程序的開發和網頁的制作,這對大部分非計算機人員來講要求過高,無法完成課程信息的制作。課程系統制作工具平臺的開發、相關資料實現網絡化無疑會推動建立基于網絡的遠程學習環境,逐步完善支持服務規范,為學生的個性化學習提供高質量的支持服務,同時對促進教學方法改革和現代化教學手段的運用,提高實踐教學質量,調動學生的主動性和積極性有著重要意義。
筆者以.NET為架構,Visual C#語言為基礎開發了課程系統制作工具,通過它可以快速的完成課程信息的制作。使用者只需專心收集資料,就能方便地利用制作工具發布信息,極大降低了課程信息的制作難度。
2 設計
2.1 模塊設計
按照系統的功能劃分,精品課程開發系統的設計分成四個模塊:登錄模塊、課程編輯模塊、合成文件生成模塊和網絡教學模塊。具體功能為:
登錄模塊:是授課教師進入開發系統的入口模塊,該模塊運用計算機支持的協同工作,不僅保證了人機交互友好性,同時考慮到時空異同,以及系統同構或異構時的協作關系。教師在界面里輸入用戶名和密碼,即可進入課程編輯模塊。
課程編輯模塊:該模塊是整個精品課程制作系統的核心,是精品課程編輯的核心內容。其中包括Word文檔、PPT課件的嵌入,錄像、圖片、表格內容的編輯操作等。
合成文件生成模塊:是把編輯好的內容合成html文件輸出到指定位置。
網絡教學模塊:是教師和學生的互動模塊,學生可通過網絡教學平臺提出問題,互相之間討論,教師可對學生提出的問題進行輔導答疑。
四個模塊的工作流程示意圖如圖1所示。
2.2 數據庫表的設計
考慮到系統的安全性、穩定性及開發的方便性,采用SQL Server 2000作為后臺數據庫。建立SQL Server數據庫MyDatabase,其中主要數據表jpcourse的結構設計如表1所示。
其中NodeID字段是節點編號,具有唯一性,是數據表的關鍵字。用戶可以添加新的節點,也可以刪除、修改節點。NodeText是節點標簽字段,實現TreeView樹節點的標簽顯示。ParentID是父節點編號字段,除了根節點以外,每個節點都有唯一一個父節點。點擊TreeView不同節點時,顯示對應的html頁面,為了區分html頁面,數據庫中應設置頁面編號字段PageID。要保存這些頁面文件,所以增加了頁面文件存放路徑字段FileSavePath。數據庫表里添加的內容有課程介紹、教學方法、教學計劃、教學大綱、電子教材、授課錄像、授課教案等信息。
3 實現
在精品課程制作工具的開發系統中,遇到了很多關鍵的技術問題,這里介紹Visual C#中幾個ActiveX控件和關鍵技術的實現,如TreeView、Webbrowser控件及內部編輯器中頁面保存技術。
3.1 TreeView控件的應用及代碼實現
TreeView樹形結構的數據是基于數據庫的,可以和數據庫中的其他表建立關聯、進行查詢和匯總,通過設計視圖或存儲過程,很容易查詢出想要的相關數據。采用這種方式,增加、刪除、修改節點非常方便,只要操作數據庫中的數據就可以了。要能實現TreeView控件與數據庫之間的動態交互,首先TreeView控件與數據庫建立連接。這里使用SQL Server數據訪問。建立連接的代碼如下:
string strConn=\"Server=localhost;database=MyDatabase;uid=sa;pwd=;’;
SqlConnection Conn=new SqlConnection(strConn);
Conn.Open();
SqlDataAdapter mydataadapter=new SqlDataAdapter();
mydataadapter.SelectCommand = new SqlCommand(\"select * from jpcourse \", Conn);
mydataadapter.Fill(ds,\"jpcourse\");
…
建立連接之后,數據庫中的信息導入到TreeView控件中,根據NodeID和ParentID字段值建立樹形結構,這里利用遞歸實現。為了便于后面點擊樹節點時能操作數據庫中的數據,這里保存NodeID的值到節點Tag屬性中。代碼如下:
AddTree(0,(TreeNode)1);//調用遞歸函數,完成樹形結構的生成
public void AddTree(int ParentID,TreeNode PNode)
{ …
Node.Text=dr[\"NodeText\"].ToString();//節點標簽字段傳遞到TreeView節點Text屬性
Node.Tag=dr[\"NodeID\"];//保存節點編號字段到節點Tag屬性中
treeView1.Nodes.Add(Node);//添加樹節點
AddTree(Int32.Parse(dr[\"NodeID\"].ToString()) ,Node); //再次遞歸
…}
TreeView與數據庫建立連接后,形成的樹行圖如圖2所示。
3.2 編輯頁面的保存技術
內部編輯器用TinyMCE,它是一個由JavaScript寫成的基于瀏覽器的所見即所得編輯器。在使用內部編輯器對課程內容進行編輯完畢后,要把編輯過的內容保存起來形成html文件,這里利用javascript編寫實現,代碼如下:
<html>
…
<link href=\"file:///D:/路徑/example_advanced.css\"rel=\"stylesheet\" type=\"text/ css\">
<script language=\"javascript\" type=\"text/javascript\" src=\"util.js\"></script>
<script language=\"javascript\" type=\"text/javascript\" src=\"../../jscripts/tiny_mce/tiny_mce.js\"></script>
<script language=\"javascript\" type=\"text/javascript\">
…
<input type=\"reset\" name=\"reset\" value=\"reset\" />
<input type=\"button\" name=\"save\" value=\"save\" onclick=\"saveFile();\" />
</html>
其中util.js的部分函數內容為:
function saveFile() {
var html = \"\";
…
html += '<textarea id=\"elm1\" name=\"elm1\" rows=\"15\" cols=\"80\" style=\"width: 100%\">\';
html += fixContent(tinyMCE.getContent());
html += '\';
html += '</textarea>\';
…
var file_url = \"\";
file_url +=tinyMCE.getParam(\"document_base_url\");
file_url = file_url.substring(8, file_url.length);
var fso, tf;
var ForWriting= 2;
fso = new ActiveXObject(\"Scripting.FileSystemObject\");
tf = fso.OpenTextFile(file_url, ForWriting, true);
tf.WriteLine(html);
tf.Close();
}
運行后的界面如圖3所示。
3.3 Webbrowser控件的應用及代碼實現
為了把html頁面與應用程序連接起來,即在點擊TreeView中的節點時方便的進行頁面瀏覽,這里利用了Webbrowser控件。Webbrowser控件的Navigate方法是真正實現導航的部分。Navigate方法中有5個參數,第一個參數是必須項,用于定位要訪問的資源。后四個參數雖是可選項,但由于Webbrowser控件提供之初并不針對.Net架構,因此并不能保證它與支持.Net的開發語言Visual C#完全無縫集成,所以后四個參數也需要明確的表達出來,并且是引用類型(ref)。點擊TreeView節點事件時顯示數據庫中對應html頁面,代碼實現如下:
String CmdLine=\"Select * from TextBox where NodeID=\"+SelectedNodeID; //SQL命令行
SqlCommand Cmd=new SqlbCommand(CmdLine,Conn); //創建SqlCommand
SqlDataReader dr =Cmd.ExecuteReader(); //執行ExecuteReader()方法,并生成一個SqDataReader對象
if (dr.Read())
{String s1=dr[\"FileSavePath\"].ToString();//取出頁面文件存儲路徑
String s2=dr[\"NodeID\"].ToString(); //取出頁面文件名
axWebBrowser1.Navigate(s1+s2+\".htm\",ref o,ref o,ref o,ref o);//調用節點點擊時的相應頁面}
4 結束語
該精品課程開發工具基于Windows平臺,.Net架構,Visual C#作為開發語言,Sql Server 2000作為后臺數據庫,用戶使用方便,界面美觀。它對基于ActiveX控件的軟件開發有一定的借鑒作用,同時該軟件對協助教師制作精品課程,幫助學校完成教學資源自動化、網絡化有著重要意義。
參考文獻:
[1] 李泰峰,周通德,劉志軍.國家精品課程網絡教學資源管理系統的研發[J].電子科技大學學報,2004,6(1):88-91.
[2] 韋巍,湯庸,丁國芳,等.基于CSCW的人機界面研究與設計[J].計算機工程與應用,2002,(16):229-231.
[3] 劉燁,吳中元.C#編程及應用程序開發教程[M].北京:清華大學出版社,2003:406-414.
[4] 李勝,張宏偉,周繼杰.基于ActiveX開發地質動力區劃決策支持系統[J].遼寧工程技術大學學報,2003,22(4):538-539.
[5] 楊國保,涂曉斌,蔣先剛,等.工程制圖電子備課平臺的設計[J].華東交通大學學報,2004,21(2):143-146.
[6] 曹祖圣,吳明哲,林兆燊,等.Visual C# .NET程序設計經典[M].北京:科學出版社,2004:253-257.