|

楼主 |
发表于 2008-12-31 13:17:50
|
显示全部楼层
基于XUL的查询文件系统
查询文件系统的目的是解决用户查询文件的问题.完全实现查询的智能化,从而提高用户的查询效率。一个好的查询文件系统的界面应具备以下几个特点:1)高效性:能否快速输入查询条件直接决定了操作人员的工作效率.因此输入查询条件的速度是非常重要的;2)可移植性:系统可以作为应用程序来运行,也可以作为 Web应用程序来运行.基于以上两点,查询文件系统的表示层利用XUL来实现。
下面是文件查询系统界面的实现代码。
代码清单 l
<!-- 菜单实现代码 --一>
<!-- 输入查询条件多个tabpanel实现代码-->
<tabbox>
<groupbox orient=”horizontal”>
<caption label=”Search Criteria”/>
<menulist formid=”mainform” id=”searehtype”>
<menupopup>
<menuitem label=” Name”/>
<menuitem label=” Size”/>
<menuitem label=” Date Modified”/>
</menupopup>
</menulist>
<spacer class=” springspace”/>
<menulist formid=’’maiform”id=”searchmode”>
</menulist>
</groupbox>
<tabpanel>
<tabpanel id=”optionspanel” orient=”vertical”>
<checkbox formid=”mainform” id=”casecheck” label=”Case Sensitive Search”/>
<checkbox formid=”maiform” id=” wordscheck” label=”Match Entire Filename”/>
</tabpanel>
</tabpanels>
</tabbox>
代码清单 l的界面显示
在两个 tab的输入项中输入数据.点击”Find”钮,Mozilla就会调用代码清单 2中的submit(formid)数.把输入的数据提交到服务器端 http://16.157.130.8:7001/xul/dofind.jsp进行处理.然后把结果返回给Mozilla。
代码清单2中的javascript处理思路如下:XUL没有提供和 html form对应的部件,所以提交数据时首先需要创建一个htmlform ,然后取formid是 mainform(每个需要提交数据 的部件 的 formid属性的 value为mainform)的部件,接着取得它们的 value,如果是checkbox就取 data.item(i).checked.紧接着把id和value以hidden的形式append到http form 中.最后提交httpform 。
代码清单 2
function submit(formid){
vat form =createForm (formid, ”mainform”,”dofind.jsp”,”post”,”_self”);
setFormData(form,formid);
form.submit0;
}
function createForm(formid,name,action,method,target){
vat form =document.getElementByld(formid);
if(form !=nul1){
document.documentElement.removeChild(form);
var form:document.createElementNS {“http://www.w3.org/1999/xhtml”,”html:form”);
form.setAttribute(“id”.formid);
form.setAttribute(“nanle”,name);
form.setAttribute(“action”,action);
form.setAttribute(“method”,method);
form.setAttribute(“target”,target);
document.documentElement.appendChild(form);
}
return form;
}
function setFormData(form,formid){
var data=document.getElementsByAttribute(“formid”,formid);
for(i=0; i<data.1ength; i++){
vat val=document.createElementNS(“http://www.w3.org/1999/xhtml”,”html:input”);
va1.setAttribute(“type”,”hidden”);
va1.setAttribute(“name”,data.item(i).getAttribute(“id”));
alert(data.item(i).checked);
if(data.item(i).value===undefined)f
va1.value=data.item(i).checked;
} else {
va1.value=data.item(i).value;
}
form.appendChild(va1);
}
} |
|