Hello,
I'm presently looking for a JSF tree component. I need one which not only would allow me to display a little icon next to my leaves names, but which would allow me to display a checkbox too.
I've tried the Apache MyFaces tree, in the Tomahawk sub-project. But it looks like I won't manage to add a checkbox without changing its code.
A clue, anyone ? With MyFaces or anything else ?
AlienQueen
Hi,
I have one Q. why do u want to display a check box beside tree...
what's your requirement ?
Regards,
Kranthi
Hello,
Thanks for your reply ! I would like to be able to display the file hierarchy of my Tomcat server, to allow the user to browse through it and finally, to allow the user to select or un-select those files.
FYI, I wish to parse the selected files and inject code into them.
Regards,
AlienQueen
Hi,
We are using Icefaces component to dispaly a tree structure.
It's providing everything what u need..jsut look at it..
Regards,
Kranthi
I'm currently testing ICEFaces. I will tell you whether it fits my need or not.
below is my code from my project
perhaps it is useful for your problem
/*
* Copyright 2005 The Apache Software Foundation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.itlt.clb.action;
import org.apache.myfaces.custom.tree2.HtmlTree;
import org.apache.myfaces.custom.tree2.TreeNode;
import org.apache.myfaces.custom.tree2.TreeNodeBase;
import org.apache.myfaces.custom.tree2.TreeModel;
import org.apache.myfaces.custom.tree2.TreeModelBase;
import com.itlt.clb.entity.Agency;
import com.itlt.clb.util.HibDb;
import com.itlt.clb.util.Loginer;
import com.itlt.clb.util.constant.ConstParas;
import javax.faces.context.FacesContext;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.validator.ValidatorException;
import javax.faces.event.ActionEvent;
import java.io.Serializable;
import java.util.List;
/**
* Backer bean for use in example. Basically makes a TreeNode available.
*
* @author Sean Schofield
* @version $Revision: 1.9 $ $Date: 2007-05-31 09:17:44 $
*/
public class TreeBacker implements Serializable
{
private TreeModelBase _treeModel;
private HtmlTree _tree;
private boolean select;
public boolean isSelect() {
return select;
}
public void setSelect(boolean select) {
this.select = select;
}
public TreeNode getTreeData()
{
String formatFolder = "foo-folder";
int agencyCodeLen = 5;//代理编码长度
long agencyId = Loginer.getCurLogin().getUserclerk().getAgency().getId();
TreeNode treeData = null;
//首先得到中港通的数据.
List chinaLinkList = HibDb.queryHQL("from Agency a where a.id ='"+agencyId+"' and a.status = '"+ConstParas.common3Status.ACTIVE.getStatus()+"'", 0, 0);
Agency chinaLinkAgency = null;
if(chinaLinkList != null && chinaLinkList.size() > 0){
chinaLinkAgency = (Agency)chinaLinkList.get(0);
if(chinaLinkAgency.getCode().length()==agencyCodeLen)
formatFolder = "foo-folder";
else
formatFolder = "bar-folder";
treeData = new TreeNodeBase(formatFolder, "<input type='checkbox' id='agency_"+chinaLinkAgency.getId()+"' value='"+chinaLinkAgency.getId()+"' onclick='getSelectAgency(this)'>"+chinaLinkAgency.getName()+"", false);
// construct a set of fake data (normally your data would come from a database)
List list = HibDb.queryHQL("from Agency a where a.agency.id='"+chinaLinkAgency.getId()+"' and a.status = 'A'", 0, 0);
Agency agency = null;
Agency subAgency = null;
Agency subAgencyPoint = null;
TreeNodeBase personNode = null;
TreeNodeBase folderNode = null;
TreeNodeBase folderNodePoint = null;
for(int i=0;i<list.size();i++){
agency = (Agency)list.get(i);
if(agency.getAgency() != null){
if(agency.getCode().length()==agencyCodeLen)
formatFolder = "foo-folder";
else
formatFolder = "bar-folder";
personNode= new TreeNodeBase(formatFolder, "><input type='checkbox' id='agency_"+chinaLinkAgency.getId()+"_"+agency.getId()+"' value='"+agency.getId()+"'onclick='getSelectAgency(this)'>"+agency.getName()+"", false);
//去找到所有属于它的销售点
//System.out.println(" agency.getId() = "+agency.getId());
List subList = HibDb.queryHQL("from Agency a where a.agency.id = '"+agency.getId()+"'and a.status ='"+ConstParas.common3Status.ACTIVE.getStatus()+"'", 0, 0);
for(int k=0;k<subList.size();k++){
subAgency = (Agency)subList.get(k);
if(subAgency.getCode().length()==agencyCodeLen)
formatFolder = "foo-folder";
else
formatFolder = "bar-folder";
folderNode = new TreeNodeBase(formatFolder, "><input type='checkbox' id='agency_"+chinaLinkAgency.getId()+"_"+agency.getId()+"_"+subAgency.getId()+"' value='"+subAgency.getId()+"'onclick='getSelectAgency(this)'>"+subAgency.getName()+"", false);
//folderNode.getChildren().add(new TreeNodeBase("document", "X050001", true));
//personNode.getChildren().add(folderNode);
List subListPoint = HibDb.queryHQL("from Agency a where a.agency.id = '"+subAgency.getId()+"' and a.status = '"+ConstParas.common3Status.ACTIVE.getStatus()+"'", 0, 0);
for(int l=0;l<subListPoint.size();l++){
subAgencyPoint = (Agency)subListPoint.get(l);
if(subAgencyPoint.getCode().length()==agencyCodeLen)
formatFolder = "foo-folder";
else
formatFolder = "bar-folder";
folderNodePoint = new TreeNodeBase(formatFolder, "><input type='checkbox' id='agency_"+chinaLinkAgency.getId()+"_"+agency.getId()+"_"+subAgency.getId()+"_"+subAgencyPoint.getId()+"' value='"+subAgencyPoint.getId()+"'onclick='getSelectAgency(this)'>"+subAgencyPoint.getName()+"", true);
folderNode.getChildren().add(folderNodePoint);
//personNode.getChildren().add(folderNode);
}
personNode.getChildren().add(folderNode);
}
treeData.getChildren().add(personNode);
}
}
}
return treeData;
}
/**
* NOTE: This is just to show an alternative way of supplying tree data. You can supply either a
* TreeModel or TreeNode.
*
* @return TreeModel
*/
public TreeModel getExpandedTreeData()
{
return new TreeModelBase(getTreeData());
}
public void setTree(HtmlTree tree)
{
_tree = tree;
}
public HtmlTree getTree()
{
return _tree;
}
public String expandAll()
{
_tree.expandAll();
return null;
}
private String _nodePath;
public void setNodePath(String nodePath)
{
_nodePath = nodePath;
}
public String getNodePath()
{
return _nodePath;
}
public void checkPath(FacesContext context, UIComponent component, java.lang.Object value)
{
// make sure path is valid (leaves cannot be expanded or renderer will complain)
FacesMessage message = null;
String[] path = _tree.getPathInformation(value.toString());
for (int i = 0; i < path.length; i++)
{
String nodeId = path;
try
{
_tree.setNodeId(nodeId);
}
catch (Exception e)
{
throw new ValidatorException(message, e);
}
if (_tree.getNode().isLeaf())
{
message = new FacesMessage(FacesMessage.SEVERITY_ERROR,
"Invalid node path (cannot expand a leaf): " + nodeId,
"Invalid node path (cannot expand a leaf): " + nodeId);
throw new ValidatorException(message);
}
}
}
public void expandPath(ActionEvent event)
{
_tree.expandPath(_tree.getPathInformation(_nodePath));
}
}
it support your checkboxi
Message was edited by:
lysmart
the page process is
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<fieldset><legend>代理(点)</legend>
<t:tree2 value="#{treeBacker.treeData}" var="node" varNodeToggler="t" showNav="false">
<f:facet name="person">
<h:panelGroup>
<f:facet name="expand">
<t:graphicImage value="../images/yellow-folder-open.png" rendered="#{t.nodeExpanded}" border="0" /></f:facet>
<f:facet name="collapse">
<t:graphicImage value="../images/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}" border="0" /></f:facet><%--
<h:selectBooleanCheckbox value="#{node.select}"/>
--%><h:outputText value="#{node.description}" styleClass="nodeFolder" escape="false"/></h:panelGroup></f:facet>
<f:facet name="foo-folder">
<h:panelGroup>
<f:facet name="expand">
<t:graphicImage value="../images/yellow-folder-open.png" rendered="#{t.nodeExpanded}" border="0" /></f:facet>
<f:facet name="collapse">
<t:graphicImage value="../images/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}" border="0" /></f:facet>
<h:outputText value="#{node.description}" styleClass="nodeFolder" escape="false"/>
<h:outputText value=" (#{node.childCount})" styleClass="childCount" escape="false" rendered="#{!empty node.children}" /></h:panelGroup></f:facet>
<f:facet name="bar-folder">
<h:panelGroup>
<f:facet name="expand">
<t:graphicImage value="../images/blue-folder-open.gif" rendered="#{t.nodeExpanded}" border="0" /></f:facet>
<f:facet name="collapse">
<t:graphicImage value="../images/blue-folder-closed.png" rendered="#{!t.nodeExpanded}" border="0" /></f:facet>
<h:outputText value="#{node.description}" styleClass="nodeFolder" escape="false"/>
<h:outputText value=" (#{node.childCount})" styleClass="childCount" escape="false" rendered="#{!empty node.children}" /></h:panelGroup></f:facet>
<f:facet name="document">
<h:panelGroup>
<h:commandLink immediate="true" styleClass="#{t.nodeSelected ? 'documentSelected':'document'}" actionListener="#{t.setNodeSelected}">
<t:graphicImage value="../images/document.png" border="0" />
<h:outputText value="#{node.description}" escape="false"/>
<f:param name="docNum" value="#{node.identifier}" />
</h:commandLink></h:panelGroup>
</f:facet>
</t:tree2>
</fieldset>
<script language="javascript">
function getAllCheckBox(){
var checkBoxArr = new Array();//标记为input的标签元素
var CheckBoxArray = new Array();//标签类型为CheckBox标签元素
with (document.all) {
checkBoxArr = document.getElementsByTagName("input");//提出标记为input的标签元素
for(var j = 0;j<checkBoxArr.length;j++){
if(checkBoxArr[j].type=='checkbox'){//提取标签类型为CheckBox的标签元素
CheckBoxArray[CheckBoxArray.length] = checkBoxArr[j];
}
}
}
return CheckBoxArray;
}
function getSelectAgency(obj){
var allSelectAgencyIds = "";
var allCheckBoxArray = new Array();
var checkBoxLength = obj.id;
allCheckBoxArray = getAllCheckBox();
if(obj.checked){
for(var j=0;j<allCheckBoxArray.length;j++){
if(checkBoxLength+'_' == allCheckBoxArray[j].id.substring(0,checkBoxLength.length+1)){
allCheckBoxArray[j].checked = true;
}
}
}else{
for(var j=0;j<allCheckBoxArray.length;j++){
if(checkBoxLength+'_' == allCheckBoxArray[j].id.substring(0,checkBoxLength.length+1)){
allCheckBoxArray[j].checked = false;
}
}
}
}
function getSelectAgencyIds(){
var allSelectAgencyIds = "";
var allCheckBoxArray = new Array();
allCheckBoxArray = getAllCheckBox();
for(var i=0;i<allCheckBoxArray.length;i++){
if(allCheckBoxArray.checked){
if(allSelectAgencyIds == "")
allSelectAgencyIds = allCheckBoxArray.value;
else
allSelectAgencyIds += "," + allCheckBoxArray.value;
}
}
return allSelectAgencyIds;
}
></script>
Ho my god ! Thanks a lot, I will give this a try too ! Especially since I have given up ICEFaces : it is too heavy-weight for my simple need.
Cheers !
