移植IEWebControls到Java开发环境---------自他人

阅读更多

在.Net环境中，本人觉得iewebcontrols控件做的很不错，但是在一个Java项目中，我想找一个TreeView web控件，试过了xtree以及YUI，但始终感觉不如iewebcontrols中的treeview做的好，我想：可不可以将它移植过来呢？
我将页面生成的Html文件保存下来，分析了一下,以下是测试脚本：

 代码

//**********************************************************************************************//
"-//W3C//DTD HTML 4.0 Transitional//EN">


  tree
  "GENERATOR" content="Microsoft Visual Studio .NET 7.1">
  "CODE_LANGUAGE" content="Visual Basic .NET 7.1">
  "vs_defaultClientScript" content="JavaScript">
  "vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  "css/style.css" _fcksavedurl=""css/style.css"" type="text/css" rel="stylesheet">

    </span></li> 
   <li class="alt"><span>    </span><span class="comment">//通过NodeData查找节点 </span><span>  </span></li> 
   <li class=""><span>    function getNodeByData(tree,data){   </span></li> 
   <li class="alt"><span>        var root=tree.getChildren();   </span></li> 
   <li class=""><span>        </span><span class="keyword">for</span><span>(var i=0;i<root.length;i++){   </span></li> 
   <li class="alt"><span>           </span><span class="keyword">if</span><span>(root[i].getAttribute(</span><span class="string">"NodeData"</span><span>)==data){   </span></li> 
   <li class=""><span>              </span><span class="keyword">return</span><span> root[i];   </span></li> 
   <li class="alt"><span>           }</span><span class="keyword">else</span><span> </span><span class="keyword">if</span><span>(root[i].getChildren().length>0){   </span></li> 
   <li class=""><span>              var node=getNodeByData(root[i],data);   </span></li> 
   <li class="alt"><span>              </span><span class="keyword">if</span><span>(node!=</span><span class="keyword">null</span><span>) </span><span class="keyword">return</span><span> node;   </span></li> 
   <li class=""><span>           }   </span></li> 
   <li class="alt"><span>        }   </span></li> 
   <li class=""><span>        </span><span class="keyword">return</span><span> </span><span class="keyword">null</span><span>;   </span></li> 
   <li class="alt"><span>    }   </span></li> 
   <li class=""><span>    </span><span class="comment">//通过节点文本查找节点 </span><span>  </span></li> 
   <li class="alt"><span>    function getNodeByText(tree,text){   </span></li> 
   <li class=""><span>        var root=tree.getChildren();   </span></li> 
   <li class="alt"><span>        </span><span class="keyword">for</span><span>(var i=0;i<root.length;i++){   </span></li> 
   <li class=""><span>           </span><span class="keyword">if</span><span>(root[i].getAttribute(</span><span class="string">"Text"</span><span>)==text){   </span></li> 
   <li class="alt"><span>              </span><span class="keyword">return</span><span> root[i];   </span></li> 
   <li class=""><span>           }</span><span class="keyword">else</span><span> </span><span class="keyword">if</span><span>(root[i].getChildren().length>0){   </span></li> 
   <li class="alt"><span>              var node=getNodeByData(root[i],text);   </span></li> 
   <li class=""><span>              </span><span class="keyword">if</span><span>(node!=</span><span class="keyword">null</span><span>) </span><span class="keyword">return</span><span> node;   </span></li> 
   <li class="alt"><span>           }   </span></li> 
   <li class=""><span>        }   </span></li> 
   <li class="alt"><span>        </span><span class="keyword">return</span><span> </span><span class="keyword">null</span><span>;   </span></li> 
   <li class=""><span>    }   </span></li> 
   <li class="alt"><span>    </span><span class="comment">//测试添加节点 </span><span>  </span></li> 
   <li class=""><span>    function doadd(){   </span></li> 
   <li class="alt"><span>        </span><span class="comment">//alert(tvNodes.getTreeNode(tvNodes.selectedNodeIndex).getAttribute("NodeData")); </span><span>  </span></li> 
   <li class=""><span>        var node1=getNodeByText(tvNodes,'权限管理');   </span></li> 
   <li class="alt"><span>        var node2=getNodeByData(tvNodes,'1101');   </span></li> 
   <li class=""><span>        </span><span class="comment">//alert(node1.getAttribute("NodeData")); </span><span>  </span></li> 
   <li class="alt"><span>        </span><span class="comment">//alert(node2.getAttribute("Text")); </span><span>  </span></li> 
   <li class=""><span>        var node3=tvNodes.createTreeNode();   </span></li> 
   <li class="alt"><span>        </span><span class="keyword">if</span><span>(node1!=</span><span class="keyword">null</span><span> && node2!=</span><span class="keyword">null</span><span>){   </span></li> 
   <li class=""><span>         node3.setAttribute(</span><span class="string">"NodeData"</span><span>,</span><span class="string">"1109"</span><span>);   </span></li> 
   <li class="alt"><span>         node3.setAttribute(</span><span class="string">"Text"</span><span>,node2.getAttribute(</span><span class="string">"Text"</span><span>));   </span></li> 
   <li class=""><span>         node3.setAttribute(</span><span class="string">"NavigateUrl"</span><span>,node2.getAttribute(</span><span class="string">"NavigateUrl"</span><span>));   </span></li> 
   <li class="alt"><span>         node3.setAttribute(</span><span class="string">"ImageUrl"</span><span>,node2.getAttribute(</span><span class="string">"ImageUrl"</span><span>));   </span></li> 
   <li class=""><span>         node3.setAttribute(</span><span class="string">"SelectedImageUrl"</span><span>,node2.getAttribute(</span><span class="string">"SelectedImageUrl"</span><span>));   </span></li> 
   <li class="alt"><span>         node3.setAttribute(</span><span class="string">"ExpandedImageUrl"</span><span>,node2.getAttribute(</span><span class="string">"ExpandedImageUrl"</span><span>));   </span></li> 
   <li class=""><span>         node3.setAttribute(</span><span class="string">"Target"</span><span>,node2.getAttribute(</span><span class="string">"Target"</span><span>));   </span></li> 
   <li class="alt"><span>         node1.add(node3);   </span></li> 
   <li class=""><span>        }   </span></li> 
   <li class="alt"><span>    }   </span></li> 
   <li class=""><span>    </span><span class="comment">//测试删除节点 </span><span>  </span></li> 
   <li class="alt"><span>    function dodel(){   </span></li> 
   <li class=""><span>        var node=getNodeByData(tvNodes,'1109');   </span></li> 
   <li class="alt"><span>        </span><span class="comment">//alert(node.getParent().getAttribute("Text"));//获取父节点 </span><span>  </span></li> 
   <li class=""><span>        </span><span class="keyword">if</span><span>(node!=</span><span class="keyword">null</span><span>) node.remove();   </span></li> 
   <li class="alt"><span>    }   </span></li> 
   <li class=""><span>
 "0" topmargin="0" marginwidth="0" marginheight="0" rightmargin="0" scroll="no">
  "Form1" method="post" action="left.aspx" id="Form1">
       "hidden" name="__tvNodes_State__" value=""/>
   "宋体">
    class="Table0" id="TableLeft" cellSpacing="1" cellPadding="1" border="0" width="180"
     height="100%">


"webctrl_client/1_0/treeview.htc" />
"tvNodes" selectedNodeIndex="0" HelperID="__tvNodes_State__" systemImagesPath="./webctrl_client/1_0/TreeImages/" onexpand="javascript: if (this.clickedNodeIndex != null) this.queueEvent('onexpand', this.clickedNodeIndex)" oncollapse="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncollapse', this.clickedNodeIndex)" oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)" onselectedindexchange="javascript: if (event.oldTreeNodeIndex != event.newTreeNodeIndex) this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex)" style="height:100%;width:175px;Z-INDEX: 101">
 "True" Selected="true" NavigateUrl="baseinfo/info_employee_main.aspx" NodeData="1000" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
  基本信息管理"baseinfo/info_employee_main.aspx" NodeData="1001" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   用户管理
  "baseinfo/info_company_main.aspx" NodeData="1002" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   部门公司管理
  "baseinfo/info_BaseCode_main.aspx" NodeData="1003" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   基本代码管理


 "True" NavigateUrl="right/user_node.aspx" NodeData="1100" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
  权限管理"right/Auth_node_info.aspx" NodeData="1101" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   节点信息
  "right/Auth_right_info.aspx" NodeData="1102" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   页面管理
  "right/Auth_role_info.aspx" NodeData="1103" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   角色信息
  "right/user_node.aspx" NodeData="1201" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   节点授权
  "right/user_right.aspx" NodeData="1202" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   页面授权
  "right/user_role.aspx" NodeData="1203" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   用户角色管理
  "right/user_query.aspx" NodeData="1204" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
   查询授权






 "position: absolute; width: 200px; top: 100px; left: 300px; height: 100%;">







//**********************************************************************************************//

在IE下，以上Html脚本可以单独作为文件保存，它和iewebcontrols安装后的webctrl_client目录在同一个目录下，这样就可以运行在实际的开发当中，节点我们可以采用XML来生成。
    在该脚本中，我添加了四个函数，分别用来:(1)通过NodeData查找节点;(2)通过节点文本查找节点;(3)添加节点;(4)删除节点。我想具备了这几个功能之后，在jsp当中就可以灵活的使用这个treeview组件了。
    技术说明：在这个组件当中，使用了两个很关键的技术：htc以及XML命名空间，当然也用到了DOM和Javascript，在我的脚本当中，使用了里面的方法和属性，详细使用和功能需要揣摩webctrl_client\1_0下的treeview.htc文件中的方法和属性
    说明：在java环境中，如果出现树的部分图片显示不正常，检查一下图片链接地址是否有问题，参考路径是systemImagesPath，还有一种可能情况是图片的名称大小写是否一致，不一致的话修改图片名称，因为在java环境中很多服务器的文件名是区分大小写的。