一、序 本文是使用WebLogic的 關于靜態的樹形結構相對簡單,不在這里詳細說明。 二、自定義的樹形結構 1.環境目錄 Test\TestWeb\index.jsp Test為應用程序名,TestWeb為Web名 2.創建頁面流 在TestWeb下新建頁面流tree。系統會自動生成以下文件,文件夾: 3.準備TreeView相關頁面文件 這里使用frame框架進行演示,左邊顯示樹形結點,右邊顯示對應內容。所以還要建立兩個文件。 我們把index.jsp就作為框架容器。代碼如下:
E:\bea\weblogic81\samples\workshop
\SamplesApp\WebApp\tagSamples.netui\tree
E:\bea\weblogic81\samples\workshop
\SamplesApp\WebApp\tagSamples\netui\tree_dynamic
WebLogic自帶的兩個例子。
---------------------------------
---------------------------------
Test\TestWeb\tree
Test\TestWeb\tree\index.jsp
Test\TestWeb\tree\TreeController.jpf
---------------------------------
tree.jsp作為樹形結點頁面,content.jsp作為內容頁面。
Test\TestWeb\tree\tree.jsp
Test\TestWeb\tree\content.jsp
tree.jsp,content.jsp內容我們暫時不管,先編輯TreeController.jpf頁面流文件,全代碼如下:
package tree;
/**
* @jpf:controller
* @jpf:view-properties view-properties::
* <!-- 此數據是自動生成的。 不推薦手工編輯此區域。 -->
* <view-properties>
* <pageflow-object id="pageflow:/tree/TreeController.jpf"/>
* <pageflow-object id="action:treeState.do">
* <property value="180" name="x"/>
* <property value="40" name="y"/>
* </pageflow-object>
* <pageflow-object id="action:begin.do">
* <property value="80" name="x"/>
* <property value="100" name="y"/>
* </pageflow-object>
* <pageflow-object id="action-call:@page:tree.jsp@#@action:treeState.do@">
* <property value="96,120,120,144" name="elbowsX"/>
* <property value="31,31,31,31" name="elbowsY"/>
* <property value="East_1" name="fromPort"/>
* <property value="West_1" name="toPort"/>
* </pageflow-object>
* <pageflow-object id="page:tree.jsp">
* <property value="60" name="x"/>
* <property value="40" name="y"/>
* </pageflow-object>
* <pageflow-object id="page:index.jsp">
* <property value="240" name="x"/>
* <property value="100" name="y"/>
* </pageflow-object>
* <pageflow-object id="page:content.jsp">
* <property value="120" name="x"/>
* <property value="100" name="y"/>
* </pageflow-object>
* <pageflow-object id="forward:path#tree#tree.jsp#@action:treeState.do@">
* <property value="144,120,120,96" name="elbowsX"/>
* <property value="31,31,31,31" name="elbowsY"/>
* <property value="West_1" name="fromPort"/>
* <property value="East_1" name="toPort"/>
* <property value="tree" name="label"/>
* </pageflow-object>
* <pageflow-object id="forward:path#suclearcase/" target="_blank" >ccess#index.jsp#@action:begin.do@">
* <property value="116,160,160,204" name="elbowsX"/>
* <property value="91,91,91,91" name="elbowsY"/>
* <property value="East_1" name="fromPort"/>
* <property value="West_1" name="toPort"/>
* <property value="success" name="label"/>
* </pageflow-object>
* </view-properties>
* ::
*/
//以上一堆注釋代碼,不必理會
public class TreeController extends com.bea.wlw.netui.pageflow.PageFlowController
{
//定義樹形根結點
public com.bea.wlw.netui.tags.html.TreeNode liweinode = null;
//頁面流加載時運行代碼
public void onCreate() throws Exception
{
int i=10;
//實例化樹形結點
//第一個參數:結點圖標
//第二個參數:結點標簽
//第三個參數:一般為null,具體還沒搞懂
//第四個參數:結點的點擊動作
//第五個參數:作用的頁面,即在index.jsp定義的內容框架名fraContent
//第六個參數:展開還是合并
liweinode=new com.bea.wlw.netui.tags.html.TreeNode(
"folder_closed.gif",
"root",
null,
"content.jsp",
"fraContent",
true);
com.bea.wlw.netui.tags.html.TreeNode treenode[]=new com.bea.wlw.netui.tags.html.TreeNode[i];
for(i=0;i<10;i++)
{
treenode[i] = new com.bea.wlw.netui.tags.html.TreeNode(
"folder_closed.gif",
"test"+i,
null,
"content.jsp?sendvalue="+i,
"fraContent",
true);
liweinode.addChild(treenode[i]);
}
}
/**
* Handles the state of the tree when a a link is clicked.
*
* @jpf:action
* @jpf:forward name="tree" path="tree.jsp"
*/
//點擊結點結的動作處理,要
{
String nodeSel = null;
String nodeExpanded = null;
nodeSel = getRequest().getParameter(com.bea.wlw.netui.tags.html.TreeNode.SELECTED_NODE);
nodeExpanded = getRequest().getParameter(com.bea.wlw.netui.tags.html.TreeNode.EXPAND_NODE);
if (nodeExpanded != null)
{
com.bea.wlw.netui.tags.html.TreeNode node = liweinode.findNode(nodeExpanded);
if (node != null)
{
node.setExpanded(!node.isExpanded());
}
return new com.bea.wlw.netui.pageflow.Forward("tree");
}
return new com.bea.wlw.netui.pageflow.Forward(nodeSel);
}
/**
* 此方法代表進入頁面流的入口
* @jpf:action
* @jpf:forward name="success" path="index.jsp"
*/
protected com.bea.wlw.netui.pageflow.Forward begin()
{
return new com.bea.wlw.netui.pageflow.Forward("success");
}
}
5.編輯頁面tree.jsp,content.jsp
---------------------------------
tree.jsp內容如下,tree對應上面定義的public liweinode,格式必須如此。action即為上面定義的
public com.bea.wlw.netui.pageflow.Forward treeState()方法。
<body>
<netui:tree tree="{pageFlow.liweinode}" action="treeState"></netui:tree>
</body>
content.jsp內容如下:
<body>
<p>
<%=request.getParameter("sendvalue")%>
</p>
</body>
<%=request.getParameter("sendvalue")%>
6.運行
---------------------------------
運行會發現左邊樹形結構是一堆紅x,不過點擊對應結點,功能倒是沒問題。不要緊,下面就解決紅x的
問題。這是由于
將E:\bea\weblogic81\samples\workshop\SamplesApp\WebApp\tagSamples\netui\tree下
treeImages復制到Test\TestWeb\tree下。并修改tree.jsp。這時
再運行會發現一切OK,不會很快就會感覺到那些圖片實在是太難看了。我這里用的是.net的圖片,下載的
WebControl里面有。把這些好的圖片復制到treeImages下,更改代碼為:
運行一切OK!
三、從Xml文件中獲取樹形結構
E:\bea\weblogic81\samples\workshop\SamplesApp\WebApp\tagSamples\netui\tree_dynamic這個例子就
是,有了自定義樹形的詳細解釋,應用也不成問題。
原文轉自:http://www.anti-gravitydesign.com