有条件地基于另一个组件的ajax事件呈现组件

时间:2015-02-03 19:20:06

标签: jsf jsf-2 primefaces

我是JSF的新手,我正在尝试使用PrimeFaces和Wildfly编写一个简单的数据库资源管理器。我想要一个用于浏览数据的Tree组件,使用GridPanel来显示从树中选择内容时的详细信息。没有什么太复杂,只是为了掌握语法和逻辑。

我的问题是:当我从树中选择一些东西时,在ManagedBean中正确调用了回调方法,但是GridPanel没有出现。当ManagedBeans中的选定值不为空时,必须显示它。

的index.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Media Explorer</title>
    <script name="jquery/jquery.js" library="primefaces"></script>
    <style>
.ui-tree {
    width: 860px;
}
</style>
</h:head>

<h:body>

    <p:layout fullPage="true">
        <p:layoutUnit position="north" size="100" header="Media Explorer"
            resizable="false" closable="false" collapsible="false">

        </p:layoutUnit>

        <p:layoutUnit position="south" size="100" resizable="false"
            closable="false" collapsible="false">
        </p:layoutUnit>

        <p:layoutUnit position="west" size="900" header="Media List"
            resizable="true" closable="false" collapsible="true">
            <h:form>
                <p:tree value="#{treeBasicView.root}" var="node" dynamic="true"
                    selectionMode="single" selection="#{treeBasicView.singleSelectedTreeNode}">
                    <p:treeNode expandedIcon="ui-icon-folder-open"
                        collapsedIcon="ui-icon-folder-collapsed">
                        <h:outputText value="#{node}" />
                    </p:treeNode>
                    <p:treeNode type="document" icon="ui-icon ui-icon-document">
                        <h:outputText value="#{node}" />
                    </p:treeNode>
                    <p:treeNode type="image" icon="ui-icon ui-icon-image">
                        <h:outputText value="#{node}" />
                    </p:treeNode>
                    <p:treeNode type="video" icon="ui-icon ui-icon-video">
                        <h:outputText value="#{node}" />
                    </p:treeNode>
                    <p:ajax event="select" listener="#{treeBasicView.onNodeSelect}" />
                    <p:ajax event="expand" listener="#{treeBasicView.onNodeExpand}" />
                    <p:ajax event="collapse" listener="#{treeBasicView.onNodeCollapse}" />
                    <p:ajax event="unselect" listener="#{treeBasicView.onNodeUnSelect}" />
                </p:tree>
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="east" size="200" header="Preview"
            resizable="true" closable="false" collapsible="true" effect="drop">


        </p:layoutUnit>

        <p:layoutUnit position="center" header="Media Info">

            <p:panelGrid columns="2" rendered="${!empty treeBasicView.singleSelectedTreeNode}">
                <f:facet name="header">
                    <p:graphicImage value="art/icon.jpg" width="200" />
                </f:facet>

                <h:outputText value="Title:" />
                <h:outputText value="#{treeBasicView.selected.title}" />

                <h:outputText value="Path:" />
                <h:outputText value="#{treeBasicView.selected.path}" />

                <h:outputText value="Filename:" />
                <h:outputText value="#{treeBasicView.selected.fileName}" />

                <h:outputText value="Size:" />
                <h:outputText value="#{treeBasicView.selected.sizeInBytes}" />
            </p:panelGrid>

        </p:layoutUnit>
    </p:layout>

</h:body>
</html>

BasicView.java

import java.io.Serializable;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.apache.commons.beanutils.DynaBean;
import org.jboss.logging.Logger;
import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import db.DBHelper;
import entity.Category;
import entity.File;
import entity.Media;

@ManagedBean(name = "treeBasicView")
@SessionScoped

public class BasicView implements Serializable {

    private TreeNode root;
    private TreeNode singleSelectedTreeNode;

    public TreeNode getSingleSelectedTreeNode() {
        return singleSelectedTreeNode;
    }

    public void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {
        this.singleSelectedTreeNode = singleSelectedTreeNode;
    }

    @PostConstruct
    public void init() {
        DBHelper db = new DBHelper();
        root = new DefaultTreeNode("Root", null);

        // POPULATE THE TREE

    }

    public TreeNode getRoot() {
        return root;
    }

    public void setRoot(TreeNode root) {
        this.root = root;
    }

    public File getSelected() {
        return selected;
    }

    public void setSelected(File selected) {
        this.selected = selected;
    }

    public void onNodeSelect(NodeSelectEvent event) {

        this.singleSelectedTreeNode = event.getTreeNode();

    }

    public void onNodeExpand(NodeExpandEvent event) {
        String node = event.getTreeNode().getData().toString();
        logger.debug(node);
    }

    public void onNodeCollapse(NodeCollapseEvent event) {
        String node = event.getTreeNode().getData().toString();
        logger.debug(node);
    }

    public void onNodeUnSelect(NodeUnselectEvent event) {
        String node = event.getTreeNode().getData().toString();
        logger.debug(node);
    }

}

我错过了什么? 提前谢谢。

0 个答案:

没有答案