2008年5月27日 星期二

開發 IE 瀏覽器的 Toolbar:半自動程式搭配人為挑選資料

若是在自動化作業中,有一些需要半自動 + 人為決定的話,譬如在 100 篇資料中只要複製其中幾篇,這時候就要考慮如何將人為因素加入。以下畫面中呈現 login 後,要從頁面二的表格中,挑選部分資料複製到頁面三的表格中:



login:



進入頁面二後,我會動態在 html table 中加入新的一欄,並在欄位標頭加一個按鈕,而其他列中則加入 checkbox 供勾選:



勾選完畢,按下欄位標頭的按鈕後,因為我會監聽此按鈕的 click 事件,所以可以在此重新分析 table 的資料,決定哪幾列因為有勾選而需要儲存資料,並且將瀏覽器跳至下一頁:



最後,將儲存的資料複製進頁面三的表格中即可:



完整 HTML 原始檔:


<html>
<head>
<title>test page</title>
</head>
<body>

<table border="1">
<tr valign="top">

<td>
<h3>頁面一:登入</h3>

<form>
uid: <input type="text" name="uid"><br>
pwd: <input type="text" name="pwd"><br>
<input type="submit">
</form>
</td>

<td>
<h3>頁面二:複製資料</h3>

<form>
<table border="1">
<tr>
<td>owner</td>
<td>status</td>
</tr>
<tr>
<td>owner 1</td>
<td>status 1</td>
</tr>
<tr>
<td>owner 2</td>
<td>status 2</td>
</tr>
<tr>
<td>owner 3</td>
<td>status 3</td>
</tr>
<tr>
<td>owner 4</td>
<td>status 4</td>
</tr>
<tr>
<td>owner 5</td>
<td>status 5</td>
</tr>
</table>
</form>
</td>

<td>
<h3>頁面三:貼上資料</h3>

<form>
<table border="1">
<tr>
<td>owner</td>
<td>status</td>
</tr>
</table>
</form>
</td>

</tr>
</table>

</body>
</html>


C# 原始檔:


/*
* override BandObjectLib 的 OnExplorerAttached,可於此處設定監聽 browser 的事件
*/
protected override void OnExplorerAttached(EventArgs ea)
{
this.Explorer.DocumentComplete += new DWebBrowserEvents2_DocumentCompleteEventHandler(this.OnDocumentComplete);
}

/*
* 監聽網頁載入完成的事件
*/
private void OnDocumentComplete(object frame, ref object urlObj)
{
string rooturl = ((this.Explorer as IWebBrowser2).Document as IHTMLDocument2).url;

IWebBrowser2 webBrowser = (IWebBrowser2)frame;
IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document;

//MessageBox.Show("[OnDocumentComplete]\n" + document.title + "\n" + document.url);

if(step!=-1)
startProcess();
}

/*
* 按鈕一,連到指定頁面
*/
private void button1_Click(object sender, System.EventArgs e)
{
IWebBrowser2 webBrowser = (IWebBrowser2)this.Explorer;

object Null = System.Reflection.Missing.Value;
webBrowser.Navigate("http://127.0.0.1/temp/test.html", ref Null, ref Null, ref Null, ref Null);
}

private int step = -1;
private string data_owner = "";
private string data_status = "";

/*
* 按鈕二,開始自動化作業
*/
private void button2_Click(object sender, System.EventArgs e)
{
step = 0;
startProcess();
}

/*
* 自動化作業程序
*/
private void startProcess()
{
IWebBrowser2 webBrowser = (IWebBrowser2)this.Explorer;
IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document;

step++;

if(step==1)
{
/*
* 程序一,登入
*/
HTMLFormElementClass loginForm = document.forms.item(0, 0) as HTMLFormElementClass;
HTMLInputTextElement uid = loginForm.item("uid", 0) as HTMLInputTextElement;
HTMLInputTextElement pwd = loginForm.item("pwd", 0) as HTMLInputTextElement;

uid.value = "username";
pwd.value = "password";

MessageBox.Show("填入帳密,自動送出!");
loginForm.submit();
}
else if(step==2)
{
/*
* 程序二,為表格建立勾選項目
*/
HTMLTable sourceTable = (document.all.tags("table") as IHTMLElementCollection).item(1, 0) as HTMLTable;
for(int i=0; i<sourceTable.rows.length; i++)
{
HTMLTableRow row = sourceTable.rows.item(i, 0) as HTMLTableRow;
row.insertCell(0);

HTMLTableCell cell = row.cells.item(0, 0) as HTMLTableCell;

if(i==0)
{
cell.innerHTML = "<input type='button' name='btnSelected' value='選擇完畢'>";
}
else
{
cell.innerHTML = "<input type='checkbox'>";
}
}

HTMLButtonElement btnSelected = document.all.item("btnSelected", null) as HTMLButtonElement;
HtmlEventProxy.Create("onclick", btnSelected, new System.EventHandler(this.btnSelected_onclick));

MessageBox.Show("請選擇欲複製的項目!");
}
else if(step==3)
{
/*
* 程序三,貼上資料
*/
HTMLTable targetTable = (document.all.tags("table") as IHTMLElementCollection).item(2, 0) as HTMLTable;
if(copyData!=null){
for(int i=0; i<copyData.Count; i++){

HTMLTableRow row = targetTable.insertRow(targetTable.rows.length) as HTMLTableRow;
row.insertCell(0);
row.insertCell(1);

System.Collections.Hashtable data = copyData[i] as System.Collections.Hashtable;
(row.cells.item(0, 0) as HTMLTableCell).innerText = data["owner"].ToString();
(row.cells.item(1, 0) as HTMLTableCell).innerText = data["status"].ToString();
}
}

MessageBox.Show("複製完成");
}
}

private System.Collections.ArrayList copyData;

private void btnSelected_onclick(object sender, EventArgs e)
{
/*
* 程序二,將勾選的項目儲存起來
*/
IHTMLElement element = ((HtmlEventProxy)sender).HTMLElement as IHTMLElement;

IWebBrowser2 webBrowser = (IWebBrowser2)this.Explorer;
IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document;

copyData = new System.Collections.ArrayList();
string msg = "";

HTMLTable sourceTable = (document.all.tags("table") as IHTMLElementCollection).item(1, 0) as HTMLTable;
for(int i=1; i<sourceTable.rows.length; i++)
{
HTMLTableRow row = sourceTable.rows.item(i, 0) as HTMLTableRow;
HTMLTableCell cell0 = row.cells.item(0, 0) as HTMLTableCell;
HTMLTableCell cell1 = row.cells.item(1, 0) as HTMLTableCell;
HTMLTableCell cell2 = row.cells.item(2, 0) as HTMLTableCell;

bool isChecked = (cell0.getElementsByTagName("input").item(0, 0) as HTMLOptionButtonElement).@checked;
string owner = cell1.innerText;
string status = cell2.innerText;

if(isChecked)
{
System.Collections.Hashtable data = new System.Collections.Hashtable();
data.Add("owner", owner);
data.Add("status", status);

copyData.Add(data);
msg += ("owner = " + owner + ", status = " + status + "\n");
}

}

MessageBox.Show("勾選了:\n" + msg);

object Null = System.Reflection.Missing.Value;
webBrowser.Navigate("http://127.0.0.1/temp/test.html", ref Null, ref Null, ref Null, ref Null);

((HtmlEventProxy)sender).Detach();
}

沒有留言: