用Dojo实现“打印管理器”

    在PrintManager.jspf中实现前述的打印管理器的HTML代码，启动打印管理器的链接以及预览的HTML代码，并将它们声明为相应的Dojo小部件。
清单 4. PrintManager.jspf代码示例

<script type="text/javascript">
var djConfig = {
isDebug: false,
debugContainerId: "debugConsole"
};
</script>
<script type="text/javascript" src="<portal-logic:urlFindInTheme
file="./js/PrintManager/dojo.js"/>"></script>
<script type="text/javascript" src="<portal-logic:urlFindInTheme
file="./js/PrintManager/PrintManager.js"/>"></script>
<style type="text/css">
.dojoDialog {
background : #FFFFFF;
border : 1px solid #999;
-moz-border-radius : 5px;
padding : 4px;
}
</style>
<div style="width:100%;text-align:right;" zIndex="50">
<a href="javascript:pmConsole.show()"><portal-fmt:text key="launch"
bundle="nls.PrintManager"/></a>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div dojoType="dialog" id="PreviewDialog" bgColor="#eee" bgOpacity="0.5"
toggle="fade" toggleDuration="250" style="display:none;width:100%" zIndex="100">
...
</div>
<div dojoType="dialog" id="PrintManager" bgColor="#eee" bgOpacity="0.5"
toggle="fade" toggleDuration="250" style="display:none">
...
</div>
<div id="debugConsole" style="background-color:lightgray"></div> 

图12列出了PrintManager.js定义的函数名称。
图 12. PrintManager.js方法列表


    下面，我们选择其中几个较为重要的函数进行讲解。findPrintlets － 搜索当前页面上的“打印小部件”，并构造返回一个数组。
清单 5. 函数findPrintlets代码

function findPrintlets(){
var bodyHTML = document.body.innerHTML;
var re=/<.*pageprint\s*=[\'\"]+true[\'\"]+[^<>\/]*>/gim;
var r=bodyHTML.match(re);
var printletArray=new Array();
if(r!=null && r!=undefined){
for(i=0;i<r.length;i++){
var divPiece=r[i];
//Find id attribute
var idRe=/id\s*\=[\'|\"]{0,1}(\w+)[\'|\"]{0,1}/;
r[i].search(idRe);
var idVal=RegExp.$1;
RegExp.$1="";
//Find displaytext attribute
var idxBegin=divPiece.indexOf("displaytext");
idxBegin+=13;
dojo.debug(idxBegin);
var idxEnd=divPiece.indexOf("\"",idxBegin);
dojo.debug(idxEnd);
var displayText=divPiece.substring(idxBegin,idxEnd);
dojo.debug(displayText);
//Construct Printlet object and push it into the array. 
var printlet= new Object();
printlet.displayText=displayText;
printlet.idVal=idVal;
printletArray.push(printlet);
}
}
return printletArray;
} 

    该函数利用正则表达式搜索页面中包含pageprint标签的HTML元素，进而获取其中的id以及displaytext标签的值，最后构造成对象放入数组返回。
createDragSource － 创建Drag Source。
    清单 6. 函数createDragSource代码

function createDragSource(objId,objText,printId){
var newObj=document.createElement("div");
var style="height:40;width:80;background:lightgrey;border:1px dotted black; 
font-size:10;margin:4px;padding:4px;"; 
newObj.innerHTML="<div printId='"+printId+"' id='"+objId+"' 
style='"+style+"'>"+objText+"</div>"; 
document.getElementById("objSource").appendChild(newObj);
new dojo.dnd.HtmlDragSource(byId(objId), [dragType]);
} 

    Drag Source是Dojo中的概念，它表示一个可以拖拽的对象。在“打印管理器”中，一个Drag Source就表示一个“打印小部件”，Drag Source对象通过属性printId保存“打印小部件”的id，因此可以根据它找到对应的打印小部件。
traverseNodeTree － 遍历布局表格的DOM树，将真正的Portlet内容替换Drag Source的内容。
清单 7. 函数traverseNodeTree代码

function traverseNodeTree(currentNode){
if(currentNode.tagName != undefined){
var printId=currentNode.getAttribute("printId");
}
if(printId!=null && printId!=undefined){
var srcHTMLObj=byId(printId).cloneNode(true);
currentNode.parentNode.replaceChild(srcHTMLObj,currentNode);
return currentNode;
}else if(currentNode.hasChildNodes()){
var nodes=currentNode.childNodes;
for(var i=0;i<nodes.length;i++){
var childNode=nodes[i];
traverseNodeTree(childNode);
}
}
return currentNode;
}